- 网页设计与网站建设完全实战手册
- 刘贵国
- 2343字
- 2021-03-19 18:35:00
10.5 综合实战
表格最基本的作用就是让复杂的数据变得更有条理，让人容易看懂，在设计页面时，往往会利用表格来布局定位网页元素。下面通过两个实例掌握表格的使用方法。
实战1——利用表格排版页面
表格在网页布局中的作用是无处不在的，无论是使用简单的静态网页还是具有动态功能的网页，都要使用表格进行排版。本例就是通过表格布局网页的，效果如图10-39所示，操作步骤如下：
图10-39 利用表格布局网页效果
01 执行“文件”|“新建”命令，弹出“新建文档”对话框，在对话框中选择“空白页”|“HTML”|“无”选项，如图10-40所示。
图10-40 “新建文档”对话框
02 单击“确定”按钮，创建文档，如图10-41所示。
图10-41 创建文档
03 执行“文件”|“另存为”对话框，弹出“另存为”对话框，在对话框的名称文本框中输入名称，如图10-42所示。
图10-42 “另存为”对话框
04 单击“确定”按钮，保存文档，将光标置于页面中，执行“修改”|“页面属性”命令，弹出“页面属性”对话框，在对话框中将“上边距”、“下边距”、“右边距”和“左边距”设置为0，如图10-43所示。
图10-43 设置表格属性
05 单击“确定”按钮，修改页面属性，将光标置于页面中，执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为4、“列”设置为1、“表格宽度”设置为1003像素，如图10-44所示。
图10-44 “表格”对话框
06 单击“确定”按钮，插入表格，此表格记为表格1，如图10-45所示。
图10-45 插入表格1
07 将光标置于表格1的第1行单元格中，执行“插入”|“图像”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择图像文件images/index_r2_c1.jpg，如图10-46所示。
图10-46 “选择图像源文件”对话框
08 单击“确定”按钮，插入图像，如图10-47所示。
图10-47 插入图像
09 将光标置于表格1的第2行单元格中，执行“插入”|“图像”|“图像”命令，插入图像images/ban.jpg，如图10-48所示。
图10-48 插入图像
10 将光标置于表格1的第3行单元格中，执行“插入”|“表格”命令，插入1行3列的表格，此表格记为表格2，如图10-49所示。
图10-49 插入表格2
11 将光标置于表格2的第1列单元格中，打开“代码”视图，在“代码”视图中输入背景图像代码background=images/b.jpg，如图10-50所示。
图10-50 输入代码
12 返回“设计”视图，可以看到插入的背景图像，如图10-51所示。
图10-51 插入背景图像
13 将光标置于背景图像上，执行“插入”|“图像”|“图像”命令，插入图像images/index_r4_c1.，如图10-52所示。
图10-52 插入图像
14 将光标置于表格2的第2列单元格中，打开“代码”视图，在“代码”视图中输入背景图像代码background=images/index_r4_c5.jpg，如图10-53所示。
图10-53 输入代码
15 返回“设计”视图，可以看到插入的背景图像，如图10-54所示。
图10-54 插入背景图像
16 将光标置于背景图像上，执行“插入”|“表格”命令，插入1行2列的表格，此表格记为表格3，如图10-55所示。
图10-55 插入表格3
17 将光标置于表格3的第1列单元格中，执行“插入”|“表格”命令，插入5行1列的表格，此表格记为表格4，如图10-56所示。
图10-56 插入表格4
18 将光标置于表格4的第1行单元格中，执行“插入”|“图像”|“图像”命令，插入图像images/index_r4_c2.jpg，如图10-57所示。
图10-57 插入图像
19 将光标置于表格4的第2行单元格中，输入相应的文字，如图10-58所示。
图10-58 输入文字
20 将光标分别置于表格4的第3、4、5行单元格中，并插入相应的图像，如图10-59所示。
图10-59 插入图像
21 将光标置于表格3的第2列单元格中，执行“插入”|“表格”命令，插入2行1列的表格，此表格记为表格5，如图10-60所示。
图10-60 插入表格5
22 将光标置于表格5的第1行单元格中，打开“代码”视图，在“代码”视图中输入背景图像代码height=55 background=images/jj.jpg，如图10-61所示。
图10-61 输入代码
23 返回“设计”视图，打开“设计”视图，可以看到插入的背景图像，如图10-62所示。
图10-62 插入背景图像
24 将光标置于背景图像上，输入相应的文字，如图10-63所示。
图10-63 输入文字
25 将光标置于表格5的第2行单元格中，输入相应的文字，如图10-64所示。
图10-64 输入文字
26 将光标置于表格2的第3列单元格中，打开“代码”视图，在“代码”视图中输入背景图像代码background=images/b1.jpg，如图10-65所示。
图10-65 输入代码
27 返回“设计”视图，可以看到插入的背景图像，如图10-66所示。
图10-66 插入背景图像
28 将光标置于背景图像上，执行“插入”|“图像”|“图像”命令，插入图像images/index_r4_c10.jpg，如图10-67所示。
图10-67 插入图像
29 将光标置于表格1的第4行单元格中，打开“代码”视图，在“代码”视图中输入背景图像代码，如图10-68所示。
图10-68 输入代码
30 返回“设计”视图，可以看到插入的背景图像，如图10-69所示。
图10-69 插入背景图像
31 将光标置于背景图像上，输入相应的文字，如图10-70所示。
图10-70 输入文字
32 保存文档，按F12键在浏览器中预览，效果参见图10-39所示。
实战2——创建圆角表格
先把这个圆角做成图像，然后再插入到表格中来，下面通过实例讲述圆角表格的创建，效果如图10-71所示，具体操作步骤如下：
图10-71 创建圆角表格效果
01 打开网页文档，将光标置于页面中，如图10-72所示。
图10-72 打开网页文档
02 执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为2、“列数”设置为1、“表格宽度”设置为740像素，如图10-73所示。
图10-73 “表格”对话框
03 单击“确定”按钮，插入表格，此表格记为表格1，将光标置于表格1的第1行单元格中，如图10-74所示。
图10-74 插入表格1
04 打开“代码”视图，在“代码”视图中输入背景图像代码background=”images/bg_r1.gif”，如图10-75所示。
图10-75 输入代码
05 返回“设计”视图，可以看到插入的背景图像，如图10-76所示。
图10-76 插入背景图像
06 将光标置于背景图像上，执行“插入”|“表格”命令，插入2行1列的表格，此表格记为表格2，如图10-77所示。
图10-77 插入表格2
07 将光标置于表格2的第1行单元格中，执行“插入”|“图像”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择圆角图像images/jianjie.gif，如图10-78所示。
图10-78 “选择图像源文件”对话框
08 单击“确定”按钮，插入圆角图像，如图10-79所示。
图10-79 插入圆角图像
09 接着再输入文字并插入图像，即可完成制作。