HTML5+CSS3网页设计 实战从入门到精通 视频教学版PDF电子书下载

第1篇 HTML5网页设计 4

第1章 HTML5快速入门 4

1.1 HTML5概述 4

1.1.1 HTML5简介 4

1.1.2 HTML5文件的基本结构 5

1.2 HTML5文件的编写方法 5

1.2.1 案例1——手工编写HTML5 5

1.2.2 案例2——使用HTML编辑器编写HTML 6

1.3 使用浏览器查看HTML5文件 10

1.3.1 各大浏览器与HTML5的兼容 10

1.3.2 案例3——查看页面效果 11

1.3.3 案例4——查看源文件 11

1.4 高手甜点 12

1.5 跟我练练手 12

第2章 HTML5网页文档结构 14

2.1 Web标准 14

2.1.1 Web标准概述 14

2.1.2 Web标准规定的内容 15

2.2 HTML5文档的基本结构 16

2.2.1 HTML5结构 16

2.2.2 文档类型说明 17

2.2.3 HTML5标记＜html＞ 17

2.2.4 头标记＜head＞ 17

2.2.5 网页的主体标记＜body＞ 20

2.2.6 页面注释标记＜！--＞ 21

2.3 综合案例——符合W3C标准的HTML5网页 22

2.4 高手甜点 23

2.5 跟我练练手 24

第3章 HTML5网页中的文本和图像 26

3.1 在网页中添加文本 26

3.1.1 案例1——普通文本的添加 26

3.1.2 案例2——特殊字符文本的添加 26

3.1.3 案例3——添加特殊文本 28

3.2 文本排版 30

3.2.1 案例4——换行标记＜br＞ 30

3.2.2 案例5——段落标记＜p＞ 31

3.2.3 案例6——标题标记＜h1＞～＜h6＞ 32

3.3 文字列表 33

3.3.1 案例7——建立无序列表＜ul＞ 33

3.3.2 案例8——建立有序列表＜ol＞ 34

3.3.3 案例9——建立不同类型的无序列表 35

3.3.4 案例10——建立不同类型的有序列表 36

3.3.5 案例11——建立嵌套列表 37

3.3.6 案例12——自定义列表＜dl＞ 38

3.4 网页中的图像 39

3.4.1 案例13——插入图像＜img＞ 39

3.4.2 案例14——设置图像的宽度和高度width、height 41

3.4.3 案例15——设置图片的提示文字alt 42

3.4.4 案例16——将图片设置为网页背景background 43

3.4.5 案例17——排列图像align 44

3.5 综合案例1——图文并茂房屋装饰装修网页 44

3.6 综合案例2——在线购物网站产品展示效果 46

3.7 高手甜点 47

3.8 跟我练练手 48

第4章 用HTML5建立超链接 50

4.1 网页超链接概述 50

4.1.1 超链接的概念 50

4.1.2 超链接中的URL 50

4.1.3 超链接的URL类型 51

4.2 建立网页超链接href 51

4.2.1 案例1——创建超文本链接 51

4.2.2 案例2——创建图片链接 53

4.2.3 案例3——创建下载链接 54

4.2.4 案例4——使用相对路径和绝对路径 55

4.2.5 案例5——设置以新窗口显示超链接页面 56

4.2.6 案例6——设置电子邮件链接 58

4.3 案例7——浮动框架iframe 59

4.4 案例8——精确定位热点区域map、area 61

4.5 综合案例——使用锚链接制作电子书阅读网页 64

4.6 高手甜点 67

4.7 跟我练练手 68

第5章 用HTML5创建表格和表单 70

5.1 表格的基本结构 70

5.2 使用HTML5创建表格 72

5.2.1 案例1——创建普通表格＜table＞＜tr＞＜td＞ 72

5.2.2 案例2——创建一个带有标题的表格＜caption＞ 73

5.2.3 案例3——定义表格的边框类型border 74

5.2.4 案例4——定义表格的表头＜th＞ 75

5.2.5 案例5——设置表格背景bgcolor、background 76

5.2.6 案例6——设置单元格背景bgcolor 78

5.2.7 案例7——合并单元格colspan、rowspan 79

5.2.8 案例8——排列单元格中的内容align 83

5.2.9 案例9——设置单元格的行高与列宽cellpadding 84

5.3 案例10——创建完整的表格 85

5.4 案例11——认识表单＜form＞ 87

5.5 表单基本元素的使用 88

