dreamweaver cs 网页制作案例教程电子教案第章制作表格布局的网页

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

第4章　制作表格布局的网页第4章　制作表格布局的网页表格是常用的页面元素之一，制作网页时经常借助表格进行布局，通过设置表格及单元格的属性，对页面中的元素进行准确定位，灵活地使用表格的背景、边框等属性可以得到更加美观的效果，表格还能有序地排列数据。【教学导航】教学目标（1）学会正确地插入表格，并合理地设置表格的属性（2）学会正确地在表格中插入嵌套表格，并合理地设置嵌套表格的属性（3）掌握单元格的合并、拆分、插入和删除的操作方法（4）学会正确地设置表格中行和列的属性（5）学会正确设置表格、单元格的背景图像和背景颜色（6）学会正确地在表格中输入文字并定位（7）学会正确地在表格中插入图像并定位（8）学会正确地在表格中插入flash动画并定位（9）了解设置滚动文本效果的方法（10）了解网页文件头内容的设置方法本章重点（1）插入表格、设置表格的属性（2）合并或拆分单元格（3）设置表格、单元格的背景图像和背景颜色（4）在表格中输入文字、插入图像和flash动画本章难点（1）在表格中插入嵌套表格，并设置嵌套表格的属性（2）设置滚动文本效果（3）设置网页文件头内容教学方法任务驱动法、分组讨论法、三步训练法课时建议6课时（含课堂同步训练）4.1　课前准备（1）在本地硬盘创建文件夹（2）启动DreamweaverCS3通过Windows的【开始】菜单或桌面的快捷方式启动DreamweaverCS3。（3）创建名称为“江湖游”的本地站点（4）新建一个网页文档应用【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“index0401.html”的网页文档。（5）设置网页标题85 第4章　制作表格布局的网页（6）保存该网页。4.2　课堂引导训练及评价【课堂引导训练任务描述】1、网页制作任务卡网页制作任务卡如表4-1所示。表4-1　网页制作任务卡任务编号04-1任务名称制作表格布局的网页网页主题江湖游计划工时120min网页制作任务描述（1）利用表格对网页进行布局（2）在网格中插入多个表格：表格1、表格2、表格3、表格4和表格5（3）设置表格、行、列和单元格的属性（4）在表格的单元格中插入Flash动画及Flash动画的属性设置（5）在表格的单元格中输入文字及文字的属性设置（6）插入嵌套表格：表格2-1和表格4-1，设置嵌套表格的属性设置（7）单元格的合并与拆分（8）设置滚动文本效果（9）插入Meta和关键字网页布局结构分析（1）表格和多层嵌套表格布局方式，如图4-2所示。（2）文字型导航栏（位于网页顶部和网页底部两个位置）网页色彩搭配分析网页中文字的颜色：#000000、#d48b19、#FF3300、#339900、#7d35bf、#6d9527、#3366CC、#203f78、#1080e9，表格各单元格的背景颜色：#fff9e9、#D3EDC2、#F8FDD9网页组成元素分析主要包括表格、标题文本、正文文本、Flash动画、Meta和关键字任务实现流程分析插入表格1及其属性设置→插入Flash动画及其属性设置→设置表格1的背景图像、行属性→在表格1中输入文本→设置滚动文本效果→插入表格2及其设置属性设置→在表格中插入图像、输入文本及其属性设置→插入嵌套表格2-1→插入表格3及其属性设置→插入表格4→插入嵌套表格4-1→插入表格5→插入Meta和关键字配盘素材导引原始文件位置：start4第4章制作表格布局的网页task04-1最终文件位置：result4第4章制作表格布局的网页task04-12、网页制作任务跟踪卡网页制作任务跟踪卡如表4-2所示。表4-2　网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态85 第4章　制作表格布局的网页【网页效果展示】网页index0401.html的浏览效果如图4-3所示。图4-3　网页的整体浏览效果【任务完成过程】4.2.1　打开网页在DreamweaverCS3的“文件”面板中，双击网页文档index0401.html，打开该网页，然后将光标置于页面的起始位置。4.2.2　插入表格1及其属性设置【操作要求】插入一个3行1列的表格1，且设置其属性：宽为880，边框为1，填充、间距为0，对齐方式为居中对齐。【实施过程】1、通过【表格】对话框插入表格1在DreamweaverCS3主界面中，单击菜单【插入记录】→【表格】，弹出【表格】对话框。（1）在【表格】对话框“行数”文本框中输入“3”，在“列数”文本框中输入“1”。85 第4章　制作表格布局的网页（2）在“表格宽度”文本框输入“880”，其后的下拉列表框中选择宽度的单位为“像素”。（3）在“边框粗细”文本框中指定表格边框的宽度，默认值为1，单位为像素。如果在浏览器中浏览时不显示表格边框，将“边框粗细”设置为0。（4）设置完成后单击【确定】按钮，一个3行1列的表格便插入到页面。（5）保存网页中所插入的表格。2、设置表格1的属性（1）选择所插入的表格1（2）通过表格的“属性”面板设置其属性（3）保存网页中表格的属性设置4.2.3　插入Flash动画及其属性设置【操作要求】（1）在表格1第一行的单元格中插入一个Flash动画“banner01.swf”。（2）设置所插入Flash动画的属性：宽为880，高为120，对齐方式设置为“居中”。【实施过程】1、在表格1的单元格中插入Flash动画将光标置于表格1第一行的的单元格中，在DreamweaverCS3主界面中，单击菜单【插入记录】→【媒体】→【Flash】，如图4-7所示，弹出【选择文件】对话框。保存网页中所插入的Flash动画。2、设置Flash动画的属性保存Flash动画的属性设置4.2.4　设置表格1单元格的背景图像【操作要求】（1）设置表格1第二行单元格的背景图像为bg01.gif。（2）设置表格1第二行单元格的属性：水平对齐方式为“居中对齐”，垂直对齐方式为“居中”。【实施过程】将光标置于表格1第二行的单元格中，在“单元格”的“属性”面板中，单击“背景”文本框右侧的“单元格背景”按钮，在弹出的【选择图像源文件】对话框中选择所需的背景图像文件“bg01.gif”，如图4-12所示。在【选择图像源文件】对话框中单击【确定】按钮即可设置单元格的背景图像。按照同样的方式，设置第三行单元格的背景图像为“bg01.gif”，其他属性设置与第二行单元格相同。保存背景图像的设置。4.2.5　设置表格1行的属性【操作要求】（1）设置表格1第二行的高为35。85 第4章　制作表格布局的网页（2）设置表格1第三行的高为30。【实施过程】（1）选择表格行将鼠标指针指向表格1的第二行的左边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键即可选中该行。（2）设置表格行的属性在表格行的“属性”面板的“高”文本框中输入行的高度“35”，单位默认为“像素”。保存表格行的属性设置。4.2.6　在表格的单元格中输入文本【操作要求】（1）在表格1的第二行输入所需要的文本，用于设置超链接，设置其大小为12像素。（2）在表格1的第三行输入所需要的文本，用于设置文字滚动效果。【实施过程】在表格1第二行的单元格中输入“首页|千岛湖梅峰观岛|千岛湖五龙岛|千岛湖猴岛|千岛湖鸵鸟岛|千岛湖森林氧吧|上西村瀑布群|”，由于该单元格的属性事先已设置好，我们发现输入的文本在水平方向和垂直方向都会自动居中对齐。选中第二行中所输入的文本，在“属性”面板中设置其大小为“12像素”，系统自动命名该样式名称为“STYLE1”。在所插入表格第三行的单元格中输入“千岛湖旅游景点：千岛湖梅峰观岛|千岛湖五龙岛|千岛湖猴岛|千岛湖鸵鸟岛|千岛湖森林氧吧|上西村瀑布群|千岛湖屏溪竹筏漂流|千岛湖三潭岛|”，选中第三行中所输入的文本，在“样式”列表中选择样式“STYLE1”即可。保存网页中所输入的文本。4.2.7　设置滚动文本效果【操作要求】将第三行中所输入的文字设置为滚动效果。【实施过程】在“文档”工具栏单击“代码”按钮，切换到“代码视图”窗口，将光标置于第三行单元格中HTML代码“”的左侧，输入“<”，此时会自动出现标签列表框，在该列表框中双击选取“marquee”。接着通过键盘输入以下HTML代码。然后将光标置于第三行单元格中HTML代码“”的右侧，输入HTML代码“”，这样滚动文本效果的HTML代码便输入完成，保存所输入的HTML代码。4.2.8　浏览表格1及其中的Flash动画和文本的效果按F12浏览表格1及其中的Flash动画和文本的效果，如图4-16所示。第一行单元格显示了动画效果，第三行单元格的文本由右向左滚动。85 第4章　制作表格布局的网页将第一个表格的“边框”设置为“0”，以保证各个表格宽度的一致性。4.2.9　插入表格2及其属性设置【操作要求】插入一个2行3列表格，其属性设置为：宽为880，边框、边距和间距均为0。【实施过程】将光标置于表格1的右铡，在【常用】工具栏中单击【表格】按钮。在弹出的【表格】对话框中，“行数”文本框中输入“2”，“列数”文本框中输入“3”，“表格宽度”文本框中输入“880”，单位设置为“像素”，“边框粗细”文本框输入“0”，“单元格边距”文本框中输入“0”，“单元格间距”文本框中输入“0”，如图4-18所示。然后单击【确定】按钮，即可在表格1的下方插入一个二行三列的表格。4.2.10　设置表格2及其行、列属性【操作要求】（1）将表格2的对齐方式设置为“居中对齐”。（2）将表格2的第一列宽度设置为“405像素”，第二列宽度设置为“360像素”，第三列宽度设置为“115像素”。（3）将表格2第一行的高度设置为“28像素”，第二行的高度设置为“150像素”。（4）将表格2第一列的两个单元格合并，将表格2第三列的两个单元格合并。【实施过程】（1）选择表格2（2）设置表格2的属性（3）设置列宽按同样的方法，将表格2的第二列宽度设置为“360像素”，第三列宽度设置为“115像素”。（4）设置行高（5）合并表格2第一列的两个单元格（6）合并表格2第三列的两个单元格4.2.11　在表格2第一列的单元格中插入图像且设置其属性【操作要求】（1）在表格2第一列的单元格中插入图像“001.jpg”。（2）设置所插入图像的属性：宽为405，高为178，替换文本为“千岛湖全貌”，对齐方式为“居中”。【实施过程】1、在表格2第一列的单元格中插入图像将光标置于表格2第一列的单元格，单击【文档】工具栏的【插入图像】按钮，在弹出的下拉菜单单击【图像】菜单项。在弹出的【选择图像源文件】对话框中选择所需要插入的图像文件“001.jpg”，如图4-22所示，在该对话框中单击【确定】按钮即可插入一幅图像。85 第4章　制作表格布局的网页此时我们发现由于图像的尺寸大于该单元格的尺寸，并且该单元格的尺寸也发现了改变。2、设置表格2第一列单元格中图像的属性选取表格2第一列单元格中所插入的图像，将其“宽”设置为“405”，将其“高”设置为“178”。设置“替换”文本为“千岛湖全貌”，设置“对齐”为“居中”。其他属性设置保持其默认值不变。4.2.12　在表格2第二列两个单元格中输入文本并设置其属性【操作要求】（1）设置表格2第二列上方单元格的背景图像为“bg02.gif”，水平对齐方式为“居中对齐”，垂直对齐方式为“居中”。（2）在表格2第二列上方单元格中输入文字“梅峰观岛”，且设置所输入文字的属性：大小为16px，颜色为“#FF3300”，字形为“粗体”。（3）设置表格2第二列下方单元格的背景颜色为“#fff9e9”，垂直对齐方式为“居中”。（4）在表格2第二列下方单元格输入所需的文字，设置文字大小为“12px”，文字颜色为“#D48B19”。将部分文字（第一行的“千岛湖梅峰观岛”和第三行、第六行的“梅峰观岛”）设置为粗体。【实施过程】（1）设置表格2第二列上方单元格的属性（2）在第二列上方单元格中输入文本并且设置文本属性（3）设置第二列下方单元格的属性（4）拷贝已有文本并且设置文本属性4.2.13　在表格2的第三列单元格中插入嵌套表格2-1【操作要求】（1）在表格2的第三列单元格插入一个2行1列的嵌套表格2-1，且设置其属性。（2）在嵌套表格2-1中插入两幅图像，且设置其属性。【实施过程】（1）在表格2的第三列单元格中插入一个2行1列的嵌套表格2-1，该嵌套表格的宽度设置为“100%”，将嵌套表格的两行的高度都设置为“88像素”，“垂直”对齐方式设置为“居中”。（2）在上方单元格中插入站点images文件夹中的图像“002.jpg”，在下方单元格中插入站点内images文件夹中的图像“003.jpg”。设置两幅图像的“宽”为“115像素”，“高”为“88像素”。保存新插入的嵌套表格和插入的图像。4.2.14　插入表格3并设置其属性【操作要求】（1）插入一个1行1列的表格3，该表格宽度为“880像素”，填充、间距和边框均为0。85 第4章　制作表格布局的网页（2）设置该表格的背景图像为“004.gif”，表格的行高为“8像素”。【实施过程】（1）插入一个1行1列的表格3（2）设置表格属性4.2.15　保存网页，第二次预览网页效果保存网页，按F12预览网页，其效果如图4-27所示。4.2.16　插入表格4【操作要求】（1）插入表格4，该表格居中对齐，宽度为“880像素”，填充、间距和边框为0。（2）将表格4的行高设置为“206像素”，第一列的宽度设置为“650像素”，第二列的宽度设置为“230像素”。（3）在表格4第二列的单元格中插入图像“005.jpg”，设置所插入图像的宽为“230像素”，高为“206像素”。【实施过程】在表格3的下面插入一个1行2列的表格4，表格宽度设置为“880像素”，“边框粗细”、“单元格边框”和“单元格间距”都设置为“0”。将表格的“对齐”方式设置为“居中对齐”，将表格的行高设置为“206像素”，第一列的宽度设置为“650像素”，第二列的宽度设置为“230像素”。在第二列的单元格中插入站点内images文件夹中的图像“005.jpg”，并且将该图像的宽度设置为“230像素”，高度设置为“206像素”。4.2.17　插入嵌套表格4-1【操作要求】（1）在表格4第一列的单元格中插入一个2行5列的嵌套表格4-1。（2）设置嵌套表格4-1的属性：表格的宽度为“98%”，对齐方式为“居中对齐”，第一行的高度为“28像素”，第二行的高度为“178像素”，第一列的宽度为“177像素”，第二列的宽度为“5像素”，第三列的宽度为“294像素”，第四列的宽度设置为“5像素”。（3）表格4-1的第一、三、五列上方单元格的背景图像设置为“bg03.gif”，第五列的下方单元格的背景图像设置为“bg04.gif”。（4）表格4-1第一列的下方单元格的背景颜色设置为“#D3EDC2”，第二、四列的单元格的背景颜色设置为“#EDEDED”，第三列的下方单元格的背景颜色设置为“#F8FDD9”。（5）表格4-1第一、三、五列上方的单元格的“水平”对齐方式设置为“居中对齐”，“垂直”对齐方式设置为“居中”。第一、三、五列下方的单元格的“垂直”对齐方式设置为“居中”。（6）分别在表格4-1第一、三、五列的上方单元格中输入“鸵鸟岛”、“五龙岛”和“猴岛”。将这些标题文字的大小设置为“16像素”，颜色设置为“#339900”，并且设置为“粗体”。85 第4章　制作表格布局的网页（7）将文本文档“千岛湖景点.txt”对应的景点介绍文本拷贝到表格4-1第一、三、五列下方的单元格中，且将这些文字的大小设置为“12像素”，将第一列下方单元格中的文字颜色设置为“#7d35bf”，第三列下方单元格中文字的颜色设置为“#6d9527”，第五列下方单元格中文字的颜色设置为“#3366CC”。【实施过程】（1）插入一个2行2列的嵌套表格4-1（2）设置嵌套表格的属性（3）设置表格的行高（4）插入列（5）设置列宽度（6）合并单元格（7）设置背景图像（8）设置背景颜色（9）设置单元格的对齐方式（10）输入标题文字且设置其格式属性（11）拷贝景点介绍文字且设置其格式属性（12）保存网页，且预览其效果。4.2.18　插入表格5【操作要求】（1）插入一个3行1列的表格5，该表格居中对齐，宽度为“880像素”，填充、间距和边框为0。（2）表格5第一行的高度为“1像素”，背景颜色为“#CCCCCC；第二行和第三行的高度为“25像素”，“水平”对齐方式为“居中对齐”，“垂直”对齐方式为“居中”。（3）在表格5第二行的单元格中输入所需的文字，且将文字大小设置为“12像素”，颜色设置为“#203f78”。（4）在表格5第三行的单元格中输入所需的文字，且将文字大小设置为“14像素”，颜色设置为“#1080e9”。【实施过程】（1）插入一个1行1列的表格5（2）拆分单元格（3）设置单元格属性（4）输入文本（5）插入版权字符（6）设置文本属性（7）保存网页，预览其效果。4.2.19　设置网页头文件的内容1、“文件头内容”工具栏在DreamweaverCS3主窗口中，单击菜单【查看】→【文件头内容】，如图4-33所示的“文件头内容”工具栏便会出现在设计视图的上部。85 第4章　制作表格布局的网页2、插入MetaMeta标记用来记录当前网页的相关信息，例如编码、作者、版权等，也可以用来给服务器提供信息，例如网页终止时间、刷新的间隔等。3、插入关键字关键字的作用是协助Internet上的搜索引擎查找网页，网站中的来访者大多都是由搜索引擎引导而来的。4.2.20　保存网页，预览网页的最终效果保存网页，按F12预览该网页的最终效果，如图4-所示。【课堂引导训练任务完成情况评价】对本次网页制作任务的完成情况进行自评，网页制作任务完成情况评价内容如表4-3所示。表4-3　网页制作任务完成情况评价表任务名称制作表格布局的网页综合评价任务完成情况分项评价创建站点网页布局色彩搭配网页内容浏览效果其他存在的主要问题4.3　课堂同步训练及评价4.3.1　课堂同步训练任务描述1、同步训练任务卡课堂同步训练的任务卡如表4-4所示。表4-4　课堂同步训练任务卡任务编号04-2任务名称制作以表格布局的展示三峡旅游景点的网页网页主题三峡旅游计划工时60min同步训练任务描述（1）创建一个名称为“三峡旅游”的站点，创建展示三峡旅游景点的网页“ex0402.html”，网页的主题为“三峡旅游景点”（2）从上到下依次插入三个表格：1行3列的表格table01、1行3列的表格table02和3行1列的表格table03。这三个表格的“宽”都设置为760像素，填充、间距、边框都设置为0，对齐方式都为“居中对齐”85 第4章　制作表格布局的网页。表格table01的三列宽度分别为70、620、70，表格table02的三列宽度分别为10、740、10。（3）在表格table01的第2个单元格插入一个1行13列的表格table011，该表格的宽设置为“100%”，填充、间距、边框都设置为0，对齐方式都为“居中对齐”（4）在表格table02的第2个单元格插入一个4行2列的表格table021，该表格的宽设置为“100%”，填充、间距、边框都设置为0，对齐方式都为“居中对齐”（5）在表格table021第一行的第一个单元格中插入图像dh_01.gif，在第二个单元格中输入文字“长江简介”，且设置其背景图像dh_02.gif。第三行的两个单元分别插入图像、设置单元格的背景图像和输入文字“三峡工程”（6）将表格table021的第二行和第四行的两个单元格合并，在合并后的单元格中插入一个3行1列的表格table0211和table0212（7）在表格table0211的第二行单元格输入文字与插入图像，对图像的大小和位置进行调整（8）在表格table0212的第二行单元格输入文字与插入图像，在第三行单元格输入文字“>详情进入”，且对图像的大小和位置进行调整（9）将表格table03第一行的高设置为5，背景颜色设置为“#ff6600”。将该表格第二行和第三行的高度设置为9，背景颜色设置为“#ffffcc”，在第二行输入文字“关于我们|联系方式|网站导航|在线咨询”，在第三行输入文字“版权所有(2008-2010) © E游天下网”（10）设置网页中文字的格式（包括字体、大小、字形和颜色等方面）配盘素材导引原始文件位置：start4第4章制作表格布局的网页task04-2最终文件位置：result4第4章制作表格布局的网页task04-22、同步训练任务跟踪卡课堂同步训练的任务跟踪卡如表4-5所示。表4-5　课堂同步训练的任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态4.3.2　同步训练网页的效果展示同步训练网页的浏览效果如图4-40所示。85 第4章　制作表格布局的网页图4-40　同步训练网页的浏览效果4.3.3　同步训练网页的制作要点提示（1）首先在文件夹“04第4章制作表格布局的网页”中新建一个子文件夹“task04-2”然后在该文件夹中创建子文件夹“images”和“text”，将所需要的图像文件和文本文件从光盘拷贝到对应的文件夹中。这些操作应在Windows操作系统的资源管理器中完成。（2）为了节省输入文字的时间，文本网页中所需的文字直接从文本文件“ex0402.txt”中拷贝即可。（3）表格table011中分隔线是将该表格的第2、4、6…等偶数序号的单元格宽度设置为“1”，然后在该单元格插入图像01.gif的效果。（4）表格table02的第一列和第三列的效果有所不同，是因为第一列设置了背景图像“02.gif”，而第三列设置了背景颜色“#eff0f4”。4.3.4　课堂同步训练评价课堂同步训练评价内容如表4-6所示。表4-6　课堂同步训练评价表任务编号04-2任务名称制作以表格布局的展示三峡旅游景点的网页任务完成方式【　】小组协作完成　　　【　】个人独立完成课堂同步实践任务完成情况评价自我评价小组评价教师评价存在的主要问题85 第4章　制作表格布局的网页4.4　课外拓展训练1、拓展训练任务卡课外拓展训练的任务卡如表4-7所示。表4-7　课外拓展训练任务卡任务编号04-3任务名称制作以表格布局的介绍中国名湖的网页网页主题中国名湖计划工时60min拓展任务描述我国是一个湖泊众多的国家，洞庭雄阔，鄱阳奇伟，太湖深秀，西湖妩媚，同是湖泊，但每个湖泊各有自己的性格特征。湖泊是美的，她所具有的形、影、声、色，以及她与日月相辉映、与山石相配合所形成的和谐之美，给大自然增添了无限风采。与山脉的伟岸崔嵬、沉雄苍郁相比，湖泊具有清奇淡逸、灵秀幽深的品性，更有一种纯洁、安宁、柔静的温情。请完成以下课外拓展任务：（1）以“中国名湖”为主题创建一个站点（2）制作一个介绍中国名湖（例如洞庭湖、鄱阳湖、太湖、西湖等）的网页ex0403.html，网页中所需的图片、Flash动画和文字内容从相关网站获取（3）该网页为上中下结构，上部为导航栏，中部为网页的主体内容，下部为底部导航栏和版权信息。各部分采用表格或多表格嵌套进行布局素材准备要求利用百度、谷歌等网站搜索介绍“中国名湖”的网站，然后从这些网站中收集有关中国名湖的图片、文字和Flash动画，并整理成制作网页所需的素材2、拓展训练任务跟踪卡课外拓展训练的任务跟踪卡如表4-8所示。表4-8　课外拓展训练的任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态3、拓展训练任务完成情况描述课外拓展训练任务完成情况如表4-9所示。表4-9　课外拓展训练任务完成情况任务编号04-3任务名称制作以表格布局的介绍中国名湖的网页任务完成方式【　】小组协作完成　　　【　】个人独立完成网页布局结构网页色彩搭配网页的主要元素85 第4章　制作表格布局的网页已参考的网站完成情况评价【本章小结】本章所制作的网页应用表格进行布局，通过本章的学习熟悉了在网页中插入表格的方法，在表格中插入嵌套表格及行、列的方法，表格及单元格的属性设置方法，拆分和合并单元格的方法。同时还介绍了插入Flash动画及其属性设置的方法、设置滚动文本的方法，对文字型导航栏有一定的认识。85