《Dreamweaver 网页设计技术与案例精解（HTML+CSS+JavaScript）》以实用经典案例为主线，围绕创建与设计 Web 站点、创建与优化网页，深入浅出地讲解了网页设计方面的相关技术及应用，介绍了使用 Dreamweaver 创建、管理网站及网页的方法与技术；并重点介绍了使用 HTML、CSS、JavaScript 进行网页设计与制作各方面的技术与应用。

《Dreamweaver 网页设计技术与案例精解（HTML+CSS+JavaScript）》的编写采用任务驱动方法、案例精解、综合实训贯穿知识点。案例内容丰富实用、素材新颖。本书将网页制作的使用方法和技巧分解成 50 个知识点，精选 52 个案例、11 个实训，使读者逐步掌握设计与制作实用美观网页的方法与技巧，逐步提高设计与制作实用美观网页的能力。

《Dreamweaver 网页设计技术与案例精解（HTML+CSS+JavaScript）》可作为高等院校专业基础课的教材，以及高职院校和成人高校的教材；还可供网页设计爱好者参考。也可供示范性软件技术学院、继续教育学院、民办高校、技能型紧缺人才培训使用，还可供计算机专业人员和网页设计爱好者参考。

前  言

软件变得更加便捷，再加上人们对网页制作技术知识的不断更新，如今的网页制作越来越五彩缤纷，令人目不暇接。企事业单位在互联网上创建自己的网站，能更好地推广企事业单位文化、树立企事业单位形象、进行产品与服务介绍、展示企事业单位的新风貌。

网页制作技术已成为当今社会一种比较热门的技术，同时也是高职学院计算机及其他相关专业学生的必修课程。 

本书贯彻“工学结合、项目导向”的课程教学模式，以企事业单位实用案例为主线，介绍了 Dreamweaver CS6 的使用方法，着重介绍了 HTML+CSS+JavaScript 基本知识和实际操作。本书在注重系统性、科学性的基础上重点突出了实用性与可操作性，旨在培养学生具有独立设计与制作“画面精美、图文并茂、功能齐全、操作与维护方便、运行安全可靠”网页的能力，以及掌握制作网页的方法与技巧。 

本书推荐授课课时为 54～72 学时，并提倡在实验室授课；课程结束后，建议安排1～2 周的实训。本书共 7 章：第 1 章介绍网页制作基础，第 2 章介绍 Dreamweaver CS6与创建管理网站，第 3 章介绍 HTML 标记语言，第 4 章介绍网页编辑与超链接；第 5 章为表格布局网页，第 6 章使用 CSS 布局网页，第 7 章使用 JavaScript 创建动态网页。本书注重网页制作能力的训练，每章最后均安排了精选的上机操作案例与实训练习，力求通过循序渐进的方法强化学生的网页制作能力。 

本书内容丰富、案例经典、素材新颖，采用任务、案例驱动方式将网页制作剑客的使用方法与技巧分解成 50 个知识点，同时精选 52 个案例、11 个实训；每个知识点作为一个任务；每个任务首先介绍相关背景知识，然后通过实用案例、实训和综合实训 3 个环节来强化相关知识点的实际操作与应用能力。每个案例均有详细的操作步骤，而实训只给出操作步骤和网页浏览效果，操作步骤留给读者自行完成，以加强读者对知识点的实战演练。综合实训则是对多个知识点的综合应用。 

本书由赖步英主编和策划。第 1、2、3、4、5、6 章由赖步英编写，第 7 章由傅宜宁编写并由青宏燕审查修改，全书由赖步英最后统稿。 

在本书的编写过程中，还引用了《Dreamweaver CS6+Flash CS6 网页制作技术与案例精解（第 2 版）》中陶玲妹和廖晓芳编写的案例，很感谢陶玲妹老师和廖晓芳老师的大力支持，广州智力乐园信息技术有限公司总经理游玉椿工程师为本书提供了实用案例，并从实际工作出发提出了诸多实战经验。同时，广州市巨泽电子通讯有限公司为本书提供了高清图像和企业实用案例等素材，以及宝贵的网页制作经验；在此一并表示感谢！

为了方便教学，本书免费赠送全部案例、实训、习题及附录中两套上机测试题所需要的素材，以及制作好的完整案例、实训和上机习题涉及的相关网页，读者可到清华大学出版社网站自行下载。 

作者本着严谨的态度编写了本书，但书中难免存在疏漏和不足之处，敬请广大读者批评指正。 

编 者 

目  录

