05-网页设计(插多媒体元素和模板、库及资源管理)

1、1 网 页 设 计 (第5讲）2学习目标学习目标插入多媒体元素模板、库和资源管理3重点：如何使用重点：如何使用FlashFlash动画、动画、FlashFlash按钮、按钮、FlashFlash元素和元素和AppletApplet小小程序丰富网页。程序丰富网页。 41.1 1.1 网页的动感效果设计网页的动感效果设计1.2 1.2 插入插入FlashFlash对象对象1.3 1.3 插入其它多媒体元素插入其它多媒体元素1.4 1.4 插入第三方插件插入第三方插件1.5 1.5 实战演练实战演练51.1 1.1 网页的动感效果设计网页的动感效果设计 1.1.1 1.1.1 案例综述案例综述本章案

2、例主本章案例主要是通过在要是通过在网页中插入网页中插入FlashFlash动画和动画和AppletApplet插件插件等多媒体元等多媒体元素来美化网素来美化网页，使网页页，使网页看上去更加看上去更加生动。生动。 61.1 1.1 网页的动感效果设计网页的动感效果设计 1.1.2 1.1.2 案例分析案例分析本页面的制作分五个步骤进行：本页面的制作分五个步骤进行：n页面基本制作页面基本制作n BannerBanner条的制作条的制作n导航条的制作导航条的制作n正文区的制作；正文区的制作；n扩展功能。扩展功能。71.1 1.1 网页的动感效果设计网页的动感效果设计 1.1.3 1.1.3 实现步骤

3、实现步骤n页面基本制作页面基本制作n创建站点创建站点创建主页文件创建主页文件设置设置标题标题n BannerBanner条的制作条的制作（透明背景的（透明背景的Flash)Flash)设置图片背景设置图片背景插入插入FlashFlash设置背设置背景透明参数景透明参数n导航条的制作导航条的制作插入插入FlashFlash按钮按钮81.1 1.1 网页的动感效果设计网页的动感效果设计 1.1.3 1.1.3 实现步骤实现步骤n正文区的制作正文区的制作用用CSSCSS样式格式化页面样式格式化页面插入插入FlashFlash文本文本插入图像查看器插入图像查看器插入插入Java Java Applet

4、Applet小程序小程序插入背景音乐插入背景音乐 n扩展功能扩展功能扩展命令扩展命令 扩展对象扩展对象 扩展行为扩展行为 91.2 1.2 插入插入FlashFlash对象对象FlashFlash动画的优点：文件小，网上传输快。动画的优点：文件小，网上传输快。在在Dreamweaver 8Dreamweaver 8中可以插入多种中可以插入多种FlashFlash对象对象包括：包括：FlashFlash动画、动画、FlashFlash按钮、按钮、FlashFlash文本、文本、FlashFlash视频、视频、FlashFlash元素（图像查看器）、元素（图像查看器）、FlashFlash文档等。

5、文档等。101.2 1.2 插入插入FlashFlash对象对象1.2.1 1.2.1 插入插入FlashFlash动画动画 插入插入FlashFlash动画的操作步骤：动画的操作步骤：n将插入点置于要插入将插入点置于要插入FlashFlash影片的位置。影片的位置。n选择【插入】选择【插入】| |【媒体】【媒体】| |【FlashFlash】命令，或命令，或【常用【常用/ /媒体】插入栏中媒体】插入栏中FlashFlash按钮。按钮。n在弹出的对话框中选择一个在弹出的对话框中选择一个swfswf文件。文件。n插入的插入的FlashFlash动画显示为一个灰色的方框，里面动画显示为一个灰色的方

6、框，里面有有FlashFlash标志。标志。1.1.单击【属性】面板上的【播放】按钮，可预览单击【属性】面板上的【播放】按钮，可预览动画。动画。111.2 1.2 插入插入FlashFlash对象对象1.2.1 1.2.1 插入插入FlashFlash动画动画设置设置FlashFlash影片属性：影片属性：n【FlashFlash】: :影片的名称。影片的名称。n【宽】【宽】和和【高】【高】：以像素为单位指定影片的宽：以像素为单位指定影片的宽度和高度。度和高度。n【文件】【文件】：指定指向：指定指向FlashFlash或或ShockwaveShockwave文件的文件的路径。路径。n【源文件】

