DreamweaverCS3网页制作案例教程电子备课全套配套课件陈承欢06第6章

DreamweaverCS3网页制作案例教程第6章使用模板和库制作网站第6章使用模板和库制作网页。为了防止重复劳动，可以使用DreamweaverCS3提供的模版和库用途，将具备同样版面结构的页面制作成模板，再借助模板来建立其它页面。也可以将同样的页面元素制作成库项目，并储存在库文件中从而随时调用。【教学导航】教学目标（1）学会制作用来生成模板的网页，并将现有的网页生成模板（2）能正确编辑模板，掌握设置能编辑区域的方式（3）熟悉用模板生成新网页的操作方法，并可对新网页进行编辑加工（4）能熟练地设置网页模板，并同步升级该模板生成的网站（5）学会建立库项目，并且可更改库项目，更新包括库项目的网站（6）掌握插入图像占位符的方式（7）熟练使用多层嵌套表格布局网页（8）理解模板和库的作用（9）了解CSS样式的简单应用本章重点（1）制作用来生成模板的网页，并将现有的网页生成模板（2）用模板生成新网页，并对新网页进行编辑加工（3）修改网站模板并同步升级该模板生成的网站（4）创建库项目，并且设置库项目，更新包括库项目的网站本章难点（1）用模板生成新网页，并对新网页进行编辑加工（2）修改网站模板并同步升级该模板生成的网站教学方法任务驱动法、分组讨论法、四步训练法课时建议6课时（含教学同步练习）6.1课前准备6.1.1新建一个站点（1）在本地硬盘创建文件夹（2）启动DreamweaverCS3（3）创建名称为“名城游”的本地站点6.1.2制作用来生成网页模板的网站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”网页课件模板，“对齐”方式修改为“居中对齐”，在“表格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所示。表6-4网页制作任务卡任务编号06-1任务名称使用模板和库制作网站网页主题名城游计划工时min网页制作任务描述（1）创建库项目，并在网站中插入库项目（2）由现有的网站文档生成网页模板，在网站模板中定义跟修改能编辑区域、可选区域（3）创建基于网页模板的网站，修改和升级网页模板属性（4）修改网站模板和库项目，并升级基于网页模板的网站网页布局结构预测（1）表格布局结构，如图6-7所示（2）文字型导航栏（位于网页上方和网站上面两个位置）

网页颜色配色分析网站英文字的底色：#000000、#203F78，背景色彩：#639629网页组成元素分析主要包含表格、文本、图像和超级链接等网站元素任务推动流程分析制作用来生成网页模板的网站→创建库项目→在网站中插入库项目→创建网站模板→定义与设置能编辑区域和可选区域→创建基于网页模板的网站→修改网页模板并升级网页→修改库项目并升级网页→保存网站并预览其效果配盘素材导引原始文件位置：start\06第6章使用模板和库制作网站\task06-1最终文件位置：result\06第6章使用模板和库制作网站\task06-1图6-7模板index0601.dwt的布局结构2、网页制作任务跟踪卡网页制作任务跟踪卡如表6-5所示。表6-5网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状况【网页效果展示】网页index0602.html的预览效果如图6-8所示。图6-8网页index0602.html的预览效果【任务完成过程】6.2.1创建库项目库是一种用来储存想要在整个网站上一直重复使用或升级的页面元素（如图像、文本跟其它对象）的方式，这些页面元素称为库项目。【操作要求】（1）将网站中的版权信息区域定义为库项目。

（2）将现有网页nav_left0601.html中的景点导航表格转换为库工程。【实施过程】1、使用【新建文档】对话框创建库（1）在DreamweaverCS3主界面中，单击菜单【文件】→【新建】，在弹出的【新建文档】对话框中选取“空白页”→“库项目”，如图6-9所示。然后点击【创建】按钮，创建一个空白网页，（2）保存库项目文件（3）设置页面的边距（4）在网页中插入表格（5）在表格中输入文字（6）保存库文件，浏览其效果2、利用现有网页内容转化为库项目（1）打开文件夹“task06-1\webpage”中网页文档“nav_left0601.html”。（2）选中该网页文档中的24行1列的景点导航表格。（3）在DreamweaverCS3主界面中，单击菜单【修改】→【库】→【增加对象至库】，如图6-12所示，将选中的表格转换为库文件。此时会出现如图6-13所示“提示信息”对话框，在该对话框中右键【确定】按钮，库项目的内容随后会出现在“资源”面板中，等待输入新的库文件名称，如图6-14所示。（4）DreamweaverCS3会把库工程文件储存在本地站点根文件夹下的“Library”子文件夹中，如果本地站点没有该文件夹，Dreamweaver8会手动生成这个子文件夹。

（5）为了方便统一管理库工程文件，将上面所建立的库项目文件“nav_bottom0601.lbi”拖动到文件夹“Library”中，在拖动完成时系统会手动弹出如图6-16的【更新文件】对话框，在该对话框中右键【更新】按钮，将所有文件中的链接进行手动升级。然后在“资源”面板中单击右键网页课件模板，在跳出的快捷菜单中右键菜单项【刷新站点列表】，如图6-17所示，更新站点文件的变化。6.2.2在网页中插入库项目【操作要求】（1）在网站index0601.html的表格3-2中插入库项目nav_left0601.lbi。（2）在网站index0601.html的上面插入库项目nav_bottom0601.lbi。【实施过程】1、在表格3-2中插入库项目nav_left0601（1）打开6.1.2节所创建的网站文档index0601.html，将光标放在表格3-2中。（2）在DreamweaverCS3主界面，单击菜单【窗口】→【资源】，切换至“资源”面板，也可以在“文件”面板中直接

