本书以实用为原则，每章围绕知识点储备、实例演示、任务训练、知识拓展、单元测试五部分展开，本书内容涵盖网页设计概述、网页基本元素、常用网页布局、Div+CSS、表单、行为特效、模板和库、HTML5等。
　　本书可作为计算机相关专业网页设计与制作的教材，也可供网页设计爱好者学习参考，尤其适合网页设计初学者使用。

本书以实用为原则，融"教、学、做"于一体。实例以Dreamweaver CS6为载体，使读者循序渐进地充分理解并掌握HTML、CSS、JavaScript等的功能与HTML5的前景，为后续课程奠定良好的基础，并激发学生学习的积极性和主动性。
　　全书结构新颖，每章围绕知识点储备、实例演示、任务训练、知识拓展、单元测试五部分展开。在教学内容的组织、知识点的由简单到复杂、由易到难、"设计"视图与"代码"视图相结合，使学生循序渐进地、合理地组织学习知识、训练技能、拓展知识，有兴趣、由表及里地学习。

前言
　　本书以实用为原则，融“教、学、做”于一体。实例以DreamweaverCS6为载体，使读者循序渐进地充分理解并掌握HTML、CSS、JavaScript等的功能与HTML5的前景，为后续课程奠定良好的基础，并激发学生学习的积极性和主动性。
　　全书结构新颖，每章围绕知识点储备、实例演示、任务训练、知识拓展、单元测试五部分展开。在教学内容的组织、知识点的由简单到复杂、由易到难、“设计”视图与“代码”视图相结合，使学生循序渐进地、合理地组织学习知识、训练技能、拓展知识，有兴趣、由表及里地学习。
　　本书由重庆航天职业技术学院陈艳平、徐受蓉担任主编，赵叶青、董明、舒蕾、李怡平担任副主编。具体编写分工如下：第1章、5章、8章由陈艳平编写，第2章由李怡平编写，第3章由徐受蓉编写，第4章由赵叶青编写，第6章由董明编写，第7章由舒蕾编写。
　　本书在编写过程中，参阅了大量的相关教材和专业书籍，在此一并向各位专家及各位参考书籍的编者表示感谢！相关的教学素材可联系编者邮件发送或在清华大学出版社网站下载。
　　鉴于编者水平有限，书中难免有不足之处，欢迎各位专家和广大读者不吝赐教并批评指正。
　　编者