7、【源文件】指定指向指定指向FlashFlash源文档源文档( (fla)fla)的路径。的路径。n【编辑】【编辑】可以启动可以启动Macromedia Flash MX 2004Macromedia Flash MX 2004以更新以更新flafla文件。文件。n【重设大小】【重设大小】将选定影片返回到其初始大小。将选定影片返回到其初始大小。1.1.【循环】【循环】选中则连续播放。选中则连续播放。121.2 1.2 插入插入FlashFlash对象对象1.2.1 1.2.1 插入插入FlashFlash动画动画设置设置FlashFlash影片属性：影片属性：n【自动播放】选中则在加载页面时自动

8、播放。【自动播放】选中则在加载页面时自动播放。n【垂直边距】和【水平边距】指定空白的像素值。【垂直边距】和【水平边距】指定空白的像素值。n【品质】控制抗失真度。【品质】控制抗失真度。n【比例】确定影片如何适合在【宽】和【高】文本框中设【比例】确定影片如何适合在【宽】和【高】文本框中设置的尺寸。置的尺寸。n【对齐】确定影片在页面上的对齐方式。【对齐】确定影片在页面上的对齐方式。n【背景颜色】指定影片区域的背景颜色。【背景颜色】指定影片区域的背景颜色。8.8.【参数】打开一个对话框，可在其中输入传递给影片的附【参数】打开一个对话框，可在其中输入传递给影片的附加参数加参数131.2 1.2 插入插入

9、FlashFlash对象对象1.2.2 1.2.2 插入插入FlashFlash按钮按钮 n操作步骤如下操作步骤如下 ：n将光标放到要插入将光标放到要插入FlashFlash按钮对象的位按钮对象的位置。置。n 选择【插入】选择【插入】| |【媒体】【媒体】| |【FlashFlash按按钮】命令，或单击钮】命令，或单击【插入】面板上【常【插入】面板上【常用】用】| |【媒体】【媒体】| |【FlashFlash按钮】，打按钮】，打开【插入开【插入FlashFlash按钮】按钮】对话框对话框. .n设置完成后单击设置完成后单击“确定确定”按钮。按钮。141.2 1.2 插入插入FlashFlas

10、h对象对象1.2.3 1.2.3 插入插入FlashFlash文本文本 操作步骤如下操作步骤如下 ：n将光标放到要插入将光标放到要插入Flash文本对象的文本对象的位置位置 。n选择【插入】选择【插入】| |【媒体】【媒体】| |【FlashFlash文本】命令，或单文本】命令，或单击【插入】栏上击【插入】栏上【常用】【常用】| |【媒体】【媒体】| |【FlashFlash文本】，文本】，打开【插入打开【插入FlashFlash文本】对话框文本】对话框 . .1.1.设置完成后单击设置完成后单击“确定确定”按钮。按钮。151.2 1.2 插入插入FlashFlash对象对象1.2.4 1.2

11、.4 插入图像查看器插入图像查看器 操作步骤如下操作步骤如下 ：n将光标放到要插入将光标放到要插入Flash元素的位置元素的位置 。n选择【插入】选择【插入】| |【媒体】【媒体】| |【图像查看器】命令，打开【图像查看器】命令，打开【保存【保存FlashFlash元素】对话框。元素】对话框。1.1.设置完成后单击设置完成后单击“确定确定”按钮。按钮。161.2 1.2 插入插入FlashFlash对象对象1.2.51.2.5插入插入FlashFlash视频视频 操作步骤如下操作步骤如下 ：n选择【插入】【媒体】【选择【插入】【媒体】【Flash 视频】命令，或单视频】命令，或单击【插入】栏的

12、【常用】类别中的【媒体】下拉框，选击【插入】栏的【常用】类别中的【媒体】下拉框，选择【择【Flash Video】。】。 1.1.设置完成后单击设置完成后单击“确定确定”按钮。按钮。171.2 1.2 插入插入FlashFlash对象对象1.2.61.2.6插入插入 FlashPaper FlashPaper 文档文档 操作步骤如下操作步骤如下 ：n将插入点放在页面上想要显示将插入点放在页面上想要显示 FlashPaper FlashPaper 文文档的位置，然后选择【插入】【媒体】档的位置，然后选择【插入】【媒体】【FlashPaperFlashPaper】命令，或单击【插入】栏的命令，或单

13、击【插入】栏的【常用】类别中的【媒体】下拉框，选择【常用】类别中的【媒体】下拉框，选择【FlashPagerFlashPager】。】。 n在【插入在【插入 FlashPaperFlashPaper】对话框中，浏览到一对话框中，浏览到一个个 FlashPaper FlashPaper 文档并将其选定。文档并将其选定。1.1.设置完成后单击设置完成后单击“确定确定”按钮。按钮。181.31.3插入其它多媒体元素插入其它多媒体元素 1.3.11.3.1插入插入Java AppletJava Applet小程序小程序 操作步骤如下操作步骤如下 ：n将光标放到要插入将光标放到要插入AppletAppl

