项目6 使用模板提高制作效率.

Presentation on theme: "项目6 使用模板提高制作效率."— Presentation transcript:

1 项目6 使用模板提高制作效率

2 任务1 使用模板制作网页 任务2 使用库制作相似的网页 项目6 使用模板提高 制作效率 ...... ...... ......

3 任务1 使用模板制作网页 任务分析 当前网站中的网页结构（如：布局格式、LOGO、导航等）是统一的。只是不同网页中右下方区域所显示的内容会有所不同。在编辑网页时，如果对于每个网页文件都重复来添加这些内容，既浪费时间，又容易出错。为此，我们可以将此网页中除右下方“公司介绍”的文本和图片之外的部分另存为一个模板文件，在新网页中应用其格式，不同的网页只要编辑各自文档中不同的内容即可，可以提高网页制作效率。

4 任务1 使用模板制作网页 一．什么是模板 模板是Dreamweaver中提供的一种特殊的页面文档，当需要制作某种带有共同格式和特征的文档时，可以首先设计一个模板文档，然后利用模板文档制作其它网页。 模板必须保存在站点中，所以在创建模板前应先要创建站点，否则创建模板时系统会提示创建站点。在Dreamweaver CS3中，模板的扩展名为.dwt，并存放在本地站点的Templates文件夹中,模板文件夹在保存模板时会在站点中自动创建。

5 任务1 使用模板制作网页 二．创建模板的方法 创建模板主要有两种方法： 可以将现有的HTML文档另存为模板并进行相应修改；
任务1 使用模板制作网页 二．创建模板的方法 创建模板主要有两种方法： 可以将现有的HTML文档另存为模板并进行相应修改； 也可以从空白网页开始，逐步设计页面布局，再保存为模板。

6 任务1 使用模板制作网页 三. 创建可编辑区域 1．先选中作为“可编辑区域”的对象，再使用以下 三种方法之一：
任务1 使用模板制作网页 三. 创建可编辑区域 1．先选中作为“可编辑区域”的对象，再使用以下 三种方法之一： 单击“插入记录”菜单→“模板对象”→“可编辑区域”； 在选中的区域内右击→选择“模板”→“可编辑区域”； 单击“常用”工具栏中的“模板”按钮 →选择“可编辑 区域”，如图所示。 1．先选中作为“可编辑区域”的对象，再使用以下 三种方法之一： 单击“插入记录”菜单→“模板对象”→“可编辑区域”； 在选中的区域内右击→选择“模板”→“可编辑区域”； 单击“常用”工具栏中的“模板”按钮 →选择“可编辑 区域”，如图所示。 可编辑区域控制基于模板的页面中哪些区域可以编辑。设置可编辑区域，需要在制作模板时完成。创建方法如下：

7 任务1 使用模板制作网页 三. 创建可编辑区域 2．在弹出的“新建可编辑区域”对话框中，输入该区域的
任务1 使用模板制作网页 三. 创建可编辑区域 2．在弹出的“新建可编辑区域”对话框中，输入该区域的 名称（如：Edit1）,单击“确定”按钮。如下图所示。同时 在模板文件中的当前区域左上角会一个“Edit1”标识提示。 可编辑区域控制基于模板的页面中哪些区域可以编辑。设置可编辑区域，需要在制作模板时完成。创建方法如下：

8 任务1 使用模板制作网页 三. 创建可编辑区域 注： 1．命名区域时，不要使用特殊字符，并且每个区域的名称是唯 一的，不可重复。
任务1 使用模板制作网页 三. 创建可编辑区域 注： 1．命名区域时，不要使用特殊字符，并且每个区域的名称是唯 一的，不可重复。 2．用表格布局的模板，定义可编辑区域时可将整个表格或表格的某个单元格定义为可编辑区域，但是不能同时将多个单元格定义为一个单独的可编辑区域。 3．取消可编辑区域标签：“修改”→“模板”→“删除模板标记”，取消标签则对应区域内容变成不可编辑区域。

9 任务1 使用模板制作网页 四．创建重复区域 1．先选中作为“重复区域”的对象，再使用以下 三种方法之一：
任务1 使用模板制作网页 四．创建重复区域 1．先选中作为“重复区域”的对象，再使用以下 三种方法之一： 单击“插入记录”菜单→“模板对象”→“重复区域”； 在选中的区域内右击→选择“模板”→“重复区域”； 单击“常用”工具栏中的“模板”按钮 →选择“重复 区域”，如图所示。 重复区域是指模板用户可以使用它在模板中复制任意次数的指定区域，重复区域不是可编辑区域。创建方法如下：

