网页制作教案电子版

====Word行业资料分享--可编辑版本--双击可删====教学内容第一章《网页与网站基础知识》校历第一周课时4课型理论+实践教学目标网站的策划与创建原则教学方法任务驱动法作业布置分析总结本章主要通过三个活动的开展，让学生了解DreamweaverCS3网页浏览的基本原理和网页制作技术的发展，知道目前网页制作常用的几种工具。了解HTML语法的基本构成及几种常用标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面操作。教学过程新课引入：越来越多的人开始熟悉网络，熟悉网页。人们已经渐渐意识到网络正在改变日常生活。人们需要为个人、企业制作一个精彩的网站，这就带来一个新的问题：怎样设计制作一个实用而美观的网站？实用与美观似乎总是相悖的。新课内容：一、网页与网站的概念网页：我们在浏览器中看到的页面，它是一个单个的文件。网页里可以有文字、表格、图像、声音、视频等等。网站中的第一个页面成为首页或主页。网站：存放在网络服务器上的完整信息的集合体，它包含一个或多个网页。这些网页按照一定的组织结构，以链接等方式连接在一起，形成一个整体，描述一组完整的信息。二、网页的设计网页的主题指网页所要表现的最主要的思想内涵，可以说师网页的灵魂。确定主题时应遵循的原则自己擅长或喜欢的内容主题小而精不要太滥或目标太高教学过程

2、网页的文字最适合于网页正文显示的字体大小为12磅左右，如果在一个页面中需要安排的内容较多可采用9磅的字号。标题和需要强调的内容可以用较大的字号。行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。在网页设计中，设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应该注意的是，对于文字的颜色，只可少量运用，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。3、网页的色彩●色彩助鲜明性

●色彩的独特性

●色彩的合适性

●色彩的联想性

●页面中各处用色的选择4、网页版式和布局1．版面设计的步骤

（1）画出页面的结构草图：只需画出页面的大体结构。注：分辨率为640*480时，页面显示尺寸为620*311；分辨率为800*600时，页面显示尺寸为780*428；分辨率为1024*768时，页面显示尺寸为1007*600；

（2）布局细化和调整：将需要放置的功能模块安排在页面上，注意突出重点和平衡协调

教学过程（3）定格：确定出完美的布局方案，定格为最后的版式

2．常见网页布局

（1）T型结构（2）同字结构教学过程（3）川字结构（4）三字结构教学过程（3）川字结构（4）三字结构教学过程（5）单一结构教学内容第一章《网页与网站基础知识》校历第一周课时2课型理论+实践教学目标网站的策划与创建原则教学方法任务驱动法作业布置分析总结本章主要通过三个活动的开展，让学生了解DreamweaverCS3网页浏览的基本原理和网页制作技术的发展，知道目前网页制作常用的几种工具。了解HTML语法的基本构成及几种常用标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面操作。教学过程三、网站的策划与创建原则

1、定位网站主题和名称

设计一个站点，首先遇到的问题就是定位网站主题。所谓主题也就是你的网站的题材。

对于题材的选择，应注意：

（1）主题要小而精。定位要小，（2）题材最好是你自己擅长或者喜爱的内容。

（3）题材不要太滥或者目标太高。“太滥”是指到处可见，网站名称及域名的选择也是非常重要的。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。一般的建议是：

（1）名称要正。也就是要合法，和理，和情。不能用反动的，色情的，迷信的，危害社会安全的名词语句。

（2）名称要易记。根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。另外，网站名称的字数应该控制在六个字（最好四个字）（3）名称要有特色。名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。

域名的选择也是如此，选一个简单易记，比如可以模仿知名网站扩大自己的影响，有一定含义的域名也是网站成功的一部分。2、网站的风格

网站的整体风格及其创意设计是站长们最希望掌握，也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。

有风格的网站与普通网站的区别在于：普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的教学过程

网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。如何树立网站风格呢？我们可以分这样几个步骤：

第一，确信风格是建立在有价值内容之上的。

第二，你需要彻底搞清楚自己希望站点给人的印象是什么。

第三，在明确自己的网站印象后，开始努力建立和加强这种印象。

对于确定风格，这里提供一些参考：

1.将你的标志logo,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。

2.突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。

3.突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。

4.想一条朗朗上口宣传标语。把它做在你的banner里，或者放在醒目的位置，告诉大家你的网站的特色

5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。

6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。

7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用,.。☆※○

□△→（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感觉。

8.用自己设计的花边，线条，点

9.展示你网站的荣誉和成功作品。

10.告诉网友关于你的真实的故事和想法。

教学内容第二章《站点的建立与管理》校历第二周课时6课型理论+实践教学目标1、站点创建2、页面设置教学方法任务驱动法作业布置制作个人空间网站分析总结通过为“我的个人网站”收集相关资料，掌握站点素材及其制作工具的有关知识；为“我的个人网站”规划站点目录，并比较大型站点的站点结构与小型站点的站点结构区别，从而了解站点的设计流程；学会使用“高级”标签为“我的个人网站”建立站点，并设置相关参数；通过网站地图，实现对“我的个人网站”中的网站文件管理，检查链接等。教学过程

一、站点概念多个网页文档通过各种链接并联起来就构成了站点。二、规划站点结构1、一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类，如图片文件放在image文件夹内，HTML文件放在HTML文件夹内，当然，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。如：html:放网页，img:放图像，sound:放声音文件，back:放备份文件，other:放其他2、用英文或者拼音给文件命名（推荐英文），不要使用中文的名字（因为有的机器对中文支持不太好，有可能出现链接的错误，你自己以为正确的东西在别人看来有可能是错的）。三、创建站点1、选择“窗口”/“文件”命令打开“文件”面板2、展开文件一项，选中站点，然后再选编辑站点3、点击“新建”

教学过程

站点名称（N）处填上你要建立的站点的名称，这个名字只起着识别的作用，与网站发布后真实的名字无关；本地根文件夹（F）处选择设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录；缓存可以使文件的移动、改名、查找等站点管理的操作速度大大提升，因此建议大家在这里打上钩；其它的可以默认，当然你可以试试选择不同的，默认图像文件夹为站点默认存放图片的文件夹（以后在做网页的过程中，使用非站点内的图片时，它会提示是否把该文件复制到这个文件夹内）；HTTP地址（H）为你站点的网址。作业：建立一个名字为“我的个人网站”的站点，站点内有image、picture、html三个文件夹和index.html文件，远程FTP服务器为.1，用户名为:tastelife，密码为：

