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

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

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

第Ⅰ篇 HTML5网页设计3

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

1.1HTML的基本概念4

1.1.1HTML的发展历程4

1.1.2什么是HTML4

1.1.3HTML5文件的基本结构5

1.2HTML5的优势5

1.2.1解决了跨浏览器的问题5

1.2.2增加了多个新特性5

1.2.3用户优先的原则6

1.2.4化繁为简的优势7

1.3HTML5网页的开发环境7

1.3.1使用记事本手工编写HTML57

1.3.2使用Dreamweaver CC编写HTML文件8

1.4使用浏览器查看HTML5文件12

1.4.1查看页面效果12

1.4.2查看源文件13

1.5疑难解惑14

第2章 HTML5网页的文档结构15

2.1HTML5文件的基本结构16

2.1.1HTML5页面的整体结构16

2.1.2HTML5新增的结构标记16

2.2HTML5基本标记详解17

2.2.1文档类型说明17

2.2.2HTML标记17

2.2.3头标记18

2.2.4网页的主体标记20

2.2.5页面注释标记21

2.3HTML5语法的变化22

2.3.1标签不再区分大小写22

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

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

2.4综合案例——符合W3C标准的HTML5网页23

2.5跟我学上机——简单的HTML5网页25

2.6疑难解惑26

第3章 HTML5网页中的文本、超链接和图像27

3.1在网页中添加文本28

3.1.1普通文本的添加28

3.1.2特殊字符文本的添加28

3.1.3使用HTML5标记添加特殊文本30

3.2文本排版32

3.2.1换行标记32

3.2.2段落标记32

3.2.3标题标记33

3.3文字列表34

3.3.1建立无序列表34

3.3.2建立有序列表36

3.3.3建立不同类型的无序列表36

3.3.4建立不同类型的有序列表37

3.3.5建立嵌套列表38

3.3.6自定义列表39

3.4超链接标记40

3.4.1设置文本和图片的超链接40

3.4.2创建指向不同目标类型的超链接40

3.4.3设置以新窗口显示超链接页面42

3.4.4链接到同一页面的不同位置43

3.5创建热点区域44

3.6网页中的图片45

3.6.1在网页中插入图像45

3.6.2设置图像的宽度和高度47

3.6.3设置图像的提示文字48

3.6.4将图片设置为网页背景49

3.6.5排列图像50

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

3.8跟我学上机——在线购物网站的产品展示效果52

3.9疑难解惑53

第4章 使用HTML5创建表格55

4.1表格的基本结构56

4.2创建表格57

4.2.1创建普通表格57

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

4.3编辑表格59

4.3.1定义表格的边框类型59

4.3.2定义表格的表头59

4.3.3设置表格背景60

4.3.4设置单元格的背景61

4.3.5合并单元格62

4.3.6排列单元格中的内容65

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

4.4完整的表格标记67

4.5综合案例——制作计算机报价表68

4.6跟我学上机——制作学生成绩表70

4.7疑难解惑74

第5章 使用HTML5创建表单75

5.1表单概述76

5.2表单基本元素的使用76

5.2.1单行文本输入框77

5.2.2多行文本输入框77

5.2.3密码输入框78

5.2.4单选按钮78

5.2.5复选框79

5.2.6列表框80

5.2.7普通按钮81

5.2.8提交按钮81

5.2.9重置按钮82

5.3表单高级元素的使用83

5.3.1url属性的使用83

5.3.2email属性的使用83

5.3.3date属性和time属性的使用84

5.3.4number属性的使用85

5.3.5range属性的使用86

5.3.6required属性的使用86

5.4综合案例——创建用户反馈表单87

5.5跟我学上机——制作用户注册表单88

5.6疑难解惑90

第6章 HTML5中的音频和视频91

6.1audio标签92

6.1.1audio标签概述92

6.1.2audio标签的属性93

6.1.3浏览器对audio标签的支持情况93

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

6.2.1添加自动播放的音频文件94

6.2.2添加带有控件的音频文件94

6.2.3添加循环播放的音频文件95

6.2.4添加预播放的音频文件95

6.3video标签96

6.3.1video标签概述96

6.3.2video标签的属性97

6.3.3浏览器对video标签的支持情况98

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

6.4.1添加自动播放的视频文件98

6.4.2添加带有控件的视频文件99