5.5.1 案例12——单行文本输入框text 88

5.5.2 案例13——多行文本输入框textarea 89

5.5.3 案例14——密码域password 89

5.5.4 案例15——单选按钮radio 90

5.5.5 案例16——复选框checkbox 91

5.5.6 案例17——下拉列表框select 92

5.5.7 案例18——普通按钮button 93

5.5.8 案例19——提交按钮submit 94

5.5.9 案例20——重置按钮reset 95

5.6 表单高级元素的使用 96

5.6.1 案例21——url属性的应用 96

5.6.2 案例22——email属性的应用 97

5.6.3 案例23——date和time的应用 98

5.6.4 案例24——number属性的应用 99

5.6.5 案例25——range属性的应用 100

5.6.6 案例26——required属性的应用 101

5.7 综合案例1——创建用户反馈单 102

5.8 综合案例2——制作商品报价单 103

5.9 高手甜点 105

5.10 跟我练练手 106

第6章 HTML5中的多媒体 108

6.1 网页音频标记audio 108

6.1.1 audio标记概述 108

6.1.2 audio标记的属性 108

6.1.3 音频解码器 109

6.1.4 audio标记浏览器的支持情况 109

6.2 网页视频标记video 109

6.2.1 video标记概述 109

6.2.2 video标记的属性 110

6.2.3 视频解码器 110

6.2.4 video标记浏览器的支持情况 110

6.3 添加网页音频文件 111

6.3.1 案例1——设置背景音乐 111

6.3.2 案例2——设置音乐循环播放loop 112

6.4 添加网页视频文件 112

6.4.1 案例3——为网页添加视频文件video 112

6.4.2 案例4——设置自动运行autoplay 113

6.4.3 案例5——设置视频文件的循环播放loop 114

6.4.4 案例6——设置视频窗口的高度与宽度height、width 115

6.5 添加网页滚动文字 115

6.5.1 案例7——滚动文字标记marquee 116

6.5.2 案例8——滚动方向属性direction 116

6.5.3 案例9——滚动方式属性behavior 117

6.5.4 案例10——滚动速度属性scrollamount 118

6.5.5 案例11——滚动延迟属性scrolldelay 119

6.5.6 案例12——滚动循环属性loop 120

6.5.7 案例13——滚动范围属性height、width 121

6.5.8 案例14——滚动背景颜色属性bgcolor 122

6.5.9 案例15——滚动空间属性hspace、vspace 123

6.6 高手甜点 124

6.7 跟我练练手 124

第7章 使用HTML5绘制图形 126

7.1 什么是canvas 126

7.2 绘制基本形状 127

7.2.1 案例1——绘制矩形 127

7.2.2 案例2——绘制圆形 128

7.2.3 案例3——使用moveTo与IineTo绘制直线 129

7.2.4 案例4——使用bezierCurveTo绘制贝济埃曲线 131

7.3 绘制渐变图形 133

7.3.1 案例5——绘制线性渐变 133

7.3.2 案例6——绘制径向渐变 135

7.4 绘制变形图形 136

7.4.1 案例7——变换原点坐标 136

7.4.2 案例8——图形缩放 137

7.4.3 案例9——旋转图形 138

7.5 绘制其他样式的图形 139

7.5.1 案例10——图形组合 140

7.5.2 案例11——绘制带阴影的图形 142

7.5.3 案例12——绘制文字 143

7.6 使用图像 145

7.6.1 案例13——绘制图像 145

7.6.2 案例14——图像平铺 146

7.6.3 案例15——图像裁剪 148

7.6.4 案例16——像素处理 149

7.7 图形的保存与恢复 151

7.7.1 案例17——保存与恢复状态 152

7.7.2 案例18——保存文件 153

7.8 综合案例1——绘制火柴棒人物 154

7.9 综合案例2——绘制商标 157

7.10 高手甜点 159

7.11 跟我练练手 160

第8章 获取地理位置 162

8.1 Geolocation API获取地理位置 162

8.1.1 地理定位的原理 162

8.1.2 获取定位信息的方法 162

8.1.3 常用地理定位方法 162

8.1.4 案例1——判断浏览器是否支持HTML5获取地理位置信息 163

8.1.5 案例2——指定纬度和经度坐标 164

8.1.6 案例3——获取当前位置的经度与纬度 165

8.2 目前浏览器对地理定位的支持情况 167

8.3 综合案例——在网页中调用Google地图 168

