基本的网页设计

7.3.1　基本的网页设计

教学资源发布到网上后，是通过各种网页展现出来。虽然一些复杂的教学网站制作会需要动态链接数据库功能，但对于大多数教师来说，制作简单的网页也可完成一般的教学网页课件设计和制作。完成教学网页的设计包括两部分内容：网页设计的原则和制作技术。

1.网页的设计原则

网页设计的许多原则和其他课件设计如PPT的设计在原则上是相通的，例如要求主题鲜明突出、色彩协调等。但是初学者具体制作时往往手足无措，不知如何去安排和设计一个网页。下面我们结合具体的网页来给出一些网页设计的原则。

（1）使用块结构来调理和简化画面

一个网页能包含的内容远远多于一张PowerPoint幻灯片，但是人们在浏览时，总是习惯于先快速扫描大致内容。使用分散的块状结构有利于使网站保持统一协调的格式，使网页显得井井有条，并使浏览者很容易地快速浏览分块的主要内容。

如图7‐10所示，是美国今日（www.usatoday.com）新闻网站的首页，采用了块装结构，将新闻按不同方向分为多个块，每个块大小和结构相同，只是标题淡淡的颜色有所区别。每块中有一条主要新闻配图片和简要的文字说明，点击可进入新闻的详细说明，其他新闻列出5条标题。

采用块状结构将内容编排后，浏览者很容易快速抓住当日的主要新闻，虽然是新闻网站内容众多，但整个页面显得结构简明。类似的处理在其他项目众多的网站，如购物网站，也经常被使用。

（2）使用中心位置的大图片和logo来突出主题

几乎所有的设计都要求主题鲜明。与幻灯片不同，一张网页中可以放置较多内容的文字和图片，因此有多种方案来实现这个目的，而最容易掌握的方法就是在中心位置放置图片，图片四周留出空间。另外，在网站的每个网页的左上角或顶部位置通常放置网站的logo，也有利于表现网站的特征。

（3）设置分栏便于网页内容的浏览

随着大显示屏幕或宽屏幕的普及，显示内容宽度往往超过人的视角范围。人眼的视角宽度约为34度，距离屏幕40cm时观看的范围约为24cm，而实际最佳视角范围还要小于此。而14″（35.6cm）16∶9的宽屏笔记本电脑的屏幕宽度为31cm已经超过此范围。研究表明文字宽度超过理想视角范围时会降低阅读速度，因为读者需要运动眼球和脖子来从一行的末尾跟踪到下一行的开始。在此情况下，分栏是个比较好的方法，通常将网页分为2～4栏，以便于浏览。如图7‐11所示是国内最大的门户网站新浪和搜狐网的首页。网站每条新闻用一句话显示，页面密集布满各种一句话标题。网页的内容宽度新浪为950像素，分为三栏，但排列不够整齐。相对而言，搜狐的首页宽度为960像素，分为四栏，排列较为整齐。

图7‐10　美国今日网站首页的块状版式

图7‐11　搜狐和新浪网站首页的分栏设计

（4）将网页各元素对齐避免给人以杂乱的印象

杂乱的网站会使浏览者耗费时间在搜寻信息上，并不利于突出主体。前面提到利用分散的块来便于浏览，这些分散的块应该按一定的方式对齐排列。如图7‐12所示，是杂乱排列和良好结构排列的网页对比。

图7‐12　左边为较杂乱的排列，右边为结构整齐的排列

为了保持整洁美观，可以采用栅格系统来设计。栅格系统是将网页分成固定尺寸的格子，然后网页中的每个单元由一定的格子构成。

如图7‐13所显示的网页设计中，采用了栅格系统，画面的分栏为基本栅格系统的倍数，文字画面保持整齐。

图7‐13　栅格系统示例

（5）利用版式和色彩保持网站内网页的协调性

网站内的多个网页设计风格应保持一定的相关性，以保证整体的统一。例如，IBM（国际商用机器公司）的网页的色调都是蓝色的，符合“蓝色巨人”的传统特征。而相同的版式设计可以使浏览者能较迅速地在网站的不同页面间找到相应的内容。有的公司网站也用不同的颜色条来区分多个产品。在这种情况下，一般网页的版式都会保持一致以避免给人混乱的感觉。如图7‐14所示，惠普公司下面HP系列和Compaq系列产品用绿色条和红色条区别，但版式保持不变。

图7‐14　网站内版式相同保持协调性

以上介绍了常用的一些设计原则，下面我们分析一个实例，美国麻省理工学院开放课程的首页（http://ocw.mit.edu/index.htm），如图7‐15所示。

图7‐15　美国麻省理工学院开放课程首页

网页的中心是主题突出的图片，在网页的上部是“MITOPEN‐COURSEWARE”文字标记的logo和图片，网站内部的所有网页的最顶部都是相同的样式。所有网页都是左置的导航栏，颜色为淡色底加红色标签，整个网站版式到颜色都具有统一性。

网站分为三栏，除了左边的导航栏外，内容部分为两栏，各栏由块状单元组成。块状单元的设计安排是典型的图片加简要的介绍。网站的色彩是白色的背景加上红色的标题、小标签组成的白底红字。进入各课程后，所有的页面都保持同样的风格和颜色搭配。

2.网页的基本制作技术

普通的网页是由HTML语言编写而成，对于普通教师和学生而言可以使用可视化编著软件来制作网页，从而尽量绕过编写代码的工作。在很多数情况下，我们可以先使用模板来规划网页，然后通过往模板里面填充或修改内容来完成网页制作。常用的网页编著软件有Adobe公司的Dreamweaver、Microsoft的Expression Web（Frontpage的升级）以及开源软件WordPress，等等，其中以Dreamweaver最为常用。下面我们以建设类似麻省理工学院首页布局的网页（见图7‐15）为例，使用Dreamweaver提供的模板来快速完成。

打开Dreamweaver8，如图7‐16所示，在初始页面中选择入门页面后，可以选择各种模板来创建网站。我们可以选择其中版式与我们要求接近的模板来打开。

图7‐16　用模板创建网页

首次创建网页时，Dreamweaver会要求用户管理站点，如图7‐17所示。

管理站点的内容包括站点位置、上传方式等。由于网页文件中所有的图片、视频以及声音都是独立存在于网页外部，因此建立网页时，需要把资源文件都存放在一个文件夹中，这个文件夹也是网站中所有网页存放的位置。

指定完文件夹的存放位置后，就可以对网页模板进行编辑，Dreamweaver的编辑窗口如图7‐18所示。

这个模板的页面宽度为760像素，是按照800像素宽度的屏幕设计的。随着计算机屏幕尺寸的不断扩大，大多数屏幕宽度超过1024像素，除去屏幕四周的安全区域和空白，可以按960像素的宽度设计网页。如果显示器的分辨率超过1024像素时，则将网页设为自动居中。在这个模板页中，可以通过拉动网页中的表格的边框来设定网页的宽度和表格中每栏的宽度。

图7‐17　创建网站流程

图7‐18　Dreamweaver编辑窗口

网页的基本布局完成后，就可以对模板中的文字进行填充，并修改属性添加需要的链接，在此不再赘述。