Dreamweaver网页设计与制作第13章.ppt

1、第13章资源、模板和13.1资源。“资源”面板资源包括存储在站点中的各种元素，例如图像或电影文件。“资源”面板提供了两种查看资源的方式：“网站”列表显示网站的所有资源。收藏夹列表仅显示您明确选择的资源。在这两个列表中，资源分为以下类别，显示在“资源”面板的左侧。13.1资源和13.1.2管理“资源”面板可以使用“资源”面板来查看和管理当前站点中的资源。“资源”面板在“文档”窗口中显示与活动文档相关联的网站资源。您必须先定义本地网站，然后才能在“资源”面板中查看资源。“资源”面板提供两种视图：“网站”列表显示您网站的所有资源，包括该网站任何文档中使用的颜色和网址。收藏夹列表仅显示您明确选择的资源

2、。在这两个列表中，资源被划分为类别(沿着“资源”面板的左侧排列)。“网站”列表和“收藏夹”列表可用于除模板和库项目之外的所有资源类别。大多数“资源”面板操作在“网站”列表和“收藏夹”列表中的工作方式相同。但是，有几个任务只能在收藏夹列表中执行。默认情况下，给定类别中的资源按名称的字母顺序列出。您可以根据任何其他条件列出资源或更改列的大小。您可以预览类别中的资源，并更改预览区域的大小。打开“资源”面板，选择“窗口”“资源”。出现“资源”面板。默认情况下，选择图像类别和13.1资源。查看网站列表。在资源面板(窗口资源)中，选择面板顶部的站点选项。注意：在“模板”和“库”类别(位于“资源”面板的左侧

3、)中，“网站”和“收藏夹”选项不可用。13.1资源，查看集合列表在资源面板(窗口资源)中，选择面板顶部的集合选项。在您明确向收藏夹列表添加资源之前，收藏夹列表是空的。注意：在“模板”和“库”类别(位于“资源”面板的左侧)中，“网站”和“收藏夹”选项不可用。13.1资源，13.1资源，显示特定类别的资源单击“资源”面板左侧的相应图标(窗口资源)。按不同的顺序列出资源。单击列标题。例如，按类型对图像列表进行排序(以便所有的GIF图像都在一起，所有的JPEG图像都在一起，等等)。)，单击“类型”列标题。13.1 resource，13.1 resource，更改列的宽度，并拖动分隔两个列标题的线条。