教学内容第三章《新建文档与对象》校历第三周课时4课型理论+实践教学目标通过本章的学习，用户可以掌握DreamweaverMX中文版的基本操作及一些使用技巧。如文本的编辑、修改、文本列表的创建及网页性性的基本设置等。教学方法任务驱动法作业布置制作“中国民俗文化”网站分析总结通过本章练习，让我们学会网页制作中有关文档的一些基本操作，其中包括；通过三种方法创建网页、打开现有网页文档及保存网页；文本和特殊字符的输入及编辑方法以，学会创建列表；掌握在网页中插入日期、水平线等常见网页元素的方法以，并分析其共同之处；掌握设置网页属性的方法，并了解站点设计的一些基本理念。教学过程一、编辑文本1、输入文本

（1）换行

利用Enter键换行：在输入文字后按Enter键，文字成段，且上下段各空一行。

利用Shift+Enter键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按shift+Enter键。（2）加入特殊字符有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，例如注册商标®、版权符©等。

（3）加入批注文字

在网页中加入适当的批注文字，可以使日后修改、管理网页时更加方便。由于批注只有在编辑网页时或查看原代码时才能看到，所以不必担心批注文字破坏版面。2、查找和替换文本二、设置文本属性1、文本属性栏

文本属性栏也就是Dreamweaver默认的属性栏，如下图所示，其默认状态是打开。如果不小心将属性栏关闭，则可以通过以下2种途径打开文本属性栏：

（1）按快捷键Ctrl+F3

（2）选择窗口/属性命令2、设置文本格式

教学过程

文本格式一般包括文字的字体、字号、颜色及文本的对齐方式等。3、设置文本样式

（1）、粗体、斜体，以及其也样式

（2）、对齐方式

（3）、段落扩展/缩进三、文本列表1、创建

创建文本列表最简单的方法是通过文本属性栏上的列表按钮将光标停在文本前，单击属性栏中的无序列表按钮与有序列表，即可对文本进行无序或有序排列。2、修改属性

在网页中加入文本列表后，还可以根据个人的习惯改变列表的属性，如将无序列表的实心小圆圈改成实心矩形，将有序列表的阿拉伯数字改变为英文字母等。列表属性的修改是通过列表属性对话框来完成的。

在列表类型下拉列表框中，可以设置列表的类型。列表类型包括无序列表、有序列表、目录列表和菜单列表。

3、创建嵌套文本列表如果想把不同级别的文本内容用列表的形式表现出来，则需要用到文本列表的嵌套。创建文本列表的嵌套，需用到文本属性栏上的段落扩展/缩进按钮。作业：1、文本录入与编辑

2、文本及其格式化

教学内容第四章《表格处理与网页布局》校历第三周课时2课型理论+实践教学目标让学生熟练掌握对表格的使用插入表格表格的基本操作设置表格属性表格的高级操作层与表格的相互转换教学方法任务驱动法作业布置制作课程表等各种表格分析总结通过本章练习，让学生学会如何利用表格来布局页面，以及表可知及其单元格的编辑与属性设置。教学过程

一、在网页中插入表1、定位插入点，使用鼠标单击。

2、调出“插入表”对话框，

⑴方法一：单击“对象”面板（普通）中的“插入表格”对象按钮；

⑵方法二：单击“插入”｜“表格”菜单；

3、确定行与列数在“行”与“列”的输入框内输入所需的数值。

4、确定边距与间距在“单元格边距”与“单元格间距”的输入框内输入所需的数值。

边距：指单元格内的数据（内容）与边框线的距离，默认为1个像素。

间距：指相邻单元格之间的距离（包括上、下、左、右），默认为2个像素。

5、确定表格宽度在“宽度”输入框内输入所需的数值，在其右边选择单位。

6、确定边框的厚度在“边框”输入框内输入所需的数值。默认为1，若为0，则没有边框线（在布局时应用相当广）二、在表格中添加内容1、插入文本

⑴直接输入文本定位单元格，直接输入文本，若文本超过宽度，则自动扩展。首先是按横向自动分摊宽度，若不够，则转到下行。

⑵粘贴其它文本先将其它文本存入到剪贴板中，再将剪贴板中的内容粘贴至当前光标处。教学过程2、在单元格中插入图片与在文档中插入图片一样操作。

⑴选定位，鼠标单击；

⑵然后单击“对象”面板中的“插入图像”钮或选择“插入”｜“图像”菜单，弹出查找图像文件对话框；

⑶选择所需的图像文件，单击“选择”即可。三、输入外部数据Dreamweaver可接受其它程序创建的表格数据，但这些表格数据要使用定界符。定界符即单元格间的分隔符，一般有制表位、冒号、分号等。还可以是Excel文件。

导入Excel文件操作方法为：

⑴启动Dreamweaver，建立一个文档

⑵选择“文件”｜“导入”｜“Excel文档”菜单，弹出对话框。

⑶选择Excel文件，确定即可。

导入表格数据文件操作方法为：

⑴启动Dreamweaver，建立一个文档

⑸选择“文件”｜“导入”｜“导入表格数据”菜单，弹出对话框。

⑹选择“数据文件”单击“浏览”钮，查找到所需文件，选择“定界符”后，单击“确定”钮。

⑺还可进行其它设置：“表格宽度”、“边距”、“间距”、“格式化首行”、“边框”等。四、选择单元格元素1、选择单元格用鼠标在所要选定的单元格内单击。

2、选择一行将指针指向待选行的最左边，当出现黑色的向右箭头时

教学过程单击。

3、选择一列将指针指向待选列的最上面，当出现黑色的向下箭头时，单击。

4、选择整个表

先在表中单击，再选择状态左边的粗黑标记“table”

