前言

当下Web前端技术发展迅速，HTML经历了从HTML4到HTML5的重大变革，CSS3在CSS2的基础上增加了诸多新特性，为适应网站用户的移动浏览设备，响应式网页设计也是Web前端开发领域的主要趋势之一，作为专业网页设计人员必须掌握这些基础的Web开发技术。本书系统全面地介绍了网页设计制作所涉及的主要技术，并将一个完整的个人介绍网站拆分为15个项目案例贯穿全书始终，将所讲知识运用在实际项目中，可提高学习者分析问题、解决问题及动手编码的能力。

主要内容

本书共8章。

第1章主要介绍网页的基本组成，网页设计的基本概念，Web工作原理及网页编辑工具。

第2章主要介绍HTML文档的基本结构，HTML4的常规标签及HTML5新增的常用标签。

第3章系统介绍CSS样式规则、引入方式、基础选择器、字体与文本属性、颜色与背景属性。

第4章主要介绍CSS复杂选择器、样式优先级。

第5章主要介绍CSS盒模型、表格与列表样式、浮动与定位及常用页面布局。

第6章介绍CSS3的新增属性，包括滤镜、过渡、动画及转换等属性。

第7章主要介绍响应式页面设计的概念、媒体查询、运用Bootstrap框架进行页面设计等。

第8章介绍网站建设的主要流程，包括网站定位、确定主题、站点结构规划、收集内容、网站设计原则及测试发布。

本书特点

本书通过基础知识讲解+丰富示例+项目案例+动手实践项目等多种方式，采用不同层次的示例练习让学习者由浅入深、循序渐进地掌握前端开发的相关技术。

· 基础知识讲解+知识点示例：各章知识点大多配有丰富示例，引导学习者由浅入深地逐步掌握前端开发基本技能。

· 项目驱动：以典型网站为例，按知识点讲解顺序拆分为15个项目案例，分布在各章中，将理论知识和实践完美地结合起来。

· 动手实践：对已学知识的扩展和延伸，只配效果图和难点分析，没有具体步骤，培养学习者自学和独立解决问题的能力。部分动手实践配有视频讲解。

项目介绍

本书的15个项目均包括项目目标、项目内容和项目步骤三个部分。项目目标描述通过本项目的学习，学习者能够达到的对知识点的理解、掌握和灵活运用程度；项目内容描述完成项目需要掌握的理论和实践知识要求；项目步骤是根据网页效果进行具体分析，列出详细操作步骤。

项目一至项目六：使学习者掌握HTML文档结构，熟练使用HTML标记进行文档结构化。项目七至项目八：使学习者掌握网站的整体风格设计，通过CSS实现网页的美化及优化。项目九至项目十一：使学习者掌握常用的页面布局方法，能够解决常见的浮动、定位问题。项目十二至项目十四：使学习者掌握常用的CSS3属性；了解响应式布局，掌握媒体查询的使用；掌握Bootstrap框架创建响应式网页的方法。项目十五：根据前面的14个项目，逆向分析设计思路，使学习者掌握网站设计思路、流程和发布等知识。

教材资源

本书基于济南大学与达内教育集团合作的2016年教育部产学合作协同育人项目立项课程“Web前端技术”而编写，配套学习资源包括实例代码、习题、教学课件和试题等，可通过人民邮电出版社人邮教育社区（www.ryjiaoyu.com）下载使用。MOOC课程可以通过人邮学院（www.rymooc.com）平台进行学习，读者可扫描二维码查看本书MOOC课程页面。

致谢及反馈

本书由济南大学范玉玲、段春笋、张芊茜主编，负责主体设计及内容的编写，由济南大学周劲负责总体审核，济南大学董立凯、赵燕和刘淑辉等负责内容审核、整理工作，山东女子学院仲晓芳负责各类材料收集、整理工作。另外，学生刘晓露、吕中华、张华鑫参与了项目的审核及验证工作，在此对他们表示由衷的感谢。

虽然编者已经尽了最大努力，但水平有限，书中难免存在不妥之处，请读者和同仁不吝指正。