前言


随着互联网技术的飞速发展以及移动互联时代的强势到来，“互联网+”已经深入各行各业的各个领域。网页作为信息的重要载体，其设计与制作技术在这个时代显得愈加重要。网页设计与制作类课程是工学类，特别是计算机类多个专业的专业核心课程，也是各高校非计算机类专业学生喜爱的公共选修课程之一，但是网页设计与制作类课程涉及的技术繁杂, 技术更新快，综合性也很强。因此本书选取一个完整的网站项目，以工作任务为驱动，将知识点融入工作任务中。按基础项目（案例）、典型项目、实践项目安排每个工作任务的内容，让学习者由浅入深、循序渐进地掌握前端开发技术。
本书特色
符合社会需求的人才，才是学校培养人才的根本。因此，本书在编写中遵循这一原则，引入企业实际项目，按照工作过程编排书的内容和顺序。本书特色主要有以下三方面:
（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月