网页设计与制作案例教程-电子教案9.ppt

7.17.1使用表格布局网页使用表格布局网页 表格是常用的表格是常用的页页面元素，制作网面元素，制作网页经页经常常要借助表格要借助表格进进行排版，在网行排版，在网页页布局方面，表布局方面，表格可格可谓谓起着起着举举足足轻轻重的作用，通重的作用，通过设过设置表格置表格以及以及单单元格的属性，元格的属性，对页对页面中的元素面中的元素进进行准行准确定位，表格能确定位，表格能够够有序地排列数据又能有序地排列数据又能对页对页面面进进行更加合理的布局。灵活地使用表格的行更加合理的布局。灵活地使用表格的背景、框背景、框线线等属性可以得到更加美等属性可以得到更加美观观的效果。的效果。l 课程引导课程引导（1 1）学会添加表格、设置表格属性。）学会添加表格、设置表格属性。（2 2）掌握设置表格中行和列属性的方法。）掌握设置表格中行和列属性的方法。（3 3）掌握拆分单元格，合并单元格的方法。）掌握拆分单元格，合并单元格的方法。（4 4）掌握在表格中输入文字并定位的方法。）掌握在表格中输入文字并定位的方法。（5 5）掌握在表格中插入图像并定位的方法。）掌握在表格中插入图像并定位的方法。l网页浏览效果展示网页浏览效果展示 应用表格布局的网页应用表格布局的网页04.html04.html预览效果预览效果如图所示。如图所示。图图7-1应应用表格布局网用表格布局网页页的的预览预览效果效果l 本章操作任务本章操作任务 （1 1）在）在“长沙世界之窗长沙世界之窗”网站文件夹中网站文件夹中“0404表格布局表格布局”中创建命名为中创建命名为“04.html04.html”的网页，网页的标题为的网页，网页的标题为“长沙世界之窗的国长沙世界之窗的国际街际街”。（2 2）插入一张）插入一张3 3行行4 4列的表格，表格宽度列的表格，表格宽度设置为设置为100100。（3 3）拆分单元格，合并单元格。）拆分单元格，合并单元格。（4 4）设置表格以及行、列、单元格的属性。）设置表格以及行、列、单元格的属性。（5 5）为单元格设置背景图像。）为单元格设置背景图像。（6 6）在表格的多个不同单元格中插入多幅）在表格的多个不同单元格中插入多幅图像。图像。7.1.17.1.1认识表格认识表格1 1表格的组成元素表格的组成元素 表格的组成元素主要包括行、列、单元表格的组成元素主要包括行、列、单元格。格。（1 1）单元格：表格中的每一个小格称为）单元格：表格中的每一个小格称为一个单元格。一个单元格。（2 2）行：水平方向的一排单元格称为一）行：水平方向的一排单元格称为一行。行。（3 3）列：垂直方向的一排单元格称为一）列：垂直方向的一排单元格称为一列。列。（4 4）边框：整张表格的外边缘称为边框。）边框：整张表格的外边缘称为边框。（5 5）间距：指单元格与单元格之间的距）间距：指单元格与单元格之间的距离。离。（1 1）利用表格布局网页中的文字、图像）利用表格布局网页中的文字、图像等页面元素等页面元素 （2 2）利用表格合成尺寸较大的图像）利用表格合成尺寸较大的图像 （3 3）应用表格存储文本或数据，便于对）应用表格存储文本或数据，便于对数据进行排序数据进行排序2 2表格的应用表格的应用 在在“长沙世界之窗长沙世界之窗”网站文件夹网站文件夹“0404表格表格布局布局”中创建命名为中创建命名为“04.html04.html”的网页，的网页，该网页利用表格布局页面元素，具体操作过该网页利用表格布局页面元素，具体操作过程如下。程如下。7.1.27.1.2表格的基本操作表格的基本操作 （1 1）启动）启动DreamweaverDreamweaver 8 8，切换到，切换到“长沙长沙世界之窗世界之窗”站点。如果该站点不存在，则新站点。如果该站点不存在，则新建一个名为建一个名为“长沙世界之窗长沙世界之窗”的站点。的站点。（2 2）在站点下创建子文件夹）在站点下创建子文件夹“0404表格布表格布局局”，在，在“0404表格布局表格布局”文件夹中创建子文文件夹中创建子文件夹件夹“imageimage”，并将所需图像复制到该文，并将所需图像复制到该文件夹下。件夹下。1 1新建网页新建网页 （3 3）在）在DreamweaverDreamweaver 8 8主窗口中，单击菜主窗口中，单击菜单单【文件文件】【新建新建】，打开，打开“新建文档新建文档”对话框，在对话框，在“常规常规”选项卡中，选项卡中，“类别类别”列列表框中选择表框中选择“基本页基本页”，“基本页基本页”列表框列表框中选择中选择“HTMLHTML”，单击，单击【创建创建】按钮，该站按钮，该站点下一个名为点下一个名为“Untitled-1Untitled-1”文档便创建。文档便创建。单击标准工具栏上的单击标准工具栏上的【保存保存】按钮，打开按钮，打开“另存为另存为”对话框，保存位置为对话框，保存位置为“0404表格布局表格布局”，文件名为，文件名为“04.html04.html”，单击，单击【保存保存】按钮，保存该网页文档。按钮，保存该网页文档。（4 4）设置网页标题，在文档工具栏的）设置网页标题，在文档工具栏的“标题标题”文本框直接输入文档标题文本框直接输入文档标题“长沙世界长沙世界之窗的国际街之窗的国际街”即可，如图即可，如图7-37-3所示。如果所示。如果需要设置网页的其他页面属性，单击需要设置网页的其他页面属性，单击“属性属性”面板面板【页面属性页面属性】按钮，打开按钮，打开“页面属性页面属性”对话框，在该对话框中设置页面属性即可，对话框，在该对话框中设置页面属性即可，这里暂不设置其他属性。这里暂不设置其他属性。（5 5）保存该网页。）保存该网页。（1 1）打开网页）打开网页04.html04.html，将光标置于网页，将光标置于网页文档文档04.html04.html第一行的最左端，在第一行的最左端，在DreamweaverDreamweaver 8 8主窗口中，单击菜单主窗口中，单击菜单【插入插入】【表格表格】。（2 2）对）对“表格表格”对话框中的各个参数进对话框中的各个参数进行设置行设置2 2插入表格插入表格p 在在“行数行数”文本框中输入文本框中输入“3 3”，在，在“列列数数”文本框中输入文本框中输入“4 4”。p 在在“表格宽度表格宽度”文本框输入文本框输入“100%100%”，其，其后的下拉列表框中选择宽度的单位为后的下拉列表框中选择宽度的单位为“百分百分比比”。（2 2）对）对“表格表格”对话框中的各个参数进对话框中的各个参数进行设置行设置p在在“边框粗细边框粗细”文本框中指定表格边框的文本框中指定表格边框的宽度，默认值为宽度，默认值为1 1，单位为像素。如果在游，单位为像素。如果在游览器中浏览时要使表格不显示边框，将览器中浏览时要使表格不显示边框，将“边边框粗细框粗细”设置为设置为0 0。p在在“单元格边距单元格边距”中设置单元格边框与单中设置单元格边框与单元格内容之间的距离。这里设置为元格内容之间的距离。这里设置为2 2。p在在“单元格间距单元格间距”中设置相邻的表格单元中设置相邻的表格单元格之间的距离。这里设置为格之间的距离。这里设置为3 3。p在在“页眉页眉”选项组定义页眉样式，可以在选项组定义页眉样式，可以在四种样式中选择一种，这里选择四种样式中选择一种，这里选择“无无”。p在在“辅助功能辅助功能”选项组中可以设置表格的选项组中可以设置表格的标题、表格标题相对于表格的对齐方式以及标题、表格标题相对于表格的对齐方式以及备注文本。这里均使用默认的设置。备注文本。这里均使用默认的设置。p“表格表格”对话框中的设置结果如图对话框中的设置结果如图7-47-4所示，所示，设置完成后单击设置完成后单击【确定确定】按钮，一个按钮，一个3 3行行4 4列列的表格就插入到页面了，如图的表格就插入到页面了，如图7-57-5所示。所示。在进行表格操作之前，我们必须首先选在进行表格操作之前，我们必须首先选定被操作的对象，对于表格而言，可以选定定被操作的对象，对于表格而言，可以选定整个表格、单行、单列、多行、多列、连续整个表格、单行、单列、多行、多列、连续或不连续的单元格。或不连续的单元格。3 3选择表格和表格元素选择表格和表格元素（1 1）选择整个表格）选择整个表格 选择整个表格有多种方法：选择整个表格有多种方法：方法之一：方法之一：用鼠标指向表格边框线，若出用鼠标指向表格边框线，若出现红色外框线，单击鼠标左键即可选中整个现红色外框线，单击鼠标左键即可选中整个表格。表格。方法之二：方法之二：将鼠标光标置于表格的边框线将鼠标光标置于表格的边框线上，当光标变成双成箭头形状或时，单击可上，当光标变成双成箭头形状或时，单击可以选中整个表格。以选中整个表格。方法之三：方法之三：用鼠标单击标识表格宽度的用鼠标单击标识表格宽度的数字，然后在弹出的菜单中单击数字，然后在弹出的菜单中单击【选择表格选择表格】菜单项即可选中整个表格。菜单项即可选中整个表格。方法之四：方法之四：先将光标置于表格任一个单先将光标置于表格任一个单元格中，用鼠标单击状态栏中的元格中，用鼠标单击状态栏中的标标签也可以选中整个表格。签也可以选中整个表格。（2 2）选择单行或者单列）选择单行或者单列 将鼠标指向某一行的左边线或某一列的将鼠标指向某一行的左边线或某一列的上边线，当鼠标指针变成一个黑色箭头形状上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键即可选中单行或者单列。时，单击鼠标左键即可选中单行或者单列。（3 3）选择连续的多行或多列）选择连续的多行或多列 将鼠标指向某一行的左边线或某一列的将鼠标指向某一行的左边线或某一列的上边线，当鼠标指针变成一个黑色箭头形状上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键并且拖动鼠标即可选中相时，单击鼠标左键并且拖动鼠标即可选中相邻的多行或多列。邻的多行或多列。（4 4）选择不连续的多行或多列）选择不连续的多行或多列 先选择一行或者一列，然后按住先选择一行或者一列，然后按住“CtrlCtrl”键依次在表格的左边线或上边线单键依次在表格的左边线或上边线单击鼠标左键即可选择不连续的多行或多列。击鼠标左键即可选择不连续的多行或多列。（5 5）选择一个单元格）选择一个单元格 按住按住“CtrlCtrl”键，用鼠标单击任一单元键，用鼠标单击任一单元格即可选中一个单元格。格即可选中一个单元格。（6 6）选择连续的单元格）选择连续的单元格 先将光标置于一个单元格中，然后按住先将光标置于一个单元格中，然后按住鼠标左键并拖动鼠标横向或纵向移动，可以鼠标左键并拖动鼠标横向或纵向移动，可以选择多个连续的单元格。也可以先将光标置选择多个连续的单元格。也可以先将光标置于一个单元格中，然后按住于一个单元格中，然后按住“ShiftShift”键单键单击其他的单元格。击其他的单元格。（7 7）选择不连续的单元格）选择不连续的单元格 按住按住“CtrlCtrl”键，分别单击不连续的各键，分别单击不连续的各个单元格即可，若再次单击被选中的单元格，个单元格即可，若再次单击被选中的单元格，则会取消该单元格的选中状态。则会取消该单元格的选中状态。（1 1）设置表格的属性）设置表格的属性 通过表格通过表格“属性属性”面板可以设置表格的面板可以设置表格的各项参数值。各项参数值。4 4设置表格及单元格的属性设置表格及单元格的属性 这里在这里在“宽宽”文本框中输入文本框中输入“750750”，其右侧的单位选择其右侧的单位选择“像素像素”，“边框边框”文本文本框中输入框中输入“1 1”，“填充填充”文本框中输入文本框中输入“2 2”，“间距间距”文本框中输入文本框中输入“0 0”，对齐，对齐方式选择方式选择“居中对齐居中对齐”，“边框颜色边框颜色”文本文本框中输入框中输入“#000000#000000”，其他表格属性保存，其他表格属性保存原有设置或默认值不变。原有设置或默认值不变。（2 2）设置单元格属性）设置单元格属性 通过通过“属性属性”面板可以单独设置某一个面板可以单独设置某一个单元格的属性，将光标置于单元格中并单击单元格的属性，将光标置于单元格中并单击鼠标左键。鼠标左键。（3 3）设置行、列属性）设置行、列属性 通过通过“属性属性”面板也可以设置某一行或面板也可以设置某一行或一列中所有单元格的属性，先选中一行或一一列中所有单元格的属性，先选中一行或一列，然后在列，然后在“属性属性”面板中设置对应行或列面板中设置对应行或列中所有单元格的属性，设置方法及参数含义中所有单元格的属性，设置方法及参数含义与设置单元格属性相似。与设置单元格属性相似。p改变表格大小改变表格大小p改变行高或列宽改变行高或列宽p改变单元格大小改变单元格大小 （4 4）调整表格的大小）调整表格的大小（1 1）插入行或列）插入行或列 先选中要插入行或列的单元格，然后单先选中要插入行或列的单元格，然后单击鼠标右键，在弹出的快捷菜单中单击菜单击鼠标右键，在弹出的快捷菜单中单击菜单【表格表格】【插入行插入行】或或【插入列插入列】，就可，就可以完成插入行或列的操作。以完成插入行或列的操作。5 5调整表格的结构调整表格的结构（2 2）删除行或列）删除行或列 如果要删除行或列，只需先选中要删除如果要删除行或列，只需先选中要删除的行或列，然后单击鼠标右键，在弹出的快的行或列，然后单击鼠标右键，在弹出的快捷菜单中单击菜单捷菜单中单击菜单【表格表格】【删除行删除行】或或【删除列删除列】，就可以完成删除行或列的操作。，就可以完成删除行或列的操作。（3 3）合并单元格）合并单元格 将图将图7-147-14中中“A A”、“B B”、“C C”、“D D”四个单元格合并，将图中四个单元格合并，将图中“I I”、“J J”、“K K”、“L L”四个单元格合并。合四个单元格合并。合并单元格的操作方法如下：并单元格的操作方法如下：p 选择需要合并的多个单元格：选择需要合并的多个单元格：“A A”、“B B”、“C C”、“D D”四个单元格，注意所四个单元格，注意所合并的单元格必须是连接的合并的单元格必须是连接的p 单击单击“属性属性”面板上的面板上的“合并单元格合并单元格”按按钮，即可合并所选的单元格。钮，即可合并所选的单元格。4 4）拆分单元格）拆分单元格 将图中将图中“E E”单元格拆分为单元格拆分为2 2行，拆分单行，拆分单元格的操作方法如下：元格的操作方法如下：p 先将光标置于需要拆分的单元格中，例如先将光标置于需要拆分的单元格中，例如“E E”单元格中，然后单击单元格中，然后单击“属性属性”面板上面板上的的“拆分单元格拆分单元格”按钮。按钮。p 如果想将单元格拆分为多行，可以选中如果想将单元格拆分为多行，可以选中“行行”单选按钮；如果想将单元格拆分为多单选按钮；如果想将单元格拆分为多列，则可以选中列，则可以选中“列列”单选按钮。这里选择单选按钮。这里选择“行行”单选按钮。单选按钮。p 在在“行数行数/列数列数”数值框中，输入需要拆数值框中，输入需要拆分的行或列的数值。这里输入分的行或列的数值。这里输入“2 2”p 设置完毕，单击设置完毕，单击【确定确定】按钮，选中的单按钮，选中的单元格就会按照设置被拆分。元格就会按照设置被拆分。（5 5）单元格的复制与粘贴）单元格的复制与粘贴 选择要复制或剪切的单元格，既可以选选择要复制或剪切的单元格，既可以选择一个单元格，也可以选择多个单元格，但择一个单元格，也可以选择多个单元格，但要保证选中的单元格区域呈矩形。然后单击要保证选中的单元格区域呈矩形。然后单击菜单菜单【编辑编辑】【拷贝拷贝】或或【剪切剪切】，将选，将选中的单元格复制或剪切到剪贴板中。中的单元格复制或剪切到剪贴板中。（6 6）嵌套表格）嵌套表格 在图中的在图中的“E E”单元格中插入一张单元格中插入一张7 7行行1 1列的表格，在列的表格，在“G G”单元格中插入一张单元格中插入一张5 5行行3 3列的表格。插入嵌套表格的方法如下：列的表格。插入嵌套表格的方法如下：p将光标置于要插入嵌套表格的单元格中。将光标置于要插入嵌套表格的单元格中。p单击主窗口菜单单击主窗口菜单【插入插入】【表格表格】即可。即可。p嵌套表格的属性设置与普通表格完全一致。嵌套表格的属性设置与普通表格完全一致。在表格中完成以下插入操作：在表格中完成以下插入操作：（1 1）为表格单元格）为表格单元格“G G”设置背景图像。设置背景图像。（2 2）在表格单元格）在表格单元格“ABCDABCD”中插入一幅较中插入一幅较大的图像。大的图像。（3 3）在表格单元格）在表格单元格“E2E2”、“E4E4”、“E6E6”中各插入一幅较小的图像。中各插入一幅较小的图像。（4 4）在表格单元格）在表格单元格“G1G1”、“G3G3”、“G5G5”中分别插入小图像和输入文本。中分别插入小图像和输入文本。6 6在表格中输入文本和插入图像在表格中输入文本和插入图像 在表格中输入文本和插入图像的操作方在表格中输入文本和插入图像的操作方法如下：法如下：（1 1）设置背景图像）设置背景图像 选中表格单元格选中表格单元格“G G”，然后在，然后在“属性属性”面板为其设置背景图像即可。面板为其设置背景图像即可。（2 2）插入图像）插入图像 先将光标置于要插入图像的单元格中，先将光标置于要插入图像的单元格中，然后在表格的单元格中插入所需的图像即可。然后在表格的单元格中插入所需的图像即可。（3 3）输入文本）输入文本先将光标置于要输入文本的单元格中，然后先将光标置于要输入文本的单元格中，然后输入文本即可。同样也可采用输入文本即可。同样也可采用“复制复制/粘贴粘贴”的方法将复制的文本粘贴到表格单元格中。的方法将复制的文本粘贴到表格单元格中。页面设置完成后，将表格边框设置为页面设置完成后，将表格边框设置为0 0。7 7重新设置表格的边框重新设置表格的边框本网页在浏览器中预览效果如图本网页在浏览器中预览效果如图7-17-1所示。所示。8 8保存网页文档，且在浏览器中保存网页文档，且在浏览器中预览效果预览效果 课堂实践课堂实践 （1 1）打开）打开“课堂实践课堂实践”网站文件夹网站文件夹“0404表格布局表格布局”中的网页文档中的网页文档“04.html04.html”。（2 2）利用表格布局网页）利用表格布局网页04.html04.html的页面。的页面。1 1操作要求操作要求 （3 3）设置表格属性以及单元格的属性，）设置表格属性以及单元格的属性，“边框边框”设置为设置为1 1，“填充填充”设置为设置为1 1，“间间距距”设置为设置为0 0。（4 4）根据需要对单元格进行拆分或合并。）根据需要对单元格进行拆分或合并。（5 5）在表格中插入图像和文本，且设置）在表格中插入图像和文本，且设置图像或文本的格式。图像或文本的格式。（6 6）保存网页文档，且在浏览器中浏览）保存网页文档，且在浏览器中浏览该网页。该网页。说明：所有的素材都存储在文件夹说明：所有的素材都存储在文件夹“0404表格布局表格布局”中的各个子文件夹中。中的各个子文件夹中。课堂实践的网页课堂实践的网页04.html04.html在浏览器中浏在浏览器中浏览效果如图览效果如图7-177-17所示。所示。2 2效果展示效果展示 （1 1）建议先插入一张）建议先插入一张3 3行行1 1列的表格，列的表格，如图如图7-187-18所示；所示；图图7-18插入插入5和和1列的表格列的表格3 3制作要点提示制作要点提示 然后在然后在B B单元格中插入一张单元格中插入一张1 1行行3 3列的表列的表格，在格，在C C单元格中插入一张单元格中插入一张2 2行行3 3列的表格，列的表格，接着在接着在C5C5单元格中插入一张单元格中插入一张3 3行行3 3列的表格，列的表格，如图如图7-197-19所示。所示。图图7-19插入多插入多张张嵌套表格嵌套表格 （2 2）参考图）参考图7-177-17，在对应的单元格输，在对应的单元格输入文字或者插入图像，注意为整张表格设置入文字或者插入图像，注意为整张表格设置背景图像。背景图像。图图7-17应应用表格布局网用表格布局网页页的的课课堂堂实实践的践的预览预览效果效果 （3 3）设置表格属性必须选中整张表格，）设置表格属性必须选中整张表格，然后利用然后利用“表格属性表格属性”面板进行属性设置。面板进行属性设置。（4 4）设置单元格属性必须选中对应的单）设置单元格属性必须选中对应的单元格，然后利用元格，然后利用“单元格属性单元格属性”面板进行属面板进行属性设置。性设置。（5 5）设置单元格中的图像属性，必须先）设置单元格中的图像属性，必须先选中单元格的图像，然后利用选中单元格的图像，然后利用“图像属性图像属性”面板进行属性设置。面板进行属性设置。（6 6）设置单元格中的文本属性，必须先）设置单元格中的文本属性，必须先选中单元格的文本，然后利用选中单元格的文本，然后利用“文本属性文本属性”面板进行属性设置。面板进行属性设置。（7 7）表格用于网页排版时，其边框一般）表格用于网页排版时，其边框一般设为设为“0 0”，但本网页中的表格，但本网页中的表格“边框边框”设设置为置为“1 1”，“填充填充”设置为设置为“1 1”，主要是，主要是便于观察表格属性设置的效果。便于观察表格属性设置的效果。课外拓展实践课外拓展实践 1 1在在“湖铁职院学院网站湖铁职院学院网站”站点文件夹站点文件夹“0404表格布局表格布局”中创建网页中创建网页“04.html04.html”。2 2该页面利用表格进行布局。该页面利用表格进行布局。本章小结本章小结 表格是常用的页面元素，制作网页经常要表格是常用的页面元素，制作网页经常要借助表格进行排版，在网页布局方面，表格借助表格进行排版，在网页布局方面，表格可谓起着举足轻重的作用。可谓起着举足轻重的作用。