项目1 赏析典型网站

在设计一个网站之前，需要考虑的因素很多，从开始网站的定位，网站框架，资料收集，到具体制作中的设计，再到最后的调试、发布。这是一个环环相扣的完整过程。其中，设计网站时最重要的两大部分——整体风格和创意设计，是一个网站生存的关键。那么，怎样才能提高自己的创意能力和建站水平呢？首先，必须学会赏析优秀网站。

通过学习本项目，应达到以下学习目标。

知识目标

（1）了解优秀网站的布局结构。

（2）了解优秀网站的色彩搭配。

（3）了解网页常见组成元素。

技能目标

（1）具备分析优秀网站布局结构、色彩搭配的能力。

（2）具备收集、分析、归纳整理资料的能力。

1.1 任务描述：欣赏并解析典型网站

在学习创建、制作网页之前，我们一定要多欣赏一些优秀的网站，对这些网站的页面进行分析，了解优秀网站的界面设计、布局结构、色彩搭配、交互设计等，学习他人之长，激发学习网页设计的兴趣，为学习网页设计奠定基础。

1.2 任务准备

1.2.1 网页制作相关概念

1．WWW简介

万维网（World Wide Web, WWW），简称Web，是一个由许多互相链接的超文本组成的系统，可通过互联网访问。WWW的系统结构采用的是客户/服务器结构模式。客户端通过浏览器就可以非常方便地访问Internet上的服务器端，并迅速地获得所需的信息。

2．网页

构建WWW的基本单位是网页，网站发布后，用户通过网页浏览器来浏览网页。

我们在浏览网页时，当鼠标指针指向某段文本或是某个图像时，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接，如图1-1所示。采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以方便、快速地访问分布于全球计算机上的海量资源，从而实现在互联网中的漫游。超链接能使Web服务存在广泛和持久的生命力，它可以说是Web的灵魂。

网页中鼠标单击超级链接，就可以跳转到相应的其他文件，从而获得相应的信息，也就构成了WWW纵横交织的网状结构。

3．网站

网站是相关网页的集合，在Internet上通过超级链接关联到一起的一系列网页，从逻辑上被视为一个整体，称之为网站，网站是一组具有相关主题、拥有类似设计、链接文档和资源的集合。

一个站点的起始页面通常称之为“主页”或“首页”，主页可以看做是一个网站中所有主要内容的索引。访问者可以按照主页中的分类，快速找到自己想要的信息内容。因此，主页的好坏在很大程度上决定了这个网站的访问情况。一般主页的名称是网站主机提供的缺省文件名，如index.html或default.html。

4．静态网页与动态网页

网页大致分为两种类型，即静态网页和动态网页。静态网页是指其内容是预先确定的，没有后台数据库，不可交互的网页。你编写的是什么，它就显示什么；Web服务器不需要执行程序，直接把静态网页发送给客户端，由浏览器解释执行即可显示页面。静态网页文件后缀名以html或htm等形式出现，俗称HTML文件。静态网页工作原理如图1-2所示。

动态网页中含有服务器端代码。这里的“动态”是指页面提供用户功能，用户可以与页面产生交互功能。动态页面需要由Web服务器对服务器端代码进行解释执行生成客户端代码，然后将该代码发送给客户端，再由浏览器解释并执行。动态网页工作原理如图1-3所示。常用的动态网站技术有ASP、PHP、JSP、ASP.NET等。

从网站浏览者的角度看，无论是动态网页还是静态网页，都可以展示基本的文字、图片、动画、视频等信息；但是从网站的开发、管理、维护的角度来看，差别很大。

静态网页的特点：没有数据库的支持，交互性较差。

动态网页的特点：每一个网页根据请求的不同，可显示不同的内容，具有数据库支持，交互性强。

5．HTML语言

超文本标记语言（HyperText Markup Language, HTML），是一种网页制作的排版语言，制作的网页以．htm或．html为文件扩展名，它支持丰富的样式表、脚本、框架、表格和表单等多种网页元素，可以嵌入JavaScript语言等。

6．URL

统一资源定位器（Uniform Resource Locator, URL），当互联网中某种信息资源以某种方式存储在网络中的某处时，必须用一个唯一的URL来进行标识，这样才能方便查找。对于Web来说，可以简单并通俗地把URL理解为网址。每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页，例如，当我们在地址栏中输入网址“http://www.sina.com/index.html”时，其意思就是采用http（超文本传输协议）访问新浪网的首页，由于网页均是通过http@@（超文本传输协议）进行访问，所以默认情况下“http@@://”可以省略不写。