10 任务1 使用模板制作网页 四．创建重复区域 2．弹出“新建重复区域”对话框，如下图所示，输入 名称，单击“确定”。
任务1 使用模板制作网页 四．创建重复区域 2．弹出“新建重复区域”对话框，如下图所示，输入 名称，单击“确定”。 重复区域是指模板用户可以使用它在模板中复制任意次数的指定区域，重复区域不是可编辑区域。创建方法如下： 重复区域是指模板用户可以使用它在模板中复制任意次数的指定区域，重复区域不是可编辑区域。创建方法如下： 注：重复区域在基于模板的文档中是不可编辑的，除非其中包含可编辑区域。

11 任务1 使用模板制作网页 五．应用模板 在“资源”面板中使用模板创建新网页 方法一： 1．新建一个空白网页文件，单击“资源”面板中的“模板”
任务1 使用模板制作网页 五．应用模板 在“资源”面板中使用模板创建新网页 方法一： 1．新建一个空白网页文件，单击“资源”面板中的“模板” 按钮 ，如下方左图所示。 2．在模板列表中选择模板文件后右击，如下方右图所示。 选择 “应用”，则可将模板应用到这个新的网页文件。 应用模板的方式主要有两种：

12 任务1 使用模板制作网页 五．应用模板 在“资源”面板中使用模板创建新网页 方法二：
任务1 使用模板制作网页 五．应用模板 在“资源”面板中使用模板创建新网页 方法二： 1．单击“资源”面板中的“模板”按钮 。如下方左图所示。 2．在模板列表中选择模板文件后右击，如下方右图所示。 选择“从模板新建”，则自动建立基于此模板的新网页文件。 应用模板的方式主要有两种：

13 任务1 使用模板制作网页 五．应用模板 新建网页时使用模板 1．选择“文件”菜单→“新建”，弹出如图所示的“新建文档”
任务1 使用模板制作网页 五．应用模板 新建网页时使用模板 1．选择“文件”菜单→“新建”，弹出如图所示的“新建文档” 对话框，选择“模板中的页”，在“站点的模板”中选择相应 的模板（如“web_m”）。 应用模板的方式主要有两种：

14 任务1 使用模板制作网页 五．应用模板 新建网页时使用模板 2．选中“当模板改变时更新页面”复选框时，当模板被修改后，
任务1 使用模板制作网页 五．应用模板 新建网页时使用模板 2．选中“当模板改变时更新页面”复选框时，当模板被修改后， 用此模板创建的网页也会被自动修改。 应用模板的方式主要有两种： 3．单击“创建”按钮，新建一个基于此模板的新网页文件。 设计者可在网页的可编辑区域添加相关内容。

15 任务1 使用模板制作网页 六. 将模板从网页中分离
任务1 使用模板制作网页 六. 将模板从网页中分离 用模板设计网页时，模板有很多的不可编辑区域。为了能够修改基于模板页面中的不可编辑区域内容，必须将页面从模板中分离出来。当页面被分离后，它将成为一个普通的网页文件，不再具有不可编辑区域，也不再与任何模板相关联。当模板被更新时，当前被分离的网页文件也就不会被更新了。 方法： 单击“修改”菜单→“模板”→“从模板中分离”命令，即可将当前 网页文件同模板分离。此后就可以编辑网页中的所有区域了。

16 任务1 使用模板制作网页 七. 删除网站的的模板 方法如下： 1．在“资源”面板中单击“模板” 。
任务1 使用模板制作网页 七. 删除网站的的模板 方法如下： 1．在“资源”面板中单击“模板” 。 2．在“模板”列表中，选中要删除的模板项。

17 任务1 使用模板制作网页 七. 删除网站的的模板 方法如下： 3．单击“文件”面板右上角的三角形按钮 ，打开面板菜单，
任务1 使用模板制作网页 七. 删除网站的的模板 方法如下： 3．单击“文件”面板右上角的三角形按钮 ，打开面板菜单， 然后选择“删除”命令如下图所示；或直接单击模板面板右下角 的删除按钮；或右击，选择“删除”。