第1章 网页设计概述 1
1.1 网页与网站 1
1.1.1 网页 1
1.1.2 网站 2
1.1.3 网站的工作原理 2
1.1.4 网页基本构成元素 3
1.2 网页制作基础知识 4
1.2.1 网页的基础知识 4
1.2.2 网页制作工具 5
1.2.3 网页设计与制作的分类 6
1.3 网页设计的基本流程 6
1.4 创建本地站点 7
1.4.1 Dreamweaver CS6简介 7
1.4.2 建立本地站点 9
1.4.3 管理本地站点 12
1.4.4 网页文件的基本操作 13
1.4.5 设置首选参数 15
1.4.6 使用辅助工具 18
1.5 超文本标记语言HTML 20
1.5.1 HTML概述 20
1.5.2 常用HTML标记 21
1.6 实例演示 22
1.6.1 实例情景--创建本地教学
站点 22
1.6.2 实例效果 22
1.6.3 实现方案 22
1.7 任务训练 23
1.7.1 训练目的 23
1.7.2 训练内容 23
1.8 知识拓展 24
单元测试 24
第2章 认识网页基本元素 26
2.1 文本 26
2.1.1 添加文本 26
2.1.2 设置文本属性 28
2.1.3 插入特殊文本 32
2.1.4 文本超链接 34
2.2 图像 37
2.2.1 图像格式 38
2.2.2 插入图像 39
2.2.3 设置图像属性 39
2.2.4 其他图像元素 40
2.2.5 图文混排 42
2.2.6 图像超链接 43
2.3 多媒体 45
2.3.1 网页中的动画 45
2.3.2 音乐播放功能 47
2.3.3 视频播放功能 49
2.4 实例演示 50
2.4.1 实例情景--制作风景区
网页 50
2.4.2 实例效果 50
2.4.3 实现方案 51
2.5 任务训练 52
2.5.1 训练目的 52
2.5.2 训练内容 52
2.6 知识拓展 53
单元测试 53
第3章 认识常用网页布局 55
3.1 表格 55
3.1.1 插入表格及嵌套表格 56
3.1.2 设置表格和单元格属性 59
3.1.3 选择单元格、行或列及表格 60
3.1.4 表格的基本操作 61
3.1.5 表格布局实例 62
3.2 层AP Div 64
3.2.1 创建AP Div 64
3.2.2 AP Div的属性 66
3.2.3 "AP元素"面板 67
3.2.4 AP Div的重叠与嵌套 68
3.2.5 AP Div的基本操作 70
3.2.6 AP Div布局实例 71
3.3 实例演示 73
3.3.1 实例情景--制作在线作业
系统主页 73
3.3.2 实例效果 73
3.3.3 实现方案 74
3.4 任务训练 76
3.4.1 训练目的 76
3.4.2 训练内容 76
3.5 知识拓展 78
单元测试 78
第4章 认识Div+CSS布局 79
4.1 Div概述 79
4.1.1 什么是Div 79
4.1.2 网页中插入Div 81
4.1.3 Div的嵌套 83
4.2 CSS概述 84
4.2.1 什么是CSS 85
4.2.2 创建CSS样式 85
4.2.3 CSS样式在网页中的应用 94
4.3 盒子模型 97
4.3.1 盒子模型概述 97
4.3.2 margin、padding与border 98
4.3.3 块级元素与内联元素 103
4.3.4 Div的浮动与定位 105
4.4 常用布局方式 111
4.4.1 居中布局 111
4.4.2 固定宽度布局 113
4.4.3 可变宽度布局 114
4.5 实例演示 116
4.5.1 实例情景--制作在线作业
系统首页 116
4.5.2 实例效果 116
4.5.3 实现方案 117
4.6 任务训练 124
4.6.1 训练目的 124
4.6.2 训练内容 124
4.7 知识拓展 125
单元测试 126
第5章 认识表单 127
5.1 创建表单 127
5.1.1 表单概述 127
5.1.2 插入表单 128
5.1.3 表单属性 128
5.2 创建表单对象 129
5.2.1 文本字段 129
5.2.2 隐藏域 131
5.2.3 复选框和复选框组 132
5.2.4 单选按钮和单选按钮组 134
5.2.5 列表/菜单 135
5.2.6 跳转菜单 136
5.2.7 图像域 137
5.2.8 文件域 137
5.2.9 按钮 138
5.2.10 标签 138
5.2.11 字段集 138
5.3 Spry表单验证 139
5.3.1 Spry验证文本域 139
5.3.2 Spry验证文本区域 140
5.3.3 Spry验证复选框 141
5.3.4 Spry验证选择 141
5.3.5 Spry验证密码 142
5.3.6 Spry验证确认 142
5.3.7 Spry验证单选按钮组 143
5.4 使用行为验证表单 144
5.5 实例演示 147
5.5.1 实例情景--制作邮箱注册
单网页 147
5.5.2 实例效果 147
5.5.3 实现方案 147
5.6 任务训练 149
5.6.1 训练目的 149
5.6.2 训练内容 150
5.7 知识拓展 151
单元测试 151
第6章 认识行为特效 152
6.1 认识行为 152
6.1.1 行为基本概念 152
6.1.2 "行为"面板 153
6.1.3 添加行为步骤 154
6.1.4 修改行为 155
6.2 使用内置行为 156
6.2.1 交换图像 156
6.2.2 弹出消息 157
6.2.3 打开浏览器窗口 157
6.2.4 转到URL 159
6.2.5 拖动AP元素 159
6.2.6 设置状态栏文本 160
6.2.7 改变属性 161
6.2.8 显示/渐隐 162
6.2.9 调用JavaScript 163
6.3 实例演示 165
6.3.1 实例情景--用JavaScript
完成行为特效 165
6.3.2 实例效果 165
6.3.3 实现方案 166
6.4 任务训练 168
6.4.1 训练目的 168
6.4.2 训练内容 168
6.5 知识拓展 169
单元测试 169
第7章 认识模板和库 170
7.1 模板 170
7.1.1 创建模板 170
7.1.2 创建可编辑区域 171
7.1.3 管理模板 172
7.2 库 176
7.2.1 创建库文件 177
7.2.2 编辑库项目 178
7.2.3 为页面添加库项目 179
7.3 实例演示 179
7.3.1 实例情景--制作风花雪月
网站 179
7.3.2 实例效果 180
7.3.3 实现方案 180
7.4 任务训练--模板应用 184
7.4.1 训练目的 184
7.4.2 训练内容 184
7.5 知识拓展 185
单元测试 185
第8章 初识HTML5 186
8.1 HTML5概述 186
8.1.1 HTML5简介 186
8.1.2 HTML5的新特性 186
8.1.3 HTML5的优点 187
8.2 HTML5视频 187
8.2.1 HTML5视频简介 187
8.2.2 HTML5视频实例 188
8.2.3 使用 DOM控制 190
8.3 HTML5音频 192
8.3.1 HTML5音频简介 192
8.3.2 HTML5音频实例 193
8.4 初识Canvas 194
8.4.1 Canvas简介 194
8.4.2 绘制图形 195
8.4.3 使用图像 199
8.5 实例演示 201
8.5.1 实例情景--制作七巧板 201
8.5.2 实例效果 201
8.5.3 实现方案 202
8.6 任务训练 204
8.6.1 训练目的 204
8.6.2 训练内容 204
8.7 知识拓展 206
单元测试 206
参考文献 207

