任务三子页面设计与交互页面制作.ppt
《任务三子页面设计与交互页面制作.ppt》由会员分享,可在线阅读,更多相关《任务三子页面设计与交互页面制作.ppt(54页珍藏版)》请在三一文库上搜索。
1、任务三:子页面设计与交互页面制作,任务3-1:模板和库文件的应用,用模板建立站点,用已有模板创建页面 Macromedia公司在Dreamweaver cs3版本对软件功能进行了重大调整,其中针对新手提供了网站模板功能。有了模板,即使你几乎没有什么网页的专业知识,也可以迅速地建立具有专业水准的页面布局,并快速设计制作出网页。,自己制作模板,1制作模板 制作模板和制作一个普通的页面大致相同,不同之处是只要制作出导航条、标题栏等各个页面的公有部分,而中间区域,则用页面的具体内容来填充。,2定义模板的可编辑区,为了避免编辑时不小心删除模板中的元素,应该将模板中的某些部分定义为不可编辑区,其他区域或者
2、某段文本设置为可编辑区,由经该模板创建的文档自行去改变这个区域。,使用模板的两种方法 修改和更新模板,1修改模板 2更新整个站点模板 3将文档从模板中分离,应用库文件范例,为了更好的理解和应用插件,现在试用插件制作几个网页上常用的效果。 1响应鼠标事件的图片渐显渐隐的效果 这个效果所应用的插件是flash_image.mxp 它的使用效果是当鼠标经过一个图像时,图片由模糊渐渐清晰。,任务3-2:制作框架网页,框架(Frame)是用来创建使用相同布局的多个页面。,框架和框架集的创建与保存,1创建框架和框架集 2保存框架页和框架集 (1)保存框架页 (2)保存框架集,框架、框架集的属性,1框架属性
3、 2框架集属性 3修改框架,制作一个框架页实例,1新建和保存框架 2制作框架页面,框架标签,表列出了框架标签的说明。,表 框架标签说明,任务3-3: 用 JavaScript 制作网页特效,表3-8列出了加入动态效果的标签说明。,表3-8 加入动态效果的标签说明,9加入多媒体的标签,(1)加入背景声音 (2)加入视频剪辑 表3-9列出了加入视频剪辑的标签说明。,表3-9 加入视频剪辑的标签说明,任务3-4: 用行为设计弹出式广告和浮动广告,Dreamweaver cs3内置的行为面板,为了打开Dreamweaver cs3内置的行为面板,应该发菜单命令“窗口”“行为”,如图6-1所示。 打开的
4、行为面板将显示在右边面板组中,如图6-2所示。,图6-1 打开Dreamweaver cs3内置行为面板的命令,图6-2 行为面板,行为面板中标记为的地方用于显示设置的事件,只显示附加到当前文档的事件。 行为面板中标记为的地方用于显示所有事件,并且是按字母顺序显示所有事件。,行为面板中标记为的地方是添加行为(+)按钮,在其下拉列表中包含可以附加到当前所选元素的行为。当从该列表中选择一个行为时,会出现一个参数对话框。注意,显示灰色的项表明不可以设置这些行为事件。,行为面板中标记为的地方是删除行为()按钮,即是从下拉列表中删除所选的事件。 行为面板中标记为和的增加、降低事件值按钮,其作用是将在行为
5、列表中向上或向下移动光标,以便选择要更改的行为。,注意,显示所有行为的多少,是根据所选择的浏览器版本而定的,如图6-3所示。,图6-3 行为的多少受限于浏览器的版本,Dreamweaver MX cs3的主要内置行为,交换图像行为 当鼠标划过一个图像时显示另一张图像,这是在导航按钮里经常应用到的。也就是更换一个与原图像(高度和宽度)尺寸相同的另一张图像。,这一行为的事件是“当鼠标划过一个图像”,动作则是“显示另一张图像”。“交换图像”动作是通过更改img标签的src属性,将一个图像和另一个图像进行交换。,弹出消息行为,弹出消息行为是当有关鼠标的事件被触发时,就显示一个指定的JavaScript
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 任务 页面 设计 交互 制作
链接地址:https://www.31doc.com/p-3229504.html