从新手到高手：网页设计与网站建设（附DVD-ROM光盘1张）

网页设计基础
随着国内互联网开发理论的发展，越来越多的网站开始更加注重网页的界面设计，通过优化和美化的界面取得竞争的主动权，吸引更多的用户。网页界面设计的作用在于，为网页提供一个美观且易于与用户交互的图形化接口，帮助用户更方便地浏览网页内容，使用网页的各种功能。同时，优秀的界面设计可以为用户提供一种美的视觉享受。
本章主要介绍在设计网页之前的一些基础知识，以及设计网页需要进行的各种准备工作。包括网站内容的策划、网站板块的设计、网页配色的理论，以及设计网页所使用的一些基本技术和软件。

1.1
网页界面构成

网页是由浏览器打开的文档，因此可以将其看作是浏览器的一个组成部分。网页的界面只包含内置元素，而不包含窗体元素。以内容来划分，一般的网页界面包括Logo、导航条、Banner、内容板块、版尾和版权等。
1．Logo
网站Logo是整个网站对外唯一的标识和标志，是网站商标和品牌的图形表现。Logo的内容通常包括特定的图形和文本，其中图形往往与网站的具体内容或开发网站的企业文化紧密结合，以体现网站的特色；文本主要起到加深用户印象的作用，用户可以通过这些文本介绍网站的名称、服务，也可以体现网站的价值观、宣传口号。
一些简单的Logo也可以只包含文本，通过对文本进行各种变化来体现网站的特色。
在图像中，包含了20个大型知名企业的商标，这些商标往往也与其官方网站的Logo一致。

2．导航条
导航条是索引网站内容，帮助用户快速访问网站功能的辅助工具。根据网站内容，一个网页可以设置多个导航条，还可以设置多级的导航条以显示更多的导航内容。
3．Banner
Banner的中文直译为旗帜、网幅或横幅，意译则为网页中的广告。多数Banner都以JavaScript技术或Flash技术制作，通过一些动画效果，展示更多的内容，并吸引用户观看。

4．内容版块
内容栏是网页内容的主体。通常可以由一个或多个子栏组成，包含网页提供的所有信息和服务项目。
内容栏的内容既可以是图像，也可以是文本，或图像和文本结合的各种内容。
在设计内容栏时，用户可以先独立地设计多个子栏，然后再将这些子栏拼接在一起，形成整体的效果。同时，还可以对子栏进行优化排列，提高用户的体验。如网页的内容较少，则可以使用单独的内容栏，通过大量的图像使网页更加美观。

5．版尾版块
版尾是整个网页的收尾部分。在这部分内容中，可以声明网页的版权、法律依据以及为用户提供的各种提示信息等。
除此之外，在版尾部分还可以提供独立的导航条，以为将页面滚动到底部的用户提供一个导航的替代方式等。
版权的书写应该符合网站所在国家的法律规范，同时遵循一般的习惯。正确的版权书写格式如下所示。

Copyright (?) [Dates] (by) [Author/Owner] (All rights reserved.)

在上面的文本中，小括号“()”中的内容是可省略的内容，中括号“[]”中的内容是根据用户具体信息而可更改的内容。

“All rights reserved.”文本中，最后的英文句号是不可省略的。只要使用“All rights reserved.”，就必须在其后添加英文句号。

版权符号“?”有时可以替代“Copyright”的文本，但是用户不能以带有括号的大写字母C替代版权符号“?”。

在一些国家的法律中，“All rights reserved.”是不可省略的。但在我国法律中并没有对此进行严格规范，因此在实际操作中可以省略。

1.2
网页版块结构

在网页的界面设计工作中，界面元素的设计固然重要，但这些界面元素在网页中分布的位置同样也直接影响到用户的体验。网页的版块布局主要包括5种，即“国”字框架、拐角框架、左右框架、上下框架和封面框架等5种。
1．“国”字框架
“国”字框架网页布局又称“同”字型框架网页布局，其最上方为网站的Logo、Banner或导航条和内容版块。
在内容版块左右两侧通常会分列两小条内容，可以是广告、友情链接等，也可以是网站的子导航条。最下面则是网站的版尾或版权版块。

