dreamweaver学习10-模板和库的应用

1、网页制作基础教程（Dreamweaver 8.0版）,葛艳玲主编,电子工业出版,ISBN7121028824,第10章模板、库的应用,本章重点：模板、库的创建、编辑、应用、修改，站点的更新。 难点：如何合理的设置和定义模板的可编辑区域。,第10章模板、库的应用,10.1 应用模板制作相似网页 10.2 模板的基本操作 10.3 库的应用 10.4 资源管理 10.5 实战演练,10.1应用模板制作相似网页,10.1.1 案例综述 本例通过模板设计出网页的整体风格、布局，当制作各个分页时，通过模板来创建，而当修改模板时，与之相链接的网页都将随之改变。,10.1应用模板制作相似网页,10.1.2

2、案例分析 在制作中，可利用模板来设计其相同部分，不同之处留为可编辑区域，待在具体制作网页时，再将具体内容填入可编辑区域。,可编辑区域,10.1应用模板制作相似网页,10.1.3 实现步骤 制作模板 基本元素的制作 创建可编辑区域 创建基于模板的网页文档 修改模板并更新,10.2 模板的基本操作,10.2.1 模板的基本特点 使用模板的好处在于： 1.可以生成大批的风格相近的网页。 2.一旦模板修改了，就修改了一批网页（自动更新）。,10.2 模板的基本操作,10.2.2 模板的创建与保存 1.模板的创建方法 方法一：通过菜单创建模板 步骤1在文件面板中选择要创建模板的站点。 步骤2选择【文件】

3、【新建】【常规】模板页，选择需创建的模板类型。单击【确定】，创建了一个空白模板 方法二：在【资源】面板创建模板 步骤1在文件面板中选择要创建模板的站点。 步骤2选择【窗口】【资源】命令，打开【资源】面板，选定面板左侧的【模板】按钮，单击“添加”按钮。 方法三：利用现成网页创建模板 步骤1打开欲做模板的网页。 步骤2选择【文件】【另存为模板】命令。,10.2 模板的基本操作,2、模板的保存 新建的模板文件会保存在本地站点的Templates文件夹中。 如果该Templates文件夹在站点中尙不存在，Dreamweaver 8将在保存新建模板时自动创建该文件夹。 模板文件的扩展名为.dwt。,10

4、.2 模板的基本操作,10.2.3 创建可编辑区域 可编辑模板区域控制基于模板的页面中的哪些区域可以编辑。设置可编辑区域，需要在制作模板的时候完成。 相似网页,完全一样部分（在模板中制作）,不同部分（设为可编辑区域）,设置可编辑区域的具体步骤如下： 步骤1在已创建的模板文件中，编辑网页，其布局、制作方法与普通网页完全一致。 步骤2将插入点放在想要插入可编辑区域的地方 步骤3在插入栏中选择【模板】，然后单击【可编辑区域】按钮。 步骤4在【新建可编辑区域】对话框中，输入该区域的名称,单击【确定】按钮,10.2 模板的基本操作,要点提示： 1.表格布局的模板定义可编辑区域时，可将整个表格或表格的某个

5、单元格定义为可编辑区域，但是不能同时将多个单元格定义为一个单独的可编辑区域。 2.层和层中的内容是不同的元素，当层设为可编辑区域时，在应用该模板编辑文档时，可改变层的位置和层中的内容。而将层的内容设为可编辑区域时，则只能改变层中的内容而不能改变层的位置。,10.2 模板的基本操作,10.2.4 创建基于模板的网页 方法一：用菜单方式 步骤1选择【文件】【新建】|【新建文档】|【模板】，选择新建的页面存放的站点及所用模板名称。 步骤2选中【当模板改变时更新页面】的复选框时，当模板被修改后，用此模板创建的网页也会被修改。 步骤3单击【创建】按钮，此时在网页编辑窗口建立了一个由模板生成的网页，设计者

6、可在可编辑区域输入相关内容。,10.2 模板的基本操作,10.2.4 创建基于模板的网页 方法二：用资源面板 步骤1首先新建页面，通过【窗口】菜单打开资源面板。 步骤2选择面板中的模板资源。 步骤3选中欲使用的模板，单击【应用】按钮；或将选中的模板拖到编辑窗口。应用模板文档在右上角会标明模板名称。 步骤4在应用了模板的文档的可编辑区域内编辑相关内容。,10.2 模板的基本操作,10.2 模板的基本操作,10.2.5 更新模板及页面 修改模板操作步骤： 步骤1选择【窗口】【资源】命令，打开资源面板，切换到【模板】资源。 步骤2选中要修改的模板后右击鼠标，在快捷菜单中选择【编辑】命令，或双击该模板

7、，便可打开要修改的模板. 步骤3在快捷菜单中选择【新建可编辑区域】【删除模板标记】以添加或删除可编辑区域。 步骤4模板修改完成后，选择【文件】【保存】命令，保存模板。,10.2 模板的基本操作,更新页面： 保存模板时，Dreamweaver 8会询问它是否更新所有附着到该模板的网页。 也可以使用【修改】【模板】【更新页面】命令。或【模板】资源窗口右上角的按钮，选择【更新站点】命令，Dreamweaver在该模板所在的站点中更新基于模板的所有网页文档。,10.3库的应用,库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法。这些元素称为库项目 使用库的意义

