FrontPage 2003的表格和表单制作实例.pdf

FrontPage2003的表格和表单制作实例

内容提要：本文主要介绍FrontPage2003的表格和表单制作实例。通过实例介绍了如何使用表
格来进行页面布局，如何利用表单来和网页的浏览者交流信息。
关键字：表格、文本区、文件上载表单、图片表单
引言：表格在表现形式上具有非常大的优点，在许多工作中有着广泛的应用。同样，表格功能
也常用来布设网页文本和图片的位置。表单用于表现特殊的信息，使用户和网站进行交互。本章介
绍如何使用表格来进行页面布局，如何利用表单来和网页的浏览者交流信息。
正文：

实例1用表格排版

实例说明
表格还可以用于排版，将一张比较大的图片切成许多小块，然后再像拼图一样将每块重新拼起
来，表格就像模板一样，在每个单元格中填入一张图片。这种设计可以很好的控制网页的版面，而
且在网页下载时，分成小块的图片下载也比完整的大图片要快。在浏览网页时，根本就看不出表格
的存在。
本例就是利用表格来组织页面，通过表格的嵌套，实现版面的统一。最终的效果如图1所示。

图1
创作步骤
（1）运行FrontPage2003，单击“文件”→“新建”命令，在界面右侧弹出的“新建”任务窗
体中选择“空白网页”。
（2）在空白处单击鼠标右键，在弹出菜单中选择“网页属性”。
（3）在弹出的“网页属性”对话框中，选择“格式”选项卡，在“背景”选区勾选“背景图片”，
单击“浏览”，选择“bg.gif”为背景图片，如图2所示。
（4）选择“表格”→“插入”→“表格”命令。
（5）设置插入的表格（表格1）行数为“1”，列数为“2”；指定宽度为“700”像素；单元格
衬距以及单元格间距为“0”；边框的粗细为“0”；其他均为默认值，最后单击“确定”保存配置，
※1※
如图3所示。

图2图3
（6）选择“表格”→“插入”→“表格”命令，在第一列单元格中插入新的表格（表格2），
如图4所示。

图4
（7）设置插入的表格（表格2）行数为“7”，列数为“1”；指定宽度为“150”像素；单元格
衬距以及单元格间距为“0”；边框的粗细为“0”；其他均为默认值，最后单击“确定”保存配置。
（8）选择表格1的第一列单元格，单击鼠标右键，选择“单元格属性”命令。
（9）在“单元格属性”对话框中，选择“垂直对齐方式”为“顶端对齐”，如图5所示。
（10）选择“插入”→“图片”→“来自文件”命令，在表格2的第一行插入图片。
（11）选择名为top的图片插入第一行，如图6所示。
（12）在第二行至第七行中依次插入名为second、b1、b2、b3、b4、bottom的图片。完成后效

※2※
果如图7所示。

图5图6

图7
（13）选中表格1的第二列，单击鼠标右键，选择“单元格属性”命令。
（14）在“单元格属性”对话框中，选择“垂直对齐方式”为“顶端对齐”。
（15）选择“插入”→“图片”→“来自文件”命令，在表格1的第二列插入图片，如图8所
示。

图8
※3※
（16）选择名为welcome的图片插入表格中，如图9所示。

图9
（17）按回车键，选择“插入”→“图片”→“来自文件”命令。
（18）选择名为divide的图片插入表格中。
（19）重复步骤（17）、（18）在同一行再插入divide图片。完成后如图10所示。

图10
（20）按回车键，在表格1的第二列的底部插入名为ball的图片。也可以仍然通过表格来组织
表格1的第二列中的图片。为了对比表格排版的作用，本例第二列的图片没有采用表格排版。
（21）存盘。在浏览器中预览效果。

实例2在网页中插入表格

实例说明
表格在网页中占有非常重要的地位，在较正式的网页中往往都有表格存在。表格是组织文字的
一种方法，使文字看起来协调有序，也是网页排版的重要基础。本例学习如何在网页中插入表格，
并对表格进行简单的合并、拆分。最终的效果如图11所示。
创作步骤
（1）运行FrontPage2003，单击“文件”→“新建”命令，在界面右侧弹出的“新建”任务窗
体中选择“空白网页”。
（2）在空白处单击鼠标右键，在弹出菜单中选择“网页属性”。
※4※
（3）在弹出的“网页属性”对话框中选中复选框“背景图片”，单击“浏览”，为网页选择名为
stubkgnd的图片作为网页的背景图片，如图12所示。

图11图12
（4）单击“表格”→“插入”→“表格”命令。
（5）设置插入的表格行数为“2”，列数为“2”，指定宽度为“100”百分比（也可按需要指定
其他数值），单元格衬距为“1”，单元格间距为“1”，边框粗细为“1”，其他为默认值。最后单击“确
定”插入表格。
（6）完成后可以在表格内插入文本“产品名称”、“价格”等，如图13所示。
（7）右键单击一单元格，选择“插入行