HTML+CSS+JavaScript网页制作案例教程（第2版）

第 1章　网页那点事 1
1．1　网页概述　1
1．1．1 网页的组成　1
1．1．2 网页名词解释　2
1．1．3 Web标准　4
1．2　网页制作技术入门　5
1．2．1 HTML　5
1．2．2 CSS　6
1．2．3 JavaScript　6
1．2．4 网页的展示平台——浏览器　7
1．3　Dreamweaver工具的使用　9
1．3．1 认识Dreamweaver界面　10
1．3．2 Dreamweaver初始化设置　14
1．3．3 Dreamweaver基本操作　16
1．4　创建网页　17
1．5　动手实践　19
第　2章 从零开始构建HTML页面　20
2．1　【案例1】简单的网页　20
案例描述　20
知识引入　20
1． HTML文档基本格式　20
2． 标签的分类　21
3． 标签的关系　22
4． 页面格式化标签　23
案例实现　26
1． 分析效果图　26
2． 制作页面结构　26
3． 设置标题居中　27
2．2　【案例2】新闻页面　27
案例描述　27
知识引入　27
1． 标签的属性　27
2． HTML文档头部相关标签　28
3． 文本样式标签　29
4． 文本格式化标签　30
案例实现　30
1． 结构分析　30
2． 样式分析　31
3． 制作页面结构　31
4． 控制文本　31
2．3　【案例3】图文混排　32
案例描述　32
知识引入　32
1． 常见图像格式　32
2． 图像标签　33
3． 相对路径和绝对路径　36
4． 特殊字符标签　37
案例实现　37
1． 分析效果图　37
2． 制作页面结构　38
3． 控制图像　38
4． 控制文本　39
2．4　动手实践　40
第3章　使用CSS技术美化网页　41
3．1　【案例4】文字Logo　41
案例描述　41
知识引入　41
1． 认识CSS　41
2． CSS样式规则　42
3． 引入CSS样式表　43
4． CSS基础选择器　47
案例实现　49
1． 分析效果图　49
2． 制作页面结构　50
3． 定义CSS样式　50
3．2　【案例5】美食专题栏目　50
案例描述　50
知识引入　51
1． CSS字体样式属性　51
2． CSS文本外观属性　54
案例实现　61
1． 结构分析　61
2． 样式分析　61
3． 制作页面结构　62
4． 定义CSS样式　62
3．3　【案例6】搜索页面　63
案例描述　63
知识引入　64
1． CSS复合选择器　64
2． CSS层叠性和继承性　66
3． CSS优先级　67
案例实现　69
1． 结构分析　69
2． 样式分析　70
3． 制作页面结构　70
4． 定义CSS样式　70
3．4　动手实践　71
第4章　运用盒子模型划分网页模块　72
4．1　【案例7】音乐盒　72
案例描述　72
知识引入　72
1． 认识盒子模型　72
2． 标签　73
3． 边框属性　74
案例实现　80
1． 结构分析　80
2． 样式分析　80
3． 制作页面结构　80
4． 定义CSS样式　80
4．2　【案例8】用户中心　81
案例描述　81
知识引入　81
1． 内边距属性　81
2． 外边距属性　83
3． 盒子的宽与高　84
案例实现　85
1． 结构分析　85
2． 样式分析　85
3． 制作页面结构　85
4． 定义CSS样式　85
4．3　【案例9】咖啡店banner　86
案例描述　86
知识引入　87
1． 设置背景颜色　87
2． 设置背景图像　87
3． 设置背景图像平铺　88
4． 设置背景图像的位置　88
5． 设置背景图像固定　90
6． 综合设置元素的背景　90
案例实现　91
1． 结构分析　91
2． 样式分析　91
3． 制作页面结构　91
4． 定义CSS样式　91
4．4　【案例10】图标导航栏　92
案例描述　92
知识引入　92
1． 元素类型　92
2． 标签　94
3． 元素类型的转换　95
案例实现　96
1． 结构分析　96
2． 样式分析　96
3． 制作页面结构　96
4． 定义CSS样式　97
4．5　【案例11】创意画框　98
案例描述　98
知识引入　98
1． 颜色透明度　98
2． 图片边框　99
3． 阴影　100
4． 渐变　101
案例实现　106
1． 结构分析　106
2． 样式分析　106
3． 制作页面结构　106
4． 定义CSS样式　107
4．6　【案例12】拼图效果　108
案例描述　108
知识引入　108
1． 圆角　108
2． 多背景图像　111
案例实现　111
1． 结构分析　111
2． 样式分析　112
3． 制作页面结构　112
4． 定义CSS样式　112
4．7　动手实践　113
第5章　为网页添加列表和超链接　114
5．1　【案例13】精美电商悬浮框　114
案例描述　114
知识引入　114
1． 无序列表　114
2． 有序列表　115
案例实现　117
1． 结构分析　117
2． 样式分析　117
3． 制作页面结构　117
4． 定义CSS样式　118
5．2　【案例14】二维码名片　119
案例描述　119
知识引入　119
1． 定义列表　119
2． 定义列表实现图文混排　120
3． 列表嵌套的应用　121
案例实现　122
1． 结构分析　122
2． 样式分析　122
3． 制作页面结构　123
4． 定义CSS样式　123
5．3　【案例15】电商团购悬浮框　124
案例描述　124
知识引入　125
1． list-style-type属性　125
2． list-style-image属性　126
3． list-style-position属性　127
4． list-style属性　127
5． 背景图像定义列表项目符号　128
案例实现　129
1． 结构分析　129
2． 样式分析　129
3． 制作页面结构　129
4． 定义CSS样式　130
5．4　【案例16】唱吧导航栏　131
案例描述　131
知识引入　131
1． 创建超链接　131
2． 锚点链接　133
3． 链接伪类控制超链接　134
案例实现　136
1． 结构分析　136
2． 样式分析　136
3． 制作页面结构　136
4． 定义CSS样式　138
5．5　动手实践　139
第6章　为网页添加表格和表单　141
6．1　【案例17】简历表　141
案例描述　141
知识引入　141
1． 创建表格　141
2．
标签的属性　1433． 标签的属性　1474． 标签的属性　148
5． 标签及其属性　150
6． 表格的结构　151
7． CSS控制表格样式　152
案例实现　156
1． 结构分析　156
2． 样式分析　157
3． 制作页面结构　157
4． 定义CSS样式　158
6．2　【案例18】用户登录界面　159
案例描述　159
知识引入　159
1． 认识表单　159
2． 创建表单　159
案例实现　161
1． 结构分析　161
2． 样式分析　161
3． 制作页面结构　161
4． 定义CSS样式　162
6．3　【案例19】趣味选择题　163
案例描述　163
知识引入　164
input控件　164
案例实现　167
1． 结构分析　167
2． 样式分析　167
3． 制作页面结构　167
4． 定义CSS样式　168
6．4　【案例20】空间日志　169
案例描述　169
知识引入　170
1． textarea控件　170
2． select控件　171
案例实现　174
1． 结构分析　174
2． 样式分析　175
3． 制作页面结构　175
4． 定义CSS样式　175
6．5　【案例21】员工档案　177
案例描述　177
知识引入　178
CSS控制表单样式　178
案例实现　180
1． 结构分析　180
2． 样式分析　180
3． 制作页面结构　181
4． 定义CSS样式　181
6．6　动手实践　183
第7章　运用浮动和定位布局　184
7．1　【案例22】世界杯梦幻阵容　184
案例描述　184
知识引入　185
认识浮动　185
案例实现　187
1． 结构分析　187
2． 样式分析　187
3． 制作页面结构　187
4． 定义CSS样式　189
7．2　【案例23】商品专栏　189
案例描述　189
知识引入　190
清除浮动　190
案例实现　194
1． 结构分析　194
2． 样式分析　194
3． 制作页面结构　194
4． 定义CSS样式　195
7．3　【案例24】移动端电商界面　196
案例描述　196
知识引入　196
overflow属性　196
案例实现　199
1． 结构分析　199
2． 样式分析　199
3． 制作页面结构　199
4． 定义CSS样式　200
7．4　【案例25】违停查询　201
案例描述　201
知识引入　201
1． 认识定位属性　201
2． 定位类型　202
3． z-index层叠等级属性　206
案例实现　206
1． 结构分析　206
2． 样式分析　206
3． 制作页面结构　207
4． 定义CSS样式　207
7．5　【案例26】网页布局　209
案例描述　209
知识引入　210
1． 认识布局　210
2． 单列布局　211
3． 两列布局　213
4． 三列布局　214
5． 网页模块命名规范　217
案例实现　218
1． 结构分析　218
2． 样式分析　218
3． 制作页面结构　218
4． 定义CSS样式　219
7．6　动手实践　220
第8章　全新的网页视听技术　221
8．1　【案例27】电影播放界面　221
案例描述　221
知识引入　222
1． 音频和视频嵌入技术概述　222
2． 嵌入视频　223
3． 嵌入音频　225
4． 浏览器对音频、视频文件的
兼容性　225
5． 控制视频宽和高　226
案例实现　228
1． 结构分析　228
2． 样式分析　228
3． 制作页面结构　229
4． 定义CSS样式　229
8．2　【案例28】导航栏悬浮特效　231
案例描述　231
知识引入　231
1． transition-property属性　231
2． transition-duration属性　232
3． transition-timing-function属性　233
4． transition-delay属性　234
5． transition属性　234
案例实现　234
1． 结构分析　234
2． 样式分析　235
3． 制作页面结构　235
4． 定义CSS样式　235
8．3　【案例29】翻牌动画　236
案例描述　236
知识引入　237
1． 2D变形　237
2． 3D变形　242
案例实现　245
1． 结构分析　245
2． 样式分析　245
3． 制作页面结构　246
4． 定义CSS样式　246
8．4　【案例30】宝石旋转　247
案例描述　247
知识引入　247
1． @keyframes规则　247
2． animation-name属性　248
3． animation-duration属性　248
4． animation-timing-function属性　249
5． animation-delay属性　250
6． animation-iteration-count属性　250
7． animation-direction属性　250
8． animation属性　251
案例实现　251
1． 结构分析　251
2． 样式分析　251
3． 制作页面结构　252
4． 定义CSS样式　252
8．5　动手实践　254
第9章　简单的JavaScript　255
9．1　【案例31】身份验证　255
案例描述　255
知识引入　256
1． 认识JavaScript　256
2． JavaScript的语法规则　258
3． 关键字　258
4． JavaScript的引入方式　259
5． alert()方法　260
6． prompt()方法　260
案例实现　261
1． 案例分析　261
2． 案例实现　261
9．2　【案例32】商城下拉菜单　261
案例描述　261
知识引入　262
1． DOM简介　262
2． 对象　262
3． 访问节点　263
4． 设置节点样式　263
5． 变量　264
6． 函数　265
7． 事件和事件调用　267
8． 常用的JavaScript事件　268
案例实现　269
1． 结构分析　269
2． 样式分析　269
3． JavaScript效果分析　269
4． 制作页面结构　269
5． 定义CSS样式　270
6． 添加JavaScript特效　271
9．3　【案例33】限时秒杀　271
案例描述　271
知识引入　271
1． 数据类型　271
2． 运算符　273
3． 运算符优先级　277
4． 条件语句　279
5． BOM简介　283
6． Date对象　287
7． 数据类型转换　288
案例实现　289
1． 结构分析　289
2． 样式分析　289
3． JavaScript效果分析　289
4． 制作页面结构　289
5． 定义CSS样式　290
6． 添加JavaScript效果　291
9．4　【案例34】Tab栏切换效果　292
案例描述　292
知识引入　292
1． 循环控制语句　292
2． 跳转语句　295
3． 数组　296
案例实现　297
1． 结构分析　297
2． 样式分析　298
3． JavaScript效果分析　298
4． 制作页面结构　298
5． 定义CSS样式　299
6． 添加JavaScript效果　300
9．5　动手实践　301
第　10章 实战开发—好趣艺术
设计部落首页面　302
10．1　准备工作　303
1． 建立站点　303
2． 站点初始化设置　303
3． 切片　304
4． 效果图分析　306
5． 页面布局　307
6． 定义公共样式　308
10．2　首页面详细制作　308
1． 制作头部和导航　308
2． banner和通知公告　308
3． 主体内容区域　308
4． 底部版权区域　309
10．3　动手实践　309