7．IP地址

为了使互联网上的计算机主机在通信时能够相互识别，必须给每台计算机分配一个IP地址作为网络标识，这如同公用电话网中电话号码一样。IP地址是由专门的互联网机构来分配。IP地址具有唯一性，每个连接在Internet上的主机都有一个在全世界范围内唯一的一个地址，它由32位二进制数组成，分为4组，每组8位，每组之间用小数点分隔；在实际应用中常转换成十进制数表示。

8．域名

同IP地址一样，域名也表示一个单位、机构或个人在网上的一个确定的名称或位置，不同的是，域名用字符来表示。它比IP地址有亲和力，容易被人们记住，且人们乐于使用，域名地址和IP地址是一一对应的。

通常域名表示为“主机名．……．二级域名．一级域名”，例如，新浪网的Web服务器域名地址为“www.sina.com.cn”。

1.2.2 网页构成的基本元素

阅读报刊杂志时，用户看到的主要是文字和图片；看电视的时候，用户看到的和听到的更多的是视频和音频。每一种媒体都包含许多元素。构成网页的基本元素是什么呢？任何一个网页，组成的最基本元素主要是文本、图像、动画、音频、视频、表单和表格等。

1．文本

网页中的信息以文本为主。文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。文本在网页中的主要功能是显示信息和超级链接，文本通过具体内容与不同格式来展现信息，如字体、字号、颜色、底纹和边框等。

2．图像

采用图像可以减少纯文字给浏览用户带来的枯燥感，图像在网页中的主要功能是提供信息、展示作品、装饰网页、表现风格和超级链接。

网页中使用的图像主要有GIF、JPEG、PNG等格式。

文本和图像是网页中两个最基本的构成元素，也是每个网站最基本的元素。

3．动画

动画实质上是动态的图像。网页中使用较多的动画是GIF动画与Flash动画。在网页中引入动画可以有效吸引浏览者的注意。动画在网页中的主要功能是提供信息、展示作品、装饰网页、动态交互。

4．音频和视频

将多媒体引入网页，可以在很大程度上吸引浏览者的注意。音频格式主要有MIDI、WAV、MP3等。视频在网页上有着其他媒体不可代替的优势，视频传达的信息形象生动，能给人深刻的印象，常见的视频格式有FLV、AVI、WMV等格式。

5．表单

表单是用来收集访问者信息或实现一些交互功能的网页，它是网站实现互动功能的重要组成部分。表单利用一些控件（文本框、密码框、单选按钮、复选框、下拉菜单等）来获取用户输入的信息，完成用户与网站的交互功能。

1.2.3 网页的布局类型

网页的版面布局主要指网站主页的版面布局，其他网页应该与主页风格基本一致。为了达到最佳的视觉效果，应考虑布局的合理性，版面布局是整个页面制作的关键。

常见的页面布局形式有“国”字型、“厂”字型、“封面”型、Flash型和变化型等布局。

1．“国”字型布局

“国”字型布局也可以称为“同”字型，如图1-4所示，它是一些大型网站常用的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分别列出一些内容，中间是主要部分，底部是网站的一些基本信息、联系方式、版权声明等。这种结构是网站布局较为常见的一种结构类型。

2．“厂”字型布局

“厂”字型布局结构与“国”字型布局很相近，如图1-5所示。其页面顶部为标志和广告条，下方左面为主菜单，右面显示正文信息，底部也是网站的一些基本信息。

3．“封面”型布局

“封面”型布局一般应用在网站的首页，如图1-6所示，它多为精美的平面设计结合一些动画的形式，配上简单的链接或仅仅是一个“进入”的链接按钮。这种布局给人带来赏心悦目的感觉。

4．Flash型布局

Flash型布局与“封面”型布局结构相似，如图1-7所示，不同的是，它采用了Flash技术，显得动感十足，从而大大增强了页面的视觉效果。

这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，它是一种比较新潮的布局方式，借助了Flash强大的功能，使页面所表达的信息更丰富。它的视觉效果及听觉效果如果处理得当，将会是一种非常有魅力的布局。

5．变化型布局

变化型布局的特点就是基于网站设计者的经验，把上面的几种布局形式结合起来使用，是上面几种类型的结合与变化。

1.2.4 网站风格定位