14、et小程序的位置。小程序的位置。n选择【插入】选择【插入】| |【媒体】【媒体】| |【AppletApplet】命令，或命令，或者单击【插入】面板上【常规】者单击【插入】面板上【常规】| |【媒体】【媒体】| |【AppletsApplets】按钮，打开【选择文件】对话框，按钮，打开【选择文件】对话框，从对话框中选择扩展名为从对话框中选择扩展名为. .classclass的文件。的文件。n选中插入到页面中的选中插入到页面中的AppletApplet图标，打开属性面图标，打开属性面板，设置其属性。板，设置其属性。 191.31.3插入其它多媒体元素插入其它多媒体元素 1.3.21.3.2插入插

15、入ActiveXActiveX控件控件 操作步骤如下操作步骤如下 ：n将光标放到要插入将光标放到要插入ActiveXActiveX对象的位置。对象的位置。n选择【插入】选择【插入】| |【媒体】【媒体】| |【ActiveXActiveX】命令或命令或者单击【插入】面板上【常规】者单击【插入】面板上【常规】| |【媒体】【媒体】| |【ActiveXActiveX】按钮，即可在文档中插入按钮，即可在文档中插入ActiveXActiveX对象。对象。 n选中选中ActiveXActiveX对象图标，打开它的属性面板，对象图标，打开它的属性面板，设置其属性。设置其属性。 201.31.3插入其它多

16、媒体元素插入其它多媒体元素 1.3.31.3.3插入插入 Shockwave Shockwave 影片影片操作步骤如下操作步骤如下 ：n将插入点置于要插入将插入点置于要插入Shockwave 影片的位置。影片的位置。n选择【插入】选择【插入】|【媒体】【媒体】|【 Shockwave 】命令，或【常用命令，或【常用/媒体】插入栏中媒体】插入栏中Shockwave图标。图标。n插入的插入的Flash动画显示为一个灰色的方框，里动画显示为一个灰色的方框，里面有面有Shockwave标志。标志。n选中此影片标记，在属性面板中设置其相关属选中此影片标记，在属性面板中设置其相关属性。性。 211.41.

17、4插入第三方插件插入第三方插件1.4.1 1.4.1 安装扩展插件安装扩展插件 利用插件可以增强利用插件可以增强Dreamweaver 8Dreamweaver 8的功能。在网站的功能。在网站可以下载第三方插件，大部分是免费的。可以下载第三方插件，大部分是免费的。插入第三方插件的操作方法：插入第三方插件的操作方法：n在【文档】窗口中，将插入点置于要插入在【文档】窗口中，将插入点置于要插入ActiveXActiveX控件的地方。控件的地方。n选择【插入】栏选择【插入】栏| |【常用【常用】| |【媒体媒体】| |【 插件插件】图标，或【插入】图标，或【插入】| |【媒体】【媒体】| | 【 插件

18、】插件】1.1.出现的出现的 图标会标记出页面中插件将在页面上出图标会标记出页面中插件将在页面上出现的位置现的位置。221.4 1.4 插入第三方插件插入第三方插件( (扩展插件管理器扩展插件管理器) )要保存下载的扩展：要保存下载的扩展：n单击单击 Macromedia Exchange Web 站点上的扩展链站点上的扩展链接，开始下载。接，开始下载。 n将扩展保存到扩展管理器应用程序文件夹的将扩展保存到扩展管理器应用程序文件夹的 Downloaded Extensions 文件夹中。文件夹中。 n执行下列操作之一来安装扩展：执行下列操作之一来安装扩展：n在扩展管理器中，选择在扩展管理器中，

19、选择“文件文件”“安装扩展安装扩展”。 1.浏览到已保存在浏览到已保存在 Downloaded Extensions 文文件夹中的该文件，然后双击文件图标。件夹中的该文件，然后双击文件图标。 23安装扩展：安装扩展：n用以下方法之一启动扩展管理器：用以下方法之一启动扩展管理器： n双击双击 Windows Windows 资源管理器资源管理器 ( (Windows) Windows) 或或 Finder (Macintosh) Finder (Macintosh) 中的扩展文件。中的扩展文件。 n在在 Windows Windows 中，选择中，选择“开始开始”菜单中的菜单中的“Macrome

