HTML5网页设计案例课堂 第2版2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载

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

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

第I篇 基础入门3

第1章 新一代Web前端技术HTML 53

1.1 HTML的基本概念4

1.1.1 HTML的发展历程4

1.1.2 什么是HTML4

1.1.3 HTML 5文件的基本结构5

1.2 HTML 5的优势5

1.2.1 解决了跨浏览器问题5

1.2.2 新增了多个新特性5

1.2.3 用户优先的原则6

1.2.4 化繁为简的优势7

1.3 HTML 5网页的开发环境7

1.3.1 案例1——使用记事本手工编写HTML 57

1.3.2 案例2——使用Dreamweaver CC编写HTML文件8

1.4 使用浏览器查看HTML 5文件11

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

1.4.2 案例4——查看源文件12

1.5 高手解惑12

第2章 HTML 5网页的文档结构13

2.1 HTML 5文件的基本结构14

2.1.1 HTML 5页面的整体结构14

2.1.2 HTML 5新增的结构标记14

2.2 HTML 5基本标记详解15

2.2.1 文档类型说明15

2.2.2 HTML标记15

2.2.3 头标记head16

2.2.4 网页的主体标记body18

2.2.5 页面注释标记〈！？？〉19

2.3 HTML 5语法的变化20

2.3.1 标签不再区分大小写20

2.3.2 允许属性值不使用引号20

2.3.3 允许部分属性值的属性省略20

2.4 必知必会——HTML 5代码规范21

2.5 综合案例——符合W3C标准的HTML 5网页22

2.6 跟我学上机——简单的HTML 5网页22

2.7 高手解惑23

第3章 HTML5与HTML 4的区别25

3.1 新增的主体结构元素26

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

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

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

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

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

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

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

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

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

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

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

3.3 新增其他常用元素40

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

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

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

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

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

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

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

3.4 新增全局属性45

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

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

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

3.5 新增的其他属性47

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

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

3.5.3 案例23——其他新增属性的使用55

3.6 HTML 5废除的属性56

3.7 高手解惑57

第Ⅱ篇 核心技术61

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

4.1 标题文字的建立62

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

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

4.2 设置文字格式63

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

4.2.2 案例4——设置字号64

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

4.2.4 案例6——设置粗体、斜体、下画线67

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

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

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

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

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

4.2.10 案例12——控制换行72

4.3 设置段落格式73

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

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

4.4 设置网页水平线75

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

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

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

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

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

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

4.6 高手解惑78

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

5.1 网页文字列表的设计80

5.1.1 案例1——建立无序列表〈ul〉80

5.1.2 案例2——建立有序列表〈ol〉81

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

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

5.1.5 案例5——嵌套列表83

5.1.6 案例6——自定义列表〈dl〉83

5.2 网页段落格式的设计84

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

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

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

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

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

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

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

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

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

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

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

5.4 高手解惑97

第6章 HTML 5网页中的图像99

6.1 网页中的图像〈img〉100

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

6.1.2 图像中的路径100

6.2 在网页中插入图像102

6.2.1 案例1——插入图像102

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

6.3 编辑网页中的图像103

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

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

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

6.3.4 案例6——排列图像106

6.4 综合案例——图文并茂的房屋装饰装修网页107

6.5 高手解惑108

第7章 使用HTML 5建立超链接109

7.1 网页超链接的概念110

7.1.1 什么是网页超链接110

7.1.2 超链接中的URL110

7.1.3 超链接的URL类型111

7.2 建立网页超级链接111

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

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

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

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

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

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

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

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

7.5 高手解惑122

第8章 使用HTML 5创建表单123

8.1 案例1——认识表单124

8.2 表单基本元素的使用124

8.2.1 案例2——单行文本输入框text125

8.2.2 案例3——多行文本输入框textarea125

8.2.3 案例4——密码域password126

8.2.4 案例5——单选按钮radio127

8.2.5 案例6——复选框checkbox128

8.2.6 案例7——列表框select128

8.2.7 案例8——普通按钮button129

8.2.8 案例9——提交按钮submit130

8.2.9 案例10——重置按钮reset131

8.3 表单高级元素的使用132

8.3.1 案例11——url属性的使用132

8.3.2 案例12——email属性的使用132

8.3.3 案例13——date和time属性的使用133

8.3.4 案例14——number属性的使用134

8.3.5 案例15——range属性的使用135

8.3.6 案例16——required属性的使用136

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

8.5 跟我学上机——制作用户注册表单138

8.6 高手解惑139

第9章 使用HTML 5创建表格141

9.1 案例1——表格的基本结构142

9.2 创建表格143

9.2.1 案例2——创建普通表格143

9.2.2 案例3——创建一个带有标题的表格144

9.3 编辑表格145

9.3.1 案例4——定义表格的边框类型145

9.3.2 案例5——定义表格的表头146

9.3.3 案例6——设置表格背景147

