上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

第3章网页设计

网站是一组相关网页的集合，即若干个网页文件经过规划组织后彼此相连而形成完整结构的信息服务系统。网页文件是网站最主要的文件类型。

3.1 网页设计的准则

网页是网站提供信息服务的主要形式，一般包含文字、图像和表格等内容，以及实现信息块之间跳转的超链接。网页通常以网页文件及其附属文件形式存在。网页文件是WWW的基本文档，它通常是用HTML语言设计的。其他网页元素，如图像、声音等，都是以独立文件方式存在的，通过在网页文件中设置一些链接形成引用关系。

3.1.1 网页的基本元素

在初次设计网页之前，首先应该认识一下构成网页的基本元素，只有这样，才能在设计中得心应手，根据需要合理地组织和安排网页内容。

如图3-1所示是一个站点的首页，其中包含了常见的网页元素，如文本、图片、超链接、表格、导航栏、动画和交互表单等。

图3-1 网页的基本元素

1.文本

文本一直是最重要的信息载体与交流工具。网页中的信息也以文本为主。与图片相比，文字虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。

为了克服文本固有的缺点，人们赋予了网页中文本更多的属性，如字体、字号、颜色、底纹和边框等。通过不同格式的区别，来突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，来清晰地表达一系列项目。

2.图片和动画

图片在网页中具有提供信息、展示作品、装饰网页、表现个人情调和风格的作用。用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。

在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式，例如，图3-1中的广告动画。

3.声音和视频

声音是多媒体网页的一个重要组成部分。对于不同格式的声音文件，需要用不同的方法将它们添加到Web页中。在决定添加声音之前，需要考虑的因素包括用途、格式、文件大小、声音品质和浏览器差别等。不同浏览器对于声音文件的处理方法是不同的，彼此之间很可能不兼容。

用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。设计者在使用这些格式的文件时，需要加以区别。很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。

一般来说，尽量不要使用声音文件作为背景音乐，那样会影响网页下载的速度。可以在网页中添加一个打开声音文件的链接，让音乐播放变得可以控制。

视频文件的格式也非常多，常见的有RealPlayer、MPEG、AVI和DivX等。视频文件的采用会让网页变得精彩而有动感。

4.超链接

超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接。例如，指向另一个网页或者相同网页上的不同位置。目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者本网页中的其他位置。

热点通常是文本、图片或图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超链接热点时，其目的端将显示在Web浏览器中，并根据目的端的类型以不同方式打开。例如，当指向一个AVI文件的超链接被单击后，该文件将在媒体播放软件中被打开；如果单击的是指向一个网页的超链接，则该网页将显示在Web浏览器中。在图3-1中，“热门标签”栏目的文字，就是已经建立了超链接的文本。

5.导航栏

导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超链接，这组超链接的目标就是本站点的主页及其他重要网页。在设计站点中的网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易地转向站点的其他网页。

在一般情况下，导航栏应放在网页中较引人注目的位置，通常是在网页的顶部或一侧。导航栏既可以是文本链接，也可以是一些图形按钮。图3-1中的导航栏就是一组文本链接。

6.表格

在网页中，表格用来控制网页中信息的布局方式，包括两个方面：一是使用行和列的形式来布局文本和图像及其他列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。图3-1中整体页面的设计，就运用了表格进行布局定位。

7.表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页、电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，设置来宾签名簿，让浏览者注册为会员并以会员的身份登录站点等。

表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本，选中单选按钮或复选框，以及从下拉列表框中选择选项等。

根据表单功能与处理方式的不同，通常可以将表单分为用户反馈表单、留言簿表单、搜索表单和用户注册表单等类型。

图3-1中右边的“个人管理中心”栏目就是交互表单。

8.其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。

3.1.2 网页布局

网页是网站构成的基本元素。当浏览者移动鼠标，在网海中遨游时，一个个精彩的网页会呈现在用户面前。网页是否精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图片的处理等因素外，还有一个非常重要的因素——网页的布局。