20、dia”“Macromedia Macromedia”“Macromedia 扩展管理器扩展管理器”。 n在在 Macintosh Macintosh 中，双击中，双击 Applications/Macromedia Extension Manager Applications/Macromedia Extension Manager 文件夹中的扩展管理器图标。文件夹中的扩展管理器图标。 1.1.在在 Dreamweaver Dreamweaver 中，选择中，选择“命令命令”“”“管理扩管理扩展展”，或者在，或者在 Flash Flash 或或 Fireworks Fireworks 中选择

21、中选择“帮帮助助”“”“管理扩展功能管理扩展功能”。 1.4 1.4 插入第三方插件插入第三方插件( (扩展插件管理器扩展插件管理器) )241.4 1.4 插入第三方插件插入第三方插件( (扩展插件管理器扩展插件管理器) )n在扩展管理器工具栏的在扩展管理器工具栏的“产品产品”弹出菜单中，选择弹出菜单中，选择您要在其中安装该扩展的您要在其中安装该扩展的 Macromedia Macromedia 产品。产品。 n在扩展管理器中，选择在扩展管理器中，选择“文件文件”“”“安装扩展安装扩展”。 n在出现的文件选择对话框中，选择一个扩展名在出现的文件选择对话框中，选择一个扩展名为为 . .mxp

22、mxp 的扩展文件，然后选择的扩展文件，然后选择“安装安装”(”(Windows) Windows) 或或“选择选择”(”(Macintosh)Macintosh)。 n仔细阅读仔细阅读 Macromedia Macromedia 扩展免责声明和所有可能附扩展免责声明和所有可能附带的第三方扩展许可。带的第三方扩展许可。 选择选择“接受接受”，继续安装；，继续安装；或者选择或者选择“拒绝拒绝”，取消安装。，取消安装。251.4 1.4 插入第三方插件插入第三方插件( (扩展插件管理器扩展插件管理器) )n如果您已安装了该扩展的另一个版本，或者安装了如果您已安装了该扩展的另一个版本，或者安装了具有

23、相同名称的另一个扩展，扩展管理器会问您是具有相同名称的另一个扩展，扩展管理器会问您是否禁用已经安装的那个扩展。否禁用已经安装的那个扩展。 选择选择“是是”会用新会用新的扩展替换以前安装的扩展，或者选择的扩展替换以前安装的扩展，或者选择“否否”取消取消安装，保留现有的扩展。安装，保留现有的扩展。6.6.如果系统问您是否替换一个或多个现有文件，选择如果系统问您是否替换一个或多个现有文件，选择“是是”或者或者“全是全是”将接受扩展中包括的一个或多将接受扩展中包括的一个或多个版本；或者选择个版本；或者选择“否否”，则保留当前文件版本。，则保留当前文件版本。 如果您单击如果您单击“取消取消”，则会取消安

24、装，不安装或替，则会取消安装，不安装或替换任何文件。换任何文件。261.4 1.4 插入第三方插件插入第三方插件( (扩展插件管理器扩展插件管理器) )1.4.21.4.2使用扩展插件使用扩展插件 Dreamweaver插件一般有三大类：对象，命令，插件一般有三大类：对象，命令，行为行为 n对象：将出现在【插入】菜单或【插入】栏中。对象：将出现在【插入】菜单或【插入】栏中。n命令：将出现在【命令】菜单下。命令：将出现在【命令】菜单下。6.6.行为：在行为面板的动作列表中。行为：在行为面板的动作列表中。 271.51.5实战演练实战演练 一、实战效果旅游网一、实战效果旅游网281.51.5实战演

25、练实战演练 一、实战要求一、实战要求n添加添加FlashFlash动画。动画。n添加添加AppletApplet小程序。小程序。1.1.添加背景音乐。添加背景音乐。 29 重点：模板、库的创建、编辑、应重点：模板、库的创建、编辑、应用、修改，站点的更新。用、修改，站点的更新。 难点：如何合理的设置和定义模板难点：如何合理的设置和定义模板的可编辑区域。的可编辑区域。302.1 2.1 应用模板制作相似网页应用模板制作相似网页2.2 2.2 模板的基本操作模板的基本操作2.3 2.3 库的应用库的应用2.4 2.4 资源管理资源管理2.5 2.5 实战演练实战演练312.12.1应用模板制作相似网

