第2版前言

目前，随着“互联网+”和移动Web应用的不断发展，Web前端开发正处于高峰期。在Web 2.0、Web 3.0的热潮下，Web前端开发的岗位(如网页设计师、Web前端开发工程师、用户体验分析师、网站交互设计师、Web前端移动工程师等)需求量日益增长，几乎每个大的互联网公司都有属于自己的互联网开发团队，如淘宝网的“淘宝UED”、百度旗下的“百度UFO”、腾讯的ISD和CDC等。

2019年2月国务院发布的《国家职业教育改革实施方案》提出，在职业院校、应用型本科高校启动“学历证书+若干职业技能等级证书(1+X)”证书制度试点工作。Web前端开发专业作为全国首批1+X职业技能等级证书的6个试点专业之一，经过多年的发展，在全国各大试点院校的共同努力下，取得了一定的探索及研究的成果。本书基于1+X职业技能等级证书标准编写，给广大读者提供一种思路，旨在抛砖引玉。

本书内容

本书以校企合作的真实项目——“叮当网上书店”电子商务网站为导入项目，按照行业工作过程及Web前端开发1+X职业技能等级初级、中级、高级证书在静态网站搭建方面的能力标准和职业素养要求，将项目分为PC端版静态网站搭建、移动端版静态网站搭建和静态网站人机交互设计3篇。

1. 基础篇

在任务1中，介绍本书项目网站的需求分析，主要介绍网站项目需求分析的两大任务： 页面元素级和网站功能级的需求分析应该做些什么？怎么做？让读者能够了解整个行业网站项目需求分析的大概流程。

在任务2和任务3中，主要介绍网站项目的DEMO(快速原型法)和网站图片素材的整理和设计，为项目的实施做好基础工作。DEMO采用的是手绘设计稿的方法，重点介绍网站常用的版式设计。图片素材的整理和设计主要采用Photoshop软件来完成，培养读者的设计技能和设计思路。

从任务4到任务7，主要介绍XHTML语言和常用结构化标签，培养读者掌握在Web 2.0标准下的DIV+CSS布局思想，强调尽量采用合适的标签来进行页面及模块结构的设计，提高读者编写XHTML语言代码的质量。

从任务8到任务12，主要介绍CSS样式，因为CSS是Web标准中的一个核心技术内容，因此本书用5个任务的篇幅来介绍。从盒子模型、浮动、文档流、定位、CSS样式表、CSS缩写、CSS的浏览器兼容性等方面进行深入浅出的详尽的分析和介绍。对项目的开发进行精细化管理和把控，让读者真正能够理解知识和掌握技能。

2. 进阶篇

在任务13中，按照1+X职业技能等级证书考试的环境要求，主要介绍HBuilder X开发工具及移动端版项目建站。

从任务14到任务18，主要介绍采用HBuilder X开发工具、Bootstrap前端框架、Flex弹性盒、HTML 5、CSS 3等前端技术设计、开发和测试移动端版“叮当网上书店”项目。培养读者掌握在Web 3.0标准下的行业开发规范和规则，对网站产品进行质量控制，培养精益求精的工匠精神。

3. 交互篇

在任务19中，主要介绍采用JavaScript语言、DOM、jQuery前端框架对PC端版和移动端版的表单验证、购物车结算等交互设计、开发和测试，对于没有JavaScript基础的读者来说，也可以采用目前比较流行的、效果比较丰富的jQuery框架来进行网站交互的开发和设计，可以让读者很轻松地学习后实现网站的相应的交互效果，培养读者在网站产品开发中的人性化设计理念。

本书特色

(1) 以Web前端开发1+X职业技能等级证书的能力标准进行总体设计，按Web前端开发1+X职业技能等级证书的职业素养要求，融入劳动教育等高质量职业教育发展元素。

(2) 以“项目导入，任务驱动”教学模式，基于现代软件工程岗位工作过程组织和编写，模拟仿真企业岗位开发情景，让读者在项目中学，在项目中做，以学生为中心，以能力为本位。

(3) 配套泛雅网络教学平台，包含全任务慕课视频、电子讲稿、PPT课件、作业库、试题库、拓展项目库、讨论区、微课等高质量课程精品资源，保障和提升读者的学习效果。

(4) 注重代码编写质量，由点到面、由简到难，以“公用性、复用性”为原则逐步重构项目的代码，让读者轻松地掌握行业企业的开发规范及规则，有利于读者真正掌握Web前端开发的技术和技巧。

