HTML5网页设计案例课堂PDF|Epub|txt|kindle电子书版本网盘下载

HTML5网页设计案例课堂PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1篇 基础知识3

第1章 初识HTML53

1.1 HTML5简介4

1.1.1 HTML5简介4

1.1.2 HTML5文件的基本结构5

1.2 HTML5文件的编写方法5

1.2.1 案例1——手工编写HTML55

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

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

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

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

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

1.4 跟我练练手12

1.4.1 练习目标12

1.4.2 上机练习12

1.5 高手甜点12

第2章 HTML5网页文档结构15

2.1 Web标准16

2.1.1 Web标准概述16

2.1.2 Web标准规定的内容16

2.2 HTML5文档的基本结构17

2.2.1 文档类型说明18

2.2.2 HTML5标记＜HTML＞19

2.2.3 头标记＜HEAD＞19

2.2.4 网页的主体标记＜BODY＞22

2.2.5 页面注释标记＜！--＞22

2.3 综合案例——符合W3C标准的HTML5网页制作23

2.4 跟我练练手24

2.4.1 练习目标24

2.4.2 上机练习25

2.5 高手甜点25

第3章 HTML5与HTML4的区别27

3.1 新增的主体结构元素28

3.1.1 案例1——section元素的使用28

3.1.2 案例2——article元素的使用29

3.1.3 案例3——aside元素的使用32

3.1.4 案例4——nav元素的使用33

3.1.5 案例5——time元素的使用36

3.2 新增的非主体结构元素37

3.2.1 案例6——header元素的使用37

3.2.2 案例7——hgroup元素的使用38

3.2.3 案例8——footer元素的使用40

3.2.4 案例9——figure元素的使用42

3.2.5 案例10——address元素的使用45

3.3 新增其他常用元素46

3.3.1 案例11——mark元素的使用46

3.3.2 案例12——rp元素、rt元素与ruby元素的使用48

3.3.3 案例13——progress元素的使用49

3.3.4 案例14——command元素的使用50

3.3.5 案例15——embed元素的使用50

3.3.6 案例16——details元素与summary元素的使用51

3.3.7 案例17——datalist元素的使用52

3.4 新增全局属性53

3.4.1 案例18——contentEditable属性的使用53

3.4.2 案例19——spellcheck属性的使用54

3.4.3 案例20——tabIndex属性的使用55

3.5 新增的其他属性56

3.5.1 案例21——表单相关属性的使用56

3.5.2 案例22——链接相关属性的使用64

3.5.3 案例23——其他属性的使用66

3.6 HTML5废除的属性66

3.7 跟我练练手68

3.7.1 练习目标68

3.7.2 上机练习68

3.8 高手甜点68

第2篇 核心技术73

第4章 设计网页文本内容73

4.1 标题文字的建立74

4.1.1 案例1——标题文字标记74

4.1.2 案例2——标题文字的对齐方式75

4.2 设置文字格式75

4.2.1 案例3——设置文字字体75

4.2.2 案例4——设置字号77

4.2.3 案例5——设置文字颜色78

4.2.4 案例6——设置粗体、斜体、下划线79

4.2.5 案例7——设置上标与下标81

4.2.6 案例8——设置字体风格82

4.2.7 案例9——设置加粗字体83

4.2.8 案例10——设置字体复合属性84

4.2.9 案例11——设置阴影文本85

4.2.10 案例12——控制换行86

4.3 设置段落格式88

4.3.1 案例13——设置段落标记88

4.3.2 案例14——设置换行标记89

4.4 设置网页水平线90

4.4.1 案例15——添加水平线90

4.4.2 案例16——设置水平线的宽度与高度91

4.4.3 案例17——设置水平线的颜色92

4.4.4 案例18——设置水平线的对齐方式92

4.4.5 案例19——去掉水平线阴影93

4.5 综合案例——成才教育网文本设计94

4.6 跟我练练手95

4.6.1 练习目标95

4.6.2 上机练习95

4.7 高手甜点95

第5章 网页列表与段落设计97

5.1 网页文字列表设计98

5.1.1 案例1——建立无序列表＜ul＞98

5.1.2 案例2——建立有序列表＜ol＞99

5.1.3 案例3——建立不同类型的无序列表100

5.1.4 案例4——建立不同类型的有序列表101

5.1.5 案例5——嵌套列表102

5.1.6 案例6——自定义列表＜dl＞103

5.2 网页段落格式的设计104

5.2.1 案例7——设计单词间隔word-spacing104

5.2.2 案例8——设计字符间隔letter-spacing105

