清华大学出版社 张晓蕾主编 主 讲：邓强 教学群：259723113 邮 箱：40577397@qq.com.

Presentation on theme: "清华大学出版社 张晓蕾主编 主 讲：邓强 教学群：259723113 邮 箱：40577397@qq.com."— Presentation transcript:

1 清华大学出版社 张晓蕾主编 主 讲：邓强 教学群： 邮

2 第9章 网页元素—模板与行为 掌握模板的相关概念 能够利用模板功能快速的创建多个页面 理解行为的基本概念 能够为网页添加简单的行为

3 9.1 模板 在网页制作中，如果在相同栏目中，页面大部分的内容都是相同的，只有一个区域是不同的，那么制作过程就需要做许多重复工作。此时就希望有一种方式能将这个页面的整体结构保存，只让其中的部分区域可以进行修改，这就是模板。 例如：对于商业站点，大多数文档上通常会出现相同的内容，如公司的徽标和公司的名称等。在编辑网页时，如果在每个文档中都重复添加这些内容，则显得既麻烦，又容易出错。如果将这些格式存储为模板，再通过该模板创建新文档，所生成的新文档中会自动出现这些共有内容，这样，在设计制作网页时，只需编辑文档中不同的内容就行了。

4 9.1 模板 模板的基本概念 模板 表模板是一种特殊类型的文档，主要用于设计“固定的”页面布局。在创建基于模版创建的文档后，创建的文档会继承模版的页面布局。 当需要制作某种带有共同格式和特征的文档时，可以首先设计一个模板文档，然后利用模板文档设计制作其他的网页。 模板总有两类区域：可编辑区域和锁定区域。用来设置站点中各页面的风格统一区域，避免因操作失误导致模板被修改。创建模板时，可编辑区域和锁定区域都可以更改，但在应用模板的文档中，只能修改可编辑区域，锁定区域无法修改。若要修改网页的风格可以只修改相应的模板文件，然后全面更新利用该模板创建的所有文档。

5 9.1 模板 模板是可以改变的，在使用模板创建文档后，可以对模版进行修改，更新使用使用模板创建的该文档，那些文档对应内容也会被更新。 创建模板 创建模板有两种方法：直接创建模板和将现有网页另存为模板。 模板的本质是文档，其扩展名为.dwt，一般存放在Templetes文件夹，该文件夹不是原来有的，是创建模板保存过程中自动生成的。

6 9.1 模板 （1）将现有网页另存为模板 打开现有的网页文档。 单击菜单栏“文件” “另存为模板”，将打开“另存为模板”对话框。
9.1 模板 （1）将现有网页另存为模板 打开现有的网页文档。 单击菜单栏“文件” “另存为模板”，将打开“另存为模板”对话框。 选择站点目录，输入模版名称。点击“保存”，当另存为模板的文档含有超链接时，将更新已有的链接。此时会询问你是否要更新链接，单击“是”即可。

7 9.1 模板 （1）创建空白模板 选择“文件/新建”菜单，打开“新建文档”对话框，然后单击“模板”选项卡，显示 “从模板新建”对话框。
9.1 模板 （1）创建空白模板 选择“文件/新建”菜单，打开“新建文档”对话框，然后单击“模板”选项卡，显示 “从模板新建”对话框。 使用Dreamweaver的资源面板也可以创建模板。单击“资源”面板底部的“新建模板”按钮，一个新的、无标题模板即空模板将被添加到“资源”面板的模板列表中。

8 9.1 模板 9.1.2 使用模板创建网页 （1）设置模板的可编辑区域
9.1 模板 使用模板创建网页 （1）设置模板的可编辑区域 模板创建后，根据要求需对模板内容进行编辑，即指定那些内容可编辑，那些不可编辑。 在模板中，可编辑的是变化的部分，不可编辑是保持不变的部分，在默认情况下，新建模板的所有区域都处于锁定区域，要使用模板，必须创建模板可编辑区域。 在编辑模板时，可以修改可编辑区域，也可以修改锁定区域，但当模板应用于文档时，只能修改文档的可编辑区域，文档锁定区域不能修改。

9 9.1 模板 ① 打开模板文件，然后将插入点放置在要标记为可编辑区域的位置。
9.1 模板 ① 打开模板文件，然后将插入点放置在要标记为可编辑区域的位置。 ② 选择“插入/模板对象/可编辑区域”或使用插入工具栏的模板按钮，显示 “新建可编辑区域”对话框。 ③ 在“名称”文本框中输入可编辑区域的名称， “确定”后即可创建可编辑区域。