教学内容第四章《表格处理与网页布局》校历第五周课时6课型理论+实践教学目标1、认识布局模式2、用布局视图布局页面3、掌握进入和退出页面模式的方法4、创建布局表格和布局单元格5、掌握布局表格和单元格属性教学方法任务驱动法作业布置制作“世锦赛”网站分析总结通过本章练习，让学生学会如何利用表格来布局页面，以及表可知及其单元格的编辑与属性设置。教学过程创建页布局的一种常用的方法是使用HTML表格对元素进行定位。但是，使用表格进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对Web页进行布局。为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模式。在“布局”模式中，您可以使用表格作为基础结构来设计页，同时避免使用传统的方法创建基于表格的设计时经常出现的一些问题。一、绘制布局单元格和表格绘制布局表格，请执行以下操作：

1、确保您处于“布局”模式中。

2、在“插入”栏的“布局”类别中，单击“绘制布局表格”按钮。

3、鼠标指针变为加号(+)。

4、将鼠标指针放置在页上，然后拖动指针以创建布局表格。

绘制布局表格，请执行以下操作：

1、确保您处于“布局”模式中。

2、在“插入”栏的“布局”类别中，单击“绘制布局单元格”按钮。

3、鼠标指针变为加号(+)。

4、将鼠标指针放置在页上，然后拖动指针以创建布局单元格。二、绘制嵌套布局表格将一个布局表格绘制在另一个布局表格中，创建嵌套表格。对外部表格所进行的更改不会影响嵌套表格中的单元格；例如，当更改外部表格中行或列的大小时，内部表格中单元格的大小不发生变化。还可以插入多级嵌套表格。嵌套布局表格的大小不能超过包含它的表格。教学过程三、将内容添加到布局单元格1、将插入点放置在您要添加内容的布局单元格中。

2、执行下列操作之一：在单元格中键入文本，当进行键入时，单元格将按需要自动扩展。也可粘贴从其他文档复制的文本。在“插入”栏的“常用”类别中，单击“图像”按钮上的箭头，然后选择“图像”。教学过程一、实训重点：1、掌握布局网页在创建、选择、设置、存储与应用方面的特点；

2、掌握布局网页的制作方法；

难点分析：1、布局中的表格嵌套实训目的与要求：目的：能过上机实训让学生学会使用布局，让学生加深理解布局；要求：做出布局网页四、实习内容：

基本知识：1、布局的基本操作练习

五、实训中可能产生的问题预测及处理：此次实训最容易出现的问题如下：问题：创建布局单元格时处理：；教学内容第五章《图像插入与编辑》校历第六周课时6课型理论+实践教学目标通过本章的学习，用户可以掌握DreamweaverMX中网页所支持的图像格式、插入图像、修改图像属性、利用外部图像处理软件编辑图像，以及创建图像映射等内容。教学方法任务驱动法作业布置制作“七彩云南”网站分析总结通过介绍网页中图像的分类及其特点，引入图像的基本概念，添加图像的基本方法及其属性的设置。此外还介绍了创建图像的变换效果以及使用其他工具编辑图像的方法。教学过程网页图像简述计算机领域中，图形基本上分为位图图像和矢量图形两大类，而网页图像也就是这两类图形中的一部份。明确两者之间的差异，对创建和编辑网页图像很有帮助。二、插入图像1、插入一般图像

在网页中插入一般图像的方法很简单，首先将光标置于要插入图像的位置，单击插入栏中插入图像图标，或选择插入、图像命令，或是按下Ctrl+Alt+I组合键，无论选择上面的哪种方法都将弹出选择图像来源对话框。在此对话框中选择要插入网页的图像名，单击确定按钮，此时图像插入到网页中。2、插入网页背景图像如果想使网页得到美化，可以在网页中加入背景图像。加入背景图像的方法与设置网页背景图像的方法一样三、设置图像属性

当在网页中选中一幅插入的图像时，在属性面板将反映图像的属性，如下图所示。在图像属性面板上，可以定义图像的多种属性1、定义图像大小2、图像的排列方式3、设置图像间距4、设置图像边框5、用文字代替图像6、图像编辑器教学过程四、创建图像映射1、映射图映射图指的是将一个图像划分为若干区域，并将每个区域链接到不同的网页、URL或其他的资源中，这样的一个图像叫做映射图。2、图像映射面板

有关图像映射的操作大多数都是在图像映射面板中进行的。如果要打开图像映射面板，在图像属性面板上单击图像映射工具上的3个按钮、和之一，并在图像上画出相应的形状，将弹出图像映射面板3、定义热点

当在网页中插入了图像之后，可以利用热点工具为该图像定义热点，热点的基本形状有矩形、圆形和多边形3种。利用不同的工具，可以定义不同的热点形状。4、编辑热点定义热点后，就可以编辑热点。在DreamweaverMX中，热点的编辑包括改变单个热点的形状、大小，以及多个热点的对齐方式、热点间高与宽的设置等操作。5、为热点建立链接教学过程设定一个热点的轮廓后，就可以着手建立该热点的链接关系了。热点可以链接到不同的对象上，如一个已经设计好的网页、一个图像或一个动画等。作业：1、图像的插入

2、图像映射图

3、WEB相册一、实验目的：

1、通过本例要求掌握常见的图像格式及图像的插入方法。

2、能够修改图像属性，利用外部图像处理软件编辑图像。

3、创建图像映射，建立WEB相册。二、实验器材：多媒体计算机。

三、学时分配：2学时。

四、实习地点：校内多媒体机房。

五、实习内容：

基本知识：1、了解网页图像的格式及常见的图像编辑软件的使用

2、网页中图像插入及编辑练习

3、映射图的创建及编辑

4、WEB相册的创建及编辑实例设计：1、图像的插入

2、图像映射图

3、WEB相册教学内容第六章《创建超级链接》校历第七周课时6课型理论+实践教学目标1、熟练掌握设置文本超级连接的方法；2、熟练掌握设置图片超级连接的方法；3、熟练掌握设置图片热点超级连接的方法；教学方法任务驱动法作业布置各种链接的应用分析总结本章介绍链接的基本概念，其中包括URL地址、绝对路径和相对路径的概念及其区别。详细阐述了风种常见的超级链接的形式，通过活动掌握多种超级链接的创建方法，并且设置超级链接的目标窗口及文本提示。教学过程一、超级链接

