Dreamweaver CS3网页设计与制作教程 第2版 申莉莉教案 12章新.pptVIP

第12章 模板和库 本章主要内容是模板和库的基本知识和使用方法，包括：创建模板；定义模板的可编辑区域、重复区域和可选区域；定义嵌套模板；应用模板建立网页，修改模板并更新站点；库的创建、编辑和使用。 12.1 案例：模板 【案例目的】 利用模板编辑网页，创建模板，学会定义模板的可编辑区域。定义模板的可选区域，修改定义模板的可选区域。模板案例页面运行效果如图12-1所示。 【核心知识】 将具有相同的版面结构的页面制作成模板，再通过模板创建其他页面。 图12-1页面运行效果 12.1 案例：模板 .1.1 模板 在建立和维护一个站点的时候，往往需要建立外观及部分内容相同的大量网页，使站点具有统一的风格。如果逐页建立、修改，这样很费时、费力，而且效率不高，一个站点很难做到有统一的外观及结构。Dreamweaver CS3提供了几种方便的可以重复使用的部件来解决这个问题，分别是模板面板和库面板。 12.1 案例：模板 .1.1 模板 Dreamweaver CS3模板是一种特殊类型的文档，用于设计“固定的”页面布局；然后便可以基于模板创建文档，创建的文档会继承模板的页面布局。模板有可编辑区域和不可编辑区域两部分组成。不可编辑区域包含了所在页面中的共同元素，即构成页面的基本框架；称为锁定区域；而可编辑区域就是可以编辑可编辑区域的相应的内容，从而得到与模板类似但又有所不同的新的网页。默认情况下 Dreamweaver 模板的页面中各部分是固定（即不可编辑）的。设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”。使用模板，模板创作者控制哪些页面元素可以由模板用户进行编辑。模板创作者可以修改模板并立即更新基于该模板的所有文档中的设计。使用模板建立网页的最大好处就是：当修改模板时使用该模板创建的所有网页可以一次自动更新，这就大大提高了网页更新维护的效率。 12.1 案例：模板 12.1.2 创建模板 模板一般保存在本地站点根文件夹中一个特殊的Templates文件夹中。如果emplates文件夹在站点中没有存在，则在创建模板时将自动创建该文件夹。创建模板有两种方法。 1. 从空白文档创建模板 方法一：执行“文件”?“新建”命令，弹出“新建文档”对话框，在“类别”栏选中“空模板”，在“模板类型中”选择需要的模板类型（如HTML模板），在“布局”中选择模板的页面布局“无”，如图12-2所示，单击“创建”按钮即可。 12.1 案例：模板 12.1 案例：模板 执行“文件”?“保存”命令，选取保存的路径、命名并保存空模板文件。 方法二：在使用该方法建立新模板之前，必须保证站点已经建立， 按照建立站点的提示步骤一步步操作即可。只有建立完站点后，资源窗口当中的图标才能激活。 在Dreamweaver CS3界面中选择“窗口”?“资源”命令，调出“资源”面板，单击模板图标按钮，切换到模板面板。单击模板面板底部的“新建模板“图标” ，出现如图12-3所示界面，然后编辑模板文件名，输入文件名后，回车即可完成空模板的创建。创建一个新模板后，可以到站点所在本地根文件夹下的Templates文件夹中查看到该文件。 12.1 案例：模板 12.1 案例：模板 2. 从网站页面文件中创建新模板 利用现成的网页创建生成一新模板，实际上就是借助已有的站点中的经典网页，或者自己制作生成的网页的基础上生成模板，以便在后期制作网页过程中使用。 （1） 打开站点website，如图12-4所示，从中选择一网页打开。 12.1 案例：模板 （2）执行“插入记录”?“模板对象”?“创建模板”，出现12-5所示的“另存模板”对话框。 12.1 案例：模板 单击“保存”按钮。出现如图12-6所示对话框。如果要更新链接，则单击“是”按钮，如果不更新链接，则单击“否”。单击“是”。即可在站点的Templates文件夹中创建一个模板文件。 12.1 案例：模板 案例分解1 ： （1） 打开网页，如图12-7所示。 12.1 案例：模板 （2）执行“插入记录”?“模板对象”?“创建模板”，如图12-8所示。在“另存模板”对话框另存名为“aihu1”，单击“保存”按钮。在这里单击“否”，不更新链接，成功创建新模板。 12.1 案例：模板 12.1.3 定义模板的可编辑区域 可编辑区域包含在根据模板创建的每个HTML网页中可以改变的信息，可能是文本，图像或者其他的媒体，如flash、java小程序，没有标记为可编辑区域的在使用此模板创建新文件时被锁定。 当创建一个基于模板的网页时，可以激活可编辑区域并添加新数据，然后将网页保存为独立的HTML文件。文件中没有标记为可编辑区域的所有基于模板的网页中都将保持完全相同的状态，并且不可以任何方式进行更改。 提示：在模板中对非可编辑