1.网页布局的基本概念

最初的网页就像一张白纸，设计者可以任意挥洒自己的想象力，设计一切自己所能控制的东西。但开始设计之前，最好知道约定俗成的“标准”是什么，那么设计者就可以在此基础上加上自己的东西。对于初学者，最好应先了解网页布局的基本概念。

（1）页面尺寸

页面尺寸和显示器大小及分辨率有关系。一般，在分辨率为1024×768像素的情况下，页面的显示尺寸为1007×600像素；在分辨率为800×600像素的情况下，页面的显示尺寸为780×428像素；而在分辨率为640×480像素的情况下，页面的显示尺寸为620×311像素。从以上数据可以看出，分辨率越高，页面的尺寸就越大。

在网页设计过程中，向下拖动页面是给网页增加更多内容（尺寸）的唯一方法。但应当注意的是，除非设计者肯定站点的内容很有吸引力，否则不要让浏览者拖动页面超过三个屏幕。如果需要在同一页面内显示超过三个屏幕的内容，那么最好在页面内制作内部链接，方便浏览者浏览。

（2）整体造型

造型就是创造出来的物体形象，这里是指页面的整体形象。这种形象应该是一个整体，图形与文本的结合应该是层叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的造型，设计者可以充分运用自然界中的各种形状及它们的组合，如矩形、圆形、三角形、菱形等。

对于不同的形状，它们所代表的意义是不同的。例如，矩形代表正式、规则，很多ICP和政府部门的网页都是以矩形作为页面整体造型的；圆形则代表柔和、团结、温暖、安全等，许多时尚站点喜欢以圆形作为页面整体造型；三角形代表力量、权威、牢固等，许多大型的商业站点为显示它的权威性常以三角形作为页面整体造型；菱形代表平衡、协调、公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状代表不同意义，但目前的网页制作大多结合多种图形加以设计，只是其中某一种图形的构图比例可能占得多一些。

2.网页布局的一般步骤

（1）构思

根据网站内容的整体风格，设计版面布局。设计者可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的知识，在大脑中不断地酝酿、碰撞，往往不经意间就会有闪光的思想出现。这时设计者就要抓紧时间把它变成纸面上的东西，用笔在纸上粗略地勾画出布局的轮廓，不要讲究细节，只要有一个轮廓就行。当然也可能有多种想法，尽量都把它们画出来，然后再比较，采用一种比较满意的方案。

（2）初步填充内容

这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。要注意重点突出，把网站的标志、广告条、菜单放在最突出、最醒目的位置，然后再考虑其他元素的放置。

（3）细化

在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，方便以后修改。

经过以上3步，网页布局已经初具规模了，让其他人员观看并提出建议，再不断修改，一个网页就要完成了。

3.网页排版布局的原则

上面简要介绍了设计网页布局的一般步骤，而事实上，在构思和设计的过程中，设计者还必须要掌握以下5项原则。

（1）平衡性

一个好的网页布局应该给人一种安定、平稳的感觉，它不仅表现在文字、图像等要素在空间占用上分布均匀，而且还要注意色彩的平衡，要给人一种协调的感觉。

（2）对称性

对称是一种美，生活中有许多事物都是对称的，但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。

（3）对比性

通过让不同的形态、色彩等元素的相互对比，来形成鲜明的视觉效果。例如，黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。

（4）疏密度

网页要做到疏密有度，即平常所说的“密不透风，出可跑马”。不要整个网页都是一种样式，要适当进行留白，运用空格，改变行间距、字间距等方法制造一些变化的效果。

（5）比例

比例适当，这在布局中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。

4.网页布局类型

网页布局大致可分为“国”字型、拐角型、框架型、封面型、Flash型、变化型等几种，下面分别介绍。

（1）“国”字型布局

（2）拐角型布局

