HTML5+CSS3网页设计与制作案例课堂第3版 刘春茂 清华大学

图书标准信息

• 作者 刘春茂
• 出版社 清华大学出版社
• 出版时间 2023-06
• 版次 3
• ISBN 9787302636083
• 定价 86.00元
• 装帧 其他
• 开本 其他
• 纸张 胶版纸
• 页数 384页
• 字数 581千字

【内容简介】

《HTML5 CSS3网页设计与制作案例课堂（第3版）》是针对零基础读者编写的网页设计入门教材，侧重案例实训，并提供微课来讲解当前热点的案例。 《HTML5 CSS3网页设计与制作案例课堂（第3版）》分为23章，内容包括新一代Web前端技术、HTML 5网页的文档结构、HTML 5网页中的文本、超链接和图像、使用HTML 5创建表格、使用HTML 5创建表单、HTML 5中的多媒体、使用HTML 5绘制图形、CSS 3概述与基本语法、使用CSS 3美化网页字体与段落、使用CSS 3美化网页图片、使用CSS 3美化网页背景与边框、使用CSS 3美化超级链接和光标、使用CSS 3美化表格和表单、使用CSS 3美化网页菜单、使用滤镜美化网页元素、CSS 3中的动画效果、HTML 5中的文件与拖放、定位地理位置技术、数据存储和通信技术、处理线程和服务器发送事件、CSS 3定位与DIV布局核心技术。后通过两个热点综合项目，进一步巩固读者的项目开发经验。 《HTML5 CSS3网页设计与制作案例课堂（第3版）》可以让初学者快速掌握网页设计技术。此外，本书也适合作为大专院校相关专业的指导教材。

【作者简介】

刘春茂在郑州轻工业大学负责计算机系的毕业生网站开发实训，写过多本网站开发类的畅销教材，同时具有丰富的教学经验和开发经验。主导开发 B2C 电子商务平台、网上书店和评教系统等，具有很强的实战经验。

【目录】

目    录

 

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

1.1  HTML的基本概念 2

1.1.1  HTML的发展历程 2

1.1.2  什么是HTML 2

1.2  HTML 5的优势 3

1.2.1  解决了跨浏览器问题 3

1.2.2  新增了多个新特性 3

1.2.3  用户优先的原则 3

1.2.4  化繁为简的优势 4

1.3  HTML 5网页的开发环境 5

1.3.1  使用记事本手工编写HTML 5 5

1.3.2  使用WebStorm编写HTML文件 5

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

1.4.1  查看页面效果 8

1.4.2  查看源代码 8

1.5  疑难解惑 9

1.6  跟我学上机 9

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

2.1  HTML 5文件的基本结构 12

2.1.1  HTML 5页面的整体结构 12

2.1.2  HTML 5新增的结构标记 12

2.2  HTML 5基本标记详解 13

2.2.1  文档类型说明 13

2.2.2  HTML标记 13

2.2.3  头标记 13

2.2.4  主体标记 16

2.2.5  页面注释标记 17

2.3  HTML 5语法的变化 17

2.3.1  标记不再区分大小写 17

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

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

2.4  疑难解惑 19

2.5  跟我学上机 19

第3章  HTML 5网页中的文本、超链接和图像 21

3.1  标题 22

3.1.1  标题标记 22

3.1.2  标题的对齐方式 23

3.2　设置文字格式 24

3.2.1  文字的字体、字号和颜色 24

3.2.2　文字的粗体、斜体和下划线 26

3.2.3　文字的上标和下标 27

3.3  设置段落格式 28

3.3.1　段落标记 28

3.3.2　段落的换行标记 28

3.3.3　段落的原格式标记 29

3.4  文字列表 30

3.4.1  无序列表 30

3.4.2  有序列表 31

3.4.3  建立不同类型的无序列表 31

3.4.4  建立不同类型的有序列表 32

3.4.5  自定义列表 33

3.4.6  建立嵌套列表 34

3.5  超链接标记 35

3.5.1  设置文本和图片的超链接 35

3.5.2  创建指向不同目标类型的超链接 36

3.5.3  设置以新窗口显示超链接页面 37

3.5.4  链接到同一页面的不同位置 38

3.6  图像热点链接 38

3.7  在网页中插入图像 40

3.8　编辑网页中的图像 41

3.8.1　设置图像的大小和边框 41

3.8.2　设置图像的间距和对齐方式 43

3.8.3  设置图像的替换文字和提示文字 44

3.9  疑难解惑 45

3.10  跟我学上机 46

第4章  使用HTML 5创建表格 47

4.1  表格的基本结构 48

4.2  创建表格 49

4.2.1  创建普通表格 49

