（参考）DREAMWEAVER电子教案

1、第1章 初识Dreamweaver安装、下载方法.一、教学目的：学习原DR的安装、下载方法.二、教学重点：概述和安装三、教学过程1.1 Dreamweaver MX概述1、直观的新工作区2、更加强大的模板3、广泛的代码库4、新服务器技术5、帮助初学者起步的示例内容6、XML和WEB标准支持7、改进的级联样式表（CSS）8、高性能的新编码功能9、高性能的新编码功能10、优化COLDFUSIONMX开发环境 使用 Dreamweaver 工作区一、 教学目的：认识DR的界面，了解各面板的组成，菜单的组成。二、 教学重点：各面板的组成。三、 教学过程：选择工作区布局（仅适用于 Window

2、s） 在 Windows 中首次启动 Dreamweaver 时，会出现一个对话框让选择一种工作区布局。如果以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。选择工作区布局： 选择下列布局之一： Dreamweaver MX 工作区HomeSite/代码编写者样式的 Dreamweaver MX 工作区Dreamweaver 4 工作区 在选择一种工作区后切换到另一种工作区： Dreamweaver MX 工作区 浮动工作区布局（Windows 和 Macintosh） 状态栏 “文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。调整“文档”窗口的大小将“文档”窗口的大小

3、调整为预定义的大小： 向“窗口大小”弹出式菜单中添加新的大小： 将“文档”窗口最大化（仅适用于 Windows 集成工作区）： 使用快速启动条 快速启动条显示在状态栏中，包含用以打开和关闭各种面板、检查器和窗口的按钮。 若要显示快速启动条，请在“面板”参数选择中启用“在面板和启动器中显示图标”选项。可以指定在快速启动条中显示哪些项目。使用文档工具栏· “显示代码视图· “显示代码视图和设计视图”· “显示设计视图 · “标题” · “文件管理” · “在浏览器中预览/调试”·“换行符”在插入点处插入一个换行符。还可以按下 S

4、hift+Enter (Windows) “不换行空格”在插入点处插入一个不换行的空格 ( )。 “左引号”、“右引号”和“破折线”在插入点处插入标点符号。 “英镑符号”、“欧元符号”和“日元符号”在插入点处插入货币符号。 “版权”、“注册商标”和“商标”在插入点处插入相应的符号。 “其它字符” 第二单元 文本的编辑与基本操作一、 教学目的：学习网页的组成对象设计要素文本的字体大小颜色，段落的格式，基本的编辑命令。二、 学教重点：文本编辑的基本操作三、 教学过程：网页的组成比报纸和杂志复杂的多，因为它包含图、声、文、动画、控件等多媒体，另一大特点有超级链接。1、 文字标题：一

5、般为图形尺寸系统默认大小样式：一般少用下划线字体：一般为系统默认大小颜色：以颜色来强调文章的重点2、 图形一般为GIF和JPG格式3、 超级链接站内链接和站外链接网页的设计要素不同浏览器的显示效果网络的传输速度屏幕的分辨率颜色的显示网页的基本操作创建网页文件新建对话框打开文件类型HTMLSHTMSHTMLXML文件库文件LBI模板文件DWT样式表文件CSS微软服务器端文件ASPJAVA服务器端文件PHP文件TXT文件CFM模板文件JSF fireworks文件LASSO打开当前站点文件从站点面板中打开或通过菜单文件打开命令打开最近使用的文件文件菜单下列出的文件名从WORD中导入文件先在WORD

6、中将文件保存为HTML文件然后在DR中文件导入WORDHTML还可打开后用命令清除保存网页另存为模板输入文本直接输入使用剪贴板用ENTER相当于插入<p> 用SHIFTENTER 相当于插入<br>改变字体样式改变字号要使字体不随浏览器的字体设置而改变就要用到层叠样式（CSS Style）文本的颜色选择文字然后用下列两种方式l 用文字属性面板中调整l 单击调色板中的右上角按钮或菜单文本颜色l 要将字体改为默认值点上机练习：段 落 格 式创新新段落：ENTER分段落在段落格式下拉菜单选择一种格式对齐段落：居中对齐左对齐右对齐缩进段落或菜单或选择段落后右击弹出菜单取消缩进项

7、目符号：每个段落前加一个项目符号用利用列表下拉选择各种不同的情况插入分隔线修改分隔线的属性改变长度改变高度改变对齐方式插入特殊字符和符号 菜单插入特殊字符弹出子菜单，进行所需要的项目选择其中包括：换行符SHIFTRETURN不换行空格CTRELSHIFTSPACE用于行首插入符号Email 位置链接插入电子邮件链接其效果将看到“欢迎了解”字样并带下划线可以发送邮件插入日期时间：插入注释文字基本编辑命令撤销和重复操作查找和替换移动和复制直接用鼠标拖动使用CUTCOPYPASTE灵活使用HISTORY面板SHIFTF10表示当前刚完成的操作重放按钮复制到剪帖板按钮保存命令按钮弹出菜单按钮可清除历史

