Web前端开发实例教程——HTML5+CSS3+JavaScript

本书面向Web前端开发的读者，采用全新流行的Web标准，以Web前端开发技术三要素（HTML5、CSS3、JavaScript）等前端技术，由浅入深、完整详细地讲解采用手写编码编写符合W3C标准、兼容多种浏览器的代码。本书共分12章，主要内容包括：网站规划和网页设计基础、HTML概述、编辑网页文档、网页布局与交互、CSS基础、CSS盒模型、使用CSS修饰常见的网页元素、使用CSS设置链接与导航、Div CSS布局页面、网页行为语言——JavaScript、珠宝商城前台页面和珠宝商城后台管理页面。本书内容紧扣国家对高等学校培养高级应用型、复合型人才的技能水平和知识结构的要求，以珠宝商城项目案例的开发思路为主线，采用模块分解、任务驱动、子任务实现和代码设计四层结构，通过对模块中每个任务相应知识点的讲解，引导读者学习网页制作、设计、规划的基本知识以及项目开发、测试的完整流程。

教授，现就职于北京信息职业技术学院（东校区）软件工程系。我社老作者，具有多年写作经验，在我社出版过30多本教材。

前    言

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

Web前端开发工程师是一个很新的职业，在国内乃至国际上真正受到重视的时间是近几年才开始的。对Web前端开发工程师基本的要求是精通Web前端开发技术三要素：HTML（HTML5）、CSS（CSS3）、JavaScript，习惯于手写符合W3C标准、兼容多种浏览器的代码。

随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。重构后的网站能带来更好的用户体验，用XHTML CSS重新布局后的页面文件更小、下载速度更快。重构的本质是构建一个前端灵活的MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发及协作开发的基础。

随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作页面中独立出来。前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。因此，对于从事IT工作的人来说，前端开发是个不错的切入点。

一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

为适应现代技术的飞速发展，培养出技术能力强、能快速适应网站开发行业需求的高级技能型人才，帮助众多喜爱网站开发的人员提高网站的设计及编码水平，作者结合自己多年从事教学工作和Web前端应用开发的实践经验，按照教学规律精心编写了本书。

本书采用“模块化设计、任务驱动学习”的编写模式。实现任务驱动学习的关键是“任务”的设计，它必须是社会实际生产、生活中的一个真实问题。为了解决这个真实的问题，需要把它分解成一系列的“子任务”；每一个子任务的解决过程就是一个模块的学习过程。每个模块学习一组概念、锻炼一组技能；全部模块加起来，即完成一种知识的学习，形成一种相应的能力。在任务驱动学习的具体实施中，以网站建设和网页设计为中心，以实例为引导，把介绍知识与实例设计、制作、分析融于一体，自始至终贯穿于本书之中。在实例的设计、制作过程中，把本章节的知识点融于实例之中，使读者能够快速掌握概念和操作方法。考虑Web前端开发较强的实践性，本书配备大量的页面例题和丰富的运行效果图，能够有效地帮助读者理解所学习的理论知识，系统、全面地掌握网页制作技术。

本书主要围绕Web标准的三大关键技术（HTML5、CSS3和JavaScript）来介绍Web前端开发的知识及相关应用。其中，HTML5 负责网页结构，CSS3 负责网页样式及表现，JavaScript负责网页行为和功能。本书采用全新流行的Web标准，通过简单的“记事本”工具，以HTML5技术为基础，由浅入深，系统、全面地介绍HTML5、CSS3、JavaScript的基本知识及常用技巧。

本书以珠宝商城项目网站的设计与制作为讲解主线，围绕网站栏目的设计，详细、全面、系统地介绍了Web前端开发的基本知识及完整流程。本书所有例题、习题及上机实训均采用案例驱动的讲述方式，通过大量实例深入浅出、循序渐进地引导读者学习。本书在每章之后附有大量的实践操作习题，并在教学课件中给出习题答案，供读者在课外巩固所学的内容。本书共分12章，主要内容包括：网站规划和网页设计基础、HTML概述、编辑网页文档、网页布局与交互、CSS基础、CSS盒模型、使用CSS修饰常见的网页元素、使用CSS设置链接与导航、Div CSS布局页面、网页行为语言—JavaScript、珠宝商城前台页面和珠宝商城后台管理页面。

本书条理清晰、内容完整、实例丰富、图文并茂、系统性强，不仅可以作为高等学校计算机及相关专业课程的教材，也可以作为网站建设、相关软件开发人员和计算机爱好者的参考书。

本书由张兵义、张连堂、张红娟主编，参加编写的有张兵义（第1、2、3章）、张连堂（第4、5章）、张红娟（第6、7章）、雷鸣（第8、9章）、殷莺（第10章）、马海洲（第11章），第12章及资料的收集整理、课件的制作由刘大学、刘克纯、田金雨、骆秋容、王如雪、曹媚珠、陈文焕、刘有荣、李刚、孙明建、李索、徐维维、徐云林、沙世雁、缪丽丽、田金凤、陈文娟、李继臣、王如新、赵艳波、王茹霞、田同福完成。全书由刘瑞新教授主审、统稿。由于作者水平有限，书中疏漏和不足之处在所难免，敬请广大师生、读者指正。

 

编  者