网页设计与制作实用教程 教学课件 作者 马绍惠 第7章 模板与库.pptVIP

第7章 模板与库 学习要求 本章重点 掌握模板和库的概念 掌握模板和库的创建与编辑 掌握模板和库的应用 主要内容 7.1 模板 7.2 库 7.3 实例 7.1 模板 模板的概念 模板用来制作带有固定特征与格式的网页，是用户批量生产文档的起点。在编辑网页时，如果多个文档中都需要重复添加某些内容，可以将这些内容存储在模板里，通过该模板再创建新的文档，就可以避免相同内容的重复操作。 所谓模板就是网页的一个样板，它是一个文档，但这个文档是创建其他文档的基础。模板有可编辑区域与不可编辑区域两部分。 模板的风格不是固定不变的，可以对其进行修改、编辑。 7.1 模板 模板的创建与应用 创建模板的方法有两种： 1）从空白文档开始创建新模板； 2）是将现有的HTML文件存储为模板。 设置模板的可编辑区域 模板有可编辑区域与不可编辑区域两部分，不可编辑区域中的内容只能在模板中进行编辑修改，可编辑区域中的内容可以在应用了该模板的各文档中进行编辑。在创建模板时要为其插入可编辑区域，如果没有为模板指定可编辑区域，应用该模板创建的文档的所有区域都是不可编辑的。 7.1 模板 7.1 模板 将文档从模板中分离 ： 打开要与模板分离的文档，单击“修改”→“模板”→“从模板中分离”菜单命令，文档将从模板分离。分离后的文档的所有区域都可以编辑，并且以后对模板进行的任何修改都不会影响到该文档。 7.1 模板 模板的管理与更新站点 1．重命名模板 在“模板”管理器中，选择要重命名的模板，单击选中模板文件的名称，可以修改模板的名称，也可以在站点窗口的template目录下修改模板文件的名称。 2．自动更新 模板创建好后可以继续进行修改，如修改页面的内容或更改可编辑区域与不可编辑区域等，模板被更新之后，Dreamweaver会自动提示更新应用了该模板的所有文档。方法是打开要更新的模板，对其进行编辑修改后，在保存该模板时会弹出 “更新模板文件”对话框，在该对话框中提示是否更新应用了该模板的页面，单击“更新”按钮完成更新操作。 主要内容 7.1 模板 7.2 库 7.3 实例 库项目的应用 将插入点放在文档中要引用库项目的位置，打开“库”面板，单击选中要引用的库项目，再单击“库”面板左下角的“插入”按钮，或直接用鼠标将库项目拖拽至插入点处，该库项目就应用到文档中了。 若要在文档中插入库项目的内容而不包括对该库项目的引用，则可在进行上述操作的同时按住“Ctrl”键。 文档中引用了库项目的对象会有特定的颜色标记，选中该对象，可看到其属性面板如图7-4所示。该属性面板中的“Src”显示的是该对象引用的库项目的路径。单击“与源文件分离”按钮，可将选中对象与库项目（源文件）分离，分离后修改源文件，对它不再会有影响。 更新站点 单击“修改”→“库”→“更新页面”菜单命令，会打开如图7-5所示的“更新页面”对话框。 在“查看”下拉列表中选择“整个站点”及站点名称，在“更新”栏中选择“库项目”复选框，单击“开始”按钮，可对选定的站点进行检测和更新。如果选择了“显示记录”复选框，将给出检测更新的信息。 主要内容 7.1 模板 7.2 库 7.3 实例 （5）建立完整的导航信息 在“文件”面板的站点根目录下单击鼠标右键，新建几个空文件“hbsq.html”、“hbmb.html”、“hbqh.html”、“hbjj.html”。用上一步的方法建立图层“layer4” “layer5” “layer6” “layer7”，在各个层中分别输入“海滨拾趣”、“海滨漫步”、“海滨情怀”、“海滨简介”等文本，并分别与相应的空文件“hbsq.html”、“hbmb.html”、“hbqh.html”、“hbjj.html”建立超级链接，效果如图7-7所示。 （6）创建库项目 在“资源”面板中，单击面板左侧的“库”按钮图标，打开“库”面板, 单击“库”面板右下角的“新建库项目”按钮图标，创建一个空白的库项目，为其命名为“star”。单击“库”管理器右下角的“编辑”按钮图标，打开库项目的编辑窗口，单击“插入”→“图像”菜单命令，在弹出的“选择图像源文件”对话框中选择star01.gif(一幅背景透明的闪烁星星的动画)插入到文档中。关闭该库文件回到模板的编辑页面中。