本书采用“案例引导、任务驱动”的编写方式，以实用为目的，根据高等职业教育“理论够用、重在实践”的教学特点，注重对学生专业技能、动手能力的培养。本书对知识点进行了细致的取舍和编排，融通俗性、实用性和技巧性于一身。全书以“信息学院”网站设计与制作项目作为课堂讲解与练习的教学主线，分成网站总体规划、信息学院网站制作的前期准备、信息学院网页的制作、网站的整合与测试发布4个子项目，每个子项目由若干个学习任务组成。每个学习任务又由任务布置与分析、操作步骤、主要知识点及操作技能讲解、举一反三练习等几个环节组成。除了课堂练习项目外，还配有一个“美食大嘴”网站和学生分组自选项目作为学生课外巩固练习。

    本书适合作为高等职业院校、职业高中、应用类本科院校计算机应用类专业或数字媒体艺术类专业网页设计课程的教材，也可作为相关自学人员的参考用书。

Internet的迅速普及，正是依靠不计其数、丰富多彩的网站。网站是由网页按照一定的链接顺序组成的。现在越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。同时，也有越来越多的企业通过互联网来展示自身形象，以提供服务和产品资讯，并以这种廉价的方式获取最大的宣传效果。那些视觉效果比较好的网站往往会受到人们的青睐。网页设计与制作已经成为现代社会的一种基本功，越来越多的人希望学习如何设计与制作网页。在目前市面上众多的网页编辑软件中，有的重视效率，有的强调版面设计，而Dreamweaver可以很方便地实现这两方面的完美结合，Dreamweaver的网页动态效果与网页排版功能都优于一般同类软件，即使是初学者也能制作出具有相当水准的网页，所以Dreamweaver是网页设计者的最佳选择，已成为目前最为流行的网页设计工具。

在实际制作中，通常由Fireworks导出切片、图片等，然后在Dreamweaver中绘制表格。较为流行的一种是在Fireworks中做好主要页面，然后导出，并在Dreamweaver中加以修改，添加链接等，便可以做出一个非常好看的页面。

目前，有关Dreamweaver和Fireworks的参考书籍非常多，大多数是以知识点为主线，而一些所谓的案例教学也只是单纯的讲解案例的制作，真正从工作过程出发通过案例分析来激发学生求知欲的教材少之又少。为免去教师在备课的过程中花大量时间去寻找合适案例之苦，笔者根据自己多年网页设计与制作的授课经验，精心选择适合高职学生学习和制作并且在实际工作中非常有用的项目来组织编写。

全书以“信息学院”网页的设计与制作作为课堂教与学的主项目，并把有关网页设计与制作的主要知识及技能技巧贯穿其中，同时配有“美食大嘴”的网页设计与制作作为辅助项目来给学生巩固练习，还有一个分组自选次项目安排学生课外练习。全书分成网站总体规划、信息学院网站制作的前期准备、信息学院网页的制作、网站的整合与测试发布4个子项目，每个子项目由若干个学习任务组成。每个学习任务又由任务布置与分析、操作步骤、主要知识点及操作技能讲解、举一反三练习等几个环节组成。

本书的主要特点如下。

(1) 打破传统教材编写模式，以先进教学理念为指导，以项目为基线，以任务驱动为导向。每个项目都精选了一些在工作中比较常用的，且以能引起学生浓厚兴趣的案例赏析和设计开始，将枯燥的理论化解到具体作品设计的实践过程中，避免了为学而学的惯例学习方法。

(2) 案例的精选以培养学习者的应用能力为目标。根据高等职业教育“理论够用、重在实践”的教学特点，注重对学生专业技能、动手能力的培养。对理论知识不片面苛求知识体系的系统性和完整性，而以够用为原则。采用由浅入深、循序渐进的讲述方法，合理安排Dreamweaver CS6/Fireworks CS6知识点，并结合具有代表性的示例着重介绍一些设计构思过程及操作技巧，使其具有很强的易读性、实用性和可操作性。

(3) 融“教、学、做”于一体，理论与实践密切结合在一起。本书中的主要案例和实训项目既有设计分析又有详细的操作步骤，又配以知识点讲解。通过循序渐进地从案例的构思到使用Dreamweaver CS6和Fireworks CS6实现进行详细讲解，让读者可以按照书本的操作步骤完成作品的制作，同时知识点也在轻松愉快的设计过程中掌握并得以应用，并通过DIY的实践培养了学习者的应用能力和动手能力。

