正版新书 Web前端开发项目化教程（HTML5+CSS3+JavaScript+Bootstrap）—微课视 张亚东 郑玉娟 胡恩泽 9787302598954

随着互联网技术的飞速发展以及移动互联时代的强势到来，“互联网 ”已经深入各行各业的各个领域。网页作为信息的重要载体，其设计与制作技术在这个时代显得愈加重要。网页设计与制作类课程是工学类，特别是计算机类多个专业的专业核心课程，也是各高校非计算机类专业学生喜爱的公共选修课程之一，但是网页设计与制作类课程涉及的技术繁杂, 技术更新快，综合性也很强。因此本书选取一个完整的网站项目，以工作任务为驱动，将知识点融入工作任务中。按基础项目（案例）、典型项目、实践项目安排每个工作任务的内容，让学习者由浅入深、循序渐进地掌握前端开发技术。
本书特色
符合社会需求的人才，才是学校培养人才的根本。因此，本书在编写中遵循这一原则，引入企业实际项目，按照工作过程编排书的内容和顺序。本书特色主要有以下三方面:
（1） 全书知识体系结构完整，脉络清晰，涵盖了网页设计与制作技术的入门基础知识与技能。重点阐述HTML元素、CSS样式、网页布局技术、导航与超链接、表格与表单等基础知识与技能，包括HTML5的语义化标签结构和CSS3常用样式设置，以及JavaScript基础应用和响应式网页布局技术相关媒体查询、Bootstrap框架应用等实用技术。
（2） 全书采用任务驱动方式，将重要知识点及基本技能要求嵌入各个案例任务中，通过应用案例来诠释各知识点与技能。本书的项目实现采用当下流行的主流开发工具之一HBuilder X作为网页开发工具，力求教学内容贴近职场需求，充分调动学生的学习主动性。
（3） 本书配套的教学资源丰富、齐全，重点内容均有视频讲解、课程标准、PPT课件、案例源代码等教学资源齐备。 
本书概览
全书共分为以下5章：
第1章主要介绍网页设计基础知识，从Web前端开发岗位出现、需求、要求讲起，对网页基本术语意义、网站开发基本流程、Web标准进行了逐一介绍 。
第2章从企业项目“盛和景园”的需求讲起，介绍了网站需求分析的建立，并通过Photoshop实现网站的UI设计。
第3章首先介绍了网页的切图、准备网页的图片素材，然后介绍了利用HBuilder X工具创建网站站点，后介绍了利用HTML5结构标签确定网页结构，再利用HTML5内容标签添加网页内容，接下来是网页的整体布局以及利用CSS3实现网页的终效果。
第4章主要讲解JavaScript的变量、基本数据类型、对象、运算符、条件语句、函数以及DOM的相关知识，从而实现“盛和景园”网站的页面交互效果。
第5章先是从响应式网站的需求出发，介绍了实现响应式布局的技术Flex布局，然后介绍了流行的前端响应式框架——Bootstrap，后用Bootstrap实现响应式的“盛和景园”网站。
本书由山东华宇工学院张亚东副教授、山东药品食品职业学院郑玉娟副教授和胡恩泽副教授编著，参与编写的还有张静、曹金静、刘秀丽、刘媛、陈晓。对于选用了本书作为教材的高校教师及其他读者，可以在清华大学出版社官方网站获取全书配套的教学视频、课程标准、PPT课件及案例源代码等教学资源。
本书在编撰过程中得到了山东华宇工学院各级领导、同事和山东药品食品职业学院各级领导、同事的大力支持与帮助，在此表示诚挚的感谢，他们对本书的编排与撰写提出了许多宝贵的意见与建议，同时也感谢家人为我们忙碌于繁杂的工作提供了无私的帮助和轻松的环境。
由于作者水平有限，书中难免有疏漏之处，敬请各位专家和读者批评指正，不胜感激。感谢您使用本书，顺祝学习、工作愉快。
作者

2021年6月

HTML、CSS和JavaScript是Web应用开发的基础； Bootstrap是响应式开发的前端技术。本书以“采用网页新标准技术、突破传统知识体系结构、基于工作能力培养、置身真实工作情境”为标准。选取一个完整的网站项目，以工作任务为驱动，将知识点融入工作任务。按基础项目（案例）、典型项目、实践项目安排每个工作任务的内容，让学习者由浅入深、循序渐进地掌握前端开发技术。一是通过大量示例辅助学习者掌握基础知识点； 二是将一个完整的网站拆解为多个任务渗透在每个章节，通过项目驱动的方式让学习者巩固并灵活运用基础知识，并能在此过程中逐步了解网站建设的思路和开发流程； 三是在章节末尾设置了动手实践项目，涵盖了本章主要知识点及相关技巧并适当延伸，引导学习者进行深入探索，培养学习者的自学能力和应用能力。 本书既可以作为高等学校“网页设计与制作”课程的教材，也可以作为前端与移动开发的培训教材，还可以作为网页制作、网站开发、网页编程、美工设计等人员的参考书。

张亚东，河北廊坊人，从事教育工作已经18年,有着丰富的教学经验,同时参与企业项目开发,有着丰富的实践经验,主编的多部教材,得到老师和学生的认可。

第1章Web前端开发职业前景与必要认知

1.1Web前端开发岗位现状

1.1.1职业现状

1.1.2职业前景

1.2Web概述

1.2.1网页概述

1.2.2网站概述

1.3Web标准

1.3.1Web标准概念

1.3.2Web标准语言

1.3.3如何制作网站才符合Web标准

1.3.4Web标准的优势

第2章设计“盛和景园”网站

2.1任务一： “盛和景园”房产网站需求分析的建立

2.1.1确定网站主题

2.1.2网站整体规划

2.1.3收集资料和素材

2.2任务二： 网站首页UI设计

2.2.1首页整体结构设计

2.2.2首页头部区域的设计

2.2.3首页导航区域的设计

2.2.4首页宣传区域设计

2.2.5首页主体内容区域的设计

2.2.6首页页脚区域的设计

2.3课后实践

第3章制作“盛和景园”网站

3.1任务一： 网站效果图的切割与导出

3.2任务二： 创建“盛和景园”网站站点

3．3任务三： 制作“盛和景园”网站页面

3.3.1网页文档的基本结构

3.3.2网页的结构标签和内容标签

3.3.3网页文档的表现样式

3.3.4网页布局

3.3.5网页内容的表现样式

3.3.6表单标签

3.3.7表格的HTML标签和常用样式

3.3.8对网页进行整体布局

3.3.9制作首页头部区域

3.3.10制作首页导航区域

3.3.11制作首页宣传部分

3.3.12制作首页主体内容区域

3.3.13制作首页页脚部分

3.4课后实践

第4章制作“盛和景园”网站交互行为

4.1项目实现

4.2课后实践

第5章制作响应式“盛和景园”网站

5.1弹性布局——Flex布局

5.2媒体查询

5.3Bootstrap

5.4扩展

5.4应用Bootstrap制作响应式“盛和景园”网站

5.5课后实践

1.通过大量示例辅助学习者掌握基础知识点；2.将一个完整的网站拆解为多个任务渗透在每个章节中，通过项目驱动的方式让学习者巩固并灵活运用基础知识，并能在此过程中逐步了解网站建设的思路和开发流程；3.在章节末尾设置了动手实践项目，涵盖了本章主要知识点及相关技巧并适当延伸，引导学习者进行深入探索，培养学习者的自学能力和应用能力。