2．拐角框架
拐角框架型布局也是一种常见的网页结构布局。其与“国”字框架型布局只是在形式上有所区别，实际差异不大。其区别在于其内容版块只有一侧有侧栏，也就是导航条和侧栏组成一个90°的直角。

在拐角框架型布局的网页中，侧栏同样可以放置立式的Banner广告（例如“摩天大楼”型），也可以放置辅助的侧导航栏，为用户访问网页提供帮助。
拐角框架型布局的网页比“国”字型布局的网页更加个性化一些，也更具备实用性。在具体的网页设计中，拐角框架布局通常与大幅的网页留白相结合。一些娱乐型网页比较喜欢使用拐角型框架布局。
3．左右框架
左右框架型网页是一种被垂直划分为两个或多个框架的网页布局结构，其样式仿照了传统的杂志风格，可以在各框架中插入文本、图像与动画等媒体。左右框架型网页布局通常会被应用到一些个性化的网页或大型论坛网页等，具有结构清晰、一目了然的优点。

4．上下框架
上下框架型网页与左右框架类似，是一种被水平划分为两个或多个框架的网页布局结构。在上下框架布局网页中，主题部分并非如“国”字框架型或拐角框架型一样由主栏和侧栏组成，而是一个整体或复杂的组合结构。

5．封面框架
这种类型的网页，通常作为一些个性化网站的首页，以精美的动画，加上几个链接或“进入”按钮，甚至只在图片或动画上做超链接。

1.3
网站整体策划

网站的整体策划是一个系统工程，是在建设网站之前进行的必要工作。
1．市场调查
市场调查提供了网站策划的依据。在市场分析过程中，需要先进行3个方面的调查，即用户需求调查、竞争对手情况调查以及企业自身情况的调查。
2．市场分析
市场分析是将市场调查的结果转换为数据，并根据数据对网站的功能进行定位的过程。
3．制订网站技术方案
在建设网站时，会有多种技术供用户选择，包括服务器的相关技术（NT Server/Linux）、数据库技术（Access/My SQL/SQL Server）、前台技术（XHTML+ CSS/Flash/AIR）以及后台技术（ASP/ASP.NET/ PHP/JSP）等。

4．规划网站内容
在制订网站技术方案之后，即可整理收集的网站资源，并对资源进行分类整理，划分栏目等。
网站的栏目划分，标准应尽量符合大多数人理解的习惯。例如，一个典型的企业网站栏目，通常包括企业的简介、新闻、产品，用户的反馈，以及联系方式等。产品栏目还可以再划分子栏目。

5．前台设计
前台设计包括所有面向用户的平面设计工作，例如，网站的整体布局设计、风格设计、色彩搭配以及UI设计等。
6．后台开发
后台开发包括设计数据库和数据表，以及规划后台程序所需要的功能范围等。
7．网站测试
在发布网站之前需要对网站进行的各种严密测试，包括前台页面的有效性、后台程序的稳定性、数据库的可靠性以及整体网站各链接的有效性等。
8．网站发布
在制订网站的测试计划后，即可制订网站发布的计划，包括选择域名、网站数据存储的方式等。
9．网站推广
除了网站的规划和制作外，推广网站也是一项重要的工作，例如，登记各种搜索引擎、发布各种广告、公关活动等。
10．网站维护
维护是一项长期的工作，包括对服务器的软件、硬件维护、数据库的维护、网站内容的更新等。多数网站还会定期的改版，保持用户的新鲜感。

1.4
网页色彩基础

网页设计是平面设计的一个分支，和其他平面设计类似，对色彩都有较大的依赖性。色彩可以决定网站的整体风格，也可以决定网站所表现的情绪。
1．RGB色彩体系
人类的眼睛是根据所看见的光的波长来识别颜色的。肉眼可识别的白色太阳光，事实上是由多种波长的光复合而成的全色光。
根据全色光各复合部分的波长（长波，中波和短波），可以将全色光解析为3种基本颜色，即红（Red）、绿（Green）和蓝（Blue）三原色光。
可见光中，绝大多数的颜色可以由三原色光按不同的比例混合而成。例如，当3种颜色以相同的比例混合，则形成白色。而当3种颜色强度均为0时，则形成黑色。
计算机的显示器系统就是利用三原色的原理，采用加法混色法，以描述三原色在各种可见光颜色中占据的比例来分析和描述色彩，从而确立了RGB色彩体系。