4.2.2  创建一个带有标题的表格 50

4.3  编辑表格 50

4.3.1  定义表格的边框类型 51

4.3.2  定义表格的表头 51

4.3.3  设置表格背景 52

4.3.4  设置单元格的背景 53

4.3.5  合并单元格 54

4.3.6  表格的分组 57

4.3.7  设置单元格的行高与列宽 58

4.4  完整的表格标记 59

4.5  设置悬浮变色的表格 60

4.6  疑难解惑 63

4.7  跟我学上机 63

第5章  使用HTML 5创建表单 65

5.1  表单概述 66

5.2  表单基本元素的使用 66

5.2.1  单行文本输入框 66

5.2.2  多行文本输入框 67

5.2.3  密码域 68

5.2.4  单选按钮 68

5.2.5  复选框 69

5.2.6  列表框 70

5.2.7  普通按钮 71

5.2.8  提交按钮 72

5.2.9  重置按钮 73

5.3  表单高级元素的使用 74

5.3.1  url属性的使用 74

5.3.2  email属性的使用 74

5.3.3  日期和时间属性的使用 75

5.3.4  number属性的使用 76

5.3.5  range属性的使用 77

5.3.6  required属性的使用 77

5.4  疑难解惑 78

5.5  跟我学上机 78

第6章  HTML 5中的多媒体 81

6.1  audio标记 82

6.1.1  audio标记概述 82

6.1.2  audio标记的属性 83

6.1.3  浏览器支持audio标记的情况 83

6.2  在网页中添加音频文件 83

6.3  video标记 85

6.3.1  video标记概述 85

6.3.2  video标记的属性 86

6.3.3  浏览器对video标记的支持情况 86

6.4  在网页中添加视频文件 87

6.5  疑难解惑 88

6.6  跟我学上机 89

第7章  使用HTML 5绘制图形 91

7.1  添加canvas的步骤 92

7.2  绘制基本形状 92

7.2.1  绘制矩形 92

7.2.2  绘制圆形 93

7.2.3  使用moveTo与lineTo绘制直线 94

7.2.4  使用bezierCurveTo绘制贝济埃曲线 96

7.3  绘制渐变图形 97

7.3.1  绘制线性渐变 97

7.3.2  绘制径向渐变 98

7.4  绘制变形图形 99

7.4.1  绘制平移效果的图形 100

7.4.2  绘制缩放效果的图形 100

7.4.3  绘制旋转效果的图形 101

7.4.4  绘制组合效果的图形 103

7.4.5  绘制带阴影的图形 104

7.5  使用图像 105

7.5.1  绘制图像 105

7.5.2  平铺图像 106

7.5.3  裁剪图像 108

7.5.4  图像的像素化处理 109

7.6  绘制文字 111

7.7  疑难解惑 113

7.8  跟我学上机 113

第8章  CSS 3概述与基本语法 115

8.1  CSS 3概述 116

8.1.1  CSS 3的功能 116

8.1.2  浏览器与CSS 3 116

8.1.3  CSS 3的基础语法 117

8.1.4  CSS 3的常用单位 117

8.2  在HTML 5中使用CSS 3的方法 122

8.2.1  行内样式 122

8.2.2  内嵌样式 123

8.2.3  链接样式 124

8.2.4  导入样式 125

8.2.5  优先级问题 126

8.3  CSS 3的常用选择器 128

8.3.1  标记选择器 128

8.3.2  类选择器 129

8.3.3  ID选择器 130

8.3.4  全局选择器 131

8.3.5  组合选择器 132

8.3.6  选择器继承 132

8.3.7  伪类选择器 133

8.4  选择器声明 134

8.4.1  集体声明 134

8.4.2  多重嵌套声明 135

8.5  疑难解惑 136

8.6  跟我学上机 136

第9章  使用CSS 3美化网页字体与段落 139

9.1  美化网页文字 140

9.1.1  设置文字的字体 140

9.1.2  设置文字的字号 141

9.1.3  设置字体风格 142

9.1.4  设置加粗字体 143

9.1.5  将小写字母转换为大写字母 144

9.1.6  设置字体的复合属性 144

9.1.7  设置字体颜色 145

9.2  设置文本的高级样式 146

9.2.1  设置文本阴影效果 146

9.2.2  设置文本的溢出效果 147

9.2.3  设置文本的控制换行 148

9.2.4  保持字体尺寸不变 149

9.3  美化网页中的段落 150

9.3.1  设置单词之间的间隔 150

9.3.2  设置字符之间的间隔 151

9.3.3  设置文字的修饰效果 152

9.3.4  设置垂直对齐方式 153

9.3.5  转换文本的大小写 154

9.3.6  设置文本的水平对齐方式 155

