第11章模板和库的应用

1、网页设计（网页设计（DreamweaverDreamweaver CS5 CS5）电子教案电子教案第第1 12 2章利用模板和库创建网页章利用模板和库创建网页 本章重点：模板、库的创建、编辑、本章重点：模板、库的创建、编辑、应用、修改，站点的更新。应用、修改，站点的更新。 难点：如何合理的设置和定义模板难点：如何合理的设置和定义模板的可编辑区域。的可编辑区域。网页设计网页设计应用模板制作相似网页应用模板制作相似网页案例综述案例综述 本例通过模板本例通过模板设计出网页的整体设计出网页的整体风格、布局，当制风格、布局，当制作各个分页时，通作各个分页时，通过模板来创建，而过模板来创建，而当修改模板时

2、，与当修改模板时，与之相链接的网页都之相链接的网页都将随之改变。将随之改变。 网页设计网页设计应用模板制作相似网页应用模板制作相似网页案例分析案例分析 在制作中，可利用模板来设计其相同部分，不同之处留在制作中，可利用模板来设计其相同部分，不同之处留为可编辑区域和可重复区域，待在具体制作网页时，再将具为可编辑区域和可重复区域，待在具体制作网页时，再将具体内容填入可编辑区域和可重复区域。体内容填入可编辑区域和可重复区域。 重复区域重复区域可编辑区域可编辑区域网页设计网页设计应用模板制作相似网页应用模板制作相似网页实现步骤实现步骤 1.1.制作模板制作模板 1)1)基本元素的制作基本元素的制作 2)

3、2)插入模板区域插入模板区域n创建可编辑区域创建可编辑区域n创建重复区域创建重复区域2.2.创建基于模板的网页文档创建基于模板的网页文档 3.3.修改模板并更新修改模板并更新 网页设计网页设计模板的基本操作模板的基本操作模板的基本特点模板的基本特点使用模板的好处在于：使用模板的好处在于：1.1.可以生成大批的风格相近的网页。可以生成大批的风格相近的网页。2.2.一旦模板修改了，就修改了一批网页（自动一旦模板修改了，就修改了一批网页（自动更新）。更新）。网页设计网页设计模板的基本操作模板的基本操作模板的创建与保存模板的创建与保存1.1.模板的创建方法模板的创建方法方法一：方法一：通过菜单创建模板

4、通过菜单创建模板 1.1.在文件面板中选择要创建模板的站点。在文件面板中选择要创建模板的站点。2.2.选择【文件】【新建】【常规】模板选择【文件】【新建】【常规】模板页，选择需创建的模板类型。单击【确定】，页，选择需创建的模板类型。单击【确定】，创建了一个空白模板创建了一个空白模板 网页设计网页设计11.2 11.2 模板的基本操作模板的基本操作11.2.2 11.2.2 模板的创建与保存模板的创建与保存1.1.模板的创建方法模板的创建方法方法二：方法二：在【资源】面板创建模板在【资源】面板创建模板1.1.在文件面板中选择要创建模板的站点。在文件面板中选择要创建模板的站点。2.2.选择【窗口】

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

6、在站点中尙不存在，文件夹在站点中尙不存在，DreamweaverDreamweaver CS4 CS4将在保存新建模板时自动创将在保存新建模板时自动创建该文件夹。建该文件夹。n模板文件的扩展名为模板文件的扩展名为. .dwtdwt。网页设计网页设计11.2 11.2 模板的基本操作模板的基本操作11.2.3 创建模板区域创建模板区域 1.1.创建可编辑区域创建可编辑区域n可编辑模板区域控制基于模板的页面中的可编辑模板区域控制基于模板的页面中的哪些区域可以编辑。设置可编辑区域，需哪些区域可以编辑。设置可编辑区域，需要在制作模板的时候完成。要在制作模板的时候完成。 n相似网页相似网页 n完全一样部

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

