《网页设计与制作案例教程 教学课件 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”。,