网页制作Dreamweaver CS4 - 8、使用库和模板

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,第,8,讲 使用库和模板创建网页,教学目标,8.1,使用库,8.1.1,功能讲解,8.1.2,范例解析,使用库制作“美图欣赏”网页,8.1.3,课堂实训,将页面元素转换为库项目,8.2,使用模板,8.2.1,功能讲解,8.2.2,范例解析,使用模板制作“世界名瀑”网页,8.2.3,课堂实训,制作“一翔学校”网页模板,8.3,综合案例,使用库和模板创建网页和文件,教学目标,了解库和模板的概念。,掌握创建和应用库的方法。,掌握创建和应用模板的方法。,返回目录,8.1,使用库,8.1.1,功能讲解,8.1.2,范例解析,使用库制作“美图欣赏”网页,8.1.3,课堂实训,将页面元素转换为库项目,返回目录,8.1.1,功能讲解,在网页制作中，有时需要将一些网页元素应用在多个页面内。当要修改这些重复使用的页面元素时，逐页修改相当费时，但如果使用库功能则可以解决这个问题。,库是一种特殊的,Dreamweaver,文件，可以,用来存放诸如文本、图像等网页元素，这些元素通常被广泛用于整个站点，并且经常被重复使用或更新。在创建库项目时将自动生成,库文件夹,“,Library”,，用于存放库项目，不能对其进行修改。,创建库项目。,应用库项目。,修改库项目。,更新应用了库项目的文档。,从源文件中分离库项目。,删除库项目。,返回目录,一、创建库项目,创建库项目的方法有两种。,创建空白库项目。,创建基于选定内容的库项目。,返回目录,（,1,）创建空白库项目,创建空白库项目的方法是，选择,【,窗口,】/【,资源,】,命令打开,【,资源,】,面板，单击 （库）按钮切换至,【,库,】,分类，单击,【,资源,】,面板右下角的 （新建库项目）按钮新建一个库项目，然后在列表框中输入库项目的名称并按,Enter,键确认，如图所示。此时的库项目还是一个空白库项目，是没有实际意义的，还需要通过单击面板底部的 （编辑）按钮打开库项目添加内容。,返回目录,（,2,）创建基于选定内容的库项目,也可以将网页中现有的对象元素转换为库文件。方法是，在页面中选择要转换的内容，然后选择,【,修改,】/【,库,】/【,增加对象到库,】,命令，将选中的内容转换为库项目，并显示在,【,库,】,列表中，最后输入库名称并确认即可，如图所示。,返回目录,二、应用库项目,库项目是可以在多个页面中重复使用的页面元素。应用库项目的方法是，,单击,【,资源,】,面板底部的 按钮（或者单击鼠标右键，在弹出的快捷菜单中选择,【,插入,】,命令），将库项目插入到当前网页文档中。,在使用库项目时，,Dreamweaver,不是向网页中直接插入库项目，而是插入一个库项目链接，通过,【,属性,】,面板中的“,Src/Library/ruishi.lbi”,可以清楚地说明这一点，如图所示。,返回目录,三、修改库项目,库项目创建以后，根据需要适时地修改其内容是不可避免的。如果要修改库项目，需要直接打开库项目进行修改。方法是，在,【,资源,】,面板的库项目列表中双击库项目，或先选中库项目再单击面板底部的 按钮打开库项目，也可以在引用库项目的网页中选中库项目，然后在,【,属性,】,面板中单击 按钮打开库项目。,返回目录,四、更新应用了库项目的文档,在库项目被修改且保存后，通常引用该库项目的网页会进行自动更新。如果没有进行自动更新，可以选择,【,修改,】/【,库,】/【,更新当前页,】,命令，对应用库项目的当前网页进行更新，或选择,【,更新页面,】,命令，打开,【,更新页面,】,对话框，进行参数设置后更新相关页面，如图所示。,返回目录,五、从源文件中分离库项目,一旦在网页文档中应用了库项目，如果希望其成为网页文档的一部分，这就需要将库项目从源文件中分离出来。方法是，在当前网页中选中库项目，然后在,【,属性,】,面板中单击 按钮，在弹出的信息提示框中单击 按钮，,将库项目的内容与库文件,分离，如图所示。分离后，就可以对这部分内容进行编辑了，因为它已经是网页的一部分，与库项目再没有联系。,返回目录,六、删除库项目,如果要删除库项目，方法是，打开,【,资源,】,面板并切换至,【,库,】,分类，在库项目列表中选中要删除的库项目，单击,【,资源,】,面板右下角的 按钮或直接在键盘上按,Delete,键即可。如果删除一个库项目，将无法进行恢复，所以应特别小心。,返回目录,8.1.2,范例解析使用库制作“美图欣赏”网页,首先将“范例解析,素材,第,8,讲,8-1-2images”,文件夹复制到站点根文件夹下，然后创建两个库项目“,head.lbi”,和“,foot.lbi”,和一个网页文档“,8-1-2.htm”,，并在文档中引用两个库项目制作网页，最终效果如图所示。,这是插入库项目的一个例子，可以先制作库项目，然后再在网页中引用库项目，具体操作步骤参考教材。,返回目录,返回目录,8.1.3,课堂实训,将页面元素转换为库项目,首先将“课堂实训,素材,第,8,讲,8-1-3”,文件夹下的内容复制到站点根文件夹下，然后将网页文档“,8-1-3.htm”,中的页眉和页脚部分转换为库项目，最终效果如图所示。,这是将网页中现有的对象元素转换为库文件，可以先选择要内容，然后通过,【,修改,】/【,库,】/【,增加对象到库,】,命令，将选中的内容转换为库项目。,返回目录,返回目录,8.2,使用模板,8.2.1,功能讲解,8.2.2,范例解析,使用模板制作“世界名瀑”网页,8.2.3,课堂实训,制作“一翔学校”网页模板,返回目录,8.2.1,功能讲解,模板是制作具有相同版式和风格的网页文档的基础文档。,在,Dreamweaver,中，,创建的模板文件保存在站点的“,Templates”,文件夹内，“,Templates”,文件夹是自动生成的，不能对其进行修改。,创建模板。,添加模板对象。,应用模板。,返回目录,一、创建模板,创建模板文件通常有以下两种方式。,直接创建模板。,将现有网页另存为模板。,返回目录,（,1,）直接创建模板,在,【,资源,】,面板的,【,模板,】,分类中，单击右下角的按钮，在“,Untitled”,处输入新的模板名称，并按,Enter,键确认即可，如图所示。此时的模板还是一个空文件，需要通过单击面板底部的 （编辑）按钮打开添加模板对象才有实际意义。,返回目录,也可以选择,【,文件,】/【,新建,】,命令打开,【,新建文档,】,对话框，然后选择,【,空白页,】/【HTML,模板,】,或,【,空模板,】/【HTML,模板,】,中的选项来创建模板文件，如图所示。此时在,【,资源,】,面板的,【,模板,】,分类中将增加此模板文件。,返回目录,（,2,）将现有网页另存为模板,将现有网页保存为模板是一种比较快捷的方式，方法是，打开一个现有的网页，删除其中不需要的内容，并设置模板对象，然后选择,【,模板,】/【,另存为模板,】,命令，打开,【,另存模板,】,对话框，将当前的文档保存为模板文件，如图所示。,返回目录,二、添加模板对象,比较常用的模板对象如下。,可编辑区域。,重复区域。,重复表格。,返回目录,（,1,）可编辑区域,可编辑区域是指可以对其进行添加、修改和删除网页元素等操作的区域。选择,【,插入,】/【,模板对象,】/【,可编辑区域,】,命令打开,【,新建可编辑区域,】,对话框，在,【,名称,】,文本框中输入可编辑区域名称，单击 按钮即可，如图所示。,返回目录,可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色。该区域左上角的选项卡显示该区域的名称。,在插入可编辑区域时，可以将整个表格定义为可编辑区域，也可以将单个单元格定义为可编辑区域，但不能同时指定某几个单元格为可编辑区域。,修改可编辑区域等模板对象的名称可通过,【,属性,】,面板进行。这时首先需要选择模板对象，方法是单击模板对象的名称或者将鼠标光标定位在模板对象处，然后在工作区下面选择相应的标签，在选择模板对象时会显示其,【,属性,】,面板，在,【,属性,】,面板中修改模板对象名称即可，如图所示。,返回目录,（,2,）重复区域,重复区域是指可以在模板中复制任意次数的指定区域。选择,【,插入,】/【,模板对象,】/【,重复区域,】,命令，打开,【,新建重复区域,】,对话框，在,【,名称,】,文本框中输入重复区域名称并单击 按钮，即可插入重复区域，如图所示。,重复区域不是可编辑区域，若要使重复区域中的内容可编辑，必须在重复区域内插入可编辑区域或重复表格。,重复区域可以包含整个表格或单独的表格单元格。如果选定“,”,标签，则重复区域中包括单元格周围的区域，如果未选定，则重复区域将只包括单元格中的内容。在一个重复区域内可以继续插入另一个重复区域。整个被定义为重复区域的部分都可以被重复使用。,返回目录,（,3,）重复表格,重复表格是指包含重复行的表格格式的可编辑区域，可以定义表格的属性并设置哪些单元格可编辑。,选择,【,插入,】/【,模板对象,】/【,重复表格,】,命令，打开,【,插入重复表格,】,对话框，并进行参数设置，然后单击按钮，即可插入重复表格，如图所示。,重复表格可以被包含在重复区域内，但不能被包含在可编辑区域内。另外，不能将选定的区域变成重复表格，只能插入重复表格。,返回目录,三、应用模板,创建模板的目的在于应用，应用模板生成网页的方式有两种。,从模板新建网页。,在已存在页面中应用模板。,返回目录,（,1,）从模板新建网页,选择,【,文件,】/【,新建,】,命令打开,【,新建文档,】,对话框，选择,【,模板中的页,】,选项，然后在站点列表框中选择站点，在模板列表框中选择模板，并勾选,【,当模板改变时更新页面,】,复选框，以确保模板改变时更新基于该模板的页面，然后创建基于模板的网页文档。,返回目录,（,2,）在已存在页面中应用模板,首先打开要应用模板的网页文档，然后选择,【,修改,】/【,模板,】/【,应用模板到页,】,命令，或在,【,资源,】,面板的模板列表框中选中要应用的模板，再单击面板底部的 按钮，即可应用模板。如果已打开的文档是一个空白文档，文档将直接应用模板；如果打开的文档是一个有内容的文档，这时通常会打开一个,【,不一致的区域名称,】,对话框，如图所示，该对话框会提示读者将文档中的已有内容移到模板的相应区域。,返回目录,8.2.2,范例解析,使用模板制作“世界名瀑”网页,首先将“范例解析,素材,第,8,讲,8-2-2”,文件夹下的内容复制到站点根文件夹下，然后使用库和模板制作“世界名瀑”网页，最终效果如图所示。,这是使用库和模板制作网页的一个例子，库项目已经制作好不需要再制作，主要问题是创建模板，在模板中引用库项目，并添加模板对象，最后使用模板创建网页，具体操作步骤参考教材。,返回目录,返回目录,8.2.3,课堂实训,制作“一翔学校”网页模板,首先将“课堂实训,素材,第,8,讲,8-2-3”,文件夹下的内容复制到站点根文件夹下，然后制作“一翔学校”网页模板，最终效果如图所示。,这是使用库和模板制作网页的一个例子，库项目已经制作好不需要再制作，主要问题是创建模板，在模板中引用库项目，并添加模板对象，最后使用模板创建网页。,返回目录,8.3,综合案例使用库和模板创建网页和文件,首先将“范例解析,素材,第,8,讲”文件夹下的所有内容复制到站点根文件夹下，然后使用库和模板创建网页，最终效果如图所示。,这是创建和编辑框架网页的一个例子，可以先插入预定义框架集，接着再插入一个右侧框架，然后在各个框架中打开网页，最后插入浮动框架。,返回目录,返回目录,