18 任务1 使用模板制作网页 ※ 任务实施 一．创建模板 2．双击打开本地站点中的网页“company.html”。删除其右
任务1 使用模板制作网页 ※ 任务实施 一．创建模板 1．运行Dreamweaver CS3，打开站点example。 2．双击打开本地站点中的网页“company.html”。删除其右 下方的公司介绍内容。

19 任务1 使用模板制作网页 ※ 任务实施 一．创建模板 3．单击“文件”菜单→“另存为模板”，弹出如下图所示的“另存为模板”对话框，选择
任务1 使用模板制作网页 ※ 任务实施 一．创建模板 3．单击“文件”菜单→“另存为模板”，弹出如下图所示的“另存为模板”对话框，选择 保存到的目标站点文件夹“mwmw”，在“另存为”文本框中输入名称“web_m”。 Dreamweaver CS3将自动在站点中创建的Templates文件夹，并将模板文件保存在此文件夹中。

20 任务1 使用模板制作网页 ※ 任务实施 一．创建模板 4．模板文件的结构如下图所示。 可编辑区域

21 任务1 使用模板制作网页 ※ 任务实施 二．创建可编辑区域 1．在“文件”面板的“资源”选项卡中，单击“模板”按钮 ，选中模板
任务1 使用模板制作网页 ※ 任务实施 二．创建可编辑区域 1．在“文件”面板的“资源”选项卡中，单击“模板”按钮 ，选中模板 文件web_m.dwt，双击打开。 2．在文档编辑区左下方的“标签选择器”中，选中想要插入可编辑区域 的对象。如下图所示的圆圈部分（即<table>标记）。

22 任务1 使用模板制作网页 ※ 任务实施 二．创建可编辑区域 3．选择“插入记录”菜单→“模板对象”→“可编辑区域”。
任务1 使用模板制作网页 ※ 任务实施 二．创建可编辑区域 3．选择“插入记录”菜单→“模板对象”→“可编辑区域”。 4．在弹出的“新建可编辑区域”对话框中，输入该区域的名称Edit1, 单击“确定”按钮。

23 任务1 使用模板制作网页 ※ 任务实施 三．制作“联系方式”网页 1．在“资源”面板的模板列表中选择模板文件web_m.dwt，右击，在
任务1 使用模板制作网页 ※ 任务实施 三．制作“联系方式”网页 1．在“资源”面板的模板列表中选择模板文件web_m.dwt，右击，在 快捷菜单中选择“从模板新建”，此时Dreamweaver窗口中自动建立 基于此模板的新网页文件Untitled-1。

24 任务1 使用模板制作网页 ※ 任务实施 三．制作“联系方式”网页 2．在网页的可编辑区域添加相关内容，如下图所示。

25 任务1 使用模板制作网页 ※ 任务实施 三．制作“联系方式”网页
任务1 使用模板制作网页 ※ 任务实施 三．制作“联系方式”网页 网页添加了一张图片（images/datang.jpg）和若干行文本。图片所应用的CSS样式（p01）如左下方表所示，文本所应用的CSS样式（block1）如下方右表所示。 样式名 值 类型-大小 12px 类型-行高 16px 区块-文字缩进 8px 方框-边界 上、下、右均为4px 样式名 值 类型-大小 12px 类型-行高 16px 区块-文字缩进 240px 方框-边界 上、下为4px；左、右为0px 图片应用的样式 文本应用的样式

26 任务1 使用模板制作网页 ※ 任务实施 三．制作“联系方式”网页 3．输入网页标题（联系方式—“每味美味”）。
任务1 使用模板制作网页 ※ 任务实施 三．制作“联系方式”网页 3．输入网页标题（联系方式—“每味美味”）。 4．以contact.html为文件名保存此文件到当前站点。

27 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 利用上述方法建立一个基于web_m.dwt模板的“行业动态”网页
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 利用上述方法建立一个基于web_m.dwt模板的“行业动态”网页 文件news.html。其中的文章列表如下图所示。 文章列表 翻页导航

28 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 文章列表的制作 1．先合并当前行的两个单元格。
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 1．先合并当前行的两个单元格。 文章列表的制作 2．再设置其“背景”为“images/line_t.gif”， 效果如下图所示。 3．再设置其行高为1。如果此时单元格的高度仍然 较高，则应切换到“拆分”视图，将当前单元格标记符 <td ……>和</td>之间的空格符“ ”等所 有字符删除即可。