(4) 以职业岗位为导向，以素质为基础，突出能力目标。以学生为主体，以项目为载体，以实训为手段，设计知识、理论、实践一体化的课程。全面培养学生的自我学习能力，以保证学生的持续发展能力。

全书的主要内容由浙江交通职业技术学院王彩琴副教授执笔完成。其中，“信息学院”网站的案例由浙江交通职业技术学院的付初良老师提供，“美食大嘴”网站的案例由何成杰同学提供。

本书提供各项目的举一反三练习的参考答案，全书的教学课件、案例、项目实训、操作题中引用的所有多媒体素材及源程序，读者可以从清华大学出版社网站http://www.tup.tsinghua.edu.cn下载。

尽管在编写本书时作者已经尽了最大努力，但由于水平有限，书中难免有不足之处，敬请诸位同行、专家和读者指正。

项目1网站总体规划 1任务1.1案例赏析1

1.1.1杭州市政府网站赏析1

1.1.2主要知识及操作技能讲解3

1.1.3举一反三练习17

任务1.2信息学院网站制作基本流程19

1.2.1确定网站主题 19

1.2.2建站前的调查及素材搜集19

1.2.3网站的规划19

1.2.4信息学院网站的结构图19

1.2.5设计信息学院网站各页面20

1.2.6制作HTML页面23

1.2.7测试并上传网站23

1.2.8网站的更新与维护23

1.2.9专家总结： 网站设计成功的要素23

1.2.10举一反三练习26

项目2信息学院网站制作的前期准备27

任务2.1信息学院Logo的设计与实现27

2.1.1任务布置及分析27

2.1.2操作步骤27

2.1.3主要知识点及操作技能讲解31

2.1.4举一反三练习35

任务2.2网站Banner的设计与制作37

2.2.1任务布置及分析37

2.2.2操作步骤37

2.2.3主要知识点及操作技能讲解38

2.2.4举一反三练习41

任务2.3信息学院首页的效果图设计与制作41

2.3.1任务布置及分析41

2.3.2操作步骤43

2.3.3主要知识点及操作技能讲解492.3.4举一反三练习52

项目3信息学院网页的制作55

任务3.1站点的创建55

3.1.1任务布置及分析55

3.1.2操作步骤55

3.1.3主要知识点及操作技能讲解57

3.1.4举一反三练习60

网页设计与制作项目式教程任务3.2使用表格实现首页的布局60

3.2.1任务布置及分析60

3.2.2操作步骤63

3.2.3主要知识点及操作技能讲解66

3.2.4举一反三练习71

任务3.3为首页添加文本和图像71

3.3.1任务布置及分析71

3.3.2操作步骤73

3.3.3主要知识点及操作技能讲解73

3.3.4举一反三练习77

任务3.4设置网站首页的超链接78

3.4.1任务布置及分析78

3.4.2操作步骤78

3.4.3主要知识点及操作技能讲解81

3.4.4举一反三练习82

任务3.5使用CSS样式美化首页84

3.5.1任务布置及分析84

3.5.2操作步骤84

3.5.3主要知识点及操作技能讲解 97

3.5.4举一反三练习109

任务3.6使用AP Div元素美化页面113

3.6.1任务布置及分析113

3.6.2操作步骤114

3.6.3主要知识点及操作技能讲解118

3.6.4举一反三练习123

任务3.7使用JavaScript创建首页的动态效果  127

3.7.1任务布置及分析127

3.7.2操作步骤127

3.7.3主要知识点及操作技能讲解135

3.7.4举一反三练习156

任务3.8为首页插入表单160

3.8.1任务布置及分析160

3.8.2操作步骤160

3.8.3主要知识点及操作技能讲解165

3.8.4举一反三练习169

任务3.9创建并应用网页模板171

3.9.1任务布置及分析171

3.9.2操作步骤172

3.9.3主要知识点及操作技能讲解173

3.9.4举一反三练习179

任务3.10使用框架布局网页183

3.10.1任务布置及分析183

3.10.2操作步骤184

3.10.3主要知识点及操作技能讲解186

3.10.4举一反三练习191

项目4网站的整合与测试发布203

任务4.1信息学院网站的整合203

4.1.1任务布置及分析203

4.1.2操作步骤203

4.1.3举一反三练习203

任务4.2本地站点测试网站204

4.2.1任务布置及分析204

4.2.2操作步骤204

4.2.3举一反三练习207

任务4.3网站的发布208

4.3.1任务布置与分析208

4.3.2操作步骤208

4.3.3举一反三练习210

参考文献212