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

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

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

3、作用来生成网页模板的网页1、新建一个网页（1）新建一个网页文档（2）设置网页标题（3）切换到网页的【代码视图】窗口，在标签内，输入以下HTML代码： leftmargin=0 topmargin=0，即设置网页的左边距为0，上边距为0。在与标签内，输入表6-所示的样式代码，设置超级链接的样式。2、在网页中插入表格1（1）插入表格1并设置其属性（2）插入嵌套表格1-1（3）插入嵌套表格1-23、在网页中插入表格2在网页index0601.html中表格1的下方插入一个1行1列的表格2，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，

4、在“表格 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）插入2行1列的表格3-5（7）插入四个1行2列的表格5、在表格3-5中插入图像占位符保存网页，预览其效果。6.2课堂引导训练及评价【课堂引导训练任务描述】1、网页制作任务卡网页制作任务卡如表6-4

5、所示。表6-4网页制作任务卡任务编号06-1任务名称使用模板和库制作网页网页主题名城游计划工时min网页制作任务描述（1）创建库项目，并在网页中插入库项目（2）由现有的网页文档生成网页模板，在网页模板中定义和修改可编辑区域、可选区域（3）创建基于网页模板的网页，修改和更新网页模板属性（4）修改网页模板和库项目，并更新基于网页模板的网页网页布局结构分析（1）表格布局结构，如图6-7所示（2）文字型导航栏（位于网页顶部和网页底部两个位置）网页色彩搭配分析网页中文字的颜色：#000000、#203F78，背景颜色：#639629网页组成元素分析主要包括表格、文本、图像和超级链接等网页元素任务实现流程

6、分析制作用来生成网页模板的网页创建库项目在网页中插入库项目创建网页模板定义与修改可编辑区域和可选区域创建基于网页模板的网页修改网页模板并更新网页修改库项目并更新网页保存网页并预览其效果配盘素材导引原始文件位置：start06第6章使用模板和库制作网页task06-1最终文件位置：result06第6章使用模板和库制作网页task06-1图6-7模板index0601.dwt的布局结构2、网页制作任务跟踪卡网页制作任务跟踪卡如表6-5所示。表6-5网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态【网页效果展示】网页index0602.html的预览效果如图6-8所示。图6-8网

7、页index0602.html的预览效果【任务完成过程】6.2.1创建库项目库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法，这些页面元素称为库项目。【操作要求】（1）将网页中的版权信息区域定义为库项目。（2）将现有网页nav_left0601.html中的景点导航表格转换为库项目。【实施过程】1、使用【新建文档】对话框创建库（1）在Dreamweaver CS3主界面中，单击菜单【文件】【新建】，在弹出的【新建文档】对话框中选择“空白页”“库项目”，如图6-9所示。然后单击【创建】按钮，创建一个空白网页，（2）保存库项目文件（3）设置页面的边距（4

8、）在网页中插入表格（5）在表格中输入文字（6）保存库文件，浏览其效果2、利用现有网页内容转换为库项目（1）打开文件夹“task06-1webpage”中网页文档“nav_left0601.html”。（2）选中该网页文档中的24行1列的景点导航表格。（3）在Dreamweaver CS3主界面中，单击菜单【修改】【库】【增加对象到库】，如图6-12所示，将选中的表格转化为库文件。此时会出现如图6-13所示“提示信息”对话框，在该对话框中单击【确定】按钮，库项目的内容随即会出现在“资源”面板中，等待输入新的库文件名称，如图6-14所示。（4）Dreamweaver CS3会把库项目文件保存在本地

9、站点根文件夹下的“Library”子文件夹中，如果本地站点没有该文件夹，Dreamweaver 8会自动生成这个子文件夹。（5）为了便于统一管理库项目文件，将前面所创建的库项目文件“nav_bottom0601.lbi”拖动到文件夹“Library”中，在拖动完成时系统会自动弹出如图6-16的【更新文件】对话框，在该对话框中单击【更新】按钮，将所有文件中的链接进行自动更新。然后在“资源”面板中单击右键，在弹出的快捷菜单中单击菜单项【刷新站点列表】，如图6-17所示，更新站点文件的变化。6.2.2在网页中插入库项目【操作要求】（1）在网页index0601.html的表格3-2中插入库项目nav