29 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 翻页导航的制作 1．定位插入点在“下一页”和“尾页”两个字串的中间。

30 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 翻页导航的制作 2．选择“表单”工具栏中的“列表/菜单”按钮 ，打开
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 2．选择“表单”工具栏中的“列表/菜单”按钮 ，打开 “输入标签辅助功能属性”对话框。在ID中输入“page”， 如图所示。单击“确定”按钮。 翻页导航的制作

31 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 翻页导航的制作 3．显示“是否添加表单标签”对话框。单击“否”，即可。
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 3．显示“是否添加表单标签”对话框。单击“否”，即可。 如下图所示。 翻页导航的制作

32 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 翻页导航的制作 4．选中此下拉列表，在“属性”面板中单击按钮 ，
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 4．选中此下拉列表，在“属性”面板中单击按钮 ， 打开“列表值”对话框，设置其列表值，如下图所示。 翻页导航的制作

33 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 翻页导航的制作 5．在“属性”面板的“初始化时选定”框中单击“第1页”，
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 5．在“属性”面板的“初始化时选定”框中单击“第1页”， 如下图所示。这就是列表框的默认值。在网页运行时 最先显示的就是此值。 翻页导航的制作

34 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 设置CSS样式 文章列表使用的样式“list_n”，如下表所示 样式名 值
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 文章列表使用的样式“list_n”，如下表所示 设置CSS样式 样式名 值 类型-大小 12px 类型-行高 1.5倍 区块-文字缩进 30px 方框-填充 均为0 方框-边界 上为6px；下、左、右均为0 列表 图像为images/list_n.png

35 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 设置CSS样式 下拉列表使用的样式“opt”，如下表所示 样式名 值
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 下拉列表使用的样式“opt”，如下表所示 设置CSS样式 样式名 值 类型-颜色 #303030 背景-背景颜色 #FFFFFF 区块-空格 不换行 方框-填充 上、下、左、右均为0 边框-宽度 均为0

36 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 设置CSS样式 翻页导航使用的样式“pbutton” ，如下表所示 样式名
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 翻页导航使用的样式“pbutton” ，如下表所示 设置CSS样式 样式名 值 类型-行高 1.5倍 方框-填充 上、下为1px；左右为5px 类型-颜色 #303030 边框-样式 均为“实线： 背景-背景颜色 #CCCCCC 边框-宽度 均为1px 区块-空格 不换行 边框-颜色 均为#CCCCCC

37 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 设置文章超链接 的显示属性 3．逐行选中文章名称，为这些文章建设超链接
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 1．逐行设置文章名称行为“项目列表”列表方式。 设置文章超链接 的显示属性 2．逐行应用样式list_n。 3．逐行选中文章名称，为这些文章建设超链接 为“article/read1.html”。

38 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 1．选中一行文章名称，在“CSS样式”面板中单击
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 1．选中一行文章名称，在“CSS样式”面板中单击 “新建CSS样式”按钮 。 此时这些超链接的样式与网页中导航的超链接样式是一致的，浏览网页时显示效果不好。采用以下步骤可建立不同的超链接方式： 2．弹出“新建CSS规则”对话框。输入样式名称 “.list_n a”，如下图所示。

39 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 3．单击“确定”按钮后，设置样式的值。如下表所示。
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 3．单击“确定”按钮后，设置样式的值。如下表所示。 此时这些超链接的样式与网页中导航的超链接样式是一致的，浏览网页时显示效果不好。采用以下步骤可建立不同的超链接方式： 样式名 值 类型-字体 宋体 类型-大小 12px 类型-颜色 #000000。 类型-修饰 无（即无下划线）

40 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 4．同样的方法再建立一个CSS样式，样式名称为
任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 4．同样的方法再建立一个CSS样式，样式名称为 “.list_n a hover”。样式值如下表所示。 此时这些超链接的样式与网页中导航的超链接样式是一致的，浏览网页时显示效果不好。采用以下步骤可建立不同的超链接方式： 样式名 值 类型-字体 宋体 类型-大小 12px 类型-颜色 #339900 类型-修饰 无（即无下划线）