5.2.3 案例9——设计文字修饰text-decoration106

5.2.4 案例10——设计垂直对齐方式vertical-align107

5.2.5 案例11——设计文本转换text-transform109

5.2.6 案例12——设计水平对齐方式text-align110

5.2.7 案例13——设计文本缩进text-indent112

5.2.8 案例14——设计文本行高line-height113

5.2.9 案例15——处理空白white-space114

5.2.10 案例16——文本反排unicode-bidi115

5.3 综合案例——制作图文混排型旅游网页117

5.4 跟我练练手118

5.4.1 练习目标118

5.4.2 上机练习118

5.5 高手甜点118

第6章 HTML5网页中的图像121

6.1 网页中的图像＜img＞122

6.1.1 网页中支持的图片格式122

6.1.2 图像中的路径122

6.2 在网页中插入图像124

6.2.1 案例1——插入图像124

6.2.2 案例2——从不同位置插入图像125

6.3 编辑网页中的图像126

6.3.1 案例3——设置图像的宽度和高度126

6.3.2 案例4——设置图像的提示文字127

6.3.3 案例5——将图片设置为网页背景128

6.3.4 案例6——排列图像129

6.4 实战演练——图文并茂房屋装饰装修网页130

6.5 跟我练练手131

6.5.1 练习目标131

6.5.2 上机练习131

6.6 高手甜点131

第7章 使用HTML5建立超链接133

7.1 网页超链接的概念134

7.1.1 什么是网页超链接134

7.1.2 超链接中的URL134

7.1.3 超链接的URL类型135

7.2 建立网页超级链接135

7.2.1 案例1——创建超文本链接135

7.2.2 案例2——创建图片链接137

7.2.3 案例3——创建下载链接138

7.2.4 案例4——使用相对路径和绝对路径139

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

7.2.6 案例6——设置电子邮件链接142

7.3 案例7——浮动框架iframe的使用143

7.4 案例8——精确定位热点区域145

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

7.6 跟我练练手151

7.6.1 练习目标151

7.6.2 上机练习151

7.7 高手甜点151

第8章 使用HTML5创建表单153

8.1 案例1——认识表单154

8.2 表单基本元素的使用155

8.2.1 案例2——单行文本输入框text的使用155

8.2.2 案例3——多行文本输入框textarea的使用156

8.2.3 案例4——密码域password的使用156

8.2.4 案例5——单选按钮radio的使用157

8.2.5 案例6——复选框checkbox的使用158

8.2.6 案例7——下拉列表框select的使用159

8.2.7 案例8——普通按钮button的使用160

8.2.8 案例9——提交按钮submit的使用161

8.2.9 案例10——重置按钮reset的使用162

8.3 表单高级元素的使用163

8.3.1 案例11——url属性的应用163

8.3.2 案例12——email属性的应用164

8.3.3 案例13——date属性和times属性的应用165

8.3.4 案例14——number属性的应用166

8.3.5 案例15——range属性的应用167

8.3.6 案例16——required属性的应用167

8.4 综合案例——创建用户反馈表单168

8.5 跟我练练手170

8.5.1 练习目标170

8.5.2 上机练习170

8.6 高手甜点170

第9章 使用HTML5创建表格171

9.1 表格的基本结构172

9.2 使用HTML5创建表格173

9.2.1 案例1——创建普通表格174

9.2.2 案例2——创建一个带有标题的表格175

9.2.3 案例3——定义表格的边框类型176

9.2.4 案例4——定义表格的表头177

9.2.5 案例5——设置表格背景178

9.2.6 案例6——设置单元格背景180

9.2.7 案例7——合并单元格181

9.2.8 案例8——排列单元格中的内容185

9.2.9 案例9——设置单元格的行高与列宽186

9.3 案例10——创建完整的表格187

9.4 综合案例——制作商品报价表189

9.5 跟我练练手191

9.5.1 练习目标191

9.5.2 上机练习191

9.6 高手甜点191

第10章 HTML5中的多媒体193

10.1 网页音频标签audio194

10.1.1 audio标签概述194

10.1.2 audio标签的属性194

10.1.3 音频解码器195

10.1.4 audio标签浏览器的支持情况195

10.2 网页视频标签video195

10.2.1 video标签概述195

10.2.2 video标签的属性195

10.2.3 视频解码器196

10.2.4 video标签浏览器的支持情况196

10.3 添加网页音频文件197

10.3.1 案例1——设置背景音乐197

10.3.2 案例2——设置音乐循环播放198

10.4 添加网页视频文件198

10.4.1 案例3——为网页添加视频文件198

