实验七利用模板和库设计网页.docx

1、实验七利用模板和库设计网页实验九 利用模板和库设计网页一、实验目的1掌握1）模板的原理2）创建、使用和管理模板以及利用模板更新网页的方法3）创建、管理库项目和利用库项目维护网页的方法2熟悉1）如何创建嵌套模板3了解1）模板、库文件及可编辑区域的HTML代码2）可选区域和重复区域的作用二、实验要求1理解模板和库的作用2学会在Dreamweaver CS4中创建、使用、和管理模板，以及用模板更新网页3学会在Dreamweaver CS4创建库项目、管理库项目以及用库维护网页三、实验内容和步骤说明：本实验中用到的素材均在09文件夹中。 操作题一、把现有的文档保存为模板-例如：把“index.htm”

2、网页保存为模板1打开“index.htm”网页。2选择“文件”“另存为模板”，或者单击插入“模板”面板上的“创建模板”按钮，打开“另存为模板”对话框，如图9.1。图9.13在“站点”下拉列表框中选择站点名称，在“另存为”文本框中输入模板名称。如果选择“现存的模板”列表中的模板，则可以用新的模板覆盖已有的模板。4单击“保存”按钮，把当前页面保存为模板。系统将自动在站点根目录下创建Templates文件夹，并将创建的模板文件保存在该文件夹中，扩展名为.dwt，如图9.2。图9.2操作题二、创建新模板方法一：通过资源面板创建新模板1选择“窗口”“资源”命令，打开“资源”模板2单击左边的“模板”按钮，

3、打开“资源”面板的模板类别。面板的上方是模板的预览，下方是模板文件列表，如图9.3。图9.33单击“资源”面板右下角的“新建模板”按钮，这时在模板列表中添加了一个无标题的模板，如图9.4。图9.44输入模板名称，并保存模板，即创建了一个空白模板。5单击“资源”面板右下角的“编辑”按钮，即可在“文档”窗口打开该模板文档。方法二：通过菜单创建新模板1执行“文件”“新建”命令，打开新建文档对话框，在左侧选择“空白页”，在页面类型中选择“HTML模板”，布局选择“无”。如图9.5图9.52.单击“创建”按钮，创建一个空白模板页。根据自己的设计完成模板页。3.完成设计后，单击“文件”“保存”，进行保存。

4、操作题三、在“index”网页模板中定义可编辑区域1打开index.dwt文件。2在“文档”窗口中选择想要设置为可编辑区域的文本或内容，或者将插入点放在想要插入可编辑区域的地方3选择“插入”“模板对象”“可编辑区域”命令，或者点击插入“模板”面板上的“可编辑区域”按钮。4在“名称”文本框中输入该区域名称，注意不能对特定模板中的多个可编辑区域使用相同的名字，也不要在“名称”栏中使用特殊字符，例如：双引号、单引号、尖括号和符号&等。在Dreamweaver CS4默认的区域名称为EditRegion1、EditRegion2等。5单击“确认”按钮，如图9.6“zhengwen”所标示的区域。图9.

5、6操作题五、删除可编辑区域1单击可编辑区域左上角的选项卡以选中它。2按Delete键，即可删除该可编辑区域；如果选择“修改”“模板”“删除模板标记”命令，可以删除可编辑区域的标记，但是区域还保留。操作题七、将模板应用到现有文档1打开aa.htm。2在“文档”窗口中单击，然后选择“修改”“模板”“应用模板到页.”命令，打开“选择模板”对话框。选择所需的站点，并从“模板”列表中选择一个模板并单击“选定”按钮。如图9.8图9.83如果文档中有不能自动指定到模板区域的内容，则会出现“不一致的区域名称”对话框，如图9.9。对话框中列出了可以应用到模板中的所有可编辑区域，可以通过这些可编辑区域来为内容选择

6、目标。图9.94单击“取消”按钮，可以取消将模板应用到文档的操作。操作题八、管理模板的相关操作（一）重命名模板将站点中的untitled.dwt模板重命为lx.dwt。写出自己的操作步骤。（二）删除模板删除lx.dwt，写出自己的操作步骤。（二）将文档与模板分离 1打开使用了模板的文档。 2选择“修改”“模板”“从模板中分离”命令，即可将文档与模板分离。文档与模板分离后，文档中再没有锁定区域，所有的地方都是可编辑的。一旦文档与模板分离，就再不能按模版进行更新了。操作题十、把“index.htm”网页中的最后一行内容保存为库项目1打开“index.htm”网页，选中最后一行内容。2选择“窗口”“

