本书包括“三个项目、三十个任务、一个考核项目”。每个项目后配有项目总结和知识拓展，每个任务后配有拓展训练，可安排在课下由学生独立完成。本书用项目引领学习内容，强调理论与实践相结合，突出对学生基本技能、实际操作技能的培养。
　　项目1：应聘入职。该项目包含两个子任务，主要介绍网页基本知识、网站制作流程等。
　　项目2：“蓝德科技”网站的完善。该项目包含五个子任务，主要介绍HTML和CSS的基本知识。
　　项目3：“爱上路旅游公司”网站制作。该项目包含六个子项目，共二十三个子任务。主要介绍HTML、CSS的综合应用以及JavaScript的基础知识。一个考核项目。以小组为单位，共十二个学时，完成一个电子商务网站。该网站主营项目可以是蛋糕、鲜花、服装等，可自行选定，让学生独立完成，培养学生综合运用知识的实践能力。
　　本书内容深入浅出、通俗易懂，特别适合高职学生以及各类高等院校本专科学生使用，也可供成人继续教育以及对网页制作有兴趣的读者使用。
　　前本书具有以下几个特色：
　　（1）本书的“相关知识”部分介绍理论知识，内容简明扼要，以应用为目的，以必需、够用为度。
　　（2）本书的“学习任务”部分采用演示任务和教师指导学生练习的形式，“考核任务”部分即为学生独立完成的形式，具有较好的操作性，学生只要认真上机操作，就能快速掌握网页制作相关的实用技能。
　　（3）书中附有大量插图，用来辅助讲解，使学生在学习时，可以直观了解操作的实际过程和结果，更有利于对照学习。
　　（4）本书在编写过程中充分考虑高职层次学生的接受能力，尽量使内容深入浅出，条理分明，突出高职教育的特色。

　　随着市场对网页制作人才需求的增加，许多高等院校都开设了“网页制作”的相关课程。该课程是一门操作性和实践性很强的课程，要求学生熟练掌握网页制作技术HTML和CSS的同时，还要具备一定的解决具体问题的能力。目前，许多学生虽然已经学习了网页制作课程，也知道书中讲了哪些知识点，但就是不会应用，缺乏独立制作网站的能力。
　　为满足企业对网站建设人才的需求，本书以工作过程为主线，以项目化教学方式编排。从入职到项目制作，到正式成为一名网页前端工作人员为主线；以岗位需求为导向，整合网站建设的相关知识和技能；在内容上力求体现“以职业活动为导向，以职业技能为核心”的指导思想，采用任务驱动的方式介绍课程内容。先提出项目，再把项目分解成多个任务，每个子任务驱动知识的组织与学习，使其更符合学生的学习规律。为达到学以致用，每个项目包括学习任务和考核任务，既提高了学生的知识运用能力和实践能力，又能激发学生的学习兴趣。
　　本书包括“三个项目、三十个任务、一个考核项目”。每个项目后配有项目总结和知识拓展，每个任务后配有拓展训练，可安排在课下由学生独立完成。本书用项目引领学习内容，强调理论与实践相结合，突出对学生基本技能、实际操作技能的培养。
　　项目1：应聘入职。该项目包含两个子任务，主要介绍网页基本知识、网站制作流程等。
　　项目2：“蓝德科技”网站的完善。该项目包含五个子任务，主要介绍HTML和CSS的基本知识。
　　项目3：“爱上路旅游公司”网站制作。该项目包含六个子项目，共二十三个子任务。主要介绍HTML、CSS的综合应用以及JavaScript的基础知识。
　　一个考核项目。以小组为单位，共十二个学时，完成一个电子商务网站。该网站主营项目可以是蛋糕、鲜花、服装等，可自行选定，让学生独立完成，培养学生综合运用知识的实践能力。
　　本书内容深入浅出、通俗易懂，特别适合高职学生以及各类高等院校本专科学生使用，也可供成人继续教育以及对网页制作有兴趣的读者使用。
　　学时分配表
　　序号内容学时备注
　　1项目一应聘入职4建议机房授课
　　2项目二“蓝德科技”网站的完善10
　　3项目三“爱上路旅游公司”网站制作46
　　4项目四考核项目12
　　合计72
　　本书具有以下几个特色：
　　(1)本书的“相关知识”部分介绍理论知识，内容简明扼要，以应用为目的，以必需、够用为度。
　　(2)本书的“学习任务”部分采用演示任务和教师指导学生练习的形式，“考核任务”部分即为学生独立完成的形式，具有较好的操作性，学生只要认真上机操作，就能快速掌握网页制作相关的实用技能。
　　(3)书中附有大量插图，用来辅助讲解，使学生在学习时，可以直观了解操作的实际过程和结果，更有利于对照学习。
　　(4)本书在编写过程中充分考虑高职层次学生的接受能力，尽量使内容深入浅出，条理分明，突出高职教育的特色。
　　本书由刘颖、张述平、李华、杨晓茜、艾爽、苏红丽、王丽菊、吴巧玲编写，由刘颖统稿。
　　本书在编写过程中，借鉴了大量出版物和网上资料，在此谨对相关专家、学者表示感谢。本书的编写得到了沈阳蓝德科技有限公司的大力支持与技术帮助，同时清华大学出版社的编辑为此书出版付出了大量心血，在此一并表示衷心的感谢。
　　由于时间仓促，加之编者水平有限，编者虽然尽职尽力，但书中难免存在疏漏、错误之处，敬请广大读者批评指正，以便今后提高和完善。
　　要下载书中案例的代码，输入书名或ISBN下载；也可扫描封底的二维码直接下载。
　　编者

