《实战Dreamweaver8网页制作教程 教学课件 ppt 作者 刘天真 第9章 模板和库》由会员分享，可在线阅读，更多相关《实战Dreamweaver8网页制作教程 教学课件 ppt 作者 刘天真 第9章 模板和库（16页珍藏版）》请在金锄头文库上搜索。
1、学习目标,了解资源面板的构成。 能够创建、编辑模板，并利用模板创建网页。 能够建立库项目并使用库项目编辑网页。,9.1 模板的建立与应用 9.2 库的建立与应用 9.3 实战演练：商业网站模板的应用,本章内容,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,通过本案例的操作，你将学会：如何创建模板、如何建立与取消模板可编辑区域、如何使用模板创建网页,9.1 模板的建立与应用,9.1.2 新知解析,1. 资源面板 资源面板的调出：单击“窗口”“资源”命令或按F11键。 资源包括存储在站点中的各种元素，如图像或影片文件。 “资源”面板提供了两种查看资源的方式： “站点”列表显示
2、站点的所有资源。 “收藏”列表仅显示您明确选择的资源。 在这两个列表中，资源被分成九类，显示在“资源”面板的左侧。,2.模板 在Dreamweaver中，模板文件最显著的特征存在可编辑区域和锁定区域两部分之分。锁定区域是用来锁定网站风格部分，是相对固定、不可改变的；可编辑区域是用来定义网页具体内容部分。当使用模板建立网页时，用户只能编辑可编辑区域，而在网站的维护中，可以将网站的内容与风格分开控制，使网站的维护变得简单。 模板实际上也是一种文档，它的扩展名为.dwt，存放在站点目录下的Templates文件夹中，如果该文件夹在站点中尚不存在，则Dreamweaver将在保存新建模板时自动创建。,
3、9.1 模板的建立与应用,3. 模板的创建 建立模板可以有三种方法：首先建立一个普通的页面，制作完成后保存为模板。在“新建文件”对话框中选择“模板页”来建立。在“资源”面板中选择“模板”界面，点击右下角的“新建模板”按钮创建。 在创建模板时，除了建立可编辑区域外，还可以添加可选区、重复区和重复表格。 嵌套模板。嵌套模板其实就是利用另一个模板再创建的模板，在新的模板中，可以对基础模板中定义的可编辑区作进一步的定义。,9.1 模板的建立与应用,9.1 模板的建立与应用,4. 通过更新模板来更新网页 通过模板创建网页可以方便快捷的建立格式相同的一组网页，而在网页的维护中，如果需要修改该组网页的共同部
4、分，则可以通过更新模板来更新本组网页。,9.1 模板的建立与应用,9.1.3技巧提示 利用模板可以方便的创建和维护一组格式相同，内容不同的网页，对于有的格式相近的网页，我们也可以利用现成的模板创建，然后使网页与模板相脱离，使之成为一个独立的网页，这样即可以利用模板快速生成网页的格式，又可以脱离模板的限制，用户可以对其进行自由的编辑。 1.创建模板并利用模板生成网页。 2. 使模板与文件脱离。选择“修改” “模板”“从模板中分离”命令，网页与模板脱离，成为独立的网页，空白可编辑区域名称变为一般文本。,9.1 模板的建立与应用,3. 管理模板 使用“资源”面板的“模板”类别可以管理现有模板，包括重
5、命名模板文件和删除模板文件。 （1）在“资源”面板中重命名模板： 1）在“资源”面板（“窗口” “资源”）中，选择面板左侧的“模板”类别。 2）选择要要修改的模板,再次单击模板的名称,然后输入一个新名称。 3）在“资源”面板中的另一个区域中单击，或者按 Enter 键使更改生效。 4）Dreamweaver 将询问是否要更新基于此模板的文档。若要更新站点中所有基于此模板的文档，请单击“更新”。如果不想更新基于此模板的任何文档，则单击“不更新”。 （2）在“资源”面板中删除模板文件： 1）在“资源”面板（“窗口” “资源”）中，选择面板左侧的“模板”类别。 2）单击模板的名称以选择该模板。 3）
6、单击面板底部的“删除”按钮，然后确认要删除该模板。,9.1 模板的建立与应用,9.1.4 实战演练：通过更新模板来更新网页 操作步骤： 将光标置于“精彩射门集锦”一栏内，选择“修改” “模板”“删除模板标志”命令，将“精彩射门集锦”一栏修改为锁定区域，修改“精彩射门集锦”一栏的内容。 选择“文件” “保存”命令，弹出“更新模板文件”对话框。 选择需要更新的网页，单击“更新”，弹出“更新页面”对话框(如图所示)，单击完成，即可对所选网页完成更新。,9.2 库的建立与应用,9.2.1 案例制作：利用库修改站点导航,9.2 库的建立与应用,2. 修改库项目 在“资源”面板中双击库项目“zddh”，打
7、开该项目，进行编辑。编辑完成后，进行保存，打开“更新库项目”对话框，单击“更新”按钮完成。 3.在文档中插入库项目 将光标定位在需要插入库项目的位置，选择库项目，单击资源面板下方的按钮，如图所示，即可插入库项目。,9.2 库的建立与应用,9.2.2 新知解析,1. 创建库项目 创建库项目可以直接创建，也可以将网页上的元素直接转换为库项目文件，方法如下： 1）打开“qiuyuan”模板，选取“站点导航”，打开资源面板并切换到显示库项目资源的状态下，单击资源面板下方的新建库项目，可将选中的元素加入到资源面板中，原区域高亮显示。 2）在库资源中为新增的库项目取名为”zddh”，完成后Dreamwea
8、ver会在站点下新建一个Library文件夹，并将库项目保存在该文件夹中。,9.2 库的建立与应用,2. 编辑库项目 项目应用到网页上之后，在网页上是不能编辑的，如果想要编辑库项目，操作步骤如下： 1）先打开资源面板的库项目显示状态，选中要编辑的库项目，单击资源面板下方的按钮，即可将库项目的原始文件调出。 2）修改完成后，选择“文件” “保存”命令，保存库项目，如果该项目应用在其他网页里，会弹出“更新库项目”对话框。 3）单击“更新”按钮，选中的网页会自动更新，更新完成后，会出现一个“更新网页”对话框，说明更新情况。,9.2 库的建立与应用,3.使文档中的库项目可编辑 库项目添加到文档后，如希望专门针对该页编辑此项目，则必须断开文档中的项目和库之间的链接。在使库项目的实例可编辑之后，当库项目发生更改时不会更新该实例。 操作步骤： 1）在当前文档中选择库项目。 2）在“属性”窗口中，单击“从源文件中分离”按钮。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,通过本案例的操作，你将学会：如何在Photoshop中对模板进行编辑、分割、如何将分割的图像储存为网页、如何在网页中进行调整生成自己的网页。,