拐角型布局与上一种布局只是形式上的区别，其实是很相似的。该布局上面是标题及广告横幅，接下来的左侧是一窄列链接等内容，右面是很宽的正文，最下面也有一些网站的辅助信息。在这种布局中，左侧一般是导航链接，如图3-2所示。

图3-2 拐角型布局

（3）框架型布局

采用框架型布局的网页，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。大部分大型论坛和网页教程都使用这种布局，有一些个人网站和企业网站也喜欢采用这种布局。这种布局结构非常清晰，一目了然，如图3-3所示。

图3-3 左右框架型布局

（4）封面型布局

封面型布局一般出现在一些网站的首页，由一些精美的平面设计结合一些小的动画组成，在页面中放上几个简单的链接或者仅仅是一个“进入”的链接，甚至直接在图片上添加链接，而没有任何提示。这种布局需要精心设计，能给人带来赏心悦目的感觉，如图3-4所示。

图3-4 封面型布局

（5）Flash型布局

Flash型布局其实与封面型布局类似，只是这种布局采用了目前非常流行的Flash技术。由于Flash功能强大，页面所表达的信息更丰富，因此其视觉效果和听觉效果更能吸引浏览者的访问，如图3-5所示。

图3-5 Flash型布局

（6）变化型布局

变化型布局实际上就是上面几种布局的组合与变化，在视觉上可能接近于拐角型布局，但所实现的功能实质上是上、左、右结构的综合框架型布局。

以上介绍了多种网页布局的类型，初学者可能会想知道什么样的布局是最好的。其实这要根据具体情况具体分析。如果内容非常多，就要考虑用“国”字型或拐角型；如果内容不算太多，而且只是一些说明性的东西，则可以考虑标题正文型；框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；如果是企业网站想展示一下企业形象，或者个人主页想展示个人风采，封面型布局是首选；Flash型布局更灵活一些，好的Flash将大大丰富网页，但是它不能表达过多的文字信息。在实际设计中，设计者只有不断地尝试，才会提高布局技术。

5.网页布局的常用技术

（1）CSS（层叠样式表）布局

在新的HTML 4.0标准中，CSS被提出来。使用CSS布局技术能完全精确地定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。许多设计者曾经无法实现的想法，利用CSS现在都能实现。目前，CSS运用的好坏是判断一个网站优秀与否的关键。

（2）表格布局

表格布局好像已经成为一个标准，随便浏览一个网站，其中许多页面都是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局唯一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。

（3）框架布局

由于框架技术的兼容性问题，框架结构的页面不太受欢迎。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，可以把不同对象放置到不同页面上加以处理，并且因为框架可以取消边框，所以一般来说不会影响整体美观。

3.1.3 配色原则

色彩是人的视觉最敏感的东西，它是美丽而丰富的，能唤起人类的心灵感知。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。对于网站的色彩处理原则应该是“总体协调，局部对比”；也就是说，主页的整体色彩效果应该是和谐的，而局部应该有一些强烈色彩的对比。

网站给人的第一印象来自于视觉，因此，确定网页的色彩相当重要。不同的色彩搭配产生不同的效果，从而使网站给人以不同的视觉效果，吸引访问者的注意力。

1.色彩的形成

计算机屏幕是由电子枪投射到屏幕来产生色光的。电子枪射到屏幕上可以产生3种颜色：红、绿、蓝，这3种颜色称为三原色。由这3种色光，计算机屏幕可制作出完整的光谱，自然界的任何色彩都可以由一定比例的三原色光组合而成。如图3-6所示。

图3-6 三原色光的组合

2.色彩的特征

色彩的基本特征主要有色调、亮度和饱和度3个。色调表现色彩的种类，亮度表现色彩的明亮程度，饱和度表现色彩的鲜艳程度。

（1）色调