网站整体风格指的是网站的整体形象给浏览者的综合感受，包括网站上的所有元素（布局、标志、色彩、字体、页面布局、色彩搭配、浏览方式、交互性等）组成后给人的视觉印象。

风格是抽象的，比如我们觉得“网易”门户网站是平易近人的，迪士尼网站是生动活泼的，IBM网站是专业严肃的，这些都是不同网站给人留下的不同感受。

一般网页风格有3个基本要素，它们是颜色、线条和形状、版式。

1．协调运用颜色

不同的色彩影响着人们对网站的第一感觉，例如，红色系象征着激烈、兴奋；灰色系象征着平淡和低调；黄色显得华贵、明快；白色系能给人以纯洁的感觉，表示和平与圣洁等。

颜色的使用并没有一定的规则，经验上可以先确定一种能表现主题的主题色，如图1-8所示，它以暖橘色作为网站主色调，然后根据具体的需要，用颜色的近似和对比来完成整个页面的配色方案。整个页面从视觉上应是一个整体，以达到和谐、悦目的视觉效果。

2．适当选择线条和形状

文字、标题、图片等的组合会在页面上形成各种各样的线条和形状。这些线条与形状的组合，构成了主页的总体艺术效果。在制作过程中，必须注意艺术地搭配好这些线条和形状，才能增强页面的艺术魅力，如图1-9所示。

3．均衡的分割版式

在网页设计中，页面因为内容元素的需要被分割成很多区块，区块之间的均衡就是版式设计上需要着重考虑的问题，如图1-10所示。均衡并非简单理性地等量不等形的计算，一幅好的、均衡的网页版面设计，是布局、重心、对比等多种形式原理创造性全面应用的结果，它是对设计师的艺术修养、艺术感受力的一种检验。

在明确网站整体设计风格后，再找出网站中最有特色的东西，就是最能体现网站风格的东西，并以它作为网站的特色加以重点强化、宣传。

1.2.5 网站开发流程

一个网站的建设需要把很多细节结合在一起，只有把各步骤有序地完成，才能建成一个完整的网站，网站开发主要流程如图1-11所示。

1．网站需求分析及策划阶段

在接到项目后，首先需要对网站的需求进行分析，不同类型的网站设计也不一样，需要做一个合理的规划，规划好需要实现的功能，设计好适合的版式类型和主要的面对用户群，这都是网站初期要计划好的。这时要做好素材的搜集，网站中需要的内容、文字、图片等信息的收集，都是在建站时提前做好准备的。

这一阶段主要任务主要有以下几个方面。

（1）确定站点的主题

主题应该突出，什么样的网站应该有什么样的设计。设计是为主题服务的，既要“美”又要实现“功能”。一般来说，设计者可以通过网页的视觉秩序、空间层次、主从关系来鲜明地突出主题。

（2）确定站点的整体风格

风格是相对抽象的，指的是站点的整体形象给人的综合感受，包括站点的色彩、标志、字体、标语、版面布局、交互性等诸多元素。

（3）站点的主色调

根据总体风格的要求，确定出站点的一两个主色调，如果有企业形象识别系统（CIS）的，应该按照其中的视觉识别（Visual Identity, VI）进行色彩运用。

2．网站设计与制作阶段

完成网站需求分析及策划，就要开始建设网站了。建设网站主要分前台和后台两大模块。前台网站设计根据网站类型及面向人群来设计网站的版面，版面不宜太过杂乱，一定要简洁，保证用户体验，让访问者对整体设计有好感。建设后台就较为复杂了，要用较为复杂的程序整合前台，完成特定的功能。

这一阶段的主要任务包括以下几个方面。

（1）规划站点文件的目录结构

将本站点用到的各类素材和文件分门别类地组织，并放到相应的文件夹下，这就构成了网站文件的目录结构，如图1-12所示。

（2）设计各级页面

根据需求分析来规划页面的尺寸和整体造型，包括网站标题与标识、导航设计、内容设计、页脚版权设计等。此阶段可借助草图的形式进行规划设计。

（3）制作页面

制作页面，主要关键点是实现网页的页面布局。首先采用DIV+CSS布局方式实现页面布局，其次将网页中的各种元素放置在DIV中，成为网页的主体，样式通过CSS来完成。本书将重点详细介绍采用DIV+CSS布局方法来制作网页。

（4）添加后台程序

