第1章 Web前端开发基础(1)
1.1 Web前端开发实训目标(1)
1.1.1 实训知识目标(1)
1.1.2 实训能力目标(2)
1.1.3 实训素质目标(2)
1.2 Web前端开发实训项目概述(2)
1.2.1 WCMS项目概述(2)
1.2.2 WCMS项目前端界面分析(4)
1.3 Web前端开发技术(6)
1.3.1 HTML语言(6)
1.3.2 CSS语言(7)
1.3.3 JavaScript语言(8)
1.3.4 AJAX框架(8)
1.3.5 jQuery框架(9)
1.3.6 BootStrap框架(9)
1.3.7 EasyUI框架(9)
1.4 Web前端开发工具(10)
1.4.1 NotePad(10)
1.4.2 EditPlus(10)
1.4.3 Dreamweaver(10)
1.4.4 HBuilder(12)
1.4.5 浏览器工具(14)
1.5 Web前端开发规范(19)
1.5.1 Web前端项目开发实训工作流程(19)
1.5.2 Web前端项目开发流程(19)
1.5.3 Web前端开发代码规范(20)
1.5.4 文档与源码提交规范(23)
1.6 小结(24)
第2章 WCMS项目前台首页设计与开发(25)
2.1 项目描述(25)
2.2 项目目标(26)
2.3 项目实施(27)
2.3.1 网站前台首页布局(27)
2.3.2 网站Logo与站内搜索框制作(32)
2.3.3 导航栏制作(35)
2.3.4 文字列表面板制作(40)
2.3.5 图片轮播制作(47)
2.3.6 前台用户登录界面制作(51)
2.3.7 前台用户注册界面制作(58)
2.3.8 视频播放制作(63)
2.3.9 选项卡面板制作(77)
2.3.10 图文列表面板制作(82)
2.3.11 快捷通道制作(86)
2.3.12 底部版权信息制作(87)
2.4 项目小结与拓展(91)
第3章 WCMS项目前台栏目页与内容页设计与开发(93)
3.1 项目描述(93)
3.2 项目目标(94)
3.3 项目实施(96)
3.3.1 栏目页布局(96)
3.3.2 顶部固定导航条制作(100)
3.3.3 滚动通知公告制作(104)
3.3.4 图文信息列表和文字信息列表制作(107)
3.3.5 最热新闻制作(111)
3.3.6 精彩评论制作(117)
3.3.7 专业教育平台制作(121)
3.3.8 栏目内容页制作(124)
3.3.9 内容评论制作(133)
3.3.10 回到顶部制作(139)
3.3.11 侧栏分享制作(141)
3.4 项目小结与拓展(145)
第4章 WCMS项目后台管理页设计与开发(148)
4.1 项目描述(148)
4.2 项目目标(148)
4.3 项目实施(149)
4.3.1 后台登录页制作(149)
4.3.2 网站后台首页制作(154)
4.3.3 栏目管理制作(168)
4.3.4 文章管理制作(181)
4.3.5 文件管理制作(208)
4.3.6 网站访问量图表统计制作(214)
4.4 项目小结与拓展(245)
附 录(247)
附录一 HTML标签及描述(247)
附录二 CSS属性及描述(252)
附录三 JavaScript常用对象方法(260)
附录四 jQuery参考手册(266)
附录五 Bootstrap参考手册(274)
附录六 EasyUI参考手册(279)
参考文献(282)

我国互联网行业的发展呈现迅猛增长的势头， 对Web前端人才的需求也随之大增。欧美等技术发达国家， 前端开发和后台开发人员的比例为11， 而我国目前依旧在13以下， 人才缺口较大。为解决Web前端开发人才供给不足的问题， 提高大学生实践能力和创新能力， 强化Web前端技术开发实训是非常有效的方法。在以往的项目实训实施过程中， 我们发现实际效果往往低于预期目标， 其主要原因是学生缺乏可参考的实训教材作指导。 为避免实训流于形式， 提升实训效果， 我们与中软国际有限公司实行校企深度合作， 组建了“Web前端项目开发实践”课程研发团队。课程开发特点是将知识点项目化， 将枯燥的讲授变为生动的项目开发体验， 通过长期教学实践积淀， 逐步完成了本教材的构思和编写。

本教材以WCMS（网站内容管理系统）前端项目开发作为实训案例， 开发流程贯穿整个实训过程， 并按照项目管理规范， 将开发过程划分为若干阶段， 根据交付物将每个阶段细分为若干个实训任务， 每个实训任务对应一个项目的子功能， 真实反映软件企业商业项目的开发过程。读者依据教材指导便可完成全流程开发训练， 大大缩短学生专业能力与企业软件开发岗位能力需求之间的差距， 提高读者的软件开发能力和职业素质， 提高就业竞争力。

全书共4章， 第1章主要介绍Web前端项目开发所必备的专业技术知识， 结合实训案例需求分析和Web前端开发规范， 明确实训任务， 并按知识、 能力、 素质给出具体的实训目标； 第2章主要介绍应用主流前端框架Bootstrap实现WCMS项目前台首页设计与开发； 第3章主要介绍应用Bootstrap实现WCMS项目前台栏目页与内容页设计与开发； 第4章主要介绍应用主流前端框架EasyUI实现WCMS项目后台管理系统UI界面的设计与开发。

