Web前端开发案例教程（HTML5+CSS3）（微课版）（第2版）

图书标准信息

• 作者 李志云 董文华
• 出版社 人民邮电出版社
• 出版时间 2023-01
• 版次 2
• ISBN 9787115600233
• 定价 59.80元
• 装帧 其他
• 开本 其他
• 纸张 胶版纸
• 页数 275页
• 字数 502千字

【内容简介】

本书主要以未来信息学院网站为载体，介绍如何利用最新Web前端开发技术HTML5和CSS3等制作静态网站。全书共划分为12个任务，将未来信息学院网站项目拆分为前10个任务，每个任务实现一个相对独立的功能；任务11在学习前面任务的基础上，按照真实网站开发流程，完成未来信息学院网站整体的设计与实现；任务12完成化妆品公司网站的设计与实现，该网站充分利用CSS3的过渡、变形等属性实现图片的变换和旋转等效果，拓宽网站开发的思路。
  本书可以作为高职高专院校计算机相关专业“Web前端开发”课程的教材，也可以作为Web前端开发爱好者的学习参考书。

【作者简介】

李志云，副教授，山东信息职业技术学院教师，主编《数据库开发实用教程—基于Visual Basic》《Visual c#2005数据库开发案例教程》《网页设计与制作案例教程（HTML CSS DIV JavaScript）》等教材，发表论文20余篇。

【目录】

任务1 创建第一个HTML5网页 1

1.1 任务描述 1

1.2 知识准备 1

1.2.1 认识Web前端开发 1

1.2.2 Web相关概念 2

1.2.3 HTML5概述 4

1.2.4 常用的浏览器 4

1.2.5 网页编辑软件 5

1.3 任务实现 5

任务小结 8

习题1 8

实训1 9

扩展阅读 9

任务2 搭建简单学院网站 11

2.1 任务描述 11

2.2 知识准备 12

2.2.1 HTML5文档的基本结构 12

2.2.2 HTML标记及其属性 13

2.2.3 HTML文本标记 14

2.2.4 HTML列表标记 19

2.2.5 HTML超链接标记 24

2.2.6 HTML图像标记 27

2.3 任务实现 30

2.3.1 创建项目 30

2.3.2 创建网站首页 30

2.3.3 创建学院简介页面 31

2.3.4 创建学院新闻页面 32

2.3.5 创建新闻详情页面 33

任务小结 34

习题2 35

实训2 37

扩展阅读 38

任务3 美化简单学院网站 39

3.1 任务描述 39

3.2 知识准备 40

3.2.1 什么是CSS 40

3.2.2 引入CSS样式 40

3.2.3 CSS常用选择器 44

3.2.4 CSS常用文本属性 50

3.2.5 CSS的高级特性 55

3.3 任务实现 58

3.3.1 美化网站首页 58

3.3.2 美化学院简介页面 59

3.3.3 美化学院新闻页面 61

3.3.4 美化新闻详情页面 62

任务小结 64

习题3 65

实训3 66

扩展阅读 67

任务4 制作学院介绍页面 68

4.1 任务描述 68

4.2 知识准备 69

4.2.1 盒子模型的概念 69

4.2.2 盒子模型的相关属性 70

4.2.3 背景属性 77

4.3 任务实现 86

4.3.1 搭建学院介绍页面结构 86

4.3.2 定义学院介绍页面CSS样式 87

任务小结 88

习题4 89

实训4 90

扩展阅读 91

任务5 制作学院网站导航条 92

5.1 任务描述 92

5.2 知识准备 93

5.2.1 无序列表样式设置 93

5.2.2 超链接样式设置 94

5.2.3 元素的类型与转换 96

5.3 任务实现 99

5.3.1 搭建学院网站导航条结构 99

5.3.2 定义学院网站导航条CSS样式 101

任务小结 103

习题5 103

实训5 104

扩展阅读 105

任务6 制作学院新闻块 106

6.1 任务描述 106

6.2 知识准备 107

6.2.1 元素的浮动 107

6.2.2 元素的定位 110

6.2.3 块元素间的外边距 115

6.3 任务实现 122

6.3.1 搭建学院新闻块页面结构 122

6.3.2 定义学院新闻块CSS样式 124

任务小结 126

习题6 127

实训6 128

扩展阅读 129

任务7 制作学生信息表 130

7.1 任务描述 130

7.2 知识准备 130

7.2.1 表格标记 131

7.2.2 合并单元格 132

7.2.3 使用CSS定义表格样式 134

7.3 任务实现 136

7.3.1 搭建学生信息表结构 136

7.3.2 定义学生信息表CSS样式 138

任务小结 139

习题7 140

实训7 140

扩展阅读 141

任务8

制作学生信息注册表单 142

8.1 任务描述 142

8.2 知识准备 143

8.2.1 认识表单 143

8.2.2 表单标记 143

8.2.3 表单控件 144

8.2.4 使用CSS定义表单样式 150

8.3 任务实现 152

8.3.1 搭建学生信息注册表单页面结构 152

8.3.2 使用CSS定义学生信息注册表单页面样式 155

任务小结 156

习题8 158

实训8 159

扩展阅读 160

任务9 布局学院网站主页 161

9.1 任务描述 161

9.2 知识准备 161

9.2.1 HTML5新增结构标记 162

9.2.2 HTML5 CSS3布局 167

9.3 任务实现 174

9.3.1 搭建布局块结构 174

9.3.2 定义布局块CSS样式 176

任务小结 179

习题9 179

实训9 180

扩展阅读 180

任务10 使用CSS3实现动画效果 182

10.1 任务描述 182

10.2 知识准备 183

10.2.1 过渡属性 183

10.2.2 变形属性 188

10.2.3 动画属性 198

10.3 任务实现 203

10.3.1 搭建照片墙页面结构 203

10.3.2 定义照片墙页面CSS样式 204

任务小结 206

习题10 206

实训10 207

扩展阅读 209

任务11 完整项目：制作学院网站 210

11.1 任务描述 210

11.2 网站规划 211

11.3 效果图设计 212

11.3.1 效果图设计原则 212

11.3.2 效果图设计步骤 213

11.3.3 效果图切片导出网页 218

11.4 制作网站主页 218

11.5 制作新闻列表页 237

11.6 制作新闻详情页 243

11.7 制作视频宣传页 245

11.8 添加网页动态效果 246

任务小结 247

扩展阅读 247

任务12 完整项目：制作化妆品网站 249

12.1 任务描述 249

12.2 网站规划 250

12.2.1 网站需求分析 250

12.2.2 网站的风格定位 251

12.2.3 规划草图 251

12.2.4 素材准备 251

12.3 制作网站主页 252

12.4 制作网站登录页面 267

12.5 制作网站注册页面 270

任务小结 273

扩展阅读 273

参考文献 276