为了实现一些网页数据的交互，还需要编写相应的网页代码实现动态功能，本书不涉及这部分内容。

3．测试发布阶段

完成网站设计及制作之后，就形成了一个网站的雏形，不过这时的网站还是不够完善，需要对网站从用户体验的角度进行测试评估，逐步完善后，就可以把网站传到虚拟主机空间里，这时访问域名就可以正式访问网站了。

4．维护推广阶段

一个好的网站，不是一次性就可以制作完成的，网站在运行过程中也许还有没发现的漏洞等，在网站上线之后，还要继续改善网站的不足。维护主要针对网站的服务器、网站安全、网站内容等。此时站内工作基本完成，接下来要做的是站外推广工作，可以针对百度搜索引擎对网站进行推广，还可以在其他网络平台进行互联网推广。

1.2.6 Dreamweaver开发工具介绍

工欲善其事，必先利其器。在网站开发过程中，经常要通过一些工具辅助网页的设计和开发，好的开发工具可以使网页设计事半功倍。目前比较流行的网页设计软件有Sublime、Dreamweaver、Editplus、Notepad++等。由于Dreamweaver是一款所见即所得的开发工具，便于初学者学习和使用，因此本书所有案例将采用Dreamweaver进行开发。下面将详细介绍Dreamweaver工具的使用。

1．发展概况

Adobe Dreamweaver（DW）中文名称“梦想编织者”，起初是由美国Macromedia公司开发的集网页制作和管理于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Macromedia公司成立于1992年，2005年被Adobe公司收购。Adobe Dreamweaver使用所见即所得的接口，具有HTML（标准通用标记语言下的一个应用）编辑的功能。它有Mac和Windows系统的版本。Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver。Dreamweaver自MX版本开始，使用了Opera的排版引擎“Presto”作为网页预览。

Dreamweaver CS3是Adobe公司收购Macromedia公司后最新推出的CreativeSuite3设计套装中用于网页设计与制作的组件。作为全球最流行、最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是制作Web页站点、Web页和Web应用程序开发的理想工具。Dreamweaver、Fireworks和Flash被称为网页制作的“三剑客”。这三款工具相辅相承，是制作网页的最佳拍档之一。Adobe Dreamweaver的最新版本是Adobe CC，这个版本只能运行在Windows7、Windows8及更高版本的平台上，为了便于不同操作系统的网页爱好者更方便地学习Dreamweaver，本书中采用Adobe Dreamweaver CS6版本进行案例讲解。

Dreamweaver作为一款专业的网页开发工具，比较容易入门，这具体表现在两个方面：一是静态页面的排版，二是交互式网页的制作，而且它很容易链接到Access、SQL Server等后台数据库，因此Dreamweaver在网页制作领域得到了广泛应用。

2．界面介绍

关于软件的安装，本书不再赘述，大家可以下载安装版，也可以使用绿色版。软件安装完成后，双击桌面上的Dreamweaver图标，进入Dreamweaver的工作界面，如图1-13所示。工作界面包括3个主要部分，一是“打开最近的项目”，二是“新建”，三是“主要功能”。当我们对界面比较熟悉之后，我们可以通过单击下面的“不再显示”选项框关闭此欢迎屏幕。

为了统一工作环境，选择【窗口】/【工作区布局】/【经典】命令进行环境设置，如图1-14所示。

选择【文件】/【新建】命令（或按Ctrl+N组合键）打开新建文件对话框，如图1-15所示。

弹出“新建文件”对话框，选择“页面类型”为“HTML”，在“文档类型”下拉列表中选择“XHMTL 1.0 Transitional”项，如图1-16所示；单击“确定”按钮，新建一个网页文件。

Dreamweaver的主界面包括6个部分，分别是菜单栏、插入面板、文档工具栏、文档窗口、属性面板及其他常用浮动面板，各部分布局如图1-17所示。

下面对Dreamweaver主界面的6个部分进行详细介绍，具体如下。

（1）菜单栏

Dreamweaver的菜单栏包括文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助10个菜单栏。各个菜单项的介绍如下。

● “文件”菜单：包含“新建”“打开”“保存”“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”“打印代码”等。

● “编辑”菜单：包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对 Dreamweaver 菜单中“首选参数”的访问。

● “查看”菜单：可以看到文档的各种视图，例如“设计”视图和“代码”视图，并且可以显示和隐藏不同类型的页面元素和 Dreamweaver 工具及工具栏。

