第1章 网页和网站的基础知识 1
1.1 认识网页 1
1.1.1 网页和网站 1
1.1.2 网页类型 2
1.1.3 网页的基本构成 3
1.2 网页设计 4
1.2.1 网页设计概述 4
1.2.2 网页设计原则 5
1.2.3 网页设计相关术语 7
1.2.4 常见网页类型 11
1.3 网页布局 13
1.3.1 表格布局 13
1.3.2 表格布局的特点 14
1.3.3 冗余的嵌套表格和混乱的结构 14
1.3.4 表格布局的优缺点 15
1.3.5 Div+CSS布局 15
1.3.6 Div+CSS布局的特点 15
1.3.7 Div+CSS布局的优缺点 15
1.4 网页版式设计 16
1.4.1 网页版式设计的特点 16
1.4.2 页面尺寸 16
1.4.3 整体造型 17
1.4.4 网页布局方法 17
1.4.5 网页设计的构图方法 17
1.4.6 版式设计的视觉流程 18
1.5 了解Web标准 19
1.5.1 Web标准的基础概念 19
1.5.2 认识W3C 19
1.5.3 W3C发布的标准 19
1.5.4 网页标准化的好处 21
1.6 网站开发流程 22
1.7 专家支招 22
1.7.1 确定域名注意事项 22
1.7.2 常用网页编辑软件 22
1.8 总结扩展 23
1.8.1 本章小结 23
1.8.2 举一反三——制作简单的HTML页面 23
第2章 HTML、XHTML和HTML5基础 25
2.1 HTML基础 25
2.1.1 HTML概述 25
2.1.2 HTML文件的基本结构 26
2.1.3 HTML能做什么 27
2.1.4 HTML的基本语法 27
2.2 HTML标签 28
2.2.1 基本标签 28
2.2.2 格式标签 29
2.2.3 文本标签 30
2.2.4 超链接标签 31
2.2.5 图像标签 31
2.2.6 表格标签和表单标签 32
2.2.7 分区标签 32
2.3 HTML基础 33
2.3.1 XHTML概述 33
2.3.2 XHTML的页面结构 33
2.3.3 XHTML代码规范 34
2.3.4 3种不同的XHTML文档类型 37
2.4 HTML和XHTML 38
2.4.1 HTML和XHTML的区别 38
2.4.2 使用XHTML的优点 38
2.4.3 HTML转化成XHTML的方法 38
实例：制作简单的HTML页面 38
2.5 HTML 5基础 40
2.5.1 HTML5概述 40
2.5.2 HTML5的简化操作 40
2.5.3 HTML5标签 41
2.5.4 HTML5标准属性 44
2.5.5 HTML5事件属性 44
2.6 HTML5的设计目的 46
2.6.1 ＜video＞标签 46
实例：在网页中嵌入视频 46
2.6.2 ＜audio＞标签 48
实例：在网页中嵌入音频 48
2.6.3 ＜canvas＞标签 50
2.7 专家支招 50
2.7.1 在＜body＞标签中如何设置网页的字体和大小 50
2.7.2 网页中默认的超链接文字效果是什么样的 50
2.8 总结扩展 50
2.8.1 本章小结 50
2.8.2 举一反三——在网页中实现绘图效果 50
第3章 CSS样式基础 52
3.1 CSS概述 52
3.1.1 CSS的发展历史 52
3.1.2 CSS的特点 53
3.1.3 CSS样式的功能 53
3.1.4 CSS样式的局限性 54
3.2 CSS语法 55
3.2.1 CSS的基本语法 55
3.2.2 CSS规则 56
3.3 CSS选择器 56
3.3.1 通配选择器 57
实例：太空冒险网页制作 57
3.3.2 标签选择器 58
3.3.3 类选择器 59
实例：万圣节网页制作 59
3.3.4 ID选择器 61
3.3.5 群选择器 62
3.3.6 派生选择器 63
实例：运动鞋网页制作 63
3.3.7 伪类选择器 65
3.4 CSS 3中新增的选择器 66
3.4.1 结构伪类选择器 66
3.4.2 UI元素状态伪类选择器 67
3.4.3 属性选择器 67
3.5 在网页中应用CSS样式 68
3.5.1 在HTML中插入样式表的方法 68
3.5.2 内联样式 68
3.5.3 嵌入样式表 69
实例：为网页添加内部CSS样式 69
3.5.4 链接外部样式 71
实例：链接外部CSS样式文件 71
3.5.5 导入样式 74
3.6 CSS文档结构 74
3.6.1 结构 75
3.6.2 继承性 75
3.6.3 特殊性 76
3.6.4 层叠性 77
3.6.5 重要性 77
3.7 单位和值 78
3.7.1 颜色值 78
3.7.2 绝对单位 79
3.7.3 相对单位 80
3.8 专家支招 80
3.8.1 CSS和HTML的区别 80
3.8.2 导入CSS样式与链接CSS样式的区别 80
3.9 总结扩展 80
3.9.1 本章小结 80
3.9.2 举一反三——在网页中实现绘图效果 81
第4章 Div+CSS布局入门 82
4.1 定义Div 82
4.1.1 什么是Div 82
4.1.2 插入Div 83
4.1.3 Div的嵌套和固定格式 84
4.2 可视化盒模型 85
4.2.1 盒模型 85
4.2.2 content（内容） 87
4.2.3 padding（填充） 87
实例：设置元素到元素的边界距离 87
4.2.4 border（边框） 89
实例：为图片添加边框 89
4.2.5 margin（边界） 90
实例：调整网页LOGO位置 91
4.3 常见的布局方式 92
4.3.1 居中布局设计 92
4.3.2 浮动布局 94
4.3.3 自适应高度 98
4.4 CSS布局定位 99
4.4.1 position属性 99
4.4.2 相对定位 100
实例：图像叠加 100
4.4.3 绝对定位 102
4.4.4 固定定位 102
实例：制作固定不动的导航条 102
4.4.5 浮动定位 104
4.4.6 空白边叠加 104
4.5 流体网格布局 104
4.6 专家支招 105
4.6.1 CSS3中有关盒模型的新增属性 105
4.6.2 什么是id 105
4.7 总结扩展 105
4.7.1 本章小结 106
4.7.2 举一反三——空白边叠加在网页中的应用 106
第5章 使用CSS控制背景和图片 107
5.1 背景控制概述 107
5.1.1 背景控制原则 107
5.1.2 背景控制属性 108
5.2 背景颜色控制 108
5.2.1 设置背景颜色 108
5.2.2 设置块背景颜色 109
5.3 背景图像控制 110
5.3.1 设置背景图像 110
实例：为网页设置背景图像 110
5.3.2 背景图像的重复方式 112
实例：设置背景图像的重复方式 112
5.3.3 背景图像的定位 114
5.3.4 背景图像的固定 114
5.4 图片样式概述 115
5.4.1 图像边框 115
实例：为网页中的图片设置边框 116
5.4.2 图片缩放 117
5.4.3 图片水平对齐 119
5.4.4 图片垂直对齐 120
5.5 网页中的图文混排 121
5.5.1 使用CSS样式实现文本环绕效果 121
5.5.2 设置文本绕图间距 122
5.6 专家支招 123
5.6.1 网页中插入的图像可以不设置宽度和高度吗 123
5.6.2 background-color属性可以使用哪些值 123
5.7 总结扩展 124
5.7.1 本章小结 124
5.7.2 举一反三——网页图片垂直对齐 124
第6章 CSS控制页面中的文本 125
6.1 文本排版概述 125
6.1.1 文本排版原则 125
6.1.2 文本控制属性 125
6.2 CSS文本样式 126
6.2.1 字体 126
6.2.2 大小 127
6.2.3 颜色 129
实例：为网页中的文字设置样式 129
6.2.4 粗细 132
6.2.5 样式 133
6.2.6 英文字母大小写 133
6.2.7 修饰 133
实例：设置英文大小写并修饰文字 134
6.3 CSS段落样式 137
6.3.1 字间距 137
6.3.2 行间距 137
6.3.3 首字下沉 138
6.3.4 首行缩进 138
实例：为网页中段落文字设置不同样式 138
6.3.5 段落水平对齐 141
6.3.6 段落垂直对齐 141
6.4 CSS样式的功能及冲突 142
6.4.1 使用CSS对Flash中的文字进行控制 142
6.4.2 CSS样式冲突 142
6.5 专家支招 143
6.5.1 CSS样式中的两端对齐有什么作用范围 143
6.5.2 为什么有些情况应用的文本段落垂直对齐不起作用 143
6.6 总结扩展 143
6.6.1 本章小结 143
6.6.2 举一反三——网页中文字水平居中对齐 143
第7章 使用CSS样式控制列表 145
7.1 列表控制概述 145
7.2 列表样式控制 146
7.2.1 无序列表 146
7.2.2 有序列表 146
7.2.3 自定义列表符号 147
实例：制作网站列表 147
7.2.4 定义列表 149
7.2.5 更改列表项目样式 150
7.3 使用列表制作菜单栏 151
7.3.1 使用CSS样式创建横向导航菜单 151
实例：制作游戏网站导航 151
7.3.2 使用CSS样式创建竖向导航菜单 152
实例：制作购物网站导航 153
7.4 CSS3中新增的内容和不透明度属性 154
7.4.1 内容（content） 154
7.4.2 不透明度（opacity） 155
实例：内容和不透明度属性的应用 155
7.5 专家支招 157
7.5.1 如何不通过CSS样式更改项目列表前的符号效果 157
7.5.2 网页中文本分行与分段有什么区别 157
7.6 总结扩展 157
7.6.1 本章小结 157
7.6.2 举一反三——更改部分项目列表符号 158
第8章 使用CSS控制表格及表单样式 159
8.1 表格及表单的设计概述 159
8.1.1 表格的设计 159
8.1.2 表单的设计及分类 160
8.2 使用CSS控制表格样式 163
8.2.1 表格标签与结构 163
8.2.2 设置表格边框 164
8.2.3 设置表格背景 165
实例：设置表格边框及背景 165
8.2.4 设置斑马式表格 168
实例：设置斑马式表格 168
8.2.5 设置交互式表格 170
8.3 表单的设计 171
8.3.1 表单 171
8.3.2 表单元素 172
8.4 表单输入 172
8.4.1 文本域和密码域 173
8.4.2 文件域和隐藏域 174
8.4.3 单选按钮和复选框 174
8.4.4 按钮和图像域 176
8.4.5 菜单列表 177
8.5 使用CSS样式控制表单元素 178
8.5.1 使用CSS样式控制表单元素的背景 178
实例：制作网站的登录页面 178
8.5.2 使用CSS样式控制列表与跳转菜单 182
8.5.3 使用CSS样式定义圆角文本字段 183
8.6 表单在网页中的特殊应用 185
8.6.1 聚焦型提示语消失 185
实例：制作文字字段提示语效果 185
8.6.2 输入型提示语消失 189
8.7 专家支招 190
8.7.1 为什么需要使用CSS对表格数据进行控制 190
8.7.2 在表单域中插入图像域的作用 190
8.8 总结扩展 190
8.8.1 本章小结 191
8.8.2 举一反三——美化登录框 191
第9章 使用CSS控制超链接 192
9.1 了解网页超链接 192
9.1.1 超链接的定义 192
9.1.2 超链接的对象 193
9.1.3 超链接的路径 194
9.1.4 合理安排超链接 196
9.2 超链接的属性控制 197
9.2.1 a：link 197
9.2.2 a：active 198
9.2.3 a：hover 198
9.2.4 a：visited 199
实例：制作网页文字超链接 200
9.2.5 超链接的5种打开方式 203
9.3 超链接特效 203
9.3.1 按钮式超链接 203
实例：制作按钮式超链接 204
9.3.2 浮雕式超链接 206
9.4 使用CSS实现鼠标特效 207
9.5 超链接在网页中的特殊应用 208
9.5.1 使用CSS实现倾斜导航菜单 209
实例：制作网站的倾斜导航菜单 209
9.5.2 使用CSS实现动感超链接 211
9.6 专家支招 213
9.6.1 实现动感导航菜单的原理 213
9.6.2 如何识别网页中的超链接 213
9.7 总结扩展 214
9.7.1 本章小结 214
9.7.2 举一反三——使用CSS控制鼠标箭头 214
第10章 应用CSS3中的滤镜 215
10.1 CSS3新增滤镜 215
10.1.1 grayscale滤镜 215
10.1.2 sepia滤镜 217
实例：使用sepia滤镜 217
10.1.3 opacity滤镜 219
10.1.4 blur滤镜 221
10.1.5 saturate滤镜 222
实例：使用saturate滤镜 222
10.1.6 hue-rotate滤镜 224
10.1.7 invert滤镜 226
实例：使用invert滤镜 226
10.1.8 drop-shadow滤镜 228
10.1.9 brightness滤镜 229
10.1.10 contrast滤镜 231
10.2 专家支招 231
10.2.1 IE滤镜与W3C滤镜的区别 231
10.2.2 IE滤镜包括哪些 231
10.3 总结扩展 232
10.3.1 本章小结 232
10.3.2 举一反三——调整图像的对比度 232
第11章 CSS3新增属性 234
11.1 CSS3中新增的文字属性 234
11.1.1 文字阴影text-shadow 234
11.1.2 文字溢出处理text-overflow 235
11.1.3 控制文本换行word-wrap 237
实例：控制文本换行 237
11.2 CSS 3中新增的背景属性 239
11.2.1 背景图像大小background-size 239
实例：控制背景图像大小 239
11.2.2 背景位置定位background-origin 241
11.2.3 背景图像裁剪区域background-clip 242
11.3 CSS3中新增的边框属性 244
11.3.1 图像边框border-image 244
11.3.2 圆角边框border-radius 245
11.3.3 多重边框颜色border-colors 246
实例：为图像添加多种色彩边框 246
11.4 CSS3中新增的多列布局属性 248
11.4.1 列宽度 248
11.4.2 新增多列设置属性 249
实例：多列属性的设置 250
11.5 CSS3中有关用户界面的新增属性 252
11.5.1 box-sizing 252
11.5.2 区域缩放调节resize 253
11.5.3 轮廓外边框outline 254
11.5.4 导航序列号nav-index 254
11.6 CSS3中其他模块新增属性 255
11.6.1 ＠media 255
11.6.2 加载服务器端字体＠font-face 256
11.6.3 阅读器speech 257
11.7 专家支招 258
11.7.1 除了Chrome浏览器外，还有哪些浏览器支持column属性 258
11.7.2 目前常用的浏览器都是以什么为内核引擎 258
11.8 总结扩展 258
11.8.1 本章小结 258
11.8.2 举一反三——为图片添加轮廓 259
第12章 jQuery在网页中的应用 260
12.1 认识JavaScript 260
12.1.1 了解JavaScript 260
12.1.2 JavaScript的特点 261
12.1.3 CSS样式与JavaScfipt 261
12.2 JavaScript与jQuery 262
12.2.1 关于jQuery 262
12.2.2 jQuery的安装 262
12.2.3 jQuery语法 263
12.2.4 jQuery选择器 263
12.2.5 jQuery事件 265
12.3 在Dreamweaver CC中使用jQuiery 266
实例：制作一个简单的检索页面 266
12.4 jQuery效果 267
12.4.1 使用jQuery实现网页全屏大图切换效果 268
实例：全屏大图切换效果 268
12.4.2 使用jQuery实现图像横向滚动效果 271
实例：图像横向滚动效果 271
12.5 专家支招 278
12.5.1 在Dreamweaver中为网页元素添加jQuery效果 278
12.5.2 Dreamweaver中内置jQuery能够实现的效果 278
12.6 总结扩展 279
12.6.1 本章小结 279
12.6.2 举一反三——使用jQuery制作选项卡 279
第13章 jQuery Mobile与jQuery UI的应用 280
13.1 认识jQuery Mobile 280
13.1.1 jQuery Mobile的优点 280
13.1.2 jQuery Mobile的操作流程 281
13.2 使用Dreamweaver创建jQuery Mobile页面 281
实例：设计制作手机网站页面 282
13.3 iQuery Mobile事件 288
13.3.1 触摸事件 288
13.3.2 滚动事件 289
13.3.3 方向事件 289
13.3.4 页面事件 290
13.4 jQuery UI 291
13.4.1 jQuery UI的构成 291
13.4.2 jQuery UI的特性 291
13.4.3 jQuery UI的下载 292
13.4.4 jQuery UI的使用 292
实例：制作折叠式作品展示栏目 294
13.5 专家支招 298
13.5.1 在Dreamweaver CC中可以插入的jQueryMobile对象 298
13.5.2 jQuery与jQuery UI的区别 298
13.6 总结扩展 298
13.6.1 本章小结 298
13.6.2 举一反三——制作选项卡式新闻列表 299
第14章 Div+CSS布局综合案例 300
14.1 综合实例——制作音乐类网站 300
实例：音乐类网站——顶部 300
实例：音乐类网站——中部 308
实例：音乐类网站——主体 314
实例：音乐类网站——底部 320
14.2 专家支招 323
14.2.1 网页中文本字号的使用规范 323
14.2.2 iframe标签的作用 324
14.3 本章小结 324