任务三：子页面设计与交 互页面制作. 任务 3-1 ：模板和库文件的应用 用模板建立站点库文件的应用.

Presentation on theme: "任务三：子页面设计与交 互页面制作. 任务 3-1 ：模板和库文件的应用 用模板建立站点库文件的应用."— Presentation transcript:

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 align 设置滚动文字垂直对齐 bgcolor 设置滚动文字背景颜色 width 设置滚动文字的宽度（像素或者百分比） height 设置滚动文字的高宽度（像素或者百分比） loop 设置滚动文字的循环， -1/infinite 是无限 behavior 设置滚动文字滚动的方向， scroll 单向， side 到边界停 止， alternate 来回滚动的形式 hspace 水平方向空白的像素 vspace 垂直方向空白的像素 scrollamount 设置滚动文字移动的速度 scrolldelay 设置滚动文字移动时的延迟 表 3-8 加入动态效果的标签说明

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

19 loopdelay 设置每次播放间隔，毫秒为单位 star 设置开始播放的时间 controls 可以在播放窗口下设置播放控制栏 表 3-9 加入视频剪辑的标签说明

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

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

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

23 图 6-2 行为面板

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

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

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

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

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

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

30 这一行为的事件是 “ 当鼠标划过一个图 像 ” ，动作则是 “ 显示另一张图像 ” 。 “ 交换图 像 ” 动作是通过更改 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 ，以及数据提交到服务器的方 法。

51 （ 2 ）表单域 包含了文本框、密码框、隐藏域、多 行文本框、复选框、单选框、下拉选择框 和文件上传框等。

52 （ 3 ）表单按钮 包括提交按钮、复位按钮和一般按钮， 用于设置将数据传送到服务器上的 CGI 脚本 或者取消输入等行为。处理表单的内容要 用到网络编程，如 asp ， php ， cgi ， jsp 等。

53 一个通过电子邮件发送的表单 1 ．放入表单域 2 ．插入表格 3 ．插入表单内容 4 ．给表单域添加邮件地址 – 表单标签

54 创建表单 action 设置表单处理方式，通常是邮件或者是网 址 method 设置表单数据的传送是接收（ get ）还是送 出（ post ） 设置输入的形式 设置每个菜单项的内容 name 设置表单的名称 size 设置单行文本区的宽度 <input type=“submit” value =" 按钮 名称 " 创建一个提交按钮 <input type=“rest” value =" 按钮名称 " 创建一个重置按钮 创建一个使用图像的 submit （提交）按钮 表 3-7 表单标签说明