前言

随着HTML 5和ECMAScript 6的正式发布，大量的前端业务逻辑极大地增加了前端的代码量，前端代码的模块化、按需加载和依赖管理势在必行，因此Web前端越来越受人们重视。本书作为Web前端设计教材，由浅入深系统地讲解HTML基本标签、表格与框架、CSS页面布局、JavaScript基本语法、JavaScript对象、BOM与DOM编程、HTML 5新特性、jQuery框架以及自定义插件，并对每个知识点都进行了深入分析，针对知识点在语法、示例、代码及任务实现上进行阶梯式层层强化，让读者对知识点从入门到灵活运用，一步一步脚踏实地前行。

本书从技术的原理出发，同时以示例、实例的形式对各知识点详细讲解，并致力于将知识点融入实际项目的开发中。本书的特色是采用一个“QWalking Fashion E&S漫步时尚广场”项目，将所有章节重点技术贯穿起来，每章项目代码会层层迭代，不断完善，最终形成一个完整的系统。通过贯穿项目以点连线、多线成面，使读者能够快速理解并掌握各项重点知识，全面提高分析问题、解决问题以及动手编码的能力。

1. 项目简介

“QWalking Fashion E&S漫步时尚广场”项目是一个集购物、美食和娱乐为一体的综合性电子商务平台，系统由前台和后台两大部分组成。

 前台功能： 主要包括网站首页、用户注册与登录、购物模块、餐饮模块和影视模块。

 后台功能： 主要包括后台管理首页、商品管理模块、餐饮管理模块、影视管理模块和报表统计。

2. 贯穿项目模块

“QWalking Fashion E&S漫步时尚广场”贯穿项目的实现穿插到本书的所有章节，每个章节的任务均是在前一章节的基础上实现的，对项目逐步进行迭代、升级，最终形成一个完整的项目，并将Web前端课程重点技能点加以强化应用。

其中： 

 贯穿项目实现并完成前台的购物模块、用户注册和后台的管理首页、购物管理模块； 

 课后上机中的贯穿项目对前台的餐饮模块、用户注册登录和后台的餐饮管理模块进行练习强化； 

 本教材配套的实验手册中的贯穿项目实现并完成前台的网站首页、影视模块以及后台的影视管理模块。

这3部分贯穿项目是并行的，并且项目的模块之间做到了对应一致，以便学生参照教材，经历“学习掌握—练习强化—复习巩固”的整个过程，最终完成一个完整的大项目，增强学生的动手实践能力。

3. 基础章节任务实现

章目标贯穿任务实现

第1章

HTML语言基础购物列表页面导航栏和展示区【任务11】 实现购物列表页面中的菜单导航栏

【任务12】 实现购物列表页面中的左侧导航栏

【任务13】 实现购物列表页面中的商品展示区

【任务14】 实现购物列表页面中的版权区域

第2章

表格与框架购物模块首页和后台管理页面【任务21】 实现购物模块首页的设计

【任务22】 实现后台管理页面

第3章

表单用户注册和商品添加【任务31】 实现用户注册页面

【任务32】 实现后台管理模块→商品添加页面

第4章

CSS语言基础CSS美化设计购物列表页面【任务41】 使用CSS样式美化购物列表页面中的菜单导航栏

【任务42】 使用CSS样式美化购物列表页面中的商品展示区

第5章

CSS页面布局购物列表的整体和局部布局【任务51】 使用CSS样式实现购物列表页面的整体布局

【任务52】 使用CSS样式实现购物列表页面的左侧导航栏部分

第6章

JavaScript语言基础后台模拟登录和商品动态展示【任务61】 实现后台模拟登录

【任务62】 实现购物列表页面的商品展示模块

第7章

JavaScript对象图片轮播和热门随机推荐 【任务71】 实现购物导航页面中的图片轮播效果

【任务72】 实现购物列表页面中的热门随机推荐

第8章

BOM与DOM编程三级菜单级联、表单验证【任务81】 实现注册页面中的省市区三级菜单级联

【任务82】 实现注册页面中的表单验证

【任务83】 在后台管理模块中实现商品列表中的全选和反选效果

续表

章目标贯穿任务实现

第9章

HTML 5基础实现商品详情页面、重构商品添加页面【任务91】 实现商品详情页面的框架结构

【任务92】 商品详情页面的整体实现

【任务93】 使用HTML 5对后台中的商品添加页面进行重构

第10章

HTML 5进阶商品切换、放大及拖曳特效【任务101】 实现商品详情页面中的商品切换效果

【任务102】 实现商品详情页面中的放大镜效果

【任务103】 实现购物列表中的购物车拖曳效果

第11章

jQuery基础菜单折叠、表单验证等功能【任务111】 实现后台模块中的左侧树形菜单的折叠效果

【任务112】 实现后台模块中的添加商品页面的表单验证功能

【任务113】 实现后台模块中的商品列表页面的全选和反选效果

第12章

jQuery进阶二级级联、表格操作和报表统计【任务121】 通过自定义插件实现商品类型的二级级联效果

【任务122】 在后台商品列表页面中实现表格行的添加与删除效果

【任务123】 实现后台管理模块中的报表统计功能

本书由QST青软实训的刘全担任主编，李战军、金澄、郭晓丹担任副主编，郭全友老师负责本书编写工作和全书统稿，另外，赵克玲、冯娟娟参与本书的审核和修订工作。作者均已从事计算机教学和项目开发多年，拥有丰富的教学和实践经验。由于时间有限，书中难免有疏漏和不足之处，恳请广大读者及专家不吝赐教。本书的相关资源，请到锐聘学院教材丛书资源网book.moocollege.cn下载。

编者

2016年6月