中职高教版高二《网页设计与制作》任务7.2 制作网页模板课件

项目7 综合网页制作与发布 任务7.2 制作网页模板 1 CONTENTS 01 活动1 创建网页模板 02 活动2 批量制作网页 01 创建网页模板 模板是DreamweaverCS6中提供的一种特殊的页面文档，当需要制作某种带有共同格式和特征的文档时，可以首先设计一个模板文档，然后利用模板文档制作其它网页。 “模板”文件与常规网页文档有很大的区别，它使用专门的“.dwt”格式，而非传统“.html”格式。 【网页模板】 5 （1）创建模板。 （2）另存为模板。 （3）为模板添加可编辑区域。 【作业步骤】 6 （1）使用“新建文档”对话框创建 在Dreamweaver CS6中，选择【文件】/【新建】命令，打开“新建文档”对话框，在其中选择“空模板”选项卡，在“模板类型”列表框中选择“HTML模板”选项，在“布局”列表框中选择一种布局样式，单击“创建“按钮，完成创建。 【作业助手1】创建网页模板的三种方式 使用“新建文档”对话框创建模板 7 （2）在“资源”浮动面板中创建 选择【窗口】/【资源】命令，打开“资源”浮动面板，单击其左侧的“模板”按钮 切换到“模板”分类，再单击“新建模板”按钮 ，新建模板。 【作业助手1】创建网页模板的三种方式 使用“插入”浮动面板创建模板 8 （3）使用“插入”浮动面板或菜单命令创建 新建或打开一个普通的HTML文档，然后在“插入”浮动面板的“常用”分类列表中单击“模板”按钮 ，在弹出的下拉列表中选择“创建模板”选项或选择【插入】/【模板对象】/【创建模板】命令。 【作业助手1】创建网页模板的三种方式 使用“资源”浮动面板创建模板 9 （1）通过菜单命令插入 在“模板”中目标位置定位插入点（或选中目标元素），选择【插入】/【模板对象】/【可编辑区域】命令（或按Ctrl+Alt+V组合键），打开“新建可编辑区域”对话框，在“名称”文本框中为添加的可编辑区域命名，单击“确定”按钮即可完成插入“可编辑区域”的操作。 【作业助手2】插入“可编辑区域”的两种方法 通过菜单命令插入可编辑区域 10 （2）通过“插入”浮动面板插入 在“模板”中目标位置定位插入点（或选中目标元素），在“插入”浮动面板的“常用”分类列表中单击“模板”按钮 ，在弹出的下拉列表中选择“可编辑区域”选项，在打开的对话框中进行命名后，单击“确定”按钮，完成插入“可编辑区域”的操作。 【作业助手2】插入“可编辑区域”的两种方法 通过“插入”浮动面板插入可编辑区域 11 Dreamweaver CS6为模板中的区域定义了4种主要的区域 (1)可编辑区域：该区域是基于“模板”文档中未锁定的区域，它是“模板”用户可以编辑的部分。要使“模板”生效，至少应包含一个“可编辑区域”。 (2)重复区域：该区域是文档中设置为重复的布局部分，如可设置重复一个表格行。重复部分通常是可编辑的。“重复区域”分为两类：重复区域和重复表格。 (3)可选区域：该区域是“模板”中可选的部分，用于保存可能在基于“模板”的文档中出现的内容，可设置判断条件来使可选区域中的内容根据显示或隐藏。 (4)可编辑的可选属性：该区域是可编辑区域与可选区域相结合的产物。 【知识链接】 12 02 批量制作网页 （1）新建基于模板的网页。 （2）在网页中添加内容。 （3）保存并预览。 【作业步骤】 15 【新建基于模板的网页】 新建基于模板的网页 16 将可编辑区域中的内容删除，然后输入文字、插入图像、表格，最后保存预览。 【在网页中添加内容】 效果图 17 （1）通过菜单命令套用模板新建或打开目标网页文档，选择【修改】/【模板】/【应用模板到页】命令，打开“选择模板”对话框，在“模板”列表框中选择需套用的模板，单击“选定”按钮即可在当前网页文档中套用所选模板。 【作业助手1】将模板应用到现有网页文档 通过菜单命令套用模板 18 （2）通过“插入”浮动面板套用模板新建或打开目标网页文档，选择【窗口】/【资源】命令，打开“资源”浮动面板，单击 按钮切换到“模板”分类，选中目标“模板”后，单击“应用”按钮，可将“模板”套用到当前网页文档。 【作业助手1】将模板应用到现有网页文档 通过“插入”浮动面板套用模板 19 （1）更新当前的文档 在基于某个模板的网页文档中选择【修改】/【模板】/【更新当前页】命令，可对当前网页文档进行更新操作。 【作业助手2】网页模板的维护与更新 更新当前文档 20 （2）更新所有文档 选择【修改】/【模板】/【更新页面】命令，可打开“更新页面”对话框，在该对话框中可进行更新的参数设置，实现所有文档的更新。 【作业助手2】网页模板的维护与更新 更新所有文档 更新模板文件 21 分离模板的方法为：打开需要分离的基