《网页设计与制作实用技术（第二版）-电子教案-齐建玲 CH13》由会员分享，可在线阅读，更多相关《网页设计与制作实用技术（第二版）-电子教案-齐建玲 CH13（28页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容： 模板原理 创建、使用和管理模板的方法 利用模板更新网页 创建管理库项目 利用库更新网页,第13章 利用模板和库设计网页,13.1 利用模板创建网页,Dreamweaver 模板是一种特殊类型的文档，也可以说是一种用来制作具有相同风格页面的“模子”，用户利用模板可以在短时间内设计大量风格相同或相近的页面。,13.1.1 模板原理,利用Dreamweaver CS5的模板技术可以创建具有相同页面布局的一系列文件，模板最大的好处还在于后期维护方便，可以快速的改变整个站点的布局和外观。,将现有的文档保存为模板的操作步骤： （1）在Dreamweaver CS5中打开已
2、有的网页。 （2）选择“文件”“另存为模板”命令，打开“另存模板”对话框，如图所示。 （3）在“站点”下拉列表框中选择站点名称，在“另存为”文本框中输入模板名称。如果选择“现存的模板”列表中的模板，则可用新的模板覆盖已有的模板。 （4）单击“保存”按钮，就把当前页面保存为模板。,13.1.2 创建模板,1. 将现有的文档保存为模板,2. 通过“资源”面板创建新模板,（1）选择“窗口”“资源”命令或按F11键，打开“资源”模板。 （2）单击左边的“模板”按钮，打开“资源”面板的“模板” 类别。 （3）单击“资源”面板右下角的“新建模板”按钮，这时在模板列表框中添加了一个“无标题”的模板。 （4）
3、输入模板名称，并保存模板，就创建了一个空白模板。,创建嵌套模板的方法如下： （1）创建一个基于模板的文档。 （2）选择“文件”“另存为模板”命令，或单击插入“模板”面板上的“创建嵌套模板”按钮，打开“另存模板”对话框，将新文档另存为模板。 （3）在新模板中可编辑区域添加其他内容。 （4）保存该模板。,3. 创建嵌套模板,模板创建完成后，就要为模板定义可编辑区域，没有定义可编辑区域的模板是不能被使用的，因为它的所有部分都是锁定的。“可编辑区域”是指基于模板的页面中可以更改的内容，而基于模板的页面中不可更改的部分为“不可编辑区域”或“锁定区域”。,13.1.3 在模板中可编辑区域,定义可编辑区域有
4、两种方法。一种是选择已有的一部分页面内容将它指定为可编辑区域，另一种是在当前光标处插入一个空的可编辑区域。(演示),1. 插入可编辑区域,2. 删除可编辑区域,如果已经将模板文件的一个区域定义为可编辑区域，而现在想要再次锁定它，使其为不可编辑区域，可执行“删除模板标记”操作。 （1）在文档或标签选择器中，选择想要更改的可编辑区域。 （2）按Delect键，即可删除该可编辑区域；如果选择“修改”“模板”“删除模板标记”命令，可以删除可编辑区域的标记，但区域还保留。,重复区域是模板的一部分，这一部分可以在基于模板的页面中重制多次。重复区域通常与表格一起使用，也可以为其它页面元素定义重复区域。,13
5、.1.4 在模板中创建重复区域,在模板中创建重复区域的方法如下： （1）确定创建重复区域的位置： （2）打开“新建重复区域”对话框。 （3）在“名称”框中为该模板区域输入唯一的名称。 （4）单击“确定”按钮。,1. 创建重复区域,2. 创建重复表格,使用重复表格可以创建包含重复行的表格格式的可编辑区域，还可以定义表格属性并设置哪些单元格可编辑。 在模板中创建重复表格的方法如下： （1）在“文档”窗口中，将插入点放在文档中想要插入重复表格的位置。 （2）打开 “插入重复表格”对话框。 （3）指定各个选项，然后单击“确定”按钮。,可选区域用于设置基于模板的文档为显示或隐藏。,13.1.5 在模板中
6、使用可选区域,在模板中插入不可编辑的可选区域的方法如下： （1）在“文档”窗口中，选择要设置为可选区域的元素。 （2）打开“新建可选区域”对话框。 （3）输入可选区域的名称；如果要设置可选区域的值，单击“高级”选项卡；然后单击“确定”按钮。,1. 插入不可编辑的可选区域,2.插入可编辑的可选区域,在模板中插入不可编辑的可选区域的方法如下： （1）在“文档”窗口中，选择要设置为可选区域的元素。 （2）选择“插入”“模板对象”“可编辑的可选区域”命令。或在“插入”面板的“常用”类别中，单击“模板”按钮，然后从弹出菜单中选择“可编辑的可选区域”。打开“新建可选区域”对话框。 （3）输入可选区域的名称
7、；如果要设置可选区域的值，单击“高级”选项卡；然后单击“确定”按钮。 。,13.1.6 在模板中指定可编辑标签属性,Dreamweaver CS5允许用户在根据模板创建的文档中修改指定的标签属性，还可以在页面中设置多个可编辑属性，这样，用户就可以在基于模板的文档中修改这些属性。,示范演示,创建基于模板新页面的方法是：选择“文件”“新建”命令，打开“新建文档”对话框，选择“模板中的页”选项卡，然后选择包含要使用的模板的站点；在“模板”列表中中选择需要的模板，单击“创建”按钮。,13.1.7 应用模板,1. 创建基于模板新页面,示范演示,在很多时候，已经有了大量未使用模板的页面，现在想要将其转换为
8、统一的外观，此时就可以利用将模板应用到现有文档的方法来统一这些页面的风格。,2. 将模板应用到现有文档,示范演示,13.1.8 管理模板,重新命名模板的方法如下： （1）打开“资源”面板的模板类别，选中要重命名的模板，在模板名称上再单击一次，即可激活其文本编辑状态；右击要重命名的模板，在打开的快捷菜单中选择“重命名”命令，同样可以激活其文本编辑状态。 （2）输入模板的新名称。 （3）单击模板名称区域外的任何位置，或按回车键，即可修改模板名称。,1. 重命名模板,2. 删除模板,在进行模板管理时，对于已经毫无用处的模板，应该及时删除。,3. 将文档与模板分离,如果要将文档与模板分离，可进行如下操
9、作： （1）打开使用了模板的文档。 （2）选择“修改”“模板”“从模板中分离”命令，就可以将文档与模板分离。,13.2 利用模板更新网页,13.2.1 修改页面附着的模板,示范演示,13.2.2 更新附着模板的页面,示范演示,库是一种特殊的Dreamweaver文件，其中包含已创建的单独的网页“资源”或资源拷贝的集合。如果只是想让页面具有相同的标题和脚注，而又具有不同的页面布局，可使用库项目存储标题和脚注。库项目是可以在多个页面中重复使用的存储页面元素，每当更改某个库项目的内容时，都可以更新所有使用该项目的页面。,13.3 利用库项目维护网页,13.3.1 创建库项目,1. 什么是库项目,2.
10、 创建库项目,可以将文档body部分中的任意元素创建库项目，这些元素包括文本、表格、表单、Java applets、插件、ActiveX元素、导航条和图像。也可以创建空白的库项目。,示范演示,在文档中插入库项目的方法如下： （1）将插入点放在文档窗口中想要插入库项目的地方。 （2）打开“资源”面板的库类别，执行以下操作之一： 选择一个库项目并用鼠标拖到光标所在处。 选择一个库项目，单击面板底部的“插入”按钮。 右击所选的库项目，从弹出的菜单中选择“插入”命令。,13.3.2 在文档中插入库项目,13.3.3 库项目的管理,（1）打开“资源”面板的库类别。 （2）选择库项目，库项目的预览出现在“
11、资源”面板的顶部，但不能在预览中进行任何编辑。 （3）单击面板底部的“编辑”按钮，或双击库项目。,1. 编辑库项目,2. 重命名库项目,（1）打开“资源”面板的库类别，选中要重新命名的库项目。 （2）执行以下操作之一，激活其文本编辑状态： 在选中的库项目上再次单击。 右击该库项目，在弹出的快捷菜单中选择“重命名”命令。 （3）为库项目重新输入一个新名称，保存更改。,3. 删除库项目,（1）打开“资源”面板的库类别，选中要删除的库项目。 （2）执行以下操作之一： 单击面板底部的“删除”按钮，并确认想要删除该项目。 按下Delete键。 右击该库项目，从弹出的快捷菜单中选择“删除”命令，并确认想要
12、删除该项目。,如果误删了有用的库项目，可以利用插入到文档中的库项目内容来重新创建库项目，方法如下： （1）在文档中选中插入库项目的内容。 （2）右击文档内容，从弹出的快捷菜单中选择“重建”命令，或单击库项目属性面板上的“重新创建”按钮，即可完成重建库项目，而且库项目仍以原来的名字命名。,4. 重新创建库项目,如果已经在文档中添加了库项目，又想在该文档中编辑此部分内容，则必须断开文档中的项目和库之间的连接，即将文档项目从源文件中分离。,5. 将库项目从源文件中分离,更新当前网页的方法是：在当前网页窗口选择“修改”“库”“更新页面”命令，系统出现一个确认窗口，单击“确定”按钮，完成当前网页的更新工作。,13.3.4 更新网页,1. 更新当前网页,2. 更新整个站点或所有使用特定库项目的文档,E N D,“另存模板”对话框,返 回,
