《精通HTML 5+CSS 3——****网页设计与布局密码》深入浅出,结合实际案例系统地讲解了使用HTML 5和CSS 3进行网页设计与布局的知识和技巧。全书分为4个部分。第1篇【HTML 5篇】主要介绍了HTML 5的基础知识和基本结构,以及如何在网页上设计文本、色彩、图片、列表、段落、超链接、多媒体、表单和框架等,还对HTML 5的本地存储和离线Web应用进行了讲解。第2篇【CSS 3篇】主要介绍了CSS 3的基础知识和网页样式代码的生成方法,以及如何通过CSS 3设置文本样式、网页图像**、背景颜色与背景图像等,还对CSS的**特性、CSS定位与DIV布局核心技术、盒子的浮动与定位等进行了讲解。第3篇【综合应用篇】主要介绍了如何综合应用HTML 5和CSS 3设计制作影音视频网站、企业门户网站、电子商务网站和休闲旅游网站的页面。第4篇【实战篇】选取了热门的新闻网站和微博/博客网站进行分析,并以此为基础指导读者完成自己的网站设计。
《精通HTML 5+CSS 3——****网页设计与布局密码》附赠一张DVD多媒体教学光盘,包含与图书内容同步的教学录像,以及本书所有案例的源代码和

目 录



第1篇 HTML 5篇



第1章 HTML 5基础 2

1.1 HTML 5简介 3

1.1.1 HTML发展史 3

1.1.2 浏览器兼容性分析 3

1.1.3 效率和用户优先特性 3

1.1.4 化繁为简的设计原则 4

1.1.5 通用访问方式 4

1.2 HTML 5的新变化 5

1.2.1 语法的变化 6

1.2.2 新增的元素和废除的元素 6

1.2.3 新增的属性和废除的属性 10

1.2.4 全局属性的变化 14

1.3 HTML 5文件的编写方法 17

1.3.1 使用记事本 18

1.3.2 使用Dreamweaver 19

1.3.3 编写**个HTML 5网页文件 20

高手私房菜 22

技巧:使用记事本编辑HTML文件后在浏览器中预览 22



第2章 HTML 5的基本结构 23

2.1 HTML 5的适用范围 24

2.2 使用浏览器查看HTML 5文件 24

2.2.1 浏览器对HTML 5的兼容 24

2.2.2 查看页面效果 24

2.2.3 查看网页源文件 25

2.3 一个简单的HTML 5页面 25

2.3.1 搭建浏览器环境 25

2.3.2 检测浏览器是否支持HTML标记 26

2.3.3 用HTML标准结构编写“hello,world”页面 27

2.4 HTML基本结构 28

2.4.1 文档类型说明 28

2.4.2 HTML标记 28

2.4.3 头标记head 29

2.4.4 标题标记title 29

2.4.5 元信息标记meta 30

2.4.6 网页的主体标记 31

2.4.7 页面注释标记 32

2.5 制作符合W3C标准的HTML 5网页 33

高手私房菜 34

技巧1:网页中常用的语言编码方式 34

技巧2:网页中的基本标签是否必须成对出现 34



第3章 网页文本设计 35

3.1 添加网页文本 36

3.1.1 普通文本 36

3.1.2 特殊文字符号 36

3.2 网页文本排版 37

3.2.1 换行标记
与段落标记 37

3.2.2 标题标记~ 39

3.2.3 文本水平居中标记 40

3.3 成才教育网文本设计 41

高手私房菜 42

技巧:区别换行标记和段落标记 42



第4章 网页色彩和图片设计 43

4.1 网页色彩与图片 44

4.2 网页图像的应用 44

4.2.1 网页图片格式 44

4.2.2 在网页中插入图像标记 45

4.2.3 设置图像源文件 46

4.2.4 设置图像在网页中的宽度和高度 47

4.2.5 设置图像的提示文字 48

4.3 制作茂森房地产广告网页 49

高手私房菜 50

技巧:alt属性的值 50



第5章 网页列表和段落设计 51

5.1 网页文字列表设计 52

5.1.1 建立无序列表 52

5.1.2 建立有序列表 53

5.2 设置网页段落格式 54

5.2.1 单词间隔 55

5.2.2 字符间隔 56

5.2.3 文字修饰 57

5.2.4 垂直对齐方式 58

5.2.5 水平对齐方式 59

5.2.6 文本缩进 61

5.2.7 文本行高 62

5.2.8 处理空白 63

5.3 制作图文混排型网页 64

高手私房菜 66

技巧:文字和图片的导航速度谁*快 66