8、域】对话框中，输入该区域的名称入该区域的名称, ,单击【确定】按钮单击【确定】按钮11.2 11.2 模板的基本操作模板的基本操作网页设计网页设计要点提示：要点提示：1.1.表格布局的模板定义可编辑区域时，可将整表格布局的模板定义可编辑区域时，可将整个表格或表格的某个单元格定义为可编辑区个表格或表格的某个单元格定义为可编辑区域，但是不能同时将多个单元格定义为一个域，但是不能同时将多个单元格定义为一个单独的可编辑区域。单独的可编辑区域。2.2.APAP元素和元素和APAP元素中的内容是不同的元素，当元素中的内容是不同的元素，当APAP元素设为可编辑区域时，在应用该模板编元素设为可编辑区域时，在应

9、用该模板编辑文档时，可改变辑文档时，可改变APAP元素的位置和元素的位置和APAP元素中元素中的内容。而将的内容。而将APAP元素的内容设为可编辑区域元素的内容设为可编辑区域时，则只能改变时，则只能改变APAP元素中的内容而不能改变元素中的内容而不能改变APAP元素的位置。元素的位置。11.2 11.2 模板的基本操作模板的基本操作网页设计网页设计11.2 11.2 模板的基本操作模板的基本操作11.2.3 创建模板区域创建模板区域 2.2.创建可重复区域创建可重复区域n重复区域是可以根据需要在基于模板的页重复区域是可以根据需要在基于模板的页面中复制任意次数的模板部分。面中复制任意次数的模板部

10、分。n重复区域通常用于表格；但是，也可以为重复区域通常用于表格；但是，也可以为其他页面元素定义重复区域。其他页面元素定义重复区域。 网页设计网页设计11.2 11.2 模板的基本操作模板的基本操作11.2.3 创建模板区域创建模板区域 2.2.创建可重复区域创建可重复区域n在模板中插入重复区域的操作步骤：在模板中插入重复区域的操作步骤： 选择想要设置为重复区域的文本或内容。选择想要设置为重复区域的文本或内容。 选择选择“插入插入”|“|“模板对象模板对象”|“|“重复区域重复区域”。出现。出现“新建重复区域新建重复区域”对话框。对话框。 在在“名称名称”文本框中为模板区域输入唯一的名称。文本框

11、中为模板区域输入唯一的名称。 单击单击“确定确定”。 重复区域被插入到模板中重复区域被插入到模板中。 网页设计网页设计11.2 11.2 模板的基本操作模板的基本操作11.2.3 创建模板区域创建模板区域 3.3.修改模板区域修改模板区域在在“文档文档”窗口中，选择区域选项卡。窗口中，选择区域选项卡。 选择选择“修改修改”|“|“模板模板”|“|“删除模板标记删除模板标记”。 对于对于“可选区域可选区域”，在选中其标识后，在，在选中其标识后，在“属性属性”面板中单击面板中单击“编辑编辑”按钮进行修改。按钮进行修改。 网页设计网页设计11.2.4 11.2.4 创建基于模板的网页创建基于模板的网

12、页1.1.使用菜单方式使用菜单方式选择【文件】【新建】选择【文件】【新建】| |【新建文档】【新建文档】| |【模板】，【模板】，选择新建的页面存放的站点及所用模板名称。选择新建的页面存放的站点及所用模板名称。选中【当模板改变时更新页面】的复选框时，当模板选中【当模板改变时更新页面】的复选框时，当模板被修改后，用此模板创建的网页也会被修改。被修改后，用此模板创建的网页也会被修改。单击【创建】按钮，此时在网页编辑窗口建立了一个单击【创建】按钮，此时在网页编辑窗口建立了一个由模板生成的网页，设计者可在可编辑区域输入相关由模板生成的网页，设计者可在可编辑区域输入相关内容。内容。11.2 11.2 模

13、板的基本操作模板的基本操作网页设计网页设计11.2.4 11.2.4 创建基于模板的网页创建基于模板的网页2.2.使用资源面板使用资源面板首先新建页面，通过【窗口】菜单打开资源面板首先新建页面，通过【窗口】菜单打开资源面板选择面板中的模板资源。选择面板中的模板资源。选中欲使用的模板，单击【应用】按钮；或将选中的模选中欲使用的模板，单击【应用】按钮；或将选中的模板拖到编辑窗口。应用模板文档在右上角会标明模板名板拖到编辑窗口。应用模板文档在右上角会标明模板名称。称。在应用了模板的文档的可编辑区域内编辑相关内容。在应用了模板的文档的可编辑区域内编辑相关内容。11.2 11.2 模板的基本操作模板的基

