第四节 网页的高级应用
通常情况下，在网页的空白部分可以直接输入文本、插入背景等，但这种方法创建的网页没有层次感，而且也不太好布局。这时就可以在初始网页中使用表格、框架和表单等来控制网页的整体效果。
一、使用表格
表格是网页编辑时最常用的方法。它不但可以使网页的布局明了，而且简单易学。
1．插入表格
利用FrontPage 2000强大的表格功能，可以直接在网页中插入表格，利用“表格”工具栏，同时还可以使用工具栏按钮直接插入表格。
（1）利用“表格”菜单栏。如果要利用“表格”菜单栏插入表格，其具体操作步骤如下：
1）在网页视图下打开要插入表格的网页。
2）选择“表格”→“插入”→“表格”命令，弹出如图5.4.1所示的“插入表格”对话框。
图5.4.1 “插入表格”对话框
3）在“大小”选项组中的“行数”和“列数”微调框中输入要插入的行数和列数。在“布局”选项组中的“对齐方式”下拉列表中选择左对齐、右对齐、水平居中和两端对齐其中的任意一选项。同时还可以在“单元格间距”、“单元格边距”和“边框粗细”微调框中设置合适的数值。
4）所有的设置完成后，单击“确定”按钮。
（2）利用“表格”工具栏。选择“查看”→“工具栏”→“表格”命令，打开“表格”工具栏，如图5.4.2所示。在该工具栏中单击“手绘表格”按钮，这时光标变成笔形状，然后向右下方拖动鼠标即可绘制出一张表格，其效果如图5.4.3所示。
图5.4.2 “表格”工具栏
图5.4.3 手工绘制表格效果
（3）利用工具栏按钮。利用“常用”工具栏中的“插入表格”按钮，可以很方便地插入一张表格，方法是在单击该按钮后向右下方拖动鼠标，框选所需绘制的行列数，如图5.4.4所示。
2．编辑表格
绘制完成表格后，还需要对表格和单元格进行整体设置。例如在表格中插入、删除行和列，插入、删除、合并、拆分单元格，设置表格和单元格的属性等。
图5.4.4 利用“插入表格”按钮绘制表格
（1）插入行或者列。选择“表格”→“插入”→“行或列”命令，将会弹出“插入行或列”对话框，如图5.4.5所示。在该对话框中设置要插入的行数和列数以及所选区域，单击“确定”按钮。
图5.4.5 “插入行和列”对话框
（2）删除行或列。打开“表格”工具栏，单击“清除”按钮，这时光标变成橡皮擦，把它定位在要删除的行和列旁，拖动橡皮擦，这时要擦除的行和列的线条变成红色，释放鼠标即可。
（3）设置表格属性。在编辑表格时，有时要对表格的一些基本属性进行设置，其具体操作步骤如下：
1）将光标定位在要改变属性的表格中。
2）选择“表格”→“属性”→“表格”命令，弹出“表格属性”对话框，如图5.4.6所示。
图5.4.6 “表格属性”对话框
3）在“布局”选项组中可以对表格的“对齐方式”、“单元格边距”和“单元格间距”等进行设置。在“边框”选项组中可以对边框的“粗细”和“颜色”等进行设置。
4）在“背景”选项组中的“颜色”下拉列表中可选定背景的颜色，还可选中“使用背景图片”复选框，单击“浏览”按钮，在弹出的对话框中选择所需要的背景图片，如图5.4.7所示。
图5.4.7 在表格中插入背景图片
5）表格属性设置完成后，单击“确定”按钮即可。
3．编辑单元格
单元格是表格的基本组成部分，对于它的编辑也是非常重要的。
（1）删除、合并和拆分单元格。表格在创建完成后，还需要对表格中的某些单元格进行删除、合并和拆分，其具体操作步骤如下：
1）选择“表格”→“删除单元格”命令，即可删除选定的单元格。
2）选择“表格”→“合并单元格”命令，即可合并选定的单元格。
3）选择“表格”→“拆分单元格”命令，弹出“拆分单元格”对话框，如图5.4.8所示。选中“拆分为列”单选按钮，在“列数”微调框中输入要拆分的列数，单击“确定”按钮即可拆分选定的单元格。
图5.4.8 “拆分单元格”对话框
（2）设置单元格属性和设置表格属性一样，对表格中的单元格也可以设置属性，选择“表格”→“属性”→“单元格”命令，将弹出“单元格属性”对话框，在此对话框中可以设置它的水平和垂直对齐方式、行跨距、颜色和背景等。
4．将文本转换成表格
如果要将文本转换成表格，可按照以下操作步骤进行：
（1）在网页视图下，输入文本内容。
（2）在文本之间输入分隔符，例如输入分隔符为逗号（，），如图5.4.9所示。
（3）选定上述输入的文本内容。
（4）选择“表格”→“转换”→“文本到表格”命令，弹出如图5.4.10所示的“将文本转换为表格”对话框。
图5.4.9 输入文本和分隔符
图5.4.10 “将文本转换为表格”对话框
（5）在“文本分隔符”选项组中的5个单选按钮中选中其中一种，本例选中“其他”单选按钮，然后在后面的文本框中输入“，”号。
（6）设置完成后，单击“确定”按钮即可。
提示：因为HTML并不直接支持制表符，所以建议用户不要以制表符作为文本分隔符。
二、使用框架
框架网页是一种特别的HTML网页，它可以将浏览器视窗分为不同的框架，而每一个框架可以显示不同的网页。也就是说它是在网页的子网页中进行网页编辑操作的。
1．创建框架
如果要创建框架网页，其具体操作步骤如下：
（1）选择“文件”→“新建”→“网页”命令，将弹出“新建”对话框，单击“框架网页”标签，打开“框架网页”选项卡，如图5.4.11所示。
（2）在该选项卡中列出了10种框架网页形式，选择其中的一种，例如选择“嵌套式层次结构”选项，其效果会在“预览”区域中显示出来。
图5.4.11 “框架网页”选项卡
（3）选定后，单击“确定”按钮即可创建一个框架网页，如图5.4.12所示。
图5.4.12 初始框架网页
（4）在该初始框架网页中有两个按钮，单击“设置初始网页”按钮，弹出“创建超链接”对话框，在该对话框中选择要添加超链接的文件。单击“新建网页”按钮，则被单击的框架按钮的区域成为空白，用户可以直接在此像编辑普通网页一样进行编辑。
2．编辑框架
创建完所需的框架网页后，还需要对框架网页进行拆分和删除、设置框架属性等。
（1）设置框架大小。把光标放在要调整的框架边框上，当光标变成
或
时，拖动鼠标左键到合适的位置即可。另外，在要改变大小的框架边框处单击鼠标右键，在弹出的快捷菜单中选择“框架属性”命令，弹出“框架属性”对话框，如图5.4.13所示。在“框架大小”选项组中的“列宽”和“高度”微调框中精确设置框架的大小。
图5.4.13 “框架属性”对话框
（2）拆分框架。初始的框架在创建完成后，还需要对框架进行拆分。有两种方法可以对框架进行拆分，其中一种方法是把鼠标移动到框架的边框上，当光标变成双向箭头，同时按住“Ctrl”键，拖动鼠标到合适的位置并释放。另一种方法是把鼠标定位在要拆分的框架中，选择“框架”→“拆分框架”命令，弹出“拆分框架”对话框，如图5.4.14所示。选中“拆分为列”单选按钮，单击“确定”按钮，则如图5.4.12所示的框架拆分后效果如图5.4.15所示。
图5.4.14 “拆分框架”对话框
图5.4.15 拆分左框架效果
（3）删除框架。除了可以对框架进行拆分外，还可以删除框架，其具体操作步骤如下：(www.xing528.com)
1）在网页视图中，将光标定位在要删除的框架中。
2）选择“框架”→“删除框架”命令。
3）如果要撤消刚刚进行的删除操作，可以单击“常用”工具栏中的“撤消”按钮。
提示：若框架网页仅含有一个框架，此框架将不能被删除。当访问者到该站点查看时，在保留下的框架中显示的网页将占满整个浏览器视窗。
（4）设置框架间距。基本的框架在创建完成后，还需要对其间距进行设置。其主要方法是在“框架属性”对话框中单击“框架网页”按钮，弹出“网页属性”对话框，打开“框架”选项卡，如图5.4.16所示。
在“框架间距”微调框中输入合适的间距值。取消选中“显示边框”复选框，则可以使框架边框隐藏起来。完成后单击“确定”按钮即可。
图5.4.16 “框架”选项卡
3．保存框架网页
框架网页在创建完成后，还需要对其进行保存，其方法和保存普通网页基本相同，不同的是框架中的各个框架是独立的子网页，各个子网页有自己独立的背景和图片，一般在进行框架保存时，首先保存整个框架，然后对各个子框架进行保存。
三、使用表单
表单是用来收集站点访问者信息的域集。一般站点访问者填表单的常用的方式是输入文本、选中单选按钮与复选框，以及从下拉列表中选择选项等。在填好表单之后，站点访问者便送出所输入的数据，该数据就会根据用户所设置的表单处理程序，以各种不同的方式进行处理。
1．创建表单
创建表单有两种方法，一种是使用向导，另一种是用户自定义内容。
（1）使用向导。创建表单时，用户可以在网页上现有表单外的任何位置创建表单。这时系统会插入一个矩形虚线框区域，用户可以在其中添加文本和表单域。其具体操作步骤如下：
1）在网页模式下，打开要创建表单的网页。
2）选择“文件”→“新建”→“网页”命令，弹出“新建”对话框，打开“常规”选项卡，选择“表单网页向导”选项。
3）单击按钮，弹出“表单网页向导”对话框（一），如图5.4.17所示。
4）然后单击“下一步”按钮，在创建过程中可以在相应的对话框中设置收集此类问题的输入类型、显示问题列表的方式、处理表单输入后如何处理等选项，设置完成后，将弹出“表单网页向导”对话框（二），如图5.4.18所示。
图5.4.17 “表单网页向导”对话框（一）
图5.4.18 “表单网页向导”对话框（二）
5）最后单击“完成”按钮，效果如图5.4.19所示。
（2）用户自定义表单。用此方法用户可以自定义表单中的内容，例如单选按钮、复选框和列表框等选项。其具体操作步骤如下：
1）在网页视图的模式下，打开需要创建的自定义表单网页。
2）选择“插入”→“表单”命令，将弹出其级联菜单，如图5.4.20所示。在该级联菜单中选择所需的命令即可。
图5.4.19 利用向导创建表单效果
图5.4.20 “表单”级联菜单
2．添加表单域
表单域是表单的重要内容。表单域一般包括单行文本框、复选框、单选按钮、标签和按钮等。
（1）单行文本框：单行文本框是表单中使用最多的组件。如图5.4.21所示。如果要对其进行设置，其具体操作步骤如下：
图5.4.21 单行文本框
1）双击该文本框，弹出“文本框架属性”对话框，如图5.4.22所示。
图5.4.22 “文本框属性”对话框
2）在“名称”文本框中设置该文本框的名称，以便区别于其他的文本框。在“初始值”文本框中，输入单行文本框中的内容。
3）在“宽度”文本框中输入文本框的宽度，利用它可以限制单行文本框中输入的字符数。如果一个表单网页中有很多单行文本框，可以在“Tab键顺序”中设置它们的切换顺序。
4）设置完成后，单击“确定”按钮即可。
提示：如果要在一个文本框中显示所有的文本内容，可以设置该文本框为滚动文本框。
（2）复选框：复选框在网页中显示的是一个小方框，在选中状态下它是一个带对勾的小方框，表示它处于选中状态。其具体操作步骤如下：
1）双击插入的复选框，弹出“复选框属性”对话框，如图5.4.23所示。
图5.4.23 “复选框属性”对话框
2）在“名称”文本框中输入复选框的名称；在“值”文本框中可以设置提交表单时该复选框发送的数值。
3）在“初始状态”选项组中可以设置该表单网页发布到网上后浏览者第一次看到的状态；在“Tab键顺序”文本框中设置多个复选框的切换顺序。
4）设置完成后，单击“确定”按钮即可。
（3）单选按钮：单选按钮在选中状态下显示的是一个带黑点的小圆圈。它与复选框惟一的区别是复选框可以同时选中多个，而单选按钮只能在选项组中选中一个。其具体操作步骤如下：
1）双击插入的单选按钮，弹出如图5.4.24所示的“单选按钮属性”对话框。
图5.4.24 “单选按钮属性”对话框
2）在“组名称”文本框中输入单选按钮的名称；在“值”文本框中可以设置该单选按钮的返回值。
3）在“初始状态”选项组中可以设置它在第一次显示时为选中还是未选中状态；在“Tab键顺序”文本框中可以设置在有多个单选按钮的情况下它的切换顺序。
4）设置完成后，单击“确定”按钮即可。
（4）下拉菜单：当用户要让站点访问者从列表或菜单中选择选项时，可以在表单中添加下拉菜单。还可以将菜单的属性设置为单选或复选。其具体操作步骤如下：
1）双击插入的下拉菜单，弹出“下拉菜单属性”对话框，如图5.4.25所示。
图5.4.25 “下拉菜单属性”对话框
2）在“名称”文本框中输入名称以标识下拉菜单。用户若使用表单处理程序而不是自定义脚本时，站点访问者可以在默认的确认网页上看到这个内部名称。
3）单击“添加”按钮，弹出“添加选项”对话框，在“选项”文本框中输入用户要显示在下拉菜单中的选项。选中“指定值”复选框，可在下面的文本框中输入与下拉菜单本身所显示的文本不同的选项值。在“初始状态”选项组中可以设置当站点访问者第一次打开该表单时该选项默认的状态。
4）步骤3）的设置完成后，返回到“下拉菜单属性”对话框中，用户可以单击修改、删除、上移和下移按钮对下拉菜单中的各个选项进行修改以及改变它的切换顺序等操作。
5）在“允许多重选项”选项组中设置站点访问者在浏览该表单网页时能否同时选中多个选项。
6）设置完成后，单击“确定”按钮即可。
注意：当用户在表单上放置下拉菜单之后，可为它指定一个内部名称，并且指定用户想显示在菜单中的选项。内部名称是不会被显示在表单上的，它仅在表单结果中标识域。
3．处理表单结果
根据用户所使用的表单处理程序的不同，用户就可以用不同的方式来查看表单的结果。例如：用户可以打开一个文本或HTML的文件，或在收到的电子邮件中查看结果，其具体操作步骤如下：
（1）在网页视图模式下，打开要处理的表单。
（2）在表单域的任何一处单击鼠标右键，在弹出的快捷菜单中选择“表单属性”命令，弹出“表单属性”对话框，如图5.4.26所示。
图5.4.26 “表单属性”对话框
（3）在“将结果保存到”选项组中选中“发送到”单选按钮，在“文件名称”文本框中输入要发送到文件的文件名，或单击“浏览”按钮选择文件。
（4）在“电子邮件地址”文本框内，输入用户想传送表单结果的电子邮件地址。
（5）选中“发送到其他对象”单选按钮，可以将它发送到“自定义ISAPI，NSAPI，CGI或ASP脚本”、“计论表单处理程序”和“注册表单处理程序”中的任意一种。
（6）选中步骤（3）和步骤（5）两个单选按钮后，单击“选项”按钮，可以弹出相应的处理结果，如图5.4.27所示的“保存表单结果的选项”对话框。
（7）在该对话框中可以设置保存表单后的结果，例如保存到数据库、保存成文件或用电子邮件处理表单结果。
（8）设置完成后，单击“确定”按钮，返回“表单属性”对话框，最后单击“确定”按钮。
图5.4.27 “保存表单结果的选项”对话框
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
