用表格布局网页时出现错位怎么办

在实际应用中经常会发现,精心制作的网页在不同的屏幕分辨率时,或改变窗口时常出现一些页面变形或内容扭曲等现象。在800*600的分辨率下,一切正常,而到了1024*800时,则多个表格或有的居中,有的却左排列或右排列,很难看,这是什么原因。

在解决这个问题之前,我们讲一下网页制作中的表格的排列。表格有左排列、居中、右排列三种排列方式,如果没有进行特别设置,则默认为是居左排列。这就是问题之所在,在800*600的分辨率下,表格恰好就是编辑区域那么宽,不容易察觉,而到了1024*800的时候,就会显示出一部分空白区域,解决的办法比较简单,即将所有表格的单元格都设置为居中。

艳丽的网页设计

我们网站的设计都是各式各样的,整体颜色的表达会让人们有不同的感触和不同的想法,像我的话也许是性格比较内向的原因,一直都比较喜欢用暗色来表达我想要表达的东西,很多东西都喜欢用黑色,灰色来运用,太艳丽的颜色总觉得不适合我,这就是一个人的个人风格习惯了,但像我有一同学就和我不一样了,他性格相对比较开朗,就喜欢运用比较艳丽的颜色来表达他的一些想法,我就说说我对鲜艳的色彩对网站设计的一个感觉吧。
 
1 在我同学的网站设计作品中,我看到他大多是把色彩鲜艳的好几种颜色集中到一起,做成素材来运用,比如网页背景,如果他在网页背景中大量的使用了鲜艳的颜色,那在文字导航和其他的设计中就运用了大量的暗色素材,整体看起来非常的明了,给人主题鲜明,积极向上的效果。要是需要这样主题的设计类型大家不妨试试这样搭配。
 
2 我们把这种鲜明的颜色搭配叫做彩虹色彩运用,大家都知道彩虹的颜色都是明亮鲜明的颜色组成的,如果我们设计的网页比较偏暗的话,不妨试试把导航条的颜色设计的鲜明一点,大家在看看效果会怎么样,看看我这个提议会不会是多余的呢? 其实今天就是想给大家建议我们设计中可以利用反差色彩来设计,这样的效果真的挺不错的。

如何做好导航

在我们网站设计中,都知道构架,色彩,的重要性,今天我们就来说说导航,导航其实在网页设计中也是有着非常重要的位置的,导航是引导大家继续浏览我们设计的网页的一个传感器,让浏览者能更好的浏览我们的网页。
 
1 个人经验来说我们的导航设计首先是要简洁,层次不要太多适合就好,这样搜索起来会比较方便,还要注意的就是我们的导航的布局,相关的内容链接的方向要设计的让大家浏览的时候比较容易找到,要按照大多的浏览者的习惯来确定,如:我们不能说为了特别把我们的主要内容的链接都放到页尾处,找了一圈才能找到,一般我们都是放在左侧,从上往下这样设计,大家一眼就能看出来在哪里。
 
2 导航的设计中最好是不要使用复杂的js或者flash,多使用文字链接,flash导航造成搜索引擎收录困难,在导航中合理的运用搜索的关键词和超级链接,增加对我们设计网站的推广作用,但我们要注意2-4个字为宜,导航设计对整个网页设计来说是一个不容忽视的细活,祝大家都能够设计好的导航为自己设计网页加分

分享漂亮的荧光紫色字体的做法

网页制作中会用到各种各样的字体,很多图片的LOGO都需要我们自己去制作,网站的名称和一些我们需要用特效来表达的一些字体效果都要我们自己制作素材,不能什么都去下载,自己制作的东西更能更好的表达我们要直接表述的想法和理念,让我们的网站更完整,看起来更专业。今天就给大家推荐一种紫色发光文字的做法,这种字体一般可以用到我们网页布局中的一些插图文字,比较适合整体比较稍微暗一点网页中,它的效果有点萤火虫的感觉。
 
1 选用一张黑紫色的背景素材和一张比较亮一点的高光背景,新建我们要用的素材大小(长条的最好一般我们网页中使用的图片素材都是长条的)打开紫色的背景素材,用鼠标拖动背景到我们新建的图层里面,按ctrl+t调整图像大小到合适,同样的方法把高光也拖进去,然后把高光的图层性质,改为滤色,这样高光效果就会出现在我们的黑紫色背景中了。
 
2 接下来我们就开始写我们要用的字啦,选用好我们要写的字体是哪一种文字颜色为白色,然后写上文字内容,把模式改为混合模式,打开图像里面的图层样式对文字进行编辑,在向外发光和向内发光前面打勾把颜色分别设置为:#ff00c6和#ff008a。设置好后基本的效果就出来了,为了更好看,我们把文字格式化,复制文字图层选择图像-旋转画布-垂直翻转,把字体透明度设置低一点,就有更立体的效果啦