2．色彩的属性
任何一种色彩都会具备色相、饱和度和明度3种基本属性。这3种基本属性又被称作色彩的三要素。修改这3种属性中任意一种，都会影响原色彩其他要素的变化。
* 色相
色相是由色彩的波长产生的属性，根据波长的长短，可以将可见光划分为6种基本色相，即红、橙、黄、绿、蓝和紫。根据这6种色相可以绘制一个色相环，表示6种颜色的变化规律。

在Photoshop等图像处理软件中，通常用一种渐变色条来表示色彩的色相。

* 饱和度
饱和度是指色彩的鲜艳程度，又称彩度、纯度。色彩的饱和度越高，则色相越明确，反之则越弱。饱和度取决于可见光波波长的单纯程度。

在色彩中，六色色相环中的6种基础色饱和度最高，黑、白、灰没有饱和度。
* 明度
明度是指色彩的明暗程度，也称光度、深浅度。色彩的明度来自于光波中振幅的大小。色彩的明度越高，则颜色越明亮，反之则越阴暗。

在无彩色系中，明度最高的是白色，而最低的是黑色。在有彩色系中，明度最高的是黄色，最低的是紫色。
3．色彩模式
自然界中的颜色种类繁多，单纯以颜色的名称来表示颜色是无法适应平面设计及工业生产需要的。因此，人们引入了色彩模式的概念。
色彩模式是表示色彩的方法。在不同的应用领域里，表示色彩的方式也有很大区别。在平面设计领域，常用的色彩模式主要分为两种，即RGB色彩模式和CMYK色彩模式。
* RGB色彩模式
RGB色彩模式主要是应用于输出CRT显示器的一种色彩模式，其采用加法混色法，以描述各种可见光在颜色中占据的比例来分析色彩。RGB色彩的基准是光学三原色（红、绿和蓝）。

* CMYK色彩模式
CMYK色彩模式是主要应用于印刷品的一种色彩模式。其原理是根据印刷时使用的四色油墨混合的比例实现各种色彩，因此属于减法混色法。

4．Web216安全色
在早期各种浏览器中，图像的颜色显示方式并不统一，同样一种颜色在不同的网页浏览器中可能会显示不同的颜色。
为了保证网页基本的色彩显示，人们规定了216种颜色的显示方法，这216种颜色以同样的效果在任意的浏览器中，不会造成色彩的错乱，被称作“安全的”颜色，即Web216安全色。

……

