HTML5+CSS3网页制作基础培训教程

图书标准信息

• 作者 张辉、祁东升 著
• 出版社 人民邮电出版社
• 出版时间 2021-01
• 版次 1
• ISBN 9787115550828
• 定价 59.80元
• 装帧 平装
• 开本 16开
• 纸张 胶版纸
• 页数 288页
• 字数 381千字

【内容简介】

本书共13章，主要内容包括HTML5入门基础、HTML5结构元素、HTML5页面基本元素、HTML5网页文本与段落信息组织、使用CSS设计表单和表格样式、HTML5音频与视频、HTML5画布canvas与SVG、CSS语言基础、设置CSS基本样式、移动网页设计基础CSS3、CSS盒子模型、用CSS定位控制网页布局和企业网站设计。

本书内容翔实，结构清晰，讲解循序渐进，并注意各个章节与实例之间的呼应和对照。

本书还有丰富的配套资源，如书中案例源文件、典型实例教学视频、PPT教学课件、教学大纲和教学规划参考等。 

本书适合网页设计与制作人员、HTML和CSS开发初学者、前端开发爱好者、网页设计爱好者、培训机构学员、网站重构工程师、从事后端开发但对前端开发感兴趣的人员、网站编辑或网站运营人员学习或参考。

【作者简介】

张辉 拥有多年计算机网络教学经验，参与编写多本网页前端开发教材。擅长网站设计、网站Web前端开发和网站后台开发，对HTML、CSS、 JavaScript等网页前端技术有着深入的研究和独到的见解。

祁东升 拥有多年Web应用、开发技术教学经验，精通计算机网络开发技术，HTML5、 JavaScript CSS3、 Dreamweaver等网络开发技术有很深入的研究和丰富的实践经验。

【目录】

第 1章 HTML5入门基础 11

1．1 认识HTML5 12

1．2 HTML5与HTML4的区别 13

1．2．1 HTML5的语法变化 13

1．2．2 HTML5中的标签方法 13

1．2．3 HTML5语法中的3个要点 14

1．2．4 HTML5与HTML4在搜索引擎优化方面的对比 14

1．3 HTML5新增的元素和废除的元素 15

1．3．1 新增的结构元素 15

1．3．2 新增的块级元素 17

1．3．3 新增的行内语义元素 19

1．3．4 新增的嵌入多媒体元素与交互性元素 22

1．3．5 新增的input元素的类型 23

1．3．6 废除的元素 24

1．3．7 课堂练习――使用记事本手工编写HTML代码 25

1．4 课后习题 26

第 2章 HTML5结构元素 27

2．1 新增的主体结构元素 28

2．1．1 article元素 28

2．1．2 section元素 29

2．1．3 nav元素 29

2．1．4 aside元素 30

2．2 新增的非主体结构元素 31

2．2．1 课堂案例――创建企业简介网页 31

2．2．2 header元素 33

2．2．3 hgroup元素 33

2．2．4 footer元素 34

2．2．5 address元素 35

2．2．6 课堂练习――用HTML5中的结构元素布局主页 35

2．3 课后习题 38

第3章 HTML5页面基本元素 39

3．1 页面头部元素head 40

3．2 页面标题元素title 40

3．3 元信息元素meta 41

3．3．1 定义网页语言 41

3．3．2 定义页面关键字 41

3．3．3 设置页面说明 42

3．3．4 设置页面跳转 42

3．3．5 设置页面的作者信息 43

3．3．6 页面的编辑工具 43

3．4 页面主体元素body 44

3．4．1 课堂案例――用页面主体元素构建一个网页 44

3．4．2 主体元素的背景属性 45

3．4．3 主体元素的背景图片属性 46

3．4．4 主体元素的文本属性 47

3．4．5 浏览器中的边界属性 47

3．5 脚本元素script 48

3．6 创建样式元素style 49

课堂练习――创建基本的HTML文件 50

3．7 课后习题 51

第4章 HTML5网页文本与段落信息组织 52

4．1 文本的基本标签 53

4．1．1 课堂案例――创建旅游景点介绍网页 53

4．1．2 设置字体 54

4．1．3 设置字号 55

4．1．4 设置颜色 56

4．1．5 使用～设置标题 56

4．2 文本的分段与换行 57

4．2．1 课堂案例――创建酒店网页 57

4．2．2 换行标签

 58

4．2．3 分段标签

 59
4．2．4 取消换行标签 60
4．3 文本的样式设置 60
4．3．1 课堂案例――设置学校教育网页文本样式 61
4．3．2 斜体显示标签、和 62
4．3．3 加粗显示标签和 63
4．3．4 下标标签和上标标签 63
4．3．5 放大字号标签 64
4．3．6 缩小字号标签 65
4．4 水平分隔线标签

 66

4．4．1 课堂案例――在网页中插入水平线 66

4．4．2 高度属性size和宽度属性width 67

4．4．3 阴影属性noshade 67

4．4．4 颜色属性color 68

4．4．5 对齐属性align 69

4．4．6 课堂练习――设置网页文本及段落格式 70