1、概念：超级链接简称链接，是指从一个网页指向一个目标对象的连接关系，它包含两个部分，即链接源和链接目标。2、超级链接的作用可以把一个网站的网页或多个网站连接起来，点击链接时从一个网页跳转到另一个网页，或者跳转到页面指定的位置。也正是超链接的存在是人们改变了以往的顺序阅读习惯，使整个Internet上的信息连为一个整体。分类、绝对路径：是一个完整的URL，包括协议、域名、路径，如，常用于链接外服务器上的文件。相对链接：只有路径，没有协议、域名，它又分为站点根目录相对路径和文档相对路径。a点根目录相对路径指从站点的根文件夹到文档的路径如in_xi/index.htm"b文档相对路径指和当前文档所在的文件夹相对的路径，它使用较多。如../image/bg.jpg。锚点：指在网页中对某个位置的标记，如#top，jxgc.htm#top，用于转移到指定网页的指点位置。二、各种链接的功能和实现方法。

1导航链接：实现站点内文档的链接。

实现方法：a、向文件图标链接文档：将“属性”检查器的“链接”域右边的“指向教学过程文图标拖动到站点窗口的文档中。b、性检查器：选中添加链接的网页元素，点击属性面板中的“浏览图标。2、目标选择_blank在新的未命名的浏览器窗口中加载链接文档。

_parent在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。

_self将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。

_top将在整个浏览器窗口中加载链接文件，同时移除所有框架。

一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择_blank。3锚点链接：链接到文档中的指定位置。链接到文档中的指定位置：在需要插入锚的地方，点一下光标，然后单击常用面板上的命名锚记工具。在文档中选取要创建链接的网页元素，点击属性面板中的“指向文件”图标，并将它拖动到您需要链接的锚记处，也可在链接文本框中输入锚点名字，如#top，也可链接到其他网页的锚点上，如jxgc.htm#top。4空链接：是一个无指向的链接，通常用于为页面上的对象或文本附加行为5．创建javascript脚本链接：

创建步骤：教学过程在文档窗口中选取文本，图象或对象，在“属性”检查器的“链接”栏中键入javascript:，其后紧接javascript代码或函数调用。例如在链接栏中键入javascript:alert('哈哈你上当了')创建一个链接，点击链接后就会出现一个警告框。作业：1、基本操作

2、多彩文字链接教学内容第八章《插入多媒体元素》校历第八周课时2课型理论+实践教学目标1、掌握在网页中插入Flash元素的基本方法；2、掌握Flash相关属性的设置；教学方法任务驱动法作业布置在相应页面插入各种Flash元素分析总结本章主要通过三个活动的展开，介绍了在网页中插入Flash元素的方法，其中包括常见的Flash形式：Flash动画；Flash按钮；Flash文本等。介绍了在网页中添加视频和音效的方法，以及其他多媒体元素的插入，其中包括ActiveX控件、Plugin插件、JavaApplet等。教学过程新课内容：在Dreamweaver中可以将以下媒体文件插入到网页：Flash和Shockwave影片、QuickTime、AVI、Javaapplet、ActiveX控件以及各种格式的音频文件。一、添加Flash动画SWF格式的Flash文件，SWF文件是Flash(.fla)文件的压缩版本，此文件可以在浏览器中播放并且可以在Dreamweaver中进行预览，但不能在Flash中编辑此文件。在“文档”窗口的“设计”视图中，将插入点放置在要插入影片的地方，然后在“插入”栏的“常用”类别中，选择“媒体”，然后单击“插入Flash”图标。或选择“插入”>“媒体”>“Flash”。二、创建和插入Flash按钮在“设计”视图或“代码”视图中工作时，可以在文档中创建和插入Flash按钮。在“文档”窗口中，将插入点放置在您要插入Flash按钮的位置。打开“插入Flash对象”对话框，在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash按钮”图标。若要修改Flash按钮对象，在“文档”窗口中，单击Flash按钮对象以选择它。可以使用属性检查器修改按钮的HTML属性，例如宽度、高度和背景颜色。若要对内容进行更改，双击Flash按钮对象。在属性检查器中单击“编辑”。三、创建和插入Flash文本创建和插入Flash文本与Flash按钮类似。四、插入Shockwave影片Shockwave作为Web上用于交互式多媒体的Macromedia标准，是一种经压缩的格式。教学过程五、添加视频在Dreamweaver中可以通过不同方式和使用不同格式将视频添加到Web页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载它的同时播放它。六、嵌入声音文件嵌入音频将声音直接并入页面中，但只有在访问站点的访问者具有所选声音文件的适当插件后，声音才可以播放。七、插入ActiveX控件可以在页面中插入ActiveX控件。ActiveX控件（以前称作OLE控件）是可以充当浏览器插件的可重复使用的组件，有些像微型的应用程序。八、插入Javaapplet可以使用Dreamweaver将Javaapplet插入HTML文档中。Java是一种编程语言，通过它可以开发可嵌入Web页中的小型应用程序。s"width="100"height="230"><paramname="image"value="1.jpg"></applet>注:插件必须与所在网页在同一目录九、插入图像查看器作为图片之间互相交换方法：插入”>“媒体”>“图像查看器”，“窗口”>“标签选择器”教学过程bgColor:设置图像检看器的背景颜色。

captionColor:设置图片的标题颜色。

captionFont:设置图片标题的字体。

captionSkize:设置图片标题的字体大小。

frameColor:设置边框的颜色。

frameShow:设置是否显示边框。

frameThickness:设置边框的宽度。

imageCaption:设置图片的标题。imageURLs:指定图片的地址。

showControls:设置是否显示控制台。

slideAutoPlay:设置是否自动播放。

slideDelay:设置图片播放的延迟时间。

slideLoop:设置图片是否循环播放。

title:设置图像检看器的标题。

titleColor:设置图像查看器的标题颜色。

titleFont:设置图像查看器的标题的字体。

titleSize:设置图像查看器的标题的字体大小。