26、页应用模板制作相似网页2.1.1 2.1.1 案例综述案例综述 本例通过模板设计出网页的整体风格、布局，本例通过模板设计出网页的整体风格、布局，当制作各个分页时，通过模板来创建，而当修改模当制作各个分页时，通过模板来创建，而当修改模板时，与之相链接的网页都将随之改变。板时，与之相链接的网页都将随之改变。 322.12.1应用模板制作相似网页应用模板制作相似网页2.1.2 2.1.2 案例分析案例分析 在制作中，可利用模板来设计其相同部分，不在制作中，可利用模板来设计其相同部分，不同之处留为可编辑区域，待在具体制作网页时，再同之处留为可编辑区域，待在具体制作网页时，再将具体内容填入可编辑区域。将

27、具体内容填入可编辑区域。 可编辑区可编辑区域域332.12.1应用模板制作相似网页应用模板制作相似网页2.1.3 2.1.3 实现步骤实现步骤 n制作模板制作模板 n基本元素的制作基本元素的制作 n创建可编辑区域创建可编辑区域 n创建基于模板的网页文档创建基于模板的网页文档 1.1.修改模板并更新修改模板并更新 342.2 2.2 模板的基本操作模板的基本操作2.2.1 2.2.1 模板的基本特点模板的基本特点使用模板的好处在于：使用模板的好处在于：1.1.可以生成大批的风格相近的网页。可以生成大批的风格相近的网页。2.2.一旦模板修改了，就修改了一批网页（自动一旦模板修改了，就修改了一批网页

28、（自动更新）。更新）。352.2 2.2 模板的基本操作模板的基本操作2.2.2 2.2.2 模板的创建与保存模板的创建与保存1.1.模板的创建方法模板的创建方法 方法一：方法一：通过菜单创建模板通过菜单创建模板 步骤步骤1 1在文件面板中选择要创建模板的站点。在文件面板中选择要创建模板的站点。步骤步骤2 2选择【文件】【新建】【常规】模板页，选选择【文件】【新建】【常规】模板页，选择需创建的模板类型。单击【确定】，创建了一个空白模择需创建的模板类型。单击【确定】，创建了一个空白模板板 方法二：在【资源】面板创建模板方法二：在【资源】面板创建模板步骤步骤1 1在文件面板中选择要创建模板的站点。

29、在文件面板中选择要创建模板的站点。步骤步骤2 2选择【窗口】【资源】命令，打开【资源】面板，选择【窗口】【资源】命令，打开【资源】面板，选定面板左侧的【模板】按钮，单击选定面板左侧的【模板】按钮，单击“添加添加”按钮。按钮。 方法三：利用现成网页创建模板方法三：利用现成网页创建模板步骤步骤1 1打开欲做模板的网页。打开欲做模板的网页。步骤步骤2 2选择【文件】【另存为模板】命令。选择【文件】【另存为模板】命令。362.2 模板的基本操作模板的基本操作2 2、模板的保存、模板的保存n新建的模板文件会保存在本地站点的新建的模板文件会保存在本地站点的TemplatesTemplates文件夹中。文件

30、夹中。n如果该如果该TemplatesTemplates文件夹在站点中尙不存在，文件夹在站点中尙不存在，Dreamweaver 8Dreamweaver 8将在保存新建模板时自动创将在保存新建模板时自动创建该文件夹。建该文件夹。n模板文件的扩展名为模板文件的扩展名为. .dwtdwt。372.2 2.2 模板的基本操作模板的基本操作2.2.3 创建可编辑区域创建可编辑区域 可编辑模板区域控制基于模板的页面中的哪些可编辑模板区域控制基于模板的页面中的哪些区域可以编辑。设置可编辑区域，需要在制作区域可以编辑。设置可编辑区域，需要在制作模板的时候完成。模板的时候完成。 相似网页相似网页 n完全一样部

31、分（在模板中制作）完全一样部分（在模板中制作）n不同部分（设为可编辑区域）不同部分（设为可编辑区域）38设置可编辑区域的具体步骤如下：设置可编辑区域的具体步骤如下：n步骤步骤1 1在已创建的模板文件中，编辑网页，在已创建的模板文件中，编辑网页，其布局、制作方法与普通网页完全一致。其布局、制作方法与普通网页完全一致。n步骤步骤2 2将插入点放在想要插入可编辑区域的将插入点放在想要插入可编辑区域的地方地方n步骤步骤3 3在插入栏中选择【模板】，然后单击在插入栏中选择【模板】，然后单击【可编辑区域】按钮。【可编辑区域】按钮。n步骤步骤4 4在【新建可编辑区域】对话框中，输在【新建可编辑区域】对话框中