41 任务1 使用模板制作网页 ※ 任务实施 四．制作“行业动态”网页 5．浏览网页，并调试效果。

42 任务1 使用模板制作网页 ※ 任务实施 五．将模板应用到“公司介绍”网页 1．打开“公司介绍”网页（即company.html文件）。
任务1 使用模板制作网页 ※ 任务实施 五．将模板应用到“公司介绍”网页 1．打开“公司介绍”网页（即company.html文件）。 2．在“资源”面板的模板列表中选择模板文件web_m.dwt， 右击，在快捷菜单中选择“应用”，即可。 注： 如果是对现有的网页文件应用模板，则此文件和模板在各个区域上要有一致的对应关系，否则，模板在文件中将不能正常应用。

43 任务1 使用模板制作网页 ※ 任务实施 六．更新网页模板 1．打开模板文件web_m.dwt。
任务1 使用模板制作网页 ※ 任务实施 六．更新网页模板 由于模板文件中用于导航的超链接没有设置完整，导致应用模板后的company.html和contact.html两个网页文件的超链接也不完整。使用下述方法，完善这些超链接。 1．打开模板文件web_m.dwt。

44 任务1 使用模板制作网页 ※ 任务实施 六．更新网页模板 栏目 超链接 2．检查并设置导航菜单和“栏目导航”中的
任务1 使用模板制作网页 ※ 任务实施 六．更新网页模板 栏目 超链接 网站首页 home.html 公司介绍 company.html 行业动态 news.html 美食展示 product.html 餐厅环境 environment.html 在线预订 mark.html 加盟连锁 case.html 招聘信息 job.html 联系我们 contact.html 关于我们 联系方式 2．检查并设置导航菜单和“栏目导航”中的 各相关内容设置超链接如右表所示。

45 任务1 使用模板制作网页 ※ 任务实施 六．更新网页模板 3．保存模板。
任务1 使用模板制作网页 ※ 任务实施 六．更新网页模板 3．保存模板。 此时，Dreamweaver会询问是否更新所有附着到该模板的网页，选择“是”，将以上所设置的超链接内容更新到已经应用此模板的网页文件中。 返回

46 任务2 使用库制作相似的网页 任务分析 当前站点的网页中，菜单导航栏的下方都有一张展示酒店风貌的大图片。如下图所示。目前这张图片是静态的，始终只显示这一个画面，现在我们要用一个动态画面（Flash动画）来替换它。将这部分设置成库项目，以便对站点中所有使用到这部分内容的网页快速地进行成批更新，以提高工作效率。 将这部分设置成库项目

47 任务2 使用库制作相似的网页 一．库的概念 库是一种特殊的Dreamweaver文件，其中包含已创建的
任务2 使用库制作相似的网页 一．库的概念 库是一种特殊的Dreamweaver文件，其中包含已创建的 单独资源或资源拷贝的集合以便在网页中使用。库可以存储 各种各样的页面元素，如图像、表格、声音和 FLASH动画等。 网页中经常有内容是相同的局部区域，如果重复操作，工作 效率势必不高，库技术就可以对网页中局部内容进行快速设计 和管理。

48 任务2 使用库制作相似的网页 二．创建库项目 （一） 基于文档内容创建项目
任务2 使用库制作相似的网页 二．创建库项目 （一） 基于文档内容创建项目 可以将单独的文档对象创建为库项目，也可以将多个文档对象的组合创建为库项目。方法如下： 1．在文档窗口中，选择要保存为库项目的内容，再使用以下四种 方法之一： 将选中的内容拖动到“库”面板的库项目列表区中； 单击“库”面板中的“新建库项目”按钮 ； 单击“库”面板右上角的三角形按钮 ，打开菜单，选择“新建库项”命令； 单击“修改”菜单→“库”→“增加对象到库”。

49 任务2 使用库制作相似的网页 二．创建库项目 2．在名称框修改默认项目文件名称（如，命名库为pic_1），按Enter键
任务2 使用库制作相似的网页 二．创建库项目 2．在名称框修改默认项目文件名称（如，命名库为pic_1），按Enter键 完成项目的创建。库文件的扩展名为.lbi。

