1.7 网页设计基础

在开始学习使用Dreamweaver CS3之前，需要了解一些网页设计的基础知识，如网页分类、网页布局样式、网页的配色设计、网页设计的基本方法、常用网页设计工具和网页的发布等知识，这些知识对于下一步的学习非常有必要。

1.7.1 网页的分类

在互联网中存在着数以亿计的网页，它们大多是基于HTML（超文本标记语言）语言规范的，其中很多网页都是以“.htm”或“.html”的后缀格式保存的，这些网页中可以包含动画和视频等动态网页元素，但却不具备真正的动态交互功能，它们是标准的HTML文档，通常被称为静态网页，如图1-66所示。

静态网页技术的信息交互能力很差，同时又不支持对数据库的操作，大大限制了其在互联网的应用范围。随着网络技术和数据库技术的不断发展，网络上出现了一种具有强大交互功能且支持数据库操作的网页技术，这就是动态网页技术。通过动态网页，访问者就能够方便地完成与服务器的信息交互，比如提交留言、参加论坛讨论等，动态网页通常以“.asp”、“.aspx”、“.jsp”、“.php”或“.do”等后缀格式保存，最常见的动态网页就是论坛，如图1-67所示。

1.7.2 网页的布局格式

在网页设计阶段，需要考虑如何设计网页的布局格式，如同建造大楼之前绘制的图纸一样，它对整个网站的最终设计效果起着关键作用。设计、制作网站前的网页布局设计，不仅直接关系到页面结构的合理性，它还体现该网站的类型。网站的布局格式主要有以下4种。

“国字型”布局格式：最为常见的一种网页布局格式，上端为网站标题、广告条等，中间为网页的正文，左右分列两栏，用于放置导航条或广告，最下面是网站的基本信息。如图1-68所示，一般的门户类网站由于其内容量大，页面通常会采用这种布局格式，以便在有限的页面空间中布置更多的分类和内容。

“拐角型”布局格式：与“国字型”布局格式相似，上面是标题及广告横幅等，中间左侧较窄的一栏放置超链接一类的信息，右侧为网页的正文，最下面是一些网站的辅助信息，如图1-69所示。

“标题正文型”布局格式：这种布局方式简单明了，重点突出，最上面是标题和导航条，下面是网页的正文，如图1-70所示。一般的搜索引擎类的网站往往都采用这种布局格式来展现页面，以便最大限度地提高访问者打开页面的速度，使其获得最大的使用便捷度。

“封面型”布局格式：这种布局方式常用于设计企业网站的首页，多以精美的图像作为主题形象展示，设计方式多为Flash动画方式，很多设计公司的企业宣传网站或房地产品牌展示网站喜欢采用这种布局格式，通过增强视觉冲击力，加深访问者对该品牌的印象，如图1-71所示。

正是由于这样一些约定俗成的设计理念，在长期的网络应用中对访问者产生了潜移默化的影响，造成了很多访问者在看到一个网页页面后，根据其布局以及风格特点，很快就能大体判断出该网站的类型，因此网页设计人员在设计网页之前，应根据网页的类型和用途选择合适的布局格式，以适应访问者的访问习惯。

1.7.3 网页的配色设计

色彩对传达网页作品的主题有非常重要的作用，好的配色设计不仅能够在视觉上给访问者以美的享受，而且还能充分展现网站的风格，营造出理想的浏览氛围。

就色彩本身而言，其对事物的表现能力有着其他形式无法比拟的效果。作为网页设计人员，只有掌握色彩运用的原理，同时熟知各种色彩对访问者生理或心理产生的影响，结合自己所具备的平面构成的知识，在网页设计中准确用色，才能有效地传达特定的信息，并充分渲染网站的主题氛围。

不同的色彩令访问者产生的直观感受会有所不同，想更好地进行网页的配色，就必须了解色彩对人产生的心理效果。比如，红色、橙色、黄色等都给人以温暖的感觉，它们也被称为暖色调，而绿色、蓝色等给人以清爽、凉快的感觉，它们也被称为冷色调。进行配色的时候一定要以网页自身特点为基础，选择适宜的颜色。如图1-72所示是一家电器企业的网站，整个网站以红色为基调，给人以温暖、热情的感觉，暗示企业热情、周到的服务，同时红色也紧扣产品特点，预示其产品给人们带来温暖和光明。

色彩也会让人产生轻或重的不同感觉，使用较深、较暗的颜色容易让人产生厚重、沉稳的感觉，而使用较浅、较亮的颜色则让人产生轻盈、飘的感觉。不同的应用对象，所使用的颜色就会有所不同，对于一个博物馆的网站，应该使用较深的颜色，以体现大气、沉稳和厚重感，而对于一个幼儿园的网站，则应该使用较亮，较鲜艳的颜色，以表现轻松、快乐和充满童趣的感觉。

另外，不同的色彩传递给访问者的信息也会不同，这是因为色彩都有自己的象征意义，下面分别介绍4种常用的色彩。

粉色象征着浪漫、温馨，常被用于向访问者传递爱情、幸福、甜蜜、可爱的感觉，在一些以女性或婴幼儿为访问群体的网站上常见到以粉色为基调的配色方案，如图1-73所示就是一个以粉色为基调的关于护肤产品的网站。