10、_left0601.lbi。（2）在网页index0601.html的底部插入库项目nav_bottom0601.lbi。【实施过程】1、在表格3-2中插入库项目nav_left0601（1）打开6.1.2节所创建的网页文档index0601.html，将光标置于表格3-2中。（2）在Dreamweaver CS3主界面，单击菜单【窗口】【资源】，切换到“资源”面板，也可以在“文件”面板中直接单击“资源”选项卡切换到“资源”面板。（3）在“资源”面板中单击左侧的【库】按钮，显示本站点所有的库项目文件，选中要插入的库项目“nav_left0601”，单击该面板中左下角的【插入】按钮，即可插入一个

11、库项目，如图6-18所示。2、在表格3的下方插入库项目nav_bottom0601将光标置于表格3的右侧，在“资源”面板中选中要插入的库项目“nav_bottom0601”，然后单击该面板中左下角的【插入】按钮，即可在表格3的下方插入另一个库项目。保存网页，预览其效果，如图6-19所示。6.2.3创建网页模板【操作要求】利用现有的网页文档“index0601.html”创建网页模板“index0601.dwt”。【实施过程】（1）在Dreamweaver CS3主窗口中，单击菜单【文件】【另存为模板】，弹出【另存模板】对话框。（2）在【另存模板】对话框中的“站点”下拉列表框选择模板保存的站点，

12、本项目选择“名城游”。在“现存的模板”列表框中显示了当前站点中的所有模板，由于本站点暂时没有创建模板，所以显示“（没有模板）”。在“描述”文本框中输入对模板的说明文字“使用表格布局网页”。在“另存为”文本框中输入模板的名称，这里输入“index0601”，如图6-20所示。（3）设置完毕后，在【另存为模板】对话框中，单击【保存】按钮，弹出一个如图6-21所示的“要更新链接吗”提示信息对话框。如果在该对话框中单击【是】按钮。则当前网页会被转换成模板，同时系统将自动在所选择站点的根目录下创建“Templates”文件夹，并将创建的模板文件保存在该文件夹中，如图6-22所示。6.2.4定义与修改可编

13、辑区域和可选区域【操作要求】（1）将文字“北京”定义为可编辑区域。（2）将表格3-3中的图像“002.jpg”定义为可编辑区域。（3）将表格3-4、3-5定义为可编辑区域。（4）将标签“background”和“bgcolor”定义为可编辑的标签属性。（5）将表格1定义为不可编辑的可选区域。（6）将表格3-1中的图像“001.jpg”定义为可编辑的可选区域。（7）修改可编辑区域和可选区域。【实施过程】1、打开网页模板文件2、定义可编辑区域（1）定义文字为可编辑区域（2）定义图像为可编辑区域（3）定义表格为可编辑区域（4）定义可编辑的标签属性 定义可编辑的标签属性“background”图6-2

14、9表格3第一列单元格的“背景图像”属性的设置 定义可编辑的标签属性“bgcolor”3、定义不可编辑的可选区域（1）选择要设置为不可编辑的可选区域的表格1。（2）在Dreamweaver CS3主界面中，单击菜单【插入记录】【模板对象】【可选区域】。或者在“插入”工具栏“常用”选项卡中，单击【模板】下拉菜单中的【可选区域】按钮。弹出【新建可选区域】对话框，如图6-33所示。（3）在【新建可选区域】对话框中“基本”选项卡的“名称”文本框中输入该可选区域的名称。如果选中“默认显示”复选框，则该可选区域在默认情况下将在网页中显示。（4）切换到“基本”选项卡，然后单击【确定】按钮，即可定义一个不可编辑