8、记录等操作上机练习，重复上述操作，记录快捷键作业：做一个文字型的小网页，将学到的知识运用在上面。第3单元网页中的图像链接教学目的：掌握网页中插入图像、修改属性、插入交互图像以及创建交互图像的方法。教学重点：插入图像、控制图像创建链接、插入交互图像的方法。插入图像操作： 1. 在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一：o 在“插入”栏的“常用”类别中，单击“图像”图标。o 在“插入”栏的“常用”类别中，将“图像”图标拖入“文档”窗口中（或者，如果您正处理代码，则拖入“代码”视图窗口中）。 o 选择“插入”>“图像”。 o 将图像从“资源”面板（“窗口”>

9、;“资源”）拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第 3 步。 2. 在出现的对话框中执行下列操作之一：o 选择“文件系统”以选择一个图形文件。o 选择“数据源”以选择一个动态图像源文件。3. 浏览以选择您要插入的图像或内容源文件。如果您正在一个未保存的文档中工作，则 Dreamweaver 生成一个对图像文件的 file:/ 引用。将文档保存到站点中的任何位置后，Dreamweaver 将该引用转换为文档相对路径。 4. 在属性检查器（“窗口”>“

10、属性”）中，设置该图像的属性。设置图像属性 1. 设置以下任一选项：o 使用缩略图下面的文本域设置名称，以便在使用 Dreamweaver 行为（例如“交换图像”）或脚本整理语言（例如 JavaScript 或 VBScript）时可以引用该图像。o “宽”和“高”以像素为单位指定图像的宽度和高度。o “源文件”指定图像的源文件。单击文件夹图标以浏览到源文件，或者键入路径。 “链接”指定图像的超链接。将“指向文件”图标拖到“站点”面板中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入 URL。 有关创建链接的信息， “对齐”对齐同一行上的图像和文本。“替代”指定只显示文本

11、的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。对于使用语音合成器（用于只显示文本的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。 “地图名称”和“热点工具”允许您标注和创建客户端图像地图。 “垂直边距”和“水平边距”沿图像的边缘添加边距（以像素为单位）。 “垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。 “目标”指定链接的页应当在其中载入的框架或窗口。 _blank，将链接的文件载入一个未命名的新浏览器窗口中。 _parent，将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果

12、含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件。 _self，将链接的文件载入该链接所在的同一框架或窗口中。此目标为默认值，因此通常不需要指定它。 _top，在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。  “边框”是以像素为单位的图像边框的宽度。默认为无边框。 “编辑”启动您在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。有关设置外部图像编辑器的信息， “重设大小” Control+代字号 () 第四单元表格设计教学目的：学习下列方法· 在“标准”视图中创建和修改表格· 向表格添加颜色· 在“标准”视图中设置相对宽

13、度的表格教学重点：能进行表格设计教学过程：在“标准”视图中创建和修改表格 1. 在 Dreamweaver 中，选择“文件”>“新建”。即出现“新建文档”对话框。 2. 在“空文档”列表中，选择“HTML”，然后单击“创建”以创建一个新的 HTML 文档。3. 在“文档”工具栏的“标题”文本域中，输入“表格设计”为文档添加一个标题。4. 选择“文件”>“保存”将该文档保存到本地站点文件夹中。将其命名为 tableModify.htm。 插入表格 现在就可以在文档中插入表格了。 1. 在“文档”窗口，将插入点放到文档中，然后执行下列操作之一： o 选择“插入”>“表格

14、”。o 在插入栏的“常用”类别中，单击“表格”图标。 出现“插入表格”对话框。2. 在该对话框中，设置下列选项： o 在“行数”文本框中，键入 2。o 在“列数”文本框中，键入 2。o 在“宽度”文本框中键入 600，然后在“宽度”文本框右边的弹出式菜单中选择像素。将宽度设置为 600 像素将创建一个固定宽度的表格。稍后，我们将在本教程中更详细地讨论表格宽度。 o 在“边框”文本框中，键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。 3. 单击“确定”。Dreamweaver 将该表格插入到文档中。 4. 执行下列操作之一来保存文档：o 选择“文件”>“保存”。o 按 Ct

15、rl+S 组合键 修改表格 下一步，将修改表格的布局。将在表格中添加行和列，并且学习如何合并和拆分单元格以创建所需的页面布局。 1. 在左上方的单元格中单击，然后向下拖动直到最下面的行以选择左边的一列。2. 选择“修改”>“表格”>“插入列”。现在该表格包含三列。 3. 单击左下方的单元格，然后选择“修改”>“表格”>“插入行或列”。即出现“插入行或列”对话框。 提示： 如果想要插入特定数目的行或列，或者要选择在表格中插入行或列的位置，请选择“插入行或列”选项。4. 在该对话框中，设置下列选项：对于“插入”，选择行。 在“行数”框中，键入 2。 对于“位置”，选择 所选