4．5 课后习题 71

第5章 使用CSS设计表单和表格样式 72

5．1 表单标签 73

5．1．1 程序提交action 73

5．1．2 表单名称name 73

5．1．3 传送方法method 74

5．1．4 编码方式enctype 74

5．1．5 目标显示方式target 75

5．2 插入表单对象 75

5．2．1 课堂案例――在网页中插入表单对象 76

5．2．2 插入文字字段text 79

5．2．3 插入密码域password 80

5．2．4 插入单选按钮radio 81

5．2．5 插入复选框checkbox 81

5．2．6 插入普通按钮button 82

5．2．7 插入提交按钮submit 83

5．2．8 重置按钮reset 84

5．2．9 插入图像域image 84

5．2．10 插入隐藏域hidden 85

5．2．11 插入文件域file 86

5．3 菜单和列表 87

5．3．1 插入下拉菜单 87

5．3．2 插入列表项 88

5．3．3 课堂练习――用户注册表单页面制作实例 89

5．4 课后习题 92

第6章 HTML5音频与视频 93

6．1 HTML5多媒体技术概述 94

6．1．1 音频文件格式 94

6．1．2 视频文件格式 94

6．2 HTML5 视频video 94

6．2．1 课堂案例――在网页中添加视频文件 95

6．2．2 标签概述 96

6．2．3 链接不同的视频文件 97

6．3 HTML5 音频audio 98

6．3．1 课堂案例――在网页中插入音频 98

6．3．2 audio元素 100

6．3．3 隐藏audio音频播放器 100

6．3．4 audio元素的事件 101

6．4 音频与视频相关属性、方法与事件 103

6．4．1 音频与视频相关属性 103

6．4．2 音频与视频相关方法 104

6．4．3 音频与视频相关事件 104

6．4．4 课堂练习――用脚本控制音乐播放 105

6．5 课后习题 107

第7章 HTML5画布canvas与SVG 108

7．1 使用画布canvas绘制基本图形 109

7．1．1 课堂案例――使用canvas元素绘制花朵 109

7．1．2 canvas元素 111

7．1．3 绘制直线 112

7．1．4 绘制矩形 113

7．1．5 绘制三角形 115

7．1．6 绘制圆弧 116

7．1．7 绘制贝塞尔曲线 118

7．2 更多的颜色和样式选项 119

7．2．1 课堂案例――用绘制的线条组合几何体动画 119

7．2．2 应用不同的线型 121

7．2．3 绘制线性渐变 123

7．2．4 绘制径向渐变 124

7．2．5 设置图形的透明度 126

7．2．6 创建阴影 127

7．3 变换的使用 128

7．3．1 课堂案例――使用canvas元素绘制图像放大镜效果 128

7．3．2 平移变换 132

7．3．3 缩放变换 133

7．3．4 旋转变换 133

7．4 HTML5 SVG 134

7．4．1 课堂案例――制作动画 135

7．4．2 SVG概述 136

7．4．3 绘制图形 136

7．4．4 文本与图像 139

7．4．5 笔画与填充 140

7．4．6 课堂练习――绘制精美时钟 141

7．5 课后习题 144

第8章 CSS语言基础 145

8．1 CSS入门 146

8．1．1 认识CSS 146

8．1．2 CSS的基本语法 146

8．2 基本CSS选择器 147

8．2．1 标签选择器 147

8．2．2 类选择器 147

8．2．3 ID选择器 148

8．3 在HTML中添加CSS的方法 149

8．3．1 课堂案例――为网页添加CSS样式 150

8．3．2 内嵌样式表 151

8．3．3 行内样式表 152

8．3．4 链接外部样式表 153

8．3．5 导入外部样式表 153

8．3．6 课堂练习――设计一个样式 154

8．4 课后习题 156

第9章 设置CSS基本样式 157

9．1 字体属性 158

9．1．1 课堂案例――使用CSS美化字体样式 158

9．1．2 字体font-family 159

9．1．3 字号font-size 160

9．1．4 文字风格font-style 161

9．1．5 加粗文字font-weight 162

9．1．6 小写字母转为大写字母font-variant 163

9．1．7 文字的复合属性font 164

9．2 颜色和背景属性 165

9．2．1 课堂案例――用CSS实现背景半透明效果 165

9．2．2 颜色属性color 167

9．2．3 背景颜色background-color 168

9．2．4 背景图像background-image 169

9．2．5 背景重复background-repeat 170

9．2．6 背景附件background-attachment 171

9．2．7 背景位置background-position 172

9．2．8 背景复合属性background 174

9．3 段落属性 175

9．3．1 课堂案例――设计网页文本段落样式 175

9．3．2 单词间隔word-spacing 176

9．3．3 字符间隔letter-spacing 177

9．3．4 文字修饰text-decoration 178

9．3．5 垂直对齐方式vertical-align 179

9．3．6 文本转换text-transform 180

9．3．7 水平对齐方式text-align 182

9．3．8 文本缩进text-indent 182

9．3．9 文本行高line-height 183

9．3．10 处理空白white-space 184