transitionsType：设置图片切换的模式。教学内容第七章《建立框架网页》校历第八周课时4课型理论+实践教学目标1、理解框架网页的基本原理；2、掌握新建框架网页的两种方法；教学方法任务驱动法作业布置建立框架网页分析总结本章主要通过四个活动的展开，让我们了解框架的基本概念，掌握框架网页的创建、调整、删除等基本集操作，能区分框架和框架集中的文件，并能区别保存。能够利用“属性”面板设置框架属性及相关的链接属性。掌握创建无框架内容及内嵌式框架的基本方法。教学过程一、框架与框架集的概念框架：是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。框架集：是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容，但noframes部分除外；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。二、框架的用途最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。三、框架和框架集工作流程要在浏览器中查看一组框架，请输入框架集文件的URL；浏览器随后打开要显示在这些框架中的相应文档。通常将一个站点的框架集文件命名为index.htm，以便当访问者未指定文件名时默认显示该名称。样例说明四、创建框架和框架集1、使用预定义的框架集通过预定义的框架集，您可以很容易地选择您要创建的框架集类型。创建预定义的框架集有两种方法：插入栏（2）“新建文档”对话框创建新的空框架集。2、设计框架集可以通过向窗口添加“拆分器”，在Dreamweaver中设计您自己的框架集。教学过程创建框架集操作：选择“修改”>“框架集”，然后从子菜单选择拆分项框架拆分操作：要拆分插入点所在的框架，从“修改”>“框架集”子菜单选择拆分项。请在按住Alt键的同时拖动框架边框。删除框架操作：将边框框架拖离页面或拖到父框架的边框上。调整框架大小操作：五、嵌套框架集在另一个框架集之内的框架集称作嵌套的框架集。六、框架和框架集的编辑1、选择框架和框架集要更改框架或框架集的属性，首先要选择您要更改的框架或框架集。您既可以在“文档”窗口中选择框架或框架集，也可以通过“框架”面板进行选择。2、在框架中打开文档将插入点放置在框架中，选择“文件”>“在框架中打开”，选择要在该框架中打开的文档，该文档随即显示在框架中。3、框架和框架集文件浏览器中预览框架集前，必须保存框架集文件以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。4、控制具有链接的框架内容九、Iframe的使用iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。在DreamweaverMX开始，可以可视化操作iframe，不再需要第三方插件。1、插入iframe点击“插入面板”的“标签选择器”教学过程在“标签选择器”对话框中，选择iframe标签，点击“插入”按钮。在“标签编辑器-Iframe”对话框中，根据面板提示操作。最基本的两项是“源”和“名称”。2、设置链接在某个iframe中打开选中链接，在属性面板中的“目标”项，手工输入目标iframe的“名称”。3、iframe透明为了使iframe内容和网页背景相同，需要使iframe透明。在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“允许透明”。教学内容第八章《插入多媒体元素》校历第九周课时4课型理论+实践教学目标1、掌握在网页中插入Flash元素的基本方法；2、掌握Flash相关属性的设置；教学方法案例教学法作业布置在相应页面插入各种多媒体元素分析总结本章主要通过三个活动的展开，介绍了在网页中插入Flash元素的方法，其中包括常见的Flash形式：Flash动画；Flash按钮；Flash文本等。介绍了在网页中添加视频和音效的方法，以及其他多媒体元素的插入，其中包括ActiveX控件、Plugin插件、JavaApplet等。教学过程一、实验目标掌握如何在Dreamweaver中插入Flash动画、Flash按钮、Flash文本、视频、声音以及插件。二、实习内容：

基本知识：1、Flash动画与Flash元素的插入练习

2、视频与声音的插入练习

3、外部插件的使用三、实例设计：插入Flash2、插入电影3、插入Flash图像查看器与背景音乐四、步骤【步骤一】建立站点【步骤二】插入相应的多媒体【步骤三】修改相应的多媒体教学内容第九章《建立表单》校历第九周课时2课型理论+实践教学目标1、理解表单交互的基本原理2、掌握建立表单布局及插入不同表单对解的基本方法；3、掌握设置相关属性教学方法案例教学法作业布置创建注册页分析总结本章主要通过三个活动的展开，让我们了解表单的创建方法其中包括表单布局的建立、表单元素的添加、表单元素的属性以及表单元素样式的设定。同时还介绍了验证表单输入结果、通过电子邮件接收表单结果及跳转菜单的创建方法。此外介绍了新版本中增加的四种spry构件的添加及属性设置方法。教学过程案例引入：1、留言簿

2、在线申请

3、搜索表单新课内容：一、表单的概念及作用

表单（Form）是一种结构化的文件，用于收集和发布信息。它是网站管理员与访问者进行交流的一种媒介，通过访问者填写表单中的选择题、填空题和问答题，网站管理员可以收集到来自世界各地的资料和意见。目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。在表单中经常出现的字段有：单行文本框、多行滚动文本框、单选框、复选框、下拉列表框和按钮。二、HTML表单设计基础表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。表单中主要包括下列元素：

button——普通按钮

radio——单选按钮

checkbox——复选框

select——下拉式菜单

text——单行文本框

textarea——多行文本框

submit——提交按钮

reset——重填按钮

教学过程用HTML设计表单常用的标记是：<form>、<input>、<Option>、<Select>、<textarea>和<isindex>等标记。1、<form>表单标记该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。2、<input>表单输入标记此标记在表单中使用频繁，大部分表单内容需要用到此标记。3、<select>下拉菜单标记4、<textarea>多行文本输入标记5、<option>选项标记三、表单网页的制作方法通常制作表单网页的方法有两种，第一种是手工添加，第二种是利用表单向导，这里我们着重介绍第一种方法。新建网页在网页上输入“留言簿”三个字后，单击菜单：插入――表单，会自动弹出一个下拉菜单，列出所有可供选择的字段课堂作业：1、通过“留言簿”的制作，掌握表单的制作方法，并自己动手做一遍。2、自己设计一个精美的表单。课后体会：仔细体会各种表单元素的使用方法及综合运用。通过本章学习，能够更加理解动态网页的概念，理解表单是设计者与浏览者之间的桥梁，从而使网站更具有吸引力。教学内容第十章《使用模板和库》校历第十周课时4课型理论+实践教学目标1、理解表单交互的基本原理2、掌握建立表单布局及插入不同表单对解的基本方法；3、掌握设置相关属性教学方法任务驱动法作业布置验证表单分析总结一个成功的网站在网页设计上必须体现其风格，以至于访问者能够在茫茫网海中对其留下或深或浅的印象，要做到这一点，不是只靠一两个设计非常优秀的页面就可以体现的，而是需要网站中所有的页面都要来完成的，也就是所有的页面都必须体现同一风格。但当我们需要更改网站页面中共有的内容时，如链接、页面布局等，就需要我们一页页的修改，这样做费时费力。教学过程范例引入：1、模板实例。

