实训练习02 网页中表格的应用

广东工程职业技术学院计算机信息系

《网页设计》实训报告

实训题目：实训练习02 网页中表格的应用

班级：学号：姓名：

日期：教师：成绩：

实训目的：

1．掌握普通表格与嵌套表格的创建。

2．熟悉表格及单元格的选择、拆分、合并、属性设置。

3．熟悉表格内容的添加。

4．掌握利用表格布局网页中的文字、图像等页面元素的方法。

实训内容：

1.本次实训要求完成11个页面，具体效果参见预览效果页面。

2.在站点“myweb”根文件夹之下，建立一个“02”的子文件夹。

3.在“02”的子文件夹中建立“02.html”的网页文件，为本次练习的内容做一个首页。

4.表格的创建与基本编辑

a)在“02”的子文件夹中建立“02-1.html”的网页文件。

b)设置网页标题及页面属性。

c)在网页中建立表格并设置表格属性，包括边框大小和边框颜色。（格式参见预览

效果）。

d)预览效果：02-1.html

5.“搜索引擎目录”网页表格的制作

a)在“02”的子文件夹中建立“02-2.html”的网页文件。

b)设置网页标题及页面属性。

c)创建一个2行1列的表格。

d)在第1个单元格中创建一个1行2列的嵌套表格。

e)在第2个单元格中创建一个7行4列的嵌套表格，并分别选中第1列及第4列进

行合并。

f)添加文本、图像并进行设置，完成表格的创建。

g)设置表格的边框属性，包括边框大小和边框颜色。

h)对单元格的对齐方式进行设置。

i)整个网页文本段落皆设为居中对齐。

j)预览效果：02-2.html

6.“产品一览表”网页表格的制作

a)在“02”的子文件夹中建立“02-3.html”的网页文件。

b)设置网页标题及页面属性。

c)创建5行1列、宽度为700的表格。

d)在第3行中嵌入一个7行3列，宽度为80%的嵌套表格，并且居中对齐。

e)修改表格属性：边框值、间距值、填充值。

f)输入文本内容并设置表格格式（格式参见预览效果）。

g)预览效果：02-3.html

7.“我爱色彩”网页表格的制作

a)在“02”的子文件夹中建立“02-4.html”的网页文件。

b)设置网页标题及页面属性。

c)创建一个1行3列，宽度为200px，边框为“1”,其余值为“0”的表格。

d)在第1个单元格中插入一个9行5列的嵌套表格，其中宽为422px，高为547px，

其余值为“0”。

e)对嵌套表格中的单元格进行合并并输入文本，然后对文本进行属性设置。

f)在外层表格的第2个单元格中插入图像“bg2.jpg”。

g)将外层表格中第3个单元格拆分为3列，在拆分后的中间的单元格中插入图像

“bg3.jpg”。

h)对嵌套表格所在的单元格设置背景图像“bg1.jpg”。

i)接着对文本单元格进行对齐设置，最后将最右侧所在列中最上及最下的单元格进

行背景颜色的设置，其颜色分别为“#FFD3B8”和“#FFF2C3”。完成本例的制

作。（格式参见预览效果）。

j)预览效果：02-4.html

8.“个人简介”网页表格的制作（教材P.51，实践题1）

a)在“02”的子文件夹中建立“02-5.html”的网页文件。

b)设置网页标题及页面属性。

c)插入一个5行1列的表格。

d)在每一行单元格中插入一个表格。

e)预览效果：02-5.html（见教材P.51）

9.“湘江谷”表格布局页面的制作

a)在“02”的子文件夹中建立“02-6.html”的网页文件。

b)设置网页标题及页面属性。

c)插入一个宽度为738像素，3行1列的表格，然后在相应的单元格中嵌套表格。

d)设置表格及单元格属性，“边框”设置为“0”，“填充”设置为“0”，“间距”设

置为“0”。

e)根据需要对单元格进行拆分或合并。

f)在表格中插入图像和文本，添加背景图案。

g)预览效果：02-6.html

10.“课件吧”网页的制作（见老师提供的“操作参考”文件夹）

a)在“02”的子文件夹中建立“02-7.html”的网页文件。

b)插入表格并设置网页标题及页面属性。

c)布局Banner和导航条.

d)将制作好的动画文件（top.swf）插入到表格中。

e)布局图像列表及详细内容。

f)预览效果：02-7.html

11.“小慧的家”网页的制作

a)在“02”的子文件夹中建立“02-8.html”的网页文件。

b)设置网页标题及页面属性。

c)插入表格并利用表格布局网页。

d)插入相应的文字与图片内容。

e)预览效果：02-8.html

12.导入表格数据

a)在“02”的子文件夹中建立“02-9.html”的网页文件。

b)执行【文件】→【导入】→【表格式数据】命令，打开【导入表格式数据】对话

框，选择需要导入的文件。

c)预览效果：02-9.html

13.制作圆角细线表格

a)在“02”的子文件夹中建立“02-10.html”的网页文件。

b)插入一个1行1列的表格，然后用事先做好的图片作为表格背景。

c)将表格拆分为2行，设置第一行的高度为25像素。

d)预览效果：02-10.html