谈谈如何最优化设计网页布局和网页空白

很多朋友再设计SS/XS风格的时候经常遇到DW超载（CPU100%）电脑速度过慢。
设计完之后上传到空间一片空白。
没有注释。做到最后自己也看不懂哪块是哪块
CSS书写混乱，以前请注意下。。。

设计留白设计

　　国画中有一句话描述这种艺术形式的空间布局比较经典，就是“计白当黑”，表明了白也就是空的地方和着的墨一样都是国画整体的组成部分，如何利用空间中的留白是非常重要的，也是提升艺术性的途径，有些尽管是画的很不错，但是看起来不舒服，就是没有重视留白，造成了画面的整体上的失败。对于网页设计来说，有何尝不是如此呢?也许现在我们没有把它提升到一个艺术审美的角度来看待，所以没有人去深究过网页的艺术性，我想这是我们网页设计者孜孜以求的方向，因为未来的网络技术高度发达，人们对于更高层次的追求也就必然会牵涉到对艺术、对美的追求。既然如此，我们就应该把眼光放远一点，把网页的设计提到这个层次来考虑。尽量的克服目前技术带来的限制。既然如此，按照艺术审美的观点，网页上的留白也是一个组成部分，同其它的主要的内容入文本、图片、动画一样，是每个设计者在制作网页时要一起考虑的。

　　提升到艺术的高度来看待留白是通过视觉上的手段，留白也可以给人带来心理上的轻松与快乐，也可以给人带来紧张与节奏，通过这种手段可以向使用者表达出设计者的心理感觉，设计者在设计网页的同时也在同自己的使用对象在作一种交流，好的设计者能够达到同自己的使用对象进行心理对话的程度。不光通过页面上的文字、图片、动画的组合和排列，同时借助留白进行表达。可以达到非常好的效果，例如一个休闲的网站，设计者要传达给使用者的一个信息就是要是让他们轻松随意，无拘无束，光通过网页上的图片和文字的表达是干巴巴的，没有感情色彩的。如果能通过网页设计反映出这种感情色彩，显然这样的设计是较为高明的设计。能实现吗?当然可以，借助网页上的留白就可以，让留白更多的显示出自己的特色，在联系图片和文字的中间架起一道桥梁

　　网页导航设计的注意要点

　　一、注意超连结颜色与单纯叙述文字的颜色呈现

　　WWW的语言—HTML允许Webpage设计者特别标明单纯叙述文字与超连结的颜色，以便丰富Webpage的色彩呈现。如果您的网站

　　充满知识性的信息，欲传达给访问者，建议您将网页内的文字与超连结颜色，设计成较干净素雅的色调，会较有利于阅读∶纯粹的叙述文字采用较暗、较深的颜色来呈现(如∶黑色、墨绿色、暗褐色)，超连结文字则以较鲜明抢眼的色彩来强调 (如∶亮黄色、翠绿色、鲜橘色)，至于探访过的超连结则采用较低于原超连结亮度的颜色做呈现。

　　二、测试所有的超连结与导览按钮的真实可行性

　　Webpage上线之后，第一件该做的事，是逐一测试每一页的每一个超连结与每一个导览按钮的真实可行性。彻底检验有没有失败的link无法连结到该连结的Webpage，却反而冒出“FileNotFound”的错误讯号出来。这是一个负责任、够水准的

　　Webpage设计者对自己的作品应有的基本品质要求。

　　如果您果真有那么多的超连结必须提供给读者，不如将这些超连结以条列的方式，一笔一笔清楚地列在一选单页或目录页上，既不防碍走文的顺畅，又呈现一目了然的导览连结。

三、让超连结的字串长短适中且走文自然

　　抓住能传达主要讯息的字眼当做超连结的锚点(anchor)，可有效地控制住超连结的字串长度，避免字串过长(如∶整行、整句都是锚点字串)或过短(如∶仅一个字当做锚点)，而不利于读者的阅读或点取。

　　四、当导览按钮连结到目前此页时

　　各Webpage若重复使用同一组的导览按钮，无可避免地会产生某一导览按钮连结到目前此页的情形。为达成界面设计的一致性，并没有绝对的必要性拿掉此导览按钮，但Webpage设计者可让此按钮不再具有超连结的功能;或将此按钮的彩度、亮度