4、13.1资源，预览资源在资源面板中选择资源。面板顶部的预览区域显示资产的视觉预览。例如，当您选择电影资源时，预览区域会显示一个图标。若要观看影片，请点按预览区域右上角的“播放”按钮(绿色三角形)。13.1资源，更改预览区域的大小向上或向下拖动拆分条(在预览区域和资源列表之间)。13.1资源，刷新“资源”面板“资源”面板可能需要几秒钟来创建站点列表，因为创建列表需要读取站点缓存。有些更改不会立即出现在“资源”面板中：当您在网站中添加或删除资源时，这些更改不会立即出现在“资源”面板中，除非您单击“刷新网站列表”按钮来刷新网站列表。如果在Dreamweaver之外添加或删除资源(例如，使用Windo

5、ws资源管理器或Finder)，则必须重新生成站点缓存才能更新“资源”面板。13.1资源。向文档添加资源可以将大多数类型的资源插入到文档中，方法是将它们拖到“文档”窗口中的“代码”视图或“设计”视图中，或者使用“插入”按钮。您可以在“设计”视图中插入颜色和网址，或者将它们应用于选定的文本。(您也可以将该网址应用于“设计”视图中的其他元素，13.1资源，将资源插入到文档中，并将插入点放在您希望资源出现在“设计”视图中的位置。在“资源”面板(窗口资源)中，选择要在面板左侧插入的资源类型类别。注意：选择模板以外的任何类别。只有模板可以应用于整个文档；不能将其插入文档。有关模板的更多信息，请参见管理模

6、板。选择面板顶部的“网站”或“收藏夹”，然后选择要插入的资源。对于图书馆项目，没有“网站”或“收藏”列表；如果要插入库项目，请跳过此步骤。请执行下列操作之一：将资源从面板拖到文档中。您可以将脚本拖到“文档”窗口的标题内容区域；如果此区域未显示，请选择查看标题内容。在面板中选择资源，然后单击面板底部的“插入”。资源被插入到文档中。(如果资源是颜色，颜色将应用于插入点；也就是说，您稍后键入的内容将以该颜色显示。13.1资源，选择和编辑资源“资源”面板允许您同时选择多个资源。它还提供了开始编辑资源的快速方法。要选择多个资源：在“资源”面板(窗口资源)中，选择一个资源。以下列方式之一选择其他资源：按住

7、Shift键并单击以选择一系列连续的资源。按住Control键点按(窗口)或按住Command键点按(Macintosh)，将单个资源添加到选定内容中(无论该资源是否与现有选定内容相邻)。按住Control键或Command键点按所选资源以取消选择它。若要编辑资源：在“资源”面板(窗口资源)中，执行以下操作之一：双击资源。选择资源，然后单击面板底部的编辑按钮。13.1资源，为某些类型的资源(如图像)选择和编辑资源，编辑资源将启动外部编辑应用程序。对于颜色和网址，在编辑资源时，只能更改收藏夹列表中的资源值。(您不能编辑网站列表中的颜色和网址。对于模板和库项目，您可以在编辑资源时更改Dreamwe

8、aver中的资源。13.1资源，选择和编辑资源注意：如果没有为需要编辑器的资源打开外部编辑器，请选择编辑-首选项(窗口)或Dreamweaver-首选项(麦金塔)，选择文件类型/编辑器类别，并确保为资源的文件类型定义了外部编辑器。(请参见启动媒体文件的外部编辑器。)根据需要更改资源。编辑资源后，请执行以下操作之一：如果资源是基于文件的资源(除颜色和网址之外的任何资源)，请保存它(使用用于编辑资源的任何编辑器)并关闭它。如果资源是一个网址，请在“编辑网址”对话框中编辑后单击“确定”。如果资源是颜色，当您选取颜色时，Dreamweaver颜色选取器将自动退出。注意：要退出颜色选择器而不选择颜色，请

9、按Escape。13.1资源，在另一个网站中重用资源“资源”面板显示当前网站中的所有资源(可识别类型)。)要将当前网站中的资源用于另一个网站，您必须将资源复制到另一个网站。您可以一次复制一个单独的资源、一组单独的资源或整个集合。在将资源转移到远程站点或从远程站点转移资源之前，您可能需要在“文件”面板中找到与“资源”面板中的资源相对应的文件。13.1、资源图片管理选择窗口- 资源。出现“资源”面板。默认情况下，选择“图像”类别。13.1资源，查看“资源”面板(窗口资源)中“站点”列表中的图片，选择面板顶部的“站点”选项。，13.1资源，查看集合列表在资源面板(窗口资源)中，选择面板顶部的集合选项

10、。“收藏夹”列表是空的，直到您从资源13.1资源中显式添加图片，向“收藏夹”列表13.1资源中添加图片，从资源面板中插入图像1，并在三列表格的中间列(第一个浅棕色表格单元格)单击一次。2.在属性检查器(窗口属性)中，从水平弹出式菜单中选择“居中对齐”，然后从垂直弹出式菜单中选择“顶部”。此操作将表格单元格的内容与单元格的中间对齐，并使单元格的内容从单元格的顶部开始。13.1资源，3。按一次回车键(窗口)或回车键(麦金塔)，创建更多空间，13.1资源。如果未选择图像视图，请单击图像查看您的图像资源。在资源面板中，选择street_sign.jpg文件。4.请执行下列操作之一：a .将street

11、_sign.jpg文件拖到表格单元格中间的插入点。b单击资源面板底部的插入。13.1资源，5。在表格外单击一次以取消选择图像。6.保存页面。13.1参考资料，13.1.4颜色管理使用“资源”面板将颜色应用于文本“资源”面板中的颜色表示已应用于网站中各种元素的颜色，包括文本、表格边框、背景颜色等。您可以使用“颜色”类别中的色板将选定的颜色一致地应用于页面中的对象。有关如何将颜色添加到“颜色”类别的信息，请参见在收藏夹列表中添加和删除资源。要更改文档中选定文本的颜色，请执行以下操作：1。选择文档中的文本。2.在“资源”面板(窗口资源)中，选择面板左侧的颜色类别。3.选择所需的颜色。4.单击面板底部

12、的“应用”按钮。13.1资源，13.1.5连接管理可以使用“资源”面板使所选文本或图像成为活动链接。操作步骤如下：1 .选择要应用该网址的文本或图像。2.在资源面板(窗口资源)中，选择面板左侧的网址类别。3.选择所需的网址。4.请执行下列操作之一：将该网址从面板拖动到“设计”视图中的选定内容。选择网址并单击插入按钮。13.1资源，13 . 1 . 6闪存管理闪存文件是任何版本的MacromediaFlash闪存格式文件。“资源”面板仅显示SWF文件(压缩的闪存文件)，不显示FLA文件(闪存源文件)。将flash插入网页并执行以下步骤：1 .从资源面板中选择相应的flash文件，并将其拖放到相应

13、的位置。13.1资源和13.1.7指令管理脚本是JavaScript或VBScript文件。请注意，HTML文件中的脚本(不是单独的JavaScript或VBScript文件)不会出现在“资源”面板中。您可以双击将文件传输到编辑场景进行编辑。13.1参考资料，13.1案例1:设计美美相册，13.1参考资料，步骤1:创建页面，如图13-10所示，13.1参考资料，步骤2:设计表格布局，如图13-11所示，13.1参考资料，步骤3:从资源库中插入图片，如图13-12，13.1参考资料，步骤4:继续插入图片以完成网页，如图13-13，13.2模板。当需要生成大量布局基本相同的网页时，使用模板是最好的

14、方法。接下来，我们将学习如何使用模板构建网页。13.2模板，13.2.1创建模板您可以从现有文档(如HTML、MacromediaColdFusion或MicrosoftActiveServerPages文档)或新创建的空白文档创建模板。创建模板后，可以插入模板区域(请参见模板区域的类型)。您还可以为模板区域的代码颜色和高亮颜色设置模板首选项(请参见为模板自定义代码颜色首选项和为模板区域设置高亮首选项)。13.2模板，(1)创建模板的步骤如下：1 .打开要另存为模板的文档。2.打开文档，选择“文件”“另存为模板”,如图13-14:13.2模板，3。从“站点”弹出式菜单中选择一个站点来保存模板，

15、并在“另存为”文本框中输入模板的唯一名称。单击“保存”。13.2模板。Dreamweaver使用文件扩展名将模板文件保存在站点本地根文件夹的模板文件夹中。dwt。如果网站中不存在模板文件夹，Dreamweaver将在您保存新模板时自动创建该文件夹。注意：不要将模板移出模板文件夹或将任何非模板文件放入模板文件夹。此外，不要将模板文件夹移到本地根文件夹之外。这样做会导致模板中的路径出错。13.2模板，13.2.2定义模板1。插入可编辑区域在插入可编辑区域之前，您正在处理的文档应保存为模板。如果您将可编辑区域插入到文档(而不是模板文件)中，Dreamweaver会警告您该文档将自动保存为模板。13.

16、2模板，操作步骤如下：在文档窗口中，执行下列操作之一来选择区域。13.2模板，选择插入模板对象可编辑区域。“新建可编辑区域”对话框。13.2模板出现。在“名称”文本框中输入该区域的唯一名称。(对于特定模板中的多个可编辑区域，不能使用相同的名称。不要在“名称”文本框中使用特殊字符。单击确定。13.2模板。可编辑区域由模板中突出显示的矩形边框包围，该边框使用首选项中设置的突出显示颜色。该区域左上角的选项卡显示该区域的名称。如果将空白可编辑区域插入到文档中，该区域的名称将出现在该区域内。3.保存模板。13.2模板，13.2案例1:网页制作教学网络，13.2模板，第1步：新建网站，13.2模板，第2步：使用fireworks设计网页的整体效果并切片(详细介绍见fireworks课程说明)。步骤3:将生成的网页加载到Dreamweaver8中制作网页。步骤4:修改网页布局，将插入的图片更改为图片背景，13.2模板，13.2模板，步骤