色调是色彩的主要特征，同一色调的色彩是指色彩中组成彩色成分的三原色光组合比例相同的一系列色彩，在外观上表现出一种鲜明的色彩倾向。一般来说，在网站上选择暖色调，即红、橙、黄、褐等色彩的搭配，可以使网站显得温馨、和煦、热情；在网站上选择冷色调，即青、绿、紫等色彩的搭配，可以使网站显得宁静、清凉、高雅；在网站上选择对比色调，即把色性完全相反的色彩搭配在同一个空间里，如红与绿、黄与紫、橙与蓝等的搭配，可以产生强烈的视觉效果。

（2）亮度

色调相同的色彩看上去还有深浅之分，通常把色彩的这一个特征称为亮度。在网站的设计中，如果底色是黑的，而文字也选用了较深的色彩，那么由于色彩的亮度比较接近，浏览者在浏览的时候，眼睛就会感觉很吃力，影响浏览的效果。当然，色彩的亮度也不能变化太大，否则屏幕上的亮度反差太强，也会使浏览者在浏览的时候感到刺眼。

（3）饱和度

色调相同的色彩除了亮度上的差别外，还表现出不同的鲜艳程度，即色彩的饱和度。色彩饱和度的高低受物体表面结构、照射光源的特点及视觉生理特性的影响。

3.色彩的心理感觉

在长期的生活实践中，自然界的各种色彩会在人的心中留下不同的印象，产生不同的心理感觉，例如：

● 红色是一种激奋的色彩，具有刺激效果，能使人产生冲动、愤怒、热情、活力的感觉；

● 绿色介于冷暖两类色彩的中间，给人以和睦、宁静、健康、安全的感觉，它和金黄、淡白色搭配，可以产生优雅、舒适的气氛；

● 橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果；

● 黄色表现快乐、希望、智慧和轻快的个性，它的透明度最高；

● 蓝色是最具凉爽、清新、专业感的色彩，它和白色混合，能体现柔顺、淡雅、浪漫的气氛；

● 白色具有洁白、明快、纯真、清洁的感觉；

● 黑色具有深沉、神秘、寂静、悲哀、压抑的感觉；

● 灰色具有中庸、平凡、温和、谦让、中立和高雅的感觉。

每种色彩在饱和度、透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、阴沉。

4.色彩的分类

按照色彩对人们心理的影响可以进行以下分类。

● 暖色系：红、橙、橙黄、黄等色彩让人觉得温馨、和煦、热情；

● 中性系：黄绿、绿等色彩让人觉得舒适、和谐；

● 冷色系：青绿、蓝绿、蓝等色彩让人觉得宁静、清凉、高雅。

色彩具有联想与象征的特质，例如，红色象征火、血、太阳，蓝色象征大海、天空和水面等。因此设计出售冷食的虚拟店面，应使用消极而沉静的颜色，使人从心理上感觉凉爽一些。如果要制作一个休闲主题的个人站点，不妨将网站色彩设计为天蓝色，如以海水为背景，再搭配一些鱼儿的效果会更好。

5.色彩的选择和搭配

在制作网站的时候，色彩的选择和搭配非常重要。一个网站格调的确定，往往取决于色彩的选择与搭配是否适当。在一般情况下，可以从以下4个方面考虑色彩的选择与搭配。

（1）色彩的鲜明性

网站色彩的选择与搭配要鲜明，这样比较容易吸引访问者的注意，而且在访问者的头脑中驻留的时间也比较长。例如，以绿色为主色调的网站和以白色为主色调的网站，肯定留给访问者的印象不同。除去网站内容的因素，以绿色为主色调的网站给浏览者的印象相对会更加深刻些，如图3-7所示。

图3-7 绿色为主色调的网站

（2）色彩的独特性

网站色彩的选择与搭配要与众不同，这样才能给访问者留下深刻的印象。每一个人都喜欢新鲜的事物，网站色彩搭配的独特性，可以给访问者以新鲜感。

（3）色彩的适合性

网站色彩的选择与搭配要与网站的内容气氛相适合。虽然大红大紫的色彩很鲜艳，但是，如果网站是以文学为主的，那么红色就显得很不合适。

