Dreamweaver-CC网页设计与应用-(8课件.ppt

1、第8章 模板和库 本章简介：模板的功能就是把网页布局和内容分模板的功能就是把网页布局和内容分离，在布局设计好之后将其保存为模离，在布局设计好之后将其保存为模板。这样，相同的布局页面可以通过板。这样，相同的布局页面可以通过模板来创建，因此能够极大地提高工模板来创建，因此能够极大地提高工作效率。本章主要讲解模板和库的创作效率。本章主要讲解模板和库的创建方法和应用技巧，通过这些内容的建方法和应用技巧，通过这些内容的学习，可以使网站的更新、维护工作学习，可以使网站的更新、维护工作变得更加轻松。变得更加轻松。 课堂学习目标掌握创建和编辑模板的方法掌握创建和编辑模板的方法掌握管理模板的方法掌握管理模板的方

2、法掌握创建库的方法掌握创建库的方法掌握向页面添加库项目的方法掌握向页面添加库项目的方法8.1 模板 创建空模板创建空模板创建可编辑区域创建可编辑区域管理模板管理模板课堂案例课堂案例电子吉他网页电子吉他网页8.1.1 创建空模板 创建空白模板有以下几种方法。创建空白模板有以下几种方法。 在打开的文档窗口中单击在打开的文档窗口中单击“插入插入”面板面板“模板模板”选项卡选项卡中的中的“创建模板创建模板”按钮按钮 ，将当前文档转换为模板文档。，将当前文档转换为模板文档。 在在“资源资源”面板中单击面板中单击“模板模板”按钮按钮 ，此时列表为，此时列表为模板列表，如图模板列表，如图8-18-1所示。然

3、后单击下方的所示。然后单击下方的“新建模板新建模板”按按钮钮 ，创建空模板，此时新的模板添加到，创建空模板，此时新的模板添加到“资源资源”控制面板控制面板的的“模板模板”列表中，为该模板输入名称。列表中，为该模板输入名称。 在在“资源资源”面板的面板的“模板模板”列表中单击鼠标右键，在弹列表中单击鼠标右键，在弹出的菜单中选择出的菜单中选择“新建模板新建模板”命令。命令。8.1.2 创建可编辑区域 插入可编辑区域的具体操作步骤如下。插入可编辑区域的具体操作步骤如下。（1 1）打开文档。）打开文档。（2 2）将光标放置在要插入可编辑区域的位置里，在）将光标放置在要插入可编辑区域的位置里，在“插入插

4、入”面面板板“常用常用”选项卡中，单击选项卡中，单击“可编辑区域可编辑区域”按钮按钮 ，弹出，弹出“新建可新建可编辑区域编辑区域”对话框，在对话框，在“名称名称”文本框中输入可编辑区域的名称。文本框中输入可编辑区域的名称。（3 3）单击）单击“确定确定”按钮，在网页中即可插入可编辑区域。按钮，在网页中即可插入可编辑区域。（4 4）选择）选择“文件文件 另存为模板另存为模板”命令，弹出命令，弹出“另存模板另存模板”对话对话框，在对话框中的框，在对话框中的“另存为另存为”文本框中输入模板的名称，在文本框中输入模板的名称，在“站点站点”右侧的下拉列表中选择保存的站点。右侧的下拉列表中选择保存的站点。

5、（5 5）单击）单击“保存保存”按钮，即可将该文件保存为模板。按钮，即可将该文件保存为模板。 8.1.3 管理模板 1 1删除模板删除模板若要删除模板文件，具体操作步骤如下。若要删除模板文件，具体操作步骤如下。（1 1）在）在“资源资源”面板中选择面板右侧的面板中选择面板右侧的“模板模板”按钮按钮 。（2 2）重命名单击模板的名称以选择该模板。）重命名单击模板的名称以选择该模板。（3 3）单击面板底部的）单击面板底部的“删除删除”按钮按钮 ，然后，然后确认要删除该模板。确认要删除该模板。2 2修改模板文件修改模板文件当更改模板时，当更改模板时，Dreamweaver Dreamweaver 将

6、提示更新基于该模板的文档，具体将提示更新基于该模板的文档，具体操作步骤如下。操作步骤如下。（1 1）在）在“资源资源”面板中，选择面板左侧的面板中，选择面板左侧的“模板模板”按钮按钮 。（2 2）在可用模板列表中，执行下列操作之一。）在可用模板列表中，执行下列操作之一。双击要编辑的模板名称。选择要编辑的模板，然后单击面板底部的“编辑”按钮 。模板在文档窗口中打开。（3 3）根据需要修改模板的内容。）根据需要修改模板的内容。8.1.4 课堂案例电子吉他网页使用使用“创建模板创建模板”按钮创建模板；使用按钮创建模板；使用“可编辑区域可编辑区域”制作可编辑制作可编辑区域效果。区域效果。 效果图8.2

7、 库 创建库文件创建库文件向页面添加库项目向页面添加库项目课堂案例课堂案例律师事务所网页律师事务所网页8.2.1 创建库文件 库项目可以包含文档库项目可以包含文档部分中的任意元素，包括文本、部分中的任意元素，包括文本、表格、表单、表格、表单、Java appletJava applet、插件、插件、ActiveXActiveX元素、导航条、图元素、导航条、图像等。库项目只是一个对网页元素的引用，原始文件必须保存像等。库项目只是一个对网页元素的引用，原始文件必须保存在指定的位置上。在指定的位置上。1 1基于选定内容创建库项目基于选定内容创建库项目2 2创建空白库项目创建空白库项目 8.2.2 向

8、页面添加库项目 当向页面添加库项目时，将把实际内容以及对该库项目的引当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入到文档中。此时，无需提供原项目就可以正常显示。用一起插入到文档中。此时，无需提供原项目就可以正常显示。在页面中插入库项目的具体操作步骤如下。在页面中插入库项目的具体操作步骤如下。（1 1）将插入点放在文档窗口中的合适位置。）将插入点放在文档窗口中的合适位置。（2 2）选择）选择“窗口窗口 资源资源”命令，启用命令，启用“资源资源”控制面板。控制面板。单击单击“库库”按钮按钮 ，进入，进入“库库”面板，将库项目插入到网页中。面板，将库项目插入到网页中。将库项目插入到网

9、页有以下几种方法。将库项目插入到网页有以下几种方法。将一个库项目从将一个库项目从“库库”面板拖曳到文档窗口中。面板拖曳到文档窗口中。在在“库库”面板中选择一个库项目，然后单击面板底部的面板中选择一个库项目，然后单击面板底部的“插插入入”按钮按钮 。8.2.3 课堂案例律师事务所网页使用使用“库库”面板添加库项目；使用库中面板添加库项目；使用库中注册的项目制作网页文档。注册的项目制作网页文档。效果图课堂练习建达康集团网页 使用使用“创建模板创建模板”按钮，将其创建为模板；使用按钮，将其创建为模板；使用“可编辑区域可编辑区域”按按钮，制作可编辑区域效果。钮，制作可编辑区域效果。 效果图课后习题爱家纺网页 使用使用“库库”面板添加库项目；使用库中面板添加库项目；使用库中注册的项目制作网页文档。注册的项目制作网页文档。效果图