HTML +CSS+JavaScript网页制作实用教程

第1章 HTML5入门基础 12
1．1 HTML简介 13
1．2 HTML文件的编写方法 13
1．2．1 课堂案例——使用记事本编写HTML文件 13
1．2．2 课堂案例——使用Dreamweaver编写HTML文件 14
1．3 新增的主体结构元素 15
1．3．1 课堂案例——使用article元素 15
1．3．2 课堂案例——使用section元素 16
1．3．3 课堂案例——使用nav元素 17
1．3．4 课堂案例——使用aside元素 19
1．4 新增的非主体结构元素 19
1．4．1 课堂案例——使用header元素 19
1．4．2 课堂案例——使用hgroup元素 20
1．4．3 课堂案例——使用footer元素 21
1．4．4 课堂案例——使用address元素 22
1．5 本章小结 23
1．6 课后习题 23

第2章 HTML基本标记 24
2．1 HTML页面主体常用设置 25
2．1．1 课堂案例——定义网页背景色bgcolor 25
2．1．2 课堂案例——设置背景图片background 26
2．1．3 课堂案例——设置文字颜色text 27
2．1．4 课堂案例——设置链接文字属性 28
2．1．5 课堂案例——设置页面边距 30
2．2 页面头部标记 31
2．3 页面标题标记 31
2．4 元信息标记 32
2．4．1 设置页面关键字 32
2．4．2 设置页面说明 33
2．4．3 定义编辑工具 33
2．4．4 定义页面的作者信息 34
2．4．5 定义网页文字及语言 34
2．4．6 课堂案例——定义页面的跳转 35
2．5 标题字 36
2．6 段落标记 37
2．6．1 课堂案例——使用段落标记

37
2．6．2 课堂案例——使用换行标记
38
2．6．3 课堂案例——不换行标记 38
2．7 水平线 39
2．8 课堂练习——创建基本的HTML文件 40
2．9 本章小结 41
2．10 课后习题 41

第3章 使用图像和多媒体元素 42
3．1 网页中常见的图像格式 43
3．2 插入图像并设置图像属性 43
3．2．1 图像标记 43
3．2．2 课堂案例——设置图像高度height 45
3．2．3 课堂案例——设置图像宽度width 45
3．2．4 课堂案例——设置图像的替代文字alt 46
3．3 添加多媒体文件 47
3．4 添加音乐 48
3．4．1 标记 48
3．4．2 课堂案例——给网页添加音乐播放器 48
3．5 课堂练习 49
3．5．1 课堂练习1——创建多媒体网页 49
3．5．2 课堂练习2——创建图文混合排版网页 50
3．6 本章小结 51
3．7 课后习题 51

第4章 使用表格 52
4．1 创建表格 53
4．1．1 表格的基本构成table、tr、td 53
4．1．2 设置表格的标题caption 54
4．1．3 表头th 55
4．2 表格基本属性 56
4．2．1 课堂案例——表格宽度width 57
4．2．2 课堂案例——表格边框宽度border 58
4．2．3 课堂案例——内框宽度cellspacing 59
4．2．4 课堂案例——表格内文字与边框间距cellpadding 59
4．3 表格的行属性 60
4．3．1 行背景bgcolor、background 60
4．3．2 行文字的水平对齐方式align 62
4．3．3 行文字的垂直对齐方式valign 63
4．4 单元格属性 63
4．4．1 水平跨度colspan 64
4．4．2 垂直跨度rowspan 65
4．4．3 对齐方式align、valign 66
4．5 表格的结构 67
4．5．1 表格的表头标记 67
4．5．2 表格的表主体标记 68
4．5．3 表格的表尾标记 69
4．6 课堂练习——使用表格排版网页 71
4．7 本章小结 74
4．8 课后习题 74