参加本书编写工作的有周清平， 颜一鸣， 钟键， 张彬连， 陈园琼， 张延亮等。 全书由颜一鸣副教授统稿， 周清平教授对全书进行了审核。

在本书编写过程中， 中软国际周景林高级工程师为我们提供了项目资料、 企业项目实施文档等， 刘敏、 胡杰同学进行了代码测试和校稿工作， 在此对他们表示衷心感谢， 同时也衷心感谢在此书出版过程中给予我们支持与帮助的中南大学出版社相关老师和工作人员。

本书中部分程序代码电子文件可在中南大学出版社网站（www.csupree.com.cn）“下载专区”免费下载。

限于编者的水平和时间， 书中难免存在纰漏和不足之处， 敬请读者批评指正。

作者简介

总主编：

周清平， 男， 1966年3月出生， 湖南省张家界人， 土家族， 教授， 博士后， 现任中国服务贸易协会专家委员会副理事长， 全国服务外包技能考试专家委员会副理事长， 吉首大学软件服务外包学院院长， 长期从事软件工程专业课程教学和开发， 主要研究方向为量子信息、 软件信息系统， 主持国家自然科学基金、 中国科学院科学研究基金、 中国博士后基金、 教育部科学研究重点项目、 湖南省景区信息化专项等科研项目， 主持国家级工程实践教育中心、 软件工程综合改革试点专业、 福特II国际合作项目、 湖南省教育信息化专项等教研教改项目， 获中国服务外包人才培养最佳实践新锐奖、 湖南省自然科学奖、 湖南省自然科学优秀学术论文奖， 在Springer： Quant.Inform.Proces.， phys.Leet.A等国内外高级学术期刊发表SCI论文二十余篇。

本书主编：

颜一鸣， 男， 1976年9月出生， 湖南省益阳人， 汉族， 副教授， 硕士， 长期从事软件工程专业课程教学， 主讲软件工程、 Web前端开发等课程， 有丰富的Web前端开发经验。主要研究方向为大数据处理、 人机交互工程。参与国家级工程实践教育中心、 软件工程综合改革试点专业、 福特II国际合作项目、 湖南省教育信息化专项等教研教改项目， 指导学生参加第三届、 第四届、 第五届“中国大学生软件服务外包创新创业大赛”， 荣获一等奖1次， 二等奖2次， 三等奖2次。

企业专业实训是在真实的企业工作环境中， 以项目组的工作方式实现完整的项目开发过程， 是实现高素质软件人才培养的重要实践教学环节， 是集中训练学生的科学研究能力、 工程实践能力和创新能力的必要一环， 是对学生综合运用多学科的理论、 方法、 工具和技术解决实际问题的真实检验， 对全面提高教育教学质量具有重要意义。

近年来， 吉首大学大力践行“整体渗透、 优势互补、 人才共育、 过程共管、 资源共享、 责任共担、 利益共生、 合作共赢”的校企深度合作办学模式， 先后与中软国际、 青软实训、 苏软培训等知名企业开展专业共建， 在沉浸式实训模式创新、 课程研发、 实践教学资源建设等方面取得了显著成效， 本次编写出版的“高等学校软件工程专业校企深度合作系列实践教材”就是其中一项重要成果。

本系列教材包括《C语言项目开发实践》《数据库项目开发实践》《Java项目开发实践》《Web前端项目开发实践》《Java EE项目开发实践》《.Net项目开发实践》《Android项目开发实践》《嵌入式ARM体系结构编程项目开发实践》， 共8本。校企双方教师、 技术专家联合组成了教材编写委员会， 他们深入生产实际、 把握主流技术、 遵循教学规律， 摆脱了传统教材“理论知识+实训案例”的简单模式， 将实训内容项目化、 专业化和职业化， 以真实的企业项目案例为载体， 循序渐进地引导学生完成实训项目开发流程， 使其专业知识得到巩固， 专业技能得到提升， 综合分析和解决实际问题的能力、 项目开发能力、 项目管理能力和创新精神得到强化， 同时， 在项目执行力、 职业技能与素养诸方面得到有效锻炼。

本套教材内容覆盖了软件工程专业主要能力点， 精选了一定数量的软件项目案例， 从项目描述、 项目目标、 项目实施、 项目小结与拓展等方面介绍，均符合各自相关的项目开发规范， 项目实施遵循软件生命周期模型， 给出了软件设计思想、 开发过程和开发结果。学生通过项目需求分析、 系统设计、 编码实现、 系统测试与系统部署等环节， 不断积累项目开发经验。本套丛书构思设计之巧、 涉猎领域之广、 推广应用之实， 无不反映了吉首大学的教育教学改革已经转型到以学生发展为中心、 以能力培养为核心的全面综合素质教育上来， 是推行校企深度合作办学基础上微创新教学改革成果的集中展示。

“一分耕耘， 一分收获”， 吉首大学的老师们致力于耕耘， 期待着收获。站在第一读者的角度， 我更期待本套教材能成为高等院校软件工程专业、 职业培训和软件从业人员最具实用价值的实训教材和参考书， 用书中所蕴含的智慧创造更多的财富。

是为序。

教授

联合国教科文组织产学合作教席理事会理事

教育部软件工程专业教学指导委员会副主任

国家示范性软件学院建设工作办公室副主任

北京交通大学软件学院院长、 博士生导师

2014年6月