1 章 网页制作基础  1 

任务 1 认识网页基础知识  1 

知识点：网页的基础知识  1 

任务 2 认识网页制作工具  6 

知识点：网页编辑工具及图像、动画制作工具  6 

任务 3 认识网站开发流程  7 

知识点：网站开发流程  7 

【上机操作 1】  9 

【理论习题 1】  10 

第 2 章 Dreamweaver CS6 与创建管理网站  11 

任务 1 了解 Dreamweaver CS6 的安装  11 

知识点：Dreamweaver CS6 安装、启动与退出  11 

任务 2 认识工作窗口、文档窗口和浮动面板  12 

知识点：介绍工作窗口、文档窗口和浮动面板  12 

任务 3 创建并管理网站  15 

知识点：创建站点  15 

任务 4 设置网页基本标记与制作网页  18 

知识点：设置网页基本标记与制作网页  18 

任务 5 网站上传  29 

知识点：注册域名、申请网页空间和网站上传  29 

【上机操作 2】  31 

【理论习题 2】  32 

第 3 章 HTML 标记语言  33 

任务 1 HTML 基础  33 

知识点：HTML 的基本概念及其基本结构  33 

任务 2 HTML 标记详解  36 

知识点：HTML 的各类标记  36 

【上机操作 3】  54 

【理论习题 3】  55 

第 4 章 网页编辑与超链接  57 

任务 1 网页中文本的设置及其 HTML 代码  57 

知识点：输入文本和设置文本属性及其 HTML 代码  57

任务 2 插入图像并设置图像属性及其 HTML 代码  65 

知识点：在网页中插入图像并设置图像属性及其 HTML 代码  65 

任务 3 制作图像效果和插入 Flash 电影  72 

知识点：滚盖图、图像映射和 Flash 动画的插入  72 

任务 4 设置超链接及其 HTML 代码  78 

知识点：超链接的设置及其 HTML 代码  78 

【上机操作 4】  90 

【理论习题 4】  91 

第 5 章 表格布局网页  92 

任务 1 在网页中插入表格及其 HTML 代码  92 

知识点：插入表格及其 HTML 代码  92 

任务 2 在网页中编辑表格  95 

知识点：表格的编辑 95 

任务 3 表格属性的设置及其 HTML 代码  97 

知识点：设置表格属性及其 HTML 代码  97 

任务 4 创建嵌套表格  100 

知识点：嵌套表格  100 

任务 5 表格的综合应用  103 

知识点：表格的综合应用  103 

任务 6 创建框架网页  105 

知识点：用 HTML 代码标记创建框架和框架集  105 

【上机操作 5】  110 

【理论习题 5】  110 

第 6 章 用 CSS 布局网页  111 

任务 1 创建和应用 CSS 样式及其代码  111 

知识点：创建和应用 CSS 样式及其代码  111 

任务 2 创建和链接外部 CSS 样式表  123 

知识点：创建与链接外部 CSS 样式表  123 

任务 3 用列表+CSS 制作导航栏  127 

知识点：无序列表、方框、边框和浮动 float  127 

任务 4 CSS 盒子模型及其定位与浮动  132 

知识点：CSS 盒子模型及其定位与浮动 float  132 

任务 5 使用 DIV+CSS 布局网页  139 

知识点：DIV+CSS 布局和 SEO  139 

【上机操作 6】  148 

【理论习题 6】  150 

第 7 章 使用 JavaScript 创建动态网页  151 

任务 1 行为概念  151 

知识点：行为的概念简介  152 

任务 2 附加、编辑行为  154 

知识点：附加、编辑行为  154 

任务 3 JavaScript 基础知识  158 

知识点： JavaScript 基础知识  158 

任务 4 使用<form>制作表单交互页面  164 

知识点：表单、表单元素  164 

任务 5 表单的验证  170 

知识点：表单验证的意义和方法  170 

【上机操作 7】  174 

【理论习题 7】  176 

参考文献  177 

附录 A 《网页设计》课程上机考试试卷 A  178 

附录 B 《网页设计》课程上机考试试卷 B  181 

《Dreamweaver 网页设计技术与案例精解（HTML+CSS+JavaScript）》以实用经典案例为主线，围绕创建与设计Web站点、创建与优化网页，深入浅出地讲解网页设计方面的相关技术及应用，介绍了使用Dreamweaver工具创建、管理网站及网页的方法与技术；并介绍了使用HTML、CSS、JavaScript进行网页设计与制作各方面的技术与应用。