32、，输入该区域的名称入该区域的名称, ,单击【确定】按钮单击【确定】按钮2.2 2.2 模板的基本操作模板的基本操作39要点提示：要点提示：1.1.表格布局的模板定义可编辑区域时，可将整表格布局的模板定义可编辑区域时，可将整个表格或表格的某个单元格定义为可编辑区个表格或表格的某个单元格定义为可编辑区域，但是不能同时将多个单元格定义为一个域，但是不能同时将多个单元格定义为一个单独的可编辑区域。单独的可编辑区域。2.2.层和层中的内容是不同的元素，当层设为可层和层中的内容是不同的元素，当层设为可编辑区域时，在应用该模板编辑文档时，可编辑区域时，在应用该模板编辑文档时，可改变层的位置和层中的内容。而将

33、层的内容改变层的位置和层中的内容。而将层的内容设为可编辑区域时，则只能改变层中的内容设为可编辑区域时，则只能改变层中的内容而不能改变层的位置。而不能改变层的位置。2.2 2.2 模板的基本操作模板的基本操作402.2.4 2.2.4 创建基于模板的网页创建基于模板的网页方法一：用菜单方式方法一：用菜单方式n步骤步骤1 1选择【文件】【新建】选择【文件】【新建】| |【新建文档】【新建文档】| |【模板】，选择新建的页面存放的站点及所用【模板】，选择新建的页面存放的站点及所用模板名称。模板名称。n步骤步骤2 2选中【当模板改变时更新页面】的复选选中【当模板改变时更新页面】的复选框时，当模板被修改

34、后，用此模板创建的网页也框时，当模板被修改后，用此模板创建的网页也会被修改。会被修改。n步骤步骤3 3单击【创建】按钮，此时在网页编辑窗单击【创建】按钮，此时在网页编辑窗口建立了一个由模板生成的网页，设计者可在可口建立了一个由模板生成的网页，设计者可在可编辑区域输入相关内容。编辑区域输入相关内容。2.2 2.2 模板的基本操作模板的基本操作412.2.4 2.2.4 创建基于模板的网页创建基于模板的网页方法二：用资源面板方法二：用资源面板n步骤步骤1 1首先新建页面，通过【窗口】菜单打开资源首先新建页面，通过【窗口】菜单打开资源面板。面板。n步骤步骤2 2选择面板中的模板资源。选择面板中的模板

35、资源。n步骤步骤3 3选中欲使用的模板，单击【应用】按钮；或选中欲使用的模板，单击【应用】按钮；或将选中的模板拖到编辑窗口。应用模板文档在右上将选中的模板拖到编辑窗口。应用模板文档在右上角会标明模板名称。角会标明模板名称。n步骤步骤4 4在应用了模板的文档的可编辑区域内编辑相在应用了模板的文档的可编辑区域内编辑相关内容。关内容。2.2 2.2 模板的基本操作模板的基本操作422.2 2.2 模板的基本操作模板的基本操作2.2.5 2.2.5 更新模板及页面更新模板及页面修改模板操作步骤：修改模板操作步骤：步骤步骤1 1选择【窗口】【资源】命令，打开资源面板，选择【窗口】【资源】命令，打开资源面

36、板，切换到【模板】资源。切换到【模板】资源。步骤步骤2 2选中要修改的模板后右击鼠标，在快捷菜单中选选中要修改的模板后右击鼠标，在快捷菜单中选择【编辑】命令，或双击该模板，便可打开要修改的择【编辑】命令，或双击该模板，便可打开要修改的模板模板. .步骤步骤3 3在快捷菜单中选择【新建可编辑区域】在快捷菜单中选择【新建可编辑区域】【删除【删除模板标记】以添加或删除可编辑区域。模板标记】以添加或删除可编辑区域。步骤步骤4 4模板修改完成后，选择【文件】【保存】命令，模板修改完成后，选择【文件】【保存】命令，保存模板。保存模板。432.2 2.2 模板的基本操作模板的基本操作更新页面：更新页面：n保

37、存模板时，保存模板时，Dreamweaver 8Dreamweaver 8会询问它会询问它是否更是否更新新所有附着到该模板的网页。所有附着到该模板的网页。n也可以使用也可以使用【修改】【模板】【更新页【修改】【模板】【更新页面】面】命令。或【模板】资源窗口右上角的按命令。或【模板】资源窗口右上角的按钮，选择【更新站点】命令，钮，选择【更新站点】命令，DreamweaverDreamweaver在在该模板所在的站点中更新基于模板的所有网该模板所在的站点中更新基于模板的所有网页文档。页文档。 442.32.3库的应用库的应用 库库是一种用来存储想要在整个网站上经常重复使是一种用来存储想要在整个网站