第6章 网页超链接设计 67

6.1 链接和路径 68

6.1.1 超链接的概念 68

6.1.2 链接路径URL 69

6.1.3 HTTP路径 69

6.1.4 FTP路径 70

6.1.5 电子邮件路径 71

6.2 链接元素 72

6.2.1 指定路径属性 72

6.2.2 显示链接目标属性 73

6.2.3 激活顺序属性 75

6.2.4 链接的热键属性 76

6.3 图像链接 77

6.3.1 创建链接区域元素 77

6.3.2 链接区域的名称属性 77

6.3.3 定义鼠标敏感区元素 77

6.3.4 链接的路径属性 79

6.3.5 链接的文本说明属性 80

6.3.6 使用图片中的链接 81

高手私房菜 82

技巧:区分URI、URL和URN 82



第7章 网页多媒体设计 83

7.1 HTML5中的 Audio和Video 84

7.1.1 视频容器 84

7.1.2 音频解码器和视频解码器 84

7.1.3 浏览器对Audio和Video标签的支持情况 85

7.2 使用Audio和Video API 85

7.2.1 理解媒体元素 85

7.2.2 使用audio元素 86

7.2.3 使用video元素 87

7.3 设置网页多媒体属性 88

7.4 调用网页多媒体的方法 90

7.5 视频播放页面 91

高手私房菜 94

技巧:在Firefox 8.0中正常播放HTML 5支持的视频格式文件 94



第8章 网页表单设计 95

8.1 表单简介 96

8.1.1 表单的用途 96

8.1.2 表单的属性设置 97

8.2 表单基本元素的应用 98

8.2.1 文字字段 98

8.2.2 密码框 99

8.2.3 单选按钮 100

8.2.4 复选框 101

8.2.5 列表框 102

8.2.6 列表项 103

8.2.7 普通按钮 104

8.2.8 提交按钮 105

8.2.9 图像域 106

8.3 表单**元素的使用 107

8.3.1 URL类型元素 107

8.3.2 Email类型元素 108

8.3.3 date类型元素 109

8.3.4 time类型元素 110

8.3.5 datetime类型元素 110

8.3.6 datetime-local类型元素 111

8.3.7 month类型元素 112

8.3.8 week类型元素 113

8.3.9 number类型元素 114

8.3.10 range类型元素 114

8.3.11 search类型元素 115

8.3.12 tel类型元素 116

8.3.13 color类型元素 117

高手私房菜 118

技巧1:在表单中实现文件上传框 118

技巧2:解决单选按钮可以同时选中多个问题 118



第9章 网页框架设计 119

9.1 框架结构概述 120

9.2 创建框架 121

9.2.1 创建预定义的框架集 122

9.2.2 向框架中添加内容 123

9.2.3 创建嵌套框架集 125

9.3 保存框架和框架集文件 126

9.3.1 保存所有的框架集文件 126

9.3.2 保存框架集文件 127

9.3.3 保存框架文件 127

9.4 选择框架和框架集 127

9.4.1 在【框架】面板中选择框架和框架集 128

9.4.2 在文档窗口中选择框架或框架集 129

9.5 设置框架和框架集属性 130

9.5.1 设置框架属性 130

9.5.2 设置框架集属性 131

9.5.3 改变框架的背景颜色 131

9.6 使用标签对创建嵌入式框架 133

高手私房菜 134

技巧1:框架长度或者宽度的设置 134

技巧2:设置框架边框的注意事项 134



第10章 HTML 5本地存储 135

10.1 Web Storage存储 136

10.1.1 sessionStorage对象 136

10.1.2 localStorage对象 137

10.2 操作localStorage 138

10.2.1 清空localStorage数据 138

10.2.2 遍历localStorage数据 139

10.2.3 使用JSON对象存取数据 139

10.2.4 管理localStorage数据 142

10.3 WebSQL数据库应用 142

10.3.1 打开与创建数据库 143

10.3.2 执行事务 143

10.3.3 插入数据 143

10.3.4 数据管理 144

高手私房菜 144

技巧:Web SQL的使用 144



第11章 构建HTML 5离线Web应用—缓存技术 145

11.1 HTML 5离线Web应用概述 146

11.2 使用HTML 5离线Web应用API 146

11.2.1 检查浏览器的支持情况 146

11.2.2 搭建简单的离线应用程序 147

11.2.3 支持离线行为 147

11.2.4 Manifest文件 148

11.2.5 ApplicationCache API 149

11.3 使用HTML 5离线Web应用构建应用 150