9.3.4 案例7——设置单元格的背景148

9.3.5 案例8——合并单元格148

9.3.6 案例9——排列单元格中的内容152

9.3.7 案例10——设置单元格的行高与列宽153

9.4 案例11——完整的表格标记153

9.5 综合案例——制作计算机报价表154

9.6 跟我学上机——制作学生成绩表157

9.7 高手解惑160

第10章 HTML 5中的音频和视频161

10.1 audio标签概述162

10.1.1 案例1——认识audio标签162

10.1.2 audio标签的属性163

10.1.3 浏览器对audio标签的支持情况163

10.2 在网页中添加音频文件163

10.2.1 案例2——添加自动播放的音频文件163

10.2.2 案例3——添加带有控件的音频文件164

10.2.3 案例4——添加循环播放的音频文件165

10.2.4 案例5——添加预播放的音频文件165

10.3 video标签概述166

10.3.1 案例6——认识video标签166

10.3.2 video标签的属性167

10.3.3 浏览器对video标签的支持情况167

10.4 在网页中添加视频文件168

10.4.1 案例7——添加自动播放的视频文件168

10.4.2 案例8——添加带有控件的视频文件169

10.4.3 案例9——添加循环播放的视频文件169

10.5 综合案例——设置视频文件的高度与宽度170

10.6 跟我学上机——添加预播放的视频文件171

10.7 高手解惑172

第11章 使用HTML5绘制图形173

11.1 添加canvas的步骤174

11.2 绘制基本形状174

11.2.1 案例1——绘制矩形175

11.2.2 案例2——绘制圆形176

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

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

11.3 绘制渐变图形179

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

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

11.4 绘制变形图形182

11.4.1 案例7——绘制平移效果的图形182

11.4.2 案例8——绘制缩放效果的图形183

11.4.3 案例9——绘制旋转效果的图形185

11.4.4 案例10——绘制组合效果的图形186

11.4.5 案例11——绘制带阴影的图形188

11.5 使用图像189

11.5.1 案例12——绘制图像189

11.5.2 案例13——平铺图像190

11.5.3 案例14——裁剪图像192

11.5.4 案例15——图像的像素化处理193

11.6 案例16——绘制文字195

11.7 图形的保存与恢复196

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

11.7.2 案例18——保存文件197

11.8 综合案例——绘制火柴棒人物199

11.9 跟我学上机——绘制商标201

11.10 高手解惑203

第Ⅲ篇 高级技能207

第12章 HTML 5中的文件与拖放207

12.1 选择文件208

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

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

12.2 使用FileReader接口读取文件209

12.2.1 检测浏览器是否支持FileReader接口209

12.2.2 FileReader接口的方法210

12.2.3 案例3——使用readAsDataURL方法预览图片210

12.2.4 案例4——使用readAsText方法读取文本文件212

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

12.3.1 认识文件拖放的过程214

12.3.2 浏览器支持情况214

12.3.3 案例5——在网页中拖放图片215

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

12.5 跟我学上机——在网页中拖放文字217

12.6 高手解惑219

第13章 定位地理位置技术221

13.1 Geolocation API获取地理位置222

13.1.1 地理地位的原理222

13.1.2 获取定位信息的方法222

13.1.3 常用地理定位方法222

13.1.4 判断浏览器是否支持HTML 5获取地理位置信息223

13.1.5 指定纬度和经度坐标224

13.1.6 获取当前位置的经度与纬度225

13.1.7 处理错误和拒绝227

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

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

13.4 跟我学上机——持续获取用户移动后的位置230

13.5 高手解惑231

第14章 Web存储和通信技术233

14.1 认识Web存储234

14.1.1 本地存储和Cookies的区别234

14.1.2 Web存储方法234

14.2 使用HTML 5 Web Storage API234

14.2.1 测试浏览器的支持情况235

14.2.2 案例1——使用sessionStorage方法创建对象236

14.2.3 案例2——使用localStorage方法创建对象237

14.2.4 案例3——Web Storage API的其他操作238

14.2.5 案例4——使用JSON对象存取数据239

14.3 目前浏览器对Web存储的支持情况241

14.4 跨文档消息传输242

14.4.1 跨文档消息传输的基本知识242

14.4.2 案例5——跨文档通信应用测试242

14.5 WebSocket API245

14.5.1 什么是WebSocket API245

14.5.2 WebSocket通信基础245

14.5.3 案例6——服务器端使用Web Socket API247

14.5.4 案例7——客户端使用WebSocket API250

14.6 综合案例——制作简单Web留言本250

14.7 跟我学上机——编写简单的WebSocket服务器253

14.8 高手解惑257

第15章 处理线程和服务器发送事件259

15.1 Web Worker260

15.1.1 Web Worker概述260

15.1.2 线程中常用的变量、函数与类260

15.1.3 案例1——与线程进行数据的交互261

