网页设计三剑客基础练习典型案例第6章.ppt

1,第6章 行为、库和资源管理,行为丰富了网页的交互功能，它允许访问者通过与页面的交互来改变网页内容，或者让网页执行某个动作。Dreamweaver自带的行为种类多样、功能强大。而且这些行为都是开放的，精通脚本语言的用户，可以自已定义或者编写行为。目前，许多网站都提供了大量的行为，只要拿过来就可以使用。,2,本章学习目标：,创建行为 预定义行为 创建库元素 使用库项目更新网页 认识【资源】面板 【资源】面板中的收藏列表方式,3,6.1 行为概述,行为是Dreamweaver MX 2004的程序开发人预置的JaveScript程序库。以方便那些不具备编程基础和经验的网站制作人员为网页添加动态特效。每个行为包括一个动作和一个事件。任何一个动作都需要一个事件激活，两者相辅相成。动作是一段已编辑好的JavaScript代码，这些代码的特定事件被激发时执行。创建行为是许多要掌握的且富有挑战性的Dreamweaver MX 2004特性之一。,4,6.1.1 应用行为,单纯利用HTML只能制作静态网页，如果网页中有一些动态的效果，大多都是通过VBScript或JavaScript等语言来实现。无论是那一种语言，都是非常复杂让初学者望而却步的编程概念。 在Dreamweaver中引入了【行为】控制面板，通过该控制面板即使不具备编程基础和经验，也可以通过单击控制面板中相应的按钮为网页添加动态特效，增强和完善网页的动态功能。例如，使用【行为】控制面板可以在静态网页中创建交换图像、检查表单、背景音乐等。【行为】控制面板中的命令是通过一个全新的概念来实现网页的动态效果。虽然也是基于JavaScript语言来实现的效果，但是你将无须编写任何代码，只要轻松地单击非常直观的按钮即可。,5,6.1.2 创建行为,在创建行为之前我们先来认识一下【行为】控制面板，执行【窗口】【行为】命令，可以打开如图6-2所示的【行为】控制面板，其中各按钮的名称及功能见表6-2所示。,6,6.2 Dreamweaver预定义行为,Dreamweaver MX 2004默认安装有20多种预定义行为，适当地在网页种添加行为，可以起到事半功倍，锦上添花的效果。例如可以通过拖动层行为制作的网络拼图游戏，为网页插入背景音乐，制作具有弹出菜单功能的导航栏等等。用户还可以在Macromedia官方网站上下载Macromedia公司开发的行为插件，例如时间轴行为插件。,7,6.2.1 添加弹出信息,弹出信息动作用于弹出一个显示指定消息的JavaScript警告框。由于JavaScript警告框只有一个按钮，所以使用这个动作只是提供信息，而不允许用户选择。一般常用的弹出信息有两种：一种是打开网页就自动弹出信息对话框，例如，打开商业网站时弹出的广告或者公告信息，一种是通过单击对象弹出信息对话框。,8,6.2.2 打开浏览器窗口,通常在制作网页时链接的目标需要有另弹窗口的效果，而弹出来的默认窗口千篇一律，很难吸引浏览者。像去掉【标准按钮】、【地址栏】等这些工具栏的个性化窗口，对于初学者来说那些像天书似的代码足以使他们头昏脑胀了。不过不要放弃，在本例中可以不让你看见任何代码就能轻松实现这样的个性化窗口。,9,6.2.3 拖动层,使用Dreamweaver的【拖动层】动作，可以很容易地设计出网上流行的拼图游戏，以及页面上能够滑动的元素，访问者可以拖动该层到垂直或者水平等任意方向。该动作经常用来制作交互网页的界面，并且与JavaScript调用结合在一起来实现一定的功能，例如在网上购物的页面，会放置许多精美的商品，然后将喜欢的商品拖放到网页上的一个购物袋中。,10,6.3 创建与应用库,在Dreamweaver中【库】对于网页的设计和开发人员来说有着其他的意义。它可以被用户用来保持整个用户站点的一致性。如果用户想在每一个页面上都有一个导航条,其中包含着到站点中所有其他页面的链接。在绝大多数的情况下,用户需要修改该导航条。在传统的网页开发环境中,用户必须修改每一个单独的页面，这样错误的机率较高，用户很容易遗漏某个页面，或者把代码添加到错误的地方。而且整个过程的工作量是巨大的和十分重复的。Dreamweaver给用户提供了一个更好的方法，用户可以通过使用重复元素库,来轻松地完成页面上相关的更新工作。,11,6.3.1 创建库元素,任何标记内的对象，文本、表格、表单、图像、Java Applets、插件和ActiveX等控件都可以作为库元素。当创建了一个库元素后，Dreamweaver会在当前站点的根目录下创建一个库文件夹，以后生成的库元素都将放在该文件夹内。,12,6.3.2 查看并将库元素添加到页面,在图6-38所示的库中列出了当前站点上所有的库元素，每个使用了库元素的页面将以高亮方式显示这些元素，以表明这些地方是不可编辑的，就像使用了模板的文档中以高亮方式显示不可编辑区域一样。单击页面上的某个高度显示的库元素，可以在【代码】窗口中查看其源代码。,13,6.3.3 设置库元素的属性,通过库元素的属性检查器，可以查看页面上与某个库元素相关联的源文件，并进行编辑。双击页面上的某个库元素，或选中后选择【窗口】【属性】命令，打开属性检查器，如图6-40所示。,14,6.3.4 更新网页和使用库项目,如果在修改库项目时没有选择更新网页，可以按以下步骤更新使用了修改过的库项目的网页：首先选择【修改】【库】【更新页面】命令，在弹出的【