必须注意的是，在整个站点的色彩选择上，应该尽量使用同一种色系的，色彩种类以不超过三四种为界限。适当的对比色可以增加文字的可阅读性，但如果对比太强的话，就不适于长篇文本的阅读，并可能会对浏览者的视力造成很大的伤害。

（4）色彩的联想性

不同的色彩会使人产生不同的联想，例如，蓝色可以联想到海洋，黑色可以联想到黑夜，白色可以联想到雪花等。在网站的设计中多利用色彩的联想性，可以使网站流露出独特的气息。如图3-8所示的“天下有情人的爱情档案馆”网页，以粉红色为主色调，给人一种爱情美好、温馨的感觉。

图3-8 “天下有情人的爱情档案馆”网页

除了上述的因素以外，在色彩的运用过程中，还应注意的一个问题是：由于国家和种族的不同，宗教和信仰的不同，地理位置、文化修养的差异，不同的人群对色彩的喜恶程度也有着很大差异。例如，生活在草原上的人喜欢红色，生活在闹市中的人喜欢淡雅的颜色，生活在沙漠中的人喜欢绿色等。在设计中要考虑主要对象群的背景和构成。

3.2 常见网页设计工具

“工欲善其事，必先利其器”，制作网页的第一件事就是选择一种网页制作软件。从原理上来讲，虽然直接用记事本也能写出网页，但是要求网页制作者必须具有一定的HTML基础，且效率也很低。如果想高效地进行网页制作，还是要选择一些合适的开发与管理工具。

3.2.1 网页编辑工具

随着互联网的普及，HTML技术的不断发展和完善，随之而产生了众多网页编辑器。网页编辑器基本上可以分为“所见即所得”网页编辑器和“非所见即所得”网页编辑器（即源代码编辑器）两类，二者各有千秋。

“所见即所得”网页编辑器的优点就是直观、使用方便、容易上手，但它同时也存在难以精确达到与浏览器完全一致的显示效果的缺点。也就是说，在“所见即所得”网页编辑器中制作的网页放到浏览器中是很难达到真正想要的效果的。“非所见即所得”的网页编辑器就不存在这个问题，因为所有的HTML代码都是在用户的监控下产生的，但是，“非所见即所得”编辑器的先天条件注定了它的工作效率太低。

1.Dreamweaver

Dreamweaver是Macromedia公司推出的主页编辑工具。它是所见即所得网页编辑器，支持最新的XHTML和CSS标准。Dreamweaver采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。值得称道的是，Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的创作工具。

Dreamweaver的最新版本是Adobe Dreamweaver CS3（Creative Suite），是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。Dreamweaver CS3可以使用Ajax的Spry框架进行动态用户界面的可视化设计、开发和部署。

另外，借助Dreamweaver还可以使用服务器语言（例如ASP、ASP.NET、ColdFusion标记语言、JSP和PHP）生成支持动态数据库的Web应用程序。

2.Office SharePoint Designer 2007

Microsoft FrontPage曾经是流行的制作网页软件之一，后来它随着Office 2007改名为Office SharePoint Designer 2007。该软件可以方便地进行文件夹管理、报表管理、导航管理、超链接管理、任务管理等多项管理功能。

3.Adobe GoLive

Adobe GoLive是一套工业级的网站设计、制作、管理软件，可让网站设计者轻易地创造出专业又丰富的网站。目前的最新版本是GoLive CS3。

GoLive在可视化操作方面要比Dreamweaver更加人性化，可以让设计师通过简单的步骤就将作品制作为网页。GoLive可以借助直观的可视工具（如预先构建的CSS样式）充分利用CSS的功能，利用来自InDesign的GoLive程序包、GoLive Co-Author以及CSS可视化界面和对Adobe PDF的广泛支持等创新性能，GoLive允许创作人员更迅速地进行网页设计和制作。此外，GoLive还可以在基于标准的高级编码环境中设计Web和移动设备内容。

