第 1　章　网页设计基础　1
1.1　万维网概述　2
1.2　HTML 语言　2
1.3　HTML 开发组织　2
1.4　网页设计相关概念　2
1.4.1　超链接　3
1.4.2　统一资源定位器　3
1.4.3　网站　3
1.4.4　网页　3
1.4.5　首页　3
1.5　网页的开发工具和浏览工具　3
1.5.1　网页开发工具简介　3
1.5.2　网页浏览工具　5
1.5.3　Dreamweaver 的使用　6
1.6　网页制作相关技术　7
1.6.1　客户端应用技术　7
1.6.2　服务器端应用技术　9
小结　10
习题　10
第 2　章 初识HTML5　11
2.1　HTML5 概述　12
2.1.1　HTML 发展历史　12
2.1.2　什么是HTML5　12
2.1.3　HTML5 文件基本结构　12
2.1.4　使用Dreamweaver 创建一个
HTML　5 页面　13
实例：使用Dreamweaver　实现网页
导航
2.2　文字标签　15
2.2.1　显示普通文字　15
2.2.2　输入特殊符号　15
2.2.3　标题字标签　16
2.2.4　修饰文字标签　16
2.2.5　修饰字体标签　16
实例：呈现网页中的商品详情信息
2.3　段落标签　17
2.3.1　段落标签<p>　17
2.3.2　取消文字换行标签<nobr>　17
2.3.3　修饰段落的对齐属性align　18
实例：显示一则网页中的打折促销
广告
2.3.4　保留原始排版标签<pre>　18
实例：使用字母“o”组成“元旦
快乐”
2.4　图片标签和列表标签　19
2.4.1　插入图片标签<img>　19
2.4.2　建立有序列表　19
实例：制作网页版心里测试问卷
2.4.3　建立无序列表　22
实例：实现51　购商城中的商品
详情简介
2.4.4　建立定义列表　24
实例：显示库存商品信息
2.5　链接标签　26
2.5.1　建立文本链接　26
2.5.2　建立书签链接　26
实例：实现在网页中添加书签链接
小结　29
上机指导　29
习题　30
第3　章 HTML5 中的表格　31
3.1　绘制表格　32
3.1.1　设置表格的标题　32
3.1.2　设置表格的宽度和高度　32
3.1.3　设置表格的边框色　33
3.1.4　设置表格的对齐方式　33
3.1.5　设置表格的背景颜色　33
实例：实现商品页面
3.1.6　设置表格的背景图片　34
实例：利用表格实现商品列表
3.2　行标签的属性　35
3.2.1　设置行的高度　35
3.2.2　设置行的边框颜色　36
3.2.3　设置行的背景颜色　36
3.2.4　设置行的水平位置　36
3.2.5　设置行的垂直位置　37
实例：实现商城的商品布局
3.3　单元格标签的属性　38
3.3.1　设置单元格的大小　38
3.3.2　设置单元格的水平对齐属性　39
3.3.3　设置单元格的垂直对齐属性　39
3.3.4　设置单元格的水平跨度　39
3.3.5　设置单元格的垂直跨度　40
3.3.6　设置单元格的背景色　41
3.3.7　设置单元格的背景图片　41
3.3.8　单元格属性综合运用　41
实例：商城的手机商品页面
3.4　表头标签的属性　42
3.5　表格的结构标签　43
3.5.1　设置表首样式　43
3.5.2　设置表主体样式　45
3.5.3　设置表尾样式　45
小结　46
上机指导　46
习题　48
第4　章 使用HTML 5 创建表单　49
4.1　表单概述　50
4.2　表单标签<form>　50
4.2.1　处理程序属性—action　50
4.2.2　表单名称属性—name　51
4.2.3　传送方法属性—method　51
4.2.4　编码方式属性—enctype　52
4.2.5　目标显示方式属性—target　53
4.3　输入标签<input>　53
4.3.1　文本框—text　53
实例：实现51　购商城的登录界面
账号文本框
4.3.2　密码域—password　54
实例：实现51　购商城的登录界面
的密码域
4.3.3　“单选”按钮—radio　56
实例：实现51　购商城的购买页面
中选择颜色的单选按钮
4.3.4　复选框—checkbox　57
实例：实现51　购商城的购物车界
面选择所要结算商品的复
选框
4.3.5　“普通”按钮—button　58
实例：实现51　购商城购买页面中
“加入购物车”和“立即购买”
按钮
4.3.6　“提交”按钮—submit　59
实例：实现51　购商城的购物车界面
4.3.7　“重置”按钮—reset　60
实例：实现个人信息表重置
4.3.8　图像域—image　61
实例：实现商城的客服中心页面
“和我联系”按钮
4.3.9　隐藏域—hidden　62
4.3.10　文件域—file　63
实例：实现商城的个人中心上传头像
4.4　文本域标签—textarea　64
实例：实现商城评价页面输入评价框
4.5　列表/菜单标签　65
实例：实现商城添加收货地址页面
输入电话和地址的下拉菜单
4.6　新增表单属性　66
小结　70
上机指导　70
习题　72
第5　章 使用HTML5 绘制图形　73
5.1　认识HTML5 中的画布—Canvas　74
5.1.1　什么是Canvas　74
5.1.2　在HTML 里创建画布　74
5.1.3　使用Canvas 绘制图形实例　74
5.2　绘制基本图形　75
5.2.1　绘制直线　75
5.2.2　绘制矩形　77
5.2.3　绘制曲线　77
5.2.4　绘制圆形　78
实例：使用canvas　绘制木头人
5.2.5　绘制渐变图形　80
实例：使用canvas　绘制基本图形
5.2.6　绘制平移效果的图形　83
5.2.7　绘制缩放效果的图形　83
5.2.8　绘制旋转效果的图形　83
实例：使用canvas　中实现手机图片
的特效
5.3　使用图像　84
5.3.1　引入图像　84
5.3.2　平铺图像　85
5.3.3　裁剪图像　86
实例：实现51　购商城中的商品放
大镜效果
5.4　绘制文字　88
5.4.1　绘制轮廓文字　88
5.4.2　绘制填充文字　88
5.4.3　文字相关属性　88
实例：使用canvas　中实现动态打字
特效
小结　89
上机指导　90
习题　93
第6　章 走进HTML5 的多媒体世界　94
6.1　设置滚动文字　95
6.1.1　滚动文字标签—marquee　95
6.1.2　滚动方向属性—direction　95
6.1.3　滚动方式属性—behavior　96
实例：实现从不同方向，以不同方式
滚动的商城的促销信息展示
6.1.4　滚动速度属性—scrollamount　97
6.1.5　滚动延迟属性—scrolldelay　97
6.1.6　滚动循环属性—loop　98
实例：实现以不同的滚动速度，滚
动延迟以及滚动循环次数的
商城的促销信息展示
6.1.7　滚动范围属性—width、height
98
6.1.8　滚动背景颜色属性—bgcolor
99
实例：实现以不同的滚动范围、滚
动背景颜色的商城的促销信
息展示
6.1.9　滚动空间属性—hspace、vspace
100
6.2　<audio>标签和<video>标签　100
6.3　多媒体标签的基本属性及使用　101
6.3.1　多媒体标签基本属性　101
6.3.2　使用<audio>标签播放音频　105
实例：实现51　购商城商品详情页
面的音乐播放
6.3.3　使用<video>标签播放视频　105
实例：使用<video>标签播放一段
广告视频
6.3.4　设置背景音乐—bgsound　106
6.4　多媒体标签的方法　106
实例：实现通过多媒体标签提供的
方法控制视频的播放
6.5　多媒体标签的事件　108
6.5.1　事件处理　108
6.5.2　事件介绍　108
小结　109
上机指导　109
习题　110
第7　章 CSS3 概述　111
7.1　CSS 的发展史　112
7.2　CSS3 概述　112
7.3　主流浏览器对CSS 的支持　113
7.4　一个简单的CSS3 示例　114
实例：实现背景切换和鼠标滑过展
开图片的效果
小结　116
习题　116
第8　章 CSS3 中的选择器　117
8.1　选择器概述　118
5.2.1　绘制直线　75
5.2.2　绘制矩形　77
5.2.3　绘制曲线　77
5.2.4　绘制圆形　78
实例：使用canvas　绘制木头人
5.2.5　绘制渐变图形　80
实例：使用canvas　绘制基本图形
5.2.6　绘制平移效果的图形　83
5.2.7　绘制缩放效果的图形　83
5.2.8　绘制旋转效果的图形　83
实例：使用canvas　中实现手机图片
的特效
5.3　使用图像　84
5.3.1　引入图像　84
5.3.2　平铺图像　85
5.3.3　裁剪图像　86
实例：实现51　购商城中的商品放
大镜效果
5.4　绘制文字　88
5.4.1　绘制轮廓文字　88
5.4.2　绘制填充文字　88
5.4.3　文字相关属性　88
实例：使用canvas　中实现动态打字
特效
小结　89
上机指导　90
习题　93
第6　章 走进HTML5 的多媒体世界　94
6.1　设置滚动文字　95
6.1.1　滚动文字标签—marquee　95
6.1.2　滚动方向属性—direction　95
6.1.3　滚动方式属性—behavior　96
实例：实现从不同方向，以不同方式
滚动的商城的促销信息展示
6.1.4　滚动速度属性—scrollamount　97
6.1.5　滚动延迟属性—scrolldelay　97
6.1.6　滚动循环属性—loop　98
实例：实现以不同的滚动速度，滚
动延迟以及滚动循环次数的
商城的促销信息展示
6.1.7　滚动范围属性—width、height
98
6.1.8　滚动背景颜色属性—bgcolor
99
实例：实现以不同的滚动范围、滚
动背景颜色的商城的促销信
息展示
6.1.9　滚动空间属性—hspace、vspace
100
6.2　<audio>标签和<video>标签　100
6.3　多媒体标签的基本属性及使用　101
6.3.1　多媒体标签基本属性　101
6.3.2　使用<audio>标签播放音频　105
实例：实现51　购商城商品详情页
面的音乐播放
6.3.3　使用<video>标签播放视频　105
实例：使用<video>标签播放一段
广告视频
6.3.4　设置背景音乐—bgsound　106
6.4　多媒体标签的方法　106
实例：实现通过多媒体标签提供的
方法控制视频的播放
6.5　多媒体标签的事件　108
6.5.1　事件处理　108
6.5.2　事件介绍　108
小结　109
上机指导　109
习题　110
第7　章 CSS3 概述　111
7.1　CSS 的发展史　112
7.2　CSS3 概述　112
7.3　主流浏览器对CSS 的支持　113
7.4　一个简单的CSS3 示例　114
实例：实现背景切换和鼠标滑过展
开图片的效果
小结　116
习题　116
第8　章 CSS3 中的选择器　117
8.1　选择器概述　118
实例：实现51　购商城中商品详情
里滚动播出广告
小结　178
上机指导　178
习题　179
第 11　章 JavaScript 概述　180
11.1　JavaScript 概貌　181
11.1.1　JavaScript 的历史起源　181
11.1.2　JavaScript 的主要特点　181
11.1.3　JavaScript 成功案例　182
11.2　JavaScript 开发环境要求　184
11.2.1　硬件要求　184
11.2.2　软件要求　184
11.3　JavaScript 在HTML 中的使用　184
11.3.1　在页面中直接嵌入JavaScript
代码　184
11.3.2　链接外部JavaScript 文件　185
实例：使用JavaScript　脚本显示
当前的时间
小结　187
上机指导　187
习题　188
第 12　章 JavaScript 语言基础　189
12.1　JavaScript 数据结构　190
12.1.1　标识符　190
12.1.2　关键字　190
12.1.3　常量　191
12.1.4　变量　191
12.2　数据类型　192
12.2.1　数字型数据　193
12.2.2　字符串型数据　194
12.2.3　布尔型数据　194
12.2.4　特殊数据类型　195
12.2.5　数据类型的转换规则　195
实例：实现页面中输出JavaScript
语言的常用数据类型
12.3　运算符与表达式　198
12.3.1　算术运算符　198
12.3.2　比较运算符　199
12.3.3　赋值运算符　199
12.3.4　字符串运算符　200
12.3.5　布尔运算符　200
12.3.6　条件运算符　201
12.3.7　运算符优先级　201
12.3.8　表达式　201
实例：使用JavaScript　制作
一个简单的计算器
12.4　流程控制语句　204
12.4.1　条件控制语句　204
实例：实现51　购商城的登录界面
密码是否输入正确判断
12.4.2　循环控制语句　209
实例：使用JavaScript　语法实现
九九乘法表
12.4.3　跳转语句　213
12.5　函数　213
12.5.1　函数的定义　213
12.5.2　函数的调用　214
实例：实现51　购商城的商品详情页
面加入购物车按钮调用函数
12.5.3　函数的使用　215
12.5.4　几种特殊的函数　217
小结　219
上机指导　219
习题　221
第 13　章 JavaScript 对象编程　222
13.1　Window 对象　223
13.1.1　Window 对象概述　223
13.1.2　对话框　224
实例：使用HTML　语法在页面中
显示Window　对象常用对话框
13.1.3　窗口对象常用操作　227
13.2　Document 文档对象　230
13.2.1　文档对象概述　230
13.2.2　文档对象的常用属性、
方法与事件　230
13.2.3　Document 对象的应用　232
实例：使用HTML　语法讲解
Document　文档对象
13.3　JavaScript 与表单操作　238
13.3.1　在JavaScript 中访问表单　238
13.3.2　在JavaScript 中访问表单域　238
13.3.3　表单的验证　238
实例：实现51　购商城注册界面的
验证
13.4　DOM 对象　240
13.4.1　DOM 概述　240
13.4.2　DOM 对象节点属性　242
13.4.3　节点的几种操作　243
13.4.4　获取文档中的指定元素　244
实例：实现51　购商城收货地址界
面，收货地址的删除和复制
13.4.5　与DHTML 相对应的DOM　246
小结　247
上机指导　247
习题　249
第 14　章 JavaScript 中事件处理250
14.1　事件与事件处理概述　251
14.1.1　事件与事件名称　251
14.1.2　JavaScript 的常用事件　251
14.1.3　事件处理程序的调用　253
实例：使用键盘事件实现随机抽取
电话号码
14.2　DOM 事件模型　255
14.2.1　事件流　255
14.2.2　主流浏览器的事件模型　255
14.2.3　事件对象　256
14.2.4　注册与移除事件监听器　256
14.3　鼠标键盘事件　258
14.3.1　鼠标的单击事件　258
14.3.2　鼠标的按下或松开事件　258
14.3.3　鼠标的移入移出事件　258
14.3.4　鼠标的移动事件　258
14.3.5　键盘事件的使用　258
实例：测试JavaScript　中的鼠标
键盘事件
14.4　页面事件　261
14.4.1　加载与卸载事件　261
14.4.2　页面大小事件　261
实例：使用JavaScript　实现刮刮卡效果
14.5　表单事件　263
14.5.1　获得焦点与失去焦点事件　263
14.5.2　焦点修改事件　263
14.5.3　表单提交与重置事件　263
实例：实现51　购商城中登录时表
单事件的处理
小结　266
上机指导　266
习题　267
第 15　章 响应式网页设计　268
15.1　概述　269
15.1.1　响应式网页设计的概念　269
15.1.2　响应式网页设计的优缺点　269
15.1.3　响应式网页设计的技术原理　270
15.2　像素和屏幕分辨率　270
15.2.1　像素和屏幕分辨率　270
15.2.2　设备像素　271
15.2.3　CSS 像素　272
15.3　视口　272
15.3.1　视口　272
15.3.2　视口常用属性　273
15.3.3　媒体查询　274
15.4　响应式网页的布局设计　275
15.4.1　常用布局类型　275
15.4.2　布局的实现方式　276
实例：主页的响应式实现
（第 17　章游戏公园网站）
15.4.3　响应式布局的设计与实现　277
实例：登录页面的响应式布局
（第 16　章51 购商城）
小结　280
上机指导　280
习题　281
第 16　章 综合项目—51 购商城
（适配移动端）　282
16.1　项目的设计思路　283
16.1.1　项目概述　283
16.1.2　界面预览　283
16.1.3　功能结构　284
16.1.4　文件夹组织结构　285
16.2　主页的设计与实现　285
16.2.1　主页的设计　285
16.2.2　顶部区和底部区功能的实现　287
16.2.3　商品分类导航功能的实现　288
16.2.4　轮播图功能的实现　290
16.2.5　商品推荐功能的实现　292
16.2.6　适配移动端的实现　293
16.3　商品列表页面的设计与实现　294
16.3.1　商品列表页面的设计　294
16.3.2　分类选项功能的实现　295
16.3.3　商品列表区的实现　296
16.4　商品详情页面的设计与实现　297
16.4.1　商品详情页面的设计　297
16.4.2　商品概要功能的实现　299
16.4.3　商品评价功能的实现　300
16.4.4　猜你喜欢功能的实现　301
16.5　购物车页面的设计与实现　303
16.5.1　购物车页面的设计　303
16.5.2　购物车页面的实现　303
16.6　付款页面的设计与实现　305
16.6.1　付款页面的设计　305
16.6.2　付款页面的实现　305
16.7　登录注册页面的设计与实现　307
16.7.1　登录注册页面的设计　307
16.7.2　登录页面的实现　308
16.7.3　注册页面的实现　309
小结　311
第 17　章 课程设计—游戏公园
网站　313
17.1　课程设计目的　314
17.2　游戏公园网站概述　314
17.2.1　网站特点　314
17.2.2　功能结构　315
17.3　主页的设计与实现　316
17.3.1　主页的设计　316
17.3.2　顶部区和底部区功能的实现　317
17.3.3　推荐游戏功能的实现　318
17.3.4　**新游戏功能的实现　319
17.4　博客列表的设计与实现　321
17.4.1　博客列表的设计　321
17.4.2　博客列表的实现　321
17.5　博客详情的设计与实现　323
17.5.1　博客详情的设计　323
17.5.2　博客详情的实现　324
17.6　关于我们的设计与实现　325
17.6.1　关于我们的设计　325
17.6.2　关于我们的实现　325
小结　327
附录　实验　328
实验1　通过Dreamweaver 创建一个
网页　328
实验2　实现网页中的买家评论信息　329
实验3　通过表格制作商品列表　331
实验4　通过表单实现酒店筛选　333
实验5　键盘按键绘制不同图形　334
实验6　通过<video>标签添加视频　336
实验7　实现鼠标滑过图片时的特效　338
实验8　通过伪类选择器实现侧导航　340
实验9　通过定位实现图片移动　342
实验10　通过2D 变换实现翻转洗牌　343
实验11　输出一张图片　345
实验12　通过循环语句输出年份
和月份　346
实验13　在页面指定位置显示当前
日期　347
实验14　图片放大缩小　348
实验15　制作响应式网页主页　349