第5章 HTML5开发实战 75
5．1 HTML5 视频video 76
5．1．1 标记简介 76
5．1．2 课堂案例——在网页中添加视频文件 77
5．1．3 课堂案例——链接不同的视频文件 77
5．2 HTML5 音频audio 78
5．2．1 标记简介 78
5．2．2 课堂案例——隐藏audio播放器 79
5．2．3 课堂案例——使用标记的事件 80
5．3 HTML5 地理定位 81
5．3．1 地理定位方法 81
5．3．2 课堂案例——处理拒绝和错误 82
5．3．3 课堂案例——在地图上显示用户的位置 83
5．4 HTML5 画布canvas 84
5．4．1 标记 84
5．4．2 课堂案例——绘制直线 85
5．4．3 课堂案例——线性渐变 86
5．4．4 课堂案例——径向渐变 87
5．5 HTML5 SVG 88
5．5．1 SVG简介 89
5．5．2 课堂案例——绘制各种图形 89
5．5．3 课堂案例——文本与图像 92
5．5．4 课堂案例——设置描边效果 92
5．5．5 课堂案例——创建动画 93
5．6 课堂练习 94
5．6．1 课堂练习1——绘制椭圆 95
5．6．2 课堂练习2——绘制精彩图形 96
5．7 本章小结 97
5．8 课后习题 97

第6章 设计特效文字样式 98
6．1 认识CSS 99
6．2 使用CSS 99
6．2．1 CSS的基本语法 99
6．2．2 添加CSS的方法 100
6．3 设置文本样式 101
6．3．1 课堂案例——设置字体font-family 101
6．3．2 课堂案例——设置字号font-size 102
6．3．3 课堂案例——设置字体风格font-style 103
6．3．4 课堂案例——设置加粗字体font-weight 104
6．3．5 课堂案例——设置小写字母转为大写font-variant 105
6．4 设置段落格式 106
6．4．1 课堂案例——设置单词间隔word-spacing 106
6．4．2 课堂案例——设置字符间隔letter-spacing 107
6．4．3 课堂案例——设置文字修饰text-decoration 108
6．4．4 课堂案例——设置垂直对齐方式vertical-align 109
6．4．5 课堂案例——设置文本转换text-transform 110
6．4．6 课堂案例——设置水平对齐方式text-align 112
6．4．7 课堂案例——设置文本缩进text-indent 113
6．4．8 课堂案例——设置文本行高line-height 114
6．4．9 课堂案例——设置处理空白white-space 114
6．4．10 文本反排unicode-bidi、direction 115
6．5 课堂练习——用CSS排版网页文字 116
6．6 本章小结 118
6．7 课后习题 118

第7章 设计图像和背景样式 119
7．1 设置网页的背景 120
7．1．1 课堂案例——使用background-color设置背景颜色 120
7．1．2 课堂案例——使用background-image设置背景图像 121
7．2 设置背景图像样式 121
7．2．1 课堂案例——使用background-repeat设置背景平铺 122
7．2．2 课堂案例——使用background-attachment设置固定
背景 123
7．2．3 课堂案例——使用background-position设置背景位置 124
7．3 应用CSS滤镜设计图像特效 126
7．3．1 不透明度alpha 126
7．3．2 动感模糊blur 128
7．3．3 阴影效果dropShadow 129
7．3．4 灰度处理gray 130
7．3．5 反相invert 131
7．4 课堂练习 132
7．4．1 课堂练习1——文字与图片上下垂直居中 132
7．4．2 课堂练习2——CSS实现背景半透明效果 133
7．5 本章小结 135
7．6 课后习题 135

第8章 使用CSS设计表单和表格样式 136
8．1 表单form 137
8．1．1 程序提交action 137
8．1．2 表单名称name 137
8．1．3 传送方法method 138
8．1．4 编码方式enctype 138
8．1．5 目标显示方式target 139
8．2 插入表单对象 140
8．2．1 课堂案例——插入文字字段text 140
8．2．2 课堂案例——插入密码域password 141
8．2．3 课堂案例——插入单选按钮radio 142
8．2．4 课堂案例——插入复选框checkbox 143
8．2．5 课堂案例——插入普通按钮button 143
8．2．6 课堂案例——插入提交按钮submit 144
8．2．7 课堂案例——重置按钮reset 145
8．2．8 课堂案例——插入图像域image 146
8．2．9 课堂案例——插入隐藏域hidden 147
8．2．10 课堂案例——插入文件域file 148
8．3 菜单和列表 148
8．3．1 课堂案例——插入下拉菜单 148
8．3．2 课堂案例——插入列表项 149
8．4 设计表格样式 150
8．4．1 设置表格阴影 151
8．4．2 设置表格的渐变背景 152
8．5 课堂练习 153
8．5．1 课堂练习1——设置输入文本的样式 153
8．5．2 课堂练习2——鼠标指针经过时改变表格行的颜色 153
8．5．3 课堂练习3——用虚线美化表格的边框 154
8．6 本章小结 155
8．7 课后习题 155