4.Visual Studio .Net

程序编辑器应当支持相应程序的自动语法检查，最好还应当支持程序的调试与编译。微软的Visual Studio .Net无疑是非常强大的编辑器，目前的最新版本是Visual Studio 2008。

Visual Studio .Net内置有VB .Net、VC++ .Net、C#等程序开发工具，集程序的调试、编译等功能于一身，并且还提供了详细的帮助，这是任何一款其他软件都不能比拟的。但是，由于Visual Studio .Net本身带有的部件太多，需要计算机有比较高的配置，否则运行速度会非常缓慢。

5.EditPlus

任意文本编辑器都可以用于编写动态网站应用程序，最常见的文本编辑器就是Windows自带的记事本。但是记事本的功能太少，远远不能满足程序编写的要求。一个好的文件编辑器将会起到事半功倍的作用。

EditPlus是目前非常流行的一款文本编辑器，该软件功能强大、易于使用、兼容性强，支持几乎所有程序语言的代码色彩显示。它的缺点就是不支持程序的调试。

3.2.2 网页图形图像处理工具

多年来，网页设计者一直使用Photoshop图像工具来为网页制作漂亮的图片，除此之外，适用的图形图像工具并不多见。因此，网页设计者普遍感到制作网页容易，而制作网页图片困难。然而，现在情况有了很大的不同，已有多种网页图形图像设计工具可供选择，既能帮助用户快捷地制作图形，又能增强艺术效果。

1.Fireworks

Fireworks是Macromedia公司开发的一款优秀的网页图形图像处理应用软件。Fireworks与多种产品集成在一起，包括Macromedia的其他产品（如Dreamweaver、Flash、FreeHand和Director）和其他用户喜欢的图形应用程序及HTML编辑器，从而提供了一个真正集成的Web解决方案，可以帮助网页图形设计人员和开发人员解决所面临的特殊问题。

Fireworks的最新版本是Adobe Fireworks CS3，利用Fireworks CS3中的新增功能，可以更方便地在网站上添加图形和交互元素，这使得该应用程序越来越易于使用。对于有经验的Web设计人员，需要与图形打交道的HTML开发人员，以及需要开发包含大量图形图像的交互式网页但对代码编写或JavaScript知之甚少或一无所知的Web开发新手来说，Fireworks CS3都可以最大限度地提高工作效率。

2.Photoshop

Photoshop是Adobe公司推出的功能强大的平面图像处理软件，也是迄今为止世界上最畅销的图像编辑软件。Adobe Photoshop CS3是目前Photoshop的最新版本，无论从性能的优越还是使用的方便等方面，Adobe Photoshop CS3都给人以耳目一新的感觉。由于Photoshop在图像编辑、桌面出版、网页图像编辑、广告设计、婚纱摄影等各行各业中广泛应用，它已成为许多涉及图像处理的行业的事实标准。

Photoshop中包含的ImageReady是用于网页图片制作的工具，其缺点是体积庞大，操作比较复杂，非专业人士很难熟练掌握。

3.CorelDRAW

CorelDRAW是PC平台上历史最悠久的绘图软件之一，目前的最新版本是CorelDRAW X3。自1989年CorelDRAW第一次对外发布以来，CorelDRAW不断改良、升级，自身越来越成熟，功能也越来越强大。CorelDRAW每次发布的新版本，都包含了很多新的特性。

新发布的CorelDRAW X3绘图套件包含了用于绘图和排版的CorelDRAW、用于图像编辑的CorelPhoto-Paint及用于制作矢量动画的CorelR.A.V.E。

CorelDRAW X3在用户交互方面和人性化设计方面已经实现了一个空前的高度。CorelDRAW产品小组在不同的行业和设计领域了解用户，收集他们的反馈，所以最新的版本能够更好地满足用户的需要。

3.2.3 网页动画制作与特效工具

