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

上边线，当鼠标指针变成一个黑色箭头形状 时，单击鼠标左键并且拖动鼠标即可选中相 邻的多行或多列。
Page 24
（4）选择不连续的多行或多列 先选择一行或者一列，然后按住“Ctrl”
键依次在表格的左边线或上边线单击鼠Байду номын сангаас左 键即可选择不连续的多行或多列。
Page 25
（5）选择一个单元格 按住“Ctrl”键，用鼠标单击任一单元
Page 11
（4）设置网页标题，在文档工具栏的 “标题”文本框直接输入文档标题“长沙世 界之窗的国际街”即可，如图7-3所示。如 果需要设置网页的其他页面属性，单击“属 性”面板【页面属性】按钮，打开“页面属 性”对话框，在该对话框中设置页面属性即 可，这里暂不设置其他属性。
（5）保存该网页。
Page 12
Page 1
（1）学会添加表格、设置表格属性。 （2）掌握设置表格中行和列属性的方法。 （3）掌握拆分单元格，合并单元格的方法。 （4）掌握在表格中输入文字并定位的方法。 （5）掌握在表格中插入图像并定位的方法。
Page 2
网页浏览效果展示
应用表格布局的网页04.html预览效果 如图所示。
Page 3
Page 7
2．表格的应用
（1）利用表格布局网页中的文字、图像 等页面元素
（2）利用表格合成尺寸较大的图像 （3）应用表格存储文本或数据，便于对 数据进行排序
Page 8
7.1.2 表格的基本操作
在“长沙世界之窗”网站文件夹“04表格 布局”中创建命名为“04.html”的网页， 该网页利用表格布局页面元素，具体操作过 程如下。
Page 32
（4）调整表格的大小 改变表格大小 改变行高或列宽 改变单元格大小
Page 33
5．调整表格的结构
（1）插入行或列 先选中要插入行或列的单元格，然后单
击鼠标右键，在弹出的快捷菜单中单击菜单 【表格】→【插入行】或【插入列】，就可 以完成插入行或列的操作。
Page 34
（2）删除行或列 如果要删除行或列，只需先选中要删除
Page 43
在表格中输入文本和插入图像的操作方 法如下： （1）设置背景图像
选中表格单元格“G”，然后在“属性” 面板为其设置背景图像即可。 （2）插入图像
先将光标置于要插入图像的单元格中， 然后在表格的单元格中插入所需的图像即可。
Page 44
（3）输入文本 先将光标置于要输入文本的单元格中，然后 输入文本即可。同样也可采用“复制/粘贴” 的方法将复制的文本粘贴到表格单元格中。
Page 9
1．新建网页
（1）启动Dreamweaver 8，切换到“长沙 世界之窗”站点。如果该站点不存在，则新 建一个名为“长沙世界之窗”的站点。
（2）在站点下创建子文件夹“04表格布 局”，在“04表格布局”文件夹中创建子文 件夹“image”，并将所需图像复制到该文 件夹下。
Page 10
格即可选中一个单元格。
Page 26
（6）选择连续的单元格 先将光标置于一个单元格中，然后按住
鼠标左键并拖动鼠标横向或纵向移动，可以 选择多个连续的单元格。也可以先将光标置 于一个单元格中，然后按住“Shift”键单 击其他的单元格。
Page 27
（7）选择不连续的单元格 按住“Ctrl”键，分别单击不连续的各
Page 38
如果想将单元格拆分为多行，可以选中 “行”单选按钮；如果想将单元格拆分为多 列，则可以选中“列”单选按钮。这里选择 “行”单选按钮。
在“行数/列数”数值框中，输入需要拆 分的行或列的数值。这里输入“2”
设置完毕，单击【确定】按钮，选中的单 元格就会按照设置被拆分。
Page 39
（3）在Dreamweaver 8主窗口中，单击菜 单【文件】→【新建】，打开“新建文档” 对话框，在“常规”选项卡中，“类别”列 表框中选择“基本页”，“基本页”列表框 中选择“HTML”，单击【创建】按钮，该站 点下一个名为“Untitled-1”文档便创建。 单击标准工具栏上的【保存】按钮，打开 “另存为”对话框，保存位置为“04表格布 局”，文件名为“04.html”，单击【保存】 按钮，保存该网页文档。
选择需要合并的多个单元格：“A”、 “B”、“C”、“D”四个单元格，注意所 合并的单元格必须是连接的 单击“属性”面板上的“合并单元格”按 钮，即可合并所选的单元格。
Page 37
4）拆分单元格 将图中“E”单元格拆分为2行，拆分单
元格的操作方法如下： 先将光标置于需要拆分的单元格中，例如 “E”单元格中，然后单击“属性”面板上 的“拆分单元格”按钮。
Page 16
在“辅助功能”选项组中可以设置表格的 标题、表格标题相对于表格的对齐方式以及 备注文本。这里均使用默认的设置。 “表格”对话框中的设置结果如图7-4所示， 设置完成后单击【确定】按钮，一个3行4列 的表格就插入到页面了，如图7-5所示。
Page 17
3．选择表格和表格元素
在进行表格操作之前，我们必须首先选 定被操作的对象，对于表格而言，可以选定 整个表格、单行、单列、多行、多列、连续 或不连续的单元格。
Page 21
方法之四：先将光标置于表格任一个单 元格中，用鼠标单击状态栏中的<table>标 签也可以选中整个表格。
Page 22
（2）选择单行或者单列 将鼠标指向某一行的左边线或某一列的
上边线，当鼠标指针变成一个黑色箭头形状 时，单击鼠标左键即可选中单行或者单列。
Page 23
（3）选择连续的多行或多列 将鼠标指向某一行的左边线或某一列的
Page 48
（3）设置表格属性以及单元格的属性， “边框”设置为1，“填充”设置为1，“间 距”设置为0。
（4）根据需要对单元格进行拆分或合并。
Page 49
（5）在表格中插入图像和文本，且设置 图像或文本的格式。
（6）保存网页文档，且在浏览器中浏览 该网页。
说明：所有的素材都存储在文件夹“04 表格布局”中的各个子文件夹中。
Page 5
7.1.1 认识表格
1．表格的组成元素
表格的组成元素主要包括行、列、单元 格。
（1）单元格：表格中的每一个小格称为 一个单元格。
（2）行：水平方向的一排单元格称为一 行。
Page 6
（3）列：垂直方向的一排单元格称为一 列。
（4）边框：整张表格的外边缘称为边框。 （5）间距：指单元格与单元格之间的距 离。
Page 14
在“边框粗细”文本框中指定表格边框的 宽度，默认值为1，单位为像素。如果在游 览器中浏览时要使表格不显示边框，将“边 框粗细”设置为0。 在“单元格边距”中设置单元格边框与单 元格内容之间的距离。这里设置为2。
Page 15
在“单元格间距”中设置相邻的表格单元 格之间的距离。这里设置为3。 在“页眉”选项组定义页眉样式，可以在 四种样式中选择一种，这里选择“无”。
7.1 使用表格布局网页
课程引导
表格是常用的页面元素，制作网页经常 要借助表格进行排版，在网页布局方面，表 格可谓起着举足轻重的作用，通过设置表格 以及单元格的属性，对页面中的元素进行准 确定位，表格能够有序地排列数据又能对页 面进行更加合理的布局。灵活地使用表格的 背景、框线等属性可以得到更加美观的效果。
Page 41
将光标置于要插入嵌套表格的单元格中。 单击主窗口菜单【插入】→【表格】即可。 嵌套表格的属性设置与普通表格完全一致。
Page 42
6．在表格中输入文本和插入图像
在表格中完成以下插入操作： （1）为表格单元格“G”设置背景图像。 （2）在表格单元格“ABCD”中插入一幅较 大的图像。 （3）在表格单元格“E2”、“E4”、“E6” 中各插入一幅较小的图像。 （4）在表格单元格“G1”、“G3”、“G5” 中分别插入小图像和输入文本。
Page 50
2．效果展示
课堂实践的网页04.html在浏览器中浏 览效果如图7-17所示。
Page 51
3．制作要点提示
（1）建议先插入一张3行1列的表格， 如图7-18所示；
Page 52
图7-18 插入5和1列的表格
然后在B单元格中插入一张1行3列的表 格，在C单元格中插入一张2行3列的表格， 接着在C5单元格中插入一张3行3列的表格， 如图7-19所示。
（5）单元格的复制与粘贴 选择要复制或剪切的单元格，既可以选
择一个单元格，也可以选择多个单元格，但 要保证选中的单元格区域呈矩形。然后单击 菜单【编辑】→【拷贝】或【剪切】，将选 中的单元格复制或剪切到剪贴板中。
Page 40
（6）嵌套表格 在图中的“E”单元格中插入一张7行1
列的表格，在“G”单元格中插入一张5行3 列的表格。插入嵌套表格的方法如下：
Page 30
（2）设置单元格属性 通过“属性”面板可以单独设置某一个
单元格的属性，将光标置于单元格中并单击 鼠标左键。
Page 31
（3）设置行、列属性 通过“属性”面板也可以设置某一行或
一列中所有单元格的属性，先选中一行或一 列，然后在“属性”面板中设置对应行或列 中所有单元格的属性，设置方法及参数含义 与设置单元格属性相似。
Page 45
7．重新设置表格的边框
页面设置完成后，将表格边框设置为0。
Page 46
8．保存网页文档，且在浏览器中 预览效果
本网页在浏览器中预览效果如图7-1所示。
Page 47
★ 课堂实践 ★
1．操作要求
（1）打开“课堂实践”网站文件夹“04 表格布局”中的网页文档“04.html”。
（2）利用表格布局网页04.html的页面。
个单元格即可，若再次单击被选中的单元格， 则会取消该单元格的选中状态。