16、之上。 5. 单击“确定”。表格即会更新。现在的表格为四行三列。 6. 保存所做的更改（“文件”>“保存”）。合并和拆分单元格 通过合并和拆分单元格，可以自定义表格的设计以符合布局需要。接下来，将看到如何使用菜单选项或属性检查器来合并或拆分表格单元格。 1. 在文档中，将指针从左上方的单元格拖到它下面的一个单元格，以选择表格左列的上面两个单元格。2. 选择“修改”>“表格”>“合并单元格”。 两个单元格合并成一个单元格。3. 单击第二列的第三行，然后向右向下拖动以选择第二列和第三列中的最后两行单元格。 4. 在属性检查器中，单击“合并”按钮以合并单元格。选定的单元格合并为一个

17、单元格。可以拆分单个的单元格或列。 1. 单击左上方的单元格。2. 在属性检查器中，单击“拆分单元格”按钮。“拆分单元格”对话框出现。3. 在该对话框中，设置下列选项：o 对于“把单元格拆分”，选择列。o 在“列数”框中，输入 2。4. 单击“确定”。表格即被修改。更改行高和列宽 现在调整该表格的尺寸。将要增加表格的行间距，并且调整表格列间距。 1. 沿表格底部边框移动指针直到指针变成一个边框选择器，然后向下拖动以调整表格大小。如果愿意，还可以使用此方法调整表格中的其他行高。 2. 沿一个列的边框移动指针直到指针变成一个边框选择器，然后向左或向右拖动它以更改列宽。3. 调整完成后，保存文档。向

18、表格添加颜色 可以向表格的任何部分添加颜色。将首先向整个表格添加背景颜色，然后对表格中的单元格应用不同的背景颜色。最后，将更改边框颜色。 1. 在文档中，单击表格的任何一个单元格，然后在位于文档窗口左下方的标签选择器中单击 <table> 标签以选择整个表格。2. 如果属性检查器尚未打开，则打开属性检查器（“窗口”>“属性”）。属性检查器中出现所选表格的属性。3. 在属性检查器中，执行下列操作之一，在“背景颜色”文本框中选择一种颜色：o 单击颜色选择器弹出式菜单，然后从颜色选择器中选择一种颜色。o 输入一个十六进制的颜色值，例如 #CC9933。o 输入一个网页安全色名称，如

19、 goldenrod。将一种背景颜色应用到表格。4. 用同样的方法可以将一种背景颜色应用到表格的单元格中。在左上方的单元格中单击，然后在属性检查器的“背景颜色”文本框中选择一种不同的颜色。5. 如果需要，还可以向其他单元格中添加颜色。添加边框颜色 现在，将设置表格边框的颜色。边框颜色同时应用于表格的外边框和内边框。 1. 在文档窗口中，选择表格。2. 在属性检查器的“边框”文本框中，使用颜色选择器为表格选择一种边框颜色。 3. 完成后，请保存文档。4. 按 F12 键（仅限于 Windows）或者选择“文件”>“在浏览器中预览”，然后选择一种浏览器以查看文档。在“标准”视图中设置相对宽度

20、的表格 1. 在 Dreamweaver 中，选择“文件”>“新建”。2. 在“新建文档”对话框中，已经选定了“基本页”类别；在“基本页”列表中，双击“HTML”创建一个新的 HTML 文档。文档在文档窗口中打开。 3. 将该文件保存到本地站点文件夹。将其命名为 tableWidth。4. 将插入点放置在文档中。5. 在插入栏的“常用”选项卡中，单击“表”按钮。6. 在出现的对话框中，设置下列选项：在“行数”文本框中，键入 2。 在“列数”文本框中，键入 3。 在“宽度”文本框中，键入 90，并在“宽度”文本框右边的弹出式菜单中选择百分比。 在“边框”文本框中，输入 1 将表格和表格单元

21、格周围的边框宽度设置为 1 个像素。 7. 单击“确定”。表格即出现在文档中。 8. 单击中间列最上方的单元格并拖动到最下方的单元格以选择中间列。 9. 在属性检查器中，使用颜色选择器将一种背景颜色应用于该列。 创建其宽度基于像素的表格 现在将添加另外一个表格。其宽度基于像素的表格被设置为某个特定宽度，并且不会随着浏览器窗口大小的改变而改变。 1. 在刚刚插入的表格后面插入一个段落回车。2. 在插入栏的“常用”选项卡中，单击“表”按钮。3. 在出现的对话框中，设置下列选项：在“行数”文本框中，键入 2。 在“列数”文本框中，键入 3。 在“宽度”文本框中，键入 600，然后在“宽度”文本框右边

