第9章 模板和库　课件

学习目标 了解“资源”面板的构成。 能够创建、编辑、删除模板。 能够利用模板创建网页。 能够建立库项目并使用库项目编辑网页。 能够在网站中合理使用模板或库提高网站制作效率。 能够利用已有的模板制作网站。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.2 库的建立与应用 9.3 商业网站模板的修改应用 本章内容 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 最终效果如图所示。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 （1）定义站点 新建文件夹“jididongwu1”，将素材文件夹“jididongwu1”中的所有文件夹和网页文件复制到“jididongwu1”文件夹中。在Dreamweaver CC 中定义站点，站点名称为“极地动物”，本地站点文件夹为“jididongwu1”文件夹。打开用于制作模板的网页beijixiong.html。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 （2）可编辑区域的建立与取消 1）将光标定位在要建立可编辑区域的位置，选择“当前位置：动物档案>>北极熊”中的“北极熊”。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 （2）可编辑区域的建立与取消 2）在“插入”面板中单击“常用”右侧的下拉按钮，将“插入”面板切换到“模板”部分。点击“可编辑区域”命令，自动弹出要求将文档转换为模板的提示框，点击“确定”按钮。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 （2）可编辑区域的建立与取消 3）在打开“新建可编辑区域”对话框中，修改可编辑区域的名称为“动物名称”，单击“确定”按钮，此处可编辑区域创建完成。。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 （2）可编辑区域的建立与取消 4）光标移到正文中动物名称“北极熊”的单元格中，在左下角状态栏中单击左右侧的<td>标记符，则文字所在的单元格被选中，点击模板面板中的“可编辑区域”命令，设名称为“动物名称1”，点击“确定”按钮。 同样的操作方法，将照片、动物属性、介绍文字所在的单元格定义为可编辑区域，名称分别为“照片”、“动物属性”、“介绍文字”。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 （2）可编辑区域的建立与取消 5）保存模板。单击菜单“文件”→“另存为模板”命令，打开“另存模板”对话框，“另存为”中输入“jididongwu”，单击“保存”按钮，将完成的模板保存下来。 6）保存为模板后，在站点中会生成模板文件夹“Templates”，其中有刚才保存模板“jididongwu.dwt”。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 （3）利用所建模板建立“海狮”的网页 1）选择“文件”→“新建”命令，打开“新建文档”对话框，在左侧单击“网站模板”选项，站点选择“极地动物”，在“站点‘极地动物’的模板”中选择“jididongwu”，选择“当模板改变时更新页面”复选框，在右侧“预览”框中可以预览模板的效果。单击“创建”按钮，即可创建基于模板的网页。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 （3）利用所建模板建立“海狮”的网页 2）使用模板创建的网页四周有黄色边框，右上角有黄色标签及模板名称。网页中可编辑区域被套上蓝色边框，只有可编辑区域的内容能够编辑。 9.1 第9章 模板和库 9.1 模板的创建与应用 9.1.1案例制作：使用模板制作“极地动物”网页 （3）利用所建模板建立“海狮”的网页 3）在“动物名称”、“动物名称1”、“动物属性”和“介绍文字”四处可编辑区域替换为“海狮”的相关信息。将光标定位在“照片”位置，将图片替换为“haishi1.jpg”。 4）将网页保存为“haishi.html”，按F12键预览。同样的方法可以创建其它页。 9.1 第9章 模板和库 9.1 模板的创建与应用 1. 资源面板 1）资源面板的打开 单击菜单“窗口”→“资源”命令打开“资源”面板，。 2）查看资源的 “站点”：列表显示站点的所有资源。 “收藏”：列表仅显示已经明确选择的