读者对象

目前，随着Web前端开发岗位需求量的日益增长以及Web前端开发1+X职业技能等级证书的深入发展，许多网站设计师开始学习并应用Web标准，学习Web前端开发技术(HTML、CSS、JavaScript、DOM、Bootstrap、jQuery和AJAX等)。本书适合所有网站设计师、Web前端开发工程师、UI设计工程师、网站交互设计师、Web前端移动开发工程师等网站设计与开发人员。本书将Web前端开发1+X职业技能等级初级、中级、高级证书在静态网站搭建方面的能力标准和职业素养要求有机地融入各项任务，读者通过任务的逐步实施，在学中做，在做中学。本书在Web 2.0标准下，采用DIV+CSS布局对项目的PC端版进行开发设计与测试，对CSS代码进行了不断的重构，探讨了浏览器兼容性并提供了常用的一些解决方案； 在Web 3.0标准下，采用HTML 5、CSS 3、Flex弹性盒、Bootstrap前端框架等技术对项目的移动端版进行开发设计与测试，探讨了在不同屏幕尺寸的移动端设备下的兼容性测试及解决方案； 针对初学者，还加入了JavaScript、DOM、jQuery前端框架的交互设计，为读者从入门到精通打下坚实的基础。

脚本代码

书中提供了大量的HTML与CSS代码，用以帮助读者学习和制作完成本项目，由于篇幅有限，编者不可能将整篇网站项目的代码放置其中，因此针对代码做了相应的注释和格式的排版。

例如，下面代码中未加粗和倾斜的代码是延续上面任务完成后的CSS代码或者是加入了新的CSS代码，而加粗和倾斜的代码是针对本任务添加的新的CSS代码，编者加入了详尽的注释，以帮助读者能够更好地理解和掌握。

/*修改yuanjiao_center，实现离左侧20px，垂直方向居中*/

.yuanjiao_center{

float:left;

height:27px;

lineheight:27px;   /*通过设置lineheight的值和height的值相同来实现文本垂直方向居中*/

paddingleft:20px;   /*通过设置paddingleft的值来实现离左侧的间距*/

width:954px;   /*根据盒子模型，设置了paddingleft的值为20px，那么要使整个盒子的宽度不变，应将盒子的width值相应地减去20px，因此修改width的值为954px*/

backgroundimage:url(../images/head_yj_center.jpg);

backgroundrepeat:repeatx;

backgroundposition:left top;

}

/*添加.yuanjiao_center a和.yuanjiao_center a:hover的超链接样式及伪类样式*/

.yuanjiao_center a{

padding:0 10px 0 5px;

margin:0;

color:#FFFFFF;

textdecoration:none;

}

.yuanjiao_center a:hover{

textdecoration:underline;

}

/*添加.yuanjiao_center span样式，实现超链接之间垂直线的效果*/

.yuanjiao_center span{

color:#efefef;

marginright:5px;

}

项目介绍

本书选取“叮当网上书店”电子商务网站作为本书的导入项目，主要考虑本书的读者基本都有过网购的经历或者对电商网站有一定的了解。一方面，读者可以很好地理解项目网站的业务流程和页面流转； 另一方面，本项目能够涵盖Web前端开发1+X职业技能等级初级、中级、高级证书在静态网站搭建方面的大部分知识点和技能及职业素养要求。

本书项目PC端版网站通过了IE 6~IE 9、Chrome、Firefox等主流浏览器的兼容性测试，移动端版网站则通过了不同屏幕尺寸的移动终端设备的兼容性测试。通过对本项目的学习和实践，读者能够掌握一定的浏览器、移动端设备兼容性设计技能和技巧，提升读者的岗位竞争能力，打通学校人才培养目标和企业岗位能力需求间“最后一公里”的通道。

本书主要创作团队为课程组的汤明伟、崔蓬、郑伟、何隽、曹雪花、金志泉、黄成老师及黄婧、张怡、潘瑜蓉、邹珂珂、徐子轩学生，郑柳娟老师对全书进行了总审。本书付梓当然也离不开家人和其他领导、同事的关心和支持，在此一并表示真挚的感谢。

由于编者技术水平有限，书中难免有不足之处，希望广大读者批评、指正，并提出宝贵的意见和建议。

编者2025年4月