第9章 使用链接与列表设计网站导航 156
9．1 链接样式设置基础 157
9．1．1 课堂案例——设置鼠标指针属性cursor 157
9．1．2 课堂案例——设置下画线样式text-decoration 158
9．1．3 课堂案例——设置未访问过的超链接a：link 159
9．1．4 课堂案例——设置鼠标指针悬停时状态a：hover 160
9．1．5 课堂案例——设置已访问超链接样式a：visited 160
9．1．6 课堂案例——设置超链接的激活样式a：active 161
9．2 有序列表 162
9．2．1 课堂案例——设置有序列表标记 162
9．2．2 课堂案例——设置有序列表的序号类型type 163
9．2．3 课堂案例——设置有序列表的起始数值start 164
9．3 无序列表 165
9．3．1 课堂案例——设置无序列表标记 165
9．3．2 课堂案例——设置无序列表的类型type 166
9．3．3 课堂案例——设置目录列表标记 167
9．3．4 课堂案例——设置定义列表标记 168
9．3．5 课堂案例——设置菜单列表标记 169
9．4 课堂练习 170
9．4．1 课堂练习1——翻转式超链接 170
9．4．2 课堂练习2——设计导航菜单 172
9．5 本章小结 173
9．6 课后习题 173

第10章 移动网页设计基础CSS3 174
10．1 边框 175
10．1．1 课堂案例——设置圆角边框 border-radius 175
10．1．2 课堂案例——设置边框图片border-image 178
10．1．3 课堂案例——设置边框阴影box-shadow 180
10．2 背景 181
10．2．1 课堂案例——设置背景图片尺寸background-size 181
10．2．2 课堂案例——设置背景图片定位区域background-
origin 182
10．2．3 课堂案例——设置背景裁剪区域background-clip 183
10．3 文本 184
10．3．1 课堂案例——设置文本阴影text-shadow 184
10．3．2 课堂案例——设置强制换行word-wrap 185
10．3．3 课堂案例——设置文本溢出text-overf low 186
10．3．4 课堂案例——设置文字描边text-stroke 187
10．3．5 课堂案例——设置文本填充颜色text-fill-color 188
10．4 多列 189
10．4．1 课堂案例——创建多列column-count 189
10．4．2 课堂案例——设置列的宽度column-width 190
10．4．3 课堂案例——设置列的间隔column-gap 191
10．4．4 课堂案例——设置列的规则column-rule 193
10．5 转换变形 194
10．5．1 课堂案例——设置移动translate() 194
10．5．2 课堂案例——设置旋转rotate() 195
10．5．3 课堂案例——设置缩放scale() 196
10．5．4 课堂案例——设置扭曲skew() 197
10．5．5 课堂案例——设置矩阵matrix() 198
10．6 过渡 199
10．7 课堂练习 200
10．7．1 课堂练习1——鼠标指针放上去显示全部内容 200
10．7．2 课堂练习2——美观的图片排列 201
10．8 本章小结 202
10．9 课后习题 202

第11章 CSS盒子模型与布局入门 203
11．1 认识盒子模型 204
11．2 外边距 204
11．2．1 课堂案例——设置上外边距margin-top 205
11．2．2 课堂案例——设置右外边距margin-right 205
11．2．3 课堂案例——设置下外边距margin-bottom 206
11．2．4 课堂案例——设置左外边距margin-left 207
11．3 内边距 208
11．3．1 课堂案例——设置上内边距padding-top 208
11．3．2 课堂案例——设置右内边距padding-right 209
11．3．3 课堂案例——设置下内边距padding-bottom 210
11．3．4 课堂案例——设置左内边距padding-left 210
11．4 边框 211
11．4．1 课堂案例——设置边框样式border-style 211
11．4．2 课堂案例——设置边框宽度border-width 213
11．4．3 课堂案例——设置边框颜色border-color 215
11．4．4 课堂案例——设置边框属性border 216
11．5 课堂练习——CSS布局实例 217
11．6 本章小结 219
11．7 课后习题 219

