Dreamweaver CS 网页制作案例教程电子教案第章制作表格布局的网页.docx

资源描述

Dreamweaver CS 网页制作案例教程电子教案第章制作表格布局的网页.docx

《Dreamweaver CS 网页制作案例教程电子教案第章制作表格布局的网页.docx》由会员分享，可在线阅读，更多相关《Dreamweaver CS 网页制作案例教程电子教案第章制作表格布局的网页.docx（19页珍藏版）》请在冰豆网上搜索。

Dreamweaver CS 网页制作案例教程电子教案第章制作表格布局的网页.docx

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

第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）设置网页标题

（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和关键字

配盘素材导引

原始文件位置：

start\04第4章制作表格布局的网页\task04-1

最终文件位置：

result\04第4章制作表格布局的网页\task04-1

2、网页制作任务跟踪卡

网页制作任务跟踪卡如表4-2所示。

表4-2　网页制作任务跟踪卡

任务编号

开始时间

完成时间

计划工时

实际工时

当前状态

【网页效果展示】

网页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”。

（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。

（2）设置表格1第三行的高为30。

【实施过程】

（1）选择表格行

将鼠标指针指向表格1的第二行的左边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键即可选中该行。

（2）设置表格行的属性

在表格行的“属性”面板的“高”文本框中输入行的高度“35”，单位默认为“像素”。

保存表格行的属性设置。

4.2.6　在表格的单元格中输入文本

【操作要求】

（1）在表格1的第二行输入所需要的文本，用于设置超链接，设置其大小为12像素。

（2）在表格1的第三行输入所需要的文本，用于设置文字滚动效果。

【实施过程】

选中第二行中所输入的文本，在“属性”面板中设置其大小为“12像素”，系统自动命名该样式名称为“STYLE1”。

在所插入表格第三行的单元格中输入“千岛湖旅游景点：

保存网页中所输入的文本。

4.2.7　设置滚动文本效果

【操作要求】

将第三行中所输入的文字设置为滚动效果。

【实施过程】

在“文档”工具栏单击“代码”按钮

，切换到“代码视图”窗口，将光标置于第三行单元格中HTML代码“”的左侧，输入“<”，此时会自动出现标签列表框，在该列表框中双击选取“marquee”。

接着通过键盘输入以下HTML代码。

然后将光标置于第三行单元格中HTML代码“”的右侧，输入HTML代码“”，这样滚动文本效果的HTML代码便输入完成，保存所输入的HTML代码。

4.2.8　浏览表格1及其中的Flash动画和文本的效果

按F12浏览表格1及其中的Flash动画和文本的效果，如图4-16所示。

第一行单元格显示了动画效果，第三行单元格的文本由右向左滚动。

将第一个表格的“边框”设置为“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所示，在该对话框中单击【确定】按钮即可插入一幅图像。

此时我们发现由于图像的尺寸大于该单元格的尺寸，并且该单元格的尺寸也发现了改变。

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。

（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”，并且设置为“粗体”。

（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所示的“文件头内容”工具栏便会出现在设计视图的上部。

2、插入Meta

Meta标记用来记录当前网页的相关信息，例如编码、作者、版权等，也可以用来给服务器提供信息，例如网页终止时间、刷新的间隔等。

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，对齐方式都为“居中对齐”。

表格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”。

（10）设置网页中文字的格式（包括字体、大小、字形和颜色等方面）

配盘素材导引

原始文件位置：

start\04第4章制作表格布局的网页\task04-2

最终文件位置：

result\04第4章制作表格布局的网页\task04-2

2、同步训练任务跟踪卡

课堂同步训练的任务跟踪卡如表4-5所示。

表4-5　课堂同步训练的任务跟踪卡

任务编号

开始时间

完成时间

计划工时

实际工时

当前状态

4.3.2　同步训练网页的效果展示

同步训练网页的浏览效果如图4-40所示。

图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

任务名称

制作以表格布局的展示三峡旅游景点的网页

任务完成方式

【　】小组协作完成　　　【　】个人独立完成

课堂同步实践任务完成情况评价

自我评价

小组评价

教师评价

存在的主要问题

展开阅读全文