中等职业学校教学用书（计算机应用专业）
网页制作基础教程
（Dreamweaver CS6版）电子教学资料
黄洪杰 杨 军 主编
Publishing House of Electronics Industry
北京 ? BEIJING
1··
前 言
为了配合《网页制作基础教程（Dreamweaver CS6）》课程的教学，体现教材的编写特色，更好地为读者服务，编写了此教学资料。教学资料内容有三个部分：
第一部分是教学指南，包括了课程性质与任务、课程内容和要求、教学建议、教学时间分配。
第二部分是习题答案，给出了每道习题的详细解答过程。
第三部分是电子教案，采用PowerPoint课件形式。教师可以根据不同的教学要求按需选取和重新组合。
限于编著者水平，教学资料中有错误或不妥之处，请读者给予批评指正。 如果您有什么建议或想法，请和我们联系，E-mail：ve@phei.com.cn 电话：010-68152133
编 者
2014年8月
·2·
《网页制作基础教程（Dreamweaver CS6版）》教学指南
一、 课程的性质与任务
“网页制作基础教程”是中等职业学校计算机专业的一门专业课，其主要任务是使学生掌握网页制作的基础知识和基本技能，培养学生开发网站的能力，提高学生的职业技能和素质，为适应职业岗位和继续学习打下一定的基础。
通过学习，学生能够达到如下的教学目标：
? 知道网站、网页的概念，能够确定网站的主题，画出网站结构草图； ? 了解Dreamweaver操作界面，能够创建网站地图；
? 了解各种网站和网页布局特点，能够利用表格、布局模式或框架规划网页布局； ? 熟练掌握在网页中输入文字、修饰文字以及插入图片，更改背景的方法； ? 熟练掌握网页布局的方法；
? 熟练掌握各种超级链接的插入与修改，包括图片热区等；
? 掌握样式表的相关概念以及使用方法；掌握AP元素和时间轴的相关概念以及使用
方法；
? 掌握在网页中插入多媒体文件、Spry页面特效的方法； ? 掌握表单的相关概念以及使用方法，能编辑确认表单；
? 掌握Firework和Flash的操作方法，熟练掌握两个软件与Dreamweaver的整合使用
方法；
? 熟练掌握网站的管理以及上传到因特网上的方法。
二、 预备知识
在学习本课程之前，最好具备以下知识和能力：
（1）文本操作，例如能够使用Word创建并编辑文件等。 （2）因特网使用能力，例如网页的浏览，图片的下载等。
（3）计算机网络的相关知识，例如知道服务器与客户机的关系等。
三、 教学提要
1. 重点难点
（一）重点内容
本课程的重点内容是“第2章 编辑网页的内容”、“第3章 网页的布局”、“第5章 使用超链接”、“第6章 CSS与行为”和“第8章 使用表单”，在这三章中介绍了如何规划网页的布局，怎样创建图文并茂的网页，如何通过超链接将各个网页连接起来以及使用CSS、行为、表单的方法。这些是学习网页制作所必须熟练掌握的内容，在学习是要注意体现出这一点。
·3·
（二）难点内容
本课程的难点内容是“第7章 制作多媒体网页”和“第9章 图像和动画的制作与优化”。其中第7章的难点主要是Spry元素的理解，限于篇幅，教材并没有展开讨论。在学习中要通过操作联系去认真体会，必要时可以参考其他的资料。第9章的难点在于两个新软件的使用。在学习时要注意避开一些内容，仅仅涉及教材中介绍的相关知识即可，因为本教材的主要内容是网页的制作，不是图像的优化和动画的制作。或者说，本章的难点是如何掌握Flash和Fireworks这两个软件学习的度。多操作，细体会，举一反三是学习本章的合适策略。
2. 课程内容和教学要求
第1章网站的建立 本章的教学目标为：
（1）了解网页和网站的概念，特别是主页的概念；能够分析网站的结构。 （2）了解Dreamweaver 的操作界面。
（3）学会规划网站的结构；能够画出网站结构图。 （4）熟练掌握建立网站的方法。
（5）能够创建网站地图；能够更改网页的标题。 本章的教学建议：
本章的教学核心是创建一个网站。这包括了解网站的相关概念，熟悉制作网站的工具，规划出网站结构草图，到最后创建出一个网站的全过程。对于网站、网页等概念性的东西，可以根据实际情况进行删减，毕竟对于计算机专业的学生来说，这些不是新的概念。而对于Dreamweaver操作界面的讲述需要花一些心思。怎样通过一个巧妙的例子，将Dreamweaver的操作特点讲清楚是一个难点，如果仅仅是依次介绍，就显得太枯燥了。 本章还要向学生传达一个信息：制作网站前的准备工作与制作网站的操作同样重要，尤其是素材的搜集与网站结构草图的规划。要认识到制作一个网站是一个复杂的体系工程，这与使用Word制作一个文档是存在区别的。
对于具体的操作步骤，教材介绍的非常详细，建议让学习者按照课本自己操作。 本章的教学内容： 第1章 网站的建立
项目1 掌握网页概念和网页制作工具 子项目1网页、超链接与网站
网页就是把文字、图形、图像、声音、动画、视频等多种媒体形式的信息，以及分布在因特网上的各种相关信息相互链接起来而构成的一种信息表达方式。
超链接这种非线性的联系方式，使得网页信息量呈爆炸状分散和衍生，让人们可以非常方便地查找到自己需要的信息。而正是千千万万个网页组成了色彩斑斓的因特网世界，成就了迅速占领媒体世界的传奇。
在浏览器中输入网址后，看到的第一个网页我们称其为“主页”。主页就像一本书的目录，它的名字一般叫作index.htm或者index.asp。 子项目2 HTML
1. 什么是HTML语言
HTML语言，也就是Hyper Text Markup Language（超文本标识语言）。 ·4·
HTML语言作为超文本标记语言，用来描述某个事物应该如何合理地显示在计算机屏幕上。也可以这么说，HTML就是以特殊的标记形式将网页存储为通常的文本文件。
2. HTML语言的特点与缺点 要在网页上实现“欢迎参观我的主页”这句话为黑体18号字并居中显示，相应的HTML语句为：
句首的
网页可以分为静态网页和动态网页，区分它们的标准是网站所使用的服务技术，与网页上是否有动态效果无关。
支持动态网页的技术又分为客户端动态技术和服务器动态技术。客户端动态技术在显示网页内容时并不与网站服务器产生交互，而是将显示脚本程序嵌在网页文件中，服务器接受浏览器的请求发送网页后，脚本程序会自动在计算机上运行并将结果显示在浏览器中。
服务器动态技术在显示网页内容的过程中需要服务器和客户端的共同配合，服务器会根据客户端发来的参数运行相关程序，产生页面，然后再把已经形成的网页发送到客户端的浏览器上。
子项目4 网页制作工具
Dreamweaver原本是Macromedia公司的产品，后被Adobe公司收购。该软件除了本身具有的强大功能以外，还得益于其他相应软件的有力支持。它和该公司的另外两个产品Flash（动画制作工具）、Fireworks（图像编辑工具）一起被称为“网络三剑客”。 项目2 使用Dreamweaver建立网站 子项目1 Dreamweaver的操作环境
单击任务栏上的“开始”按钮，打开“开始”菜单；将鼠标指针指向“开始”菜单中的“所有程序”，打开“程序”菜单；再单击子菜单中的，启动Dreamweaver。 “Adobe Dreamweaver CS6”Dreamweaver的操作环境由标题菜单栏、文档工具栏、文档编辑区、状态栏、、面板组等组成。
子项目2 建立网站前的准备工作
在制作网站之前应该先画出结构图，这样不但可以帮助规划网站结构，使网站条理清楚、主题鲜明，还可以确定各个网页的内容，方便大家思考各网页之间的链接方式。
为每一个网页建立了网页素材文件夹，用于存放该网页使用的文字、图片等。而网页通用的背景图片、背景声音、动画等也分别存放在相应的文件夹中。 子项目3 建立站点
新建一个网站有多种方法，可以单击“站点”菜单中的“新建站点”命令，也可以单击标题栏的“站点”按钮，在下拉菜单中选择“新建站点”命令，还可以在面板组中打开“文件”选项卡，通过单击“管理站点”，然后新建站点。 子项目4 新建网页与文件夹
在面板组“文件”选项卡中，将鼠标指针移到站点名称上，单击右键，从弹出的快捷菜
·5·
《网页制作基础教程(Dreamweaver CS6)》教学指南
