任务三：子页面设计与交互页面制作

1. 任务三：子页面设计与交互页面制作

2. 用模板建立站点 库文件的应用 任务3-1：模板和库文件的应用

3. 用模板建立站点 • 用已有模板创建页面 • Macromedia公司在Dreamweaver cs3版本对软件功能进行了重大调整，其中针对新手提供了网站模板功能。有了模板，即使你几乎没有什么网页的专业知识，也可以迅速地建立具有专业水准的页面布局，并快速设计制作出网页。

4. 自己制作模板 • 1．制作模板 • 制作模板和制作一个普通的页面大致相同，不同之处是只要制作出导航条、标题栏等各个页面的公有部分，而中间区域，则用页面的具体内容来填充。

5. 2．定义模板的可编辑区 • 为了避免编辑时不小心删除模板中的元素，应该将模板中的某些部分定义为不可编辑区，其他区域或者某段文本设置为可编辑区，由经该模板创建的文档自行去改变这个区域。

6. 使用模板的两种方法 • 修改和更新模板

7. 1．修改模板 • 2．更新整个站点模板 • 3．将文档从模板中分离

8. 应用库文件范例

9. 为了更好的理解和应用插件，现在试用插件制作几个网页上常用的效果。为了更好的理解和应用插件，现在试用插件制作几个网页上常用的效果。 • 1．响应鼠标事件的图片渐显渐隐的效果 • 这个效果所应用的插件是flash_image.mxp • 它的使用效果是当鼠标经过一个图像时，图片由模糊渐渐清晰。

10. 任务3-2：制作框架网页 • 框架（Frame）是用来创建使用相同布局的多个页面。

11. 框架和框架集的创建与保存 • 1．创建框架和框架集 • 2．保存框架页和框架集 • （1）保存框架页 • （2）保存框架集

12. 框架、框架集的属性 • 1．框架属性 • 2．框架集属性 • 3．修改框架

13. 制作一个框架页实例 • 1．新建和保存框架 • 2．制作框架页面

14. 框架标签 • 表列出了框架标签的说明。

15. 表 框架标签说明

16. 任务3-3:用 JavaScript 制作网页特效 • 表3-8列出了加入动态效果的标签说明。

17. 表3-8 加入动态效果的标签说明

18. 9．加入多媒体的标签 • （1）加入背景声音 • （2）加入视频剪辑 • 表3-9列出了加入视频剪辑的标签说明。

19. 表3-9 加入视频剪辑的标签说明

20. Dreamweaver cs3内置的行为面板 Dreamweaver cs3的主要内置行为 行为制作实例 任务3-4:用行为设计弹出式广告和浮动广告

21. Dreamweaver cs3内置的行为面板 • 为了打开Dreamweaver cs3内置的行为面板，应该发菜单命令“窗口”→“行为”，如图6-1所示。 • 打开的行为面板将显示在右边面板组中，如图6-2所示。

22. 图6-1 打开Dreamweaver cs3内置行为面板的命令

23. 图6-2 行为面板

24. 行为面板中标记为①的地方用于显示设置的事件，只显示附加到当前文档的事件。行为面板中标记为①的地方用于显示设置的事件，只显示附加到当前文档的事件。 • 行为面板中标记为②的地方用于显示所有事件，并且是按字母顺序显示所有事件。

25. 行为面板中标记为③的地方是添加行为（+）按钮，在其下拉列表中包含可以附加到当前所选元素的行为。当从该列表中选择一个行为时，会出现一个参数对话框。注意，显示灰色的项表明不可以设置这些行为事件。行为面板中标记为③的地方是添加行为（+）按钮，在其下拉列表中包含可以附加到当前所选元素的行为。当从该列表中选择一个行为时，会出现一个参数对话框。注意，显示灰色的项表明不可以设置这些行为事件。

26. 行为面板中标记为④的地方是删除行为（−）按钮，即是从下拉列表中删除所选的事件。行为面板中标记为④的地方是删除行为（−）按钮，即是从下拉列表中删除所选的事件。 • 行为面板中标记为⑤和⑥的增加、降低事件值按钮，其作用是将在行为列表中向上或向下移动光标，以便选择要更改的行为。

27. 注意，显示所有行为的多少，是根据所选择的浏览器版本而定的，如图6-3所示。注意，显示所有行为的多少，是根据所选择的浏览器版本而定的，如图6-3所示。

28. 图6-3 行为的多少受限于浏览器的版本