50 任务2 使用库制作相似的网页 二．创建库项目 （二）创建空白库项目
任务2 使用库制作相似的网页 二．创建库项目 （二）创建空白库项目 基于文档内容创建项目时需要在文档中选定内容，而创建空白库项目时则不能选定任何内容。空白库项目创建后，即可打开库项目文档的编辑窗口，对该库项目进行编辑。方法如下： 1．确保没在“文档编辑区”窗口中选择任何内容。如果选择了内容，则 该内容将被放入到新的库项目中。

51 任务2 使用库制作相似的网页 二．创建库项目 2．在“库”面板中单击“新建库项目”按钮 ，可在库项目列表中添加一个 新的库项目。
任务2 使用库制作相似的网页 二．创建库项目 2．在“库”面板中单击“新建库项目”按钮 ，可在库项目列表中添加一个 新的库项目。 3．在名称框中输入一个名称，然后按Enter键，即可。 这是一个空白的库项目，之后 可以对其添加内容。

52 任务2 使用库制作相似的网页 三．在文档中插入库项目 1．打开要使用库项目的网页，将插入点定位到要插入库项目的位置。
任务2 使用库制作相似的网页 三．在文档中插入库项目 1．打开要使用库项目的网页，将插入点定位到要插入库项目的位置。 2．从“库”面板中的库项目列表中选择要插入的库项目。 3．单击此面板左下方的的“插入”按钮，或将库项目直接拖放到文档窗口中。

53 任务2 使用库制作相似的网页 四．编辑更新库项目 1．在“文件”面板的“资源”选项卡的“库”中选择要编辑的库项目。
任务2 使用库制作相似的网页 四．编辑更新库项目 1．在“文件”面板的“资源”选项卡的“库”中选择要编辑的库项目。 2．单击面板底部的编辑按钮 或双击库项目打开库项目（如pic_1.lbi）。 3．此时，在文档窗口的标题栏上，会显示“<<库项目>>……”字样。 4．按照正常的文档编辑方法，对库项目内容进行编辑。

54 任务2 使用库制作相似的网页 四．编辑更新库项目 5．按Ctrl+S组合键保存库项目。此时将出现下图所示的“更新库项目”对话框。
任务2 使用库制作相似的网页 四．编辑更新库项目 5．按Ctrl+S组合键保存库项目。此时将出现下图所示的“更新库项目”对话框。 选择“更新”，即可更新本地站点中所有包含编辑过库项目的文档；选择“不更新”将 不更改任何文档。

55 任务2 使用库制作相似的网页 五．更新页面 （一）更新整个站点或所有使用特定库项目的文档
任务2 使用库制作相似的网页 五．更新页面 （一）更新整个站点或所有使用特定库项目的文档 1．单击“修改”菜单→“库”→“更新页面”菜单，打开“更新页面”对话框， 如下图所示。

56 任务2 使用库制作相似的网页 五．更新页面 注： 要确保对话框内“更新”选项中的“库项目”为选中状态，再单击“开始”按钮。
任务2 使用库制作相似的网页 五．更新页面 2．在“查看”下拉菜单中执行下列操作之一： 选择“整个站点”，然后选择站点名称。则更新所选站点中的所有页面。 选择“文件使用”，然后选择库项目名称。则更新当前站点中所有使用 所选库项目的页面。 注： 要确保对话框内“更新”选项中的“库项目”为选中状态，再单击“开始”按钮。

57 任务2 使用库制作相似的网页 五．更新页面 （二）更新当前文档 单击“修改”菜单→“库”→“更新当前页”，即可更改当前页中使用的所有库项目。

58 任务2 使用库制作相似的网页 六．分离文档中的库项目内容和库项目 1. 在网页中选中相应的库项目内容。
任务2 使用库制作相似的网页 六．分离文档中的库项目内容和库项目 1. 在网页中选中相应的库项目内容。 在文档窗口中插入的库项目内容是作为一个整体存在的，无法直接在文档中对其进行编辑。制作过程中并不希望所有时候它都作为一个库项目存在，而希望它作为普通的文档内容可以被单独编辑。因此可以按照如下方法，将之同库项目分离开来。 2. 单击“属性”面板中的“从源文件中分离”按钮， 弹出如图所示对话框后，单击“确定”按钮即可。

