版面布局-泉州五中信息技术学习网站首页.PPT

(2) 导航条的颜色 导航条是对网站栏目的一个索引，它通常以一个水平长条的形式出现在网页头部的下边。导航条作为头部的一部分，经常采用主色调，另—方面，导航条因为介于网页的头部和内容部分的中间，所以也经常作为头部和内容部分的过渡，这种情况下通常采用灰色系，比如IBM公司主页（WWW.）就采用了灰色导航条过渡。如图2－19所示。 (3) 栏目索引条的颜色 栏目索引条因为分布在网页的各个部位，所以经常采用主色调中不同深度的颜色来烘托整体的效果，比如图2-19所示的IBM公司主页采用不同的蓝色，另外，为了颜色的过渡，位于网页中间的栏目索引条也经常采用浅灰色。 (4) 文字的颜色 文字在一个网页上是无处不在的，但是文字的笔画比较单薄，所以文字通常用来进一步突出主色调，或者用来过渡和缓解页面的颜色。文字的颜色主要根据文字的背景色进行搭配，它与背景色应有较大的反差，如白底黑字、蓝底白字等，以便能清楚得显示文字。其次文字的颜色搭配还得兼顾文字周围物体的颜色。 (5) 插图的颜色 网页的插图通常尺寸都比较小，所以它的颜色可以绚丽、丰富一些，这样一来可以使页面变得活泼，二来可以点缀整个页面。但是在选择有背景的图片时要特别小心，不要和网页的背景色及图所插区域的背景色相冲突。解决这个问题一般有两种方法，一种是采用可透明的GIF图，另一种是将图片的背景色做成和网页背景色一样的颜色。 2) 版面布局设计 报纸、杂志通常分为不同的版面，不同的版面需要不同的布局，比如报纸的头版最为重要，它的布局通常都围绕醒目的大标题展开以吸引人们对它的注意，而其他版面以内容为主，所以它们的布局相对简单，通常都根据内容文字的多少而自然分割。同报纸、杂志一样，网站也分为很多不同的网页，比如主页、栏目首页、内容网页等， 不同的网页也需要不同的版面布局。但是与报纸、杂志不同的是，网站的所有网页组成的是一个层次型结构，每一层网页都需要建立到下一层网页的超链接索引，所以网页所处的层次越高，网页中的内容就越丰富，网页的布局就越复杂。 图2-20隆尧之窗――网络文学网站主页 我们以隆尧之窗-网络文学网站（/wlwx/default.asp）为例来说明版面布局，如图2-20所示的隆尧之窗主页，其上的内容非常丰富，所以它的版面布局就非常复杂，而下面一层的栏目首页(图2-21)因为内容比较集中，所以它的布局比主页就简单了一些。打开一个具体的内容网页，可以看到内容网页(图2-22)的布局更加简单，网页的上边是一个头部，下边就是具体的内容。 图2-21隆尧之窗――网络文学网站的栏目首页 图2-23就非常清晰地显示了上面例子中三层网页的版面布局，从这幅图可以总结出网站在版面布局上的一个特点，那就是从网站层次型结构的顶层主页到最底层的内容网页，版面布局不断简化。如果将这个特点反过来，便得到了网站在进行版面布局设计时应采用的原则，那就是首先对主页进行版面布局，然后在主页布局的基础上对栏目首页进行版面布局，接着往下，最后对内容网页进行版面布局。 无论是主页、栏目首页还是内容网页，作为网页本身，在进行单个网页的版面布局时所采用的步骤和方法都是一样的。 ? 版面布局的步骤 因为不同的用户可能使用不同的显示器和网页浏览器，所以同一个网页在不同用户的计算机上显示很可能是不一样的，比如用Windows XP操作系统下的IE浏览器在800×600分辨率的显示器下看微软公司的主页，就和用Windows XP下的IE浏览器在1024×768分辨率的显示器下看到的微软主页很不一样。所以在设计版面布局之 前，首先要做的就是确定这个网页主要面向哪种配置，即主要在哪种分辨率下进行显示，是面向800×600呢还是面向1024×768。分辨率越大，显示面积就越大，所以能显示的内容就越多。800×600是目前大多数显示器设置的分辨率，所以很多网站在设计时都针对800×600进行设计。但是1024×768却是未来的发展趋势，将日益成为主流的分辨率模式，所以在设计时最好能兼顾这种分辨率。 图2-22隆尧之窗――网络文学网站的内容网页 图2-23网站版面布局的变化 第二步是确定网页的框架。框架指的是怎么样从整体上把页面划分开来，比如上下分或者左右分。框架有很多种，最简单的是图2-24所示的左右型框架和上下型框架，比如图2-22所示的隆尧之窗――网络文学网的内容网页就是其中的第一种框架。这种框架一般有大小两块区域，其中一块较大的区域放置网页的主体内容，它通常占据整个屏幕的五分之四。而另一块较小的区域通常放置的是网站标志和导航条。 将上下型框架和左右型框架结合起来可以形成复合型框架，如图2-25显示的就