1、第 十三 章 资源、模板,13.1 资源,“资源”面板资源包括存储在站点中的各种元素，如图像或影片文件。“资源”面板提供了两种查看资源的方式：“站点”列表显示站点的所有资源。“收藏”列表仅显示您明确选择的资源。在这两个列表中，资源被分成下列类别，显示在“资源”面板的左侧.,13.1 资源,13.1.2 管理“资源”面板 可以使用“资源”面板查看和管理当前站点中的资源。“资源”面板显示与“文档”窗口中的活动文档相关联的站点资源。必须首先定义一个本地站点，然后才能在“资源”面板中查看资源。“资源”面板提供两种视图：“站点”列表显示您的站点的所有资源，包括在该站点的任何文档中使用的颜色和 URL。“
2、收藏”列表仅显示您明确选择的资源。在这两个列表中，资源被分成多个类别（沿着“资源”面板的左侧排列）。“站点”列表和“收藏”列表都可用于除 模板和库项目之外的所有资源类别。大多数“资源”面板操作在“站点”列表和“收藏”列表中的工作方式相同。但是，有几个任务只能在“收藏”列表中执行。默认情况下，给定类别中的资源按名称的字母顺序列出。您可以根据其它几种条件的任意一种列出资源或者更改列的大小。您可以预览某一类别中的资源，并更改预览区域的大小。,打开“资源”面板选择“窗口”“资源”。 出现“资源”面板。默认情况下，“图像”类别处于选定状态,13.1 资源,查看“站点”列表在“资源”面板（“窗口”“资源”
3、）中，选择位于面板顶部的“站点”选项。注意：在“模板”和“库”类别（位于“资源”面板的左侧）中，“站点”和“收藏”选项不可用。,13.1 资源,查看“收藏”列表在“资源”面板（“窗口”“资源”）中，选择位于面板顶部的“收藏”选项。“收藏”列表为空，直到您向其中显式添加资源。注意：在“模板”和“库”类别（位于“资源”面板的左侧）中，“站点”和“收藏”选项不可用。,13.1 资源,13.1 资源,显示特定类别的资源单击“资源”面板（“窗口”“资源”）左侧相应的图标。,按不同顺序列出资源单击某个列标题。例如，若要根据类型对图像列表进行排序（以便使所有 GIF 图像在一起，所有 JPEG 图像在一起，
4、等等），请单击“类型”列标题。,13.1 资源,13.1 资源,更改列的宽度拖动分隔两个列标题的线。,13.1 资源,预览资源在“资源”面板中选取资源。面板顶部的预览区域将显示该资源的可视化预览。例如，当您选择一个影片资源时，预览区域将显示一个图标。若要查看该影片，请单击预览区域右上角的“播放”按钮（绿色三角形）。,13.1 资源,更改预览区域的大小向上或向下拖动拆分条（在预览区域和资源列表之间）。,13.1 资源,刷新“资源”面板“资源”面板可能需要花几秒钟才能创建“站点”列表，因为它需要读取站点缓存以创建该列表。某些更改不会立即出现在“资源”面板中：当您在站点中添加或删除资源时，所做的更改
5、不会立即出现在“资源”面板中，直到您单击“刷新站点列表”按钮刷新“站点”列表为止。如果您在 Dreamweaver 外部添加或删除资源（例如，使用 Windows 资源管理器或 Finder），则必须重新生成站点缓存以更新“资源”面板。,13.1 资源,将资源添加到文档 可以将大多数类型的资源插入到文档中，方法是将它们拖动到“文档”窗口中的“代码”视图或“设计”视图，或者使用“插入”按钮。您可以插入颜色和 URL，也可以将它们应用于“设计”视图中的选定文本。（还可以将 URL 应用于“设计”视图中的其它元素,13.1 资源,将资源插入文档 将插入点放置在“设计”视图中您希望资源出现的位置。 在
6、“资源”面板（“窗口”“资源”）中，在面板左侧选择要插入的资源类型的类别。 注意：选择除“模板”之外的任何类别。只能将模板应用于整个文档；不能将它插入文档中。有关模板的更多信息，请参见管理模板。 在面板顶部选择“站点”或“收藏”，然后选择要插入的资源。 对于库项目而言，没有“站点”或“收藏”列表；如果插入的是库项目，则跳过此步骤。执行下列操作之一： 将资源从面板拖动到文档。 可以将脚本拖动到“文档”窗口的文件头内容区域；如果该区域未显示，则选择“查看”“文件头内容”。 在面板中选择资源，然后单击面板的底部的“插入”。 资源即被插入文档中。（如果资源为颜色，则该颜色将在插入点开始应用；也就是说，
7、随后键入的内容将以该颜色显示。,13.1 资源,选择和编辑资源 “资源”面板使您可以同时选择多个资源。它还提供了开始编辑资源的快速方法。若要选择多个资源，请执行以下操作： 在“资源”面板（“窗口”“资源”）中，选择其中一个资源。 以下列方法之一选择其它资源： 按 Shift 键单击可选择一系列连续的资源。 按住 Control 键 (Windows) 或 Command 键 (Macintosh) 并单击可以将个别资源添加到选定内容（不管该资源是否与现有的选定内容相邻）。按住 Control 键或 Command 键并单击选定的资源可取消选择该资源。 若要编辑资源，请执行以下操作： 在“资源”
8、面板（“窗口”“资源”）中，执行以下操作之一： 双击资源。 选择资源，然后单击面板底部的“编辑”按钮。,13.1 资源,选择和编辑资源对于某些类型的资源（如图像），编辑资源时将启动一个外部编辑应用程序。对于颜色和 URL，编辑资源时只能在“收藏”列表中更改资源值。（您不能在“站点”列表中编辑颜色和 URL。）对于模板和库项目，编辑资源时您可以在 Dreamweaver 内部更改资源。,13.1 资源,选择和编辑资源 注意：如果没有为需要使用编辑器的资源打开外部编辑器，则选择“编辑”“首选参数”(Windows) 或“Dreamweaver”“首选参数”(Macintosh)，选择“文件类型/编
9、辑器”类别，并且确保已为该资源的文件类型定义了外部编辑器。（请参见为媒体文件启动外部编辑器。）根据需要更改资源。完成对资源的编辑后，执行下列操作之一： 如果该资源是基于文件的资源（除颜色和 URL 以外的任何资源），则保存它（使用编辑该资源时所用的任何编辑器）并将它关闭。 如果该资源是 URL，则在“编辑 URL”对话框中完成编辑后单击“确定”。 如果该资源是颜色，则当您挑选颜色时 Dreamweaver 颜色选择器将自动退出。 注意：若要在不挑选颜色的情况下退出颜色选择器，请按 Escape 键。,13.1 资源,在另外的站点中重新使用资源“资源”面板显示当前站点中的所有资源（属于可识别的类
10、型）。）若要将当前站点中的资源用于另外的站点，您必须将该资源复制到另外的站点。可以一次复制一个单独的资源、一组单独的资源或整个收藏夹。在向远程站点传输资源或从远程站点传输资源之前，可能需要在“文件”面板中定位与“资源”面板中的该资源相应的文件。,13.1 资源,图片管理选择“窗口”“资源”。 出现“资源”面板。默认情况下，“图像”类别处于选定状态。,13.1 资源,查看“站点”列表中的图片 在“资源”面板（“窗口”“资源”）中，选择位于面板顶部的“站点”选项。,13.1 资源,查看“收藏”列表 在“资源”面板（“窗口”“资源”）中，选择位于面板顶部的“收藏”选项。“收藏”列表为空，直到您向其中
11、显式添加资源中的图片,13.1 资源,添加图片到“收藏”列表,13.1 资源,从资源面板中插入图像 1、在由三列组成的表格（第一个浅棕色表格单元格）的中间一列内单击一次。 2、在“属性”检查器（“窗口”“属性”）中，从“水平”弹出式菜单中选择“居中对齐”，然后从“垂直”弹出式菜单中选择“顶端”。该操作将表格单元格的内容对齐到单元格的中间，并使单元格的内容从单元格顶端开始。,13.1 资源,3、按一次 Enter 键 (Windows) 或 Return 键 (Macintosh)，创建更多空间,13.1 资源,如果未选择“图像”视图，则单击“图像”以查看您的图像资源。 在“资源”面板中，选择
12、street_sign.jpg 文件。 4、执行下列操作之一： A、将 street_sign.jpg 文件拖到中心位置的表格单元格中的插入点。 B、单击“资源”面板底部的“插入”。,13.1 资源,5、在表格外单击一次以取消选中该图像。 6、保存该页。,13.1 资源,13.1.4 颜色管理 使用“资源”面板将颜色应用于文本 “资源”面板中的颜色表示已应用于站点中各种元素的颜色，这些元素包括文本、表格边框和背景颜色等。可以使用“颜色”类别中的颜色样本将所选的颜色一致地应用于页面中的对象。有关如何将颜色添加到“颜色”类别的信息，请参见在“收藏”列表中添加和删除资源。 若要更改文档中选定文本的颜
13、色，请执行以下操作： 1、在文档中选择文本。 2、在“资源”面板（“窗口”“资源”）中，选择面板左侧的“颜色”类别。 3、选择所需的颜色。 4、单击面板底部的“应用”按钮。,13.1 资源,13.1.5 连接管理 可以使用“资源”面板将所选的文本或图像做成一个活动链接。 操作步骤如下： 1、选择要应用 URL 的文本或图像。 2、在“资源”面板（“窗口”“资源”）中，选择面板左侧的“URL”类别。 3、选择所需的 URL。 4、执行下列操作之一： 将 URL 从面板拖动到“设计”视图中的选定内容。 选择 URL，然后单击“插入”按钮。,13.1 资源,13.1.6 FLASH管理 Flash
14、文件是任意版本的 Macromedia Flash 格式文件。“资源”面板仅显示 SWF 文件（压缩的 Flash 文件），而不显示 FLA （Flash 源）文件。 在网页中插入flash执行一下步骤： 1、从资源面板中选中相应的flash文件，拖放到相应位置即可,13.1 资源,13.1.7 教本管理脚本是 JavaScript 或 VBScript 文件。请注意，HTML 文件中的脚本（而不是独立的 JavaScript 或 VBScript 文件）不出现在“资源”面板中。可以双击将文件调入编辑场景进行编辑。,13.1 资源,13.1案例1：设计美眉相册,13.1 资源,步骤1：创建页面
15、，如图1310：,13.1 资源,步骤2：设计表格布局，如图1311：,13.1 资源,步骤3：从资源库中插入图片，如图1312,13.1 资源,步骤4：继续插入图片完成网页，如图1313,13.2模板,当需要制作大量布局基本一致的网页时，使用模板是最好的方法。下面我们将学习如何建立使用模板完成网页制作。,13.2模板,13.2.1 创建模板 可以从现有文档（如 HTML、Macromedia ColdFusion 或 Microsoft Active Server Pages 文档）中创建模板，或者从新建的空白文档中创建模板。 创建模板后，可以插入模板区域（请参见模板区域的类型）。您也可以为
16、代码颜色和模板区域高亮颜色设置模板首选参数（请参见为模板自定义代码颜色首选参数和设置模板区域的高亮显示首选参数）,13.2模板,（一）、创建模板步骤如下： 1、打开要另存为模板的文档。 2、文档打开时，选择“文件”“另存为模板”，如图1314所示：,13.2模板,3、从“站点”弹出菜单中选择一个用来保存模板的站点，并在“另存为”文本框中为模板输入一个唯一的名称。 单击“保存”.,13.2模板,Dreamweaver 将模板文件保存在站点的本地根文件夹中的 Templates 文件夹中，使用文件扩展名 .dwt。如果该 Templates 文件夹在站点中尚不存在，Dreamweaver 将在您保
17、存新建模板时自动创建该文件夹。 注意：不要将模板移动到 Templates 文件夹之外或者将任何非模板文件放在 Templates 文件夹中。此外，不要将 Templates 文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。,13.2模板,13.2.2 定义模板一、插入可编辑区域在插入可编辑区域之前，应该将您正在其中工作的文档另存为模板。如果您在文档（而不是模板文件）中插入一个可编辑区域，Dreamweaver 会警告您该文档将自动另存为模板。,13.2模板,操作步骤如下： 在“文档”窗口中，执行下列操作之一选择区域.,13.2模板,选择“插入”“模板对象”“可编辑区域”。出现
18、“新建可编辑区域”对话框.,13.2模板,在“名称”文本框中为该区域输入唯一的名称。（不能对特定模板中的多个可编辑区域使用相同的名称。不要在“名称”文本框中使用特殊字符。单击“确定”.,13.2模板,可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色。该区域左上角的选项卡显示该区域的名称。如果在文档中插入空白的可编辑区域，则该区域的名称会出现在该区域内部。 3、保存模板。,13.2模板,13.2案例1：网页制作教学网,13.2模板,步骤1：新建站点,13.2模板,步骤2：利用firework设计好网页总体效果，并进行切片（在firework课程讲解中有详细介绍）。
19、 步骤3：将生成的网页载入Dreamweaver 8中进行网页制作。 步骤4：将网页布局进行修改，将插入的图片改为图片背景.,13.2模板,13.2模板,步骤5：建立模板并设计可编辑区域 步骤6：利用模板新建网页.,13.2模板,步骤7：在新建的网页中进行内容的编辑。利用模板新建的网页，只有可编辑区域可以进行内容的填充.,13.2模板,步骤8：修改模板导航连接,13.2模板,步骤9：保存模板，这是会提示是否保存模板同时更新连接.,13.2模板,注：点击更新，将会更新所有通过模板生成的网页的公共部分连接。 步骤10：将模板另存为主页，这样才能将主页的连接进行更新。 步骤11：使用模板继续创建网页，并将详细内容添加进网页，为内容列表页面建立好相应的链接。 最终完成网站,资源由51知识库收集整理http:/,
