网页设计与制作案例教程-电子教案第14单元.ppt

《网页设计与制作案例教程-电子教案第14单元.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程-电子教案第14单元.ppt（58页珍藏版）》请在三一办公上搜索。

1、7.5利用模板和库制作网页,在进行大量的页面制作时，很多页面会用到相同的布局、图片和文字等元素。为了避免重复劳动，可以使用Dreamweaver 8提供的模板和库功能，将具有相同版面结构的页面制作成模板，将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。,课程引导,（1）理解模板和库的作用。（2）学会将已有网页生成模板的操作方法。（3）掌握如何编辑模板和将模板生成新网页的操作方法。（4）掌握如何应用库项目制作网页。,知识技能目标,网页浏览效果展示,网页08.html的浏览效果如图所示。,图7-71应用模板制作的网页效果,本章操作任务,（1）在站点“长沙世界之窗”下创建子文件夹“08模

2、板和库”，在“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”合并为一个单元格，将单元格“j”至单元格“s”合并为

4、一个单元格。然后在右边的合并单元格中插入一个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主窗口中，单击菜单【插入】【模板对象】【可选区域】。（3）在“新建可选区域”对话框的“名称”文

8、本框中输入该可选区域的名称。,3定义不可编辑的可选区域,（4）单击【确定】按钮，即可定义一个可选区域。设置完成后，页面中可选区域有蓝色标签，标签上是可选区域的名称“If OptionalRegion1”。,设置可编辑的可选区域的步骤如下：（1）选择想要设置为可编辑的可选区域的表格4。（2）在Dreamweaver 8主窗口中，单击菜单【插入】【模板对象】【可编辑的可选区域】。,4定义可编辑的可选区域,（3）在“新建可选区域”对话框的“名称”文本框中输入该可编辑的可选区域的名称。如果选中“默认显示”复选框，则该可编辑的可选区域在默认情况下将在基于模板的网页中显示。（4）单击【确定】按钮，即可定义

9、一个可编辑的可选区域。,设置完成后，页面中可编辑的可选区域有蓝色标签，标签上是可选区域的名称“If OptionalRegion2”，由于该区域的内容允许用户修改，也显示一个可编辑区域的标签“EditRegion6”。（5）切换到“高级”选项卡，选择现有参数或输入一个表达式，确定该区域是否可见。,设置可编辑的标签属性步骤如下：（1）选择想要设置可编辑标签属性的表格2。（2）在Dreamweaver 8主窗口中，单击菜单【修改】【模板】【令属性可编辑】，弹出“可编辑标签属性”对话框，如图7-86所示。,5设置可编辑标签属性,（3）在“可编辑标签属性”对话框的“属性”下拉列表框中选中一项标签“BA

10、CKGROUND”。如果需要设置的标签没有出现在下拉列表框，可以单击列表框右侧的【添加】按钮，弹出一个添加属性标签的对话框，输入标签名称即可。,然后选中“令属性可编辑”复选框，“标签”文本框中显示该属性的标签，在“类型下拉列表框中选择“URL”，即链接地址。“默认”文本框设置该属性的默认值。设置完成后，单击【确定】按钮，将表格2的“背景图像”属性设置成可编辑的属性标签。,7.5.4创建基于模板的网页,创建一个基于模板文件08.dwt的网页，该网页命名为“08.html”。具体操作过程如下：,1应用网页模板创建网页文档,（1）在Dreamweaver 8主窗口中，单击菜单【文件】【新建】，弹出“

11、新建文档”对话框，在“新建文档”对话框中单击“模板”标签，切换到“模板”选项卡，如图7-88所示。,（2）从左侧的列表框中选中“站点长沙世界之窗”，从中间的列表框中选择一个模板“08”，右侧可以预览该模板。（3）单击【创建】按钮，这样将基于这个模板创建一个新的网页。（4）保存新创建的基于模板的网页，浏览其效果。,（1）显示或隐藏可选区域（2）设置可编辑标签属性的属性值（3）在基于模板创建的网页中编辑可编辑区域的内容,2编辑网页,对模板进行修改后，可以将模板的修改应用于所有由模板生成的网页。操作步骤如下：（1）打开模板文档，对模板进行必须的修改。（2）在Dreamweaver 8主窗口中，单击菜