2、库实例。新课内容：一、使用库项目:库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法。这些元素称为库项目。通过修改库元素，可以实现整个网站各页面上与库元素相关内容的一次性更新。库元素存放在库文件中，库文件存在站点根目录的Library文件夹内。1、创建库项目：1）选择文档的一部分，例如选择一个图片（也可选择多项内容）。

2）打开资源面板，点击“库”按钮，打开库类别。

3）点击“新建库项目”按钮。

4）给库项目命名。一个库就创建好了。教学过程2、插入库项目1）将插入点放在“文档”窗口中。

2）选择一个库项目，单击“插入”按钮。

3）插入库后的页面如下图。3、修改库1）选中页面中的库项目。

2）在属性面板中点击“打开”按钮。

3）修改库项目，修改完成之后保存。

4）在“更新库项目”对话框中点击“更新”按钮。

5）选择更新的范围，更新完成之后关闭。4、与库分离1）选中页面中的库项目。

2）在属性面板中点击“从源文件中分离”按钮，则应用的库项目变为可以更改的，并断开与库项目的链接。5、更新整个站点或所有使用特定库项目的文档：选择“修改”→“库”→“更新页面”。6、更改当前文档以使用所有库项目的当前版本：选择“修改”→“库”→“更新当前页”。教学内容第十一章《CSS样式表》校历第十周课时2课型理论+实践教学目标使用CSS（层叠式样式表）可以为部分文件甚至整个网站定义样式。教学方法任务驱动法作业布置1、进行CSS基本样式设置，单击显示

2、在网页中制作两种风格以上的按钮，单击显示分析总结将样式表与网页相关联，关联的网页将自动套用样式表中的格式，使所有网页中都可以应用相同的样式，这样既保证了站点风格的一致性，又提高了工作效率。教学过程一、CSS概念：CSS是CascadingStyleSheets（层叠样式表单）的简称。它允许设计者在HTML文档中加入样式（如字体类型、颜色、大小等等）。二、CSS的创建与使用：

创建CSS样式：1、显示CSS样式浮动面板：单击［窗口］－－［CSS样式］

2、单击浮动面板右下角的加号

3、输入样式表名称

4、选择样式类型：（有三种）通常我们选择创建自定义样式创建自定义样式：建一个可以作为class属性应用于文本区域或文本块的样式。

重定义HTML标签：对指定的HTML标签的默认格式进行重新定义。小心使用重定义标签，这样做你会改变许多页面的布局。

使用CSS选择器：对特定的标签组合，或者包含有指定1d属性的所有标签进行格式定义。(在后面的内容中我们再会作详细举例和分析)5、选择应用区：（有二种）

仅对该文档：则只能将此样式应用于本文件。

新建样式表文件：可将此样式保存成一个文件，可供其他文件调用。

范例完成与演示：1、首先定义一个嵌入式（仅对本文档）的样式——body中的文字定义为9pt。按下Shift+F11打开CSS面板(CSS面板面于DREAMWEAVERMX的右边，和行为，HTML样式均在设计窗口)——新建一个样式表——选中重新定义HTML标签(R)和仅对该文档两项——出现“CSS样式定义”对话框——选择分类为“类型”——设定文字为“宋体”、大小为9pt——确定教学过程说明：上面的定义选择了<body>标签，也就是说<body>标签内的文字都将会是宋体，大小为9磅（pt），而<body>是网页的主体，也就是说网页内的所有文字都如上定义。范例：CSS基本样式设置。2、定义一外部连接式CSS样式——去掉链接文字的下划线，为链接文字设置不同状态下的链接颜色。很多网站做出来的链接都是无下划线的（或者鼠标移到后下划线不见了），而自己做出来的网页总是有下划线的。还有默认链接文字的颜色是固定的，未链接时为蓝色，链接后为紫红色，千篇一律，在网页中很是单调，其实这些都可以根据网站的风格、设计者的喜好进行不同的设置。再次“新建CSS样式”——这次选中使用CSS选择器和新建样式表文件两项，标签选择选a:link——“保存样式表文件”为a.css（样式表文件的扩展名为.CSS）——在“CSS样式定义”对话框中，字本装饰那里选无，表示无下划线，文字颜色为ff0000——确定即设定好了未链接文字无下划线，且文字颜色为红色。说明：<a>是指有链接的文字

a:link：表示已经链接；

a:hover：表示鼠标移上链接时；

a:active：表示链接激活时；

a:visited：表示己点击过的链接。然后重复几次上面步骤，按你的喜欢分别定义好上面几个标签即可。作业：1、进行CSS基本样式设置，单击显示

2、在网页中制作两种风格以上的按钮，单击显示教学内容第十二章《APDiv

应用》校历第十一周课时4课型理论+实践教学目标1、掌握在网页中创建、修改层和嵌套层的方法

2、掌握层的属性和编辑层属性的方法

3、掌握移动、删除层的方法

4、能够将层与行为进行简单结合教学方法任务驱动法作业布置制作菜单栏分析总结层是网站设计者应用最为广泛的工具之一。通过层，网站设计者可以随意在层中放入文字、图片、插件或其他层，也可以移动层；这正是使用Dreamweaver的层的魅力所在。通过本章的学习，应掌握层的基本操作方法如层的创建方法、层的各种编辑、层的相关属性设置及层与表格间的转换方式等。教学过程一、创建层1、使用插入菜单创建层：插入菜单——层选项

2、嵌套层：就是在一个层内创建新的层1）嵌套层的操作：

a、将插入点光标放入父层内，然后使用插入菜单——层选项；

b、按住Ctrl键，并在层面板内，将子层的名称拖到父层的名称上。

2）查看所有的层：“窗口”菜单-其他-层（快捷键F2）二、修改层1、选择层1）激活层：用鼠标单击层所属的区域

2）选择某一个层：

用鼠标单击文档的层标识，使层的边框上出现黑色的小方块；

-用鼠标单击层的选择手柄；

-用鼠标单击层的边框；

-用鼠标单击层面板内层的名称。

-按住Shift键的同时，依次用鼠标单击层所在的区域。

4）取消选择：在文档窗口内单击鼠标

