第1章Web前端开发基础.docVIP

目录 TOC \o 1-3 \h \z \u 第1章 Web前端开发基础 2 1.1 Web前端开发实训目标 2 1.1.1实训知识目标 2 1.2.2实训能力目标 2 1.2.3实训素质目标 3 1.2 Web前端开发实训项目概述 3 1.2.1 WCMS项目概述 3 1.2.2 WCMS项目前端界面分析 5 1.3 Web前端开发技术 7 1.3.1 HTML语言 7 1.3.2 CSS语言 8 1.3.3 JavaScript语言 9 1.3.4 AJAX框架 9 1.3.5 jQuery框架 10 1.3.6 BootStrap框架 10 1.3.7 EasyUI框架 10 1.4 Web前端开发工具 10 1.4.1 NotePad 10 1.4.2 EditPlus 11 1.4.3 Dreamweaver 12 1.4.4 HBuilder 12 1.4.4 浏览器工具 15 1.5 Web前端开发规范 19 1.5.1 Web前端项目开发实训工作流程 19 1.5.2 Web前端项目开发流程 19 1.5.3 Web前端开发代码规范 21 1.5.4 文档与源码提交规范 23 1.6 小结 24 TOC \o 1-3 \h \z \u 第1章 Web前端开发基础 Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。Web前端开发工程师是一个新的职业，在国内乃至国际上真正开始受到重视的时间很短。 随着Web2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。(x)HTMl+CSS布局、DHTMl和AJAX像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各行各业的IT企业都对自己的网站进行了重构。 随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面解脱出来。 我国互联网行业的发展呈现迅猛的增长势头，对网站开发、设计制作的人才需求随之大增。Web前端开发正是运用HTMl、CSS、DIV、JavaScript、Dom、Ajax等技术实现网站整体风格优化与改善用户体验的工作。在欧美技术发达的国家，前端开发和后台开发人员的比例1:1,而在我国目前依旧在1:3以下，人才缺口较大。目前我国各行领域几乎都有建设自己的网站，网络调查结果表明，未来几年，国内各大行业对Web前端开发方面的人才需求量将会大幅度提升，Web前端开发工程师也会日益受到重视。 1.1 Web前端开发实训目标 本书通过“网站内容管理系统（WCMS）Web前端设计与开发”实训案例来进行训练，使学生通过实战训练，将书中的知识应用于实际工作中，将个人所学的知识最大限度地发挥，使其成为实际工作中可以运用的实践经验和技能。 1.1.1实训知识目标 1）了解网站内容管理系统的工作原理； 2）掌握Web前端界面设计规范； 3）掌握HTML常用标签； 4）掌握CSS常用属性； 5）理解JavaScript中对象的定义及含义；理解JavaScript中事件的概念；理解JavaScript中属性与方法的概念； 6）掌握JQuery基本语法，选择器，方法，事件，动画； 7）掌握BootStrap前端框架常用组件的使用； 8）掌握EasyUI前端框架常用组件的使用； 9）掌握图表绘制组件的使用； 10）了解HTMl、CSS、JavaScript在不同浏览器上的兼容性情况、渲染原理和存在的问题(Bug)； 11）掌握网站性能优化、搜索引擎优化(SEO)和服务器开发技术的基础知识； 12）学会运用各种Web前端开发与测试工具进行辅助开发； 13）除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性，分层语义模块和浏览器分级支持等。 1.2.2实训能力目标 1）能够通过了解网站业务背景，进行网站需求分析； 2）能根据网站业务背景的不同，结合网站内容管理系统，确定项目需求实现的功能； 3）能够根据网站内容进行页面规划和结构布局； 4）能收集、整理、处理信息，并对网站所需素材进行加工处理； 5）能够熟练应用业界主流前端开发框架（BootStrap）实现响应式网站前台页面的设计与开发； 6）能够熟练应用业界主流前端开发框架（EasyUI）实现响应式网站后台页面的设计与开发； 7）能够建立交互式页面，实现前后台功能对应； 8）能够完成开发文档的撰写。 1