22、的弹出式菜单中选择像素。 在“边框”文本框中，键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。 4. 单击“确定”。表格即出现在文档中。 5. 单击中间列的最上方单元格并向下拖动到最下方的单元格以选择中间列。  6. 在属性检查器中，使用颜色选择器将一种背景颜色应用于该列。 7. 按 F12 键（仅限于 Windows）或者选择“文件”>“在浏览器中预览”，然后选择一种浏览器以查看文档。调整浏览器窗口大小以查看在浏览器窗口改变时，这两个表格是怎样变化的。基于像素的表格保持大小不变，而基于百分比的表格则调整大小以符合浏览器大小。 8. 文档查看完毕后，请关闭浏览器窗

23、口。9. 保存文档。创建和保存新文档 1. 在 Dreamweaver 中，选择“文件”>“新建”。2. 在“新建文档”对话框中，已经选定“基本页”类别。在“基本页”列表中选择“HTML”，然后单击“创建”创建一个新的 HTML 文档。文档在文档窗口中打开。 3. 将该文档保存到的本地站点文件夹中，并将其命名为 tableLayout.htm。 第五单元版面设计1. 教学目的：能轻松地设计出合理的网页设计2. 教学重点：创建、布局和调整布局表格3. 课堂讲解：创建布局表格和布局单元格绘制布局表格： 如果要创建多个布局表格而又不想每次都单击布局表格按钮，按住CTRL再创建。创建布局表格时会

24、靠近页面边界8个像时会自动对齐。取消对齐功能用按ALT键绘制布局单元格：在页面上整理一个单元格以后，会自动创建了一个包含这个布局单元格的布局表格，在一个布局表格里可以创建几个单元格。组件绘制嵌套的布局表格：在一个表格里绘制另一个布局表格，称为布局表格的嵌套，在一个表格里可以创建多个嵌套布局表格使用辅助网格线：菜单中查看网格网格设置显示网格CTRLALTG捕捉网格SHIFTALTCTRLG在布局单元格中添加内容：添加文本、添加图像、调整布局表格和布局单元格单击单元格的边框，或按住CTRL单击单元格中的任何位置，在布局单元格中的边框上会出现控制柄。拖动控制柄就可以改变布局单元格的大小。移动布局单元

25、格：1是选定，2是拖动或用方向键每按一次移动一个像素。按住SHIFT键每按一次可移动10个像素。设置布局单元格：选定单元格在属性面板中设置设置布局表格：选定后在属性面板中设置设置自动伸展宽度设置指定宽度使用间隔图第六单元框架一、 教学目的：学习框架集，框架集中保存及关联文件。二、 教学重点：框架集的基本概念和基本操作三、 课堂讲解：1、框架的作用2、创建框架方法用菜单方法用拖动框架任一角，或一边。按ALT拖动边框架拖出另一边合并4、 插入预定义框架集5、 嵌套的框架集保存框架集文件CTRLS只能保存当前页面。保存框架保存全部一定要搞清楚框架集和各框架的名字于其对应的关系。框架与框架的属性边框属

26、性框架集命名确定框架的大小设置框架集的边框改变框架背景的颜色使用链接控制框架的内容空白上级自身顶部小结：能利用框架更好地规划页面作业：利用框架作一网页第7单元层的运用一、 教学目的：创建层，层的参数选择和属性设置，层的操作，改变层的堆栈顺序，改变层的可见性，层与表格。二、 教学重点：层的运用三、 课堂讲解：打开“层”面板，请选择“窗口”>“其他”>“层”。F2创建层：设置层的可见性层的名称创建嵌套层：嵌套层是其代码包含在另一个层中的层。嵌套通常用于将层组织在一起。嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。 1. 层的属性设置：设置以下任一选项：层 ID 用于指定一个

27、名称，以便在“层”面板和 JavaScript 代码中标识该层。请输入一个名称。只应使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符。每个层都必须有它自己的唯一名称。 左和上（左侧和顶部）指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 宽和高指定层的宽度和高度。 层的移动与对齐：选择层。 选择“修改”>“对齐”，然后选择一个对齐选项。调整层大小：当处理页面布局时，可以对层进行选择、移动、大小调整和对齐。在对一个层进行移动、大小调整或对齐之前，必须先选择该层。 若要防止在对层进行移动和大小调整时使层相互重叠，请使用“防止重叠”选项层与网格对齐：设置网格显示