29. Dreamweaver MX cs3的主要内置行为 • 交换图像行为 • 当鼠标划过一个图像时显示另一张图像，这是在导航按钮里经常应用到的。也就是更换一个与原图像（高度和宽度）尺寸相同的另一张图像。

30. 这一行为的事件是“当鼠标划过一个图像”，动作则是“显示另一张图像”。“交换图像”动作是通过更改img标签的src属性，将一个图像和另一个图像进行交换。这一行为的事件是“当鼠标划过一个图像”，动作则是“显示另一张图像”。“交换图像”动作是通过更改img标签的src属性，将一个图像和另一个图像进行交换。

31. 弹出消息行为 • 弹出消息行为是当有关鼠标的事件被触发时，就显示一个指定的JavaScript提示消息文本框。这个信息提示框的外观取决于访问者的浏览器。 • 如果要对弹出窗口的外观进行更多的控制，可以考虑使用下一节介绍的“打开浏览器窗口”行为。

32. 打开浏览器窗口行为 • 此行为是指定一个元素，打开一个新的窗口。可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏）和名称等。 • 如果不指定该窗口的任何属性，在打开时它的大小和属性与打开它的窗口相同。

33. 拖动层行为 • 此行为允许浏览者拖动层。使用这个行为可以创建拼图游戏、滑块控件和其他可移动的页面元素。其中，可指定浏览者向哪个方向拖动层（水平、垂直或任意方向），浏览者应该将层拖动到目标区域，拖动层在一定的像素范围内，是否将层靠齐到目标等选项。

34. 播放声音行为 • 此行为给页面加入对声音剪辑的控制，例如在页面载入时播放声音或单击某个按钮时播放声音。 • 注：如果不应用插件来制作播放声音，浏览器会用客户端电脑系统所附带的音频播放器来播放声音。因此播放器会因为系统的不同而改变。

35. 改变属性行为 • 此行为可以更改对象某个属性值，例如层的背景色或表单的动作等。 • 注：可以更改的属性是由浏览器版本决定的。

36. 显示隐藏层行为 • 此行为将显示或隐藏一个或多个层的可见性。一般预先创建一个层，将层中的内容隐藏，当浏览者单击某个页面元素时，即显现被掩藏的层内容。

37. 显示弹出式菜单行为 • 这种行为是当鼠标移动到导航按钮时，会显示弹出菜单；当鼠标移出导航按钮时，弹出菜单自动消失。也就是一种由鼠标触发的导航按钮。 • 注：这种行为只有在浏览器中才能看到，工作区中是不显示的。

38. 检查插件行为 • 该行为主要是用来检查客户端电脑是否有播放插件。

39. 检查浏览器行为 • 检查浏览器主要是用来检查客户端电脑是否有需要的浏览器版本，如果有需要的版本则跳转到设置的URL页面，反之跳转到另一个URL页面，如图6-53所示。 • 注：这些都需要提供给客户端两个页面。

40. 图6-53 “检查浏览器”对话框

41. 设置文本行为 • 设置文本行为有三个选项：层文本、文本域文本、状态栏文本。 • 1．设置层文本行为 • 2．设置文本域文本 • 3．设置状态栏文本

42. 其他行为 • 1．调用JavaScript行为 • 此行为可以调入外部JavaScript，打开调用JavaScript属性对话框直接键入或者拷贝外部JavaScript就可以了。

43. 2．转到URL行为 • 此行为就是在属性面板中添加链接的含义，这里不再赘述。

44. 3．预先载入图像行为 • 这个行为是将一些需要通过行为或JavaScript换入的图像预先载入到浏览器缓存中，这样当图像应该出现时就不会因为下载而导致延迟。 • 例如交换图像中就预先载入鼠标经过时要显示的图像。

45. 行为制作实例

46. 任务3-5:表单、特殊对象 • 表单在网页中的作用主要是进行数据采集，比如可以采集访问者的名字、简历，浏览者的意见回馈、调查表、留言簿等。

47. 表单的插入与组成 • 1．插入表单 • 往页面上插入表单，可以有两种方法，一是发菜单命令“插入”→“表单”→“表单”，如图5-50所示；二是用鼠标单击表单快捷栏目组里的“表单域”按钮，如图5-51所示。

48. 图5-50 插入表单

49. 图5-51 表单快捷栏目组

50. 2．表单的组成 • 一个表单有三个基本组成部分： • （1）表单标签 • 这里面包含了处理表单数据所用CGI程序的URL，以及数据提交到服务器的方法。