第2章 网页整体规划设计
2.1 网页设计基础
网页设计基础知识包括网页布局的类型、网页整体造型和网页设计元素。在制作网页之前，需要对制作的网页有一个整体的设计，明确该网页表达什么样的内容，怎样布局网页的结构使其更适合用户浏览。
2.1.1 网页布局类型
网页布局类型
网页布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置，网页布局有很多，大致可分为一字型结构、左右型结构、川字型结构、二字型结构、三字型结构、厂字型结构、匡字型结构、同字型结构、回字型结构等，下面介绍几种常见的类型。
1.一字型结构
一字型结构是最简单的网页布局类型，即无论是从纵向上看还是从横向上看都只有一栏，常常居中显示，它是其他布局类型的基础。
2.左右型结构
左右型结构将网页分割为左右两栏，两栏的宽度不同，靠左或靠右，如图2-1所示。这是一种由左右两页构成的框架结构，一边是导航链接，一边是正文。这种类型结构非常清晰，一目了然，如图2-2所示。
图2-1 左右型结构
3.川字型结构
川字型结构将网页分割为左、中、右三栏，左右两栏小，中栏大，如图2-3所示。整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的搜索功能。
4.二字型结构
二字型结构将网页分割为上、下两栏，上栏小，下栏大，或上栏大，下栏小，如图2-4所示。这种类型的页面最上面往往是标题，下面是正文，例如，一些文章页面或注册页面等就是这一类，如图2-5所示。
5.三字型结构
三字型结构将网页分割为上、中、下三栏，上下两栏小，中栏大，如图2-6所示。这是一种简洁明快的网页布局，在国外应用较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为三部分，色块中大多数放置广告条与更新和版权提示，如图2-7所示。
图2-2 左右型结构网页
图2-3 川字型结构
图2-4 二字型结构
图2-5 二字型结构网页
图2-6 三字型结构
图2-7 三字型结构网页
6.厂字型结构
厂字型结构将网页分割为上、下两栏，下栏又分为左、右两栏，如图2-8所示。厂字型结构的页面顶部常常为“标志+广告条”，下方左面为主菜单，右面显示正文信息，如图2-9所示。这是网页设计中使用非常广泛的一种布局方式，一般应用于企事业网站中的二级页面。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
图2-8 厂字型结构
图2-9 厂字型结构网页
7.匡字型结构
匡字型结构将网页分割为上、中、下三栏，中栏又分为左、右两栏，如图2-10所示。这种布局上面是标题及广告，中间一侧是链接，另一侧是很宽的正文，底部是网站的辅助信息，如图2-11所示。
图2-10 匡字型结构
图2-11 匡字型结构网页
8.同字型结构
同字型结构将网页分割为上、下两栏，下栏又分为左、中、右三栏，如图2-12和图2-13所示。
图2-12 同字型结构
图2-13 同字型结构网页
9.回字型结构
回字型结构将网页分割为上、中、下三栏，中栏又分为左、中、右三栏，如图2-14所示。回字型网站的布局最上面常常是网站的标志、广告以及导航栏，接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是国内一些大中型网站常见的布局方式，如图2-15所示。其优点是充分利用版面，信息量大，缺点是页面显得拥挤，不够灵活。
图2-14 回字型结构
绚丽多彩的网页从结构上看，常常是以上几种结构的变形，万变不离其宗。需要说明的是，以上几种结构都是最基本的，实际网页的小区域内通常还要配合使用布局技术。
图2-15 回字型结构网页
2.1.2 网页整体造型
网页整体造型
网页整体造型是指页面的整体形象设计，这种形象是图形与文本的组合。页面元素的基本形状有矩形、圆形、三角形、菱形等，这些形状的组合可以塑造丰富的页面形象。
采用形状时，往往要考虑形状的基本特性，从而根据要表达的页面意义来选择不同的形状。例如，矩形代表着正式、规则，很多ICP和政府网页都是以矩形为页面整体造型；圆形代表着柔和、团结、温暖、安全等，因此许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量、权威、牢固、侵略等，许多大型的商业站点为显示它的权威性，常以三角形为页面整体造型；菱形代表着平衡、协调、公平，一些交友网站常运用菱形作为页面整体造型。实际网页制作多数是结合多个图形加以设计，并结合动态网站设计技巧。
2.1.3 网页设计要素
网页最基本的功能是为用户提供浏览信息和进行交互操作。因此，网页设计的基本要素是内容、美观、简便和高效。
1.内容
网页必须有实质性的信息，并且能恰当、完全地展现出来。没有实质信息内容或信息展现不全的网页是不受欢迎的。
2.美观
网页的外观是用户的第一印象，一个设计美观的网页能给用户带来愉悦的体验，相反，不美观的网页给用户的体验是痛苦的。美观不等于花哨，有时简朴的设计也能恰到好处。
3.简单
这一点是非常关键的，是和用户交互直接相关的。主要涉及导航和输入等方面，糟糕的体验会使用户迷失方向，不知道如何操作，从而产生挫败感，造成用户的反感。
4.高效
这一点涉及网页的实现技术层面。好的网页要求能高效地被浏览器解释执行。网页不能以牺牲用户浏览、操作的时间来换取界面的美观效果。一个慢腾腾的网页一定会让用户产生反感。