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

第 1章 HTML5入门基础\t11
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