当今的Internet，每天都有大量新的网站诞生，建立网站来进行自我宣传和信息交流已成为一种潮流，多姿多彩的网页也成为Internet中最为绚丽的部分。随着网络速度的提高，越来越多的网页中使用了动画效果，这些动态显示的画面不仅吸引了浏览者的注意力，也给原本呆板的网页增添了不少生机。

1.Flash

Flash是一款优秀的网页动画制作软件，从简单的动画到复杂的交互式Web应用程序，它使用户可以创建任何作品。Flash支持拖放用户界面组件，将动作脚本添加到文档的内置行为中，以及可以添加到对象上的特殊效果。这些功能使Flash不仅功能强大，而且易于使用。最吸引人的一点还是Flash作品SWF文件“体积”出奇得小，并且可以以插件的形式加入到网页中，通常几分钟的复杂动画才几百KB，是目前网络中最常用的动画格式。Flash的最新版本是Adobe Flash CS3。

Flash CS3是Web设计人员、交互式媒体专业人员或开发多媒体内容的主题专家的理想工具。该版本注重于创建、导入和处理多种类型的媒体（音频、视频、位图、矢量、文本和数据）。Flash CS3提供了对Web团队（由设计人员和开发人员组成）成员之间的工作流程进行优化的项目管理工具。外部脚本撰写和处理数据库中动态数据的能力及其他功能使得Flash CS3特别适用于大规模的复杂项目。

2.Ulead Gif Animator

Ulead GIF Animator是Ulead（友立）公司发布的是一个简单、快速、灵活、功能强大的GIF动画编辑软件，使网页设计者可以快速轻松地创建和编辑网页动画文件。同时，Ulead GIF Animator也是一款不错的网页设计辅助工具，可以作为Photoshop的插件使用。它具有丰富而强大的内置动画选项，让设计者能够更方便地制作出符合要求的GIF动画。

Ulead GIF Animator 5.0作为Ulead GIF Animator家族的最新成员，使用它制作出的GIF动画再也不是传统观念上的256色了，而是允许设计者在真彩色环境下，制作出色彩斑斓的动画。

3.Swish

虽然网上的动画早已是Flash的天下，但Flash的设计过程太过烦琐。Swish是一款非常方便的Flash特效制作工具，可以实现简单地在网页中加入Flash动画。Swish特效中有许多细节，结合使用能得到非常美观的效果，支持直接预览，能直接导出为SWF文档格式，支持中文，而且可以直接修改组件。

最新版本的Swish网络版支持Flash、视频片段导入等多种新特性，这使得Swish不再是以往定位的字体特效制作工具，而是一款功能强大，操作简单的Flash制作辅助工具。事实上，如果对于新版Swish操作足够熟悉，单单利用Swish就可以很快制作出复杂的Flash特效。

3.2.4 网页上传工具

制作好的网页要上传到提供主页空间的服务器后，才能让浏览者访问。上传工具选择合适与否将影响对网站更新维护的效率。

1.CuteFTP

CuteFTP是最早支持断点续传的FTP客户软件之一，是一个集FTP上传下载、FTP搜索和网页编辑功能于一体的软件包，其功能强大，使用方便，支持拖放。最新的CuteFTP版本，为了更好地适合专业用户的使用，推出不少新的特色功能，例如，目录比较上传、宏处理、远端文件直接比较操作及IE风格的工具栏等。

CuteFTP的最新版本是CuteFTP Pro 8.3，是一个全新的商业级FTP客户端上传工具，提供了目录同步，自动排程，同时多站点链接、多协议支持（FTP、SFTP、HTTP、HTTPS），智能覆盖，整合的HTML编辑器等功能，以及更加快速的文件传输系统。

2.FlashFXP

