中职高教版《网页设计与制作任务驱动教程》8-1-3 创建网页模板课件

1 单元8 使用模板和库制作网页 【任务8-1】使用模板和库制作上海游的网页 《网页设计与制作任务驱动教程（第3版）》 1 2 【任务描述】 【任务8-1-3】创建网页模板 利用现有网页文档“0801.html”创建网页模板“0801.dwt”。 《网页设计与制作任务驱动教程（第3版）》 2 3 【任务实施】 利用图8-6所示的网页文档“0801.html”创建网页模板，如果该网页文档已被关闭，则应先打开该网页文档。 （1）在Dreamweaver CC主窗口中，选择命令【文件】→【另存为模板】，弹出【另存模板】对话框。 《网页设计与制作任务驱动教程（第3版）》 3 4 （2）在【另存模板】对话框中的“站点”下拉列表框选择模板保存的站点，本项目选择“单元8”。在“现存的模板”列表框中显示了当前站点中的所有模板，由于本站点暂时没有创建模板，所以显示“（没有模板）”。在“另存为”文本框中输入模板的名称，这里输入“0801”。 《网页设计与制作任务驱动教程（第3版）》 5 （3）设置完毕后，在【另存模板】对话框中，单击【保存】按钮，弹出一个如图8-8所示的“要更新链接吗”提示信息对话框。如果在该对话框中单击【是】按钮。则当前网页会被转换成模板，同时系统将自动在所选择站点的根目录下创建“Templates”文件夹，并将创建的模板文件保存在该文件夹中。 《网页设计与制作任务驱动教程（第3版）》 5 6 图8-8 “要更新链接吗”提示信息对话框 《网页设计与制作任务驱动教程（第3版）》 6 7 【任务描述】 【任务8-1-4】定义与修改可编辑区域 和可选区域 （1）将文字“北京”定义为可编辑区域。 （2）将表格3-3中的图像“002.jpg”定义为可编辑区域。 （3）将表格3-4和表格3-5定义为可编辑区域。 《网页设计与制作任务驱动教程（第3版）》 7 8 （4）将标签“background”和“bgcolor”定义为可编辑的标签属性。 （5）将表格1定义为不可编辑的可选区域。 （6）将表格3-1中的图像“001.jpg”定义为可编辑的可选区域。 （7）修改可编辑区域和可选区域。 《网页设计与制作任务驱动教程（第3版）》 9 【任务实施】 1．打开网页模板文件 打开当前站点文件夹“Templates”中模板文件“0801.dwt”。 2．定义可编辑区域 （1）将文字定义为可编辑区域 选中表格2中的文字“北京”，在Dreamweaver CC主界面，选择命令【插入】→【模板】→【可编辑区域】，弹出【新建可编辑区域】对话框。 《网页设计与制作任务驱动教程（第3版）》 9 10 在【新建可编辑区域】对话框中的“名称”文本框中输入可编辑区域的名称“EditRegion1”，如图8-11所示。然后单击【确定】按钮，完成可编辑区域的创建。 图8-11 【新建可编辑区域】对话框 可编辑区域创建完成后，该页面中的可编辑区域有蓝色标签，标签上有可编辑区域的名称。 《网页设计与制作任务驱动教程（第3版）》 10 11 （2）将图像定义为可编辑区域 选中表格3-3中的图像“002.jpg”，在【插入】面板中选择【模板】工具类型，然后在【模板】工具面板中单击选择【可编辑区域】按钮，在弹出的【新建可编辑区域】对话框中的“名称”文本框中输入第2个可编辑区域的名称“EditRegion2”。 《网页设计与制作任务驱动教程（第3版）》 11 12 （3）将表格定义为可编辑区域 选中表格3-4，在如图8-12所示的【模板】工具面板中单击选择【可编辑区域】按钮，在弹出的【新建可编辑区域】对话框中的“名称”文本框中输入第3个可编辑区域的名称“EditRegion3”。 按类似的方法，将表格3-5定义为可编辑区域，且将该可编辑区域命名为“EditRegion4”。 《网页设计与制作任务驱动教程（第3版）》 13 （4）定义可编辑的标签属性 对于基于模板的网页，如果需要修改某些页面元素的属性，如背景图像、背景颜色等，则可以在创建模板时将这些属性定义为可编辑标签属性。 《网页设计与制作任务驱动教程（第3版）》 14 ① 定义可编辑的标签属性“background” ◇ 选择想要设置可编辑标签属性的表格3中第1列的单元格。 ◇ 在Dreamweaver CC主界面中，选择命令【修改】→【模板】→【令属性可编辑】。此时弹出【可编辑标签属性】对话框。 ◇ 在【可编辑标签属性】对话框的“属性”下拉列表框中选择“BACKGROUND”。 《网页设计与制作任务驱动教程（第3版）》 15 如果需要设置的标签没有出现在下拉列表框，可以单击列表框右侧的【添加】按钮，弹出一个“添加属性标签”的【Dreamweaver】对话框，在该对话框中添加一个