12使用模板创建页面.pptx

使用模板创建页面教学目的教学目的 了解模板及其基本特点了解模板及其基本特点 掌握模板的创建、使用与保存掌握模板的创建、使用与保存 掌握使用模板创建页面的方法与技巧掌握使用模板创建页面的方法与技巧本章内容本章内容r 模板简介模板简介r 创建创建模板模板r 使用资源模板使用资源模板r 定义模板可编辑区域定义模板可编辑区域r 创建基于模板的文档创建基于模板的文档r 设置模板参数设置模板参数r 模板应用模板应用模板简介模板简介v 可编辑区域可编辑区域l 允许修改允许修改l 标题与内容标题与内容v 不可编辑区域不可编辑区域l 只在模板中方可修改只在模板中方可修改l 页面整体风格一致页面整体风格一致模板文件的保存模板文件的保存 站点的模板文件保存在本地站点目录下的模板文件夹中，模板文件的扩站点的模板文件保存在本地站点目录下的模板文件夹中，模板文件的扩站点的模板文件保存在本地站点目录下的模板文件夹中，模板文件的扩站点的模板文件保存在本地站点目录下的模板文件夹中，模板文件的扩展名为展名为展名为展名为.dwt.dwt。如果模板文件夹不存在，当保存新模板时。如果模板文件夹不存在，当保存新模板时。如果模板文件夹不存在，当保存新模板时。如果模板文件夹不存在，当保存新模板时DreamweaverDreamweaver将自动将自动将自动将自动创建一个。打开站点面板就可以看到创建一个。打开站点面板就可以看到创建一个。打开站点面板就可以看到创建一个。打开站点面板就可以看到。模板文件夹模板文件夹创建模板创建模板v 将现有文件保存为模板将现有文件保存为模板v 创建空白模板创建空白模板将现有文件保存为模板将现有文件保存为模板 选择选择“文件文件”“”“打开打开”命令打开一个现有文档。命令打开一个现有文档。在在Dreamweaver文档窗口中编辑该文档。文档窗口中编辑该文档。编辑完毕后，选择编辑完毕后，选择“文件文件”“”“另存为模板另存为模板”命令，出现命令，出现“另存为模板另存为模板”对话框。对话框。在该对话框中进行如下设置：在该对话框中进行如下设置：在在在在“站点站点站点站点”下拉菜单中选取站点。下拉菜单中选取站点。下拉菜单中选取站点。下拉菜单中选取站点。在在在在“另存为另存为另存为另存为”文本框中输入模板名称。文本框中输入模板名称。文本框中输入模板名称。文本框中输入模板名称。单击单击单击单击“保存保存保存保存”按钮，将模板文件保存到站点的模板文件夹中。按钮，将模板文件保存到站点的模板文件夹中。按钮，将模板文件保存到站点的模板文件夹中。按钮，将模板文件保存到站点的模板文件夹中。创建空白模板创建空白模板1打开打开Dreamweaver资源面板资源面板 选择选择“窗口窗口”“”“资源资源”命令，或按下快捷键命令，或按下快捷键F11F11。单击资源面板左侧的模板按钮单击资源面板左侧的模板按钮 ，打开模板分类，在列表中显示当前站点所有的模，打开模板分类，在列表中显示当前站点所有的模板文件，列表的顶部可以预览选择的模板。板文件，列表的顶部可以预览选择的模板。模板按钮模板按钮创建空白模板创建空白模板2单击资源面板底部的新建模板按钮单击资源面板底部的新建模板按钮 ，在资源面板的列表中出现名为，在资源面板的列表中出现名为Untitled的的新模板。新模板。3.为该模板输入名称为该模板输入名称Danny，按下，按下Enter键，如图所示为创建了一个新的空白模板键，如图所示为创建了一个新的空白模板Danny。使用资源模板使用资源模板v 编辑模板编辑模板v 应用模板应用模板v 重命名模板重命名模板v 删除模板删除模板编辑模板编辑模板1在资源面板中选择要编辑的模板文件，然后执行下列步骤之一在资源面板中选择要编辑的模板文件，然后执行下列步骤之一 双击模板名称。双击模板名称。单击单击资源面板底部工具栏上的编辑按钮单击单击资源面板底部工具栏上的编辑按钮 。2在文档窗口中打开并编辑模板文件，定义可编辑区域。在文档窗口中打开并编辑模板文件，定义可编辑区域。3.保存编辑好的模板文件。保存编辑好的模板文件。如果模板没有定义任何可编如果模板没有定义任何可编辑区域，将弹出如图辑区域，将弹出如图11.511.5所所示的警告框，警告目前模板示的警告框，警告目前模板不包含任何可编辑区域，单不包含任何可编辑区域，单击击“应用应用”按钮保存该模板。按钮保存该模板。因为不包含任何可编辑区域，因为不包含任何可编辑区域，虽然可以编辑该模板文件，虽然可以编辑该模板文件，但是不能编辑基于该模板的但是不能编辑基于该模板的文档。文档。应用模板应用模板 打开打开文档。文档。在资源面板的列表中选取要应用的模板。在资源面板的列表中选取要应用的模板。单击资源面板底部工具栏上的单击资源面板底部工具栏上的 按钮。按钮。重命名模板重命名模板 在资源面板的列表中单击选择模板，稍顿，再次单击。在资源面板的列表中单击选择模板，稍顿，再次单击。当名称变为可编辑时，输入新名称。当名称变为可编辑时，输入新名称。按回车键，或者单击其他地方。按回车键，或者单击其他地方。双击模板名称将在双击模板名称将在文档窗口中打开模文档窗口中打开模板文件。右击模板板文件。右击模板名称，在弹出的快名称，在弹出的快捷菜单中选择捷菜单中选择“重重命名命名”命令，也可命令，也可以完成重命名模板以完成重命名模板的操作。的操作。删除模板删除模板 在资源面板的列表中选择要删除的模板，单击底部工具栏上的删除按钮，经确认后删在资源面板的列表中选择要删除的模板，单击底部工具栏上的删除按钮，经确认后删除该模板。除该模板。模板文件删除后，基模板文件删除后，基于该模板的文档仍保于该模板的文档仍保留着原来的结构和属留着原来的结构和属性，这是因为这些文性，这是因为这些文档并未从模板分离，档并未从模板分离，如果要同模板分离，如果要同模板分离，选择选择“修改修改”“模模板板”“从模板中分从模板中分离离”命令即可。命令即可。定义模板可编辑区域定义模板可编辑区域v 新建可编辑区域新建可编辑区域v 删除可编辑区域删除可编辑区域非编辑区域非编辑区域可编辑区域可编辑区域新建可编辑区域新建可编辑区域 如果模板中没有定义可编辑区域，基于该模板的文档就不能进行编辑。如果模板中没有定义可编辑区域，基于该模板的文档就不能进行编辑。如果模板中没有定义可编辑区域，基于该模板的文档就不能进行编辑。如果模板中没有定义可编辑区域，基于该模板的文档就不能进行编辑。所以，在应用模板之前，必须定义模板的可编辑区域。所以，在应用模板之前，必须定义模板的可编辑区域。所以，在应用模板之前，必须定义模板的可编辑区域。所以，在应用模板之前，必须定义模板的可编辑区域。1选择模板文件中要转换为可编辑区域的内容。选择模板文件中要转换为可编辑区域的内容。2.执行下列操作之一：执行下列操作之一：选择选择“插入插入”“”“模板对象模板对象”“”“可编辑区域可编辑区域”命令。命令。右击选定的内容，从快捷菜单中选择右击选定的内容，从快捷菜单中选择“模板模板”“”“可编辑区域可编辑区域”命令。命令。单击常用面板模板按钮列表的单击常用面板模板按钮列表的可编辑区域可编辑区域按钮。按钮。1在打开的在打开的“新建新建可编辑区域可编辑区域”对话框中，为可编辑区域输入惟一的名称。对话框中，为可编辑区域输入惟一的名称。新建可编辑区域新建可编辑区域 模板中的可编辑区域被高亮显示的矩形外框包围起来，可编辑区域的名称显模板中的可编辑区域被高亮显示的矩形外框包围起来，可编辑区域的名称显示在左上角。示在左上角。可以将整个表格或者单个的可以将整个表格或者单个的单元格定义为可编辑，但是单元格定义为可编辑，但是不能将多个单元格定义为可不能将多个单元格定义为可编辑。层和层中的内容是隔编辑。层和层中的内容是隔离的元素。若将层定义为可离的元素。若将层定义为可编辑，则既可以改变层的内编辑，则既可以改变层的内容，也可以改变层的位置；容，也可以改变层的位置；若将层的内容定义为可编辑，若将层的内容定义为可编辑，则只能改变层的内容，而不则只能改变层的内容，而不能改变其位置。能改变其位置。可编辑区域名可编辑区域名删除可编辑区域删除可编辑区域 选择模板中要删除的可编辑区域。选择模板中要删除的可编辑区域。选择命令选择命令“修改修改”“”“模板模板”“”“删除模板标记删除模板标记”。锁定区域锁定区域可编辑区域可编辑区域只有模板才可以只有模板才可以删除可编辑区域，删除可编辑区域，基于模板的文档基于模板的文档不能执行该操作。不能执行该操作。创建基于模板的文档创建基于模板的文档v 使用新建文档对话框使用新建文档对话框v 使用资源面板使用资源面板v 更新基于模板的文档更新基于模板的文档v 将文档同模板分离将文档同模板分离使用新建文档对话框创建基于模板的文档（一）使用新建文档对话框创建基于模板的文档（一）在选择命令在选择命令“文件文件”“”“新建新建”，打开，打开“新建文档新建文档”对话框。对话框。选择选择“模板模板”选项卡，在选项卡，在“模板用于模板用于”列表中选择包含所需模板的站点。列表中选择包含所需模板的站点。选择需要的模板，在默认情况下，选择选择需要的模板，在默认情况下，选择“当模板改变时更新页面当模板改变时更新页面”复选框，当改变模复选框，当改变模板文件后，基于模板的文件将自动更新。板文件后，基于模板的文件将自动更新。单击单击“创建创建”按钮将创建基于模板的新文档。按钮将创建基于模板的新文档。使用新建文档对话框创建基于模板的文档（二）使用新建文档对话框创建基于模板的文档（二）所基于的所基于的模板名称模板名称使用资源面板创建基于模板的文档使用资源面板创建基于模板的文档在资源面板中执行下列操作，均可创建基于模板的文档：在资源面板中执行下列操作，均可创建基于模板的文档：将选定的模板从资源面板中拖到文档中。将选定的模板从资源面板中拖到文档中。选定模板后，单击资源面板底部工具栏上的应用按钮。选定模板后，单击资源面板底部工具栏上的应用按钮。右击要使用的模板文件，在弹出的快捷菜单中选择右击要使用的模板文件，在弹出的快捷菜单中选择“从模板新建从模板新建”命令。命令。单击资源面板上的单击资源面板上的模板图标显示当前模板图标显示当前站点的模板站点的模板 更新基于模板的文档更新基于模板的文档1 1修改模板修改模板修改模板修改模板 选择选择“修改修改”“”“模板模板”“”“打开附加模板打开附加模板”命令。命令。在在Dreamweaver文档窗口中修改模板内容。文档窗口中修改模板内容。保存修改后的模板。保存修改后的模板。2 2更新基于模板的文档更新基于模板的文档更新基于模板的文档更新基于模板的文档 选择选择“修改修改”“”“模板模板”“”“更新当前页更新当前页”命令命令，或者在，或者在资源面板上资源面板上右击模板名称，右击模板名称，从快捷菜单中选择从快捷菜单中选择“更新当前页更新当前页”命令命令。更新基于模板的文档更新基于模板的文档3 3更新整个站点或基于模板的所有文档更新整个站点或基于模板的所有文档更新整个站点或基于模板的所有文档更新整个站点或基于模板的所有文档 选择选择“修改修改”“”“模板模板”“”“更新页面更新页面”命令，打开命令，打开“更新页面更新页面”对话框。对话框。在在“查看查看”下拉菜单中选择要更新的项目。下拉菜单中选择要更新的项目。整个站点：选择该项，然后从后面的下拉菜单中选择站点整个站点：选择该项，然后从后面的下拉菜单中选择站点名称，将更新选定站点中所有基于模板创建的页面。名称，将更新选定站点中所有基于模板创建的页面。文件使用：选择该项，然后从后面的下拉菜单中选择模板文件使用：选择该项，然后从后面的下拉菜单中选择模板名称，则更新当前站点中所有基于选定模板创建的页面。名称，则更新当前站点中所有基于选定模板创建的页面。更新基于模板的文档更新基于模板的文档 在选择在选择“更新更新”域中的域中的“模板模板”复选框。复选框。单击单击“开始开始”按钮，按钮，Dreamweaver将更新文件。若选择将更新文件。若选择“显示记录显示记录”复选框，复选框，Dreamweaver将显示更新信息。将显示更新信息。将文档同模板分离将文档同模板分离 当修改页面中的可编辑区域和非编辑区域时，必须将页面和模板分离。选择当修改页面中的可编辑区域和非编辑区域时，必须将页面和模板分离。选择“修修改改”“”“模板模板”“”“从模板中分离从模板中分离”命令，即可将页面同模板分离，此时，可以编辑命令，即可将页面同模板分离，此时，可以编辑页面中的所有区域。页面中的所有区域。设置模板参数设置模板参数 模板中定义的可编辑区域和非编辑区域被高亮显示的矩形边框包围，通过设置可模板中定义的可编辑区域和非编辑区域被高亮显示的矩形边框包围，通过设置可以改变这些高亮颜色的属性，以区分可编辑区域和非编辑区域。以改变这些高亮颜色的属性，以区分可编辑区域和非编辑区域。选择选择“编辑编辑”“”“首选参数首选参数”命令，在打开的首选参数对话框中选择命令，在打开的首选参数对话框中选择“标记色彩标记色彩”选项，然后在右边域中设置高亮显示属性。选项，然后在右边域中设置高亮显示属性。标记色彩标记色彩设置模板参数设置模板参数 单击单击“可编辑区域可编辑区域”色盘选取一种高亮颜色，或者在文本框中输入高亮颜色对应的十色盘选取一种高亮颜色，或者在文本框中输入高亮颜色对应的十六进制代码。六进制代码。在在“锁定的区域锁定的区域”域中设置非编辑区域的高亮颜色，方法同上。域中设置非编辑区域的高亮颜色，方法同上。选择选择“显示显示”复选框确定在文档窗口中是否显示设定的高亮颜色。复选框确定在文档窗口中是否显示设定的高亮颜色。选择选择“查看查看”“”“可视化助理可视化助理”“”“不可见元素不可见元素”命令，可以显示非可见元素。命令，可以显示非可见元素。模板应用模板应用v 模板创建模板创建v 模板保存模板保存v 模板应用模板应用模板创建模板创建1在在Dreamweaver文档窗口中新建一个文档。文档窗口中新建一个文档。2.在文档中插入四行一列的表格以创建页面的大体框架。在文档中插入四行一列的表格以创建页面的大体框架。3.选中表格中的第一行或将光标放在第一行内，单击属性面板上的拆分单元格为行选中表格中的第一行或将光标放在第一行内，单击属性面板上的拆分单元格为行或列按钮或列按钮 ，将第一行分割成两个单元格。，将第一行分割成两个单元格。4在第一个单元格中插入标题图片，在第二个单元格中插入广告条幅。在第一个单元格中插入标题图片，在第二个单元格中插入广告条幅。5.在表格中的第二行插入导航栏。将该行选中或将光标放在该行内，单击属性面板在表格中的第二行插入导航栏。将该行选中或将光标放在该行内，单击属性面板上的拆分单元格为行或列按钮上的拆分单元格为行或列按钮 ，将第二行分割成五个单元格。，将第二行分割成五个单元格。6分别在单元格中输入导航栏目，并设置文本的属性及其链接，在属性面板上设置分别在单元格中输入导航栏目，并设置文本的属性及其链接，在属性面板上设置单元格背景色使该单元格突出显示。单元格背景色使该单元格突出显示。模板创建模板创建模板创建模板创建7.在表格中的最后一行插入版权信息等文本。选中在表格中的最后一行插入版权信息等文本。选中mail to后面的邮件地址，创建邮后面的邮件地址，创建邮件链接，其方法是在属性面板上的链接域中输入件链接，其方法是在属性面板上的链接域中输入“mailto:mailto:邮件地址邮件地址邮件地址邮件地址”。模板创建模板创建创建的模创建的模板文档板文档模板创建模板创建8.设置超链接后的文本下面出现下划线，颜色也不太雅观，可以创建一个设置超链接后的文本下面出现下划线，颜色也不太雅观，可以创建一个CSS样式样式加以改善。单击加以改善。单击“CSS样式样式”面板上的面板上的“新建新建CSS规则规则”按钮，打开如图所示的对话按钮，打开如图所示的对话框。框。模板创建模板创建9.在在“选择器类型选择器类型”域中选择高级，然后在域中选择高级，然后在“选择器选择器”下拉菜单中选择下拉菜单中选择a:link，单击，单击“确定确定”按钮创建新的按钮创建新的CSS样式。在样式。在CSS 规则定义对话框中的修饰域中选择规则定义对话框中的修饰域中选择“无无”此时可以看到页面中超链此时可以看到页面中超链接下面的下划线不见了。接下面的下划线不见了。用同样的方法可以设置用同样的方法可以设置a:a:hoverhover、a:visiteda:visited和和a:a:activeactive样式，创建更多的样式，创建更多的超链接效果。超链接效果。模板保存模板保存1.选择选择“文件文件”“”“另存为模板另存为模板”命令，打开如图所示的对话框。命令，打开如图所示的对话框。2.选择在对话框中的选择在对话框中的“站点站点”下拉菜单中选择将应用此模板的站点名称，在下拉菜单中选择将应用此模板的站点名称，在“另存另存为为”文本框中为新建的模板输入一个名称，单击文本框中为新建的模板输入一个名称，单击“保存保存”按钮保存。按钮保存。3.表格的中间部分就是页面的正文部分，将这部分区域定义为可编辑区域。选中表表格的中间部分就是页面的正文部分，将这部分区域定义为可编辑区域。选中表格的第三行，然后单击插入面板模板分类上的可编辑区域按钮，打开如图所示的对话格的第三行，然后单击插入面板模板分类上的可编辑区域按钮，打开如图所示的对话框。框。模板保存模板保存 表格在表格在“名称名称”域中输入新建可编辑区域的名称，单击域中输入新建可编辑区域的名称，单击“确定确定”按钮插入可编辑按钮插入可编辑区域。区域。模板保存模板保存创建好的模创建好的模板板模板应用模板应用1.选择命令选择命令“文件文件”“”“新建新建”，打开，打开“从模板新建从模板新建”对话框。对话框。2.选择切换到模板选项卡内，在选择切换到模板选项卡内，在“模板用于模板用于”列表中选择包含模板的站点名称，在列表中选择包含模板的站点名称，在“站点站点”列表中选择要使用的模板，然后单击列表中选择要使用的模板，然后单击“创建创建”按钮创建基于模板的新文档。按钮创建基于模板的新文档。模板应用模板应用3.选择在打开的文档窗口中，周围被黄线围绕，且在右上角显示该文档基于的模板选择在打开的文档窗口中，周围被黄线围绕，且在右上角显示该文档基于的模板名称。文档中的非编辑区域是不可编辑的，在定义的可编辑区域中可以编辑内容。如名称。文档中的非编辑区域是不可编辑的，在定义的可编辑区域中可以编辑内容。如图所示为利用模板创建的基本页面。图所示为利用模板创建的基本页面。4.选择在页面中编辑可编辑区域的内容，完成后将其保存。选择在页面中编辑可编辑区域的内容，完成后将其保存。