28、和对齐，拖动层然后释放即对齐改变层的顺序：用鼠标拖动上下位置层与表格：可以转变，菜单修改转变层到表格表格到层要防止层的重叠作业：利用层作一网页排版第八单元使用“时间轴”面板“时间轴”面板显示层和图像的属性在一段时间内如何更改。选择“窗口”>“其他”>“时间轴”可打开“时间轴”面板。 “时间轴”弹出式菜单指定当前在“时间轴”面板中显示文档的哪些时间轴。 播放栏显示当前在文档窗口中显示时间轴的哪一帧。 帧编号指示帧的序号。“后退”和“播放”按钮之间的数字是当前帧编号。您可以通过设置帧的总数和每秒帧数 (fps) 来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率，可用

29、于在通常的 Windows 和 Macintosh 系统上运行的大多数浏览器。 备注： 较快的速率可能不会提高性能。浏览器始终会播放动画的每一帧，即使它们无法达到指定的帧速率。如果帧速率超过浏览器可以支持的速率，则将被忽略。上下文菜单包含各种与时间轴相关的命令。 “行为”通道是应该在时间轴中特定帧处执行的行为的通道。 动画条显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。 关键帧是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver会计算关键帧之间帧的中间值。小圆标记表示关键帧。 “动画”通道显示用于整理层和图像动画的条。 重命

30、名时间轴1. 选择“修改”>“时间轴”>“重命名时间轴”。2. 在“重命名时间轴”对话框中输入新的名称。时间轴整理层动画，请执行以下操作： 1. 将层移至它在动画开始时应处于的位置。2. 选择“窗口”>“其他”>“时间轴”。 3. 选择您要整理动画的层。 4. 在层中单击会将一个闪烁的插入点放入层中，但不会选定该层。 5. 选择“修改”>“时间轴”>“在时间轴上添加对象”，或者简单地将选定层拖至“时间轴”面板中。6. 一个条将出现在时间轴的第一个通道中。层的名称将在该条中出现。 7. 单击位于条末端的关键帧标记。8. 在页面上将层移至它在动画结束时应处于的位

31、置。 9. 将出现一条线，它显示文档窗口中动画的轨迹。 10. 如果要让层沿曲线移动，请选择其动画条，然后按住 Ctrl 键并单击 (Windows) 或按住 Command 键并单击 (Macintosh) 动画条中部的一个帧，从而在您单击的帧处添加一个关键帧，或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧”。11. 重复此步骤，定义其他关键帧。 12. 按住“播放”按钮，预览页面上的动画。 · 显示和隐藏层，而不是更改多图像动画的源文件。由于新的图像必须进行下载，所以切换图像的源文件会降低动画的速度。如果所有图像都在动画运行前在隐藏层中同时下载，将不会出现明显的停顿，

32、并且不会缺少图像。· 扩展动画条以创建更顺畅的动作。如果动画断断续续并且图像在不同位置之间跳动，请拖动该层动画条的结束帧，使动作延伸到更多的帧。通过延长动画条，可以在运动的开始点和结束点之间创建更多的数据点，同时也会使对象更为缓慢地移动。请尝试增加每秒帧数 (fps) 以提高速度，但应注意在普通系统上运行的大多数浏览器都不能支持超过 15 fps 的动画速度。请在不同的系统上用不同的浏览器对动画进行测试，以找到最佳的设置。· 不要整理大型位图的动画。整理大型图像的动画会导致动画速度减慢。相反，应创建合成图像，并移动图像中较小的部分。例如，可以通过仅整理汽车轮胎的动画来显示汽

33、车的运动。· 创建简单的动画。不要创建对当前浏览器要求过高的动画。即使在系统或 Internet 性能降低时，浏览器始终会播放时间轴动画中的每一帧。多个时间轴： 1. 若要新建时间轴，请选择“修改”>“时间轴”>“添加时间轴”。2. 若要删除选定的时间轴，请选择“修改”>“时间轴”>“删除时间轴”。这将永久删除选定时间轴中的所有动画。3. 若要重命名选定时间轴，请选择“修改”>“时间轴”>“重命名时间轴”，或者在“时间轴”面板的“时间轴”弹出式菜单中输入新的名称。4. 若要在“时间轴”面板中查看另一个时间轴，请从“时间轴”面板的“时间轴”弹出式菜单

34、中选择一个新的时间轴。拖动轨迹来创建时间轴： 1. 选择一个层。2. 将该层移至它在动画开始时应处于的位置。确保您已选定该层；如果插入点位于该层中，则说明尚未选定该层。若要选择一个层，请单击层标记或层的选择柄，或者使用“层”面板。 3. 选择“修改”>“时间轴”>“记录层的轨迹”。4. 在页面上拖动层以创建轨迹。5. 当到达动画应停止的点时释放该层。Dreamweaver在时间轴上添加一个动画条，其中包含适当数量的关键帧。 6. 在“时间轴”面板中，单击“倒带”按钮；然后按住“播放”按钮预览动画。第9单元行为1、 教学目的：行为概述，自带的行为使用2、 教学重点：行为的使用3、 课