第1章 网页设计概述
技能目标：
* 掌握网页与网站的基本概念
* 掌握网页制作基础知识
* 掌握站点的创建与管理
* 掌握超文本标记语言HTML
　　
　　在制作网页之前，应先学会区分网页与网站，了解其工作原理，认识网页的基本构成元素、了解网页制作的基础知识，在Dreamweaver CS6的工作界面中创建站点对网站进行统一管理，熟悉HTML。
1.1 网页与网站
　　随着互联网的飞速发展，网页、网站已成为人们日常生活中不可缺少的部分，利用它们，新闻资讯可及时查看，各种物品足不出户便可购买，亲戚朋友可随时联系。下面先来了解一下网页、网站等基本知识。
1.1.1 网页
　　当在浏览器地址栏中输入网址后，网页就会呈现在人们的眼前，如输入http://www.163.com，就会看到如图1-1所示的网页。
图1-1 网易主页
　　
网页(Web Page)一般由文字、图片、超链接等元素组成，另外，声音、视频、动画等多媒体元素可以为网页增添丰富的色彩和动感。网页是用HTML语言编写的，通过WWW传输，并被Web浏览器翻译成可以显示出来的集合文本、图片、声音和动画等信息元素的页面文件。
　　人们在浏览网站时，首先访问的是网站的首页或主页，然后才能访问其他的网页。首页一般起欢迎的作用，只有进入网站的超链接，通过超链接才能访问网站的主页。大多数作为首页的文件名是index、default加上扩展名。主页是整个网站的导航中心，是网站的链接中心。
1.1.2 网站
　　网站(Website)是把包括网页在内的信息文件通过超链接的形式关联起来而形成的信息文件的集合。开发者通过超链接将网站中多个网页建立联系，形成一个主题鲜明、风格一致的Web站点。
　　网站是一个文件夹，其中的文件不仅有网页，还有网站所需要的其他文件或文件夹。网页是一种页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式。
　　通常情况下，网站都有一个主页，其中包括网站的Logo和导航栏等内容，导航栏包含了指向其他网页的超链接。
1.1.3 网站的工作原理
　　网站发布到Web服务器中，浏览者通过浏览器向Web服务器发出请求，Web服务器则根据请求把浏览者所访问的网页传送到客户端，显示在浏览器中。一个静态网站的工作过程归纳为以下4个步骤，工作原理如图1-2所示。
图1-2 网站的工作原理
　　(1) 用户在浏览器的地址栏输入要访问网站的域名，如http://www.163.com，按Enter键触发这个浏览请求，浏览器根据域名的IP地址向Web网站服务器发出浏览请求。
　　(2) 浏览器将请求发送到Web服务器，Web服务器接受这个请求。
　　(3) 若找到网页，Web服务器从服务器硬盘的指定位置或内存中读取正确的HTML文件，然后将它发送给请求浏览器。
　　(4) 用户的浏览器解析这些HTML代码并将它显示出来。
1.1.4 网页基本构成元素
　　网页由文本、图像、多媒体、超链接等基本元素构成。
1. 文本(Text)
　　一般情况下，文本在网页中占了较大比重，是网页传递信息的主要载体。文本的特点是传递速度快、信息量大、存储空间小。在网页中，可以对文本的字体、大小、颜色、行距等进行设置。用于网页正文的文字，建议不要使用过多的字体，中文文字一般用宋体，字体大小使用9磅或12像素左右。
2. 图像(Image)
　　图像是美化网页必不可少的元素。网页上的图像一般使用JPG格式、GIF格式和PNG格式。网页中的图像主要有用于点缀的小图片、介绍性的照片、代表企业形象或栏目内容的标志性图片(Logo)、用于宣传的广告(Banner)等形式。
　　3. 多媒体(Media)
　　多媒体是网页中最活跃的元素，创意出众、制作精美的动画是吸引浏览者眼球的有效方法之一。网页中可使用的多媒体对象有Flash动画、音频、视频、Java小程序等。但网页多媒体元素不宜太多，否则会使人眼花缭乱，产生视觉疲劳。
　　4. 超链接(Superlink)
　　超链接是指从一个网页指向另一个目的端的链接关系。这个"目的端"通常是一个网页、相同网页上的不同位置、一个下载的文件、一幅图片、一个E-mail地址等。超链接的对象可以是文字、按钮或图片。鼠标指针指向超链接位置时，会变成小手形状。网页中的导航栏是一组超链接，用于引导浏览者查看站点的不同页面或栏目。
　　5. 表格(Table)
　　表格主要用于网页内容的布局，组织整个网页的外观，也可用来分门别类地显示数据信息。当前，网页设计中更多使用Div+CSS技术实现网页布局的控制。
　　6. 表单(Form)
　　表单是用来收集访问者信息的区域。表单由不同功能的表单域组成，最简单的表单包含一个输入区域和一个提交按钮。根据功能与处理方式的不同，通常将表单分为用户反馈表、留言簿、用户注册和搜索等。
　　7. 页面尺寸
　　在设计网页时，要确定网页的尺寸大小。网页尺寸和显示器大小及分辨率有关，由于网页的显示无法突破显示器的显示范围，所以网页的显示范围也受到限制。原则上，页面长度不超过3屏，页面宽度不超过1屏。一般情况下，计算机分辨率为1024px?768px时，建议页面尺寸设计为1000px?600px。但随着宽屏显示器的流行，页面宽度逐渐超过"习惯"参数，为每个显示器定制专属的页面也不太可能，故建议网页两边预留20px左右的空白。
1.2 网页制作基础知识
　　在制作网页前，需要先了解和掌握有关网页的基础知识、网页制作工具和网页设计与制作的分类等。
1.2.1 网页的基础知识
1. Internet
　　Internet，中文正式译名为因特网，又叫作国际互联网，是由使用公用语言互相通信的计算机连接而成的全球网络。一旦连接到它的任何一个节点上，就意味着计算机已经连入Internet网了。Internet的用户目前已经遍及全球，有几十亿人在使用Internet，并且它的用户数还在逐年上升。
2. WWW
　　WWW(World Wide Web)也称为万维网。万维网只是互联网所能提供的服务之一，是依靠互联网运行的一项服务。万维网基于超文本结构体系，由大量的电子文档组成，这些电子文档存储在世界各地的计算机上，通过各种类型的超链接连接在一起，目的是让不同地方的人使用一种简单的方式共享信息资源。
　　从技术上讲，WWW包含3个基本组成部分：URL(统一资源定位器)、HTTP(超文本传输协议)、HTML(超文本标记语言)。
3. URL
　　URL(Uniform Resource Locator，统一资源定位器)是一个指定Internet上资源位置的标准，也就是人们常说的网址，如http://www.163.com。
4. W3C
　　W3C(World Wide Web Consortium，全球万维网联盟)是国际著名的标准化组织，该联盟于1994年10月在麻省理工学院计算机科学实验室成立，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
5. HyperText
　　HyperText(超文本)是一种可以指向其他文件的文字或图片，这种功能称为超链接(HyperLink)。超文本是一种组织信息的方式，它通过超链接将网页中的文字或图片与其他对象相关联，为人们查找信息提供了一种快捷方式。
6. HTTP
　　HTTP(HyperText Transfer Protocol，超文本传输协议)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。
7. HTML
　　HTML(HyperText Markup Language，超文本标记语言)是Internet中编写网页的主要标识语言。网页文件也可以称为HTML文件，其扩展名为.html或.htm。HTML文件是纯文本文件，可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只修改文件后缀即可。
8. XHTML
　　XHTML(eXtensible HyperText Markup Language，可扩展超文本标记语言)是一种基于XML的标记语言，看起来与HTML有些相像，但XHTML是一种增强的、结合部分XML强大功能及大多数HTML简单特性的超文本标记语言，它的可扩展性和灵活性能适应未来网络应用更多的需求。
9. CSS
　　CSS(Cascading Style Sheet，层叠样式表)用于对网页布局、字体、颜色、背景和其他图文效果实现精确的控制。CSS可以一次性控制多个文档中的文本，并且可随时改动CSS的内容，以自动更新文本的样式。
10. JavaScript
　　JavaScript是一种脚本语言，可以和HTML语言混合在一起使用，用来实现在一个Web页面中与用户的交互作用。
11. Browser与Server
　　Browser即浏览器，Server即服务器，连在一起即为常见的B/S。用户通过浏览器链接到Web服务器上，才能阅读Web服务器上的文件。信息的提供者建立好Web服务器，用户使用浏览器可以取得服务器中的文件及其他信息。
1.2.2 网页制作工具
　　在网页设计制作中，经常会涉及图像处理、动画制作、网站发布等问题。目前，此类相关专业软件功能越来越完善、操作越来越简单，应用也非常广泛。
　　制作网页的常用工具有以下几种。
* 制作网页的专门工具：Dreamweaver和FrontPage。
* 图像处理工具：Photoshop和Fireworks。
* 动画制作工具：Flash和Swish。
* 图标制作工具：小榕图标编辑器和超级图标。
* 抓图工具：HyperSnap、HyperCam和Camtasia Studio。
* 文本文件编辑工具：记事本和UltraEdit。
* 全景图片制作工具：Cool360。
* 网站发布工具：CuteFTP。
1. Dreamweaver
　　Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，无须编写任何代码就能快速创建Web页面。
2. Photoshop
　　Photoshop是Adobe公司旗下最为出名的图像处理软件之一，其界面友好，支持多种图像格式以及多种色彩模式，还可以任意调整图像的尺寸、分辨率及画布大小。Photoshop可用于设计网页整体效果图、网页Logo、网页Banner和网页中广告等图像。
3.Flash
　　Flash是一种常用的动画制作软件，用于制作和编辑具有较强交互性的矢量动画，可以方便地生成.swf动画文件，此文件可嵌入HTML。Flash动画已成为网站中必不可少的元素，为网页增添生动色彩，以吸引更多的浏览者。
4.Fireworks
　　Fireworks是一个将矢量图形处理和点阵图形处理合二为一的专业化图形设计软件。它可以对各种图像文件进行编辑和处理，也可以直接生产包含HTML和JavaScript代码的动态图像。
1.2.3 网页设计与制作的分类
　　网页设计与制作一般分为静态网页制作和动态网页制作两类。
1. 静态网页的设计与制作
　　静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、Flash动画、客户端脚本和ActiveX控件及Java小程序等。在HTML格式的网页中，也可出现各种动态的效果，如GIF格式的动画、Flash动画和滚动字幕等，在视觉上是"动态效果"。静态网页仅仅用来被动发布信息，而不具有交互功能。
2. 动态网页的设计与制作
　　动态网页是用ASP、JSP、PHP等网络编程语言编写的交互式网页，与后台数据库进行交互，进行数据传递。动态网页的表现形式有论坛、留言板或网站后台管理页(在网页后台进行信息添加和修改，前台则自动更新)等，常常以.aspx、.asp、.jsp、.php、.perl等形式为后缀，并且在动态网页网址中有一个标志性的符号"？"。
1.3 网页设计的基本流程
　　网站由许多网页组成，若想使网页吸引眼球、受人欢迎，要求网站的内容、结构、颜色、美工等有一个很好的规划。建立一个网站的流程如下。
1. 确定网站的主题
　　设计网站的第一步就是要确定网站的主题，根据客户要建设的网站以及相关要求确定网站的类型，网站的功能要求、内容要求、色彩要求、栏目要求、性能要求、布局要求、操作要求等，最终形成用户的需求分析。
2. 网站的总体规划
　　掌握客户的需求后，便要对网站项目进行总体的规划性设计，包括网站设计工具、内容和色调、版面布局设计、网站栏目设置、界面设计和制定网站建设规划等。
3. 制作网页
　　(1) 收集网站素材资料。网站制作之前，收集文本、图片、视频、音频等素材，将来作为网站的Logo、广告栏、导航栏等页面元素。
　　(2) 确定网页版面布局，注意多个页面风格的一致性。
　　(3) 制作网页。利用网页制作工具制作静态的网页与动态的网页。
　　(4) 添加网页特效。利用HTML语言、Flash动画、层等制作特效，增加网页的艺术效果。
4. 测试和发布网站
　　网站做好后，要对网站进行测试，包括网站的浏览器兼容性和站点超链接完好性。通过客户验收后，提供给客户发布到网上，供其使用。
5. 网站的更新与维护
　　网站发布后，在合同有效期内，根据客户的要求，对网站进行针对性地修改，定期维护、更新内容和板块，定期做好网站数据备份工作。