10.4.2 案例4——设置自动运行199

10.4.3 案例5——设置视频文件的循环播放200

10.4.4 案例6——设置视频窗口的高度与宽度201

10.5 添加网页滚动文字202

10.5.1 案例7——滚动文字标签的使用202

10.5.2 案例8——滚动方向属性的应用203

10.5.3 案例9——滚动方式属性的应用204

10.5.4 案例10——滚动速度属性的应用205

10.5.5 案例11——滚动延迟属性的应用206

10.5.6 案例12——滚动循环属性的应用206

10.5.7 案例13——滚动范围属性的应用207

10.5.8 案例14——滚动背景颜色属性的应用208

10.5.9 案例15——滚动空间属性的应用209

10.6 跟我练练手210

10.6.1 练习目标210

10.6.2 上机练习210

10.7 高手甜点210

第11章 使用HTML5绘制图形213

11.1 什么是canvas214

11.2 绘制基本形状215

11.2.1 案例1——绘制矩形215

11.2.2 案例2——绘制圆形216

11.2.3 案例3——使用moveTo与lineTo绘制直线217

11.2.4 案例4——使用bezierCurveTo绘制贝济埃曲线219

11.3 绘制渐变图形221

11.3.1 案例5——绘制线性渐变221

11.3.2 案例6——绘制径向渐变222

11.4 绘制变形图形223

11.4.1 案例7——变换原点坐标223

11.4.2 案例8——图形缩放225

11.4.3 案例9——旋转图形226

11.5 绘制其他样式的图形227

11.5.1 案例10——图形组合227

11.5.2 案例11——绘制带阴影的图形229

11.5.3 案例12——绘制文字230

11.6 使用图像232

11.6.1 案例13——绘制图像232

11.6.2 案例14——图像平铺234

11.6.3 案例15——图像裁剪235

11.6.4 案例16——像素处理237

11.7 图形的保存与恢复239

11.7.1 案例17——保存与恢复状态239

11.7.2 案例18——保存文件240

11.8 实战演练——绘制图形商标241

11.9 跟我练练手243

11.9.1 练习目标243

11.9.2 上机练习243

11.10 高手甜点244

第12章 HTML5中的文件与拖放245

12.1 选择文件246

12.1.1 案例1——选择单个文件246

12.1.2 案例2——选择多个文件246

12.2 使用FileReader接口读取文件247

12.2.1 案例3——检测浏览器是否支持FileReader接口247

12.2.2 案例4——FileReader接口的方法248

12.2.3 案例5——使用readAsDataURL方法预览图片248

12.2.4 案例6——使用readAsText方法读取文本文件250

12.3 使用HTML5实现文件的拖放252

12.3.1 案例7——认识文件拖放的过程252

12.3.2 浏览器支持情况253

12.3.3 案例8——在网页中拖放图片253

12.3.4 案例9——在网页中拖放文字254

12.4 综合案例——在网页中来回拖放图片256

12.5 跟我练练手258

12.5.1 练习目标258

12.5.2 上机练习258

12.6 专家甜点258

第3篇 高级应用261

第13章 获取地理位置261

13.1 Geolocation API获取地理位置262

13.1.1 地理地位的原理262

13.1.2 获取定位信息的方法262

13.1.3 常用地理定位方法262

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

13.1.5 案例2——指定纬度和经度坐标264

13.1.6 案例3——获取当前位置的经度与纬度265

13.2 目前浏览器对地理定位的支持情况267

13.3 综合案例——在网页中调用Google地图268

13.4 跟我练练手271

13.4.1 练习目标271

13.4.2 上机练习271

13.5 高手甜点271

第14章 Web通信新技术273

14.1 跨文档消息传输274

14.1.1 跨文档消息传输的基本知识274

14.1.2 案例1——跨文档通信应用测试274

14.2 WebSockets API277

14.2.1 什么是WebSocket API277

14.2.2 WebSockets通信基础277

14.2.3 案例2——服务器端使用Web Sockets API279

14.2.4 案例3——客户机端使用WebSockets API282

14.3 综合案例——编写简单的WebSocket服务器283

14.4 跟我练练手287

14.4.1 练习目标287

14.4.2 上机练习287

14.5 高手甜点287

第15章 数据存储技术289

15.1 认识Web存储290

15.1.1 本地存储和Cookies的区别290

15.1.2 Web存储方法290

15.2 使用HTML5 Web Storage API290

15.2.1 案例1——测试浏览器的支持情况291

15.2.2 案例2——使用session Storage方法创建对象291