35、堂教学行为基础在网页整理中，几乎所有的特效都是通过编写脚本语言来实现的。通常应用较多的脚本语言有两种：VBScript和JavaScript。其中JavaScript因为其简单易用和众多的支持者而在网页整理者中最为广泛流行。在我们设计网页的时候，接受事件和响应事件的对象一般就是我们在前面章节中介绍的页面元素或浏览器本身。在HTML语言中，这些页面元素是用“Tag”（HTML标记）来表示的，下面列出了我们在这一章中可能用到的HTML标记：<body>定义文档正文；<a>定义链接；<img>定义图像；<form>定义表单；<table>定

36、义表格；<tr>定义表格的一行；<td>定义表格的单元格(表格的具体数据)；<frameset>定义框架集；<frame>定义框架；<div>定义块元素；<p>定义段落 ；<ol>定义有序列表；<ul>定义无序列表；<li>定义列表元素；我们这一章可能用到的常见的事件有：onMouseOver：鼠标指针移到目标上时；onMouseUp：按下鼠标再放开左键时；onMouseOut：鼠标指针从目标移开时；onMouseDown：按下鼠标左键时（不需要放开左键）；onClink：鼠标左键单击时

37、；onDblClick：鼠标左键双击时；onLoad：载入网页时；onUnload：离开页面时；onResize：当浏览者改变浏览窗口的大小时；onScroll：当浏览者拖动滚动条的时；行为面板依次单击菜单栏【Windows/Behaviors】(窗口/行为) ，或按快捷键Shift+F3，或单击“Show Behaviors”（显示行为面板）按钮，展开“Design/Behaviors”（设计/行为）面板（如图13-1）：图13-1“”（添加行为按钮）：单击该按钮添加行为（包括事件和动作），常见的动作如下：“Call JavaScript”（调用JavaScript）：单击该选项可以调用自己

38、整理的JavaScript脚本或第三方开发的JavaScript脚本；“Change Property”（改变属性）：改变页面元素的各项属性；“Check Browser”（检查浏览器）：同一个网页，在不同的浏览器上的显示可能大为不同；为了使我们的网页在各种不同的浏览器中都完美无缺，我们可以分别针对不同的浏览器将同一网页整理成几个不同页面，然后再调用Check Browser，根据访问者浏览器的不同自动进入相应的页面；“Check Plugin”（检查插件）：比如你的网页上有一个Flash动画，而访问者的浏览器没有Flash播放插件时，利用此功能你可以按你的解决方案对访问者进行提醒；“Cont

39、rol Shockwave or Flash”（控制Shockwave或Flash）：应用此功能我们可以在网页上做一些交互按钮，使用户可以控制动画的播放进程；“Drag Layer”（拖动层）：用来整理随鼠标移动而移动的网页特效；“Go to URL”（转到URL）：应用此项可以实现一些比较高级的跳转；比如：单击一个链接可以同时打开几个页面，打开一个页面后自动跳转到一个新的页面等；“Hide Pop-Up Menu”（隐藏弹出菜单）：应用此功能可以在整理下拉菜单时隐藏菜单；“Jump Menu”（跳转菜单）：应用此功能可以插入跳转导航菜单；前面已经讲述；“Jump Menu Go”（跳转菜单开

40、始）：应用此功能为跳转菜单增加一个“Go”按钮；“Open Browser Window”（打开浏览器窗口）：应用此功能可以打开浏览器窗口并设置新窗口的大小、工具条显示情况等属性；“Play Sound”（播放声音）：应用此功能可以为网页加入声音；“Popup Message”（弹出信息）：应用此功能可以弹出消息框来显示预先设定好的文本；“Preload Images”（预先载入图像）：应用此功能可以在页面载入时预先读入某些特效的图像，以避免事件发生时读取延迟和保持效果的连续性；“Set Nav Bar Image”（设置导航条图像）：应用此功能可以整理有翻滚特效的导航条；“Set Text”

41、（设置文字）：应用此功能可以在特定的地方显示文字，其中：“Set Text of Frame”（设置框架文字）：应用此功能可以在框架内显示信息；“Set Text of Layer”（设置层文字）：应用此功能可以在层内显示信息；“Set Text of Status Message”（设置状态栏文字）：应用此功能可在状态栏显示信息；“Set Text of Text Field”（设置文本域文字）：应用此功能可以在文本框显示信息；“Show Pop-Up Menu”（显示弹出菜单）：应用此功能可以在整理下拉菜单时显示菜单；“Show-Hide Layers”（显示-隐藏图层）：应用此功能可以显