● “插入”菜单：提供“插入”栏的具体项，用于将对象插入网页文档。

● “修改”菜单：更改选定页面元素或项的属性。使用此菜单，可以编辑标签属性、更改表格和表格元素，并且为库选项和模板执行不同的操作。

● “格式”菜单：可以轻松地设置文本的格式和样式。

● “命令”菜单：提供对各种命令的访问。

● “站点”菜单：提供用于管理站点以及上传和下载文件的菜单项。

● “窗口”菜单：提供对 Dreamweaver 中的所有面板、检查器和窗口的访问。

● “帮助”菜单：提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。

（2）插入面板

Dreamweaver的插入面板包含用于创建和插入对象的按钮。这些按钮也可以通过菜单中的命令来实现。插入面板包含了经常用到的网页元素，如图片、超链接、邮件、表格、媒体等，如图1-18所示。

还可以单击插入面板上的不同类别进行切换，包括布局类别、表单类别、数据类别、Spry类别、InContext Editing类别、文本类别、收藏夹类别等，常用类别具体描述如下。

● 常用类别：用于创建和插入最常用的对象，例如图像和表格。

● 布局类别：用于插入表格、表格元素、div标签、框架和Spry Widget。还可以选择表格的两种视图：标准（默认）表格和扩展表格。

● 表单类别：包含一些按钮，用于创建表单和插入表单元素（包括Spry验证Widget）。

● 数据类别：可以插入Spry数据对象和其他动态元素，例如记录集、重复区域以及插入记录表单和更新记录表单。

● Spry类别：包含一些用于构建Spry页面的按钮，包括Spry数据对象和Widget。

● InContext Editing类别：包含生成InContext编辑页面的按钮，包括用于可编辑区域、重复区域和管理CSS类的按钮。

● 文本类别：用于插入各种文本格式和列表格式的标签，如b、em、p、h1和ul。

● 收藏夹类别：用于将“插入”面板中最常用的按钮分组和组织到某一公共位置。

● 服务器代码类别：仅适用于使用特定服务器语言的页面，这些服务器语言包括ASP、CFML Basic、CFML Flow、CFML Advanced和PHP。这些类别中的每一个都提供了服务器代码对象，使用者可以将这些对象插入“代码”视图中。

（3）文档工具栏

Dreamweaver的文档工具栏包含的按钮，可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-19所示。

要显示或隐藏文档工具栏，可以通过【查看】/【工具栏】/【文档】命令进行。文档工具栏中的常用按钮描述如下。

● 显示代码视图：只在“文档”窗口中显示“代码”视图。

● 显示代码和设计视图：将“文档”窗口拆分为“代码”视图和“设计”视图。如果选择这种组合视图，则“查看”菜单中的“顶部的设计视图”命令选项变为可用。

● 显示设计视图：仅在“文档”窗口中显示“设计”视图。

● 实时代码视图：在代码视图中显示实时视图源。单击“实时代码”按钮时，也会同时单击“实时视图”按钮。

● 检查浏览器兼容性：用于检查CSS是否对于各种浏览器均兼容。

● 实时视图：显示不可编辑的、交互式的、基于浏览器的文档视图。

● 打开实时视图和检查模式：单击“检查”按钮，可以打开视图和检查模式。方便检查网页的内容。

● 在浏览器中预览/调试：允许在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。

● 可视化助理：可以使用各种可视化助理来设计页面。

● 刷新设计视图：在“代码”视图中对文档进行更改后刷新该文档的“设计”视图。在执行某些操作（如保存文件或者单击此按钮）之后，在“代码”视图中所做的更改才会自动显示在“设计”视图中。

● 文档标题：允许为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该文本框中。

● 文件管理：显示“文件管理”弹出菜单。包含一些在本地和远程站点间传输文档有关的常用命令和选项。

（4）文档窗口

Dreamweaver的文档窗口是最主要的工作区，它将显示所有打开的网页文档。单击文档工具栏的“代码”“拆分”“设计”3个按钮，可以在文档窗口内显示不同视图下的显示状态，如图1-20所示，按下“拆分”视图时，文档窗口的显示左侧为代码区，右侧为视图区，在实际应用过程中，可以根据开发者的使用习惯和实际情况进行视图切换，从而达到便于设计的目的。

（5）属性面板

