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步骤一：下载并安装HBuilder27

3.3.2步骤二：启动HBuilder27

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步骤一：下载Apache32

4.3.2步骤二：安装Apache34

4.3.3步骤三：测试Apache35

第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和jQueryUI67

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步骤三：编写JavaScript110

第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步骤二：添加页头Logo121

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用户中心I142

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