1.1 什么是网页设计

网页设计是近年来兴起的设计领域，是继报纸、广播、电视之后的又一全新的设计媒介。网页设计代表着一种新的设计思路，一种为客户服务的理念，一种对网络特点的把握和对网络限制条件的理解。

1.1.1 网页设计概述

随着时代的发展、科学的进步、审美需求的不断提高，网页设计已经在短短数年内跃升成为一个新的艺术门类，而不再仅仅是一门技术。相比其他传统的艺术设计门类而言，它更突出艺术与技术的结合、形式与内容的统一、交互与情感的诉求。

在这种时代背景的要求下，人们对网页设计产生了更深层次的审美需求。网页不仅仅是把各种信息简单地堆积起来，达到能看或者表达清楚的目的，更要考虑通过各种设计手段与技术技巧，让受众能更多更有效地接收网页上的各种信息，从而对网站留下深刻的印象，催生消费行为，提升企业品牌形象。

随着互联网技术的进一步发展与普及，当今时代的网站，更注重审美的要求和个性化的视觉表达，这也对网页设计师这一职业提出了更高层次的要求。一般来说，平面设计中的审美观点都可以套用到网页设计上来，可以利用各种色彩的搭配营造出不同氛围和不同形式的美。

但网页设计也有自己的独特性，在颜色的使用上，它有自己的标准色——“安全色”；在界面设计上，要充分考虑到浏览者使用的不同浏览器、不同分辨率的各种情况；在元素的使用上，它可以充分利用多媒体的长处，选择最恰当的音频与视频相结合的表达方式，给用户以身临其境的感觉和比较直观的印象。这只是一个比较模糊抽象的概念，在网络世界中，有许许多多设计精美的网页值得去欣赏、学习和借鉴，如图1-1所示。

图1-1中的网页，也仅仅是互联网海洋中众多优秀网页作品的一朵朵小浪花而已，但从以上作品不难看出，一般来说，好的网站应该给人这样的感觉：干净整洁、条理清晰、专业水准、引人入胜。优秀的网页设计作品是艺术与技术的高度统一，它应该包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等5个特点。

1.1.2 网页设计中的术语

在相同的条件下，有些网页不仅美观、大方，打开的速度也非常快，而有些网页却要等很久，这就说明网页设计不仅仅需要页面精美、布局整洁，很大程度上还要依赖于网络技术。因此网站不仅仅是设计者审美观、阅历的体现，更是设计者知识面、技术等综合素质的展示。

下面向大家介绍一些与网页设计相关的术语，只有了解了网页设计的相关术语，才能够制作出具有艺术性和技术性的网页。

●因特网

因特网，英文为Internet，整个因特网的世界是由许许多多遍布全世界的电脑组织而成的，当一台电脑在连接上网的一瞬间，它就已经是因特网的一部分了。网络是没有国界的，通过因特网，你随时可传递文件信息到世界上任何因特网所能覆盖的角落，当然也可以接收来自世界各地的实时信息。

在因特网上查找信息，“搜索”是最好的办法。比如可以使用搜索引擎“百度”，它提供了强大的搜索能力，只需要在文本框中输入几个查找内容的关键字，就可以找到成千上万与之相关的信息，如图1-2所示。

●浏览器

浏览器是安装在电脑中用来查看因特网中网页的一种工具，每一个用户都要在电脑上安装浏览器来“阅读”网页中的信息，这是使用因特网的最基本的条件，就好像人们要用电视机来收看电视节目一样。目前大多数用户所用的Windows操作系统中已经内置了浏览器。

●URL

URL是Universal Resource Locater的缩写，中文为“全球资源定位器”。它就是网页在因特网中的地址，访问网站需要URL来找到网站的地址。例如“搜狐”的URL是www.sohu.com，也就是他的网址，如图1-3所示。

●HTTP

HTTP是Hypertext Transfer Protocol的缩写，中文为“超文本传输协议”，它是一种最常用的网络通信协议。如果想链接到某一特定的网页时，就必须通过HTTP协议，不论你是用哪一种网页编辑软件，在网页中加入什么资料，或是使用哪一种浏览器，利用HTTP协议都可以看到正确的网页效果。

●TCP/IP

TCP/IP是Transmission Control Protocol/Internet Protocol的缩写，中文为“传输控制协议/网络协议”。它是因特网所采用的标准协议，因此只要遵循TCP/IP，不管电脑是什么系统或平台，均可以在因特网的世界中畅行无阻。

●FTP