6.4.3添加循环播放的视频文件99

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

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

6.7疑难解惑101

第7章 使用HTML5绘制图形103

7.1添加canvas的步骤104

7.2绘制基本形状104

7.2.1绘制矩形105

7.2.2绘制圆形105

7.2.3使用moveTo与lineTo绘制直线107

7.2.4使用bezierCurveTo绘制贝塞尔曲线108

7.3绘制渐变图形109

7.3.1绘制线性渐变109

7.3.2绘制径向渐变111

7.4绘制变形图形112

7.4.1绘制平移效果的图形112

7.4.2绘制缩放效果的图形113

7.4.3绘制旋转效果的图形114

7.4.4绘制组合效果的图形115

7.4.5绘制带阴影的图形117

7.5使用图像118

7.5.1绘制图像118

7.5.2平铺图像119

7.5.3裁剪图像121

7.5.4图像的像素化处理122

7.6绘制文字124

7.7图形的保存与恢复126

7.7.1保存与恢复状态126

7.7.2保存文件127

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

7.9跟我学上机——绘制商标132

7.10疑难解惑134

第Ⅱ篇 CSS3美化网页137

第8章 CSS3概述与基本语法137

8.1CSS3概述138

8.1.1CSS3的功能138

8.1.2浏览器与CSS3138

8.1.3CSS3的基础语法139

8.1.4CSS3的常用单位139

8.2编辑和浏览CSS3144

8.2.1手工编写CSS3144

8.2.2用Dreamweaver编写CSS145

8.3在HTML5中使用CSS3的方法147

8.3.1行内样式147

8.3.2内嵌样式148

8.3.3链接样式149

8.3.4导入样式150

8.3.5优先级问题151

8.4CSS3的常用选择器154

8.4.1标签选择器154

8.4.2类选择器155

8.4.3ID选择器155

8.4.4全局选择器156

8.4.5组合选择器157

8.4.6继承选择器158

8.4.7伪类选择器159

8.5选择器声明160

8.5.1集体声明160

8.5.2多重嵌套声明161

8.6综合案例——制作炫彩网站Logo161

8.7跟我学上机——制作学生信息统计表164

8.8疑难解惑166

第9章 使用CSS3美化网页字体与段落167

9.1美化网页文字168

9.1.1设置文字的字体168

9.1.2设置文字的字号169

9.1.3设置字体风格170

9.1.4设置加粗字体171

9.1.5将小写字母转为大写字母171

9.1.6设置字体的复合属性172

9.1.7设置字体颜色173

9.2设置文本的高级样式174

9.2.1设置文本阴影效果174

9.2.2设置文本的溢出效果176

9.2.3设置文本的控制换行177

9.2.4保持字体尺寸不变177

9.3美化网页中的段落178

9.3.1设置单词之间的间隔179

9.3.2设置字符之间的间隔179

9.3.3设置文字的修饰效果180

9.3.4设置垂直对齐方式181

9.3.5转换文本的大小写183

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

9.3.7设置文本的缩进效果185

9.3.8设置文本的行高186

9.3.9文本的空白处理187

9.3.10文本的反排188

9.4综合案例——设置网页标题189

9.5跟我学上机——制作新闻页面191

9.6疑难解惑192

第10章 使用CSS3美化网页图片193

10.1图片缩放194

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

10.1.2使用CSS3中的max-width和max-height缩放图片194

10.1.3使用CSS3中的width和height缩放图片195

10.2设置图片的对齐方式196

10.2.1设置图片的横向对齐196

10.2.2设置图片的纵向对齐197

10.3图文混排199

10.3.1设置文字环绕效果199

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

10.4综合案例——制作学校宣传单202

10.5跟我学上机——制作简单的图文混排网页204

10.6疑难解惑206

第11章 使用CSS3美化网页背景与边框207

11.1使用CSS3美化背景208

11.1.1设置背景颜色208

11.1.2设置背景图片209

11.1.3背景图片重复210

11.1.4背景图片显示212

11.1.5背景图片的位置213

11.1.6背景图片的大小215

11.1.7背景的显示区域216

11.1.8背景图像的裁剪区域217

11.1.9背景复合属性218

11.2使用CSS3美化边框219

11.2.1设置边框的样式220

11.2.2设置边框的颜色221