9.3.7  设置文本的缩进效果 157

9.3.8  设置文本的行高 157

9.3.9  文本的空白处理 158

9.3.10  文本的反排 160

9.4  疑难解惑 161

9.5  跟我学上机 161

第10章  使用CSS 3美化网页图片 163

10.1  图片缩放 164

10.1.1  通过描述标记width和height缩放图片 164

10.1.2  使用CSS 3中的max-width和max-height缩放图片 164

10.1.3  使用CSS 3中的width和height缩放图片 165

10.2  设置图片的对齐方式 166

10.2.1  设置图片的横向对齐 166

10.2.2  设置图片的纵向对齐 167

10.3  图文混排 169

10.3.1  设置文字环绕效果 169

10.3.2  设置图片与文字的间距 170

10.4  疑难解惑 171

10.5  跟我学上机 172

第11章  使用CSS 3美化网页背景与边框 173

11.1  使用CSS 3美化背景 174

11.1.1  设置背景颜色 174

11.1.2  设置背景图片 175

11.1.3  背景图片重复 176

11.1.4  背景图片显示 177

11.1.5  背景图片的位置 179

11.1.6  背景图片的大小 180

11.1.7  背景的显示区域 181

11.1.8  背景图像的裁剪区域 182

11.1.9  背景复合属性 183

11.2  使用CSS 3美化边框 184

11.2.1  设置边框的样式 185

11.2.2  设置边框的颜色 186

11.2.3  设置边框的线宽 187

11.2.4  设置边框的复合属性 189

11.3  设置边框的圆角效果 189

11.3.1  设置圆角边框 190

11.3.2  指定两个圆角半径 190

11.3.3  绘制四个不同角的圆角边框 191

11.3.4  绘制不同种类的边框 193

11.4  疑难解惑 194

11.5  跟我学上机 195

第12章  使用CSS 3美化超级链接和光标 197

12.1  使用CSS 3来美化超级链接 198

12.1.1  改变超级链接的基本样式 198

12.1.2  设置带有提示信息的超级链接 199

12.1.3  设置超级链接的背景图 200

12.1.4  设置超级链接的按钮效果 201

12.2  使用CSS 3美化光标特效 202

12.2.1  使用CSS 3控制光标箭头 202

12.2.2  设置光标变幻式超链接 204

12.3  设计一个简单的导航栏 205

12.4  疑难解惑 206

12.5  跟我学上机 207

第13章  使用CSS 3美化表格和表单 209

13.1  美化表格的样式 210

13.1.1  设置表格边框的样式 210

13.1.2  设置表格边框的宽度 212

13.1.3  设置表格边框的颜色 213

13.2  美化表单样式 214

13.2.1  美化表单中的元素 214

13.2.2  美化提交按钮 216

13.2.3  美化下拉菜单 217

13.3  疑难解惑 219

13.4  跟我学上机 219

第14章  使用CSS 3美化网页菜单 221

14.1 使用CSS 3美化项目列表 222

14.1.1  美化无序列表 222

14.1.2  美化有序列表 223

14.1.3  美化自定义列表 225

14.1.4  制作图片列表 226

14.1.5  缩进图片列表 227

14.1.6  列表的复合属性 228

14.2  使用CSS 3制作网页菜单 230

14.2.1  制作无须表格的菜单 230

14.2.2  制作水平和垂直菜单 232

14.3  疑难解惑 234

14.4  跟我学上机 234

第15章  使用滤镜美化网页元素 237

15.1  滤镜概述 238

15.2  设置基本滤镜效果 239

15.2.1  高斯模糊滤镜 239

15.2.2  明暗度滤镜 240

15.2.3  对比度滤镜 241

15.2.4  阴影滤镜 242

15.2.5  灰度滤镜 243

15.2.6  反相滤镜 244

15.2.7  透明度滤镜 244

15.2.8  饱和度滤镜 245

15.3  使用滤镜制作动画效果 246

15.4  疑难解惑 247

15.5  跟我学上机 248

第16章  CSS 3中的动画效果 249

16.1  了解过渡效果 250

16.2  添加过渡效果 250

16.3  了解动画效果 252

16.4  添加动画效果 253

16.5  了解2D转换效果 254

16.6  添加2D转换效果 255

16.6.1  添加移动效果 255

16.6.2  添加旋转效果 256

16.6.3  添加缩放效果 257

16.6.4  添加倾斜效果 258

16.7  添加3D转换效果 259

16.8  疑难解惑 261

16.9  跟我学上机 262

第17章  HTML 5中的文件与拖放 263

17.1　选择文件 264

17.1.1  选择单个文件 264

17.1.2  选择多个文件 264