　　降低(如∶深绿色变成淡绿色，亮红色变成暗红色)，使读者可清楚地意识到∶这个暗设下来的导览按钮不再具有超连结的功能。

　　五、分析、说明您提供的bookmarks或coollinks

　　常常看到热心的Webpage设计者条列了精心收集的bookmarks或coollinks，以分享读者个人遨游WWW的美好经验。但多数Webpage设计者就只提供一大串links，并不分门别类，也不加以分析、说明为什么这个link好，值得推荐?那个link的主要内容精彩之处?又在哪?提供您的bookmarks或coollinks是一大善举，但未加以分析、说明，却变得功亏一篑。多花几分钟，将您提供的bookmarks或coollinks稍加分类、注解，可提供读者清晰的概念与无限的方便，也使您的站台的导览系统更加周全完善。未加以说明、注解coollinks，其实一点也不cool。老实说，任何人都可以到Yahoo轻易地找到上百上千的links。您若未对这些推荐的links加以个人独特的评论、介绍，读者又何劳偏得到您的站台去找索引呢?任何一个分类索引或搜寻引擎都绝对比您条列的links还要更完备齐全。

　　六、在具有前后连续顺序的文件里提供必要的连结

　　将篇幅过长的文件分隔成数篇较小的Webpages大大地增加了界面的亲和性，但在导览按钮与超连结的配置上，Webpage设计者则要更细心周全地安排，使得读者不论身处您站台的哪一阶层，依然能够快速便捷地通往其他任何一个页面。Webpage设计者应特别注意∶

　　1.提供“上一页”、“下一页”、“回子目录页”与“回首页”的导览按钮或超链结在一系列具前后连续顺序的文件里，每篇Webpage都至少应提供“上一页”、“下一页”、“回子目录页”与“回首页”的导览按钮或超连结，可使读者能够立

　　即得知自己所在的页面，是属于一份较大文件内的一小部分。(考虑、体贴一下某读者不是从您的Home顺序连结至此页，而是依循别的站台的某个link跳跃连结至此)。并且可以借由这些links随时参考连结“上一页”、“下一页”与本页的连贯

　　内容;直接点取“回子目录页”查寻其他相关的标题;或直接跳跃至homepage，浏览其他不同项目的信息。

　　2.简明扼要地标明此页、上一页与下一页文件的标题或内容梗概。

　　在一系列具有前后连续顺序的文件里，每篇Webpage都应加上一个具有说明性的标题，使读者一目了然，马上抓住这一页的重点。而完善的导览系统除了提供“上一页”、“下一页”的导览按钮或超连结外，更添加精简达意的上一页与下一页标

　　题、内容提要，使读者即使尚未点取这些Webpages时，亦能先梗概地了解自己将连结至什么样的Webpage。

　　3.提醒读者某一系列文件已到尽头。

　　当读者已达某一系列文件的最后一页时，Webpage设计者应提供一小段告示提醒读者，同时不再提供“下一页”的导览按钮或超连结。但基于Webpage界面设计的一致性，或许有些Webpage设计者并不希望在同一系列的最后一篇Webpage里忽然少了

　　一个先前每页都有的“下一页”导览按钮(尤其是精心设计过的图形化导览按钮)。为达此目的，可考虑将最后一页的“下一页”导览按钮颜色暗沉下来，且不赋予超连结的功能，并提供一小段告示提醒读者，此系列文件已到尽头，不再有“下一页”的内容。

　七、在较长的Webpage内提供目录表与大标题

　　理想的Webpage长度以不超过三、四个荧幕页面为佳。但是如果基于某些特殊理由，您的Webpage一定要做得很长，那么不要忘了在此长篇的Webpage最上头，提供一个目录表，Webpage的内容也标上大小标题，以利清楚阅读。尤其重要的是，在这些标题与目录表的HTMLsource里分别设置锚点，并链接到锚点，以使您的Webpage真正发扬WWW的高互动性、高便捷性功能。

　　八、暂时不提供超连结到尚未完成的Webpage