7、资源”命令，打开“资源”面板，单击“资源”面板上的“库”按钮，打开库面板，选定内容拖动到“资源”面板的“库”类别中。如图9.14图9.143为新建的库项目输入名称contact，然后单击名称区域之外的任意位置或按回车键，即可完成一个新建库项目的创建。思考：保存库项目后，查看站点文件中文件夹的变化并写出库项目的文件扩展名及所在文件夹的名称。（库项目（扩展名为.lbi），通常保存在本地站点的Library文件夹下。）操作题十一、创建一个空白的库项目1单击“资源”面板中“库”类别右下角的“新建库项目”按钮，在“资源”面板的库项目列表中出现一个新的未命名库项目。操作题十二、在文档中插入库项目1创建一个

8、新的页面，将插入点放在文档窗口中想要插入库项目的地方。2打开“资源”面板的库类别，执行以下操作之一：（1）选择一个库项目并用鼠标拖到光标所在处。（2）选择一个库项目，单击面板底部的“插入”按钮。（3）右击所选的库项目，从弹出菜单中选择“插入”命令。3. 把页面文件保存为lib.htm。操作题十三、库项目管理的相关操作（一） 编辑库项目1打开“资源”面板的库类别。2选择库项目，库项目的预览出现在“资源”面板的顶部，但不能在预览中进行任何编辑。3单击面板底部的“编辑”按钮或者双击库项目此时，Dreamweaver CS4将打开一个用于编辑该库项目的新窗口。此窗口类似于“文档”窗口，用户可以重新编辑

9、库项目。编辑完毕保存更改，系统会弹出“更改库项目”对话框，如图9.15。图9.151 单击“更新”会出现更新页面对话框，如图9.16。图9.166在“查看”下拉列表中执行以下操作之一： （1）选择“整个站点”，然后从相邻的下拉列表中选择站点名称，会更新所选站点中的所有页面，使其使用所有库项目的当前版本。 （2）选择“文档使用”，然后从相邻的下拉列表中选择库项目名称，会更新当前站点中所有使用所选项目的网页。7单击“开始”按钮。（二）重命名库项目1打开“资源”面板的库类别，选中要重新命名的库项目。2执行以下操作之一激活其文本编辑状态： （1）在选项的库项目上再次单击。 （2）右击该库项目，在弹出的

10、快捷菜单中选择“重命名”命令。3为库项目重新输入一个新名称，保存更改。同样会弹出“更新库项目”对话框，处理方法同库项目编辑实验。（三）删除库项目1打开“资源”面板的库类别，选中要删除的库项目。2执行以下操作之一： （1）单击面板底部的“删除”按钮，并确认想要删除给项目。 （2）按下Delete键。 （3）右击该库项目，从弹出的快捷菜单中选择“删除”命令，并确认想要删除该项目。（四）重新创建库项目如果误删了有用的库项目，可以利用插入到文档中的库项目内容来重新创建项目，操作步骤如下：1在文档中选中插入库项目的内容。2右击文档内容，从弹出的快捷菜单中选择“重建”命令，或单击库项目属性面板上的“重新创

11、建”按钮，即可完成重建库项目，而且库项目仍以原来的名字命名。（五）将库项目从源文件中分离。1在当前文档中选择库项目内容。2单击库项目属性面板上的“从源文件中分离” 按钮，或者右击库项目内容，从弹出的快捷菜单中选择“从源文件中分离”命令。3系统会弹出一个警告对话框（如图9.17），确认后，即可将项目从源文件中分离。图9.17操作题十四、利用库项更新网页（一）更新当前页面1在当前网页窗口中选择“修改”“库”“更新当前页”命令。2单击“确定”按钮，完成当前网页的更新工作。（二）更新整个网站或所有使用特定库项目的文档1选择“修改”“库”“更新页面”命令，打开“更新页面”对话框（如图9.18）。图9.1

12、82在“更新”选项中选择“库项目”，如果要同时更新模板，还要选择“模板”选项。3在“查看”下拉列表中执行以下操作之一： （1）选择“整个站点”，然后从相邻的下拉列表中选择站点名称，会更新所选站点中的所有页面，使其使用所有库项目的当前版本。 （2）选择“文档使用”，然后从相邻的下拉列表中选择库项目名称，会更新当前站点中所有使用所选项目的网页。4单击“开始”按钮。四、操作技巧与注意事项操作技巧：1 在对模板和库进行管理时，直接用“资源”面板上的工具比较快捷。2 在网页中插入库项目时，用鼠标把要插入的库项目直接拖到网页上要插入的位置比较快捷。注意事项：1 不要将模板移动到Templates文件夹之外或者将任何非模板文件放在Templates文件夹中。2 可以将整个表格或者单个单元格定义为可编辑区域，但是不能将多个单元格定义为一个可编辑区域。3 删除一个库项目后，将无法使用“撤销”来恢复，但可以重新创建。4 库项目被删除以后，不会更改任何使用该项目的文档的内容。五、思考题1模板的作用是什么？库项目的作用是什么？2在编辑使用了模板的网页时，为什么要将文档与模板分离？如何分离？3如果通过修改库项目来更新所有应用该库项目的网页，应该如何操作？