17.2　使用FileReader接口读取文件 265

17.2.1　检测浏览器是否支持FileReader接口 265

17.2.2　FileReader接口的方法 265

17.3　使用HTML 5实现文件的拖放效果 269

17.3.1　认识文件拖放的过程 269

17.3.2　浏览器支持情况 270

17.3.3　在网页中拖放图片 270

17.4　在网页中来回拖放图片 271

17.5  在网页中拖放文字 272

17.6  疑难解惑 274

17.7  跟我学上机 275

第18章  定位地理位置技术 277

18.1  Geolocation API获取地理位置 278

18.1.1　地理定位的原理 278

18.1.2　获取定位信息的方法 278

18.1.3　常用地理定位方法 278

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

18.1.5　指定纬度和经度坐标 280

18.1.6　获取当前位置的经度与纬度 281

18.1.7　处理错误和拒绝 282

18.2　目前浏览器对地理定位的支持情况 283

18.3　在网页中调用Google地图 283

18.4  疑难解惑 286

18.5  跟我学上机 286

第19章  数据存储和通信技术 287

19.1　认识Web存储 288

19.1.1　本地存储和Cookie的区别 288

19.1.2　Web存储方法 288

19.2　使用HTML 5 Web Storage API 288

19.2.1　测试浏览器的支持情况 289

19.2.2　使用sessionStorage方法创建对象 289

19.2.3　使用localStorage方法创建对象 291

19.2.4　Web Storage API的其他操作 292

19.2.5　使用JSON对象存取数据 293

19.3  常见浏览器对Web存储的支持情况 295

19.4  跨文档消息传输 295

19.4.1  跨文档消息传输的基本知识 295

19.4.2  跨文档通信应用测试 296

19.5  WebSocket API 298

19.5.1  什么是WebSocket API 298

19.5.2  WebSocket通信基础 298

19.5.3  服务器端使用WebSocket API 299

19.5.4  客户机端使用WebSocket API 302

19.6  制作简单Web留言本 303

19.7  编写简单的WebSocket服务器 305

19.8  疑难解惑 309

19.9  跟我学上机 309

第20章  处理线程和服务器发送事件 311

20.1  Web Worker 312

20.1.1　Web Worker概述 312

20.1.2　线程中常用的变量、函数与类 312

20.1.3　与线程进行数据的交互 313

20.2　线程嵌套 315

20.2.1  单层线程嵌套 315

20.2.2　多个子线程中的数据交互 317

20.3　服务器发送事件概述 318

20.4　服务器发送事件的实现过程 319

20.4.1　检测浏览器是否支持Server-Sent事件 319

20.4.2　使用EventSource 对象 319

20.4.3　编写服务器端代码 320

20.5　创建Web Worker计数器 321

20.6  服务器发送事件实战 322

20.7  疑难解惑 323

20.8  跟我学上机 324

第21章  CSS 3定位与DIV布局核心技术 325

21.1  了解块元素和行内元素 326

21.1.1  块元素和行内元素的应用 326

21.1.2  div元素和span元素的区别 328

21.2  盒子模型 329

21.2.1  盒子模型的概念 329

21.2.2  定义网页的border区域 329

21.2.3  定义网页的padding区域 331

21.2.4  定义网页的margin区域 332

21.3  CSS 3新增的弹性盒模型 335

21.3.1  定义盒子的布局方向(box-orient) 336

21.3.2  定义盒子元素的排列顺序(box-direction) 337

21.3.3  定义盒子元素的位置(box-ordinal-group) 338

21.3.4  定义盒子的弹性空间(box-flex) 340

21.3.5  管理盒子空间(box-pack和box-align) 342

21.3.6  盒子空间的溢出管理(box-lines) 343

21.4  设计淘宝导购菜单 345

21.5  疑难解惑 348

21.6  跟我学上机 348

第22章  项目实训1——设计在线购物网站 351

22.1  整体布局 352

22.1.1  设计分析 352

22.1.2  排版架构 352

22.2  模块分割 353

22.2.1  Logo与导航区 353

22.2.2  Banner与资讯区 355

22.2.3  产品类别区域 356

22.2.4  页脚区域 358

22.3  设置链接 358

第23章  项目实训2——设计商业门户网站 359

23.1  整体设计 360

23.1.1  颜色应用分析 360

23.1.2  架构布局分析 360

23.2  主要模块设计 361

23.2.1  网页整体样式 362

23.2.2  网页局部样式 363

23.2.3  顶部模块代码 365

23.2.4  中间主体代码 366

23.2.5  底部模块代码 369

23.3  网站调整 369

23.3.1  部分内容调整 369

23.3.2  模块调整 369

23.3.3  调整后预览 371