42、示或隐藏图层；“Swap Image”（交换图像）：应用此功能不仅可以建立一对一的翻滚图，还可以建立一对多等更为复杂的替换特效；“Swap Image Restore”（恢复交换图像）：应用此功能可以将已经翻滚的图像还原；“Timeline”（时间轴）：应用此功能可以整理与时间轴有关的动画效果，其中：“Go to Timeline Frame”（转到时间轴帧）：跳转到指定帧；“Play Timeline”（播放时间轴）：播放动画；“Stop Timeline”（停止时间轴）：停止动画；“Validate Form”（检查表单）：应用此功能可验证用户提交的表单内容是否符合要求；“”（删除行为按钮

43、）：选择一个行为后，单击该按钮删除所选行为（包括事件和动作）；“/”：选择一个行为后，单击该按钮可以将所选行为上移或下移一行；“Events”（事件）：显示为对象设置的事件；“Actions”（动作）：显示与左侧事件对应的动作；行为操作在这一节中，我们将通过具体实例讲述几个我们在网页设计中应用较多的交互效果。改变对象属性在页面上插入一个图层，在图层中输入一段文本，名称采用默认的“Layer1”，“Tag”（标记）采用默认的“DIV”，并保持该图层被选中（如图13-2）：图13-2单击“Behaviors”（行为）面板上的“”按钮，在弹出对话框中选中“Change Properties”（改变属

44、性）（如图13-3），弹出“Change Properties”（改变属性）对话框（如图13-4）。图13-3图13-4“Type of Object”（对象类型）：在右侧的下拉选单中选择标记，如“DIV”（和“Properties”（属性）面板中一致）；“Named Object”（已命名的对象）：从右侧下拉选单中选中对象名称，如“Layer1”；“Property”（属性）：设置对象的属性，包括两个选项：“Select”（选择）：从下拉选单中选择需要更改的属性；从最右侧的下拉选单中选中兼容的浏览器类型；“Enter”（输入）：自己输入需要修改的属性；本例中我们选中“Select”，并选中“

45、style.backgroundColor”（背景颜色）；“New Value”（新值）：为所选的属性值设置新值，如“green”（绿色）；完成上述设置后，单击“OK”按钮保存并退出，这时我们可以发现“Behaviors”（行为）面板中已经出现了我们所设的行为（如图13-5）：图13-5Dreamweaver MX默认的事件为“onClick”（单击），单击“Events”（事件）列右侧的三角形按钮“”，在弹出菜单中选择“onMouseOver”（如图13-6，图13-7）：图13-6图13-7如果找不到所要地事件，可以选择最底部的“Show Events for”（显示事件），在子菜单中选择

46、较高版本的浏览器（如图13-8）：图13-8按快捷键F12浏览，可以看到预料的效果（如图13-9）：图13-913.3.2 检测浏览器为了使我们的网页在各种浏览器中的显示完美无缺，我们必须为同一网页整理几个适合相应类型浏览器的文件。在本例中，我们假设已经为某一页面整理了三个网页文件“ie.htm”、“netscape.htm”和“other.htm”，分别适用于IE、Netscape和其他类型的浏览器。由于使用IE的用户是大多数，我们将默认的页面设置为“ie.htm”，将检测浏览器的事件设置在“ie.htm”上。也就是说，默认的是“ie.htm”，然后在“ie.htm”加载时（“onLoad”

47、（加载）事件），激发检测浏览器的动作（若用户浏览器为IE，则保持原来的页面不变；若用户浏览器为Netscape，则跳转到“netscape.htm”；若用户使用的是其他浏览器，则跳转到“other.htm”）。打开网页文件“ie.htm”，在状态栏上单击选中HTML标记“<body>”（如图13-10），使之变为粗体（如图13-11）。图13-10图13-11在“Behaviors”（行为）面板中单击“”（添加行为）按钮，在弹出菜单中选中“Check Browser”（检测浏览器）（如图13-11），弹出“Check Browser”（检测浏览器）对话框（如图13-12）：“Che

48、ck Browser”（检测浏览器）对话是由一组条件语句组成的，根据判断的结果做出选择，在三个网页当中选其一。这个动作可以明确判断两种浏览器：Netscape 和IE，不是这两种浏览器一概做“Other Browsers”（其他浏览器）处理。判断每一种浏览器都会有三种选项：“Go to URL”（打开一个指定文件），“Go to Alt URL”（打开另一个指定文件），“Stay on this page”（停留在当前页面）。“URL”和“Alt URL”是定义“Go to URL”和“Go to Alt URL”所指向页面的。由于我们当前页面就是“ie.htm”，我们在这里将“URL”设为“

49、netscape.htm”，将“Alt URL”设为“other.htm”。然后只需要将“Netscape Navigator”设为“Go To URL（netscape.htm）”，将“Internet Explorer”设为“Stay on this Page（ie.htm）”，其他所有的都设为“Go To Alt URL（other.htm）”就可以了（如图13-12）。图13-12单击“OK”按钮保存并退出后，我们可以发现“Behaviors”（行为）面板中已经添加了我们刚才设置的行为：“Events”（事件）为“onLoad”（载入）；“Actions”（动作）为“Check Bro