15、的可选区域。4、定义可编辑的可选区域（1）选择要设置为可编辑的可选区域的表格3-1中的图像“001.jpg”。（2）在Dreamweaver CS3主界面中，单击菜单【插入记录】【模板对象】【可编辑的可选区域】。或者在“插入”工具栏“常用”选项卡中，单击【模板】下拉菜单中的【可选区域】按钮。弹出【新建可选区域】对话框，如图6-36所示。（3）在【新建可选区域】对话框“基本”选项卡的“名称”文本框中输入该可编辑的可选区域的名称。如果选中“默认显示”复选框，则该可编辑的可选区域在默认情况下将在基于模板的网页中显示。（4）切换到“基本”选项卡，然后单击【确定】按钮，即可定义一个可编辑的可选区域。5、

16、修改可编辑区域（1）单击网页模板中可编辑区域左上角的标签，如“EditRegion1”，选中该可编辑区域。（2）在“可编辑区域”属性面板中输入一个新的名称，按回车键确认，如图6-39所示。6、修改可选区域保存所创建的模板。6.2.5创建基于网页模板的网页【操作要求】（1）创建基于网页模板index0601.dwt的网页index0602.html。（2）修改和更新模板index0601.dwt的属性。（3）编辑与更新网页index0602.html的内容。【实施过程】1应用网页模板创建网页文档（1）在Dreamweaver CS3主界面中，单击菜单【文件】【新建】，弹出【新建文档】对话框，在【

17、新建文档】对话框中依次单击选择【模板中的页】【名城游】【index0601】选项，如图6-41所示。（3）单击【创建】按钮，这样将基于该模板创建一个新的网页。（4）将新创建的基于此模板的网页保存在站点根文件夹下的文件夹“task06-1”中，命名为“index0602.html”，然后预览其效果。2修改和更新网页模板属性（1）显示或隐藏可选区域（2）设置可编辑标签属性的属性值3、编辑与更新基于网页模板创建的网页（1）在“文档”工具栏中将网页标题修改为“畅游上海城”。（2）将表格2中的文字“北京”修改为“上海”。（3）将表格3-3中的图像源文件“0601北京游/image/002.jpg”修改为

18、“0602上海游/image/002.gif”。（4）在表格3-4及其嵌套表格3-4-1、3-4-2、3-4-3和3-4-4中输入文字和插入图像，文字内容也可以到文本文件0602.txt中拷贝。根据图像的大小和文字内容的多少，对嵌套表格进行适当的调整。保存网页index0602.html，输入文字和插入图像后的表格3-3和表格3-4的预览效果如图6-45所示。（5）将表格3-5中第一行的文字“旅游景点导航图”修改为“上海旅游景点导航图”，并且将这些文字的“大小”设置为“18像素”，文字颜色设置为“#896449”。将第二行中的图像占位符修改为上海旅游景点导航地图，其源文件为“0602上海游/i

19、mage/mapshanghai.gif”，将第二行的“高”调整为“365像素”，将图像的“高”也设置为“365像素”。保存网页index0602.html，预览其效果。6.2.6修改网页模板并更新网页【操作要求】对网页模板index0601.dwt进行必要的修改，然后更新由该模板生成的网页文档index0602.html。【实施过程】对网页模板进行修改后，可以将网页模板的修改应用于所有由该模板生成的网页。（1）打开模板文档，对网页模板中的文字、图像或表格进行必要的修改，如将表格3-5第二行的“高”修改为“300像素”，将表格3-5第二行单元格的图像占位符的“高”修改为“300像素”。（2）单

20、击“标准”工具栏中的【保存】按钮，弹出如图6-46所示的【更新模板文件】对话框，在该对话框中单击【更新】按钮，系统开始更新模板文件，并且会弹出如图6-47所示的【更新页面】对话框。（3）在【更新页面】对话框中选中复选框“显示记录”，该对话框变成如图6-48所示的形式，在其下方“状态”列表框中显示检查文件数、更新文件数等详细的更新信息。（4）在【更新页面】对话框中设置相应的参数，在“查看”下拉列表框中如果选择“整个站点”，则要选择需要更新的站点（如“名城游”），然后单击【完成】按钮，对基于模板创建的网页进行更新，如图6-49所示。（5）更新完成后，单击该对话框中的【关闭】按钮，更新页面操作结束。