38、上经常重复使用或更新的页面元素（如图像、文本和其他对象）用或更新的页面元素（如图像、文本和其他对象）的方法。这些元素称为库项目的方法。这些元素称为库项目 使用库的意义使用库的意义：如果使用了库，就可以通过改动：如果使用了库，就可以通过改动库更新所有采用库的网页，不用一个一个的修改库更新所有采用库的网页，不用一个一个的修改网页元素或者重新制作网页。使用库比使用模板，网页元素或者重新制作网页。使用库比使用模板，有更大的灵活性。有更大的灵活性。 452.32.3库的应用库的应用2.3.12.3.1 创建库项目创建库项目创建库项目的方式有两种：创建库项目的方式有两种： n选定内容创建为库项目。选定内容

39、创建为库项目。n创建一个空白库项目创建一个空白库项目 462.32.3库的应用库的应用n选定内容创建为库项目选定内容创建为库项目 操作操作方法方法：n步骤步骤1 1 选择【窗口】【资源】命令，出现选择【窗口】【资源】命令，出现“资源资源”面板，选择面板左侧的面板，选择面板左侧的“库库”类别。类别。n步骤步骤2 2 在在“文档文档”窗口中，选择文档要另窗口中，选择文档要另存为库项目的内容。存为库项目的内容。n步骤步骤3 3 将选定内容拖到将选定内容拖到“资源资源”面板的面板的“库库”类别中，或者单击类别中，或者单击“资源资源”面板的面板的“库库”类别底部的类别底部的“新建库项目新建库项目”按钮，

40、一个库项目被按钮，一个库项目被创建，此时网页文档下方的属性检查器也变为创建，此时网页文档下方的属性检查器也变为“库项目库项目”检查器。检查器。n步骤步骤4 4为新的库项目输入一个名称。为新的库项目输入一个名称。 472.32.3库的应用库的应用n创建一个空白库项目创建一个空白库项目操作方法：操作方法：n步骤步骤1 1 选择【窗口】【资源】选择【窗口】【资源】【库】【库】n步骤步骤2 2 在在“资源资源”面板中，单击面板中，单击“库库”类别底类别底部的部的“新建库项目新建库项目”按钮。按钮。n步骤步骤3 3 一个新的库项目被添加到面板上的列表一个新的库项目被添加到面板上的列表中。中。n步骤步骤4

41、 4 为新的库项目输入一个名称。为新的库项目输入一个名称。n步骤步骤5 5 双击该库项目，在文档窗口进行编辑。双击该库项目，在文档窗口进行编辑。482.32.3库的应用库的应用2.3.2 2.3.2 插入库项目插入库项目操作方法：操作方法：n步骤步骤1 1 将文本光标定位于将文本光标定位于“文档文档”窗口窗口中。中。n步骤步骤2 2 在在“资源资源”面板上选择面板左侧的面板上选择面板左侧的“库库”类别。类别。n步骤步骤3 3 将一个库项目从将一个库项目从“资源资源”面板拖动到面板拖动到“文档文档”窗口中，或者选择一个库项目，然窗口中，或者选择一个库项目，然后单击面板底部的后单击面板底部的“插入

42、插入”按钮。按钮。492.32.3库的应用库的应用注意：注意：插入库项目后，会在插入库项目后，会在“文档文档”窗口的下方出现窗口的下方出现“库项目库项目”属性检查器，如图所示。属性检查器，如图所示。n【从源文件分离】可以断开文档中的项目和库【从源文件分离】可以断开文档中的项目和库之间的链接，从而使文档中的库项目可编辑。之间的链接，从而使文档中的库项目可编辑。“库项目库项目”属性检查器属性检查器502.32.3库的应用库的应用2.3.32.3.3修改库项目和更新站点修改库项目和更新站点当修改库项目时，可以更新使用该项目的所有文当修改库项目时，可以更新使用该项目的所有文档。档。1 1 修改库项目修

43、改库项目n步骤步骤1 1 选中页面中的库项目。选中页面中的库项目。n步骤步骤2 2在属性面板中点击在属性面板中点击“打开打开”按钮。按钮。n步骤步骤3 3修改库项目，修改完成之后保存。修改库项目，修改完成之后保存。n步骤步骤4 4在在“更新库项目更新库项目”对话框中点击对话框中点击“更更新新”按钮。按钮。n步骤步骤5 5选择更新的范围，更新完成之后关闭。选择更新的范围，更新完成之后关闭。 512.32.3库的应用库的应用2.3.32.3.3修改库项目和更新站点修改库项目和更新站点2.2.更新整个站点或所有使用特定库项目的文档更新整个站点或所有使用特定库项目的文档：选择【修改】【库】【更新页面】

