HTML5+CSS3+JavaScript Web前端开发案例教程

第1章 Web网站初体验 1
1.1　揭秘Web前端　2
1.1.1　Web是什么　2
1.1.2　网页核心技术　3
1.2　走进HTML5　6
1.2.1　标签、元素、文件结构概述　6
1.2.2　HTML5的基本标签　7
1.3　使用WebStorm编写HTML5代码　9
1.3.1　下载和安装　9
1.3.2　创建HTML5工程和文件，
运行HTML5程序　11
小结　12
习题　13
第2章　搭建网站雏形　14
2.1　【案例1】制作个H5案例　15
2.1.1　案例描述　15
2.1.2　技术准备　15
2.1.3　案例实现　17
2.1.4　动手试一试　19
2.2　【案例2】多图展示合作伙伴　19
2.2.1　案例描述　19
2.2.2　技术准备　20
2.2.3　案例实现　22
2.2.4　动手试一试　23
2.3　【案例3】通过外链实现友情链接　23
2.3.1　案例描述　23
2.3.2　技术准备　23
2.3.3　案例实现　24
2.3.4　动手试一试　26
2.4　【案例4】分组标签制作联系方式　26
2.4.1　案例描述　26
2.4.2　技术准备　27
2.4.3　案例实现　28
2.4.4　动手试一试　29
小结　29
习题　29
第3章　用CSS3装饰网站　30
3.1　【案例1】图文混排展示新书速递　31
3.1.1　案例描述　31
3.1.2　技术准备　31
3.1.3　案例实现　32
3.1.4　动手试一试　34
3.2　【案例2】时间轴方式的直播预告　35
3.2.1　案例描述　35
3.2.2　技术准备　35
3.2.3　案例实现　39
3.2.4　动手试一试　41
3.3　【案例3】美化学习兴趣分类页面　41
3.3.1　案例描述　41
3.3.2　技术准备　42
3.3.3　案例实现　44
3.3.4　动手试一试　47
3.4　【案例4】打造多彩网站主题背景　47
3.4.1　案例描述　47
3.4.2　技术准备　48
3.4.3　案例实现　49
3.4.4　动手试一试　50
小结　51
习题　51
第4章　HTML5多媒体实现
网站“家庭影院”　52
4.1　【案例1】网页中的H5视频播放器　53
4.1.1　案例描述　53
4.1.2　技术准备　53
4.1.3　案例实现　54
4.1.4　动手试一试　55
4.2　【案例2】动态文字弹幕　56
4.2.1　案例描述　56
4.2.2　技术准备　56
4.2.3　案例实现　57
4.2.4　动手试一试　58
4.3　【案例3】神奇的在线听书功能　59
4.3.1　案例描述　59
4.3.2　技术准备　59
4.3.3　案例实现　60
4.3.4　动手试一试　61
4.4　【案例4】定制专属视频播放器　62
4.4.1　案例描述　62
4.4.2　技术准备　62
4.4.3　案例实现　63
4.4.4　动手试一试　66
小结　66
习题　66
第5章　通过HTML5表单与
用户交互　67
5.1　【案例1】表单实现用户注册页面　68
5.1.1　案例描述　68
5.1.2　技术准备　68
5.1.3　案例实现　70
5.1.4　动手试一试　74
5.2　【案例2】申请个人讲师　74
5.2.1　案例描述　74
5.2.2　技术准备　75
5.2.3　案例实现　76
5.2.4　动手试一试　78
5.3　【案例3】好友留言　79
5.3.1　案例描述　79
5.3.2　技术准备　79
5.3.3　案例实现　80
5.3.4　动手试一试　82
5.4　【案例4】带附件的用户反馈　83
5.4.1　案例描述　83
5.4.2　技术准备　83
5.4.3　案例实现　85
5.4　4 动手试一试　87
小结　87
习题　87
第6章　列表与表格—
让网站更规整　88
6.1　【案例1】图文结合显示课程列表　89
6.1.1　案例描述　89
6.1.2　技术准备　89
6.1.3　案例实现　90
6.1.4　动手试一试　92
6.2　【案例2】制作导航菜单特效　93
6.2.1　案例描述　93
6.2.2　技术准备　93
6.2.3　案例实现　94
6.2.4　动手试一试　95
6.3　【案例3】有序列表让招聘信息
更清晰　96
6.3.1　案例描述　96
6.3.2　技术准备　96
6.3.3　案例实现　97
6.3.4　动手试一试　100
6.4　【案例4】表格设计订单页面　100
6.4.1　案例描述　100
6.4.2　技术准备　100
6.4.3　案例实现　102
6.4.4　动手试一试　105
小结　106
习题　106
第7章　CSS3布局与动画　107
7.1　【案例1】布局积分兑奖页面　108
7.1.1　案例描述　108
7.1.2　技术准备　108
7.1.3　案例实现　110
7.1.4　动手试一试　112
7.2　【案例2】鼠标指针经过时的
图片特效　113
7.2.1　案例描述　113
7.2.2　技术准备　113
7.2.3　案例实现　115
7.2.4　动手试一试　119
7.3　【案例3】为导航菜单添加
动画特效　119
7.3.1　案例描述　119
7.3.2　技术准备　120
7.3.3　案例实现　122
7.3.4　动手试一试　124
7.4　【案例4】CSS3实现网页轮播图　124
7.4.1　案例描述　124
7.4.2　技术准备　124
7.4.3　案例实现　127
7.4.4　动手试一试　128
小结　128
习题　128
第8章　JavaScript编程应用　129
8.1　【案例1】实现将课程分类　130
8.1.1　案例描述　130
8.1.2　技术准备　130
8.1.3　案例实现　133
8.1.4　动手试一试　136
8.2　【案例2】个性化的智能搜索　136
8.2.1　案例描述　136
8.2.2　技术准备　136
8.2.3　案例实现　138
8.2.4　动手试一试　140
8.3　【案例3】使用jQuery实现
轮播图广告　141
8.3.1　案例描述　141
8.3.2　技术准备　141
8.3.3　案例实现　143
8.3.4　动手试一试　144
8.4　【案例4】让用户为你建言献策　144
8.4.1　案例描述　144
8.4.2　技术准备　145
8.4.3　案例实现　147
8.4.4　动手试一试　150
小结　150
习题　150
第9章　JavaScript事件处理　151
9.1　【案例1】实现抽奖页面　152
9.1.1　案例描述　152
9.1.2　技术准备　152
9.1.3　案例实现　153
9.1.4　动手试一试　155
9.2　【案例2】限时大抢购　156
9.2.1　案例描述　156
9.2.2　技术准备　156
9.2.3　案例实现　157
9.2.4　动手试一试　160
9.3　【案例3】网页刮刮卡　160
9.3.1　案例描述　160
9.3.2　技术准备　161
9.3.3　案例实现　161
9.3.4　动手试一试　164
9.4　【案例4】模拟12306图片验证码　164
9.4.1　案例描述　164
9.4.2　技术准备　165
9.4.3　案例实现　166
9.4.4　动手试一试　169
小结　170
习题　170
第10章　手机响应式开发（上）　171
10.1　【案例1】手机端展示图文列表　172
10.1.1　案例描述　172
10.1.2　技术准备　172
10.1.3　案例实现　173
10.1.4　动手试一试　177
10.2　【案例2】手机端的用户登录　177
10.2.1　案例描述　177
10.2.2　技术准备　178
10.2.3　案例实现　179
10.2.4　动手试一试　181
10.3　【案例3】手机端聊天界面　182
10.3.1　案例描述　182
10.3.2　技术准备　182
10.3.3　案例实现　184
10.3.4　动手试一试　189
10.4　【案例4】在手机端播放视频　190
10.4.1　案例描述　190
10.4.2　技术准备　190
10.4.3　案例实现　191
10.4.4　动手试一试　192
小结　192
习题　192
第11章　手机响应式开发（下）　193
11.1　【案例1】添加响应式图片　194
11.1.1　案例描述　194
11.1.2　技术准备　194
11.1.3　案例实现　195
11.1.4　动手试一试　196
11.2　【案例2】使用第三方插件升级
视频功能　196
11.2.1　案例描述　196
11.2.2　技术准备　197
11.2.3　案例实现　197
11.2.4　动手试一试　199
11.3　【案例3】响应式导航菜单　200
11.3.1　案例描述　200
11.3.2　技术准备　200
11.3.3　案例实现　200
11.3.4　动手试一试　203
11.4　【案例4】表格“变形记”　204
11.4.1　案例描述　204
11.4.2　技术准备　204
11.4.3　案例实现　204
11.4.4　动手试一试　206
小结　206
习题　207
第12章　综合案例—
在线教育平台　208
12.1　案例分析　209
12.1.1　案例概述　209
12.1.2　系统功能结构　209
12.1.3　文件夹组织结构　209
12.2　技术准备　210
12.2.1　实现过程分析　210
12.2.2　Amaze UI的使用　213
12.2.3　登录页面实现技巧　215
12.3　主页设计与实现　215
12.3.1　主页概述　215
12.3.2　主页设计　216
12.3.3　代码实现　216
12.4　登录页设计与实现　223
12.4.1　登录页概述　223
12.4.2　登录页设计　223
12.4.3　代码实现　224
12.5　课程列表页设计与实现　227
12.5.1　课程列表页概述　227
12.5.2　课程列表页设计　228
12.5.3　代码实现　229
12.6　课程详情页设计与实现　234
12.6.1　课程详情页概述　234
12.6.2　课程详情页设计　235
12.6.3　代码实现　235
小结　242