21、保存更新的网页index0602.html，预览其效果。6.2.7修改库项目并更新网页【操作要求】对库项目的内容进行必要的修改，然后对插入了该库项目的网页进行更新。【实施过程】（1）选中网页模板“index0601.dwt”中插入的库文件“nav_left0601.lbi”，在如图6-50所示的“库项目”属性面板中单击【打开】按钮，打开库项目“nav_left0601.lbi”的页面。打开库项目的页面后，可对该库项目的内容进行必要的修改。（2）单击菜单【文件】【保存】，这时会弹出如图6-51所示的【更新库项目】对话框在该对话框中单击【更新】按钮，将更新本地站点内插入了该库文件的网页，并且会弹出

22、如图6-52所示的【更新页面】对话框。（3）更新完成后，单击该对话框中的【关闭】按钮，则更新操作结束。保存更新的网页，预览其效果。6.2.8保存网页并预览其效果保存网页index0602.html，按F12预览其效果，如图6-所示。【课堂引导训练任务完成情况评价】对本次网页制作任务的完成情况进行自评，网页制作任务完成情况评价内容如表6-6所示。表6-6网页制作任务完成情况评价表任务名称使用模板和库制作网页综合评价任务完成情况分项评价创建站点网页布局色彩搭配网页内容浏览效果其他存在的主要问题6.4课堂同步训练及评价6.3.1课堂同步训练任务描述1、同步训练任务卡课堂同步训练的任务卡如表6-7所示

23、。表6-7课堂同步训练任务卡任务编号06-2任务名称使用模板和库制作海口游的网页网页主题海口游计划工时45min同步训练任务描述（1）创建一个名称为 “海口游”的站点（2）以“西安游”网页ex0601.htm为起始页，创建网页模板“ex0601.dwt”（3）将网页模板ex0601.dwt中的以下元素或区域设置为可编辑区域：网页顶部的两幅banner图片、标识网页当前位置的文字“首页-各地-城市导航-西安”、网页中部的主体内容区域（2行3列表格）、底部的导航区域（2行1列表格）（4）将底部的导航区域（2行1列表格）制作为库，且命名为“bottom_nav.lbi”（5）基于模板“ex0601.

24、dwt”创建一个展示海口游游景点的网页ex0602.htm，该网页的主题为“海口游”在各个可编辑区域输入所需要的文字、插入所需要的图片，如图6-所示（6）在网页ex0602.htm底部插入库项目bottom_nav.lbi配盘素材导引原始文件位置：start06第6章使用模板和库制作网页task06-2最终文件位置：result06第6章使用模板和库制作网页task06-22、同步训练任务跟踪卡课堂同步训练的任务跟踪卡如表6-8所示。表6-8课堂同步训练的任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态6.3.2同步训练网页的效果展示同步训练网页的浏览效果如图6-53所示。图6-53

25、同步训练网页的浏览效果6.3.3同步训练网页的制作要点提示（1）首先在Dreamweaver CS3中打开起始网页“ex0601.htm”，然后将该网页保存为模板文档“ex0601.dwt”。（2）在模板文档中依次选中图片、文字和表格，分别插入可编辑区域。（3）在模板文档中选中下部的导航表格，将该表格转换为库项目。（4）创建基本模板的网页文档“ex0602.htm”，在各个可编辑区域中输入文本、插入图片和插入库项目bottom_nav.lbi。（5）保存网页文档，浏览其效果。（6）如果对网页模板“ex0601.dwt”的内容进行修改，也应同步更新基于该模板的网页。同样如果对库项目中的内容进行修改，也应同步更新使用了该库项目的网页。6.3.4课堂同步训练评价课堂同步训练评价内容如表6-9所示。表6-9课堂同步训练评价表任务编号06-2任务名称使用模板和库制作海口游的网页任务完成方式【】小组协作完成【】个人独立完成课堂同步实践任务完成情况评价自我评价小组评价教师评价存在的主要问题6.4课外拓展训练1、拓展训练任务卡课外拓展训练的任务卡如表6-10所示。表6-10课外拓展训练任务卡