黄色用于表示警示或危险，比如各种抢修车辆、施工现场的安全警示标志等，当然黄色有时也传递真诚、安全、幸福以及值得信赖等感觉，黄色基调网站的显示效果如图1-74所示。

蓝色容易让人联想到大海、湖泊和天空，它象征着青春，当然不同的蓝又有不同的象征意义，比如深蓝色，给人以沉稳、冷静和善于思考的印象，而亮蓝则给人以开放、富有活力的感觉。蓝色常常被IT或电子产品类的企业网站作为其配色基调，如IBM、联想等企业的网站，蓝色基调网站的显示效果如图1-75所示。

绿色象征着自然、和谐、健康和青春等含义，让人感觉到新鲜与活力，它常被用于医疗、健康食品等领域的企业网站，绿色基调网站的显示效果如图1-76所示。

1.7.4 网页设计的基本方法

一个完整的网页作品从构思到最终完成主要有以下5个步骤。

（1）需求分析。与软件设计类似，设计网页也需要事先完成需求分析，确定网站的整体定位及网站的主题。

（2）整体策划。在需求分析后，需要进行整体策划，主要包括网站的整体风格、色调、布局格式、频道划分以及栏目设置等。

（3）制作效果图。效果图是根据策划方案制作的，在制作效果图之前，可以先在纸上大致勾画出网站的整体布局情况，然后使用图形设计软件（如Photoshop）结合事先准备的素材制作出首页及各个子页面的完整效果图。

（4）切片、制作页面文档。在效果图制作完成后，将整幅效果图按网页布局的要求逐一进行切片，制作成静态页面文档。切片其实就是把一幅完整的图片按要求分割成若干块，一方面是为了提高网页的下载速度（一幅大图片的下载速度比组成大图片的若干小图片的下载速度要慢得多），另一方面也是为了网页文档制作的需要，因为不是所有的地方都需要用到图片。

（5）修改完善。对制作出来的网页文档与设计方案进行比对，对不符合设计要求或尚未达到预期效果的部分进行修正、改进，直到完全达到设计目标。

1.7.5 常用网页设计工具

Dreamweaver CS3是专业的网页设计软件，但这并不意味着仅靠Dreamweaver就能完成所有的网页设计工作。设计人员往往还需要使用其他的图形图像处理软件、动画制作软件和Web编程软件配合来完成网页设计开发工作。

在进行网页设计时，常常需要使用大量的图像素材，而这些素材往往都需要进行加工后才能使用。常用的图形图像处理软件有Adobe公司的Photoshop CS3和Fireworks CS3。Photoshop是功能强大的图形图像处理软件，是平面设计、网页美工的利器，其操作界面如图1-77所示，Fireworks不但可以进行图像处理，还可以直接输出网页文档。另外，使用该软件还可以方便地制作逐帧GIF小动画，其操作界面如图1-78所示。

另外，虽然Dreamweaver附带了Flash按钮、Flash文本等一些简单的Flash制作功能，但要制作出比较复杂的动画效果，还是需要专业的Flash制作软件。Adobe公司的Flash CS3与Fireworks、Dreamweaver近乎完美的结合，使它成为制作Flash的最强的工具软件之一，其操作界面如图1-79所示。

SWiSH也是Flash制作软件，虽然它的功能没有Flash CS3完善，但仍然非常丰富，作为一款制作Flash文字的小工具软件，受到大多数网页设计人员的一致好评，其操作界面如图1-80所示。

1.7.6 网页的发布

对于静态网页而言，网页的发布就是指将设计、制作完成的网页文档上传到位于Internet的服务器中，以便其他用户能够通过Internet访问到该网页。在网页发布之前，需做一些必要的准备工作，搭建网站运行的环境就是其中最重要的一步，用户可以选择向ISP （网络服务提供商）申请租用虚拟空间或自建Web服务器两种方式搭建网站运行环境。

向 ISP 申请租用虚拟空间：虚拟空间只是服务器硬盘中的一部分空间而非整个硬盘，这种方式需要根据虚拟空间的具体大小向ISP支付服务费，服务费通常按年支付，空间越大，支持的功能越多，费用就越贵。当然也有一些免费的虚拟空间可供使用，但这种免费的虚拟空间已经越来越难申请到了。

自建Web服务器：这种方式需要一条长期稳定接入Internet的网络线路，用户独享整个服务器的资源。但是这种方式对接入的带宽，服务器的安全性，软、硬件性能都有较高要求，且费用也较高，往往只有一些大型的企业或专业从事互联网服务的企业才会选择。

在拥有了虚拟空间或网络服务器之后，将本地站点中的所有文档以及文档中包含的相关文件，如图像文件、Flash文件等全部上传到虚拟空间或网络服务器中即可。通常情况下，站点中还必须具备“index.htm”或“default.htm”文档，这样互联网上的访问者才能直接通过域名正常访问到设计人员发布的站点。

利用FTP软件可以方便地将网页文档上传到服务器，除了Dreamweaver CS3自带的FTP功能外，常用的FTP软件有CuteFTP和FlashFXP。CuteFTP的操作界面如图1-81所示，FlashFXP的操作界面如图1-82所示。

FTP软件的操作通常都比较简单，在建立站点信息并成功连接后，只需要在左右两个窗口之间进行文件拖动操作便可以实现文件的上传和下载。