8.4 高手甜点 171

8.5 跟我练练手 172

第9章 Web通信新技术 174

9.1 跨文档消息传输 174

9.1.1 跨文档消息传输的基本知识 174

9.1.2 案例1——跨文档通信应用测试 174

9.2 Web Sockets API 177

9.2.1 WebSocket API的概念 177

9.2.2 Web Sockets通信基础 177

9.2.3 案例2——服务器端使用Web Sockets API 179

9.2.4 案例3——客户端使用Web Sockets API 183

9.3 综合案例——编写简单的Web Socket服务器 183

9.4 高手甜点 188

9.5 跟我练练手 188

第10章 构建离线的Web 190

10.1 HTML5离线Web应用概述 190

10.2 使用HTML5离线Web应用API 190

10.2.1 案例1——检查浏览器的支持情况 190

10.2.2 案例2——搭建简单的离线应用程序 191

10.2.3 案例3——支持离线行为 191

10.2.4 案例4——manifest文件 192

10.2.5 案例5——Application Cache API 193

10.3 实例2——使用HTML5离线Web应用构建应用 195

10.3.1 案例6——创建记录资源的manifest文件 195

10.3.2 案例7——创建构成界面的HTML和CSS 195

10.3.3 案例8——创建离线的JavaScript 196

10.3.4 案例9——检查applicationCache的支持情况 198

10.3.5 案例10——为Update按钮添加处理函数 198

10.3.6 案例11——添加Storage功能代码 199

10.3.7 案例12——添加离线事件处理程序 199

10.4 高手甜点 200

10.5 跟我练练手 201

第2篇 CSS3美化网页 206

第11章 CSS3概述与基本 206

11.1 CSS3概述 206

11.1.1 CSS3功能 206

11.1.2 浏览器与CSS3 206

11.1.3 CSS3基础语法 207

11.1.4 CSS3常用单位 207

11.2 编辑和浏览CSS3 212

11.2.1 案例1——手工编写CSS3 212

11.2.2 案例2——Dreamweaver编写CSS 213

11.3 在HTML5中使用CSS3的方法 215

11.3.1 案例3——行内样式 215

11.3.2 案例4——内嵌样式 216

11.3.3 案例5——链接样式 217

11.3.4 案例6——导入样式 219

11.3.5 案例7——优先级问题 220

11.4 CSS3的常用选择器 222

11.4.1 案例8——标签选择器 223

11.4.2 案例9——类选择器 223

11.4.3 案例10——ID选择器 224

11.4.4 案例11——全局选择器 225

11.4.5 案例12——组合选择器 226

11.4.6 案例13——继承选择器 227

11.4.7 案例14——伪类选择器 228

11.5 选择器声明 230

11.5.1 案例15——集体声明 230

11.5.2 案例16——多重嵌套声明 231

11.6 综合实例1——制作炫彩网站Logo 231

11.7 综合案例2——制作学生信息统计表 234

11.8 高手甜点 236

11.9 跟我练练手 237

第12章 使用CSS3美化网页字体与段落 240

12.1 美化网页文字 240

12.1.1 案例1——设置文字的字体 240

12.1.2 案例2——设置文字的字号 241

12.1.3 案例3——设置字体风格 242

12.1.4 案例4——设置加粗字体 243

12.1.5 案例5——将小写字母转换为大写字母 244

12.1.6 案例6——设置字体的复合属性 245

12.1.7 案例7——设置字体颜色 246

12.2 设置文本的高级样式 247

12.2.1 案例8——设置文本阴影效果 248

12.2.2 案例9——设置文本溢出效果 249

12.2.3 案例10——设置文本的控制换行 250

12.2.4 案例11——保持字体尺寸不变 251

12.3 美化网页中的段落 252

12.3.1 案例12——设置单词之间的间隔 252

12.3.2 案例13——设置字符之间的间隔 253

12.3.3 案例14——设置文字的修饰效果 254

12.3.4 案例15——设置垂直对齐方式 255

12.3.5 案例16——转换文本的大小写 257

12.3.6 案例17——设置文本的水平对齐方式 258

12.3.7 案例18——设置文本的缩进效果 260

12.3.8 案例19——设置文本的行高 261

12.3.9 案例20——文本的空白处理 262

12.3.10 案例21——文本的反排 263

12.4 综合案例1——设置网页标题 264

12.5 综合案例2——制作新闻页面 266