10 9.1 模板 （2）取消对可编辑区域的标记 按照如下方法，取消对某个可编辑区域的标记： ①在文档或标签选择器中，选择想要更改的可编辑区域。
9.1 模板 （2）取消对可编辑区域的标记 按照如下方法，取消对某个可编辑区域的标记： ①在文档或标签选择器中，选择想要更改的可编辑区域。 ②选择“修改/模板/删除模板标记”菜单。 经过上述操作的可编辑区域，即被重新设置为锁定区域。 （3）创建基于模板的文档 ① 选择“文件/新建”菜单，打开“新建文档”对话框，然后单击“模板中的页”选项卡。 ②在“站点”列表中，选择包含要使用的模板的Dreamweaver站点，然后从右侧的列表中选择一个模板。

11 9.1 模板 ③ 单击“创建”按钮后，即可启动一个新的Dreamweaver文档窗口，并根据模板创建新的文档。
9.1 模板 ③ 单击“创建”按钮后，即可启动一个新的Dreamweaver文档窗口，并根据模板创建新的文档。 新建的页面右上角显示“模板”：应用模板名称。 在新建的文档中，鼠标移动到锁定区域，鼠标变为 不可编辑状态。

12 9.1 模板 （4）在现有文档上应用模板 在现有文档上应用模板的一般方法如下： 打开要应用模板的现有文档。
9.1 模板 （4）在现有文档上应用模板 在现有文档上应用模板的一般方法如下： 打开要应用模板的现有文档。 ⑴在模板面板上的模板列表中，选中要应用的模板。执行如下操作之一完成操作： ① 单击“应用”按钮； ② 打开面板菜单，选择“应用”命令； ③ 直接从模板面板上，将需要的模板拖动到文档窗口中。 （2）单击菜单“修改” “模板”  “应用模板到页”，此时将打开“选择模板”对话框，在其中选择要套用的模板，单击“选定”。 说明： 当对现有的文档应用模板时，文档和模板在区域上应有一定的对应关系，否则，模板在文档中将不能正常应用。

13 9.1 模板 9.1.3 模板的管理 （1）模板定位 ⑴在模板面板中的模板列表中，选择要查找的模板。
9.1 模板 模板的管理 （1）模板定位 ⑴在模板面板中的模板列表中，选择要查找的模板。 ⑵单击模板面板右上角的三角形按钮，打开面板菜单，选择“在站点定位”命令后，则自动切换到站点窗口中，同时打开相应的文件夹，并选中该模板对应的文件。 （2）模板删除 ⑴ 在模板面板的模板列表中，选中要删除的模板项。 ⑵ 单击面板右上角的三角形按钮，打开面板菜单，然后选择“删除”命令，或直接单击模板面板右下角的删除按钮。

14 9.1 模板 （2）模板重命名 ⑴ 在模板面板中的模板列表中，单击要重新命名的模板项名称，即可激活其文本编辑状态；也可以单击面板右上角的三角形按钮，打开面板菜单，然后选择“重命名”命令，同样会激活其文本编辑状态。 ⑵ 输入需要的新名称。 ⑶ 单击模板名称区域外任意位置，或是按下回车键，即可重新命名模板。 （3）从模板分离文档 若要更改基于模板的文档的锁定区域，必须将该文档从模板分离。将文档分离之后，整个文档都将变为可编辑的。从模板分离文档的一般操作如下： ⑴ 打开想要分离的基于模板的文档。 ⑵ 选择“修改/模板/从模板中分离”菜单。

15 9.1 模板 (4)更新基于模板的文档 ⑴ 如果模板应用到了文档，修改模板后会提示更新模板文件，然后更新页面。
9.1 模板 (4)更新基于模板的文档 ⑴ 如果模板应用到了文档，修改模板后会提示更新模板文件，然后更新页面。 ⑵打开文档附着的模板，按照需要进行修改，并保存。打开要更新的文档。使用“修改/模板/更新当前页”菜单。这时当前文档的风格就被更新了，也即重新应用了修改后的模板。 如果希望将整个站点中应用同一模板的文档进行批量更新,在文档窗口中，打开“修改/模板/更新页面”菜单。这时会出现 “更新页面”对话框，提示选择更新方式,在“查看”下拉列表框中，设置更新的范围。当选用“整个站点”选项时，则对整个站点中所有的文档进行更新。

16 9.1 模板

