《实战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中对模板进行编辑、分割、如何将分割的图像储存为网页、如何在网页中进行调整生成自己的网页。,