HTML5+CSS3网页制作基础培训教程 张辉,祁东升 编 专业科技 文轩网

第1章HTML5入门基础11
1．1认识HTML512
1．2HTML5与HTML4的区别13
1．2．1HTML5的语法变化13
1．2．2HTML5中的标签方法13
1．2．3HTML5语法中的3个要点14
1．2．4HTML5与HTML4在搜索引擎优化方面的对比14
1．3HTML5新增的元素和废除的元素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．1article元素28
2．1．2section元素29
2．1．3nav元素29
2．1．4aside元素30
2．2新增的非主体结构元素31
2．2．1课堂案例——创建企业简介网页31
2．2．2header元素33
2．2．3hgroup元素33
2．2．4footer元素34
2．2．5address元素35
2．2．6课堂练习——用HTML5中的结构元素布局主页35
2．3课后习题38
第3章HTML5页面基本元素39
3．1页面头部元素head40
3．2页面标题元素title40
3．3元信息元素meta41
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页面主体元素body44
3．4．1课堂案例——用页面主体元素构建一个网页44
3．4．2主体元素的背景属性45
3．4．3主体元素的背景图片属性46
3．4．4主体元素的文本属性47
3．4．5浏览器中的边界属性47
3．5脚本元素script48
3．6创建样式元素style49
课堂练习——创建基本的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和宽度属性width67
4．4．3阴影属性noshade67
4．4．4颜色属性color68
4．4．5对齐属性align69
4．4．6课堂练习——设置网页文本及段落格式70
4．5课后习题71
第5章使用CSS设计表单和表格样式72
5．1表单标签73
5．1．1程序提交action73
5．1．2表单名称name73
5．1．3传送方法method74
5．1．4编码方式enctype74
5．1．5目标显示方式target75
5．2插入表单对象75
5．2．1课堂案例——在网页中插入表单对象76
5．2．2插入文字字段text79
5．2．3插入密码域password80
5．2．4插入单选按钮radio81
5．2．5插入复选框checkbox81
5．2．6插入普通按钮button82
5．2．7插入提交按钮submit83
5．2．8重置按钮reset84
5．2．9插入图像域image84
5．2．10插入隐藏域hidden85
5．2．11插入文件域file86
5．3菜单和列表87
5．3．1插入下拉菜单87
5．3．2插入列表项88
5．3．3课堂练习——用户注册表单页面制作实例89
5．4课后习题92
第6章HTML5音频与视频93
6．1HTML5多媒体技术概述94
6．1．1音频文件格式94
6．1．2视频文件格式94
6．2HTML5视频video94
6．2．1课堂案例——在网页中添加视频文件95
6．2．2标签概述96
6．2．3链接不同的视频文件97
6．3HTML5音频audio98
6．3．1课堂案例——在网页中插入音频98
6．3．2audio元素100
6．3．3隐藏audio音频播放器100
6．3．4audio元素的事件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与SVG108
7．1使用画布canvas绘制基本图形109
7．1．1课堂案例——使用canvas元素绘制花朵109
7．1．2canvas元素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．4HTML5SVG134
7．4．1课堂案例——制作动画135
7．4．2SVG概述136
7．4．3绘制图形136
7．4．4文本与图像139
7．4．5笔画与填充140
7．4．6课堂练习——绘制精美时钟141
7．5课后习题144
第8章CSS语言基础145
8．1CSS入门146
8．1．1认识CSS146
8．1．2CSS的基本语法146
8．2基本CSS选择器147
8．2．1标签选择器147
8．2．2类选择器147
8．2．3ID选择器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-family159
9．1．3字号font-size160
9．1．4文字风格font-style161
9．1．5加粗文字font-weight162
9．1．6小写字母转为大写字母font-variant163
9．1．7文字的复合属性font164
9．2颜色和背景属性165
9．2．1课堂案例——用CSS实现背景半透明效果165
9．2．2颜色属性color167
9．2．3背景颜色background-color168
9．2．4背景图像background-image169
9．2．5背景重复background-repeat170
9．2．6背景附件background-attachment171
9．2．7背景位置background-position172
9．2．8背景复合属性background174
9．3段落属性175
9．3．1课堂案例——设计网页文本段落样式175
9．3．2单词间隔word-spacing176
9．3．3字符间隔letter-spacing177
9．3．4文字修饰text-decoration178
9．3．5垂直对齐方式vertical-align179
9．3．6文本转换text-transform180
9．3．7水平对齐方式text-align182
9．3．8文本缩进text-indent182
9．3．9文本行高line-height183
9．3．10处理空白white-space184
9．3．11文本反排unicode-bidi和direction185
9．4列表属性186
9．4．1设计背景变换的导航菜单186
9．4．2列表符号list-style-type188
9．4．3图像符号list-style-image190
9．4．4列表缩进list-style-position191
9．4．5列表复合属性list-style192
9．4．6课堂练习——利用CSS制作竖排导航菜单193
9．5课后习题194
第10章移动端网页设计基础CSS3195
10．1边框196
10．1．1课堂案例——制作美观的按钮效果196
10．1．2圆角边框border-radius197
10．1．3边框图片border-image200
10．1．4边框阴影box-shadow201
10．2背景203
10．2．1课堂案例——控制网页背景属性203
10．2．2背景图片尺寸background-size204
10．2．3背景图片定位区域background-origin205
10．2．4背景裁剪区域background-clip206
10．3文本207
10．3．1课堂案例——制作3D眩光效果文字208
10．3．2文本阴影text-shadow209
10．3．3强制换行word-wrap210
10．3．4文本溢出text-overflow210
10．3．5文字描边text-stroke212
10．3．6文本填充颜色text-fill-color212
10．4多列213
10．4．1课堂案例——制作多列布局的Web页面214
10．4．2多列column-count215
10．4．3列的宽度column-width216
10．4．4列的间隔column-gap217
10．4．5列的规则column-rule218
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-top233
11．2．3右外边距margin-right234
11．2．4下外边距margin-bottom235
11．2．5左外边距margin-left236
11．3内边距237
11．3．1课堂案例——设置盒子内边距237
11．3．2上内边距padding-top238
11．3．3右内边距padding-right239
11．3．4下内边距padding-bottom239
11．3．5左内边距padding-left240
11．4边框241
11．4．1课堂案例——制作立体边框效果241
11．4．2边框样式border-style241
11．4．3边框宽度border-width243
11．4．4边框颜色border-color245
11．4．5边框属性border246
11．5课堂练习——制作一个盒子模型248
11．6课后习题250
第12章用CSS定位控制网页布局251
12．1position定位252
12．1．1课堂案例——position定位布局网页252
12．1．2绝对定位absolute253
12．1．3固定定位fixed254
12．1．4相对定位relative255
12．2浮动定位256
12．2．1课堂案例——浮动布局网页256
12．2．2float属性257
12．2．3浮动布局的新问题259
12．2．4清除浮动clear259
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．3HTML结构设计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