FlashFXP是一个功能强大的上传下载工具，融合了其他优秀FTP软件的优点，例如，像CuteFTP一样可以比较文件夹，支持彩色文字显示；支持子文件夹的文件传送、删除；支持上传、下载及第三方文件续传；可以跳过指定的文件类型，只传送需要的文件；可以自定义不同文件类型的显示颜色；可以缓存远端文件夹列表，支持FTP代理；具有避免空闲功能，防止被站点踢出；支持每个站点使用被动模式等。

3.LeapFTP

LeapFTP是一款功能强大，可以媲美CuteFTP的网页上传工具。LeapFTP的用户界面采用和Netscape相仿的书签形式，连线更加方便；下载与上传文件支持续传；可下载或上传整个目录，亦可直接删除整个目录；浏览网页时，若在文件链接上单击鼠标右键选择“复制捷径”命令，便会自动下载该文件；LeapFTP具有不会因闲置过久而被站点踢出的功能；此外，还可以直接编辑远端服务器上的文件，可设定文件传送完毕自动中断网络连接。

4.其他上传工具

除了上边功能强大的上传工具以外，用户还可以选择一些短小精悍的上传工具。

（1）UploadNow!上传工具

UploadNow!上传工具可以自动上传本地站点中更新过的文件，避免上传没有更新过的文件，节省上网的时间和费用。

（2）WS-FTP上传工具

WS-FTP上传工具速度特别快，支持拖放，对有多个站点要维护的用户比较适用。

当然，除了这些专用的上传工具以外，Dreamweaver和FrontPage软件自身也具有上传网页的功能。

3.2.5 网页设计工具的发展动向

2005年4月18日，全球知名的应用软件公司Adobe以34亿美元的价格收购了Macromedia公司，这次收购代表着多媒体产业领域的融合。Adobe公司收购Macromedia公司后，无论在图形处理方面，还是在网页制作方面，都会成为未来的垄断者。Adobe与Macromedia两个公司从此将共同迎接更广大的消费者群体，面对更大的市场成长机会，特别是在无线通信和企业级应用两大领域。

随着Adobe公司对Macromedia公司进行全新的整合，势必推出更加强大的图形网页应用软件，为图形处理与网页制作开创出新的空间。目前网页制作中的HTML代码与图片都是单独制作的，需要美工人员与网页制作人员共同完成，但是，随着两家公司的合并，极有可能推出新的软件，实现图片与网页的一体化操作，提高网页制作的效率。

需要注意的是，Adobe公司近年来的开发理念发生了转变，不再只看重于单个软件的功能，而是努力营造一种多软件综合使用的新概念，即以拳头产品Photoshop、Illustrator作为龙头，将原先应用于其他领域的软件与之进行功能上的整合，通过套件方式（Creative Suite）综合应用到各个领域，甚至那些其并不处于优势地位的领域。

GoLive原名CyberStudio，是德国开发商GoLive Systems的旗舰产品，1999年Adobe将其收购，而后来Adobe又收购了Macromedia Dreamweaver，虽然二者面向的用户不同，但它们之间还是不可避免地产生了功能重叠。2008年4月28日，Adobe宣布，停止开发旗下的GoLive网页编辑器，从4月28日开始，也将停止销售GoLive。

另外，Fireworks和ImageReady在未来的地位，也很有可能被已经强势的Photoshop和Flash取代。

习题3

3.1 举例说明网页基本元素的种类和特点。

3.2 简述网页布局的步骤、原则和类型。

3.3 根据自己的经验和体会，谈谈你对网页配色的看法。

3.4 上网查看不同的网页，并分析其属于哪种布局。

3.5 简述常见的网页编辑工具及“所见即所得”网页编辑器的特点。

3.6 简述常见的网页图形图像处理工具及其特点。

3.7 简述常见的网页动画制作与特效工具及其特点。

3.8 简述常见的网页上传工具及其特点。

3.9 登录“中关村在线软件下载频道”（http://xiazai.zol.com.cn）参考更多的网页制作工具，思考在制作网页之前对网页制作工具的选择方案。

第3章 网页设计