FTP是File Transfer Protocol的缩写，中文为“文件传输协议”。与HTTP协议相同，它也是URL地址使用的一种协议名称，以指定传输某一种因特网资源，HTTP协议用于链接到某一网页，而FTP协议则是用于上传或是下载文件。

●IP地址

IP地址是分配给网络上计算机的一组由32位二进制数值组成的编号，来对网络中计算机进行标识。为了方便记忆地址，采用了十进制标记法，每个数值小于等于225，数值中间用“.”隔开。一个IP地址对应一台计算机并且是唯一的，这里需要注意的是所谓的唯一是指在某一时间内唯一，在使用网络的这一时段内，这个IP是唯一的指向正在使用的计算机的，如果使用动态IP，那么每一次分配的IP地址是不同的；另一种是静态IP，它是固定将这个IP地址分配给某计算机使用的。网络中的服务器就是使用的静态IP。

●域名

IP地址是一组数字，人们记忆起来不够方便，因此人们给每个计算机赋予了一个具有代表性的名字，这就是主机名，主机名由英文字母或数字组成。将主机名和IP对应起来，这就是域名，以方便大家记忆。

域名和IP地址是可以交替使用的，但一般域名还是要通过转换成IP地址才能找到相应的主机，这就是上网的时候经常用到的DNS域名解析服务。

●虚拟主机

虚拟主机（Virtual Host/Virtual Server）是使用特殊的软硬件技术，把一台计算机主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名和IP地址（或共享的IP地址），有完整的Internet服务器（WWW、FTP、Email等）功能。在同一台硬件、同一个操作系统上，运行着为多个用户打开的不同的服务器程序，互不干扰；而各个用户拥有自己的一部分系统资源（IP地址、文件存储空间、内存、CPU时间等）。虚拟主机之间完全独立，并可由用户自行管理，在外界看来，每一台虚拟主机和一台独立的主机的表现完全一样。

虚拟主机属于企业在网络营销中比较简单的应用，适合初级建站的小型企事业单位。这种建站方式，适合用于企业宣传、发布比较简单的产品和经营信息。

●租赁服务器

租赁服务器是通过租赁ICP的网络服务器来建立自己的网站。

使用这种建站方式，用户无须购置服务器只需租用他们的线路、端口、机器设备和所提供的信息发布平台就能够发布企业信息，开展电子商务。它能替用户减轻初期投资的压力，减少对硬件长期维护所带来的人员及机房设备投入，使用户既不必承担硬件升级负担又可以建立一个功能齐全的网站。

●主机托管

主机托管是企业将自己的服务器放在ICP的专用托管服务器机房，利用它们的线路、端口、机房设备为信息平台建立自己的宣传基地和窗口。

使用独立主机是企业开展电子商务的基础。虚拟主机会被共享环境下的操作系统资源所限，因此，当用户的站点需要满足日益发展的要求时，虚拟主机将不再满足用户的需要，这时候用户需要选择使用独立的主机。

1.2 网页设计常用软件和技术

要想制作出精美的网站页面，需要综合运用各种网页制作工具和技术，本节将向读者简单介绍网站开发常用的软件和技术。

1.2.1 网页图像处理软件——Photoshop CC

最常用的网页图像处理软件主要有Photoshop和Fireworks，其中Photoshop凭借其强大的功能和广泛的应用范围，一直占据着图像处理软件的领先地位。Photoshop支持多种图像格式以及多种色彩模式，可以任意调整图像的尺寸、分辨率及画布的大小，使用Photoshop可以设计整体的网页效果、处理网页中的图像效果、设计网站Logo、设计网页按钮和网页宣传广告图像等。本书主要以最新版本的Photoshop CC为读者进行讲解，Photoshop CC的工作界面如图1-4所示。

1.2.2 网页动画制作软件——Flash CC

Flash是一款非常优秀的交互式矢量动画制作软件，能够制作包含矢量图、位图、动画、音频、视频、交互式动画等内容在内的站点。为了引起浏览者的注意和兴趣，传递网站的动感和魅力，许多网站的介绍页面、宣传广告、按钮，甚至整个网站，都是采用Flash制作出来的。用Flash制作的网页文件比普通网页文件要小很多，这大大加快了网页的浏览速度，所以Flash是一款十分适合网页动画制作的软件。本书主要以最新版本的Flash CC为读者进行讲解，Flash CC的工作界面如图1-5所示。

1.2.3 网页编辑制作软件——Dreamweaver CC

