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

任务三：子页面设计与交互页面制作 任务3-1：模板和库文件的应用 用模板建立站点 用已有模板创建页面 Macromedia公司在Dreamweaver cs3版本对软件功能进行了重大调整，其中针对新手提供了网站模板功能。有了模板，即使你几乎没有什么网页的专业知识，也可以迅速地建立具有专业水准的页面布局，并快速设计制作出网页。 自己制作模板 1．制作模板 制作模板和制作一个普通的页面大致相同，不同之处是只要制作出导航条、标题栏等各个页面的公有部分，而中间区域，则用页面的具体内容来填充。 2．定义模板的可编辑区 为了避免编辑时不小心删除模板中的元素，应该将模板中的某些部分定义为不可编辑区，其他区域或者某段文本设置为可编辑区，由经该模板创建的文档自行去改变这个区域。 使用模板的两种方法 修改和更新模板 1．修改模板 2．更新整个站点模板 3．将文档从模板中分离 应用库文件范例 为了更好的理解和应用插件，现在试用插件制作几个网页上常用的效果。 1．响应鼠标事件的图片渐显渐隐的效果 这个效果所应用的插件是flash_image.mxp 它的使用效果是当鼠标经过一个图像时，图片由模糊渐渐清晰。 任务3-2：制作框架网页 框架（Frame）是用来创建使用相同布局的多个页面。 框架和框架集的创建与保存 1．创建框架和框架集 2．保存框架页和框架集 （1）保存框架页 （2）保存框架集 框架、框架集的属性 1．框架属性 2．框架集属性 3．修改框架 制作一个框架页实例 1．新建和保存框架 2．制作框架页面 框架标签 表列出了框架标签的说明。 任务3-3: 用 JavaScript 制作网页特效 表3-8列出了加入动态效果的标签说明。 9．加入多媒体的标签 （1）加入背景声音 （2）加入视频剪辑 表3-9列出了加入视频剪辑的标签说明。 任务3-4: 用行为设计弹出式广告和浮动广告 Dreamweaver cs3内置的行为面板 为了打开Dreamweaver cs3内置的行为面板，应该发菜单命令“窗口”→“行为”，如图6-1所示。 打开的行为面板将显示在右边面板组中，如图6-2所示。 行为面板中标记为①的地方用于显示设置的事件，只显示附加到当前文档的事件。 行为面板中标记为②的地方用于显示所有事件，并且是按字母顺序显示所有事件。 行为面板中标记为③的地方是添加行为（+）按钮，在其下拉列表中包含可以附加到当前所选元素的行为。当从该列表中选择一个行为时，会出现一个参数对话框。注意，显示灰色的项表明不可以设置这些行为事件。 行为面板中标记为④的地方是删除行为（?）按钮，即是从下拉列表中删除所选的事件。 行为面板中标记为⑤和⑥的增加、降低事件值按钮，其作用是将在行为列表中向上或向下移动光标，以便选择要更改的行为。 注意，显示所有行为的多少，是根据所选择的浏览器版本而定的，如图6-3所示。 Dreamweaver MX cs3的主要内置行为 交换图像行为 当鼠标划过一个图像时显示另一张图像，这是在导航按钮里经常应用到的。也就是更换一个与原图像（高度和宽度）尺寸相同的另一张图像。 这一行为的事件是“当鼠标划过一个图像”，动作则是“显示另一张图像”。“交换图像”动作是通过更改img标签的src属性，将一个图像和另一个图像进行交换。 弹出消息行为 弹出消息行为是当有关鼠标的事件被触发时，就显示一个指定的JavaScript提示消息文本框。这个信息提示框的外观取决于访问者的浏览器。 如果要对弹出窗口的外观进行更多的控制，可以考虑使用下一节介绍的“打开浏览器窗口”行为。 打开浏览器窗口行为 此行为是指定一个元素，打开一个新的窗口。可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏）和名称等。 如果不指定该窗口的任何属性，在打开时它的大小和属性与打开它的窗口相同。 拖动层行为 此行为允许浏览者拖动层。使用这个行为可以创建拼图游戏、滑块控件和其他可移动的页面元素。其中，可指定浏览者向哪个方向拖动层（水平、垂直或任意方向），浏览者应该将层拖动到目标区域，拖动层在一定的像素范围内，是否将层靠齐到目标等选项。 播放声音行为 此行为给页面加入对声音剪辑的控制，例如在页面载入时播放声音或单击某个按钮时播放声音。 注：如果不应用插件来制作播放声音，浏览器会用客户端电脑系统所附带的音频播放器来播放声音。