15.2 线程嵌套263

15.2.1 案例2——单线程嵌套263

15.2.2 案例3——多个子线程中的数据交互265

15.3 服务器发送事件概述267

15.4 服务器发送事件的实现过程267

15.4.1 案例4——检测浏览器是否支持Server-Sent事件267

15.4.2 案例5——使用EventSource对象268

15.4.3 案例6——编写服务器端代码268

15.5 综合案例——创建Web Worker计数器269

15.6 跟我学上机——服务器发送事件实战应用270

15.7 高手解惑272

第16章 构建离线的Web应用273

16.1 HTML 5离线Web应用概述274

16.2 案例1——使用HTML5离线Web应用API274

16.2.1 检查浏览器的支持情况274

16.2.2 搭建简单的离线应用程序275

16.2.3 支持离线行为275

16.2.4 Manifest文件276

16.2.5 Application Cache API277

16.3 案例2——使用HTML 5离线Web应用构建应用278

16.3.1 创建记录资源的manifest文件278

16.3.2 创建构成界面的HTML和CSS279

16.3.3 创建离线的JavaScript279

16.3.4 检查Application Cache的支持情况281

16.3.5 为Update按钮添加处理函数281

16.3.6 添加Storage功能代码282

16.3.7 添加离线事件处理程序282

16.4 综合案例——离线定位跟踪283

16.5 高手解惑287

第Ⅳ篇 移动开发291

第17章 jQuery Mobile基础291

17.1 认识j Query Mobile292

17.2 跨平台移动设备网页jQuery Mobile292

17.2.1 案例1——移动设备模拟器292

17.2.2 案例2——jQuery Mobile的安装294

17.2.3 案例3—— jQuery Mobile网页的架构296

17.3 案例4——创建多页面的jQuery Mobile网页297

17.4 案例5——将页面作为对话框使用298

17.5 案例6——绚丽多彩的页面切换效果299

17.6 高手解惑301

第18章 jQuery Mobile UI组件303

18.1 套用UI组件304

18.1.1 案例1——表单组件304

18.1.2 案例2——按钮和组按钮311

18.1.3 案例3——按钮图标313

18.1.4 案例4——弹窗315

18.2 列表316

18.2.1 案例5——列表视图316

18.2.2 案例6——列表内容319

18.2.3 案例7——列表过滤320

18.3 面板和可折叠块322

18.3.1 案例8——面板322

18.3.2 案例9——可折叠块323

18.4 案例10——导航条325

18.5 综合案例——使用jQuery Mobile主题328

18.6 高手解惑331

第19章 jQuery Mobile事件333

19.1 页面事件334

19.1.1 案例1——初始化事件334

19.1.2 案例2——外部页面加载事件336

19.1.3 案例3——页面过渡事件338

19.2 触摸事件340

19.2.1 案例4——点击事件340

19.2.2 案例5——滑动事件342

19.3 案例6——滚屏事件344

19.4 案例7——定位事件347

19.5 高手解惑349

第20章 数据存储和读取技术351

20.1 Web SQL Database概述352

20.2 数据库的基本操作352

20.3 数据表的基本操作353

20.4 数据的基本操作355

20.5 综合案例——Web SQL Database的综合操作技能356

20.6 高手解惑359

第Ⅴ篇 综合案例实战363

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

21.1 整体布局364

21.1.1 设计分析364

21.1.2 排版架构365

21.2 模块组成365

21.3 制作步骤366

21.3.1 制作样式表366

21.3.2 Logo与导航菜单373

21.3.3 搜索条374

21.3.4 左侧视频模块374

21.3.5 评论模块375

21.3.6 右侧热门推荐377

21.3.7 底部模块378

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

22.1 整体布局382

22.1.1 设计分析382

22.1.2 排版架构383

22.2 模块组成383

22.3 制作步骤384

22.3.1 样式表384

22.3.2 网页头部385

22.3.3 导航菜单栏386

22.3.4 中间主体第一栏386

22.3.5 中间主体第二栏390

22.3.6 中间主体第三栏393

22.3.7 中间主体第四栏398

22.3.8 中间主体第五栏402

22.3.9 网页底部407

第23章 制作电子商务类网页409

23.1 整体布局410

23.1.1 设计分析410

23.1.2 排版架构411

23.2 模块组成411

23.3 制作步骤411

23.3.1 样式表411

23.3.2 网页头部419

23.3.3 主体第一通栏420

23.3.4 主体第二通栏420

23.3.5 主体第三通栏421

23.3.6 网页底部422

第24章 开发连锁酒店订购系统425

24.1 连锁酒店订购的需求分析426

24.2 网站的结构426

24.3 连锁酒店订购系统的代码实现427

24.3.1 设计首页427

24.3.2 订购页面428

24.3.3 连锁分店页面433

24.3.4 查看订单页面434

24.3.5 酒店介绍页面436