Dreamweaver是网页设计与制作领域中用户最多、应用最广泛、功能最强大的软件，无论是在国内还是在国外，Dreamweaver都备受专业网站开发人员的喜爱。Dreamweaver用于网页的整体布局和设计，以及对网站的创建和管理，与Flash、Photoshop并称为“网页三剑客”，利用Dreamweaver可以轻而易举地制作出充满动感的网页。本书主要以最新版本的Dreamweaver CC为读者进行讲解，Dreamweaver CC的工作界面如图1-6所示。

1.2.4 网页标记语言——HTML

要想专业地进行网页的设计和编辑，最好还要具备一定的HTML语言知识。虽然现在有很多可视化的网页设计制作软件，但网页的本质都是由HTML语言构成的，要想精通网页制作，必须要对HTML语言有相当的了解。

HTML是HyperText Marked Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。

1.2.5 网页特效脚本语言——JavaScript

在网页设计中使用脚本语言，不仅可以缩小网页的规模，提高网页的浏览速度，还可以丰富网页的表现力，因此脚本语言已成为网页设计中不可缺少的一种技术。目前最常用的脚本有JavaScript和VBScript等，其中JavaScript是众多脚本语言中较为优秀的一种，是许多网页开发者首选的脚本语言。

JavaScript是一种描述性语言，它可以被嵌入到HTML文件中。和HTML一样，用户可以用任何一种文本编辑工具对它进行编辑，并在浏览器中进行预览。同时，JavaScript也是一种解释性编程语言，即当用户向服务器请求页面资源时，其源代码在发往客户端执行之前并不需要经过编译，而是将文本格式的字符代码随HTML一起发送给客户端，完全由客户端支持JavaScript的浏览器来解释和执行。如图1-7所示为使用JavaScript实现的网页特效。

1.3 “网页三剑客”的关系

之所以将Dreamweaver、Photoshop和Flash称为“网页三剑客”，是因为通过这三种软件相互之间的无缝合作，可以设计制作出精美的网页。可以说“网页三剑客”是当今网页设计制作的必备工具。

“网页三剑客”是相辅相成的关系，缺少其中任何一种软件，都可能无法制作出精美的网页。在设计制作网页时，通常是使用Photoshop将网站页面设计出来，这样可以直观地看到整个网页所呈现的效果，便于对网页进行细化和修改，直至最终定稿。然后使用Flash将网页中相应的部分制作成Flash动画，通过Flash动画可以增强网页的表现力。最后在Dreamweaver中将设计好的网站页面制作成HTML网页。如图1-8所示为网页设计制作的基本流程。

在网页设计领域的应用中，“网页三剑客”主要用于网页设计制作，最终的目的是需要制作成HTML页面，其中最重要的是网页制作软件Dreamweaver，通过Dreamweaver软件可以对网页的背景、文字、图像、动画等各种元素进行控制，并应用各种技术最终生成HTML页面。而图像处理软件Photoshop和动画制作软件Flash在网页设计领域中主要还是用于辅助网页设计制作的，使用Photoshop设计网页界面、处理网页图片等，使用Flash制作网页中的Flash动画。如图1-9所示为“网页三剑客”之间的关系。

1.4 网站建设的基本流程

开始建设网站之前就应该有一个整体的战略规划和目标，规划好网页的大致外观后就可以进行设计。当整个网站测试完成后，就可以发布到网上。大部分站点需要定期进行维护，以实现内容的更新和功能的完善。

1.4.1 前期网站策划

一件事情的成功与否，其前期策划举足轻重。网站建设也是如此。网站策划是网站设计的前奏，主要包括确定网站的用户群和定位网站的主题，还有形象策划、制作规划和后期宣传推广等方面的内容。网站策划在网站建设的过程中尤为重要，它是制作网站过程中所迈出的重要的第一步。作为建设网站的第一步，网站策划应该切实地遵循“以人为本”的创作思路。

网络是用户主宰的世界，由于可选择对象众多，而且寻找起来也相当便利，所以网络用户明显缺乏耐心，并且想要迅速满足自己的要求。如果他们不能在一分钟之内弄明白如何使用一个网站，他们会认为这个网站不值得再浪费时间，然后就会离开，因此只有那些经过周密策划的网站才能吸引更多的访问者。

1.4.2 规划站点结构

一个网站设计得成功与否、很大程度上取决于设计者规划水平的高低。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、网站导航、颜色搭配、版面布局、文字图片的运用等。只有在制作网站之前把这些方面都考虑到了，才能在制作时胸有成竹。

1.4.3 收集网站相关素材