9．3．11 文本反排unicode-bidi和direction 185

9．4 列表属性 186

9．4．1 设计背景变换的导航菜单 186

9．4．2 列表符号list-style-type 188

9．4．3 图像符号list-style-image 190

9．4．4 列表缩进list-style-position 191

9．4．5 列表复合属性list-style 192

9．4．6 课堂练习――利用CSS制作竖排导航菜单 193

9．5 课后习题 194

第 10章 移动端网页设计基础CSS3 195

10．1 边框 196

10．1．1 课堂案例――制作美观的按钮效果 196

10．1．2 圆角边框 border-radius 197

10．1．3 边框图片border-image 200

10．1．4 边框阴影box-shadow 201

10．2 背景 203

10．2．1 课堂案例――控制网页背景属性 203

10．2．2 背景图片尺寸background-size 204

10．2．3 背景图片定位区域background-origin 205

10．2．4 背景裁剪区域background-clip 206

10．3 文本 207

10．3．1 课堂案例――制作3D眩光效果文字 208

10．3．2 文本阴影text-shadow 209

10．3．3 强制换行word-wrap 210

10．3．4 文本溢出text-overflow 210

10．3．5 文字描边text-stroke 212

10．3．6 文本填充颜色text-fill-color 212

10．4 多列 213

10．4．1 课堂案例――制作多列布局的Web页面 214

10．4．2 多列column-count 215

10．4．3 列的宽度column-width 216

10．4．4 列的间隔column-gap 217

10．4．5 列的规则column-rule 218

10．5 转换变形 220

10．5．1 课堂案例――设计3D几何体 220

10．5．2 移动translate() 223

10．5．3 旋转rotate() 224

10．5．4 缩放scale() 225

10．5．5 扭曲skew() 227

10．5．6 矩阵matrix() 228

10．5．7 课堂练习――美观的图片排列 228

10．6 课后习题 230

第 11章 CSS盒子模型 231

11．1 认识盒模型 232

11．2 外边距 233

11．2．1 课堂案例――设置盒子外边距 233

11．2．2 上外边距margin-top 233

11．2．3 右外边距margin-right 234

11．2．4 下外边距margin-bottom 235

11．2．5 左外边距margin-left 236

11．3 内边距 237

11．3．1 课堂案例――设置盒子内边距 237

11．3．2 上内边距padding-top 238

11．3．3 右内边距padding-right 239

11．3．4 下内边距padding-bottom 239

11．3．5 左内边距padding-left 240

11．4 边框 241

11．4．1 课堂案例――制作立体边框效果 241

11．4．2 边框样式border-style 241

11．4．3 边框宽度border-width 243

11．4．4 边框颜色border-color 245

11．4．5 边框属性border 246

11．5 课堂练习――制作一个盒子模型 248

11．6 课后习题 250

第 12章 用CSS定位控制网页布局 251

12．1 position定位 252

12．1．1 课堂案例――position定位布局网页 252

12．1．2 绝对定位absolute 253

12．1．3 固定定位fixed 254

12．1．4 相对定位relative 255

12．2 浮动定位 256

12．2．1 课堂案例――浮动布局网页 256

12．2．2 float属性 257

12．2．3 浮动布局的新问题 259

12．2．4 清除浮动clear 259

12．3 定位层叠 261

12．3．1 层叠顺序 261

12．3．2 简单嵌套元素中的层叠定位 262

12．3．3 包含子元素的复杂层叠定位 263

12．4 课堂练习 264

12．4．1 课堂练习1――一列固定宽度 264

12．4．2 课堂练习2――一列自适应 265

12．4．3 课堂练习3――两列固定宽度 266

12．4．4 课堂练习4――两列宽度自适应 267

12．4．5 课堂练习5――两列右列宽度自适应 268

12．5 课后习题 269

第 13章 企业网站设计 270

13．1 企业网站设计概述 271

13．1．1 企业网站分类 271

13．1．2 企业网站主要功能栏目 272

13．2 网站内容分析 273

13．3 HTML结构设计 273

13．4 方案设计 276

13．5 定义整体样式 276

13．6 制作页面顶部 278

13．6．1 页面顶部的结构 278

13．6．2 定义页面外部的样式 278

13．7 制作左侧导航菜单 279

13．7．1 制作导航菜单的结构 280

13．7．2 定义导航菜单的样式 280

13．8 制作“快速联系我们”部分 281

13．8．1 定义“快速联系我们”部分的结构 281

13．8．2 定义“快速联系我们”内容的样式 282

13．9 制作“公司介绍”部分 282

13．9．1 制作“公司介绍”部分结构 282

13．9．2 定义“公司介绍”部分的样式 282

13．10 制作“图片展示”和“新闻动态” 283

13．10．1 制作页面结构 283

13．10．2 定义页面样式 284

13．11 制作“酒店订购”部分 284

13．11．1 制作“酒店订购”部分的页面结构 284

13．11．2 定义“酒店订购”部分的样式 285

13．12 制作底部版权部分 286

13．13 网站的上传 287

13．14 课后习题 288