【任务6-1】创建网页模板和基本模板的网页

【任务描述】

（1）利用网页“060101.html”创建网页模板“060101.dwt”。

（2）将网页模板“060101.dwt”中的标题文字“办公设备”定义为可编辑区域。

（3）将网页模板“060101.dwt”中的图像“2010060901.jpg”定义为可编辑区域。

（4）将网页模板“060101.dwt”中的区域“<div class="content_box"></div>”、“<div class="tjcontent"></div>”、“<div class="content"></div>”定义为可编辑区域。

（5）将区域“<div class="picrecommend"></div>”的标签“background”和区域“<div class="pages_nav"></div>”的标签“bgcolor”定义为可编辑的标签属性。

（6）将区域“<div class="pages_nav"></div>”定义为可编辑的可选区域。

（7）创建基于网页模板“060101.dwt”的网页“060102.html”。

（8）修改和更新模板“060101.dwt”的属性。

（9）编辑与更新网页“060102.html”的内容。

（10）对网页模板“060101.dwt”进行必要的修改，然后更新由该模板生成的网页文档“060102.html”。

      网页“060102.html”的浏览效果如图6-3所示。

【任务实施】

6.2.1　创建与编辑网页模板

 （1）在Dreamweaver CS4主窗口中，单击菜单【文件】→【另存为模板】，弹出【另存模板】对话框。

 （2）在【另存模板】对话框中的“站点”下拉列表框选择模板保存的站点，本项目选择“单元6”。

      在“现存的模板”列表框中显示了当前站点中的所有模板，由于本站点暂时没有创建模板，所以显示“（没有模板）”。在“描述”文本框中输入对模板的说明文字。在“另存为”文本框中输入模板的名称，这里输入“0601”。

（3）设置完毕后，在【另存为模板】对话框中，单击【保存】按钮，弹出一个如图6-5所示的“要更新链接吗”提示信息对话框。如果在该对话框中单击【是】按钮，则当前网页会被转换成模板，同时系统将自动在所选择站点的根目录下创建“Templates”文件夹，并将创建的模板文件保存在该文件夹中。

6.2.2　定义与修改可编辑区域和可选区域

1．打开网页模板文件

   打开当前站点文件夹“Templates”中模板文件“060101.dwt”。

2．定义可编辑区域

 （1）定义文字为可编辑区域

 （2）定义图像为可编辑区域

 （3）定义区域“<div class="content_box"></div>”为可编辑区域

 （4）定义区域“<div class="tjcontent"></div>”为可编辑区域

 （5）定义区域“<div class="content"></div>”为可编辑区域

 （6）将区域“<div class="picrecommend"></div>”的标签“background”定义为可编辑的标签属性

 （7）将区域“<div class="pages_nav"></div>”的标签“bgcolor”定义为可编辑的标签属性

3．定义可编辑的可选区域

  （1）选择要设置为可编辑的可选区域的区域“<div class="pages_nav"></div>”。

  （2）在Dreamweaver CS4主界面中，单击菜单命令【插入】→【模板对象】→【可编辑的可选区域】。

  （3）在【新建可选区域】对话框“基本”选项卡的“名称”文本框中输入该可编辑的可选区域的名称。

  （4）切换到“基本”选项卡，然后单击【确定】按钮，即可定义一个可编辑的可选区域。

       设置完成后，页面中可编辑的可选区域有蓝色标签，标签上是可选区域的名称“IfOptionalRegion1”。

6.2.3　基本网页模板创建网页

1．应用网页模板创建网页文档

  （1）在Dreamweaver CS4主界面中，单击菜单【文件】→【新建】，弹出【新建文档】对话框，在【新建文档】对话框中依次单击选择【模板中的页】→【单元6】→【0601】选项。

  （2）单击【创建】按钮，这样将基于该模板创建一个新的网页。

  （3）将新创建的基于此模板的网页保存在站点根文件夹下的文件夹“6-1”中，命名为“060102.html”，然后预览其效果。

2．修改和更新网页模板属性

  （1）显示或隐藏可选区域

  （2）设置可编辑标签属性的属性值

3、编辑与更新基于网页模板创建的网页060102.html

  （1）在“文档”工具栏中将网页标题修改为“手机通讯 - 易购网”。

  （2）将网页中的标题文字“办公设备”修改为“手机通讯”。

  （3）将网页中的图像“images/img01/ 2010060901.jpg”修改为“images/img02/ 2010060902.jpg”。

  （4）在网页060102.html的区域“<div class="content_box"></div>”、“<div class="tjcontent"></div>”、“<div class="content"></div>”分别输入文字、插入图像和设置超链接。

   保存网页060102.html，其浏览效果如下所示。

6.2.4　修改网页模板并更新网页

 （1）删除区域“<div class="pages_nav"></div>”的可编辑的可选区域模板标记。

 （2）定义区域“<div class="pages_nav"></div>”为可选区域。

 （3）单击“标准”工具栏中的【保存】按钮，弹出【更新模板文件】对话框，在该对话框中单击【更新】按钮，系统开始更新模板文件，并且会弹出【更新页面】对话框。

 （4）在【更新页面】对话框中选中复选框“显示记录”，在其下方“状态”列表框中显示检查文件数、更新文件数等详细的更新信息。

 （5）在【更新页面】对话框中设置相应的参数，在“查看”下拉列表框中如果选择“整个站点”，则要选择需要更新的站点（如“单元6”），然后单击【完成】按钮，对基于模板创建的网页进行更新。

 （6）更新完成后，单击该对话框中的【关闭】按钮，更新页面操作结束。

网页效果图：