14、本操作网页设计网页设计11.2 11.2 模板的基本操作模板的基本操作11.2.5 11.2.5 更新模板及页面更新模板及页面1.1.修改模板修改模板选择【窗口】【资源】命令，打开资源面板，切换到选择【窗口】【资源】命令，打开资源面板，切换到【模板】资源。【模板】资源。选中要修改的模板后右击鼠标，在快捷菜单中选择【编选中要修改的模板后右击鼠标，在快捷菜单中选择【编辑】命令，或双击该模板，便可打开要修改的模板辑】命令，或双击该模板，便可打开要修改的模板. .在快捷菜单中选择【新建可编辑区域】在快捷菜单中选择【新建可编辑区域】【删除模板标【删除模板标记】以添加或删除可编辑区域记】以添加或删除可编辑

15、区域模板修改完成后，选择【文件】【保存】命令，保存模板修改完成后，选择【文件】【保存】命令，保存模板。模板。网页设计网页设计11.2 11.2 模板的基本操作模板的基本操作2.2.更新页面：更新页面：n保存模板时，保存模板时，DreamweaverDreamweaver CS4 CS4会询问它会询问它是是否更新否更新所有附着到该模板的网页。所有附着到该模板的网页。n也可以使用也可以使用【修改】【模板】【更新页【修改】【模板】【更新页面】面】命令。或【模板】资源窗口右上角的按命令。或【模板】资源窗口右上角的按钮，选择【更新站点】命令，钮，选择【更新站点】命令，DreamweaverDreamwe

16、aver在该模板所在的站点中更新基于模板的所有在该模板所在的站点中更新基于模板的所有网页文档。网页文档。 网页设计网页设计11.311.3库的应用库的应用 库库是一种用来存储想要在整个网站上经常重复使是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）用或更新的页面元素（如图像、文本和其他对象）的方法。这些元素称为库项目的方法。这些元素称为库项目 使用库的意义使用库的意义：如果使用了库，就可以通过改动：如果使用了库，就可以通过改动库更新所有采用库的网页，不用一个一个的修改库更新所有采用库的网页，不用一个一个的修改网页元素或者重新制作网页。使用库比使用模板，网页元

17、素或者重新制作网页。使用库比使用模板，有更大的灵活性。有更大的灵活性。 网页设计网页设计11.311.3库的应用库的应用11.3.111.3.1 创建库项目创建库项目创建库项目的方式有两种：创建库项目的方式有两种： 1.1.选定内容创建为库项目。选定内容创建为库项目。2.2.创建一个空白库项目创建一个空白库项目 网页设计网页设计11.311.3库的应用库的应用1.1.将选定内容创建为库项目将选定内容创建为库项目 步骤步骤：1.1.选择【窗口】【资源】命令，出现选择【窗口】【资源】命令，出现“资源资源”面板，面板，选择面板左侧的选择面板左侧的“库库”类别。类别。2.2.在在“文档文档”窗口中，选

18、择文档要另存为库项目的内窗口中，选择文档要另存为库项目的内容。容。3.3.将选定内容拖到将选定内容拖到“资源资源”面板的面板的“库库”类别中，或类别中，或者单击者单击“资源资源”面板的面板的“库库”类别底部的类别底部的“新建库新建库项目项目”按钮，一个库项目被创建，此时网页文档下按钮，一个库项目被创建，此时网页文档下方的属性检查器也变为方的属性检查器也变为“库项目库项目”检查器。检查器。4.4.为新的库项目输入一个名称。为新的库项目输入一个名称。网页设计网页设计11.311.3库的应用库的应用2.2.创建一个空白库项目创建一个空白库项目步骤：步骤：1.1.选择【窗口】【资源】选择【窗口】【资源