网站的前期策划完成以后，接下来就是按照确定的主题进行资料和素材的收集、整理。这一步也是特别重要的，好的想法如果没有内容来充实是肯定不能实现的。但是资料、素材的选择是没有什么规律的，可以寻找一些自己认为好的东西，同时也要考虑浏览者的情况，因为每个人的喜好都不同，如何权衡取舍，就要看设计者如何把握了。收集回来的资料一定要整理好，归类清楚，以便以后使用。

1.4.4 网页的版式与布局分析

当资料的收集、整理完成后，就可以开始进行具体的网页设计工作。在进行网页设计时，首先要做的就是设计网页的版式与布局。现在，网页的布局设计变得越来越重要，因为访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功结合时，这种网页或者说站点才是受人欢迎的。取任何一面都有可能无法留住“挑剔”的访问者。

网页布局的方法有两种，第一种为纸上布局法，第二种为软件布局法。

纸上布局法。许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计软件中边设计布局边添加内容。这种不打草稿的方法很难设计出优秀的网页来，所以在开始制作网页时，要先在纸上画出页面的布局草图。

软件布局法。如果制作者不喜欢用纸来画出布局图，那么还可以利用软件来完成这些工作。可以使用Photoshop, Photoshop所具有的对图像的编辑功能正适合设计网页布局。利用Photoshop可以方便地使用颜色、图形，并且可以利用层的功能设计出用纸张无法实现的布局概念。

1.4.5 确定网页的主色调

色彩是艺术表现的要素之一。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。同时应该根据色彩对人们心理的影响，合理地加以运用。按照色彩的记忆性原则，一般暖色较冷色的记忆性强；色彩还具有联想与象征的特质，如红色象征血、太阳，蓝色象征大海、天空和水面等。网页的颜色应用并没有数量的限制，但不能毫无节制地运用多种颜色。一般情况下，先根据整体风格的要求定出一到两种主色调，有CIS（企业形象识别系统）的，更应该按照其中的VI进行色彩运用。如图1-10所示为成功的网站配色。

在色彩的运用过程中，还应该注意的一个问题是由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜好程度有着很大的差异。如儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在沙漠中的人喜欢绿色等。设计者在设计中要考虑主要读者群的背景和构成，以便选择恰当的色彩组合。

1.4.6 设计网站页面

在版式布局完成的基础上，将确定需要的功能模块（功能模块主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、版权信息等）、图片、文字等放置到页面上。需要注意的是，这里必须遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的摆放。

1.4.7 切割和优化网页图像

整体的页面效果制作好以后，就要考虑如何把整个页面分割开来，使用什么样的方法可以使最后生成的页面的文件量最小。对页面进行切割与优化是具有一定规律和技巧的。

1.4.8 制作网站HTML页面

这一步就是具体的制作阶段，也就是大家常说的网页制作。目前主流的网页可视化编辑软件是Adobe公司Dreamweaver，它具有强大的网页编辑功能，适合专业的网页设计制作人员，本书将主要介绍使用Dreamweaver对网页进行设计制作。完成了这一步整个网页也就制作完成。

1.4.9 开发动网站模块

完成网站HTML静态页面的制作后，如果还需要动态功能的话，就需要开发动态功能模块。网站中常用的功能模块有新闻发布系统、搜索功能、产品展示管理系统、在线调查系统、在线购物、会员注册管理系统、统计系统、留言系统、论坛及聊天室等。

1.4.10 申请域名和服务器空间

网页制作完毕，最后要发布到Web服务器上，才能够让众多的浏览者观看。首先需要申请域名和空间，然后才能上传到服务器上。

可以用搜索引擎查找相关的域名空间提供商，在他们的网站上可以进行在线域名查询，从而找到最适合自己的而且还没有被注册的域名。

有了自己的域名后，就需要一个存放网站文件的空间，而这个空间在Internet上就是服务器。一般情况下，可以选择虚拟主机或独立服务器的方式。

1.4.11 测试并上传网站

网站制作完成以后，暂时还不能发布，需要在本机上内部测试，并进行模拟浏览。测试的内容包括版式、图片等显示是否正确，是否有死链接或者空链接等，发现有显示错误或功能欠缺后需要进一步修改，如果没有发现任何问题，就可以发布上传了。发布上传是网站制作最后的步骤，完成这一步骤后，整个过程就结束了。

1.4.12 网站的更新与维护

严格地说，后期更新与维护不能算是网站设计过程中的环节，而是制作完成后应该考虑的。但是这一项工作却是必不可少的，尤其是信息类网站，更新和维护更是必不可少。这是网站保持鲜活力、吸引力以及正常运行的保障。