44、选择【修改】【库】【更新页面】3. 3. 更改当前文档已使用所有库项目的当前版本更改当前文档已使用所有库项目的当前版本选择【修改】选择【修改】| |【库】【更新当前页】【库】【更新当前页】 522.4 2.4 资源管理资源管理 利用【资源】面板的功能可以统一管理整个站点的利用【资源】面板的功能可以统一管理整个站点的资源，避免反复查找某些网页元素，能大大提高网资源，避免反复查找某些网页元素，能大大提高网页设计的效率，得到事半功倍的效果。页设计的效率，得到事半功倍的效果。 在【资源】面板中管理的几种对象分别是：【图在【资源】面板中管理的几种对象分别是：【图像】、【颜色】、【超链接】、：【像】、【颜

45、色】、【超链接】、：【FlashFlash】、】、【ShockwaveShockwave】、【】、【视频】、【脚本】、【模板】、视频】、【脚本】、【模板】、【库】。【库】。532.4 2.4 资源管理资源管理 选择【窗口】【资源】命令，或者直接按选择【窗口】【资源】命令，或者直接按F10F10键，键，可打开【资源】面板。可打开【资源】面板。 图像管理颜色管理链接管理Flash管理Shockwave管理视频管理脚本管理模板管理库管理542.4 2.4 资源管理资源管理 2.4.1 2.4.1 图像管理图像管理 【资源】面板能自动管理本地站点内的每一幅图像。【资源】面板能自动管理本地站点内的每一幅

46、图像。【资源】面板可对本地站点内的图像完成插入、编【资源】面板可对本地站点内的图像完成插入、编辑和管理，其操作步骤如下辑和管理，其操作步骤如下: : （1 1）打开打开 图像图像 资源：资源：单击单击 资源资源 面板左侧的图面板左侧的图像按钮，可进入【图像】窗口。像按钮，可进入【图像】窗口。 ( (2 2) ) 插入图像：插入图像：把光标定位在网页编辑窗口的图把光标定位在网页编辑窗口的图像插入处，然后在图像列表中选中要插入的图像，像插入处，然后在图像列表中选中要插入的图像，单击【插入】即可插入的图像。单击【插入】即可插入的图像。 ( (3 3) ) 编辑图像：编辑图像：在图像列表中选中要编辑修

47、改的在图像列表中选中要编辑修改的图像，然后单击该面板底部的编辑按钮，启动图像，然后单击该面板底部的编辑按钮，启动Dreamweaver 8Dreamweaver 8默认的图像编辑软件来对选中的图像默认的图像编辑软件来对选中的图像进行编辑与修改。进行编辑与修改。552.4 2.4 资源管理资源管理 2.4.1 2.4.1 图像管理图像管理 (4)(4)图片收藏夹：图片收藏夹：n添加：添加：单击位于【资源】面板底端的【添单击位于【资源】面板底端的【添加到收藏夹】按钮，可将图片收藏到收藏加到收藏夹】按钮，可将图片收藏到收藏夹中。夹中。n查看：查看：在【图像】管理窗口的顶端选择在【图像】管理窗口的顶端

48、选择【收藏】单选按钮，即可在图像列表栏中【收藏】单选按钮，即可在图像列表栏中查看站点中的图片收藏情况。查看站点中的图片收藏情况。n删除：删除：单击位于【资源】面板底部的【从单击位于【资源】面板底部的【从收藏夹中删除】按钮后即可将图像从收藏收藏夹中删除】按钮后即可将图像从收藏夹中删除。夹中删除。 562.4 2.4 资源管理资源管理 2.4.2 2.4.2 颜色管理颜色管理 n打开打开 资源资源 面板面板：选择【窗口】【资源】命：选择【窗口】【资源】命令，或者按令，或者按F10F10键。键。n打开打开 颜色颜色 资源：资源：单击【资源】面板左侧的单击【资源】面板左侧的【颜色】按钮即可进入【颜色】管理窗口。【颜色】按钮即可进入【颜色】管理窗口。n颜色收藏夹：颜色收藏夹：单击位于【资源】面板顶端的单击位于【资源】面板顶端的【收藏】单选按钮，切换到颜