11.3.1 创建记录资源的manifest文件 150

11.3.2 创建构成界面的HTML和CSS 151

11.3.3 创建离线的JavaScript 152

11.3.4 检查applicationCache的支持情况 154

11.3.5 为Update按钮添加处理函数 154

11.3.6 添加Geolocation的支持情况 155

11.3.7 添加Storage功能代码 155

11.3.8 添加离线事件处理程序 156

高手私房菜 156

技巧1:不同的浏览器可以读取同一个Web中存储的数据吗 156

技巧2:离线存储站点时是否需要浏览者同意 156



第2篇 CSS 3篇



第12章 CSS 3样式核心基础 158

12.1 创建使用CSS的网页 159

12.2 CSS语法书写标准 161

12.2.1 规则块 161

12.2.2 @规则 161

12.2.3 规则集 162

12.2.4 注释 164

12.2.5 字符和大小写 164

12.3 关键词和字符串 165

12.3.1 客户端浏览器的特定扩展 165

12.3.2 字符串 165

12.4 CSS标准 166

12.4.1 CSS样式标准 166

12.4.2 传统HTML的缺点分析 167

12.4.3 CSS样式的引用 169

12.4.4 编辑CSS样式 171

12.4.5 浏览器与CSS的兼容性分析 171

12.5 使用CSS选择器 172

12.5.1 标记选择器 172

12.5.2 类别选择器 173

12.5.3 ID选择器 176

12.6 在HTML中调用CSS的方法 177

12.6.1 直接定义CSS样式 177

12.6.2 内嵌式CSS样式 178

12.6.3 链接式CSS样式 179

12.6.4 导入外部CSS样式 180

12.6.5 CSS样式优先级 181

高手私房菜 182

技巧1:使用全局选择器“*” 182

技巧2:简写CSS字体属性 182



第13章 网页样式代码的生成方法 183

13.1 从零开始手工编写 184

13.1.1 编写标题样式代码 185

13.1.2 编写图片控制代码 186

13.1.3 设置网页正文 187

13.1.4 设置整体页面样式 187

13.1.5 定义段落样式 188

13.2 完整网页代码分析 188

13.2.1 获取网页代码 189

13.2.2 查看网页样式代码 190

13.2.3 分析网页样式代码结构 191

13.2.4 读懂网页样式代码 191

13.2.5 读懂CSS注释 191

13.3 使用Dreamweaver辅助工具创建页面 191

13.3.1 创建页面 191

13.3.2 分析页面结构 192

13.3.3 与手工编写的区别 192

13.4 在Dreamweaver中新建CSS样式 193

13.5 在Dreamweaver中编辑CSS样式 194

13.6 为图像创建CSS样式 195

高手私房菜 196

技巧1:Dreamweaver CS6中快捷键的使用 196

技巧2:超链接的一些特殊效果 196



第14章 用CSS 3设置文本样式 197

14.1 样式的参数单位 198

14.2 设置网页文本的基本样式 200

14.2.1 网页文本颜色的定义 200

14.2.2 定义整体页面文本样式 201

14.2.3 设置具体文字的字体 203

14.2.4 设置文字的倾斜效果 203

14.2.5 设置文字的粗细效果 205

14.3 设置网页文本的行高与间距 206

14.3.1 设置网页文字间距 206

14.3.2 设置网页文字行高 207

14.3.3 设置网页文字段落间距 208

14.4 设置网页文本的对齐方式 209

14.4.1 文本的水平对齐方式 209

14.4.2 文本的垂直对齐方式 211

14.5 设置文字与背景颜色 212

14.5.1 使用样式参数进行设置 212

14.5.2 更简洁的解决方案 214

14.6 设置其他网页文本样式 215

14.6.1 英文字母大小写的自动转换 216

14.6.2 控制文字的大小 217

14.6.3 网页文字的装饰效果 218

14.6.4 设置段落首行缩进效果 219

高手私房菜 220

技巧:通过滤镜属性设置文字效果 220



第15章 用CSS 3设置网页图像** 221

15.1 设置图像边框 222

15.1.1 图像边框基本属性 222

15.1.2 为不同的边框分别设置样式 223

15.2 图像缩放功能的实现 224

15.3 图文混排 225

15.3.1 文字环绕 226

15.3.2 设置图像与文字的间距 227

15.4 制作长泰养生网页 228

15.5 设置图像与文字的对齐方式 231

15.5.1 横向对齐方式 231

15.5.2 纵向对齐方式 233

高手私房菜 234