层的定位技巧

在层的实际应用中,定位一直是个问题,怎样保证在800*600和1024*768分辨率下的显示都正常,有一些很简单的方法可以部分解决这个问题,比如让页面元素全部居左,这样在定位时只要设置左间距即可。在Dreamweaver中,默认创建出的层是按照绝对坐标定位的,即style=”position:absolute;”。如果将absolute改成relative,则层会按照相对定位的原则进行定位,即这个层的坐标就是外面标签的相对坐标。所以,我们可以在大框架上使用表格排版,个别地方使用表格内的层来实现。从整体上来说,也可以先画一个大表格,将相对定位的层全部放入表格中,这样大表格可以居中,也可以居左,在整体版面控制上就方便了许多。

在Dreamweaver中使用层的几点建议

在Dreamweaver中层的使用很广泛,以下是几点建议,避免开发者在使用中陷入困境。

一、如果要嵌套层,少用多层父层,应共享一个共同的单一父层。尽量将文本放在层中的一个表格里,并且表格应该是绝对大小的(以像素为单位,而不是百分比)且不大于层,不过主表中的嵌套表可以设置为相对的百分比大小。
 
二、尽量不要在表格中放置层。总是在任何具有层或CSS样式的页面使用Netscape Resize Fix这个插件(Dreamweaver已经内嵌这个功能,它会在生成层代码的同时在页面插入Resize代码)。不要期望当浏览器窗口大小或屏幕分辨率发生变化后,绝对定位的层仍能保持与居中的表格或页面的内容对齐。

垂直布局的使用

网页是网站构成的基本元素,当我们轻点鼠标,在网海中遨游,一幅幅精彩的网页就会呈现在我们面前。那么,网页精彩与否的因素是什么,是色彩的搭配,还是文字的变化,或是图片的处理等,这些当然是不可胡洛的因素,除了这些,还有一个非常重要的因素——网页的版式和布局。

浏览网页第一印象来自版式,在网页中这些来自文字排列、绕排、段落强制对齐以及段落缩进与首字下沉等,在这里我们主要讲一下文字竖排。文字竖排是IE5.5以上的版本才有的功能。当我们浏览几乎所有的web页时,段落中的文字走向都是从左向右的,文本自动换行时,新的一行位于前一行下方,从页面的左侧开始。这是非常自然的,我们甚至不会主要到它。

在网页设计中CSS属性转换

布局属性控制已应用 CSS 样式规则的 HTML 元素如何与页面上的其他元素进行交互。例如,可隐藏元素,也可防止旁边的文本随着已应用样式规则的元素的特定边框进行流动。布局属性还控制元素行为的某些方面。可设置溢出属性,它的作用是确定滚动条能否出现,还确定通过剪辑某些区域,将显示元素的哪部分。

很多CSS属性可能拥有与方向或位置相关的值,如顶部、底部、左边和右边等。在垂直布局的环境中如何转换这些值,通常,影响方向或位置的CSS属性石被绝对转换的,这表明这种样式隐含的或明确的方向性并不随垂直布局而改变。例如,border-left属性在垂直布局中,它表示在元素的左边界上绘制一个边框,因为这种放置时绝对的,所以在垂直布局中,border-left并不会变为border-top。

第一屏及导航栏的位置

所谓的第一屏,是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多大呢?其实这是未知的。一般来讲,800*600的屏幕显示模式(这也是最常用的),在IE安装后默认的状态(即工具栏地址等没有改变)下,IE窗口内能看到的部分为778px*435px,我们以这个大小为标准就行了,毕竟,在无法适合所有人的情况下,我们只能为大多数人考虑。说了那么多,无非是一个标准的问题,第一屏当然要放最主要的内容,关键是,我们要对第一屏能显示的面积有个估计,而不仅仅以自己的屏幕为准。其实网页制作的一个很麻烦的地方就是浏览者的屏幕是未知的。

网页色彩使用技巧

一、了解网站所要传达的信息和品牌。选择可以加强这些信息的颜色。例如,如果在一个强调稳健的金融机构,就要选择冷静、柔和的颜色,像是蓝、灰或绿。在这样的状况下,如果使用暖色系或活泼的颜色可能会破坏网站的品牌。
一、了解网站所要传达的信息和品牌。选择可以加强这些信息的颜色。例如,如果在一个强调稳健的金融机构,就要选择冷静、柔和的颜色,像是蓝、灰或绿。在这样的状况下,如果使用暖色系或活泼的颜色可能会破坏网站的品牌。

二、了解读者群。文化差异可能会使色彩产生非预期的反应。同时,不同地区与不同年龄层对颜色的反应也会有所不同。年轻族群一般比较喜欢饱和色,但这样的颜色却引不起高年龄层的兴趣。