WEB前端开发实训案例教程(初级)/北京新奥时代科技有限责任公司

目 录
第1章 实践概述 1
1.1 实践目标 1
1.2 实践知识地图 1
1.3 实施安排 6
1.3.1 实验部分（技术专题） 6
1.3.2 综合实践部分 11
第2章 网页设计与制作 19
2.1 实验目标 19
2.2 实验任务 19
2.3 设计思路 20
2.4 实验实施（跟我做） 20
2.4.1 步骤一：设计网页原型 20
2.4.2 步骤二：设计页面效果 21
2.4.3 步骤三：网页切图 22
2.4.4 步骤四：网页设计 25
第3章 开发工具（HBuilder） 26
3.1 实验目标 26
3.2 实验任务 26
3.3 设计思路 26
3.4 实验实施（跟我做） 27
3.3.1 步骤一：下载并安装
HBuilder 27
3.3.2 步骤二：启动HBuilder 27
3.3.3 步骤三：创建工程 28
3.3.4 步骤四：创建HTML页面 29
3.3.5 步骤五：编辑HTML文件 30
3.3.6 步骤六：运行 30
第4章 网站服务器部署
（Apache服务器） 32
4.1 实验目标 32
4.2 实验任务 32
4.3 设计思路 32
4.4 实验实施（跟我做） 32
4.3.1 步骤一：下载Apache 32
4.3.2 步骤二：安装Apache 34
4.3.3 步骤三：测试Apache 35
第5章 HTML制作静态网页
（新闻网站） 36
5.1 实验目标 36
5.2 实验任务 37
5.3 设计思路 37
5.4 实验实施（跟我做） 38
5.4.1 步骤一：创建“登录”页面 38
5.4.2 步骤二：添加“登录”
页面内容 38
5.4.3 步骤三：创建新闻首页和
二级页面 39
5.4.4 步骤四：添加新闻页面
内容 39
5.4.5 步骤五：实现页面跳转 42
第6章 CSS设计页面样式
（购物网站） 43
6.1 实验目标 43
6.2 实验任务 44
6.3 设计思路 44
6.4 实验实施（跟我做） 46
6.4.1 步骤一：创建文件 46
6.4.2 步骤二：链接到外部
样式文件 46
6.4.3 步骤三：导航栏样式 47
6.4.4 步骤四：左边栏 48
6.4.5 步骤五：右边栏 50
6.4.6 步骤六：底边栏 51
第7章 JavaScript开发交互效果页面
（网页计算器） 53
7.1 实验目标 53
7.2 实验任务 54
7.3 设计思路 54
7.4 实验实施（跟我做） 56
7.4.1 步骤一：HTML布局 56
7.4.2 步骤二：CSS添加样式 57
7.4.3 步骤三：JavaScript计算 59
7.4.4 步骤四：扩展功能
（验证正则表达式） 62
第8章 jQuery开发交互效果页面
（手机号抽奖） 64
8.1 实验目标 64
8.2 实验任务 65
8.3 设计思路 65
8.4 实验实施（跟我做） 66
8.4.1 步骤一：页面构建 66
8.4.2 步骤二：下载并引用jQuery
和jQuery UI 67
8.4.3 步骤三：随机生成10个
手机号码 67
8.4.4 步骤四：抽奖 68
8.4.5 步骤五：重置抽奖 68
第9章 CSS3新特性开发页面样式
（微博网站） 70
9.1 实验目标 70
9.2 实验任务 70
9.3 设计思路 71
9.4 实验实施（跟我做） 72
9.4.1 步骤一：搭建页面主体
结构 72
9.4.2 步骤二：搭建页面主体
内容 73
9.4.3 步骤三：添加正文内容 73
9.4.4 步骤四：美化微博话题 75
9.4.5 步骤五：对微博话题的字体
进行美化 76
9.4.6 步骤六：对微博话题的
背景色进行美化 77
第10章 HTML标签美化页面
（课程信息管理系统） 78
10.1 实验目标 78
10.2 实验任务 79
10.3 设计思路 80
10.4 实验实施（跟我做） 81
10.4.1 步骤一：搭建页面主体结构
和内容 81
10.4.2 步骤二：创建form表单和
搜索框 82
10.4.3 步骤三：创建班级列表 82
10.4.4 步骤四：制作课程表
子页面 82
10.4.5 步骤五：使用＜iframe＞标签
导入表格 84
10.4.6 步骤六：为课程添加超链接
进入课程详情页面 85
第11章 CSS3新特性开发动态页面样式
（天气网） 86
11.1 实验目标 86
11.2 实验任务 87
11.3 设计思路 87
11.4 实验实施（跟我做） 88
11.4.1 步骤一：创建HTML
文件 88
11.4.2 步骤二：搭建天气预报
主体 88
11.4.3 步骤三：用CSS美化 89
11.4.4 步骤四：制作CSS3动画 91
11.4.5 步骤五：使用自定义字体 92
11.4.6 步骤六：使用弹性布局 92
11.4.7 步骤七：使用多列布局 92
第12章 HTML5制作移动端静态网页
（房屋装饰网站） 94
12.1 实验目标 94
12.2 实验任务 95
12.3 设计思路 95
12.4 实验实施（跟我做） 97
12.4.1 步骤一：适配移动端视口 97
12.4.2 步骤二：搭建页面主体结构
和内容 97
12.4.3 步骤三：创建搜索栏 97
12.4.4 步骤四：创建导航栏 98
12.4.5 步骤五：使用＜figure＞标签
创建房屋信息 98
12.4.6 步骤六：创建音乐播放栏 99
12.4.7 步骤七：页脚按钮 99
12.4.8 步骤八：创建房屋页面 99
第13章 CSS3新特性开发移动端页面
样式（电商平台网站） 101
13.1 实验目标 101
13.2 实验任务 101
13.3 设计思路 102
13.4 实验实施（跟我做） 103
13.4.1 步骤一：创建符合HTML5
的HTML文件 103
13.4.2 步骤二：使用viewport
属性 103
13.4.3 步骤三：搭建网页主体
结构 103
13.4.4 步骤四：用CSS3美化 104
第14章 JavaScript开发移动端交互效果
页面（项目提成计算器） 107
14.1 实验目标 107
14.2 实验任务 107
14.3 设计思路 108
14.4 实验实施（跟我做） 109
14.4.1 步骤一：创建项目主体 109
14.4.2 步骤二：用CSS美化 110
14.4.3 步骤三：编写JavaScript 110
第15章 HTML5美化移动端静态网页
（视频网站） 113
15.1 实验目标 113
15.2 实验任务 113
15.3 设计思路 114
15.4 实验实施（跟我做） 115
15.4.1 步骤一：搭建页面
主体结构 115
15.4.2 步骤二：添加页头
部分内容 116
15.4.3 步骤三：添加正文
部分内容 116
15.4.4 步骤四：添加页脚
部分内容 118
第16章 CSS3新特性美化移动端静态
页面（学院门户网站） 119
16.1 实验目标 119
16.2 实验任务 119
16.3 设计思路 120
16.4 实验实施（跟我做） 120
16.4.1 步骤一：搭建页面结构 120
16.4.2 步骤二：添加页头Logo 121
16.4.3 步骤三：正文内容样式 122
16.4.4 步骤四：页脚内容效果 123
第17章 综合实践（跳蚤市场） 125
17.1 项目简介 125
17.2 实践目标 125
17.3 需求分析 126
17.4 界面设计 127
17.4.1 页面类型 127
17.4.2 页面整体布局 127
17.4.3 页头和页脚 128
17.4.4 “注册”页面 128
17.4.5 首页 128
17.4.6 “用户中心”页面 129
17.4.7 页面效果 129
17.4.8 项目页面汇总 131
17.5 **阶段HTML5基础：
创建工程 132
17.5.1 工作任务 132
17.5.2 设计思路 132
17.5.3 实现（跟我做） 132
17.6 **阶段HTML5基础：
首页 136
17.6.1 工作任务 136
17.6.2 设计思路 137
17.6.3 实现（跟我做） 137
17.7 **阶段HTML5基础：
注册和登录 139
17.7.1 工作任务 139
17.7.2 设计思路 139
17.7.3 实现（跟我做） 140
17.8 **阶段HTML5基础：
用户中心 142
17.8.1 用户中心I 142
17.8.2 用户中心Ⅱ 149
17.9 第二阶段HTML5 CSS3 JS：
商品管理 154
17.9.1 发布商品 154
17.9.2 修改商品信息 158
17.9.3 删除商品 162
17.9.4 商品分类列表 165
17.9.5 搜索商品 170
17.10 第二阶段HTML5 CSS3 JS：
订单管理 175
17.10.1 下订单 175
17.10.2 支付 180
17.10.3 查询订单 184
17.11 第二阶段HTML5 CSS3 JS：
留言管理 190
17.11.1 工作任务 190
17.11.2 设计思路 191
17.11.3 实现（跟我做） 192
17.12 第二阶段HTML5 CSS3 JS：
系统管理 197
17.12.1 工作任务 197
17.12.2 设计思路 198
17.12.3 实现（跟我做） 199
17.13 第三阶段CSS样式进阶 jQuery：
网站样式优化 204
17.13.1 页头和页脚样式 204
17.13.2 首页优化 213
17.13.3 表单样式优化 223
17.13.4 菜单样式优化 224
17.13.5 表格样式优化 225
17.14 第四阶段移动端页面HTML5
CSS3：移动端页面设计 227
17.14.1 移动端首页设计 227
17.14.2 移动端表单设计 232
17.14.3 移动端列表设计 236
17.14.4 自适应页面设计 241