《网页设计与制作应用教程》课件——CH7 行为和模板.pptxVIP

第3版HTML5DreamweaverPhotoshopCSS3AnimateAdobeCC网页设计与制作应用教程

网页设计与制作第7章行为和模版

本章重点应用“行为”面板应用模板应用库添加内置行为的方法

七、行为和模版7.1行为及其使用方法7.3jQuery特效7.2应用内置行为7.4应用模板7.5管理模板

网页设计通常不仅仅包含静态的文本和图像，还有很多交互式动态效果，这种效果可以通过Dreamweaver提供的又一强大功能来实现，即行为。模板是一种特殊类型的文档，它可以将具有相同版面布局的页面制作成一个模板，而后大量生成基于模板的网页。7.1行为及其使用方法行为是事件和由该事件触发的动作的组合。“事件”是触发动态效果的条件，是浏览器生成的消息，指示该页的访问者执行了某种操作。网页事件分为不同的种类：有的与鼠标相关，如鼠标放置在图像上、移出图像、单击图像等。“动作”是由预先编写的JavaScript代码组成的，这些代码最终产生动态效果。例如打开浏览器窗口、显示或隐藏层、播放声音等。“对象”、“事件”和“动作”三者关系为：对象在发生设定事件的情况下，产生相应动作。例如，对于交换图像这一行为，可以用三要素来解释：图像（对象）在鼠标放置其上时（事件），更换为另外一幅图片（动作）,一般的动作是：改变某一个对象（原来的对象或者新对象）的属性。7.1.1行为概述

7.1行为及其使用方法7.1.2“行为”面板行为面板包含以下选项：显示设置事件：仅显示附加到当前对象的那些事件。事件被分别划归到客户端或服务器端类别中。显示所有事件：按字母顺序显示属于特定类别的所有事件。添加动作(+)：显示特定菜单，其中包含可以附加到当前选定元素的动作。当从该列表中选择一个动作时，将出现一个对话框，在此对话框中指定该动作的参数。删除(–)：从行为列表中删除所选的事件和动作。向上箭头和向下箭头按钮：在行为列表中上下移动特定事件的选定动作。对于不能在列表中上下移动的动作，箭头按钮将处于禁用状态。事件：显示一个下拉菜单，其中包含可以触发该动作的所有事件，此菜单仅在选中某个事件时可见（当单击所选事件名称旁边的箭头按钮时显示此菜单）。根据所选对象的不同，显示的事件也有所不同。显示事件：指定当前行为在哪个浏览器中起作用（这是“事件”菜单的子菜单）。在此菜单中进行的选择将确定“事件”菜单中显示哪些事件。7.1.3行为的应用方法1.添加行为2.更改行为

7.2应用内置行为7.2.1交换图像7.2.2弹出信息7.2.3调用JavaScript7.2.4显示-隐藏元素7.2.5改变属性7.2.6转到URL7.2.7打开浏览器窗口7.2.8设置文本

7.3jQuery特效7.3.1概念DreamweaverCC中增加了一系列jQuery特效，使用炫酷的jQuery特效用于创建动画过渡或者可视方式修改页面，可以让页面元素产生更灵活丰富的动态效果。Dreamweaver与jQuery相结合，无需编写任何代码，即可加特效。在“行为”面板的“效果”子菜单中有一系列命令，如图7-24所示。特效实现的方法基本一致，可以举一反三。下面以“Blind”和“Bounce”两个实例进行介绍。

7.4应用模板7.4.1创建模板在DreamweaverCC中，有两种方法可以创建网页模板。一种是将现有的网页文件另存为模板，然后根据需要再进行修改；另一种是直接新建一个空白模板，在其中插入需要显示的文档内容。模板文件的扩展名是“.dwt”。模板的制作方法与普通网页一样，只是在制作完成后要定义可编辑区。模板可以通过直接定义来创建，也可以将普通网页另存为模板，前者在实际应用中更为普遍。在插入可编辑区域之前，将要插入该区域的文档另存为模板。7.4.2创建可编辑区域7.4.3模板区域的类型7.4.4创建基于模板的网页在Dreamweaver中，创建新网页时，可以直接由模板创建新网页。前面已经完成了创建模板文件，并在模板中定义了可编辑区域，下面完成针对可编辑区域的页面内容的制作。

7.5管理模板7.5.1在基于模板的文档中编辑内容7.5.2更新模板文件在Dreamweaver中可以首先创建模板，然后创建基于模板的网页。这些网页中部分区域是不能编辑的，称为锁定区。有些区域则是可编辑的，称为可编辑区。使用模板的最大好处就在于，当修改模板时，基于该模板创建的所有网页可以一次更新，这就大大提高了网页更新维护的效率。模板的高效性不仅在于创建网页时的批量处理，更体现在修改网页的时候。对模板进行修改之后，可以将模板的修改应用于所有基于该模板生成的网页中。

本章小结本章介绍了行为