　　超连结或导览按钮应该引导读者到一篇真正“有料”的Webpage，而不是以“挂羊头卖狗肉”的方式，事先将某一超连结描述得超级精彩、超级诱人，结果读者兴致勃勃地连结过去，却根本看不到任何精彩、诱人的内容，唯一所见的，只是一张无聊的告示牌“施工中”。

　　如果您急欲在网络上推出您的站台、展现您Homepage，但仍有少数几页Webpage尚未完成，建议您先暂时别让这些“施工中”的Webpage正式露面。(即先暂时别让这些连往“施工中”的Webpage的“超连结”，拥有真正的超连结功能。)等到您“几乎”完工之后(Webpage永远没有“真正”完工之时，总是需要不断地修改、增添、翻新)，再正式开放连结也不迟。

　　倘若您急欲告诉读者，您即将提供一页超级精彩、超级诱人的Webpage在此站台，只是目前仍在努力赶制中，您大可直接摆一段告示在即将是“超连结”的文字旁(但目前仍不具超连结的功能)，明白昭示世人，以节省读者徒然点取、徒然往返的时间;也免得读者满怀希望，却又落得失望而归。

　　九、不要在一篇短文里提供太多的超连结

　　适当、有效率地使用超连结，是一个优良的导览系统不可或缺的条件之一。但过份滥用超连结，造成短短的一篇文章里却处处是links，反而损害了Webpage行文的流畅与可亲性。在充斥着超连结的短文里，很可能其中不少是无意义、没必要的links。例如∶连结到一页只有两三行注解的link、连结到一页只放了“施工中”的招牌的link。在一篇长短适中的Webpage里(三、四个荧幕页面)，文章里提供的文字式超连结最好不要超过10个以上，以使全页行文能够顺畅，而读者也不至于眼见一大堆超连结，反而不知从何点取才好。况且，连续、肩并肩地出现两三个文字式超连结，很容易被误认为只是一个长度较长的超连结，于是被读者忽略掉，便也失去了这些超连结的原本功能。

　　网页布局理念

　　网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢?色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的布局。下面，我们就有关网页布局谈论一下。

网页布局类型

　　网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。

　　1、“国”字型:也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

　　2、拐角型:这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接

　　3、标题正文型:这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

　　4、左右框架型:这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

　　5、上下框架型:与上面类似，区别仅仅在于是一种上下分为两页的框架。

　　6、综合框架型:上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

　　7、封面型:这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

　　8、Flash型:其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

　　9、变化型:即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

　　关于第一屏

　　所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢?其实这是未知的。一般来讲，在800*600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px*435px，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。

　　说了那么多，无非是一个标准的问题，其实接下来不用我说大家也能想到，第一屏当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有个估计，而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。

　　有关导航栏的位置

　　导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，积于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单:如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。

　　什么样的布局是最好的

　　这是初学者可能会问的问题。其实这要具体情况具体分析的:比如如果内容非常多，就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选;Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，我只是想把这个留给读者了，因为，只有不断的变化才会提高，才会不断丰富我们的网页!

　　大致就这些了，希望您有所启发。

谢谢分享，希望以后再多出出结合实践的经验心得教程~

谢谢分享
很精彩哦
不过我感觉有些习惯还是不符合中国人的习惯的哦
很多我们都是从外国学过来的
但是这些并不是都是符合中国人的习惯和审美的
或许在国外真的很流行很美
但是在国内可能就很不受欢迎哦

比如说现在的tag标签
这个在国外来说应该是很流行的
目前国内也都用上了
不过真正用tag阅读的读者和浏览者有几个?

很多时候我们还是要结合读者群的习惯的
考虑到用户体验是最好的哦:)

呵呵．其实很多网站都只体现了一个页面效果，忽略了引擎的规则．．

如图片连接和文字连接，最好写上说明，这样更有利于引擎收入．．同时删除多余的ＤＩＶ和表格代码，能提高网站访问速度，并且达到更好的浏览效果．．．！

广告位虽然需要，但合适的广告有利于大家的审美和访问！

:) :) :) 好帖！！

值得学习
:) :)

一楼留位置