DW网页设计教学—单元6 创建与应用模板和库.ppt

6.3.4 在网页060202.html中插入代码片断 1．在网页060202.html中对应位置插入代码片码topmenu 打开网页文档060202.html，切换到【代码】视 图，将光标置于Div标签“div id=header”的之 后，然后在【代码片断】面板选择文件夹“06”中的“topmenu”，单击【代码片断】面板左下角的【插 入】按钮，这样代码片断“topmenu”便插入到光标 所在位置。 2．在网页060202.html中对应位置插入代码片码topnav 在网页文档060202.html的【代码】视图中，将光标置于Div标签“div class=clear/div”与“div class=clear/div”之间，然后在【代码片断】面板文件夹“06”中的“topnav”位置单击右键，在弹出的快捷菜单中单击菜单命令【插入】，如图6-39所示，这样代码片断“topnav”便插入到光标所在位置。 保存网页文档060202.html，其浏览效果如图6-24所示。 【6.4　考核评价】 【考核任务描述】 教材配套光盘中已提供了考核评价项目所需的 起点网页文件0603.html、CSS样式表文件0603.css 和网页素材，请完成以下操作。 （1）将网页0603.html中的区域“div id=”btm1“ /div”和“div id=”btm2“/div”定义为库项目，名称分别为： “nav_bottom060301.lbi” “nav_bottom060302.lbi” （2）将网页0603.html另存为网页模板，名称为“0603.dwt”， 该模板中不包括库项目“nav_bottom060301.lbi”和“nav_bottom060302.lbi”中的内容。 （3）在网页模板0603.dwt中将当前位置导航栏的文字“湖 南”、区域“div class=b_left2 height02 /div”和区 “div class=b_right2 height02 /div”定义为可编辑 区域，名称分别为： “EditRegion060301” “EditRegion060302” “EditRegion060303” （4）在网页模板0603.dwt中将区域“div id=bottom /div”定义为可编辑的可选区域，名称为“OptionalRegion060301”。 （5）在网页模板0603.dwt中将区域“divclass=clsname/div”的背景颜色定义为可编辑的标签属性。 （6）创建基于网页模板0603.dwt的网页060301.html，设置网页区域“div class=clsname/div”的背景颜色为“#f2f2f2”，在该网页的区域中“div id=bottom /div”分别插入库项目“nav_bottom060301.lbi”和“nav_bottom060302.lbi”，可编辑的可选区域OptionalRegion060301设置为隐藏，其最终浏览效果如图6-40所示。 图6-40　网页060301.html的最终浏览效果 （7）创建基于网页模板0603.dwt的网页060302.html，设置网页区域“div class=clsname/div”的 背景颜色为“#f2f2f2”，在该网页的区域中“div id=bottom /div”分别插入库项目“nav _bottom060301.lbi”和“nav_bottom060302.lbi”， 可编辑的可选区域OptionalRegion060301设置为 显示，在3个可编辑区域中输入新的内容，其最 终浏览效果如图6-41所示。 图6-41　网页060302.html的最终浏览效果 【评价要点】 本单元的考核评价表如表6-4所示。 【单元小结】 本单元主要使用模板和库制作网页，使用模板和库的组合可以使网站维护变得很轻松，尤其是在对一个规模较大的网站进行维护时，就更能体会使用模板的优点。 另外，通过修改库项目，可以方便地对远程网站进行更新，而不用将每一个网页文件上传到远程网站中。 考核要点 考核内容 标准分 计分 （1）定义2个库项目 2 （2）将已有网页文档另存为网页模板 1 （3）创建3个可编辑区域 2 （4）创建1个可编辑的可选区域 1 （5）定义1个可编辑的标签属性 1 （6）创建1个符合指定要求的基于网页模板0603.dwt的网