第12章 CSS定位布局方法 220
12．1 定位布局 221
12．1．1 课堂案例——设置绝对定位absolute 221
12．1．2 课堂案例——设置固定定位fixed 222
12．1．3 课堂案例——设置相对定位relative 223
12．2 浮动定位 224
12．2．1 课堂案例——设置float属性 224
12．2．2 课堂案例——设置浮动布局的新问题 225
12．2．3 课堂案例——设置清除浮动clear 226
12．3 定位层叠 227
12．3．1 课堂案例——设置层叠顺序 227
12．3．2 课堂案例——设置简单嵌套元素中的层叠定位 228
12．3．3 课堂案例——创建包含子元素的复杂层叠定位 229
12．4 课堂练习 230
12．4．1 课堂练习1——创建一列固定宽度 230
12．4．2 课堂练习2——创建一列自适应 231
12．4．3 课堂练习3——创建两列固定宽度 231
12．4．4 课堂练习4——创建两列宽度自适应 232
12．4．5 课堂练习5——创建右列宽度自适应 233
12．4．6 课堂练习6——创建三列浮动中间宽度自适应 233
12．5 本章小结 235
12．6 课后习题 235

第13章 JavaScript语法基础 236
13．1 JavaScript概述 237
13．1．1 JavaScript简介 237
13．1．2 JavaScript放置位置 237
13．2 JavaScript基本语法 238
13．2．1 变量 238
13．2．2 数据类型 239
13．2．3 表达式和运算符 239
13．2．4 函数 240
13．2．5 注释 241
13．3 JavaScript程序语句 241
13．3．1 课堂案例——使用if语句 241
13．3．2 课堂案例——使用for语句 242
13．3．3 课堂案例——使用switch语句 243
13．3．4 while循环 244
13．3．5 break语句 245
13．3．6 continue语句 246
13．4 课堂练习——禁止鼠标右击 247
13．5 本章小结 248
13．6 课后习题 248

第14章 JavaScript中的事件 249
14．1 事件驱动与事件处理 250
14．1．1 事件与事件驱动 250
14．1．2 事件与处理代码关联 251
14．1．3 调用函数的事件 252
14．1．4 调用代码的事件 253
14．1．5 设置对象事件的方法 254
14．2 JavaScript常见的事件 255
14．2．1 onClick事件 255
14．2．2 onChange事件 255
14．2．3 onSelect事件 256
14．2．4 onFocus事件 257
14．2．5 onLoad事件 258
14．2．6 onUnload事件 259
14．2．7 onBlur事件 259
14．2．8 onDblClick事件 260
14．2．9 其他常用事件 261
14．3 课堂练习——将事件应用于按钮中 262
14．4 本章小结 263
14．5 课后习题 263

第15章 JavaScript中的函数和对象 264
15．1 函数概述 265
15．2 函数的定义 265
15．2．1 函数的普通定义方式 265
15．2．2 函数的变量定义方式 266
15．2．3 函数的指针调用方式 267
15．3 JavaScript对象的声明和引用 268
15．3．1 声明和实例化 268
15．3．2 对象的引用 270
15．4 浏览器对象 271
15．4．1 课堂实例——利用navigator对象获取浏览器对象的属性值 271
15．4．2 课堂实例——利用window对象控制显示窗口的大小 272
15．4．3 课堂实例——利用location对象获取当前页面的URL 273
15．4．4 课堂实例——用history对象制作前进到上一页和后退到下一页 274
15．4．5 课堂实例——用document对象来显示文档的*后修改时间 275
15．5 课堂练习——定时关闭网页窗口 276
15．6 本章小结 277
15．7 课后习题 277

第16章 综合案例：公司宣传网站的布局 278
16．1 企业网站设计分析 279
16．1．1 企业网站内容设计 279
16．1．2 排版构架 279
16．2 各部分设计 280
16．2．1 Logo与顶部导航 280
16．2．2 左侧导航 282
16．2．3 主体内容 283
16．2．4 制作“搜索”部分 285
16．2．5 制作“公司新闻动态”部分 286
16．2．6 制作“联系我们”部分 287
16．2．7 底部版权信息 287
16．3 本章小结 288
16．4 课后习题 288