8、：如果使用了库，就可以通过改动库更新所有采用库的网页，不用一个一个的修改网页元素或者重新制作网页。使用库比使用模板，有更大的灵活性。,10.3库的应用,10.3.1 创建库项目 创建库项目的方式有两种： 选定内容创建为库项目。 创建一个空白库项目,10.3库的应用,选定内容创建为库项目 操作方法： 步骤1 选择【窗口】【资源】命令，出现“资源”面板，选择面板左侧的“库”类别。 步骤2 在“文档”窗口中，选择文档要另存为库项目的内容。 步骤3 将选定内容拖到“资源”面板的“库”类别中，或者单击“资源”面板的“库”类别底部的“新建库项目”按钮，一个库项目被创建，此时网页文档下方的属性检查器也变为“

9、库项目”检查器。 步骤4为新的库项目输入一个名称。,10.3库的应用,创建一个空白库项目 操作方法： 步骤1 选择【窗口】【资源】【库】 步骤2 在“资源”面板中，单击“库”类别底部的“新建库项目”按钮。 步骤3 一个新的库项目被添加到面板上的列表中。 步骤4 为新的库项目输入一个名称。 步骤5 双击该库项目，在文档窗口进行编辑。,10.3库的应用,10.3.2 插入库项目 操作方法： 步骤1 将文本光标定位于“文档”窗口中。 步骤2 在“资源”面板上选择面板左侧的“库”类别。 步骤3 将一个库项目从“资源”面板拖动到“文档”窗口中，或者选择一个库项目，然后单击面板底部的“插入”按钮。,10.

10、3库的应用,注意： 插入库项目后，会在“文档”窗口的下方出现“库项目”属性检查器，如图所示。,【从源文件分离】可以断开文档中的项目和库之间的链接，从而使文档中的库项目可编辑。,“库项目”属性检查器,10.3库的应用,10.3.3修改库项目和更新站点 当修改库项目时，可以更新使用该项目的所有文档。 1 修改库项目 步骤1选中页面中的库项目。 步骤2在属性面板中点击“打开”按钮。 步骤3修改库项目，修改完成之后保存。 步骤4在“更新库项目”对话框中点击“更新”按钮。 步骤5选择更新的范围，更新完成之后关闭。,10.3库的应用,10.3.3修改库项目和更新站点 2.更新整个站点或所有使用特定库项目的

11、文档： 选择【修改】【库】【更新页面】 3. 更改当前文档已使用所有库项目的当前版本 选择【修改】|【库】【更新当前页】,10.4 资源管理,利用【资源】面板的功能可以统一管理整个站点的资源，避免反复查找某些网页元素，能大大提高网页设计的效率，得到事半功倍的效果。 在【资源】面板中管理的几种对象分别是：【图像】、【颜色】、【超链接】、：【Flash】、【Shockwave】、【视频】、【脚本】、【模板】、【库】。,10.4 资源管理,选择【窗口】【资源】命令，或者直接按F10键，可打开【资源】面板。,10.4 资源管理,10.4.1 图像管理 【资源】面板能自动管理本地站点内的每一幅图像。 【

12、资源】面板可对本地站点内的图像完成插入、编辑和管理，其操作步骤如下: （1）打开图像资源：单击资源面板左侧的图像按钮，可进入【图像】窗口。 (2) 插入图像：把光标定位在网页编辑窗口的图像插入处，然后在图像列表中选中要插入的图像，单击【插入】即可插入的图像。 (3) 编辑图像：在图像列表中选中要编辑修改的图像，然后单击该面板底部的编辑按钮，启动Dreamweaver 8默认的图像编辑软件来对选中的图像进行编辑与修改。,10.4 资源管理,10.4.1 图像管理 (4)图片收藏夹： 添加：单击位于【资源】面板底端的【添加到收藏夹】按钮，可将图片收藏到收藏夹中。 查看：在【图像】管理窗口的顶端选择

13、【收藏】单选按钮，即可在图像列表栏中查看站点中的图片收藏情况。 删除：单击位于【资源】面板底部的【从收藏夹中删除】按钮后即可将图像从收藏夹中删除。,10.4 资源管理,10.4.2 颜色管理 打开资源面板：选择【窗口】【资源】命令，或者按F10键。 打开颜色资源：单击【资源】面板左侧的【颜色】按钮即可进入【颜色】管理窗口。 颜色收藏夹：单击位于【资源】面板顶端的【收藏】单选按钮，切换到颜色收藏夹列表。,10.4 资源管理,10.4.2 颜色管理 新建颜色：单击位于【颜色】管理窗口收藏夹底端的【新建颜色】按钮，此时鼠标变成吸管工具，在【颜色】管理窗口中吸取一种颜色就可以创建一种新的颜色类型，同时

14、在该颜色列表上面的窗口中显示具体的颜色值.可在颜色管理窗口中新建颜色。 编辑颜色:先在颜色类型列表中选中要修改的颜色，单击位于该面板底部的编辑按钮，对颜色进行编辑。 应用颜色：选中文本，选择【资源】面板的【颜色】管理窗口中要应用的颜色类型，单击位于该面板底端的【应用】按钮，或者直接把颜色类型拖曳到文本上即可完成文本颜色的设置。,10.4 资源管理,10.4.3超链接管理 打开资源面板：选择【窗口】【资源】命令，或者按F10键。 打开超链接资源：单击【资源】面板左侧的【超链接】按钮，即可进入【超链接】管理窗口。 超链接收藏夹：单击位于【资源】面板顶端的【收藏】单选按钮，切换到超链接收藏夹列表。,10.4 资源管理,10.4.3超链接管理 新建URL：在【超链接】管理窗口中，单击底端的【新建URL】按钮，系统显示【添加URL】对话框，输入要进行链接的URL地址或者输入路径和文件名，在【昵称】文本框中输人链接名称，完成后单击【确定】按钮便可创建一个新的超链接。 应用超链接：在【资源】面板的【超链接】管理窗口中，选中要应用的超链接，然后单击位