网页制作

随着市场对网页制作人才需求的增加，许多高等院校都开设了“网页制作”的相关课程。该课程是一门操作性和实践性很强的课程，要求学生熟练掌握网页制作技术HTML和CSS的同时，还要具备一定的解决具体问题的能力。目前，许多学生虽然已经学习了网页制作课程，也知道书中讲了哪些知识点，但就是不会应用，缺乏独立制作网站的能力。

为满足企业对网站建设人才的需求，本书以工作过程为主线，以项目化教学方式编排。从入职到项目制作，到正式成为一名网页前端工作人员为主线；以岗位需求为导向，整合网站建设的相关知识和技能；在内容上力求体现“以职业活动为导向，以职业技能为核心”的指导思想，采用任务驱动的方式介绍课程内容。先提出项目，再把项目分解成多个任务，每个子任务驱动知识的组织与学习，使其更符合学生的学习规律。为达到学以致用，每个项目包括学习任务和考核任务，既提高了学生的知识运用能力和实践能力，又能激发学生的学习兴趣。

本书包括“三个项目、三十个任务、一个考核项目”。每个项目后配有项目总结和知识拓展，每个任务后配有拓展训练，可安排在课下由学生独立完成。本书用项目引领学习内容，强调理论与实践相结合，突出对学生基本技能、实际操作技能的培养。

项目1：应聘入职。该项目包含两个子任务，主要介绍网页基本知识、网站制作流程等。

项目2：“蓝德科技”网站的完善。该项目包含五个子任务，主要介绍HTML和CSS的基本知识。

项目3：“爱上路旅游公司”网站制作。该项目包含六个子项目，共二十三个子任务。主要介绍HTML、CSS的综合应用以及JavaScript的基础知识。

一个考核项目。以小组为单位，共十二个学时，完成一个电子商务网站。该网站主营项目可以是蛋糕、鲜花、服装等，可自行选定，让学生独立完成，培养学生综合运用知识的实践能力。

本书内容深入浅出、通俗易懂，特别适合高职学生以及各类高等院校本专科学生使用，也可供成人继续教育以及对网页制作有兴趣的读者使用。

学时分配表

序号内容 学时 备注

1 项目一 应聘入职 4 建议机房授课

2 项目二 “蓝德科技”网站的完善 10 

3 项目三 “爱上路旅游公司”网站制作 46 

4 项目四 考核项目 12 

合计  72 

本书具有以下几个特色：

(1) 本书的“相关知识”部分介绍理论知识，内容简明扼要，以应用为目的，以必需、够用为度。

(2) 本书的“学习任务”部分采用演示任务和教师指导学生练习的形式，“考核任务”部分即为学生独立完成的形式，具有较好的操作性，学生只要认真上机操作，就能快速掌握网页制作相关的实用技能。

(3) 书中附有大量插图，用来辅助讲解，使学生在学习时，可以直观了解操作的实际过程和结果，更有利于对照学习。

(4) 本书在编写过程中充分考虑高职层次学生的接受能力，尽量使内容深入浅出，条理分明，突出高职教育的特色。

本书由刘颖、张述平、李华、杨晓茜、艾爽、苏红丽、王丽菊、吴巧玲编写，由刘颖统稿。

本书在编写过程中，借鉴了大量出版物和网上资料，在此谨对相关专家、学者表示感谢。本书的编写得到了沈阳蓝德科技有限公司的大力支持与技术帮助，同时清华大学出版社的编辑为此书出版付出了大量心血，在此一并表示衷心的感谢。

由于时间仓促，加之编者水平有限，编者虽然尽职尽力，但书中难免存在疏漏、错误之处，敬请广大读者批评指正，以便今后提高和完善。如有任何意见，请发邮件到little0_0@126.com与作者进行交流。

要下载书中案例的代码，可访问www.tupwk.com.cn/downpage，输入书名或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