50、wser”（检测浏览器）（如图13-13）：图13-13检测插件Flash动画不仅体积小、整理简便，而且具有交互功能。所以，如果在我们的网页上放上几个小Flash，将会使网页增色不少。但遗憾的是，运行Flash需要插件的支持，但并不是所有的用户的浏览器都安装了Flash插件。如果用户打开一个含有Flash的网页却显示不出来，那我们岂不是弄巧成拙！怎么解决这个问题呢？学过了上一节，读者也许有一点思路了。对了，我们可以为包含Flash的页面给出另外一个版本。当加载页面时（“onLoad”事件），执行检测Flash插件的动作：若用户安装了Flash插件，保持页面不变；否则跳转到另一个页面。在本例中，

51、我们假设有一个含有Flash的页面“flash.htm”，我们已经给它另做了一个内容相同不含Flash的文件“html.htm”。打开“flash.htm”，单击选中任务栏上的“<body>”标记，然后单击“Behaviors”（行为）面板上的“”（添加行为）按钮，在弹出对话框中选择“Check Plugin”（检测插件）（如图13-14），弹出“Check Plugin”（检测插件）对话框（如图13-15）。图13-14图13-15“Plugin”（插件）：设置需要检测的插件，其中：“Select”（选择）：在右侧的下拉菜单中选择所要检测的插件，如“Flash”；“Enter”（

52、输入）：直接输入第一项没有列出的插件，一般很少用；“If Found，Go To URL”（如果有，前往URL）：设置如果检测时发现了目标插件时所要打开的页面；“Otherwise，Go To URL”（否则，前往URL）：设置当检测时没有发现目标插件时所要打开的页面；“Always go to first URL if detection is not possible”（如果无法侦测，永远前往第一个URL）：选中此项表示如果不能进行插件检查就进入第一个页面；一般不选；完成上述设置后，单击“OK”按钮保存并退出。我们可以发现“Behaviors”（行为）面板中已经添加了我们刚才设置的行为：“

53、Events”（事件）为“onLoad”（载入）；“Actions”（动作）为“Check Plugin”（检测浏览器）（如图13-16）：图13-16拖动层如果我们想在网页上作一个像拼图游戏、拖出菜单这类可以随用户的鼠标指针移动的页面元素，我们就需要应用“Drag Layer”（拖动层）行为了。插入一个图层并将需要移动的元素放入其中，选中该层（此时状态栏的标记“<div#Layer1>”变成粗体），单击“Behaviors”（行为）面板中的“”按钮并从中选择“Drag Layer”（拖动层）命令（如图13-17），弹出“Drag Layer”（拖动层）对话框，默认为“Basic”

54、（基本）选项卡（如图13-18）。图13-17图13-18“Layer”（层）：从右侧下拉选单中选择需要被拖动的层；“Movement”（移动）：设置层可以拖动的范围，有两个选项：“Uncontrained”（不限制）：选中此项可以任意拖动层；“Constrained”（限制）：选中此项只能在所设范围内拖动层；在右侧的“Up”（上）、“Down”（下）、“Left”（左）和“Right”（右）文本域中设置相对于图层的起始位置的范围；“Drag Target”（放下目标）：在“Left”和“Top”文本域中设置放置目标的位置；或单击“Get Current Position”（取得目前位置）按钮

55、自动将当前图层的所在位置输入这两个文本域中。（放置目标指用户所拖动的层需放置的地方；当层的左上角坐标和我们设置的值相匹配时，即达到了放置目标，该值是相对于浏览器窗口的左上角而言）“Snap if Within”（靠齐距离）：在文本域中输入值，指定图层与放置目标的靠近距离（即当拖动图层与放置目标的距离小于该值时，自动将图层与放置目标对齐）；如果还要定义图层的拖拽范围，可以单击“Advanced”（高级）标签，弹出“Advanced”（高级）选项卡（如图13-19）：图13-19“Drag Handle”（拖拽控制点）：设置图层中用于拖动图层的区域，包括两个选项：“Entire Layer”（整个

56、层）；“Area Within Layer”（层内区域）：在“Left”和“Top”文本域中设置拖拽区域左上角点的坐标；在“Width”和“Height”文本框中输入拖动区域的宽度和高度值；“While Dragging”（拖拽时）：设置拖动时层的状态：“Bring Layer to Front”（将层移至最前）：选中此项表示在拖动层时将层移动到最顶层；“then”（然后）：设置放置层时层的叠放状态：“Leave on Top”（留在最上方）：选中此项表示将层保留在最顶端； “Restore Z-Index”（还原Z序列）：还原为原来的叠放顺序；“Call JavaScript”（呼叫JavaScript）：设置拖动层时调用的Java