17 补充：了解层 什么是层？ 层提供一种对网页对象进行有效控制的手段，层可以包含文本、图像、表单等所有可直接用于文档的元素，层中还可以包含插件或其它层（嵌套使用）。 层提供了精确定位页面元素的方法，通过将页面元素放置在层中，用户可控制对象的叠放顺序、显示或隐藏，甚至可利用时间轴同时在屏幕上移动一个或多个层。 简单的说，层就是DIV，Dreamweaver CS5的层就是AP DIV，我们可以通过属性面板里的AP元素来控制层。

18 9.2 行为 Dreamweaver 行为将 JavaScript 代码放置在文档中，以允许访问者与 Web 页进行交互，从而以多种方式更改页面或引起某些任务的执行。 行为是事件和由该事件触发的动作的组合，是实现网页上交互的一种捷径。 行为由对象、事件和动作构成。如：当用户把鼠标移到对象上（称事件），这个对象会发生预定义的变化（称动作）。 把行为看做一个因果关系，其中事件是触发器，是产生动作的原因，而动作是最终产生的结果。

19 9.2 行为 行为的基本知识 1．事件 事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。事件的产生有两种：用户触发和系统触发。用户操作会触发事件并产生动作；有时候系统会定时触发事件而产生动作。例如单击鼠标，单击按钮，关闭窗口等。对于不同的对象，所对应的事件有所不同。 2．动作 动作是一段预先编写的JavaScript代码，是最终需要完成的动态效果。选定一个事件，再选择当该事件触发时发生的动作(例如，打开浏览器窗口、弹出窗口、交换图像等)，这样就形成了一个完整的行为。 注意 行为代码是客户端 JavaScript 代码；即它运行于浏览器中，而不是服务器上

20 9.2 行为 3.行为面板 在Dreamweaver CS5中，执行“窗口”→“行为”，或者按下〈Shift+F4〉组合键，即可打开行为面板。

21 9.2 行为 按钮 仅显示附加到当前文档的事件，每个事件都包含在下拉列表中。 按钮 在事件列表中按字母顺序显示所有事件内容。
9.2 行为 按钮 仅显示附加到当前文档的事件，每个事件都包含在下拉列表中。 按钮 在事件列表中按字母顺序显示所有事件内容。 按钮 单击该按钮会弹出“添加行为”菜单，如右图。其中包含可以附加在当前所选元 素上的可用动作列表(在行为面板的上方会 显示出当前所选元素的标签)。当从此列表 中选择某个动作时，会出现一个对话框，可以在其中指定该动作的参数。如果菜单上多有动 作都为灰色，表示选定元素无法生成事件。 按钮 选中一个现有行为，点击该按钮 可以把相应的行为删除 按钮 用来调整行为面板中已有行 为的顺序。

22 9.2 行为 4．添加与编辑行为 （1）选中网页中的一个对象，该对象可以是图像、文本或层。
9.2 行为 4．添加与编辑行为 （1）选中网页中的一个对象，该对象可以是图像、文本或层。 （2）选择“窗口”→“行为”命令，打开“行为”面板。 （3）单击“行为”面板上的按钮，屏幕显示行为菜单，根据需要选择其中一种动作，并在对话框中设置该动作的参数。 （4）在“事件”列表中显示当前动作的默认事件，单击该事件后，“行为”面板的当前事件中会出现一个下拉三角形按钮，单击该下拉三角形按钮，屏幕显示“事件”菜单。设计者可从该菜单中选择一种事件来代替默认事件。

23 9.2 行为 行为应用 1．应用打开浏览器窗口行为 使用该行为可以在一个新的窗口中打开页面，这个窗口的属性由设计者进行设置，如窗口大小、是否有状态栏以及窗口名称等。

24 9.2 行为 2、应用弹出信息行为 “弹出消息”行为用于弹出一个包含指定消息的JavaScript警告。因为JavaScript警告对话框只有一个“确定”按钮，所以使用这个行为只能提供用户信息，但不能为用户提供选择操作。

25 9.2 行为 3、应用交换图像行为 “交换图像”行为通过更改<img>标签的“src”属性将一个图像和另一个图像进行交换

26 9.2 行为 4、应用改变属性行为 “改变属性”行为可更改对象某个属性的值，例如改变div容器的背景颜色、表格的背景颜色或图像等。

27 9.2 行为 5、应用显示-隐藏元素行为 “显示-隐藏元素”行为可显示、隐藏、恢复一个或多个页面元素的可见性属性。