DreamweaverCS3网页设计培训教程 11 使用模板批量创建网页.ppt

Dreamweaver CS3网页设计培训教程 第11课 使用模板批量创建网页 本课要点 具体要求 本课导读 上机练习 本课要点 模板的创建与编辑 模板的应用 具体要求 熟悉模板的创建 熟悉可编辑区域的设置 掌握如何从模板新建网页 掌握如何为网页应用模板 掌握如何更新网页模板 本课导读 同一个网站中的所有网页一般都具有统一的风格，即采用大致相同的网页布局结构、版式、导航条和Logo等，如果在制作每一个网页时都重复制作这些内容，不仅会增加工作量，而且也不能统一对版式进行修改，利用模板可以很好地解决这个问题。 11.1 模板的创建与编辑 模板是Dreamweaver中提供的一种特殊的网页文档，其编辑方法和普通网页的编辑方法一样，只是可以在其中添加可编辑区域。所有应用了模板的网页都具有和模板相同的版式和内容，并可以在可编辑区域中输入新的内容。对模板进行修改后，所有应用模板的网页也会做相同的修改。 11.1 模板的创建与编辑 11.1.1 知识讲解 11.1.2 典型案例——创建“校园新闻”网页模板 11.1.1 知识讲解 在模板中添加可编辑区域后，便可通过修改这个区域创建其他网页。如果对模板的内容（如Logo、Banner和导航条）进行了修改，则使用该模板创建的所有网页都会被更新，从而提高网页制作的效率。 11.1.1 知识讲解 1.模板的创建 2.模板的编辑 1.模板的创建 模板必须保存在站点中，因此在创建模板前应先创建站点。在创建模板时，有将现有网页另存为模板和新建空白模板两种方法。 1）将网页另存为模板 2）创建空白模板 2.模板的编辑 模板创建好后，即可对模板进行编辑。模板的编辑包括创建可编辑区域、更改可编辑区域的名称和取消可编辑区域的标记。 1）创建可编辑区域 2）更改可编辑区域的名称 3）取消可编辑区域的标记 11.1.2 典型案例——创建“校园新闻”网页模板 案例目标 本案例将练习制作“校园新闻”网页模板。该模板中有两个可编辑区域，其中一个用于输入新闻标题，另一个用于输入新闻内容。 11.1.2 典型案例——创建“校园新闻”网页模板 操作思路 （1）完成站点“Templates”的创建，然后打开素材文件夹“11.1.2”中的网页“index.html”。 （2）将其保存成模板文档“index.dwt”。 （3）在该模板中创建可编辑区域。在创建可编辑区域时，需要对一些文本格式进行设置。 （4）对创建了可编辑区域的模板文档进行保存。 11.1.2 典型案例——创建“校园新闻”网页模板 操作步骤 具体操作步骤请教师参照软件和书中内容进行讲解。 11.1.2 典型案例——创建“校园新闻”网页模板 案例小结 本案例制作了一个网页模板，主要练习了创建模板、在模板中添加可编辑区域以及保存模板等操作。 使用模板能提高制作网页的效率，需要注意的是：一个网站并非只能创建一个模板，可根据需要创建多个模板，以适用于不同的网页。 11.2 模板的应用 完成了模板的创建和编辑后，就可以利用模板创建网页或对已有的网页应用模板了。一旦对模板进行修改，只需对应用了该模板的网页进行更新，即可对应用了该模板的网页一同进行修改，从而大大方便了整个网站中同类网页的制作。 11.2 模板的应用 11.2.1 知识讲解 11.2.2 典型案例——创建“校园新闻”网页 11.2.1 知识讲解 若要用模板创建新网页，可以使用【新建文档】对话框，并从任意站点中选择模板进行创建；也可以在【资源】面板中使用已有模板创建新网页。 11.2.1 知识讲解 1.在【新建文档】对话框中使用模板新建 网页 2.在【资源】面板中使用模板创建新网页 3.更新应用模板的网页 1.在【新建文档】对话框中使用模板新建网页 在【新建文档】对话框中，可选择任一站点的模板创建新网页，其具体操作步骤如下：（1）选择【文件】→【新建】命令，打开【新建文档】对话框。 （2）单击【模板中的页】选项，在【站点】列表框中选择相应的站点，然后在右侧的列表框中选择所需的模板。 （3）单击【创建】按钮，即可通过模板创建新网页。 2.在【资源】面板中使用模板创建新网页 在【资源】面板中，只能使用当前站点的模板创建网页，其具体操作步骤如下： （1）选择【窗口】→【资源】命令或按【F11】键，打开【资源】面板。 （2）在【资源】面板中单击左侧的【模板】按钮，查看当前站点中的模板。 （3）用鼠标右键单击所需的模板，在弹出的快捷菜单中选择【从模板新建】命令，即可使用模板新建一个网页文档。 3.更新应用模板的网页 修改模板后，需对应用了该模板的