19、】【库】【库】2.2.在在“资源资源”面板中，单击面板中，单击“库库”类别底类别底部的部的“新建库项目新建库项目”按钮。按钮。3.3.一个新的库项目被添加到面板上的列表一个新的库项目被添加到面板上的列表中。中。4.4.为新的库项目输入一个名称。为新的库项目输入一个名称。5.5.双击该库项目，在文档窗口进行编辑。双击该库项目，在文档窗口进行编辑。网页设计网页设计11.311.3库的应用库的应用11.3.2 11.3.2 插入库项目插入库项目步骤：步骤：1.1.将文本光标定位于将文本光标定位于“文档文档”窗口中。窗口中。2.2.在在“资源资源”面板上选择面板左侧的面板上选择面板左侧的“库库”类别。

20、类别。3.3.将一个库项目从将一个库项目从“资源资源”面板拖动到面板拖动到“文档文档”窗口窗口中，或者选择一个库项目，然后单击面板底部的中，或者选择一个库项目，然后单击面板底部的“插入插入”按钮。按钮。网页设计网页设计11.311.3库的应用库的应用注意：注意：插入库项目后，会在插入库项目后，会在“文档文档”窗口的下方出现窗口的下方出现“库项目库项目”属性检查器，如图所示。属性检查器，如图所示。n【从源文件分离】可以断开文档中的项目和库【从源文件分离】可以断开文档中的项目和库之间的链接，从而使文档中的库项目可编辑。之间的链接，从而使文档中的库项目可编辑。“库项目库项目”属性检查器属性检查器网页

21、设计网页设计11.311.3库的应用库的应用11.3.311.3.3修改库项目和更新站点修改库项目和更新站点当修改库项目时，可以更新使用该项目的所有文当修改库项目时，可以更新使用该项目的所有文档。档。1 1 修改库项目修改库项目n步骤步骤1 1 选中页面中的库项目。选中页面中的库项目。n步骤步骤2 2在属性面板中点击在属性面板中点击“打开打开”按钮。按钮。n步骤步骤3 3修改库项目，修改完成之后保存。修改库项目，修改完成之后保存。n步骤步骤4 4在在“更新库项目更新库项目”对话框中点击对话框中点击“更更新新”按钮。按钮。n步骤步骤5 5选择更新的范围，更新完成之后关闭。选择更新的范围，更新完成

22、之后关闭。 网页设计网页设计11.311.3库的应用库的应用11.3.311.3.3修改库项目和更新站点修改库项目和更新站点2.2.更新整个站点或所有使用特定库项目的文档更新整个站点或所有使用特定库项目的文档：选择【修改】【库】【更新页面】选择【修改】【库】【更新页面】3. 3. 更改当前文档已使用所有库项目的当前版本更改当前文档已使用所有库项目的当前版本选择【修改】选择【修改】| |【库】【更新当前页】【库】【更新当前页】 网页设计网页设计11.4 11.4 资源管理资源管理 作用作用n利用【资源】面板的功能可以统一管理整个站利用【资源】面板的功能可以统一管理整个站点的资源，避免反复查找某些

23、网页元素，能大点的资源，避免反复查找某些网页元素，能大大提高网页设计的效率，得到事半功倍的效果。大提高网页设计的效率，得到事半功倍的效果。【资源】面板管理对象：【资源】面板管理对象：n【图像】【图像】n【颜色】【颜色】n【超链接】【超链接】n【FlashFlash】n【Shockwave】n【视频】视频】n【脚本】【脚本】n【模板】【模板】n【库】【库】网页设计网页设计11.4 11.4 资源管理资源管理 选择【窗口】【资源】命令，或者直接按选择【窗口】【资源】命令，或者直接按F10F10键，键，可打开【资源】面板。可打开【资源】面板。 图像管理颜色管理链接管理Flash管理Shockwave

24、管理视频管理脚本管理模板管理库管理网页设计网页设计11.4 11.4 资源管理资源管理 11.4.1 11.4.1 图像管理图像管理 【资源】面板能自动管理本地站点内的每一幅图像。【资源】面板能自动管理本地站点内的每一幅图像。【资源】面板可对本地站点内的图像完成插入、编【资源】面板可对本地站点内的图像完成插入、编辑和管理，其操作步骤如下辑和管理，其操作步骤如下: : （1 1）打开打开 图像图像 资源：资源：单击单击 资源资源 面板左侧的图面板左侧的图像按钮，可进入【图像】窗口。像按钮，可进入【图像】窗口。 ( (2 2) ) 插入图像：插入图像：把光标定位在网页编辑窗口的图把光标定位在网页编