15.2.3 案例3——使用localStorage方法创建对象293

15.2.4 案例4——Web Storage API的其他操作295

15.2.5 案例5——使用JSON对象存取数据296

15.3 在本地建立数据库299

15.3.1 本地数据库概述299

15.3.2 用executeSql来执行查询299

15.3.3 使用transaction方法处理事件300

15.4 目前浏览器对Web存储的支持情况300

15.5 综合案例——制作简单Web留言本300

15.6 跟我练练手303

15.6.1 练习目标303

15.6.2 上机练习304

15.7 高手甜点304

第16章 使用Web Worker处理线程305

16.1 Web Workers306

16.1.1 Web Workers概述306

16.1.2 线程中常用的变量、函数与类307

16.1.3 案例1——与线程进行数据的交互307

16.2 线程嵌套310

16.2.1 案例2——单线程嵌套310

16.2.2 案例3——多个子线程中的数据交互312

16.3 综合案例—创建Web Worker计数器314

16.4 跟我练练手315

16.4.1 练习目标315

16.4.2 上机练习315

16.5 高手甜点316

第17章 HTML5服务器发送事件317

17.1 服务器发送事件概述318

17.2 服务器发送事件的实现过程318

17.2.1 案例1——检测浏览器是否支持Server-Sent事件318

17.2.2 案例2——使用EventSource对象319

17.2.3 案例3——编写服务器端代码319

17.3 综合案例——服务器发送事件实战应用320

17.4 跟我练练手321

17.4.1 练习目标321

17.4.2 上机练习321

17.5 高手甜点322

第18章 构建离线的Web应用323

18.1 HTML5离线Web应用概述324

18.2 实例1——使用HTML5离线Web应用API324

18.2.1 检查浏览器的支持情况324

18.2.2 搭建简单的离线应用程序325

18.2.3 支持离线行为325

18.2.4 Manifest文件326

18.2.5 ApplicationCache API327

18.3 实例2——使用HTML5离线Web应用构建应用329

18.3.1 创建记录资源的manifest文件329

18.3.2 创建构成界面的HTML和CSS329

18.3.3 创建离线的JavaScript330

18.3.4 检查applicationCache的支持情况331

18.3.5 为Update按钮添加处理函数332

18.3.6 添加Storage功能代码332

18.3.7 添加离线事件处理程序333

18.4 综合案例——离线定位跟踪333

18.5 跟我练练手338

18.5.1 练习目标338

18.5.2 上机练习338

18.6 高手甜点338

第4篇 项目案例实战341

第19章 HTML5、CSS3和JavaScript的搭配应用案例341

19.1 案例1——打字效果的文字的制作342

19.2 案例2——文字升降特效的制作344

19.3 案例3——跑马灯效果的制作345

19.4 案例4——闪烁图片的制作347

19.5 案例5——左右移动的图片的制作349

19.6 案例6——向上滚动菜单的制作351

19.7 案例7——跟随鼠标移动的图片的制作353

19.8 案例8——树形菜单的制作355

19.9 案例9——时钟特效的制作360

19.10 案例10——颜色选择器的制作362

19.11 案例11——绘制火柴棒人物364

19.12 跟我练练手367

19.12.1 练习目标367

19.12.2 上机练习367

19.13 高手甜点368

第20章 制作电子商务类网页369

20.1 整体布局370

20.1.1 设计分析370

20.1.2 排版架构370

20.2 模块组成371

20.3 制作步骤371

20.3.1 样式表371

20.3.2 网页头部379

20.3.3 主体第一通栏381

20.3.4 主体第二通栏382

20.3.5 主体第三通栏383

20.3.6 网页底部384

第21章 制作休闲娱乐类网页387

21.1 整体布局388

21.1.1 设计分析388

21.1.2 排版架构389

21.2 模块组成389

21.3 制作步骤390

21.3.1 制作样式表390

21.3.2 Logo与导航菜单398

21.3.3 搜索条399

21.3.4 左侧视频模块399

21.3.5 评论模块400

21.3.6 右侧热门推荐402

21.3.7 底部模块404

第22章 制作企业门户类网页407

22.1 整体布局408

22.1.1 设计分析408

22.1.2 排版架构408

22.2 模块组成409

22.3 制作步骤409

22.3.1 样式表409

22.3.2 网页头部411

22.3.3 导航菜单栏412

22.3.4 中间主体第一栏412

22.3.5 中间主体第二栏416

22.3.6 中间主体第三栏419

22.3.7 中间主体第四栏425

22.3.8 中间主体第五栏430

22.3.9 网页底部435