Dreamweaver的属性面板可以检查和编辑当前页面选定元素的最常用属性，如文本和插入的对象。属性面板的内容根据选定元素的不同会有所不同。如果选择了页面上的图片，则属性面板会显示为该图片的相关属性，如源文件路径、宽、高等属性。此时可以通过修改属性面板的显示值，最终达到修改图片属性的目的，如图1-21所示。

3．设置测试浏览器

网页在制作完成后，需要在不同的用户浏览器上显示。由于网页的兼容性问题，在网页设计和开发的测试阶段要完成主流浏览器的测试，以满足绝大多数用户的需求。因此，Dreamweaver的开发环境中，至少要安装IE浏览器、火狐浏览器和谷歌浏览器3个主流浏览器。下面以安装火狐浏览器为例进行设置测试浏览器的讲解。

（1）下载安装浏览器

从百度软件中心下载火狐浏览器，用户也可以从其他资源处下载，如图1-22所示。

下载完成后，双击下载的可执行文件，安装火狐浏览器。

（2）添加测试浏览器

启动Dreamweaver，在“文档工具栏”中选择“在浏览器中浏览/调试”下拉列表中的“编辑浏览器列表”，如图1-23所示。单击“+”，添加新的测试浏览器。一般将火狐浏览器设置为主浏览器，IE浏览器和谷歌浏览器则设置为次浏览器。

4．创建一个测试页面

Dreamweaver环境了解和设置完成后，下面将通过一个欢迎页面熟悉Dreamweaver的工作环境。

（1）新建HTML页面

选择【文件】/【新建】命令，新建一个HMTL页面，选择【文件】/【保存】命令，保存为“index.html”，对文件进行保存。

（2）添加网页素材

在设计视图下，选择【插入】/【图像】命令，选择要插入的图片，如图1-24所示，单击“确定”按钮即可。

（3）测试查看网页效果

在“文档工具栏”中选择“在浏览器中浏览/调试”下拉列表中的“预览在IExplore”，或者单击键盘上的F12，查看页面在浏览器中的显示效果。

1.3 任务实施

1.3.1 赏析各种类型网站

网站可以分成多种类型，分类方法也有多种。根据网站的用途分类，有门户网站（综合网站）、行业网站、娱乐网站等；根据网站的持有者分类，有个人网站、商业网站、政府网站等；根据网站的商业目的分类，有营利型网站和非营利型网站。

鉴赏一个网站，我们一般从以下两个方面着手，一是网站的主题。所谓网站的主题是指网站向大众或特定的人群传达的主要内容或建立网站的意图。第二就是网站的首页。所谓网站的首页，是指打开一个网站后看到的第一页。

1．赏析综合性门户网站（http://www.sina.com.cn/）

综合性门户网站资源比较丰富，内容比较综合。其中，新浪网作为中国互联网门户网站的领航者，是中国网民上网冲浪的常用门户网站。新浪网站首页如图1-25所示。

新浪网站首页的布局是典型的“国”字型布局，整体设置大方得体，具有门户风范。

网站首页风格是典型的实用主义风格，从页面的分割上可以很明确地感到这一点。除了左侧的要目提示和顶端的导航条使用了新浪的标志性黄色以外，其他的版块均未使用抢眼的色彩，整体风格明朗化，给人实在的感觉。

2．赏析电子商务型网站（https://www.taobao.com/）

随着国内Internet使用人数的增加，利用Internet进行网络购物的消费方式已逐渐流行，市场份额也在迅速增长，电子商务网站也随之层出不穷，其中，淘宝网的发展成为成功的典范。

淘宝电子商务网站首页如图1-26所示。

淘宝网页面布局：从页面布局来分析，页面顶部是主导航栏，左右两侧是二级导航条、登录区、搜索区等，中间是主内容区，底部是友情链接及版权信息。

淘宝网站风格：整体风格给人充满活力又不失稳重、严谨、可靠。色彩运用以橙色为主色调，是令人振奋的色彩，很容易感染浏览者的情绪，提升浏览者的购买欲望。

3．赏析校园系部信息网站（http://jsjx.hbcit.edu.cn/）

校园网是各种类型网络中一大分支，它有着非常广泛的应用。门户网站在各个领域的影响作用日益增强，每个学校、每个系部都应该有自己精彩的门户网站。随着时代的进步，信息的社会化，学校作为教育的前沿地带，校园系部信息网站的建设有着重要的意义。某学院计算机系网站首页效果图，如图1-27所示。该系部网站首页的整体布局为“上、中、下”3个大板块，中间主体版块又分为“左、右”两个版块。

