工信版（中职）网页设计与制作项目十二 模板与库电子课件.pptx

《工信版（中职）网页设计与制作项目十二 模板与库电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）网页设计与制作项目十二 模板与库电子课件.pptx（33页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）网页设计与制作项目十二 模板与库电子课件=项目十二 模板与库=任务一 使用模板=认识模板 创建模板 定义可编辑区域 应用模板=本节提纲更新模板=网页模板模板实质上是一种特殊类型的文档，它主要是作为创建其他文档的基础，用于设计布局比较固定的页面结构或元素。模板是网页设计中比较高级的内容，很好地体现了Dreamweaver 在大型网页项目开发中的先进性，这种技术可以尽量地避免开发时的重复工作。=可编辑区域可编辑区域就是基于模板文档的未锁定区域，是网页套用模板后，可以编辑的区域。=认识模板模板实质上是一种特殊类型的文档，模板文档中有可编辑区域和不可编辑区域。使用模板可以一次在网站站点中

2、更新多个页面。模板的可编辑区域是基于该模板的网页页面中可以修改的网页元素，不可编辑区域是在网站页面中保持不变的网页元素。模板是网页设计中比较高级的内容，很好地体现了Dreamweaver在大型网页项目开发中的先进性，这种技术可以尽量地避免开发时的重复工作。=创建模板（一）在“资源”面板直接创建模板1.选择“窗口”“资源”命令，打开“资源”面板。2.然后单击“资源”面板底部的“新建模板”按钮。3.创建完空模板后，双击该模板或者单击面板底部的“编辑”按钮，打开模板进行编辑。4.保存模板。一、直接创建模板=创建模板（二）在文件菜单中直接创建模板选择“文件”“新建”命令，打开“新建文档”对话框。然后在

3、“类别”列表中选择“空白页”或者“空模板”选项，并在“空白页”或者“空模板”列表中选择“HTML模板”选项，单击“创建”按钮即可。=创建模板二、将网页另存为模板1.打开“tea culture”站点中已存在的网页文件“index.html”，这是一个已基本制作完成的网页，如图12-9所示，删除其中不要的内容，选择“文件”“另存为模板”命令，将网页另存为模板。=创建模板二、将网页另存为模板1.打开“tea culture”站点中已存在的网页文件“index.html”，这是一个已基本制作完成的网页，如图12-9所示，删除其中不要的内容，选择“文件”“另存为模板”命令，将网页另存为模板。=创建模板

4、二、将网页另存为模板2.弹出“另存模板”对话框，如图12-10所示，请正确选择正在使用的站点“tea culture”，设置输入模板文件名，如“moban”，单击“保存”按钮。此时模板文件将自动存入站点的“templates”文件夹中，如果有相同文件名的模板文件，则会覆盖掉。=定义模板的可编辑区域模板的可编辑区域可编辑区域就是基于模板文档的未锁定区域，是网页套用模板后，可以编辑的区域。可编辑区域的对象可以把图像、文本、表格、AP元素、客户端行为等页面元素设置为可编辑区，可把整个表格及表格里的内容设置为一个可编辑区，也可以把某一个单元格及内容设置为一个可编辑区=定义可编辑区的具体步骤如下：1.在

5、“文件”面板或“资源”面板中，选择模板文件“moban”，双击打开。2.选中可以编辑修改的区域，如图12-12所示，图中选择的是标题“中国茶的发展历史”所在的表格标签。3.选择菜单“插入”“模板对象”“可编辑区域”命令，在弹出的对话框中给该可编辑区域命名，单击“确定”按钮，如图12-13所示。4.新添加的可编辑区域有蓝色边框，上面有蓝色标签，标签上是可编辑区域的名称，如图所示。可编辑区域的内容“中国茶的发展历史”可以清除，但为了页面的完整性，模板中也可以不删除，在模板应用到网页后要输入新内容之前再删除。5.再将内容图所在单元格添加为一个可编辑区域“EditRegion2”，如图12-14所示。

6、效果如图12-15所示。=应用模板操作步骤如下：1.在站点中新建一个空白网页。在“文件”面板中，在站点的根文件夹下，新建一网页，命名为“index.html”，双击打开该文件进行编辑。2.执行菜单“修改”“模板”“应用模板到页”。如图12-16所示。3.弹出“选择模板”对话框，在对话框中，选择本站点中已有的模板“moban”，单击“选定”按钮，如图12-17所示。4.空白网页“index”即已套用模板，如图12-18所示，图中EditRegion1和EditRegion2为可编辑区域，其余区域均不可编辑。5.删除可编辑区域内的内容，将正确的内容输入并编辑好，保存文档，如图所示。本例中素材位于“

7、素材”文件夹中。=更新模板模板文件中设置链接，实现茶文化各网页之间相互跳转。1.打开模板文件“moban.dwt”，参考下表12-1，设置相应的链接。菜单项 对应的网页文件茶的发展简史index.html茶的贸易历史Files 茶的贸易历史.html饮茶史Files 饮茶史.html制茶史Files 制茶史.html茶叶品种Files 茶叶品种.html茗茶荟萃Files 茗茶荟萃.html茶的鉴评Files 茶的鉴评.html茶的保存Files 茶的保存.html茶道概论Files 茶道概论.html泡茶技法Files 泡茶技法.html茶叶饮法Files 茶叶饮法.html茶艺演示File

