本书以HTML、CSS和JavaScript为知识主线，以实例的形式介绍了网页设计的相关知识。全书共六个项目，内容涵盖网站策划、HTML基础语法、网页布局、网页内容编辑、网页特效、综合实训。
本书以学习者为中心，不仅强调基本技能的训练、基础知识的学习，还注重能力的培养。书中收集了大量实例，通过从分析到制作的流程编排，终形成项目、任务驱动的实例教程。
本书适合作为职业院校培养前端工程师岗位能力的入门教材，也可以作为网页制作人员的自学用书。

在“互联网+”时代，各种网站的需求越来越多，规范性标准越来越高，技术越来越先进。传统的网站制作教材从技术实现的角度来看，使用的技术比较落后；从代码结构来看，没有将页面内容和样式进行分离，导致代码过于繁琐，不便于学习者阅读。
为适应现代技术的飞速发展，帮助众多喜爱网站开发的人员学习标准的网页设计规范、提高网站的设计及编码水平，编者根据多年的教学经验和学生的认知规律，在潜心研读网站制作的前沿技术之后，由众多教师经过多次讨论、多次修改之后精心编写了本书。本书既可作为应用型本科、高职院校、成人继续教育的教材，也可作为网页开发人员的自学或参考用书。
本书主要有以下特点。
1．立足精品导向、能力引领
全书的编写始终秉承精品意识，以国家级精品教材标准为目标导向，并借鉴众多同类教材的编写经验，在内容上兼顾知识的基础性和前沿性、网页的创意性和技术实用性以及大学教学的学术性；在编写思想上遵守“授人以鱼不如授人以渔”的原则，重在能力的提高，而非知识的灌输，帮助读者快速提升网页设计技术和实际应用能力。
2．内容系统完整、重点突出
Web前端开发的教学主要有两项任务，即传授知识和培养兴趣。教学成功的关键是在这两方面寻找一个折中。如果上课讲授的知识点过多过细，学生思考和实践的环节就会减少；如果讲授的知识点过少，片面强调让学生实践，学生由于知识点没理清，又容易陷入低水平的盲目实践。
为此，本书在编写时，注重培养学生兴趣。从结构上分为三个部分，包括HTML标签学习、CSS样式设计以及JS（JavaScript）网页交互设计，注重培养学生兴趣。在内容编排上通过六个项目来完成知识学习，将CSS知识的学习作为重点，因为只有接触到CSS，学生才会领会到这门课程的乐趣。内容涵盖网站策划、HTML基础语法、网页布局、网页内容编辑、网页特效、综合实训。
3．讲述通俗简洁、条理清晰
本书面向初学者，从零基础讲起，并迅速追踪到前沿技术。考虑到目前大多数院校课时压缩、强调学生自学能力培养的实际情况，本书的编写力求做到深入浅出、通俗易懂、表述简洁、条理清晰。本书对基础知识、基本技术技能和设计原理的讲述比较细致，在难懂的地方一般补充了图表、示例说明；所用程序、结构层次清晰，对关键代码给出了详细的注释，具有可读性和可理解性；全书力求避免大量的纯文字性、抽象描述，避免空洞、无内容。本书各章内容结构清晰，内容之间联系紧凑、自然，难度循序渐进、逻辑性强。
4．案例引导、示例辅助、图文并茂
本书的教学大概需要72学时，带“*”号的章节建议学生自学。在知识编排上，项目2和项目3为基础，主要讲解了HTML标签，CSS样式的基本语法与用法。项目4为重点，讲解了代码的具体应用，课时具体安排如下：
课时安排表
内 容 课 时
项目一 网站策划 2
项目二 HTML基础语法 6
项目三 网页布局 16
项目四 网页内容编辑 28
项目五 网页特效 10
项目六 综合实例 10
小计 72
考虑到大多数技术或代码比较抽象、难懂，在讲述时都辅之以精心设计的典型实例，通过具体示例来说明相关技术的使用技巧，并运用工具软件详细地说明操作步骤，以此实现讲述的简洁性、通俗易懂性。同时将各种技术的应用效果都用图片方式展示出来，做到图文并茂、形象直观。在编写上，总体遵循案例引导、示例辅助，从具体例子到抽象概念再到复杂技术的叙述方法。所有示例都经过上机测试，确保运行结果准确无误，读者可以直接在浏览器中打开该文件查看运行效果，并通过对实例代码的理解、模仿和改进，将所学用到实际项目中，做到即学即用。
本书由冯淑杰、孙荣侠任主编，窦立莉、雷妍、赵姝菊、刘辉任副主编。具体分工为冯淑杰负责全书的架构制定、统稿和项目3的编写工作，孙荣侠参与全书的架构制定并负责项目2的编写工作，窦立莉负责项目1的编写工作，雷妍负责项目4（任务4.1至任务4.3）的部分编写工作，赵姝菊负责项目6的编写工作，刘辉负责项目5和项目2（任务2.5）、项目4（任务4.4）的编写工作，李煦、王晓旭主要参与各任务的实验素材编辑工作。
编写过程中编者始终以“求真务实、尽善尽美”要求自己，不仅在编写前做了充分的准备，而且书稿几经修改、润色。尽管编者在编写过程中力求做到准确无误，但由于水平有限，不足和疏漏之处在所难免，恳请读者不吝赐教。


编 者

冯淑杰，女，天津滨海职业学院计算机网络技术专业带头人。2002年7月毕业于牡丹江师范学院计算机系，获学士学位，2007年9月毕业于天津大学计算机学院，获高校教师硕士学位，网络设备调试员技师，双师型教师。现主要从事计算机网络的教学工作，承担的主要课程有《网页设》《flash动画制作》,《网站界面设计》，《网站建设实训》等。

孙荣侠，天津滨海职业学院副教授。1996年本科毕业，所学专业是计算机及其应用，2005年获得在职教育硕士。多年来讲授过《C语言程序设计》《数据结构》《操作系统》《网页设计》《ASP.NET(C#)》《网站建设与管理》等课程。目前主要研究方向是网站构建。主持过精品课，主持参与过校级课题、市级课题，在各类杂志上发表过多篇论文，获得各种技能证书及其奖项。

项目一　网站策划 1
任务1.1 了解网站开发流程 1
任务1.2 使用Dreamweaver建立站点 6
任务1.3 网页文档基本操作 12
课后练习 18
项目二　HTML基础语法 19
任务2.1 使用HTML创建一个空白页 19
任务2.2 创建一个新闻网页 21
任务2.3 列表 28
任务2.4 表格 32
任务2.5 表单在网页中的应用 36
课后练习 45
项目三　网页布局 46
任务3.1 使用CSS样式表给网页排版 46
任务3.2 使用盒子进行CSS标准流布局 57
任务3.3 采用CSS浮动属性进行网页布局 72
任务3.4 采用定位属性进行网页布局 80
*任务3.5 采用弹性盒子布局响应式页面 86
课后练习 94
项目四　网页内容编辑 95
任务4.1 使用CSS编辑网页中的文字 95
任务4.2 使用CSS编辑图像 105
任务4.3 使用CSS编辑导航栏 113
任务4.4 使用CSS美化表单 119
课后练习 122
项目五　网页特效 124
任务5.1 使用JavaScript实现网页 124
任务5.2 制作树形菜单 126
任务5.3 制作页面Tab选项卡切换效果 129
*任务5.4 制作图片跑马灯效果 132
课后练习 135
项目六　综合实例 136
任务6.1 模板在网站中的应用 136
任务6.2 金苹果幼儿园网站的制作 145
课后练习 155
参考文献 156