该网站风格定位以蓝色为主色调，通过调整单一色彩的饱和度和透明度使得主体蓝色产生变化，在蓝色中搭配白色，增加了网站视觉的层次感，给人以清新、爽朗的感觉。

学习网站建设，从一开始就要学会登录不同类型网站，欣赏优秀网页设计，为学习制作网站奠定基础。

1.3.2 讨论Web技术发展

1．Web技术

Web技术指在网络上应用各种技术实现和完成的各种服务功能和客户浏览的开发技术。Web技术提供一个可以突破时空局限，交流各种信息的互动平台，使得用户无论身在何处，都能够通过网络充分共享全社会的智慧。

2．Web技术的发展

（1）Web 1.0

Web 1.0——信息共享：Web 1.0是以编辑为特征，大量使用静态的HTML网页来发布信息，并开始使用浏览器来获取信息，此时主要是单向的信息传递。通过Web，互联网上的资源，可以在一个网页里被比较直观地表示出来；而且在网页上，资源之间可以任意链接。Web1.0只解决了人对信息搜索、聚合的需求，而没有解决人与人之间沟通、互动和参与的需求。

（2）Web 2.0

Web 2.0——信息共建：Web1.0的主要特点在于用户通过浏览器获取信息，用户是网络信息的使用者；而Web 2.0更注重用户的交互性，用户不仅是网站使用者和信息接受者，更重要的是能参与其中，成为信息内容的制造者。在Web 2.0时代，用户不再是单纯的信息消费，而是开始拥有了信息生产者的权利。用户在网络空间的信息传播行为，展现自我信息和观点的同时，也无形中影响了社会信息传播和舆论导向。

（3）Web 3.0

Web 3.0——知识传承：Web 3.0是Web 2.0的进一步发展和延伸，它把散布在Internet上的各种信息点以及用户的需求点聚合和对接起来，通过在网页上添加元数据，使机器能够理解网页内容，从而提供基于语义的检索与匹配，使用户的检索更加个性化、精准化和智能化。

（4）Web 4.0

Web 4.0——知识分配：从Web 3.0开始，网络就具备了即时特性，即人类可以随心所欲地获取各种知识，当然这些知识都是其他人即时贡献出来的。但人们并不知道自己应该获取怎样的知识，即自己适合于学习哪些知识。比如一个10岁的孩子想在20岁的时候成为一名生物学家，那么他应该怎样学习知识呢？这些问题就是Web 4.0的核心——知识分配系统所要解决的问题。

（5）Web 5.0

Web 5.0——语用网：技术的发展虽然令人眼花缭乱，但其背后的本质却十分简单。现有的计算机技术都是图灵机模型，简单地讲，图灵机就是机械化、程序化，或者说算术，以数据和算符（算子）为二元的闭合理论体系。图灵机是研究和定义在数据集上的算子规律或法则的数学科学。在网络世界里，这个封闭系统都要联合起来，成为一个整体，即所谓的整个网络成为一台计算机系统。而这台计算机就不再是图灵机，而是Petri网了。Petri曾经说过，实现Petri网的计算机系统技术叫语用学。因此语用网才是这台计算机的技术基础。

（6）Web 6.0

Web 6.0——物联网。它本质上不是单纯的互联网技术或衍生思想，而是物联网与互联网的初步结合，它是一种全新的模式，其目的惠及广大网民。这里不要将物联网看成是互联网的附庸，它是与互联网等价的物理媒介，即将改变世界的新的物理模式。在Web 6.0里，每个人都有调动自己感官的无限权力，用自己的五官去重新发现世界，从而改变世界。

1.4 任务拓展

1.4.1 网页创意设计思维

一个网站如果想在浏览者中确立自己的形象，就必须具有突出的个性，必须依靠网站自身独特的创意，因此创意是网站存在的关键。好的创意能够巧妙、恰如其分地表现主题、渲染气氛、增加网页的感染力，让人过目不忘。

1．创意思维的原则

（1）审美原则

好的创意必须具有审美性。一种创意如果不能给浏览者以好的审美感受，就不会产生好的网站效果，因此制作网页时就要求网站承载的内容健康、生动、符合人们审美观念。

（2）目标原则

创意本身必须与创意目标相吻合，创意必须能够表现主题，因为网站设计的目的就是为了更好的体现网站的内容。

