网页设计时应注意什么问题
网页设计时应注意什么问题?多重渐变几种鲜艳的色彩和大量有鲜明对比的色调及饱和度,会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色),再搭配反相的单色(白灰黑)以获得一个漂亮的搭配。下面是更多网页设计注意问题的介绍,希望对您有所帮助。
一、太多的色彩
背景一种颜色,内容文本一种颜色,链接一种颜色,页头和lightbox一种颜色,图案和页脚各一种颜色。这很好,因为它帮助区分了有用的内容。但是,多重渐变几种鲜艳的色彩和大量有鲜明对比的色调及饱和度,会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色),再搭配反相的单色(白灰黑)以获得一个漂亮的搭配。这里强调下豆瓣的配色。也是我喜欢的颜色搭配。
二、太多的字体
一般一个简单的网页设计,一般字体不超过3种。多则乱没有足够的空白
空白可以说是设计中最重要的一部分。它有助于防止用户在浏览网站时变得疲惫,它可以在内容中划出距离,而且它本身也看上去不错。空白不是必须用白色的,而是,它仅仅是为其他设计元素提供间隔和缓冲的空间不考虑用户的分辨率
你的屏幕分辨率有2560像素,这非常好。但很多人还在屏幕上用1024像素的分率,有些还在用640*480或800*600。虽然这种分辨率的显示器正在减少,但采用更小的分辨率的手机设备也来了。现在的网页设计宽度标准是960像素,虽然没有照顾到每一种分辨率,但在主流分辨率上可以呈现的最好。假如你希望面对大量的手机用户,最好考虑一个手机版设计。
三、贫乏的尺寸大小
标准做法是h1的文字大于h2的文字,头部文字大于段落文字。尽量保持一致的尺寸,因为它有助于一致性(第8条)和内容层次(第4条)。保持文字的可读性,但不要太大,让字体的大小表现信息的重要性。还有,10像素以下的尺寸对大量阅读的人来说太小了。
四、没有足够的文字间距
与空白有关,文字间距有两个部分,一个是字距(这个不能用CSS直接调整,可以通过一些高级技术解决),关系到字母之间的空白。一个是行距,可以用CSS直接调整,关系到两行文字之间的距离。这些有助于区分行与段落,使用户更容易阅读文字。
五、对比的问题
你考虑过阅读黑底白字和白底黑字的不同吗?你有没有试过阅读一下白底灰字?有些方式之所以比其他的更好,其原因就是这是一种眼睛感知到对比的方式。如果你很难舒服的阅读文字,考虑一下改变字体大小或方式。成为一个大师级网页设计师的秘诀:对比,对比,对比。
同一件事情做的不够多,或做的太多(过犹不及多重导航非常好,如一个在页头一个在页脚。在页脚加一个”返回顶部”的按钮也很好。但是,太多指向同一目标的途径会降低可用性。让你的奶奶用下你的网站,如果她搞不定,想想哪些东西让初次访问的用户拒绝使用这个网站。
六、没有内容层次
用户的眼睛喜欢有秩序的设计,如头部包含导航和LOGO,特定内容使用lightbox,三列分栏,页脚。它有助于在内心组织重要的信息,并引导用户注意在你想让他注意的地方。在传统艺术中,新手们被教导色彩价值和线性透视三原则和其他艺术指导。在网页设计中,没有特别奉行的准则,但以直观的方式组织你的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。当然一成不变不是我们所鼓励的。
七、不一致
一致性是网页设计的关键。它是把网页设计组织在一起的方式,可以创造一种紧密结合的感觉。在网站页面互相链接的情况下,它可以帮助用户把所有页面都联系在一起。如果你在整个网站持续改变字体大小和色彩,用户很快会觉得不知所措。
网页设计的注意问题
1、页面内容要新颖
网页内容的选择要不落俗套,要重点突出一个“新”字,这个原则要求我们在设计网站内容时不能照抄别人的内容,要结合自身的实际情况创作出一个独一无二的网站。 放眼望去,网上的许多个人主页简直就是杂货店,内容包罗万象,题材千篇一律,人人都是软件下载,个个都有网络导航,从头到尾找不出一丝“鲜”意。所以,我们在设计网页时,要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”,如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。
2、网页命名要简洁
由于一个网站不可能就是由一个网页组成,它有许多子页面,为了能使这些页面有效地被连接起来,用户最后能给这些页面起一些有代表性的而且简洁易记的网页名称。这样既会有助于你以后方便管理网页,在向搜索引擎提交你的网页时更容易被别人索引到。在给网页命名时,最好使用自己常用的或符合页面内容的小写英文字母,这直接关系到页面上的连接。
3、要及时更新网页
网页制作好后,不能说万事大吉了,其实事后的工作量更大。因为网页制作是一时的,而维护更新的工作是每天都要做的。要及时把网页上已经作废的连接应该立即删除掉,比如用户无意中点击了页面中的一个连接,在苦苦的等待之后,换来的是无法访问的结果,那么他们会对你的网页大失所望,可能以后再也不会光顾你的网页了。若不能及时更新,也最好在主页上发布信息,告诉前来访问的朋友,因有特殊情况需要离开一段时间,未能及时更新主页,希望各位见谅,这样就能给人一种对别人负责的感觉,同时能得到网友的信任。
4、注意视觉效果
设计Web页面时,一定要用1024*768的分辨率来 分别观察。许多浏览器使用1024*768的分辨率,尽管在1280*1024高分辨率下一 些Web页面看上去很具吸引力,但在1024*768的模式下可能会黯然失色。作一点小小的努力,设计一个在不同分辨率下都能正常显示的网页
5、随时注意网站升级
时刻注意网站的运行状况。性能很好的主机随着访问人数的增加,可能会运行缓慢。但是,如果你不想失去访问者的话,一定要仔细计划好你的升级计划。
6、 网页内容要易读
网站设计最重要的诀窍,恐怕就是你的网页要易读。这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果,别用花里胡哨的色彩组合,让人看起你的网页来很费劲。一般来说,浅色背景下的深色文字为佳 。这个要点要求你最好别把文字的规格设得太小、也不能太大。文字太小,人家读起来难受;文字太大,或者文字视觉效果变化频繁,像是冲着人大喊大叫,看起来不舒服。另外,最好让文本左对齐,而不是居中。按当代中文的阅读习惯,文本大都居左的。当然,标题一般应该居中,因为这符合读者的阅读习惯。
7、善用表格来布局
不要把一个网站的内容象作报告似的一二三四地罗列出来,要注意多用表格把网站内容的层次性和空间性突出显示出来,使人一眼就能看出你的网站重点突出,结构分明。
8、 少用特殊字体
虽然你可以在你的HTML中使用特殊的字体,但是,你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面,在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性,这虽然允许你使用特殊的字体,但是仍需要一些变通的方法,以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题,但是只有最新版的浏览器才支持CSS。
9、多学习和使用超文本标记语言(标准通用标记语言下的一个应用)
为了成功地设计网站,你必须理解HTML(标准通用标记语言下的一个应用)是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案,用Notepad制作网页。因为用HTML设计网站,可以控制设计的整个过程。但是,如果你仅仅是网站设计的新手,你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中,HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式,以便你在把网站发送到Web之前,预览你的网站。
10、尽量少用Java程序
不要大幅度地使用的Java程序,能够用javascript替代效果的则尽量不要使用java。因为来讲java的运行速度实在慢的让人无法忍受,往往使浏览者没有耐心等页面全部显示出来,这样你的精心设计便毫无效果啦。
网页制作中需要注意的问题
1、XHTML和CSS文件注释
文件注释必不可少,但是要适可而止。注释太多回增大文件的大小,受带宽影响,用户在浏览网页时增加了等待时间,造成不好的用户体验。网站在上线前先要在测试服务器上进行测试,测试好没问题后,将相关的CSS文件、JavaScript文件先删除注释,然后进行压缩。这些文件的压缩可以利用下载相关工具实现,也可以使用在线压缩工具实现。
2、清除浮动的方法
1)在结尾出加空div标签clear:both
2)在父级div顶一overflow:hidden
3)在父级div顶一味蕾:after和zoom
3、块级元素和行内元素
块级元素是指这些元素显示为一块内容。与之相反,行内元素是指这些元素的内容显示在行中。每个块级元素都是从一个新行开始显示,而且其后的元素也是另起一行进行显示。而行内元素一般显示在块级元素里面。
块级元素和行内元素之间可以通过设置display的值来进行转换。将diaplay的值设置为block,可以让行内元素表现得像块级元素一样。也可以通过把display得值设置为inline,让块级元素表现得跟行内元素一样。
4、CSS文档流
网页元素按照XHTML结构自上而下,从左向右一行一行得布局,叫做CSS文档流。
5、label标签中得for属性
当用户选择label标签时,浏览器回自动将焦点转到和标签相关的表单元素上。
6、zoom:1的作用
一般是为了解决IE6下样式不兼容的问题。
HasLayout是IE渲染引擎的一个内部组成部分。在IE中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了HasLayout的属性,属性值可以为true或false。当一个元素的HasLayout属性值为true时,我们说这个元素有一个布局(layout)。
大部分的IE显示错误,都可以通过激发元素的HasLayout属性来修正。可以通过设置一些CSS属性来激发元素的HasLayout属性,使其“拥有布局”。在IE 6中就可以通过zoom:1来激发元素的HasLayout。
7、CSS Sprites技术利弊
利:减少对服务器的请求数量,进而加快页面加载速度。
弊:1)测算每个背景单元的精确位置,很繁琐。
2)如果页面背景有少许改动,一般就要改合并的图片。
网页制作中应该注意的问题
1、marquee标签
标签里面是滚动文字的内容
2、word-spacing
修改字间距。简单地说,课室是任何非空白字符组成地串,并由某种空白符包围。所以象形文字是无法指定字间隔地。除非字之间有空格。因此,这个属性主要是针对英文单词地,要使其对中文起作用,需要在中文之间加空格。肯恩那个设计者认为两词之间没空格就是一个词。
3、display:inline-block;的使用方法
在桌导航条的时候,一般会用到ul-li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行。但是如果当行中li的数目不确定,并且又需要导航中的文字在页面中居中显示时,用这种方法就不太方便了,因为每次修改当行中li的数目量或文字时都需要调整ul或者第一个li标签的padding或者margin属性值。
还有一种方法就是设置li为“display:inline-block;”这样就可以达到同样的效果,而且无论有几个li标签或者li中的文字如何变化,只要设置ul中的text-align属性的值为center就可以实现ul中的所有文字水平居中显示。
IE6、IE7块级元素不识别inline-block,对于行内元素不存在兼容问题。可以用*display:inline;*zoom:1来代替。
4、网页设计稿中特殊字体的处理
网页浏览者在看网页时使用自己电脑上的字库来显示字体的,如果在制作网页时用了特殊的字体,必须保证浏览网页的用户的电脑上也有这样的字库才能看到相同的效果,如果用户的电脑上没有所定义的字体,那么它会自动用系统默认字体来显示,一般中文的默认字体都是宋体。
特殊字体只能做成图片。
CSS中常用的字体包括:宋体、黑体、微软雅黑、Arial、verdana、serif。
5、切图时应该保存成那种图片格式
1)JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。对于写实的摄影图片或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。根据经验,在页面中使用的商品图片、采用人像或者实物素材制作的广告banner等图像更适合采用JPG的图片格式保存。
2)对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。图像上颜色较少,并且主要以纯色或者平滑的渐变色进行填充。或者具备较大亮度差异以及强烈对比的简单图像适合使用PNG格式进行存储。
3)PNG8支持1为布尔透明通道,所谓布尔透明值得是要么完全透明要么完全不透明。而PNG24则支持8为的Alpha通道透明,也就是说可以存储从完全透明到完全不透明一共256个层级的透明度。
4)对于小图标或小动画,可以保存成gif格式。
6、制作中需要注意的问题——z-index属性
1、z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
2、该属性设置一个定位元素沿z轴的位置,z轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
7、兼容问题的技巧
1)写DTD声明
2)为网页样式引入CSS重置代码,重置各浏览器默认属性值。
3)同时为一个元素写float和margin-left或margin-right时,同时设置display:inline,为解决IE6双边距问题。
4)给元素设置高度后,同时设置overflow:hedden,避免在IE6中高度继续扩展的问题
5)对于文本,在使用margin-left、padding-left、margin-top、padding-top之前有限考虑是否可用text-indent和line-height代替,因为计算尺寸的代价相对来说要大些。