11.2.3设置边框的线宽222

11.2.4设置边框的复合属性224

11.3设置边框的圆角效果225

11.3.1设置圆角边框225

11.3.2指定两个圆角半径226

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

11.3.4绘制不同种类的边框229

11.4综合案例——制作简单的公司主页231

11.5跟我学上机——制作简单的生活资讯主页234

11.6疑难解惑235

第12章 使用CSS3美化超级链接和鼠标237

12.1使用CSS3来美化超链接238

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

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

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

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

12.2使用CSS3美化鼠标特效242

12.2.1使用CSS3控制鼠标箭头242

12.2.2设置鼠标变幻式超链接244

12.2.3设置网页页面滚动条244

12.3综合案例1——图片版本的超级链接246

12.4综合案例2——关于鼠标特效248

12.5跟我学上机——制作一个简单的导航栏250

12.6疑难解惑252

第13章 使用CSS3美化表格和表单的样式253

13.1美化表格的样式254

13.1.1设置表格边框的样式254

13.1.2设置表格边框的宽度256

13.1.3设置表格边框的颜色257

13.2美化表单样式258

13.2.1美化表单中的元素258

13.2.2美化提交按钮261

13.2.3美化下拉菜单262

13.3综合案例——制作用户登录页面263

13.4跟我学上机——制作用户注册页面265

13.5疑难解惑268

第14章 使用CSS3美化网页菜单269

14.1使用CSS3美化项目列表270

14.1.1美化无序列表270

14.1.2美化有序列表271

14.1.3美化自定义列表273

14.1.4制作图片列表274

14.1.5缩进图片列表276

14.1.6列表的复合属性277

14.2使用CSS3制作网页菜单278

14.2.1制作无须表格的菜单278

14.2.2制作水平和垂直菜单280

14.3综合案例——模拟SOSO导航栏282

14.4跟我学上机——将段落转变成列表285

14.5疑难解惑287

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

15.1滤镜概述290

15.2设置基本滤镜效果291

15.2.1高斯模糊（blur）滤镜291

15.2.2明暗度（brightness）滤镜292

15.2.3对比度（contrast）滤镜293

15.2.4阴影（drop-shadow）滤镜294

15.2.5灰度（grayscale）滤镜295

15.2.6反相（invert）滤镜296

15.2.7透明度（opacity）滤镜297

15.2.8饱和度（saturate）滤镜298

15.2.9深褐色（sepia）滤镜299

15.3综合案例1——使用复合滤镜效果300

15.4综合案例2——使用滤镜制作动画效果301

15.5跟我学上机——制作色相旋转（hue-rotate）滤镜303

15.6疑难解惑304

第Ⅲ篇 高级提升技能307

第16章 CSS3中的动画效果307

16.1了解过渡效果308

16.2添加过渡效果308

16.3了解动画效果310

16.4添加动画效果311

16.5了解2D转换效果312

16.6添加2D转换效果313

16.6.1添加移动效果313

16.6.2添加旋转效果314

16.6.3添加缩放效果315

16.6.4添加倾斜效果316

16.7添加3D转换效果318

16.8综合案例——添加综合过渡效果320

16.9跟我学上机——添加综合变幻效果321

16.10疑难解惑322

第17章 HTML5中的文件与拖放323

17.1选择文件324

17.1.1选择单个文件324

17.1.2选择多个文件324

17.2使用FileReader接口读取文件325

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

17.2.2FileReader接口的方法326

17.2.3使用readAsDataURL方法预览图片326

17.2.4使用readAsText方法读取文本文件328

17.3使用HTML5实现文件的拖放329

17.3.1认识文件拖放的过程330

17.3.2浏览器支持情况330

17.3.3在网页中拖放图片331

17.4综合案例——在网页中来回拖放图片332

17.5跟我学上机——在网页中拖放文字333

17.6疑难解惑335

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

18.1Geolocation API获取地理位置338

18.1.1地理定位的原理338

18.1.2获取定位信息的方法338

18.1.3常用地理定位方法338

18.1.4判断浏览器是否支持HTML5获取地理位置信息339

18.1.5指定纬度和经度坐标340

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

18.1.7处理错误和拒绝343

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

18.3综合案例——在网页中调用Google地图344

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

18.5疑难解惑348

第19章 Web存储和通信技术349

