1.2 什么是网页设计
现在人们使用网络越来越频繁，作为上网主要依托的网页变得越来越重要，这使得网页设计得到了快速发展。网页讲究的是排版布局，其目的就是给每一个浏览者提供一种布局更合理、功能更强大、使用更方便的浏览形式，使他们能够愉快、轻松、快捷地了解网页所提供的信息。
1.2.1 网页设计概述
随着时代的发展、科学的进步、需求的不断提高，网页设计已经在短短数年内跃升为一个新的艺术门类，而不再仅仅是一门技术。相比其他传统的艺术设计门类，它更突出艺术与技术的结合、形式与内容的统一、交互与情感的诉求。
在这种时代背景下，人们对网页设计产生了更深层次的审美需求。网页不仅是把各种信息简单地堆积起来，能看或能表达清楚意思就行，还要考虑通过各种设计手段与技术技巧，让受众能更多、更有效地接收网页上的信息，从而对网站留下深刻的印象，进而催生消费行为，提升企业品牌形象。
随着互联网技术的进一步发展与普及，当今时代的网站更注重审美的要求和个性化的视觉表达，这就对网页设计师这一职业提出了更高层次的要求。一般来说，平面设计中的审美观点都可以套用到网页设计中，还可以利用各种色彩的搭配营造出不同氛围、不同形式的美。
但网页设计也有自己的独特性，在颜色的使用上，它有自己的标准色——“安全色”；在界面设计上，要充分考虑到浏览者使用的不同浏览器、不同分辨率等各种情况；在元素的使用上，可以充分利用多媒体的长处，选择最恰当的音频与视频相结合的表达方式，给用户以身临其境的感觉和比较直观的印象。说到底，这还只是一个比较抽象的概念，在网络世界中，有许多设计精美的网页值得设计者欣赏和借鉴，如图1-3所示。
图1-3 精美网页欣赏
以上的网页也仅仅是互联网上优秀网页作品海洋中的一朵小浪花而已，但从以上作品不难看出，一般来说，好的网页应该给人有这样的感觉：干净整洁、条理清晰、专业水准、引人入胜。优秀的网页设计作品是艺术与技术的高度统一，它应该包含视听元素与版式设计两项内容；以为用户考虑、主题突出、整体性、形式与内容统一、及时更新和维护为设计原则；具有即时交互性、版式设计的不可控性、技术与艺术结合的紧密性、多媒体的综合性、多维性五个特点。
1.2.2 网页设计和网页制作
很多人对网页设计和网页制作的概念和界限不是很清楚，那么网页设计和网页制作之间到底有什么区别和联系呢？
首先来看如下的两则招聘广告。
甲网络公司：精通HTML和CSS代码，能够手工编写和修改源代码，并且熟练使用Photoshop等图形设计软件，有网站维护工作经验者优先。
乙网络公司：美术设计专业毕业，五年以上相关专业工作经验，精通现在流行的各种平面设计、动画、网页制作技术。
这是从众多招聘信息中挑出的具有代表性的两则招聘广告，这两个公司对网页制作的定位不同：甲网络公司重点要求应聘者能够编写代码；乙网络公司则更倾向于要求应聘者具有一定水准的美术功底。
这样可以试着给网页设计与网页制作下定义：
网页设计=网页技术+网页设计
网页制作=网页技术
由以上两个公式可知，网页设计师需要掌握的技能显然更加全面，优秀的网页设计师肯定是网页技术高手和网页设计高手的结合，也就是说应该做到“网页设计”和“网页技术”两手抓，这样的人制作出来的网页才既具备众多交互性能、动态效果，也具有形式上的美感。
另外，我们说网站“设计”而不说网站“制作”，因为设计是一个思考的过程，而制作只是将思考的结果表现出来。成功的网站首先需要优秀的设计，然后需要辅以优秀的制作。设计是网站的核心和灵魂，一个相同的设计可以有多种制作的方式。
许多网站现在已不再设立专门的网页制作职位，不过对于那些想要进入Web开发行业但又欠缺经验的人来说，从网页制作职位做起是很好的选择。
1.2.3 网页设计的特点
与从前纯文字和数字的网页相比，现在的网页无论是在内容上还是在形式上，都已经得到了极大的丰富，网页设计主要具有以下特点。
1．即时交互性
网络媒体不同于传统媒体的地方就在于信息的动态更新和即时交互性。具有即时交互性是网络媒体成为热点媒体的主要原因，进行网页设计时也必须考虑即时交互性的问题。传统媒体都以线性方式提供信息，即按照信息提供者的感觉、体验和事先确定的格式来传播信息，而信息接收者只能被动地接收。而在网络环境下，人们不再是一个传统媒体方式的被动信息接收者，而是以一个主动参与者的身份加入信息的加工处理和发布之中。这种持续的交互使网页艺术设计不像印刷品设计那样，出版之后就意味着设计的结束，而是由网页设计人员根据网站各个阶段的经营目标，配合网站不同时期的经营策略及用户的反馈信息，经常对网页进行调整和修改。例如，为了保持浏览者对网站的新鲜感，很多大型网站总是定期或不定期地进行改版，这就需要设计者在保持网站视觉形象统一的基础上，不断创作出新的网页作品。
2．版式设计的不可控性
网页的版式设计与传统印刷品的版式设计有着极大的差异：一是印刷品设计者可以指定使用的纸张和油墨，而网页设计者却不能要求浏览者使用什么样的计算机或浏览器；二是网络正处于不断发展之中，不像印刷那样已经基本具备了成熟的印刷标准；三是网页设计过程中有关Web的每一件事都可能随时发生变化。
这就说明网络应用尚处于发展中，很难针对网络应用的各个方面制定出统一的标准，这必然导致网页版式设计的不可控性。其具体表现：一是网页页面会根据当前浏览器窗口大小自动格式化输出；二是网页的浏览者可以控制网页页面在浏览器中的显示方式；三是在不同种类、不同版本的浏览器中观察同一个网页时效果会有所不同；四是浏览者的浏览器工作环境不同，显示效果也会有所不同。
把这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，这正是网页版式设计的不可控性。
3．技术与艺术结合的紧密性
设计受主观因素和客观因素的共同作用，是在自由和不自由之间进行的，设计者不能超越自身已有的经验和所处环境提供的客观条件来进行设计。优秀的设计者正是在掌握客观规律的基础上，进行自由想象和创造。网络技术主要表现为客观因素，艺术创意主要表现为主观因素，网页设计者应该积极主动地掌握现有的各种网络技术规律，注重技术和艺术的紧密结合，这样才能发挥技术之长，实现艺术想象，满足浏览者对网页的高质量需求。
例如，浏览者欣赏一段音乐或一部电影，以前必须先将这段音乐或这部电影下载到自己的计算机上，然后再使用相应的程序来播放，由于音频或视频文件都比较大，需要较长的下载时间。但当媒体技术出现以后，网页设计者充分、巧妙地应用此技术，让浏览者在下载过程中就可以欣赏这段音乐或这部电影，实现了在线欣赏音乐服务和实时视频播放服务，这无疑大大增强了页面传播信息的表现力和感染力。
4．多媒体的综合性
目前网页中使用的多媒体视听元素主要有文字、图像、动画、音频、视频等。但网络带宽的增加、芯片处理速度的提高及跨平台的多媒体文件格式的推广，必将促使设计者综合运用多媒体元素来设计网页，以满足浏览者对网页的更高要求。目前，国内网页已出现了模拟三维的操作界面，在数据压缩技术和流媒体技术的推动下，互联网上出现了实时音频和视频服务，如在线音乐、在线广播、在线电影等。因此，多媒体的综合运用已经成为网页艺术设计的特点之一，也是网页设计未来的发展方向之一。
5．多维性
多维性源于超链接，它主要体现在网页设计中导航的设计上。由于超链接的出现，网页的组织结构变得更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。例如，可以将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不仅增加了浏览者检索和查找信息的难度，也给设计者带来更大的挑战。为了让浏览者能在网页上迅速找到所需的信息，设计者必须考虑设计快捷而完善的导航和超链接，如图1-4所示。
图1-4 网页中的导航和超链接设置
在印刷品中，导航的问题不是很突出。例如，如果一个句子在页尾还没有结束，读者会很自然地翻到下一页查找剩余部分，而且印刷品还提供了目录、索引和脚注等帮助读者查阅。
然而，网页设计者所要做的网页导航工作就没有那么简单了。要在网页中提供足够的、不同角度的导航链接，以帮助浏览者在网页的各个部分之间任意跳转，并告知浏览者现在所在的位置、当前页面与其他页面之间的关系等。
每个网页中都有一个返回主页的按钮或链接，如果页面是按层次结构组织的，通常还有一个返回上级页面的链接。网页设计者面对的不是按顺序排列的印刷品页面，而是自由分散的网页，因此，必须考虑更多的问题。例如，怎样构建合理的页面组织结构，将大量信息有条理地呈现给浏览者；怎样建立包括站点索引、帮助页面、查询功能在内的导航系统。链接关系的处理对于信息类门户网站来说尤为重要。国内某门户网站对链接关系的处理，如图1-5所示。
图1-5 国内某门户网站对链接关系的处理
1.2.4 网页设计的相关术语
在打开网页时，浏览者可能有过这样的经历：在相同的条件下，有些网页打开的速度非常快，而有些网页打开的速度却非常慢。这就说明网页设计不仅需要依赖设计者的审美观，还要依赖网络技术。因此，一个很简单的网站不仅是设计者审美观、阅历的体现，还是设计者知识面、技术等综合素质的展示。
下面介绍一些与网页设计有关的术语，只有了解了网页设计的相关术语，才能制作出具有艺术性和技术性的网页。
1．互联网
互联网，英文为Internet，整个互联网是由遍布全世界的计算机组成的，当一台计算机在连接上网络的一瞬间，就已经是互联网的一部分了。网络是没有国界的，人们可以通过互联网随时传递文件信息到世界上任何互联网能接触的地方，当然也可以接收来自世界各地的实时信息。
搜索是在互联网上查找信息最好的办法，如可以使用百度搜索引擎。它提供了强大的搜索能力，读者只需要在如图1-6所示的文本框中输入几个想要查找的内容的关键字，就可以找到成千上万与之相关的信息。
图1-6 百度搜索引擎
2．浏览器
浏览器是安装在计算机中用来查看互联网中网页的一种工具，每一个互联网的用户都要在计算机中安装浏览器才能“阅读”网页中的信息，这是使用互联网的最基本的条件。目前大多数用户所用的Windows操作系统中已经内置了浏览器。
目前人们常用的浏览器主要分为5种，如图1-7所示。以下是5款浏览器的简单介绍。
图1-7 5款主流浏览器
（1）Microsoft Internet Explorer浏览器，简称IE浏览器，由微软公司开发，使用了Trident作为浏览器内核。
（2）Google Chrome浏览器，由Google公司开发，之前使用的是Webkit内核，现在使用的是Blink内核。
（3）Firefox浏览器，由Mozilla公司开发，简称Fx，是一个自由及开放源代码的网页浏览器，使用了Gecko作为浏览器内核。
（4）Safari浏览器，是苹果系统中很优秀的浏览器，使用了Webkit作为浏览器内核。
（5）Opera浏览器，是挪威Opera Software ASA公司制作的支持多页面标签式的浏览器，现使用Blink作为浏览器内核。
虽然这5款浏览器的开发公司不同，但使用界面大致相同。这5款浏览器占有了网络浏览器市场的绝大部分份额。还有一些其他公司的浏览器，因为其占有的市场份额相对太小，本书不做介绍。
需要注意的是，尽管这5款浏览器的使用界面大致相同，但是浏览使用了特效的同一个网页时，显示的效果也可能不同，即便是同一款浏览器的不同版本也有这样的状况。因此，在网页设计制作过程中应该考虑到浏览对象的不同而选择不同的设计制作方式。
例如，如果网站主要面向的是国内用户，而国内用户大多使用UC浏览器或者360浏览器，设计师就可以选择目标浏览器是IE，同时要兼顾还在使用低版本浏览器的用户；如果主要面向的是海外用户，而海外用户大多习惯使用Google Chrome浏览器，设计师就可以选择适配Chrome的浏览器特性。
3．网页
网页，英文名为Web Page。随着科学技术的飞速发展，互联网在人们的工作和生活中发挥的作用越来越大。当人们接入互联网后，首先打开浏览器窗口，其次在地址栏中输入网址，就可以打开一张网页。
在现实世界里，人们可以看到的是多彩的世界；而在网络世界里，人们可以看到的就是一张张漂亮的网页，它可以带浏览者“周游世界”。互联网最重要的功能之一就是“资源共享”，由此可见，网页作为展现互联网丰富资源的基础是非常重要的。
网页一般是由许多元素构成的。最基本的元素就是文字，文字是人类最基础的表达方式，因此不可缺少。但是网页中不可能只有文字，这样就太枯燥了，因此还要增加一些图像、动画、影片等元素来丰富网页内容，给人们以生动、直接的感觉。网易首页如图1-8所示。
图1-8 网易首页
4．网站
网站，英文名为Web Site。简单来说，网站就是多个网页的集合，其中包括一个首页和若干个分页。那什么是首页呢？非常好理解，首页即浏览者访问某个网站时第一个打开的网页，除首页之外的其他网页就是分页。中国铁路12306的主页如图1-9所示。
图1-9 中国铁路12306的主页
网站是多个网页的集合，但不是简单的集合，这要根据网站的内容来决定，如由多少个网页构成、如何分类等。
5．HTML
HTML是Hypertext Markup Language的缩写，中文为“超文本标记语言”。它是制作网页的一种标准语言，以代码的方式来进行网页的设计，如图1-10所示。用HTML设计网页和用Dreamweaver设计网页相比，设计过程截然不同，但本质和结果却是基本相同的。所以，学习好HTML，对于读者从根本上了解网页设计和使用Dreamweaver十分有益。
图1-10 HTML代码
6．URL
URL是Universal Resource Locater的缩写，中文为“统一资源定位器”。它表示网页在互联网中的地址，如果要访问某个网站，需要URL才能够找到该网页的地址。例如，360搜索的URL是www.so.com，也就是它的网址，如图1-11所示。
图1-11 360搜索的URL
7．HTTP
HTTP是Hypertext Transfer Protocol的缩写，中文为“超文本传送协议”。它是一种最常用的网络通信协议，若想链接到某个特定的网页，就必须通过HTTP，无论你是用哪一种网页编辑软件在网页中加入什么资料，还是使用哪一种浏览器，通过HTTP都可以看到正确的网页效果。
8．TCP/IP
TCP/IP是Transmission Control Protocol/Internet Protocol的缩写，中文为“传输控制协议/互联网协议”。它是互联网采用的标准协议，因此只要遵循TCP/IP，不管计算机是什么系统或平台，均可以在互联网的世界中畅行无阻。可以在“本地连接 属性”对话框中进行设置，如图1-12所示，勾选“Internet协议版本4（TCP/IPv4）”和“Internet协议版本6（TCP/IPv6）”复选框即可。
图1-12 “本地链接-属性”对话框
9．FTP
FTP是File Transfer Protocol的缩写，中文为“文件传输协议”。与HTTP相同，它也是URL使用的一种协议名称，以指定传输某一种互联网资源。HTTP用于链接到某个网页，而FTP则用于上传或下载文件。
10.IP地址
IP地址是分配给网络中的计算机的一组由32位二进制数值组成的编号，用来对网络中的计算机进行标识。
为了便于人们记忆，IP地址采用了点分十进制表示，每个数值小于或等于225，数值中间用“．”隔开，一个IP地址对应一台计算机并且是唯一的。
需要注意的是，所谓的唯一是指在某个时间段内唯一。如果使用动态IP，那么每一次分配的IP地址是不同的，在使用网络的这一时段内，这个IP地址是唯一指向正在使用的计算机的。而静态IP是指将这个IP地址固定分配给某计算机使用。网络中的服务器使用的就是静态IP。
11．域名
IP地址是一组数字，不方便人们记忆，因此人们给每个计算机赋予了一个具有代表性的名字，即主机名，主机名由英文字母或数字组成，将主机名和IP对应起来，就是域名，方便了大家记忆。
域名和IP地址是可以交替使用的，但一般情况下域名要转换成IP地址才能找到相应的主机，这就是上网时经常用到的DNS域名解析服务。
12．静态网页
静态网页是相对于动态网页而言的，并不是说网页中的元素都是静止不动的。静态网页是指浏览器与服务器端不发生交互的网页，网页中的GIF动画及按钮等都会发生变化。
静态网页的执行过程大致如下。
（1）浏览器向网络中的服务器发出指向某个静态网页的请求。
（2）服务器接收到请求后将其传输给浏览器，此时传送的只是文本文件。
（3）浏览器接收到服务器传来的文件后解析HTML标签，将结果显示出来。
13．动态网页
动态网页除了包括静态网页中的元素，还包括一些应用程序，这些程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要依靠服务器中的应用程序服务器才能完成。
14．虚拟主机
虚拟主机（Virtual Host/Virtual Server）是使用特殊的软件和硬件技术，把一台计算机主机分成多台“虚拟”的主机，每一台虚拟主机都具有独立的域名和IP地址（或共享的IP地址），有完整的互联网服务器（WWW、FTP、Email等）功能。在同一台硬件、同一个操作系统上，运行着为多个用户打开的不同网页的服务器程序，互不干扰；而各个用户拥有自己的一部分系统资源（IP地址、文件存储空间、内存、CPU时间等）。虚拟主机之间完全独立，并可由用户自行管理，在外界看来，每一台虚拟主机和一台独立的主机的表现完全一样。
虚拟主机属于企业在网络营销中比较简单的应用，适合初级建站的小型企事业单位使用。通过虚拟主机可以进行企业宣传、发布比较简单的产品和经营信息等。
15．租赁服务器
用户可以通过租赁ICP的网络服务器来建立自己的网站。
使用这种建站方式，用户无须购置服务器，只需租用它们的线路、端口、机器设备和所提供的信息发布平台就能够发布企业信息，开展电子商务。它能帮助用户减轻初期投资的压力，减少长期对硬件进行维护所带来的人员及机房设备投入，使用户不必承担硬件升级负担就可以建立一个功能齐全的网站。
16．主机托管
主机托管是企业将自己的服务器放在ICP的专用托管服务器机房，利用它们的线路、端口、机房设备为信息平台建立自己的宣传基地和窗口。
使用独立主机是企业开展电子商务的基础。虚拟主机会被共享环境下的操作系统资源限制，因此，当用户的站点需要满足日益发展的要求时，虚拟主机将不再能满足用户的需要，这时候用户需要选择使用独立的主机。