59 任务2 使用库制作相似的网页 七．重建库项目 Dreamweaver通过“重新创建”的方式，可以在文档中恢复意外丢失或删除了的库项目。
任务2 使用库制作相似的网页 七．重建库项目 Dreamweaver通过“重新创建”的方式，可以在文档中恢复意外丢失或删除了的库项目。 1．在相应文档中选择该项目的一个实例。 2．在“属性”面板中单击“重新创建”按钮。 如果库项目不存在，则会重建库项目。如果库项目存在，则会出现一个对话框，提示您是否要覆盖它。确定操作，即可将之覆盖。

60 任务2 使用库制作相似的网页 ※ 任务实施 一．创建库项目 1．打开当前站点（example）中的模板文件web_m.dwt。
任务2 使用库制作相似的网页 ※ 任务实施 一．创建库项目 1．打开当前站点（example）中的模板文件web_m.dwt。 2．选中如图所示的图片区域，单击“修改”菜单→“库”→ “增加对象到库”，创建成库项目。

61 任务2 使用库制作相似的网页 ※ 任务实施 一．创建库项目 此时屏幕可能会弹出如下图所示对话框，单击“确定”。
任务2 使用库制作相似的网页 ※ 任务实施 一．创建库项目 此时屏幕可能会弹出如下图所示对话框，单击“确定”。 注：选中区域时通常使用文档编辑区左下方的“标签选择器”，这样才能准确选取。 3．将库项目命名为pic_1。

62 任务2 使用库制作相似的网页 ※ 任务实施 二．修改库项目 1．在“文件”面板的“资源”选项卡中单击“库”按钮 ，选中库
任务2 使用库制作相似的网页 ※ 任务实施 二．修改库项目 1．在“文件”面板的“资源”选项卡中单击“库”按钮 ，选中库 对象pic_1，双击打开。 2．删除原有的图片。 3．单击“常用”工具栏中的“媒体：Flash”按钮 ，打开选择 文件对话框。 3．单击“常用”工具栏中的“媒体：Flash”按钮 ，打开选择 文件对话框。

63 任务2 使用库制作相似的网页 ※ 任务实施 二．修改库项目 4．在当前站中的swf文件夹中选择top.swf文件，单击“确定”。
任务2 使用库制作相似的网页 ※ 任务实施 二．修改库项目 4．在当前站中的swf文件夹中选择top.swf文件，单击“确定”。 如下图所示。

64 任务2 使用库制作相似的网页 ※ 任务实施 二．修改库项目 5．弹出如图所示“对象标签辅助功能属性”对话框。这个对话框
任务2 使用库制作相似的网页 ※ 任务实施 二．修改库项目 5．弹出如图所示“对象标签辅助功能属性”对话框。这个对话框 与插入图形时的标签辅助功能对话框相同。输入标题后，单击 “确定”，即将Flash动画插入到当前位置。

65 任务2 使用库制作相似的网页 ※ 任务实施 二．修改库项目 6．单击“属性”面板中的“播放”按钮 ，即可在编辑状态下播放Flash动画。
任务2 使用库制作相似的网页 ※ 任务实施 二．修改库项目 6．单击“属性”面板中的“播放”按钮 ，即可在编辑状态下播放Flash动画。 7．保存库项目top_1，弹出“更新库项目”对话框，如图所示。单击“更新”， 则保存当前库项目，并更新与之相联的模板文件和网页文件。 8．浏览当前网站，认真观察修改后的效果。

66 任务2 使用库制作相似的网页 ※ 任务实施 三．插入库项目 1．打开home.html文件。
任务2 使用库制作相似的网页 ※ 任务实施 三．插入库项目 由于首页文件home.html没有使用模板，所以在库项目修改后，此网页中的图片没有自动改成Flash动画。用以下方法插入库项目。 1．打开home.html文件。 2．通过“标签选择器”选中企业展示图片所在的表格 （<table>标记），按[Delete]键删除此表格。

67 任务2 使用库制作相似的网页 ※ 任务实施 三．插入库项目 3．保存此网页文件。由于插入的库项目中含有Flash动画，此网页事先并没有
任务2 使用库制作相似的网页 ※ 任务实施 三．插入库项目 3．保存此网页文件。由于插入的库项目中含有Flash动画，此网页事先并没有 添加播放Flash动画的支持文件，所以会弹出如图所示的提示对话框。单击 “确定”按钮即可。 4．保存并浏览网页，认真观察修改后的效果。 返回

68 Thank You !