5）删除层：选定层后，按Delete键2、改变层的大小：鼠标拖曳或属性面板教学过程3、改变层的位置：鼠标拖曳4、对齐层：选定多个层、“修改”菜单-对齐

要点：对齐层时，系统自动将最后选定的层作为对齐标准教学内容第十二章《APDiv

应用》校历第十一周课时2课型理论+实践教学目标1、掌握在网页中创建、修改层和嵌套层的方法

2、掌握层的属性和编辑层属性的方法

3、掌握移动、删除层的方法

4、能够将层与行为进行简单结合教学方法任务驱动法作业布置制作固定层分析总结层是网站设计者应用最为广泛的工具之一。通过层，网站设计者可以随意在层中放入文字、图片、插件或其他层，也可以移动层；这正是使用Dreamweaver的层的魅力所在。通过本章的学习，应掌握层的基本操作方法如层的创建方法、层的各种编辑、层的相关属性设置及层与表格间的转换方式等。教学过程三、图层的命名命名图层可以执行以下操作之一：（1）选择图层，在其属性面板的“层编号”文本框中输入图层名称。（2）选择“窗口”|“其它”|“层”命令，打开图层面板。双击要命名图层的“名称”栏，使之处于可编辑状态，输入图层名称。四、改变图层的叠放次序1．利用图层面板来调整图层的叠放次序打开图层面板。把光标放置到要改变位置的层的名称上，拖动到合适位置释放鼠标。2．利用层属性面板来调整图层的叠放次序在层属性面板中直接修改层的“Z轴”值，可以改变层的叠放次序。可以在文本框中输入数值，当输入的数值比当前值大时，表示图层的叠放次序提高；当输入的数值比当前值小时，表示图层的叠放次序降低。五、设置图层参数和图层属性1、设置图层参数

1）使用图层参数可以为新创建的层定义默认设置

2）操作：“编辑”菜单-参数选择2、设置图层属性：属性面板教学过程层与表格1、将层转换为表格：“修改”菜单-转换-层到表格2、将表格转换为层：“修改”菜单-转换-表格到层注意：1．隐藏的图层不能转换为表格。2．重叠的层不允许转换为表格，因为表格的单元格是不能重叠的。3．在模板文档或已应用模板的文档中，不能将层转换为表格或将表格转换为层。即应该在非模板文档中创建布局，然后再将该文档另存为模板之前进行转换。教学内容第十二章《APDiv

应用》校历第十二周课时6课型理论+实践教学目标1、掌握在网页中创建、修改层和嵌套层的方法

2、掌握层的属性和编辑层属性的方法

3、掌握移动、删除层的方法

4、能够将层与行为进行简单结合教学方法案例教学法作业布置会跑动的面板动态菜单的制作4、时间轴的制作（1）设计一个复杂的timeline（2）加入控制按钮和动作（3）动画过程中设置图层可见性分析总结层是网站设计者应用最为广泛的工具之一。通过层，网站设计者可以随意在层中放入文字、图片、插件或其他层，也可以移动层；这正是使用Dreamweaver的层的魅力所在。通过本章的学习，应掌握层的基本操作方法如层的创建方法、层的各种编辑、层的相关属性设置及层与表格间的转换方式等。教学过程一、实训目的与要求：目的：通过上机实训让学生学会使用层定位网页中元素和实现一些简单特效。要求：利用层面使网页中的文档内容出现重叠效果，实现层面内容的动态交替显示。二、实训内容：利用层制作下拉菜单式的网页菜单注：(1)、父层应加空链接，光标应定位在<ahref>之间，再添加行为(2)、属性栏左右应设为空利用层做出交替显示的特效。利用层做出拼图注：(1)通过单击“文档”窗口底部标签选择器中的<body>选择body标签。（2）打开“行为”面板，从“动作”中选择“拖动层”。在“左”和“上”文本框中为拖放目标输入值（以像素为单位）。拖放目标是一个点，您想要访问者将层拖动到该点上。当层的左坐标和上坐标与在“左”和“上”文本框中输入的值匹配时便认为层已经到达拖放目标。这些值是与浏览器窗口的左上角相对的。在“靠齐距离”文本框中输入一个值（像素）确定访问者必须放目标多近，才能将层靠齐到目标。较大的值可以使访问者较容易找到拖放目标。注意行为面板中的动作为onload。保存页面，f12预览。三、层的制作与设计会跑动的面板动态菜单的制作教学过程4、时间轴的制作（1）设计一个复杂的timeline（2）加入控制按钮和动作（3）动画过程中设置图层可见性5、实训结果：

制作出课堂上演示的例子；6、实训中可能产生的问题预测及处理：此次实训涉及的内容比较多，可能出现的问题的面也可能要广泛得多。最可能会出现以下问题：问题：学生在插入图像以后会想直接通过拖动鼠标移动图像的位置；这是不可实现的；处理：再次给出现此错误的学生强调图像也是网页的一种普通元素，而网页中的普通元素不能在网页中随便移动的。想进行页页排版安排网页元素的位置，只有通过排版工具，如表格和层进行定位。问题：学生可能会想使用图片和时间轴结合做图片移动的动画。这了是不可实现的；处理：给出现此错误的学生强调能和时间轴结合做位置移动动画的只有层。图像和时间轴给合只能做交换图片的动画，而不能做位置移动的动画。如果想做图像移动的动画。必须先要把图像放到层里面，然后通过层和时间轴结合做出图像位置移动的动画。此类问题即可解决；教学内容第十三章《行为》校历第十三周课时4课型理论+实践教学目标1、了解行为、事件与动作的概念

2、学会利用行为面板设置控制对象的行为

3、会利用系统提供的主要行为，设置网页对象的行为从而实现交互式网页的设计

4、能够下载、安装并使用第三方行为教学方法案例教学法作业布置1、使用“改变属性”行为设计变色按钮效果，单击显示效果图。

2、使用“拖动层”行为设计拼图，单击显示效果图。

