《网页设计与制作（第二版）》15 模板和库

网页设计与制作（第二版）目录DIRECTORY01DreamweaverCS5入门05插入图像02创建站点06插入多媒体03设置首页07建立网页链接04DreamweaverCS5编辑文本08表格目录DIRECTORY09使用Div标签和APDiv10框架11表单12CSS样式13行为14资源15模板和库16站点上传和维护15模板和库1.会在网页中创建模板。2.会添加可编辑区域。3.会模板的更新和管理。4.培养学生的创新意识和自主思考能力。任务目标1任务实施一、制作与应用模板（一）创建模板步骤1：选择“文件”→“打开”命令，弹出“打开”对话框，打开要创建成模板的网页文件moban.html，如图15-3所示。一、制作与应用模板（一）创建模板步骤2：选择“文件”→“另存为模板”命令，弹出“另存为模板”对话框，如图15-4所示。步骤3：在“另存为模板”对话框中，在“站点”下拉列表中选择站点OldWall，在“另存为”文本框中输入模板的名称“moban”，单击“保存”按钮。步骤4：在弹出的提示对话框中，提示是否要更新链接，单击“是”按钮，如图15-5所示。一、制作与应用模板（三）创建可编辑区域模板创建好后，应当在模板中建立可编辑区域。只有在可编辑区域里，我们才可以编辑网页内容。1.创建可编辑区域创建可编辑区域的操作步骤如下。【操作步骤】步骤1：在模板网页窗口中，将光标定位于所需位置，或选中要设置为可编辑区域的部分。步骤2：执行下列操作之一。●选择“插入”→“模板对象”→“可编辑区域”命令。2.删除可编辑区域如果希望删除可编辑区域，可以按以下操作步骤进行。【操作步骤】步骤1：选中可编辑区域，或将光标置于要删除的可编辑区域内。步骤2：选择“修改”→“模板”→“删除模板标记”命令，如图15-17所示，光标所在区域的可编辑区域即被删除。一、制作与应用模板（四）创建基于模板的文档1.利用“从模板新建”对话框创建网页【操作步骤】步骤1：选择“文件”→“新建”命令。步骤2：在弹出的“新建文档”对话框中单击“模板”选项卡，此时对话框名称自动变为“从模板新建”。步骤3：在“模板用于”列表中选择所需站点，然后从右侧的站点列表中选择所需的模板。步骤4：单击“创建”按钮。2.从“资源”面板中创建网页【操作步骤】步骤1：选择“窗口”→“资源”，或按F11键，打开“资源”面板。步骤2：在“资源”面板的左侧选择“模板”类别，查看当前站点中的模板列表。步骤3：选中所需模板，执行下列操作之一。3.将已有网页应用模板【操作步骤】步骤1：打开LQRJ.html网页文件。步骤2：选择“窗口”→“资源”，或按F11键，打开“资源”面板。步骤3：在“资源”面板的左侧选择“模板”类别，查看当前站点中的模板列表。一、制作与应用模板（五）删除文档中使用的模板有的时候，从模板创建的文档需要删除文档中使用的模板。当文档从模板分离之后，整个文档都将变为可编辑的了，模板对其将不再起作用。其操作步骤如下。【操作步骤】步骤1：打开想要与模板分离的文档。步骤2：选择“修改”→“模板”→“从模板中分离”命令，如图15-25所示，LQRJ.html从模板分离后，所有网页元素变为了可编辑状态。一、制作与应用模板（六）更新模板及基于模板的网页通过模板创建了若干个网页后，如果需要对所有基于该模板的网页的共同部分进行修改，手工修改每个网页是非常麻烦的，而且也没有必要，我们只需修改模板，然后对所有基于该模板的网页进行更新，就可以很方便地快速完成所有页面的修改了。其操作步骤如下。【操作步骤】步骤1：打开需要编辑的模板。步骤2：对模板进行修改。步骤3：修改完成后选择“文件”→“保存”命令，弹出“更新模板文件”对话框，如图15-26所示。步骤4：单击“更新”按钮。一、制作与应用模板（七）模板的嵌套我们在设计和制作网页时，不一定每一个页面都完全应用一个相同的模板，有些页面需要在基本模板的基础上做一些变化，我们可以使用嵌套模板完成这一要求。嵌套模板是指在基本模板的可编辑区域中，进行一定的编辑后，进一步定义可编辑区域，然后再创建一个基于原有模板的嵌套模板。基本模板可能包含比较宽广的可编辑区域，而嵌套模板则进一步定义更细小的可编辑区域。我们通过一个实例来说明。在基本模板moban1.dwt的基础上，如图15-29所示，创建嵌套模板moban2.dwt，如图15-30所示。一、制作与应用模板（八）模板中可创建的其他区域类型模板中可创建4种模板区域类型。●可编辑区域：是基于模板文档中的未锁定区域，用户可以在这些区域中进行编辑。●可选区域：是设计者在模板中定义为可选的区域，可将其设为在基于模板的文档中显示或隐藏。●重复区域：是根据需要在基于模板的文档中可以复制任意多次的部分。一般用于表格，如表格的一行，和可编辑区域配合设置的话，可以在基于模板的文档中单击“+”按钮重复该表格行多次，如图15-36所示。●可编辑标签属性：设置可编辑标签属性，可以在模板中解锁标签属性，以便该属性可以在基本模板的页面中编辑。一、制作与应用模板（九）导出和导入XML1.导出XML文件【操作步骤】步骤1：打开基于模板并包含可编辑区域的文档。步骤2：选择“文件”→“导出”→“作为XML的数据模板”命令。步骤3：在弹出的“以XML形式导出模板数据”对话框中，如图15-37所示。步骤4：单击“确定”按钮。步骤5：在弹出的“以XML形式导出模板数据”对话框中选择保存的位置，输入XML文件的名称。2.导入XML文件【操作步骤】步骤1：选择“文件”→“导入”→“XML到模板”命令。步骤2：在弹出的“导入XML”对话框选择要导入的XML文件。步骤3：单击“打开”按钮。（一）创建库项目我们可以将图像、文本、表格、Flash、表单、导航条、Javaapplet、插件、ActiveX元素等网页元素创建成库项目。创建库项目的操作步骤如下。【操作步骤】步骤1：选择要创建成库项目的网页元素。步骤2：执行下列操作之一。●选择“修改”→“库”→“增加对象到库”命令。●打开“资源”面板，选择“库”类别，将选择的对象直接拖动至“库”类别中。●打开“资源”面板，选择“库”类别，单击面板底部的“新建库项目”按钮。●打开“资源”面板，选择“库”类别，单击面板右上角的小箭头，在弹出的菜单中选择“新建库项”选项。●打开“资源”面板，选择“库”类别，在库列表中单击鼠标右键，从弹出的快捷菜单中选择“新建库项”选项。步骤3：在库项目列表中添加了一个库项目，为新的库项目输入一个名称，然后按Enter键确定。创建的库项目被保存至站点根文件夹的Library文件夹中，文件扩展名为.lbi。三、库（二）插入库项目在文档中应用库项目时，不是插入了一个库项目，而是插入了一个指向库项目的链接。在网页文档中插入库项目的操作步骤如下。【操作步骤】步骤1：将插入点定位至文档中需要插入库项目的位置。步骤2：打开“资源”面板，选择“库”类别。步骤3：选中要插入的库项目，执行下列操作之一。●将库项目直接拖动至文档中。●单击“资源”面板底部的“插入”按钮。●单击面板右上角的小箭头，在弹出的菜单中选择“插入”选项。●单击鼠标右键，从弹出的快捷菜单中选择“插入”选项。这样即可在网页文档中插入库项目。三、库（三）库项目编辑和更新我们可以对库项目进行编辑，当修改一个库项目后，可以选择更新使用该项目的所有文件。如果选择不更新，文件仍然保持与库项目的链接，以后可以执行更新命令来完成更新。编辑库项目的操作步骤如下。【操作步骤】步骤1：打开“资源”面板，选择“库”类别。步骤2：选择要编辑的库项目，然后执行下列操作之一。●双击该库项目。●单击“资源”面板底部的“编辑”按钮。●单击面板右上角的小箭头，在弹出的菜单中选择“编辑”选项。三、库（四）库项目的属性在插入了库项目的文档中，我们可以对库项目的属性进行编辑，其操作步骤如下。【操作步骤】步骤1：在文档中选择插入的库项目，该库项目变为灰色背景。步骤2：在属性面板中可显示相应的属性，如图15-43所示。属性面板的各选项说明如下。●库项目源“Src”：显示当前选中库项目源文件的路径和文件名。●“打开”按钮：单击该按钮，可以打开该库项目的源文件。●“从源文件分离”按钮：单击该按钮，弹出提示对话框，如图15-44所示，单击“确定”之后，该库项目将与源文件分离，变为可编辑，而且源文件发生修改后不会对该项目更新。●“重新创建”按钮：当源文件发生改变，如被删除、改名后，可以单击该按钮重建库项目文件至Library文件夹中。三、库2项目实训●步骤1：打开m.html。●步骤2：将其存储为模板。●步骤3：设置可编辑区域。●步骤4：保存。项目要求：将m.html网页修改为模板，如图15-45所示。3项目小结