8、s 茶艺演示.html民族茶俗Files 民族茶俗.html茶与礼仪Files 茶与礼仪.html茶与婚俗Files 茶与婚俗.html茶与祭祀Files 茶与祭祀.html=更新模板模板文件中设置链接，实现茶文化各网页之间相互跳转。2.模板修改完毕，保存模板文档，Dreamweaver CS6会自动更新站点内所有应用的模板。如图12-19所示。=更新模板手动更新模板及网页1.在“资源”面板中，在模板列表中右击要更新的模板。2.在弹出的快捷菜单中选择“更新站点”命令，打开“更新站点”对话框3.在“查看”下拉列表中设置要更新的范围。选择“整个站点”选项，然后在右边弹出的快捷菜单中选择站点名，这样

9、将更新选定站点的所有网页。如图12-20所示。=思考1.创建模板一共有几种方法？2.如何删除创建的可编辑区域？3.探究其他的方法实现模板应用？4.如何将模板与网页分离？=自主练习1.用两种不同的方法在站点“tea culture”的Templates文件夹中分别创建名为tea1.dwt和“tea2.dwt”的模板。2.删除站点“tea culture”“Templates”“moban2.dwt”模板页中的可编辑区域“EditRegion1”。3.根据完整的网站样例，完成其他相应的页面：茶的贸易历史.html、饮茶史.html、制茶史.html等其他页面。（参见素材范例结果）4.将“index

10、.html”页面中的模板从网页中分离出来。=任务二 使用库=创建库项目=本节提纲插入库项目 修改库项目更新库项目 分离库项目=库项目库项目是相对于一个站点的，所以需要使用库项目时，要先建立一个站点。库项目的扩展名为.lbi，同时所有库项目都存储在站点根目录下的Library 文件夹中，如果本地站点没有这个子文件夹，Dreamweavercs6 将自动生成。=库项目的对象在库中，用户可以存储各种各样的页面元素，如图像、文本、声音、flash影片、表格、表单、java程序、插件、activex控件、导航条等。对于诸如图像之类的链接项目，库中仅保存该项目的引用，原文件仍保存在指定位置。库项目中可以包

11、含行为，但不能包含css样式表，因为库项目要求创建对象元素的代码必须位于HTML代码的和之间。=创建库项目1.选择“窗口”“资源”“库”按钮，切换到“库”视图。2.然后单击“资源”面板底部的“新建库项目”按钮。也可单击“资源”面板右上角的面板菜单按钮，在打开的菜单中选择“新建库项”命令。或者在“资源”面板空白处右击，然后在弹出的快捷菜单中选择“新建库项”命令。可以给库项目命名，如图12-21所示。3.双击新建的库项目，打开库项目编辑窗口，如图12-22所示。库项目实际上是要插入在网页中的一段代码，库项目的编辑窗口除不可以设置页面属性外，其他内容与普通网页的编辑方式相同。一、新建空白库项目=创建

12、库项目1.打开站点中已编辑好的网页“index.html”，选中网页中关于“茶史觅踪”的内容（包括标图片、选择菜单、表格）。如图12-23所示2.选择菜单“修改”“库”“增加对象到库”命令，将选中的内容转化为库文件。软件弹出一个提示信息，如图12-24所示。单击“确定”后，资源面板会自动切换到“库”选项，预览新增加的库文件以及库文件名“Untitled”，将库文件名设置为“导航菜单”，转化后如图12-25所示。3.查看库文件内容切换到“文件”面板，在站点文件夹中，新增了一个文件夹，名为“library”，新增的库文件就在这个文件夹中，名为“导航菜单.lbi”，如图12-26所示。二、创建基于选

13、定内容的库项目=库项目一、插入库项目1.将插入点放置在网页“茶的贸易历史”的左边“茶史觅踪”导航条下方。如图12-28所示。2.在资源面板的库面板中，选中要插入的库文件“导航菜单.lbi”，单击窗口下方的“插入”按钮。如图12-29所示。3.新插入到网页中的库文件不可编辑，如图12-30所示。在浏览器中浏览效果，如图12-31所示。=库项目二、修改库项目1.将“导航菜单.lbi”文件复制一份，重命名为“茶叶百科.lbi”如图12-32、12-33所示。2.选择“资源”模板“库”“茶叶百科”，双击“茶叶百科”库项目进行编辑，如图12-34所示。3.将插入点放置在网页“index.html”的左边

14、“茶叶百科”导航条下方，在资源面板的库面板中，选中要插入的库文件“茶叶百科.lbi”，单击窗口下方的“插入”按钮，如图12-35所示。完成效果如图12-36所示。=库项目三、更新库项目1.在资源面板的库面板中，双击“茶叶百科”库项目进行编辑。将文字和单元格的背景颜色进行修改。如图12-37所示。2.保存库文件，则弹出“更新库项目”对话框，询问是否更新网站中使用了该库文件的网页。如图12-38所示。3.单击“更新”按钮后，弹出“更新页面”对话框，确认更新。如图12-39所示。4.此时网页“index”已自动更新。如图12-40所示。=库项目四、分离库项目1.选中插入的库文件部分“茶叶百科.lbi”，如图12-41所示。2.选择“属性”模板单击“从源文件中分离”按钮 3.弹出警示窗口，如图12-42所示，选择“确定”按钮。4.库文件就转换成网页的一部分，与库文件脱离了关系，这部分内容就可以编辑修改了。如图12-43所示。=思考1.库文件的代码结构与普通网页的代码结构异同？2.编辑库项目时，“CSS样式”面板可以用吗？3.使用库项目的本质是什么？=自主练习1.分析“导航菜单.lbi”文件的代码结构。2.应用库项目完成其它页面的导航菜单模块。（参考范例素材）3.更新其它页面的库项目。（参考范例）=谢谢