[第6章模板、命令、“资源”面板和外部插件.pptVIP

第6章 模板、命令、“资源”面板和外部插件 6.1 【案例18】“硬件超市”模板和“硬件超市”网页 6.1.1 学习目标 “硬件超市”模板的显示效果如图6-1-1所示，使用“硬件超市”模板制作的“硬件超市”网页的显示效果如图6-1-2所示。 模板就是网页的样板，它有可编辑区和不可编辑区。不可编辑区的内容是不可以改变的，通常为标题栏、网页图标、框架结构、链接文字和导航栏等。可编辑区的内容可以改变，通常为具体的文字和图像内容，例如，“文字区1”栏和“图片区1”栏。 通常在一个网站中有成百上千个页面，而且每个页面的布局也常常相同，尤其是同一层次的页面，只有具体文字或图像内容不同。将这样的网页定义为模板后，相同的部分都被锁定，只有一部分内容可以编辑，避免了对无须改动部分的误操作。 6.1.2 操作过程 6.1.3 相关知识 1．创建模板和可编辑区域 （1）创建新模板 单击“文件”→“新建”菜单命令，弹出“新建文档”对话框，选中“类别”栏内的“模板页”选项，再选中“模板页”栏内的“HTML模板”选项，如图6-1-3所示。然后单击“创建”按钮，即可创建一个新模板页。 编辑完成后，单击“文件”→“另存为模板”菜单命令，弹出“另存模板”对话框，如图6-1-5所示。在“另存为”文本框中输入要保存的模板名称后，单击“保存”按钮，即可保存该模板。 单击“插入”（模板）栏中的“创建模板”按钮 ，弹出“另存模板”对话框，如图6-1-5所示。然后在“站点”下拉列表框内选择本地站点的名字，再在“另存为”文本框内输入模板的名字，最后单击“保存”按钮，即可完成模板的保存。 （2）设置模板网页的可编辑区域 模板网页的编辑主要是设置可编辑区域，其方法是：单击“插入”→“模板对象”→“可编辑区域”菜单命令，或单击“插入”（常用）栏“模板”快捷菜单中的“可编辑区域”按钮 ，弹出“新建可编辑区域”对话框，如图6-1-4所示。在“名称”文本框中输入一个名称，单击“确定”按钮，即可插入一个可编辑区域。 （3）将已有的HTML文件创建为模板 在Dreamweaver 8中打开一个网页。 定义可编辑区域：将光标置于需要增加可编辑区域的地方（右下部分），单击“插入”（常用）栏中的“模板”快捷菜单中的“可编辑区域”按钮，弹出Dreamweaver提示信息：“Dreamweaver将自动将此文档转换为模板”。 单击“确定”按钮，弹出“新建可编辑区域”对话框，如图6-1-4所示。在“名称”文本框中输入可编辑区域的名称，再单击“确定”按钮，这样，就新建了一个的可编辑区域。 单击“文件”→“另存为模板”菜单命令，弹出“另存模板”对话框，如图6-1-5所示。然后，在“站点”下拉列表框内选择本地站点的名字，再在“另存为”文本框内输入模板的名字，最后单击“保存”按钮，即可完成模板的保存。 2．使用模板制作网页 （1）使用模板创建新网页 单击“文件”→“新建”菜单命令，弹出“新建文档”对话框，单击“模板”标签，“新建文档”对话框变为“从模板新建”对话框。在“模板用于”列表框中，选择一个站点名称选项，在中间的列表框中选择要使用的模板名称，即可在“预览”栏内看到模板的缩略图，如图6-1-6所示。 如果选中了“当模板改变时更新页面”复选框，模板被修改后，所有应用该模板的页面将会自动更新。单击“创建”按钮，即可用选定模板制作网页。 以后就可以在该网页的可编辑区域内插入相应的内容，单击“文件”→“保存”菜单命令，弹出“另存为”对话框，选择路径和文件名，再单击“保存”按钮，即可完成网页的制作。 另外，单击“修改”→“模板”→“应用模板到页”菜单命令，弹出“选择模板”对话框，如图6-1-7所示。再选择新模板，单击“选定”按钮。 （2）在页面内使用新模板 在模板所在站点的文件夹内创建一个新的HTML网页。 单击“窗口”→“资源”菜单命令，弹出“资源”面板，单击该面板中的“模板”按钮 ，再单击模板文件的名称，此时的“资源”面板如图6-1-8所示。 用鼠标拖曳“正文”文件到页面中或单击“资源”面板中的“应用”按钮，网页将自动套用“正文”模板的内容。 如果打开一个使用了模板的网页，但是该网页使用的模板与新模板中可编辑区域的名字不相同，则系统会弹出一个如图6-1-9所示的对话框，要求用户选择将页面的内容放到新模板的哪个可编辑区域中。单击可编辑区域的名称，再在下边的“将内容移到新区域”下拉列表框中选择可编辑区域的名称，然后单击“确定”按钮，即可完成替换。 6.2 【案例19】“时尚外设展示”网页 6.2.1 学习目标