dreamweaver cs 网页制作案例教程电子教案第章使用模板和库制作网页

《dreamweaver cs 网页制作案例教程电子教案第章使用模板和库制作网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章　使用模板和库制作网页第6章　使用模板和库制作网页。为了避免重复劳动，可以使用DreamweaverCS3提供的模板和库功能，将具有相同版面结构的页面制作成模板，再通过模板来创建其他页面。也可以将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。【教学导航】教学目标（1）学会制作用来生成模板的网页，并将现有的网页生成模板（2）能正确编辑模板，掌握设置可编辑区域的方法（3）熟悉用模板生成新网页的操作方法，并能对新网页进行编辑加工（4）能熟练地修改网页模板，并同步更新该模板生成的网页（5）学会创建库项目，并且能修改库项目，更新包含库项目的网页（6）掌握插入

2、图像占位符的方法（7）熟练使用多层嵌套表格布局网页（8）理解模板和库的作用（9）了解CSS样式的简单应用本章重点（1）制作用来生成模板的网页，并将现有的网页生成模板（2）用模板生成新网页，并对新网页进行编辑加工（3）修改网页模板并同步更新该模板生成的网页（4）创建库项目，并且修改库项目，更新包含库项目的网页本章难点（1）用模板生成新网页，并对新网页进行编辑加工（2）修改网页模板并同步更新该模板生成的网页教学方法任务驱动法、分组讨论法、四步训练法课时建议6课时（含课堂同步训练）6.1　课前准备6.1.1　新建一个站点（1）在本地硬盘创建文件夹（2）启动Dreamwea

3、verCS3（3）创建名称为“名城游”的本地站点6.1.2　制作用来生成网页模板的网页1、新建一个网页153第6章　使用模板和库制作网页（1）新建一个网页文档（2）设置网页标题（3）切换到网页的【代码视图】窗口，在标签内，输入以下HTML代码：leftmargin="0"topmargin="0"，即设置网页的左边距为0，上边距为0。在与标签内，输入表6-所示的样式代码，设置超级链接的样式。2、在网页中插入表格1（1）插入表格1并设置其属性（2）插入嵌套表格1-1（3）插入嵌套表格1-23、在网页中插入表格2在网页index06

4、01.html中表格1的下方插入一个1行1列的表格2，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，在“表格ID”列表框中输入“表格2”。将表格2单元格的“高”设置为“24像素”，“背景颜色”设置为“#639629”。在表格2单元格中输入文字“首页－>城市导航－>北京”保存网页，预览其效果，如图6-3所示。4、在网页中插入表格3（1）插入1行4列的表格3（2）插入3行1列的表3-1保存该网页且预览其效果。（3）插入1行1列的表格3-2（4）插入2行1列的表格3-3（5）插入10行1列的表格3-4（6）

5、插入2行1列的表格3-5（7）插入四个1行2列的表格5、在表格3-5中插入图像占位符保存网页，预览其效果。6.2　课堂引导训练及评价【课堂引导训练任务描述】1、网页制作任务卡网页制作任务卡如表6-4所示。表6-4　网页制作任务卡任务编号06-1任务名称使用模板和库制作网页网页主题名城游计划工时min网页制作任务描述（1）创建库项目，并在网页中插入库项目（2）由现有的网页文档生成网页模板，在网页模板中定义和修改可编辑区域、可选区域153第6章　使用模板和库制作网页（3）创建基于网页模板的网页，修改和更新网页模板属性（4）修改网页模板和库项目，并更新基于网页模板的网页网

6、页布局结构分析（1）表格布局结构，如图6-7所示（2）文字型导航栏（位于网页顶部和网页底部两个位置）网页色彩搭配分析网页中文字的颜色：#000000、#203F78，背景颜色：#639629网页组成元素分析主要包括表格、文本、图像和超级链接等网页元素任务实现流程分析制作用来生成网页模板的网页→创建库项目→在网页中插入库项目→创建网页模板→定义与修改可编辑区域和可选区域→创建基于网页模板的网页→修改网页模板并更新网页→修改库项目并更新网页→保存网页并预览其效果配盘素材导引原始文件位置：start6第6章使用模板和库制作网页task06-1最终文件位置：resul

7、t6第6章使用模板和库制作网页task06-1153第6章　使用模板和库制作网页图6-7　模板index0601.dwt的布局结构2、网页制作任务跟踪卡网页制作任务跟踪卡如表6-5所示。表6-5　网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态【网页效果展示】153第6章　使用模板和库制作网页网页index0602.html的预览效果如图6-8所示。图6-8　网页index0602.html的预览效果【任务完成过程】6.2.1　创建库项目库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法，这些页面