第 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章　初识HTML　11
2.1　HTML 概述　12
2.1.1　HTML 发展历史　12
2.1.2　HTML 文件基本结构　12
2.1.3　使用Dreamweaver 创建一个HTML5 页面　13
实例：使用Dreamweaver　实现网页导航
2.2　文字标签　15
2.2.1　显示普通文字　15
2.2.2　输入特殊符号　15
2.2.3　标题字标签　15
2.2.4　修饰文字标签　15
2.2.5　修饰字体标签　16
实例：呈现网页中的商品详情信息
2.3　段落标签　17
2.3.1　段落标签<p>　17
2.3.2　取消文字换行标签<nobr>　17
2.3.3　修饰段落的对齐属性align　17
实例：显示一则网页中的打折促销广告
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　建立定义列表　23
实例：应用定义列表展示商品内容
2.5　链接标签　25
2.5.1　建立文本链接　25
2.5.2　建立书签链接　26
实例：实现在网页中添加书签链接
小结　28
上机指导　28
习题　30
第3章　HTML 中的表格　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　行标签<tr>的属性　35
3.2.1　设置行的高度　35
3.2.2　设置行的边框颜色　36
3.2.3　设置行的背景颜色　36
3.2.4　设置行的水平位置　36
3.2.5　设置行的垂直位置　36
实例：实现商城的商品布局
3.3　单元格标签<td>的属性　38
3.3.1　设置单元格的大小　38
3.3.2　设置单元格的水平对齐属性　38
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　表头标签<th>的属性　42
3.5　表格的结构标签　43
3.5.1　设置表首样式　43
3.5.2　设置表主体样式　44
3.5.3　设置表尾样式　45
小结　46
上机指导　46
习题　48
第4章　使用HTML 创建表单　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　HTML5 新增表单属性　66
小结　70
上机指导　70
习题　72
第5章　使用图像　73
5.1　图片的基本格式　74
5.2　添加图像—img　74
实例：通过<img>标签添加图像，实现51　购商城首页的一个版块
5.3　设置图像属性　75
5.3.1　图像高度—height　75
实例：通过图像高度属性，实现51购商品详情里同一张图片的不同高度
5.3.2　图像宽度—width　76
实例：通过图像宽度属性，实现51购商品详情里同一张图片的不同宽度
5.3.3　图像边框—border　77
实例：通过图像边框属性，为图像添加边框
5.3.4　图像水平间距—hspace　78
实例：通过图像水平间距属性，为图像设置水平间距
5.3.5　图像垂直间距—vspace　79
实例：通过图像垂直间距属性，为图像设置垂直间距
5.3.6　图像相对于文字基准线的对齐方式—align　80
实例：通过align　属性，实现玫瑰的生长过程
5.3.7　图像的提示文字—title　81
实例：通过图像提示文字属性，实现鼠标放到图片上时出现提示文字
5.3.8　图像的替换文字—alt　82
实例：通过图像替换文字属性，为图像添加替换文字
5.4　使用<img>标签插入avi 文件　83
5.4.1　avi 的源文件属性—dynsrc　83
实例：通过<img>标签的dynsrc属性向页面中插入一个avi格式的视频文件
5.4.2　设定avi 文件循环次数属性—loop　84
实例：通过<img>标签的dynsrc　属性向页面中插入一个avi 格式的视频文件，并通过loop
属性设置avi　文件的循环次数
5.4.3　设定avi 文件播放方式属性—start　84
实例：通过<img>标签的dynsrc属性向页面中插入一个avi　格式的视频文件，并通
过start　属性设置avi 文件的播放方式
5.5　图像的超链接　86
5.5.1　设置图像的超链接　86
实例：给图像添加超链接实现51购商城中的手机展示功能
5.5.2　设置图像热区链接　87
实例：在图片中添加热区链接
小结　89
上机指导　89
习题　91
第6章　走进HTML 的多媒体世界　92
6.1　设置滚动文字　93
6.1.1　滚动文字标签—marquee　93
6.1.2　滚动方向属性—direction　93
6.1.3　滚动方式属性—behavior　94
实例：实现从不同方向，以不同方式滚动的商城的促销信息展示
6.1.4　滚动速度属性—scrollamount　95
6.1.5　滚动延迟属性—scrolldelay　95
6.1.6　滚动循环属性——loop　96
实例：实现以不同的滚动速度，滚动延迟以及滚动循环次数展
示的商城的促销信息
6.1.7　滚动范围属性—width、height　97
6.1.8　滚动背景颜色属性—bgcolor　97
实例：实现以不同的滚动范围、滚动背景颜色的商城的促销信
息展示
6.1.9　滚动空间属性—hspace、vspace　98
6.2　<audio>标签和<video>标签　99
6.3　多媒体标签的基本属性及使用　100
6.3.1　多媒体标签基本属性　100
6.3.2　使用<audio>标签播放音频　103
实例：实现51　购商城商品详情页面的音乐播放
6.3.3　使用<video>标签播放视频　104
实例：　使用<video>标签播放一段广告视频
6.3.4　设置背景音乐—bgsound　104
6.4　多媒体标签的方法　105
实例：实现通过多媒体标签提供的方法控制视频的播放
6.5　多媒体标签的事件　107
6.5.1　事件处理　107
6.5.2　事件介绍　107
小结　108
上机指导　108
习题　109
第7　章 CSS 概述　110
7.1　CSS 的发展史　111
7.2　CSS3 新特性　111
7.3　主流浏览器对CSS 的支持　112
7.4　一个简单的CSS 示例　113
实例：实现背景切换和鼠标滑过展开图片的效果
小结　115
习题　115
第8　章 CSS 中的选择器　116
8.1　选择器概述　117
8.2　基础选择器　118
8.2.1　元素选择器　118
8.2.2　类选择器　118
8.2.3　ID 选择器　119
8.2.4　属性选择器　119
实例：实现51　购商城首页的手机风暴版块
8.3　其他选择器　123
8.3.1　后代选择器　123
8.3.2　子代选择器　123
8.3.3　相邻兄弟元素选择器　124
8.3.4　通用兄弟元素选择器　124
实例：实现一个商城首页的爆款特卖版块
8.4　伪类选择器及伪元素　126
8.4.1　伪类选择器　126
8.4.2　伪元素选择器　127
实例：实现商城分类版块界面
小结　128
上机指导　129
习题　131
第9章　CSS 常用属性　132
9.1　文本相关属性　133
9.1.1　文字　133
实例：实现商城商品页面
9.1.2　文本　137
实例：演示word-break　属性的功能
9.1.3　设置超链接样式　139
实例：实现为商品描述信息设置链接样式
9.2　背景相关属性　140
9.2.1　背景常规属性　140
实例：实现为51　购商城的登录页面添加背景图片
9.2.2　CSS3 新特性　142
实例：演示background-clip属性值间的区别
9.3　列表相关属性　147
实例：实现使用无序列表<ul>标签制作导航栏
9.4　框模型　149
9.4.1　概述　149
9.4.2　内外边距的相关属性　150
实例：实现在商品详情页面，设置<li>标签的内外边距
9.4.3　边框　152
9.5　定位相关属性　153
9.5.1　概述　153
9.5.2　设置定位方式　153
实例：应用相对定位设置<div>标签的定位方式，并随鼠标滑动呈现相应内容
9.5.3　浮动　155
实例：在商品详情页面，<li>标签设置向左浮动
小结　156
上机指导　156
习题　158
第 10章　CSS3 中的变形与动画　159
10.1　2D 变换—transform　160
10.1.1　transform 的基本属性值　160
10.1.2　应用transform 属性实现旋转　161
10.1.3　应用transform 属性实现缩放　161
10.1.4　应用transform 属性实现平移　162
10.1.5　应用transform 属性实现倾斜　163
实例：实现不同的商品图片旋转、缩放、平移、倾斜的效果
10.1.6　变形原点　166
10.2　过渡效果—transition　167
10.2.1　指定参与过渡的属性　167
10.2.2　指定过渡的持续时间　167
10.2.3　指定过渡的延迟时间　168
10.2.4　指定过渡的动画类型　168
实例：利用transition　属性实现4 种不同的动态效果
10.3　动画—Animation　173
10.3.1　关键帧　173
10.3.2　动画属性　174
实例：实现51　购商城中商品详情里滚动播出广告
小结　176
上机指导　176
习题　177
第 11章　JavaScript 概述　178
11.1　JavaScript 概貌　179
11.1.1　JavaScript 的历史　179
11.1.2　JavaScript 的主要特点　179
11.1.3　JavaScript 成功案例　180
11.2　JavaScript 开发环境要求　182
11.2.1　硬件要求　182
11.2.2　软件要求　182
11.3　JavaScript 在HTML 中的使用　183
11.3.1　在页面中直接嵌入JavaScript　183
11.3.2　链接外部JavaScript　184
实例：使用JavaScript　脚本显示当前的时间
小结　185
上机指导　185
习题　187
第 12章　JavaScript 基础　188
12.1　JavaScript 数据结构　189
12.1.1　标识符　189
12.1.2　关键字　189
12.1.3　常量　190
12.1.4　变量　190
12.2　数据类型　191
12.2.1　数字型数据　192
12.2.2　字符串型数据　193
12.2.3　布尔型数据　193
12.2.4　特殊数据类型　194
12.2.5　数据类型的转换规则　195
实例：输出JavaScript　常用数据类型
12.3　运算符与表达式　197
12.3.1　算术运算符　198
12.3.2　比较运算符　198
12.3.3　赋值运算符　198
12.3.4　字符串运算符　199
12.3.5　布尔运算符　199
12.3.6　条件运算符　200
12.3.7　运算符优先级　200
12.3.8　表达式　200
实例：使用JavaScript　制作一个简单的计算器
12.4　流程控制语句　203
12.4.1　条件控制语句　203
实例：实现51　购商城登录界面九九乘法表
12.4.2　循环控制语句　209
实例：使用JavaScript　语法实现九九乘法表
12.4.3　跳转语句　212
12.5　函数　213
12.5.1　函数的定义　213
12.5.2　函数的调用　214
实例：51　购商品详情页面调用JavaScript 函数
12.5.3　几种特殊的函数　217
小结　219
上机指导　219
习题　220
第 13章　JavaScript 对象编程　221
13.1　Window 窗口对象　222
13.1.1　Window 对象　222
13.1.2　对话框（Dialog）　223
实例：使用HTML　语法，在页面中显示Window 对象常用对话框
13.1.3　窗口对象常用操作　226
13.2　Document 文档对象　229
13.2.1　文档对象概述　229
13.2.2　文档对象的常用属性、方法与事件　230
13.2.3　Document 对象的应用　231
实例：使用HTML　语法，讲解Document 文档对象
13.3　JavaScript 与表单操作　237
13.3.1　在JavaScript 中访问表单　237
13.3.2　在JavaScript 中访问表单域　237
13.3.3　表单的验证　237
实例：实现51　购商城注册界面的验证
13.4　DOM 对象　239
13.4.1　DOM 概述　239
13.4.2　DOM 对象节点属性　241
13.4.3　节点的几种操作　242
13.4.4　获取文档中的指定元素　243
实例：实现51　购商城收货地址界面，收货地址的删除和复制
13.4.5　与DHTML 相对应的DOM　245
小结　246
上机指导　246
习题　248
第 14章　JavaScript 中的事件处理　249
14.1　事件与事件处理概述　250
14.1.1　事件与事件名称　250
14.1.2　JavaScript 的常用事件　250
14.1.3　事件处理程序的调用　252
实例：使用键盘事件实现随机抽取电话号码
14.2　DOM 事件模型　254
14.2.1　事件流　254
14.2.2　主流浏览器的事件模型　254
14.2.3　事件对象　255
14.2.4　注册与移除事件监听器　255
14.3　鼠标和键盘事件　257
14.3.1　鼠标的单击事件　257
14.3.2　鼠标的按下和松开事件　257
14.3.3　鼠标的移入和移出事件　257
14.3.4　鼠标的移动事件　257
14.3.5　键盘事件的使用　257
实例：测试JavaScript　中的鼠标和键盘事件
14.4　页面事件　260
14.4.1　加载与卸载事件　260
14.4.2　页面的大小事件　261
实例：使用JavaScript　实现刮刮卡效果
14.5　表单事件　262
14.5.1　获得焦点与失去焦点事件　262
14.5.2　失去焦点修改事件　262
14.5.3　表单提交与重置事件　263
实例：实现51　购商城中登录时表单事件的处理
小结　265
上机指导　265
习题　266
第 15章　综合项目—51 购商城　267
15.1　项目的设计思路　268
15.1.1　项目概述　268
15.1.2　界面预览　268
15.1.3　功能结构　270
15.1.4　文件夹组织结构　270
15.2　主页的设计与实现　271
15.2.1　主页的设计　271
15.2.2　顶部区和底部区功能的实现　272
15.2.3　商品分类导航功能的实现　274
15.2.4　轮播图功能的实现　276
15.2.5　商品推荐功能的实现　277
15.3　商品列表页面的设计与实现　279
15.3.1　商品列表页面的设计　279
15.3.2　分类选项功能的实现　279
15.3.3　商品列表区的实现　281
15.4　商品详情页面的设计与实现　282
15.4.1　商品详情页面的设计　282
15.4.2　商品概要功能的实现　284
15.4.3　商品评价功能的实现　285
15.4.4　猜你喜欢功能的实现　286
15.5　购物车页面的设计与实现　288
15.5.1　购物车页面的设计　288
15.5.2　购物车页面的实现　289
15.6　付款页面的设计与实现　290
15.6.1　付款页面的设计　290
15.6.2　付款页面的实现　290
15.7　登录和注册页面的设计与实现　292
15.7.1　登录和注册页面的设计　292
15.7.2　登录页面的实现　293
15.7.3　注册页面的实现　294
小结　296
第 16章　课程设计—游戏公园网站　297
16.1　课程设计目的　298
16.2　游戏公园网站概述　298
16.2.1　网站特点　298
16.2.2　功能结构　299
16.3　主页的设计与实现　300
16.3.1　主页的设计　300
16.3.2　顶部区和底部区功能的实现　301
16.3.3　推荐游戏功能的实现　303
16.3.4　**新游戏功能的实现　304
16.4　博客列表的设计与实现　305
16.4.1　博客列表的设计　305
16.4.2　博客列表的实现　306
16.5　博客详情的设计与实现　308
16.5.1　博客详情的设计　308
16.5.2　博客详情的实现　308
16.6　关于我们的设计与实现　309
16.6.1　关于我们的设计　309
16.6.2　关于我们的实现　310
小结　311
附录　实验　312
实验1　通过Dreamweaver 创建一个网页　312
实验2　实现网页中的买家评论信息　313
实验3　通过表格制作商城首页　315
实验4　通过表单实现酒店筛选　317
实验5　设置网页中图片的属性　318
实验6　通过<video>标签添加视频　320
实验7　实现鼠标滑过图片时的特效　321
实验8　实现51 购商城中鼠标划过的特效　323
实验9　通过列表实现商品排列　325
实验10　通过2D 变换实现动态照片墙　327
实验11　输出一张图片　329
实验12　通过循环语句输出年份和月份　329
实验13　实现商品详情中Tab 菜单　331
实验14　购物车常用操作　333