3、使用第三方行为设计滑动菜单，单击显示效果图分析总结网页中很多动态效果可以通过行为来实现。Dreamweaver附带了很多内置的行为，即使是那些不懂Java的入门也能轻松地制作动态网页。行为是一个对象上加为某一事件而触发某一动作的综合描述。它是被用来动态响应用户操作、改变当前页面交效果或是执行特定任务的一种方法教学过程新课内容：一、 认识行为和事件：1、行为：指在网页中进行的一系列动作，通过这些动作可实现用户同网页的交互，也可以通过动作使某个任务被执行。行为由事件和动作两个基本元素组成。通常，动作是一段JavaScript代码，Dreamweaver内置了多种行为.2、事件：事件则由浏览器所定义，它可附加到各种页面元素上，也可被附加HTML标记中。同一个事件能够引发几个不同的动作（注意执行顺序）。

选择的对象不同，可执行的事件也不同。

常见事件：OnchangeOnClickOnDblClickOnloadOnMouseDownOnMouseUp二、基本行为操作：1、认识行为面板：事件列表行为列表浏览器及版本不同，事件列表的内容也有所不同。添加与编辑行为：选定网页元素、“窗口”菜单－行为面板（Shift+F3）添加行为效果：为对象、文本、时间线附加行为。选择对象-打开行为面板-单击加号按钮-选择合适的行为2）编辑行为效果：编辑动作、引发动作的事件、更改参数。3）为同一个事件添加多个动作：教学过程三、使用DreamWeaver的内置行为：1、调用JavaScript：某些事件发生时，允许用户调用相应的JavaScript代码。2、改变属性：动态改变对象的属性值。如层的属性值，图像大小或悬停按钮效果。范例演示：改变属性3、检测浏览器：可获取用户浏览网页所使用的浏览器类型而后根据不同的浏览器显示不同的网页。

一般常将这种行为附加到文档上—<body>标记上，打开文档自动跳转。

另一种使用方法是将此行为附加到一个空链接上。4、检测插件：检测浏览者是否安装了浏览网页所需的插件。从而决定链接指向的网页。

如：FlashShockwave等。5、控制Shockwave或Flash：可在文档中添加按钮类的对象，实现对动画的控制。

如：设置动画的播放、停止、返回或转到相应帧。6、拖动图层：实现页面上的层的移动，如拼图等动态效果。

拖动图层的动作必须在拖动图层之前被调用—OnLoad（body对象）教学过程7、跳转地址：可在当前窗口或指定框架中打开一个新的网页。

单击一次可改变两个或两个以上框架内容，也可附着于时间线上便于在一段时间后执行。

要点：注意框架的命名8、打开浏览器窗口：在一个新的浏览器窗口中载入一个链接目标文件。9、弹出消息：弹出一个消息框，框内的内容可为文本或夹杂JavaScript脚本。范例演示：弹出浏览器窗口与弹出消息10、播放声音：网页中播放声音文件。11、预加载图像：12、使用跳转菜单：13、使用关联跳转菜单：编辑开始按钮（GO）14、设置导航条图像：范例演示：导航条与跳转菜单教学过程15、设置文本：框架文本、层文本、状态栏文本、文本域文本。不改变原网页中的内容16、交换图像、恢复交换图像——翻转图像范例演示：交换图像与设置文本17、时间线动作：转到时间线帧、播放、停止时间线。18、验证表单：提交表单时，本动作可用于检查数据的有效性。范例演示：检查表单19、显示——隐藏层：可在页面上显示层、隐藏层或恢复默认的层可见性状态。范例演示：见层范例四、下载并安装第三方行为：在Dreamweaver站点或其他的第三方开发站点上找到更多的行为动作。1、下载行为文件－解压－移到文件夹（Dreamweaver\Configuration\Behaviors\Actions）

重启Dreamweaver即可。教学过程范例演示：第三方行为——滑动菜单与层居中2、直接下载插件文件安装。课堂作业：1、使用“改变属性”行为设计变色按钮效果，单击显示效果图。

2、使用“拖动层”行为设计拼图，单击显示效果图。

3、使用第三方行为设计滑动菜单，单击显示效果图课后体会：本课实例较多，制作简单，界面美观，容易引起学生的兴趣。但由于内置行为较多，容易造成重点不突出，所以在讲课时能够有祥有略，较好地完成教学任务。同时重点突出了行为在具体网页中的应用，做到发部分与全面的统一结合。教学内容第十四章《编辑源代码》校历第十三周课时2课型理论+实践教学目标掌握设置快速编辑源代码的方法，其中包括插入HTML、编辑标签和环绕标签教学方法案例教学法作业布置利用快速编辑源代码的方法，完成首页制作分析总结Dreamweaver提供的编辑环境是“所见即所得”的可视化编辑环境，用户在制作网页时不需要编写代码。但是，如果用户需要创建一些特殊的网页效果，插入脚本以及遇到了纛在可视化环境中无法解决的问题，则需要手动编写HTML代码。教学过程一、快速标签编辑器概述①“插入HTML”：插入新的HTML代码。②“编辑标签”：编辑已有标签。③“环绕标签”：用一个新标签包围当前选定元素。二、插入HTML三、编辑标签四、环绕标签五、导入Word文档执行“文件”|“导入”|“Word文档”命令，在弹出的“打开”对话框中选取.doc的文档即可。六、导入Excel文档执行“文件”|“导入”|“Excel文档”命令，在弹出的“打开”对话框中选取.doc的文档即可。教学过程七、设置源代码参数（1）概述:Dreamweaver提供的编辑环境是“所见即所得”的可视化编辑环境，用户在制作网页时不需要编写代码。但是，如果用户需要创建一些特殊的网页效果，插入脚本以及遇到了一些在可视化环境中无法解决的问题，则需要手动编写HTML代码。在编写代码之前设置源代码的相关参数，可以为具体编写工作提供便利。执行“编辑”|“首选参数”命令，在弹出的“首选参数”对话框中即可设置源代码的相关参数（2）代码改写:在弹出的“首选参数”对话框的分类选项中选取“代码改写”，即可设置相关的属性。“代码改写”：控制修改的内容。如果有需要修改的内容，则Dreamweaver将在打开HTML文档时修改其HTML源代码。（3）代码格式选项设置:在弹出的“首选参数”对话框的分类选项中选取“代码格式”，即可设置相关的属性，“代码格式”：控制常见HTML格式选项。在该选项的面板中可以设置代码缩进、换行、大小写等显示的格式。（4）代码提示选项设置:在弹出的“首选参数”对话框的分类选项中选取“代码提示”，即可设置相关的属性。“代码提示”：设置代码提