项目1 应聘入职 1 
任务1-1 面试 1 
任务1-2 入职 4 
项目2 “蓝德科技”网站的完善 7 
任务2-1 制作员工活动页面 7 
任务2-2 制作优秀员工页面 15 
任务2-3 美化优秀员工页面 20 
任务2-4 制作招贤纳士页面 27 
任务2-5 制作蓝德员工导航页面 31 
项目3 “爱上路旅游公司”网站制作 37 
项目3-1 网页规划 37 
任务3-1-1 网站规划 38 
项目3-2 网站效果图设计 42 
任务3-2-1 设计网站Logo 43 
任务3-2-2 设计网页效果图 45 
项目3-3 网站主页制作 49 
任务3-3-1 规划与建立站点目录结构 50 
任务3-3-2 制作主页整体布局 55 
任务3-3-3 布局主页header区域 62 
任务3-3-4 制作主页header区域 67 
任务3-3-5 布局主页main区域 72 
任务3-3-6 制作主页main区域 79 
任务3-3-7 制作主页footer区域 82 
项目3-4 网站子页制作 88 
任务3-4-1 制作“关于我们”页 88 
任务3-4-2 制作“图片览胜”页 93 
任务3-4-3 制作“达人报告”页 96 
任务3-4-4 制作“联系我们”页 100 
任务3-4-5 制作旅游线路详情页 102 
项目3-5 网页特效 107 
任务3-5-1 为网站导航添加链接 107 
任务3-5-2 为banner添加图片轮播特效 110 
任务3-5-3 为“图片览胜”页面添加图片放大特效 113 
任务3-5-4 为旅游路线详情页面添加图片无缝滚动特效 114 
任务3-5-5 为表单添加验证功能 119 
任务3-5-6 为网站栏目添加二级菜单 124 
项目3-6 网站发布 129 
任务3-6-1 测试网站 129 
任务3-6-2 发布网站 132 
项目4 考核项目 137 
附录A CSS规范化命名 139 
附录B 页面布局模块的常用规范命名 141 
附录C 颜色取值 143 
附录D 长度取值 145 
附录E 网页中文乱码问题的解决 147 
参考 149