12、单【修改】【模板】【更新页面】，弹出“更新页面”对话框。,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创建库文件,（4）Dreamweaver 8会把库的项目文件保存在本地站点根文件夹下的“Library”子文件夹中

14、，如果本地站点没有该文件夹，Dreamweaver 8会自动生成这个子文件夹。然后给新建的库文件命名，名称为“copyright.lbi”，库文件的扩展名为“.lbi”。,（1）创建一个命名为“083.html”的网页，如果该网页处于关闭状态，打开该网页。（2）插入2个表格，且将表格2的“a”单元格拆分为3行（3）在表格2右边的第二个单元格中插入一个5行1列的表格3。,2创建一个待插入库对象的网页,（4）在表格1中插入一幅图像，为表格2设置背景图像，在表格2的“a”单元格输入一段文字，在表格3的“b”、“c”单元格中各插入一幅图像。（5）将表格1、表格2的对齐方式设置为：居中对齐，调整所插入的

15、图像以及所输入的文本的大小以及位置，使网页显得美观、协调。（6）保存新创建的待插入库对象的网页。,（1）将光标置于表格2之后的下一行（按“Shift+Enter”组合键实现）。（2）在“资源”面板的“库”子面板中，选择要插入的库文件“copyright”，然后单击“库”子面板左下角的【插入】按钮。插入到网页中的库文件背景会显示为淡黄色，同样是不可编辑的。,3在网页中插入库文件,（1）对库文件进行必须的修改。（2）在Dreamweaver 8主窗口中，单击菜单【修改】【模板】【更新页面】，弹出“更新页面”对话框。,4更新库项目的变化,（3）在对话框中设置相应参数，在“查看”下拉列表框中如果选择“

16、整个站点”，则要选择更新哪个站点；如果选择“文件使用”，则要选择更新哪个库文件。选中“库项目”复选框；如果选中了“显示记录”复选框，则会在更新之后显示更新记录。,（4）在对话框中设置相应参数后，单击【开始】按钮，Dreamweaver将对选定范围中已插入库文件的网页进行更新。,（1）选中网页中插入的库文件，在属性面板中单击【打开】按钮，打开库文件页面。打开库文件后，可对该库文件的内容进行修改。（2）单击菜单【文件】【保存】，这时会弹出对话框询问是否更新网站中的使用了该库文件的网页。在“更新库项目”对话框中单击“更新”按钮，将更新网站内使用了该库文件的网页。,5调整库文件,课堂实践,（1）在“课

17、堂实践”站点中创建如图7-101所示的模板文档“08.dwt”。,1操作要求,图7-101课堂实践的模板,（2）在“课堂实践”站点中创建如图7-102所示的库文件“RightRegion.lbi”。,图7-102课堂实践的库文件,（3）在“课堂实践”站点文件夹“08模板和库”中创建基于模板08.dwt的网页文档“08.html”，并且在该网页中插入库“RightRegion.lbi”。,基于模板和库的课堂实践网页08.html的浏览效果如图7-103所示。,2效果展示,图7-103,（1）先参考图7-101创建一个网页文档“081.html”，然后将该网页文档保存为模板文档“08.dwt”，接

18、着在模板文档“08.dwt”中选中主表格A，插入可编辑区域。（2）创建基于模板的网页文档“08.html”，在可编辑区域中输入文本、插入图片。,3制作要点提示,（3）在网页文档“08.html”中的主表格A的下面插入库。（4）保存网页文档，浏览其效果。,课外拓展实践,1在“湖铁职院学院网站”站点中创建如图7-108所示的模板文档“08.dwt”。2在“湖铁职院学院网站”站点中创建如图7-108所示的库文件“RightRegion.lbi”。3在“湖铁职院学院网站”站点文件夹“08模板和库”中创建基于模板文件08.dwt的网页文档“08.html”，并且在该网页中插入库“RightRegion.lbi”。,本章小结,制作网页不仅追求美观、而且要提高制作效率，使用模板和库文件是提高网页制作效率的有效途径。,