《网页设计与制作案例教程 教学课件 ppt 陈承欢 第14单元》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程 教学课件 ppt 陈承欢 第14单元（58页珍藏版）》请在金锄头文库上搜索。
1、7.5 利用模板和库制作网页,在进行大量的页面制作时，很多页面会用到相同的布局、图片和文字等元素。为了避免重复劳动，可以使用Dreamweaver 8提供的模板和库功能，将具有相同版面结构的页面制作成模板，将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。,课程引导,（1）理解模板和库的作用。 （2）学会将已有网页生成模板的操作方法。 （3）掌握如何编辑模板和将模板生成新网页的操作方法。 （4）掌握如何应用库项目制作网页。,知识技能目标,网页浏览效果展示,网页08.html的浏览效果如图所示。,图7-71 应用模板制作的网页效果,本章操作任务,（1）在站点“长沙世界之窗”下创建子文件
2、夹“08模板和库”，在“08模板和库”文件夹中创建一个网页文档081.html。 （2）利用上一步所创建的网页081.html制作成模板文件“08.dwt”。,（3）在模板文件中定义可编辑区域、可选区域、可编辑标签属性。 （4）创建一个基于模板08.dwt的网页，该网页命名为“08.html”。 （5）创建一个应用库的网页083.html。,7.5.1 模板概述,在Dreamweaver 8中，模板是一种特殊的文档，可被理解成一种模型，用这个模型可以方便地制作出很多的页面，然后在此基础上可以对每个页面进行改动，加入个性化的内容。,7.4.2 框架的创建与设置,创建一个网页模板文件“08.dwt
3、”，其详细操作过程如下：,1新建网页,在“长沙世界之窗”站点下创建文件夹“08模板和库”，在“08模板和库”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。在同一文件夹下创建一个命名为“081.html”的网页文档。保存该网页文档。,（1）插入表格 网页081.html用4个表格来布局网页元素。,2插入表格，布局网页,将光标置于文档窗口左上角，插入一个1行1列的表格1。 然后在1行1列表格下面，插入一个9行3列的表格2。 接着在9行3列表格下面，插入一个3行1列的表格3。,三个表格插入完成后如图7-72所示。,将表格2中的单元格“a”至单元格“i”合并为一个单元格，将单元格“
4、j”至单元格“s”合并为一个单元格。然后在右边的合并单元格中插入一个6行3列的嵌套表格4。,（2）设置表格属性 按表7-1中的尺寸，利用表格“属性”面板设置四个表格的尺寸。,表7-1 各个表格的主要参数设置,三个表格插入完成后如图7-72所示。,表格2三列的宽度分别设置为：39px、181px、560px；表格3三行的高度分别设置为：22px。将表格1、表格2、表格3的“边框”设置为0，表格4的“边框”设置为“1px”。,（3）在表格中输入文字、插入图像 在表格1中插入一幅图像，在表格2中插入四幅图像，在表格3中分别输入三行文字，三行文字都设置为“居中”。第一行中的文字用“|”分隔，且所有的文
5、本的“链接”都设置为“#”。,（4）保存该网页文档。设置完成后如图7-74所示。,利用上一步所创建的网页081.html制作成模板，如果该网页已被关闭，应先打开该网页。将该网页另存为模板的步骤如下： （1）在Dreamweaver 8主窗口中，单击菜单【文件】【另存为模板】，弹出“另存模板”对话框。,3创建模板,（2）在“另存为模板”对话框中，“站点”下拉列表框选择模板保存的站点，本项目选择“长沙世界之窗”；“现存的模板”列表框中显示了当前站点中的所有模板；“描述”用于输入对模板的说明文字；“另存为”文本框输入模板的名称，本项目输入“08”。,（3）设置完毕后，在“另存为模板”对话框中，单击【
6、保存】按钮，会出现一个“要更新链接吗？”提示信息对话框，在该对话框中单击【是】按钮。,7.5.3 编辑和更新模板,对模板“08.dwt”按以下要求进行编辑： （1）将表格1中的图像，表格2中插入图像的单元格设置为可编辑区域。 （2）将表格3设置为不可编辑的可选区域。 （3）将表格4设置为可编辑的可选区域。 （4）将表格2的“背景图像”设置为可编辑标签属性。,对模板08.dwt进行编辑的操作过程如下： 1打开Templates文件夹中模板文件08.dwt。 2定义可编辑区域,设置表格1中的图像为可编辑区域，操作步骤如下： （1）单击表格1中的图像，选中该图像。 （2）在Dreamweaver 8
7、主窗口中，单击菜单【插入】【模板对象】【可编辑区域】。,（3）在“新建可编辑区域”对话框中给该可编辑区域命名，例如名称为“EditRegion1”，然后单击【确定】按钮。 （4）页面中的可编辑区域有蓝色标签，标签上有可编辑区域的名称。,设置可编辑区域后，可以在日后更改它的名称，更改可编辑区域名称的步骤如下： （1）单击图7-79中可编辑区域左上角的标签，例如“EditRegion1”。 （2）在可编辑区域属性面板中输入一个新的名称，按回车键确认。,设置不可编辑的可选区域的步骤如下： （1）选择想要设置为可选区域的表格3。 （2）在Dreamweaver 8主窗口中，单击菜单【插入】【模板对象】
8、【可选区域】。 （3）在“新建可选区域”对话框的“名称”文本框中输入该可选区域的名称。,3定义不可编辑的可选区域,（4）单击【确定】按钮，即可定义一个可选区域。 设置完成后，页面中可选区域有蓝色标签，标签上是可选区域的名称“If OptionalRegion1”。,设置可编辑的可选区域的步骤如下： （1）选择想要设置为可编辑的可选区域的表格4。 （2）在Dreamweaver 8主窗口中，单击菜单【插入】【模板对象】【可编辑的可选区域】。,4定义可编辑的可选区域,（3）在“新建可选区域”对话框的“名称”文本框中输入该可编辑的可选区域的名称。如果选中“默认显示”复选框，则该可编辑的可选区域在默认
9、情况下将在基于模板的网页中显示。 （4）单击【确定】按钮，即可定义一个可编辑的可选区域。,设置完成后，页面中可编辑的可选区域有蓝色标签，标签上是可选区域的名称“If OptionalRegion2”，由于该区域的内容允许用户修改，也显示一个可编辑区域的标签“EditRegion6”。 （5）切换到“高级”选项卡，选择现有参数或输入一个表达式，确定该区域是否可见。,设置可编辑的标签属性步骤如下： （1）选择想要设置可编辑标签属性的表格2。 （2）在Dreamweaver 8主窗口中，单击菜单【修改】【模板】【令属性可编辑】，弹出“可编辑标签属性”对话框，如图7-86所示。,5设置可编辑标签属性,
10、（3）在“可编辑标签属性”对话框的“属性”下拉列表框中选中一项标签“BACKGROUND”。如果需要设置的标签没有出现在下拉列表框，可以单击列表框右侧的【添加】按钮，弹出一个添加属性标签的对话框，输入标签名称即可。,然后选中“令属性可编辑”复选框，“标签”文本框中显示该属性的标签，在“类型下拉列表框中选择“URL”，即链接地址。“默认”文本框设置该属性的默认值。 设置完成后，单击【确定】按钮，将表格2的“背景图像”属性设置成可编辑的属性标签。,7.5.4 创建基于模板的网页,创建一个基于模板文件08.dwt的网页，该网页命名为“08.html”。具体操作过程如下：,1应用网页模板创建网页文档,
11、（1）在Dreamweaver 8主窗口中，单击菜单【文件】【新建】，弹出“新建文档”对话框，在“新建文档”对话框中单击“模板”标签，切换到“模板”选项卡，如图7-88所示。,（2）从左侧的列表框中选中“站点长沙世界之窗”，从中间的列表框中选择一个模板“08”，右侧可以预览该模板。 （3）单击【创建】按钮，这样将基于这个模板创建一个新的网页。 （4）保存新创建的基于模板的网页，浏览其效果。,（1）显示或隐藏可选区域 （2）设置可编辑标签属性的属性值 （3）在基于模板创建的网页中编辑可编辑区域的内容,2编辑网页,对模板进行修改后，可以将模板的修改应用于所有由模板生成的网页。操作步骤如下： （1）
12、打开模板文档，对模板进行必须的修改。 （2）在Dreamweaver 8主窗口中，单击菜单【修改】【模板】【更新页面】，弹出“更新页面”对话框。,3更新模板的变化,（3）在对话框中设置相应参数，在“查看”下拉列表框中如果选择“整个站点”，则要选择更新哪个站点，如果选择“文件使用”，则要选择更新哪个模板文件。如果选中了“显示记录”复选框，则会在更新之后显示更新记录。,（4）在对话框中设置相应参数后，单击【开始】按钮，Dreamweaver将对选定范围中由模板生成的网页进行更新，“状态”列表中显示检查文件数、更新文件数等信息。 （5）更新完成后，单击该对话框中的【关闭】按钮，操作结束。,7.5.5
13、 库,库文件的作用是将网页中经常用到的对象转化为库文件，然后作为一个对象插入到其他的网页之中。按下列要求创建库文件，且创建一个插入库文件的网页：,（1）将网页081.html中的表格3转换为库文件。 （2）创建一个应用库的网页083.html，在该网页插入前一步所创建库文件。 下面介绍如何利用现有网页中已有的内容转换为库文件。,（1）打开“长沙世界之窗”站点下的网页文档081.html。 （2）选中该文档中的“版权内容”所在的表格3。 （3）在Dreamweaver 8主窗口中，单击菜单【修改】【库】【增加对象到库】，将选中的表格3转化为库文件，库文件内容随即出现在库面板上。,1创建库文件,（
14、4）Dreamweaver 8会把库的项目文件保存在本地站点根文件夹下的“Library”子文件夹中，如果本地站点没有该文件夹，Dreamweaver 8会自动生成这个子文件夹。然后给新建的库文件命名，名称为“copyright.lbi”，库文件的扩展名为“.lbi”。,（1）创建一个命名为“083.html”的网页，如果该网页处于关闭状态，打开该网页。 （2）插入2个表格，且将表格2的“a”单元格拆分为3行 （3）在表格2右边的第二个单元格中插入一个5行1列的表格3。,2创建一个待插入库对象的网页,（4）在表格1中插入一幅图像，为表格2设置背景图像，在表格2的“a”单元格输入一段文字，在表格
15、3的“b”、“c”单元格中各插入一幅图像。 （5）将表格1、表格2的对齐方式设置为：居中对齐，调整所插入的图像以及所输入的文本的大小以及位置，使网页显得美观、协调。 （6）保存新创建的待插入库对象的网页。,（1）将光标置于表格2之后的下一行（按“Shift+Enter”组合键实现）。 （2）在“资源”面板的“库”子面板中，选择要插入的库文件“copyright”，然后单击“库”子面板左下角的【插入】按钮。 插入到网页中的库文件背景会显示为淡黄色，同样是不可编辑的。,3在网页中插入库文件,（1）对库文件进行必须的修改。 （2）在Dreamweaver 8主窗口中，单击菜单【修改】【模板】【更新页
16、面】，弹出“更新页面”对话框。,4更新库项目的变化,（3）在对话框中设置相应参数，在“查看”下拉列表框中如果选择“整个站点”，则要选择更新哪个站点；如果选择“文件使用”，则要选择更新哪个库文件。选中“库项目”复选框；如果选中了“显示记录”复选框，则会在更新之后显示更新记录。,（4）在对话框中设置相应参数后，单击【开始】按钮，Dreamweaver将对选定范围中已插入库文件的网页进行更新。,（1）选中网页中插入的库文件，在属性面板中单击【打开】按钮，打开库文件页面。打开库文件后，可对该库文件的内容进行修改。 （2）单击菜单【文件】【保存】，这时会弹出对话框询问是否更新网站中的使用了该库文件的网页。在“更新库项目”对话框中单击“更新”按钮，将更新网站内使用了该库文件的网页。,5调整库文件, 课堂实践 ,（1）在“课堂实践”站点中创建如图7-101所示的模板文档“08.dwt”。,1操作要求,图7-101 课堂实践的模板,（2）在“课堂实践”站点中创建如图7-102所示的库文件“RightRegion.lbi”。,