技巧1:解决在浏览器中图像无法显示的问题 234

技巧2:解决图像超出撑破DIV的问题 234



第16章 用CSS 3设置网页背景颜色与背景图像 235

16.1 设置背景颜色 236

16.2 设置背景图像 237

16.3 设置背景图像平铺 238

16.4 设置背景图像位置 239

16.5 设置背景图像位置固定 241

16.6 用图像替换标题的文本 243

16.7 使用滑动门技术的标题 244

高手私房菜 245

技巧:为网页内容添加水印 245



第17章 CSS 3的**特性 247

17.1 复合选择器 248

17.1.1 交集选择器 248

17.1.2 并集选择器 249

17.1.3 后代选择器 250

17.2 CSS的继承特性 251

17.2.1 继承关系 252

17.2.2 CSS继承的运用 252

17.3 CSS的层叠特性 253

高手私房菜 256

技巧:CSS选择器的特殊性 256



第18章 CSS定位与DIV布局核心技术 257

18.1 块级元素和行内级元素 258

18.1.1 块级元素和行内级元素的不同 258

18.1.2 DIV元素和span元素 260

18.2 使用DIV标记与span标记布局网页 261

18.3 盒子模型 262

18.3.1 盒子模型的概念 262

18.3.2 网页border区域定义 263

18.3.3 网页padding区域定义 265

18.3.4 网页margin区域定义 266

18.4 box类型和display属性 268

18.4.1 HTML元素默认的box类型 268

18.4.2 视点和Box容器 269

18.4.3 块级元素和块级Box 269

18.4.4 行内级元素和行内级Box 270

18.4.5 插入式Box 271

18.5 可视性 271

18.6 综合实例 273

18.6.1 图文层叠效果 273

18.6.2 歌曲编辑列表 275

18.6.3 文字阴影效果 277

高手私房菜 278

技巧1:visibility和display属性的区别 278

技巧2:CSS border的默认值 278



第19章 CSS+DIV盒子的浮动与定位 279

19.1 定义DIV 280

19.1.1 什么是DIV 280

19.1.2 插入DIV 280

19.1.3 DIV的嵌套和固定格式 281

19.2 CSS布局定位 282

19.2.1 浮动定位 282

19.2.2 position定位 283

19.3 盒子的浮动 285

19.4 盒子的定位 287

19.4.1 静态定位 288

19.4.2 相对定位 288

19.4.3 **定位 288

19.4.4 固定定位 290

19.5 可视化盒子模型 290

19.5.1 盒子模型 290

19.5.2 视觉可视化模型 290

19.5.3 空白边叠加 290

19.6 固定宽度网页布局 291

19.6.1 单列布局模式 291

19.6.2 1-2-1型布局模式 296

19.6.3 1-3-1型布局模式 301

19.7 缩放网页 302

19.7.1 1-2-1型布局模式网页的缩放 302

19.7.2 1-3-1型布局模式网页的缩放 303

19.7.3 变宽布局类型总结 305

19.7.4 分列布局背景色 305

高手私房菜 306

技巧1:id和class属性名称使用限制 306

技巧2:框架中百分比的关系 306



第3篇 综合应用篇



第20章 用HTML 5+CSS 3设计与布局影音视频网站 308

20.1 影音网站主页规划 309

20.1.1 影音网站主页基本规划 309

20.1.2 网页整体架构布局规划 309

20.2 用DIV+CSS布局 309

20.2.1 布局页面头部结构 309

20.2.2 布局页面中间部分 310

20.2.3 布局页面底部 310

20.3 制作网站的步骤 311

20.3.1 使用HTML 5设计网站 311

20.3.2 定义网站CSS样式 312

20.3.3 设计顶部模块 317

20.3.4 设计网站主体模块 319

20.3.5 设计网站页面的底部 320

20.4 微调网站细节 321

20.4.1 部分内容调整 321

20.4.2 模块调整 321

20.4.3 调整后预览测试 325

高手私房菜 326

技巧:设置DIV垂直居中 326



第21章 用HTML 5+CSS 3设计与布局企业门户网站 327

21.1 企业门户网站主页规划 328

21.1.1 企业主页的配色 328

21.1.2 架构企业主页布局 328

21.1.3 用DIV布局页面框图 329

21.2 制作网站的步骤 329

21.2.1 使用HTML 5设计网站 329

22.2.2 定义网站CSS样式 330

21.2.3 设计网页顶部模块 332

21.2.4 设计网页中间主体模块 333

21.2.5 设计网页底部模块 335

21.3 微调网站细节 335