单击“资源”选项卡切换到“资源”面板。（3）在“资源”面板中单击左侧的【库】按钮，显示本站点所有的库项目文件，选中要插入的库项目“nav_left0601”，单击该面板中左下角的【插入】按钮，即可插入一个库项目，如图6-18所示。2、在表格3的下方插入库项目nav_bottom0601将光标放在表格3的左侧，在“资源”面板中选中要插入的库项目“nav_bottom0601”，然后点击该面板中左下角的【插入】按钮，即可在表格3的下方插入另一个库项目。保存网站，预览其效果，如图6-19所示。6.2.3创建网页模板【操作规定】利用现有的网站文档“index0601.html”创建网页模板“index0601.dwt”。【实施过程】（1）在DreamweaverCS3主窗口中，单击菜单【文件】→【另存为模板】，弹出【另存模板】对话框。（2）在【另存模板】对话框中的“站点”下拉列表框选择模板保存的站点，本工程选择“名城游”。在“现存的模板”列表框中显示了当前站点中的所有模板，由于本站点暂时没有创建模板，所以显示“（没有模板）”。在“描述”文本框中键入对模版的表明文字“使用表格布局网页”。在“另存为”文本框中键入模板的名称，这里输入“index0601”，如图6-20所示。

（3）设置完毕后，在【另存为模板】对话框中，单击【保存】按钮，弹出一个如图6-21所示的“要升级链接吗”提示信息对话框。如果在该对话框中单击【是】按钮。则当前网页会被转化成模板，同时平台将自动在所选取站点的根目录下构建“Templates”文件夹，并将建立的模版文件存放在该文件夹中，如图6-22所示。6.2.4定义与设置能编辑区域跟可选区域【操作要求】（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-29表格3第一列单元格的“背景图像”属性的设定②定义能编辑的标签属性“bgcolor”3、定义不可编辑的可选区域（1）选择应修改为不可编辑的可选区域的表格1。

（2）在DreamweaverCS3主界面中，单击菜单【插入记录】→【模板对象】→【可选区域】。或者在“插入”工具栏“常用”选项卡中，单击【模板】下拉菜单中的【可选区域】按钮。弹出【新建可选区域】对话框，如图6-33所示。（3）在【新建可选区域】对话框中“基本”选项卡的“名称”文本框中键入该可选区域的名称。如果选中“默认显示”复选框，则该可选区域在默认情况下将在网页中显示。（4）切换至“基本”选项卡，然后点击【确定】按钮，即可定义一个不可编辑的可选区域。4、定义能编辑的可选区域（1）

选择应修改为能编辑的可选区域的表格3-1中的图像“001.jpg”。（2）在DreamweaverCS3主界面中，单击菜单【插入记录】→【模板对象】→【可编辑的可选区域】。或者在“插入”工具栏“常用”选项卡中，单击【模板】下拉菜单中的【可选区域】按钮。弹出【新建可选区域】对话框，如图6-36所示。（3）在【新建可选区域】对话框“基本”选项卡的“名称”文本框中键入该能编辑的可选区域的名称。如果选中“默认显示”复选框，则该能编辑的可选区域在默认情况下将在基于模板的网站中显示。（4）切换至“基本”选项卡，然后点击【确定】按钮，即可定义一个可编辑的可选区域。5、修改能编辑区域（1）单击网页模板中能编辑区域左上角的标签，如“EditRegion1”，选中该能编辑区域。（2）在“可编辑区域”属性面板中输入一个新的名称，按回车键确定，如图6-39所示。6、修改可选区域保存所建立的模版。6.2.5创建基于网页模板的网站【操作要求】（1）创建基于网页模板index0601.dwt的网站index0602.html。（2）修改和升级模板index0601.dwt的属性。（3）编辑与更新网站index0602.html的内容。

【实施过程】1．应用网站模板构建网页文档（1）在DreamweaverCS3主界面中，单击菜单【文件】→【新建】，弹出【新建文档】对话框，在【新建文档】对话框中依次点击选择【模板中的页】→【名城游】→【index0601】选项，如图6-41所示。（3）单击【创建】按钮，这样将基于该模板建立一个新的网页。（4）将新建立的基于此模板的网站保存在站点根文件夹下的文件夹“task06-1”中，命名为“index0602.html”，然后预览其效果。2．修改和升级网页模板属性（1）显示或隐藏可选区域（2）设置能编辑标签属性的属性值3、编辑与升级基于网页模板创建的网站（1）在“文档”工具栏中将网页标题更改为“畅游上海城”。（2）将表格2中的文字“北京”修改为“上海”。（3）将表格3-3中的图像源文件“0601北京游/image/002.jpg”修改为“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上海游/image/mapshanghai.gif”，将第二行的“高”调整为“365像素”，将图像的“高”也设定为“365像素”。保存网站index0602.html，预览其效果。6.2.6修改网页模板并升级网页【操作要求】对网页模板index0601.dwt进行必要的更改，然后升级由该模板生成的网站文档index0602.html。【实施过程】对网页模板进行更改后，可以将网站模板的更改要