12.6 高手甜点 267

12.7 跟我练练手 268

第13章 使用CSS3美化网页图片 270

13.1 图片缩放 270

13.1.1 案例1——通过描述标记width和height缩放图片 270

13.1.2 案例2——使用CSS3中的max-width和max-height缩放图片 270

13.1.3 案例3——使用CSS3中的width和height缩放图片 272

13.2 设置图片的对齐方式 272

13.2.1 案例4——设置图片横向对齐 273

13.2.2 案例5——设置图片纵向对齐 273

13.3 图文混排 275

13.3.1 案例6——设置文字环绕效果 275

13.3.2 案例7——设置图片与文字的间距 277

13.4 综合案例1——制作学校宣传单 278

13.5 综合案例2——制作简单图文混排网页 281

13.6 高手甜点 282

13.7 跟我练练手 283

第14章 使用CSS3美化网页背景与边框 286

14.1 使用CSS3美化背景 286

14.1.1 案例1——设置背景颜色background-color 286

14.1.2 案例2——设置背景图片background-image 287

14.1.3 案例3——背景图片重复background-repeat 288

14.1.4 案例4——背景图片显示background-attachment 290

14.1.5 案例5——背景图片位置background-position 291

14.1.6 案例6——背景图片大小background-size 293

14.1.7 案例7——背景显示区域background-origin 294

14.1.8 案例8——背景图像裁剪区域background-clip 296

14.1.9 案例9——背景复合属性 297

14.2 使用CSS3美化边框 299

14.2.1 案例10——设置边框样式border-style 299

14.2.2 案例11——设置边框颜色border-color 300

14.2.3 案例12——设置边框线宽border-width 302

14.2.4 案例13——设置边框复合属性 303

14.3 设置边框圆角效果border-radius 304

14.3.1 案例14——设置圆角边框 304

14.3.2 案例15——指定两个圆角半径 305

14.3.3 案例16——绘制四个不同圆角边框 306

14.3.4 案例17——绘制不同种类的边框 308

14.4 综合案例1——制作简单公司主页 310

14.5 综合案例2——制作简单生活资讯主页 314

14.6 高手甜点 316

14.7 跟我练练手 317

第15章 使用CSS3美化表格和表单样式 320

15.1 美化表格样式 320

15.1.1 案例1——设置表格边框样式border-collapse 320

15.1.2 案例2——设置表格边框宽度border-width 322

15.1.3 案例3——设置表格边框颜色background-color 323

15.2 美化表单样式 325

15.2.1 案例4——美化表单中的元素font 325

15.2.2 案例5——美化提交按钮transparent 327

15.2.3 案例6——美化下拉列表font 328

15.3 综合案例1——制作用户登录页面 330

15.4 综合案例2——制作用户注册页面 332

15.5 高手甜点 334

15.6 跟我练练手 335

第16章 使用CSS3美化超链接和鼠标 338

16.1 使用CSS3美化超链接 338

16.1.1 案例1——改变超链接基本样式 338

16.1.2 案例2——设置带有提示信息的超链接 339

16.1.3 案例3——设置超链接的背景图 340

16.1.4 案例4——设置超链接的按钮效果 341

16.2 使用CSS3美化鼠标特效 343

16.2.1 案例5——使用CSS3控制鼠标箭头 343

16.2.2 案例6——设置鼠标变幻式超链接 344

16.2.3 案例7——设置网页页面滚动条 345

16.3 综合案例1——图片版本超链接 348

16.4 综合案例2——关于鼠标特效实例 350

16.5 综合案例3——制作一个简单的导航栏 352

16.6 高手甜点 354

16.7 跟我练练手 355

第17章 使用CSS3控制网页导航菜单的样式 358

17.1 使用CSS3美化项目列表 358

17.1.1 案例1——美化无序列表 358

17.1.2 案例2——美化有序列表 360

17.1.3 案例3——美化自定义列表 362

17.1.4 案例4——制作图片列表 363

17.1.5 案例5——缩进图片列表 364

17.1.6 案例6——列表复合属性 365

17.2 使用CSS3制作网页菜单 367

17.2.1 案例7——制作无序表格的菜单 367

17.2.2 案例8——制作水平菜单 369

17.3 综合案例1——模拟soso导航栏 371

17.4 综合案例2——将段落转变成列表 375

17.5 高手甜点 377

17.6 跟我练练手 377

第3篇 网页版式布局 382

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