（3）系列原则

在网站中具有同一设计要素或同一风格、同一色彩等的基础上进行连续的发展变化，给人一种连续、统一的形式感，体现了网站的整体运作能力和水平。

（4）简洁原则

网站设计整体要简洁，注意修饰得当，要做到含而不露，以凝练、朴素、自然为美。

2．创意设计方法

在进行创意的过程中，需要设计人员新颖的思维方式。好的创意是在借鉴的基础上，利用已经获取的设计形式，来丰富自己的知识，从而启发创造性的设计思路。

（1）富于联想

联想是艺术形式中最常用的表现手法。在设计过程中通过丰富的联想，扩大艺术形象的容量，加深画面的意境。

（2）巧用对比

对比是一种趋向于对立冲突的艺术表现手法。在网页设计中加入不和谐的元素，把网页作品中的特点元素放在鲜明的对照和直接对比中来表现，通过这种方法更鲜明地强调或提示网页的特征，给浏览者留下深刻的视觉感受。

（3）大胆夸张

夸张是把对象的特点和个性中美的方面进行夸大，赋予人们一种新奇的视觉感受，通过这种表现手法，为网页的艺术美注入了浓郁的感情色彩，使得网页的特征更鲜明，更突出。

（4）以人为本

艺术的感染力最具直接作用的是感情因素，以人为本是使艺术加强传达情感的表现手法，它以美好的感情来烘托主题，这是网页设计中的文学侧重和美的意境与情趣追求。

（5）流行时尚

流行时尚的创意手法是通过鲜明的色彩、单纯的形象以及编排上的节奏感来体现出流行的形式特征。

（6）合理综合

综合是设计中广泛应用的方法，它在分析各个构成要素的基础上加以综合，使综合后的界面整体形式表现出创造性的新成果，追求和谐的美感。

1.4.2 网页设计配色基础

无论是平面设计，还是网页设计，色彩永远是最重要的一环。色彩在网页设计中占有极其重要的地位，好的配色方案可以使人加深对网站的记忆。

1．网页颜色搭配原则

在选择网页色彩时，除了考虑网站本身的特点外还要遵循一定的艺术规律，从而设计出精美的网页。

（1）色彩的鲜明性

如果一个网站的色彩鲜明，就会很容易引人注意，它会给浏览者耳目一新的感觉。

（2）色彩的艺术性

网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新。

（3）色彩搭配的合理性

色彩要根据主题来确定，不同的主题选用不同的色彩。

（4）色彩的独特性

要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给浏览者留下深刻的印象。

2．色彩搭配技巧

网页配色很重要，网页颜色搭配得是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁不安。

（1）同种色彩搭配

同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，从而产生新的色彩，这样的页面看起来色彩统一，具有层次感。

（2）邻近色彩搭配

邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色。采用邻近色搭配可以使网页避免色彩杂乱，易于达到页面和谐统一的效果。

（3）对比色彩搭配

色彩的强烈对比具有视觉诱惑力，从而产生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用。

（4）有主色的混合色彩搭配

有主色的混合色彩搭配是指以一种颜色作为主要颜色，同色辅以其他色彩混合搭配，形成缤纷而不杂乱的搭配效果。

1.5 项目小结

本章以“鉴赏优秀网站”为任务驱动，了解了网站的布局结构、色彩搭配，以及网页的相关概念、网页制作的基本流程，为网页的进一步设计制作奠定了基础。

1.6 项目练习

一、填空题

（1）网页是网站中的“一页”，静态网页通常是_______ 格式。

（2）主页是指__________ 页面。

（3）网页构成的基本元素有_______ 、 _______、______、_______ 、_______。

（4）常见网页布局类型有_______ 、______ 、______ 、________ 、______。

二、分析题

打开搜狐网、阿里巴巴网站分析网站布局及色彩搭配。

独立实践任务

【任务描述】

赏析各类典型网站。

【任务背景】

在学习创建网站、制作网页之前，我们一定要多欣赏优秀的网站，了解优秀网站的主题定位、布局结构、色彩搭配、用户体验效果等，学习他人之长，激发学习网页设计的兴趣，为学习网页设计奠定基础。

【任务要求】

（1）欣赏各大知名学院门户网站。

（2）欣赏各大名校系部网站。

（3）分析网站布局及风格定位。

（4）欣赏并分析门户类网站、电商类网站、手机移动端网站。

【任务分析】

______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________