25、辑窗口的图像插入处，然后在图像列表中选中要插入的图像，像插入处，然后在图像列表中选中要插入的图像，单击【插入】即可插入的图像。单击【插入】即可插入的图像。 ( (3 3) ) 编辑图像：编辑图像：在图像列表中选中要编辑修改的在图像列表中选中要编辑修改的图像，然后单击该面板底部的编辑按钮，启动图像，然后单击该面板底部的编辑按钮，启动DreamweaverDreamweaver CS4 CS4默认的图像编辑软件来对选中的图默认的图像编辑软件来对选中的图像进行编辑与修改。像进行编辑与修改。网页设计网页设计11.4 11.4 资源管理资源管理 11.4.1 11.4.1 图像管理图像管理 (4)(4)

26、图片收藏夹：图片收藏夹：n添加：添加：单击位于【资源】面板底端的【添单击位于【资源】面板底端的【添加到收藏夹】按钮，可将图片收藏到收藏加到收藏夹】按钮，可将图片收藏到收藏夹中。夹中。n查看：查看：在【图像】管理窗口的顶端选择在【图像】管理窗口的顶端选择【收藏】单选按钮，即可在图像列表栏中【收藏】单选按钮，即可在图像列表栏中查看站点中的图片收藏情况。查看站点中的图片收藏情况。n删除：删除：单击位于【资源】面板底部的【从单击位于【资源】面板底部的【从收藏夹中删除】按钮后即可将图像从收藏收藏夹中删除】按钮后即可将图像从收藏夹中删除。夹中删除。 网页设计网页设计11.4 11.4 资源管理资源管理 1

27、1.4.2 11.4.2 颜色管理颜色管理 1.1.打开打开 资源资源 面板面板：选择【窗口】【资源】命：选择【窗口】【资源】命令，或者按令，或者按F10F10键。键。2.2.打开打开 颜色颜色 资源：资源：单击【资源】面板左侧的单击【资源】面板左侧的【颜色】按钮即可进入【颜色】管理窗口。【颜色】按钮即可进入【颜色】管理窗口。3.3.颜色收藏夹：颜色收藏夹：单击位于【资源】面板顶端的单击位于【资源】面板顶端的【收藏】单选按钮，切换到颜色收藏夹列表。【收藏】单选按钮，切换到颜色收藏夹列表。 网页设计网页设计11.4 11.4 资源管理资源管理 11.4.2 11.4.2 颜色管理颜色管理 4.4

28、.新建颜色新建颜色：单击位于【颜色】管理窗口收藏夹底：单击位于【颜色】管理窗口收藏夹底端的【新建颜色】按钮，此时鼠标变成吸管工具，端的【新建颜色】按钮，此时鼠标变成吸管工具，在【颜色】管理窗口中吸取一种颜色就可以创建在【颜色】管理窗口中吸取一种颜色就可以创建一种新的颜色类型，同时在该颜色列表上面的窗一种新的颜色类型，同时在该颜色列表上面的窗口中显示具体的颜色值口中显示具体的颜色值. .可在可在 颜色颜色 管理窗口中新管理窗口中新建颜色。建颜色。5.5.编辑颜色编辑颜色: :先在颜色类型列表中选中要修改的颜色，先在颜色类型列表中选中要修改的颜色，单击位于该面板底部的编辑按钮，对颜色进行编单击位于该面板底部的编辑按钮，对颜色进行编辑。辑。6.6.应用颜色应用颜色：选中文本，选择【资源】面板的【颜：选中文本，选择【资源】面板的【颜色】管理窗口中要应用的颜色类型，单击位于该色】管理窗口中要应用的颜色类型，单击位于该面板底端的【应用】按钮，或者直接把颜色类型面板底端的【应用】按钮，或者直接把颜色类型拖曳到文本上即可完成文本颜色的设置。拖曳到文本上即可完成文本颜色的设置。 网页设计网页设计