21.3.1 部分内容调整 335

21.3.2 模块调整 336

21.3.3 调整后预览测试 337

高手私房菜 338

技巧1:在IE浏览器中解决双边距问题 338

技巧2:定义元素外边距的注意事项 338



第22章 用HTML 5+CSS 3设计与布局电子商务网站 339

22.1 电子商务网站主页规划 340

22.1.1 分析主页需求 341

22.1.2 确定内容模块 341

22.1.3 画出效果图 342

22.2 制作网站的步骤 342

22.2.1 使用HTML 5设计网站 342

22.2.2 定义网站CSS样式 342

22.2.3 设计网页头部 343

22.2.4 设计分类及区域选择模块 345

22.2.5 设计新品展示模块 347

22.2.6 设计侧边栏模块 348

22.2.7 设计热门城市索引模块 353

22.2.8 设计底部模块 354

22.3 微调网站细节 355

22.3.1 部分内容调整 355

22.3.2 模块调整 356

22.3.3 调整后预览测试 356

高手私房菜 356

技巧1:使三层并列网页在IE和Firefox中显示效果相同 356

技巧2:在IE中,解决图片和下方父元素产生的间隙的问题 356



第23章 用HTML 5+CSS 3设计与布局休闲旅游网站 357

23.1 休闲旅游网站主页规划 358

23.1.1 旅游网站主页基本规划 358

23.1.2 网页整体架构布局规划 358

23.1.3 用DIV+CSS布局网页框架 358

23.2 制作网站的步骤 358

23.2.1 使用HTML 5设计网站 358

23.2.2 定义网站CSS样式 359

23.2.3 设计页面头部模块 360

23.2.4 设计页面中间部分模块 362

23.2.5 设计页面底部模块 363

23.2.6 微调网站细节并预览 363

高手私房菜 364

技巧1:定义块的高度时,如果高度小于10px,则显示10px,怎么解决 364

技巧2:在浏览器中,列表选项li为浮动时,列表后面的元素不能换行,怎么解决 364



第4篇 实战篇



第24章 新闻类网站布局分析 366

24.1 凤凰网整体布局分析 367

24.1.1 整体布局分析 367

24.1.2 版面架构分析 367

24.1.3 首页分析 368

24.2 新华网整体布局分析 369

24.2.1 整体布局分析 369

24.2.2 版面架构分析 370

24.2.3 网站模块组成 370

24.3 制作自己的新闻网站——龙马新闻网 371

24.3.1 需求分析 371

24.3.2 结构与布局 371

24.3.3 网站制作步骤 371

高手私房菜 378

技巧1:表单输入单元的覆盖删除效果 378

技巧2:表单输入单元的单击删除效果 378



第25章 微博/博客类网站布局分析 379

25.1 新浪微博/博客整体布局 380

25.1.1 布局结构分析 380

25.1.2 版面架构分析 380

25.1.3 模块组成 381

25.2 腾讯微博/博客网站 382

25.2.1 布局结构分析 382

25.2.2 版面架构分析 382

25.2.3 模块组成 383

25.3 制作自己的网站——龙马微博/博客网 384

25.3.1 需求分析 384

25.3.2 结构与布局 385

25.3.3 网站制作步骤 385

高手私房菜 394

技巧1:善用CSS缩写可以减少页面文件大小 394

技巧2:颜色代码的缩写 394

◆世界500强设计主管+**网页设计师联手打造,系统介绍HTML 5+CSS 3的基础知识和**技能! ◆特聘一线名师授课,深入讲解104节关键知识点!
◆精心甄选39个实用**技法、182个真实范例,急速提升操作技能!
◆实用源代码:254段源代码,14个完整系统代码,移植改编,拿来就用!

**赠送超值大礼
◆13小时与图书内容同步的教学录像;◆30小时相关内容视频学习资料:◇22小时Dreamweaver教学录像、◇8小时Photoshop教学录像;◆7本扩展学习电子书:◇Dreamweaver案例电子书、◇Photoshop案例电子书、◇精彩网站配色方案赏析电子书、◇精选JavaScript实例电子书、◇网页设计、布局与美化疑难解答电子书、◇网页制作常见问题及解答电子书、◇网站建设技巧电子书;◆6个**应用速查表:◇CSS属性速查表、◇Dreamweaver常用快捷键速查表、◇HTML标签速查表、◇Photoshop常用快捷键速查表、◇网页配色方案速查表、◇颜色英文名称速查表;◆JavaScript实用案例集锦;◆大型ASP网站源码及运行说明书。