19.1认识Web存储350

19.1.1本地存储和Cookies的区别350

19.1.2Web存储方法350

19.2使用HTML5 Web Storage API350

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

19.2.2使用sessionStorage方法创建对象352

19.2.3使用localStorage方法创建对象353

19.2.4Web Storage API的其他操作355

19.2.5使用JSON对象存取数据355

19.3在本地建立数据库358

19.3.1本地数据库概述358

19.3.2用executeSql来执行查询358

19.3.3使用transaction方法处理事件359

19.4目前浏览器对Web存储的支持情况359

19.5跨文档消息传输359

19.5.1跨文档消息传输的基本知识359

19.5.2案例1——跨文档通信应用测试360

19.6WebSocket API362

19.6.1什么是WebSocket API362

19.6.2WebSocket通信基础362

19.6.3案例2——服务器端使用Web Socket API364

19.6.4案例3——客户机端使用WebSocket API367

19.7综合案例——制作简单Web留言本367

19.8跟我学上机——编写简单的WebSocket服务器370

19.9疑难解惑374

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

20.1Web Worker376

20.1.1Web Worker概述376

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

20.1.3案例1——前台与后台线程进行数据的交互377

20.2线程嵌套379

20.2.1案例2——单线程嵌套379

20.2.2案例3——多个子线程中的数据交互381

20.3服务器发送事件概述383

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

20.4.1检测浏览器是否支持Server-Sent Event383

20.4.2使用EventSource对象384

20.4.3编写服务器端代码384

20.5综合案例——创建Web Worker计数器385

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

20.7疑难解惑388

第21章 CSS3定位与DIV布局核心技术389

21.1了解块级元素和行内级元素390

21.1.1块级元素和行内级元素的应用390

21.1.2div标记和span标记的区别392

21.2盒子模型392

21.2.1盒子模型的概念393

21.2.2定义网页的border区域393

21.2.3定义网页的padding区域394

21.2.4定义网页的margin区域395

21.3CSS3新增的弹性盒模型399

21.3.1定义盒子的布局取向（box-orient）399

21.3.2定义盒子的布局顺序（box-direction）400

21.3.3定义盒子布局的位置（box-ordinal-group）402

21.3.4定义盒子的弹性空间（box-flex）403

21.3.5管理盒子空间（box-pack和box-align）405

21.3.6盒子空间的溢出管理（box-lines）407

21.4综合案例——图文排版效果408

21.5跟我学上机——淘宝导购菜单411

21.6疑难解惑414

第Ⅳ篇 综合案例实战417

第22章 网页布局剖析与制作417

22.1固定宽度网页剖析与布局418

22.1.1网页单列布局模式418

22.1.2网页1-2-1型布局模式421

22.1.3网页1-3-1型布局模式425

22.2自动缩放网页1-2-1型布局模式428

22.2.1“1-2-1”等比例变宽布局428

22.2.2“1-2-1”单列变宽布局429

22.3自动缩放网页1-3-1型布局模式430

22.3.1“1-3-1”三列宽度等比例布局430

22.3.2“1-3-1”单侧列宽度固定的变宽布局430

22.3.3“1-3-1”中间列宽度固定的变宽布局434

22.3.4“1-3-1”双侧列宽度固定的变宽布局437

22.4分列布局背景色的使用440

22.4.1设置固定宽度布局的列背景色440

22.4.2设置特殊宽度变化布局的列背景色441

22.4.3设置单列宽度变化布局的列背景色443

22.5综合案例——设置多列等比例宽度变化布局的列背景445

22.6跟我学上机——“1-3-1”中列和左侧列宽度固定的变宽布局447

22.7疑难解惑450

第23章 设计企业门户类网页451

23.1构思布局452

23.1.1设计分析452

23.1.2排版架构452

23.2模块分割453

23.2.1Logo与导航菜单453

23.2.2左侧的文本介绍455

23.2.3右侧的导航链接457

23.2.4版权信息458

23.3整体调整459

23.4疑难解惑460

第24章 设计在线购物类网页461

24.1整体布局462

24.1.1设计分析462

24.1.2排版架构462

24.2模块分割463

24.2.1Logo与导航区463

24.2.2Banner与资讯区465

24.2.3产品类别区域466

24.2.4页脚区域468

24.3设置链接468

24.4疑难解惑468