实验九 利用模板和库设计网页.docVIP

实验九 利用模板和库设计网页 一、实验目的 1．掌握 1）模板的原理 2）创建、使用和管理模板以及利用模板更新网页的方法 3）创建、管理库项目和利用库项目维护网页的方法 2．熟悉 1）如何创建嵌套模板 3．了解 1）模板、库文件及可编辑区域的HTML代码 2）可选区域和重复区域的作用 二、实验要求 1．理解模板和库的作用 2．学会在Dreamweaver CS4中创建、使用、和管理模板，以及用模板更新网页 3．学会在Dreamweaver CS4创建库项目、管理库项目以及用库维护网页 三、实验内容和步骤 说明：本实验中用到的素材均在09文件夹中。 操作题一、把现有的文档保存为模板----例如：把“index.htm”网页保存为模板 1．在Dreamweaver CS4中打开“index.htm”网页。 2．选择“文件”(“另存为模板…”，或者单击插入“模板”面板上的“创建模板”按钮，打开“另存为模板”对话框，如图9.1。 图9.1 3．在“站点”下拉列表框中选择站点名称，在“另存为”文本框中输入模板名称。如果选择“现存的模板”列表中的模板，则可以用新的模板覆盖已有的模板。 4．单击“保存”按钮，把当前页面保存为模板。系统将自动在站点根目录下创建Templates文件夹，并将创建的模板文件保存在该文件夹中，扩展名为.dwt，如图9.2。 图9.2 操作题二、创建新模板 方法一：通过资源面板创建新模板 1．选择“窗口”(“资源”命令，打开“资源”模板 2．单击左边的“模板”按钮，打开“资源”面板的模板类别。面板的上方是模板的预览，下方是模板文件列表，如图9.3。 图9.3 3．单击“资源”面板右下角的“新建模板”按钮，这时在模板列表中添加了一个无标题的模板，如图9.4。 图9.4 4．输入模板名称，并保存模板，即创建了一个空白模板。 5．单击“资源”面板右下角的“编辑”按钮，即可在“文档”窗口打开该模板文档。 方法二：通过菜单创建新模板 1．执行“文件”(“新建”命令，打开新建文档对话框，在左侧选择“空白页”，在页面类型中选择“HTML模板”，布局选择“无”。如图9.5 图9.5 2.单击“创建”按钮，创建一个空白模板页。根据自己的设计完成模板页。 3.完成设计后，单击“文件”(“保存”，进行保存。 操作题三、在“index”网页模板中定义可编辑区域 1．打开index.dwt文件。 2．在“文档”窗口中选择想要设置为可编辑区域的文本或内容，或者将插入点放在想要插入可编辑区域的地方 3．选择“插入”(“模板对象”(“可编辑区域”命令，或者点击插入“模板”面板上的“可编辑区域”按钮。 4．在“名称”文本框中输入该区域名称，注意不能对特定模板中的多个可编辑区域使用相同的名字，也不要在“名称”栏中使用特殊字符，例如：双引号、单引号、尖括号和符号等。在Dreamweaver CS4默认的区域名称为EditRegion1、EditRegion2等。 5．单击“确认”按钮，如图9.6“zhengwen”所标示的区域。 图9.6 操作题五、删除可编辑区域 1．单击可编辑区域左上角的选项卡以选中它。 2．按Delete键，即可删除该可编辑区域；如果选择“修改”(“模板”(“删除模板标记”命令，可以删除可编辑区域的标记，但是区域还保留。 操作题六、创建基于模板的新页面 1．选择“文件”(“新建”命令，打开新建文档对话框，左边选择“模板中的页”标签，在中间选择站点名称，右侧选择需要用到的模板文件。如图9.7 图9.7 2．单击“创建”按钮，创建新的网页。 操作题七、将模板应用到现有文档 1．打开aa.htm。 2．在“文档”窗口中单击，然后选择“修改”(“模板”(“应用模板到页...”命令，打开“选择模板”对话框。选择所需的站点，并从“模板”列表中选择一个模板并单击“选定”按钮。如图9.8 图9.8 3．如果文档中有不能自动指定到模板区域的内容，则会出现“不一致的区域名称”对话框，如图9.9。对话框中列出了可以应用到模板中的所有可编辑区域，可以通过这些可编辑区域来为内容选择目标。 图9.9 4．单击“取消”按钮，可以取消将模板应用到文档的操作。 操作题八、管理模板的相关操作 （一）重命名模板 将站点中的untitled.dwt模板重命为lx.dwt。写出自己的操作步骤。 （二）删除模板 删除lx.dwt，写出自己的操作步骤。 （二）将文档与模板分离 1．打开使用了模板的文档。 2．选择“修改”(“模板”(“从模板中分离”命令，即可将文档与模板分离。 文档与模板分离后，文档中再没有锁定区域，所有的地方都是可编辑的。一旦文档与模板分离，就再不能按模版进行更新了。 操作题九、利用模板更新网页 修改页面附着的模板 打开基于模板的文档aa.htm，选择“