前 言
网站作为面向世界的窗口，其设计和制作包含多种技术，例如平面设计技术、动画制作技术、CSS技术、XHTML技术和JavaScript技术等。本书以Dreamweaver CS5、Photoshop CS5和Flash CS5等为基本工具，详细介绍如何通过Photoshop设计网站的界面和图形，通过Flash制作网站的动画，以及通过Dreamweaver编写网页代码。除此之外，本书还介绍Web标准化规范的相关知识，包括XHTML标记语言、CSS样式表等。
本书是一本典型的案例实例教程，由多位经验丰富的网页设计人员编写而成。本书立足于网络行业，详细介绍娱乐网站、门户网站和企业网站等类型的网站，以及各种网站栏目的设计方法。
本书主要内容
全书共分为20章，通过大量的实例全面介绍了网页设计与制作过程中使用的各种专业技术，以及用户可能遇到的各种问题。各章的主要内容简介如下。
第1章介绍网页设计的一些基础知识和理论知识，简要阐述网页设计的理念。第2章介绍使用Photoshop设计网页中的各种栏目和板块，以及制作切片网页的技术。第3章介绍使用Photoshop的蒙版、滤镜、切片等进阶技术，处理网页中各种图像的方法。
第4章介绍使用Flash设计各种网页元素的技巧和方法，以及Flash的绘制等基础知识。第5章介绍Flash补间动画、引导动画、遮罩动画、逐帧动画、补间形状动画、传统补间动画和Flash滤镜在网页中的应用。第6章着重介绍网页中的各种文本元素，以及设计网页文本元素的技巧和方法，包括段落、列表等对象。
第7章着重介绍网页中的各种图像元素，例如图像、背景图像、光标经过图像、图像导航条、FireworksHTML以及Photoshop智能对象等图像类型在网页中的应用。第8章通过着重介绍超链接元素的类型，以及插入文本链接、图像链接、邮件链接和锚记链接的方法，帮助用户了解网页的链接元素。第9章详细介绍网页中的多媒体元素，包括Flash动画、FLV视频、FlashPaper文档、Shockwave视频、JavaApplet程序、ActiveX控件以及其他各种插件。
第10章介绍使用表格的传统网页布局方式，以及编辑表格的方法。除此之外，还介绍Spry框架的使用。第11章主要讲解了XHTML语言的概述、基本语法、元素分类，以及常用的一些XHTML元素等。第12章主要讲解了CSS技术的概述，以及基本语法、选择器、样式表、规则等。同时介绍了CSS样式的分类以及为网页添加CSS的方法。第13章介绍了CSS的盒模型概念，同时介绍了流动定位、绝对定位、浮动定位3种Web 2.0时代的布局方式。
第14章介绍网页行为的基础知识，以及交换图像、弹出信息、打开浏览器窗口、拖动AP元素、改变属性、显示-隐藏元素等一系列样式，帮助用户实现各种网页的交互。第15章介绍表单、文本字段、按钮、列表/菜单、单选按钮、复选框等表单内容，以及使用Spry验证各种表单内容的方法。第16章介绍框架、框架集等网页元素的使用方法和属性设置。
第17章～20章则使用Web标准化的方式，设计和制作了4个完整的综合实例，帮助用户了解网站前台技术的魅力。
本书特色
本书是一本专门介绍网页设计与制作基础知识的教程，在编写过程中精心设计了丰富的体例，以帮助读者顺利学习本书的内容。
· 系数统全面，超值实用 本书针对各个章节不同的知识内容，提供了多个不同内容的实例，除了详细介绍实例应用知识之外，还在侧栏中同步介绍相关知识要点。每章穿插大量的提示、注意和技巧，构筑了面向实际的知识体系。另外，本书采用了紧凑的体例和版式，相同内容下，篇幅缩减了30%以上，实例数量增加了50%。
· 串珠逻辑，收放自如 统一采用了二级标题灵活安排全书内容，摆脱了普通培训教程按部就班讲解的窠臼。同时，每章最后都对本章重点、难点知识进行分析总结，从而达到内容安排收放自如，方便读者学习本书内容的目的。
· 全程图解，快速上手 各章内容分为基础知识、实例演示和高手答疑3个部分，全部采用图解方式，图像均做了大量的裁切、拼合、加工，信息丰富、效果精美，使读者翻开图书的第一感觉就获得强烈的视觉冲击。
· 书盘结合，相得益彰 多媒体光盘中提供了本书实例完整的素材文件和全程配音教学视频文件，便于读者自学和跟踪联系本书内容。
本书读者对象
本书内容详尽、讲解清晰，全书包含众多知识点，采用与实际范例相结合的方式进行讲解，并配以清晰、简洁的图文排版方式，使学习过程变得更加轻松和易于上手。
本书适合作为高等院校和高职高专院校学生学习使用，也可以作为网页设计与制作初学者，网站开发人员，大中专院校相关专业师生，网页制作培训班学员等的参考资料。
参与本书编写的除了封面署名人员之外，还有王海峰、王晓波、常征、马玉仲、席宏伟、祁凯、徐恺、王泽波、王磊、张仕禹、夏小军、赵振江、李振山、李文才、李海庆、王树兴、何永国、李海峰、王蕾、王曙光、牛小平、贾栓稳、王立新、苏静、赵元庆、郭磊、何方、徐铭、李大庆等。由于时间仓促，作者水平有限，疏漏之处在所难免，敬请读者朋友给予批评指正。