18.1 了解块级元素和行内级元素 382

18.1.1 案例1——块级元素和行内级元素的应用 382

18.1.2 案例2——div元素和span元素的区别 384

18.2 盒子模型 385

18.2.1 盒子模型的概念 385

18.2.2 案例3——定义网页border区域 386

18.2.3 案例4——定义网页padding区域 387

18.2.4 案例5——定义网页margin区域 388

18.3 CSS3新增弹性盒模型 392

18.3.1 案例6——定义盒子布局取向（box-orient） 392

18.3.2 案例7——定义盒子布局顺序（box-direction） 394

18.3.3 案例8——定义盒子布局位置（box-ordinal-group） 395

18.3.4 案例9——定义盒子弹性空间（box-flex） 397

18.3.5 案例10——管理盒子空间（box-pack和box-align） 399

18.3.6 案例11——盒子空间的溢出管理（box-lines） 401

18.4 综合案例1——图文排版效果 402

18.5 综合案例2——淘宝导购菜单 404

18.6 高手甜点 407

18.7 跟我练练手 408

第19章 CSS＋DIV盒子的浮动与定位 410

19.1 定义DIV 410

19.1.1 什么是DIV 410

19.1.2 案例1——创建DIV 410

19.2 盒子的定位 411

19.2.1 案例2——静态定位static 412

19.2.2 案例3——相对定位relative 412

19.2.3 案例4——绝对定位absolute 413

19.2.4 案例5——固定定位fixed 414

19.2.5 案例6——盒子的浮动float 416

19.3 其他CSS布局定位方式 418

19.3.1 案例7——溢出（overflow）定位 418

19.3.2 案例8——隐藏（visibility）定位 419

19.3.3 案例9——z-index空间定位 421

19.4 新增CSS3多列布局 423

19.4.1 案例10——设置列宽度column-width 423

19.4.2 案例11——设置列数column-count 424

19.4.3 案例12——设置列间距column-gap 426

19.4.4 案例13——设置列边框样式column-rule 427

19.5 综合案例1——定位网页布局样式 429

19.6 综合案例2——制作阴影文字效果 432

19.7 高手甜点 433

19.8 跟我练练手 434

第20章 网页布局实战案例剖析 436

20.1 固定宽度网页剖析与布局 436

20.1.1 案例1——网页单列布局模式 436

20.1.2 案例2——网页1-2-1型布局模式 440

20.1.3 案例3——网页1-3-1型布局模式 443

20.2 自动缩放网页1-2-1型布局模式 447

20.2.1 案例4——“1-2-1”等比例变宽布局 447

20.2.2 案例5——“1-2-1”单列变宽布局 448

20.3 自动缩放网页1-3-1型布局模式 449

20.3.1 “1-3-1”三列宽度等比例布局 449

20.3.2 案例6——“1-3-1”单侧列宽度固定的变宽布局 450

20.3.3 案例7——“1-3-1”中间列宽度固定的变宽布局 454

20.3.4 案例8——“1-3-1”双侧列宽度固定的变宽布局 458

20.3.5 案例9——“1-3-1”中列和左侧列宽度固定的变宽布局 462

20.4 综合案例1——单列宽度变化布局 465

20.5 综合案例2——多列等比例宽度变化布局 467

20.6 高手甜点 470

20.7 跟我练练手 471

第4篇 综合案例实战 476

第21章 制作在线购物类网页 476

21.1 整体布局 476

21.1.1 设计分析 476

21.1.2 排版架构 477

21.2 主要模块设计 477

21.2.1 Logo与导航区 477

21.2.2 Banner与资讯区 479

21.2.3 产品类别区域 480

21.2.4 页脚区域 481

第22章 制作移动设备类网页 484

22.1 网站设计分析 484

22.2 网站结构分析 484

22.3 网站主页面的制作 485

22.4 网站成品预览 487

第23章 制作娱乐休闲类网页 494

23.1 整体设计 494

23.1.1 应用设计分析 494

23.1.2 架构布局分析 495

23.2 主要模块设计 496

23.2.1 网页整体样式插入 496

23.2.2 顶部模块代码分析 498

23.2.3 视频模块代码分析 499

23.2.4 评论模块代码分析 500

23.2.5 热门推荐模块代码分析 501

23.2.6 底部模块分析 504

23.3 网页调整 504

23.3.1 部分内容调整 504

23.3.2 调整后预览测试 506