第14章 创建表单页面

7
● “单元格间距”：指定单元格和单元格之间的距离。 (2) 在“页眉”栏定义页眉，可以在“无”、“左”、 “顶部”和“两者”四种页眉样式中选择一种(如图14-1所 示)。 (3) 在“辅助功能”栏中包括如下选项： ● “标题”：指定表格的标题。 ● “对齐标题”：定义表格标题的对齐方式。 ● “摘要”：对表格进行注释。 如果将“行数”设为2，“列数”设为2，“表格宽度” 设为200像素，“边框粗细”设为1像素，其他值均为默认 值，单击“确定”按钮，即可得到如图14-2所示的表格。
5
图14-1 “表格”对话框
6
(1) 在“表格大小”栏设置如下选项： ● “行数”：指定表格的行数。 ● “列数”： 指定表格的列数。 ● “表格宽度”： 指定表格的宽度，单位可以是像素 或百分比。按像素定义的表格大小是固定的，而按百分比 定义的表格会按照浏览器的大小而变化。 ● “边框粗细”：指定表格边框线的宽度。 ● “单元格边距”：指定单元格中的内容与边框之间 的距离。
20
● “背景”：指定表格的背景图像，可以在文本框中 输入图像文件名或者单击文件夹图标指定图像文件所在的 位置。
● “背景颜色”：设置表格的背景颜色。 ● “边框”：设置表格边框的颜色。 3. 插入及删除行或列 (1) 插入行或列。若要在表格中插入一行或在左侧插入 一列，
21
单击该表格中的一个单元格，执行“修改\表格\插入行”命 令或“修改\表格\插入列”命令，打开“插入行或列”对话 框(如图14-5所示)；在该对话框中选择“行”或“列”，并 “行数”文本框中输入1，“位置”选择“所选之上”，即 可在该单元格的上方或左侧插入一行或一列。
可以同时使用多个独立的布局表格来布局页面的不同 部分，这样它们之间就不会相互影响了，这在修改单元格 中内容而引起单元格扩大的情况下十分有用。一般情况下， 当单元格扩展时，将会影响相邻的单元格，因为单元格之 间是不能重叠的；如果使用多个布局表格创建布局，则可 以消除这种现象。

❖ 教学目标： 掌握插入表单 掌握插入文本域 掌握插入隐藏域 掌握插入单选按钮 掌握插入复选框 掌握插入列表和菜单 掌握插入跳转菜单 掌握插入按钮 掌握制作网上报名页面
❖ 表单增加了网1页0的.交1互性初，还识可以表用来单收集浏览者的信息。 浏览者可以使用诸如文本域、列表框、复选框以及单选按 钮之类的表单对象输入信息，然后单击某个按钮向网站提 交这些信息。网页上的表单一般包括两个部分：表单对象 和应用程序。 ❖ 表单处理信息的过程大致为：浏览者将信息输入到Web浏
10.2.4 插入密码域
❖ 插入密码域同文本域类似，密码域只不过把【类型】设置为【密码】，具 体操作步骤如下。
(1) 将鼠标指针置于第3行第1列单元格中，输入文字“密码:”，将鼠标指针置于 第3行第2列单元格中，选择【插入】|【表单】|【密码域】命令。
(2) 在【属性】面板中将【字符宽度】设置为15，【类型】设置为【密码】即可， 如图10.5所示。
教学提示和教学目标
❖ 教学提示：表单主要用来收集用户的反馈信息，如进行会员注册、网上调 查、信息反馈等，然后将这些信息提交给服务器进行处理。表单是网站管 理者与浏览者之间沟通的桥梁，网站管理者依此可以作出科学合理的决策， 是一个网站成功的重要因素。表单可以包含允许用户进行交互的各种对象， 可以使用Dreamweaver 8创建文本域、密码域、单选按钮、复选框、按钮 以及其他表单对象。
【文本域】：在文本框中为该文本域指定可以使用字母、数字、字符或下划线的任意组合， 所选名称最好与用户输入的信息要有所联系。
【字符宽度】：设置文本域一次最多可显示的字符数。 【最多字符数】：设置单行文本域中最多可输入的字符数，使用【最多字符数】将邮政
10.2.1 创建表单 ❖ 使用表单必须具备两个条件：一个是建立含有表单元素的网页文档，另一个是具备 服务器端的表单处理应用程序或者客户端的脚本程序，它能够处理用户输入到表单 的信息。 ❖ 表单的【属性】面板中可以设置以下属性。

:::::21世纪职业教育数字艺术规划教材:::::
按钮，可
7.3各种表单控件
（1）“名称”属性 用于输入单选按钮组的名称。 （2）“单选按钮”属性 单击或按钮，可以向按钮组中添加单选按钮或删除所选的单选 按钮，单击或 按钮，可以改变按钮组中按钮的排列顺序。 （3）“布局，使用”属性 选择使用“换行符”或“表格”设置按钮的布局。
:::::21世纪职业教育数字艺术规划教材:::::
7.3各种表单控件
4．单选按钮 单选按钮的属性如图所示。
（1）“单选按钮”属性 文本框中，为该对象指定一个名称。 对于单选按钮组，如果您希望 这些选项为互斥选项，必须共用同一名称。此名称不能包含空格或特 殊字符。 （2）“选定值”属性 设置在该单选按钮被选中时发送给服务器的值。例如，可以在“选定 值”文本框中键入滑雪，指示用户选择滑雪。 （3）“初始状态”属性 确定在浏览器中载入表单时，该单选按钮是否被选中。
:::::21世纪职业教育数字艺术规划教材:::::
7.2表单的属性设置
4．“方法”属性 在“方法”下拉菜单中，选择将表单数据传输到服务器的方法。 默认方法使用浏览器的默认设置将表单数据发送到服务器。通常，默 认方法为 GET 方法。 GET 方法将值附加到请求该页的 URL 中。不要使用 GET 方法发 送长表单。URL 的长度限制在819个字符以内。如果发送的数据量太 大，数据将被截断，从而导致意外的或失败的处理结果。 POST 方法将在 HTTP 请求中嵌入表单数据。如果您要收集机密用 户名和密码、信用卡号或其它机密信息，POST 方法看起来比 GET 方法更安全。但是，由 POST 方法发送的信息是未经加密的，容易 被黑客获取。若要确保安全性，请通过安全的连接与安全的服务器相 连。

第3章在网页中创建表单和样式教学提示：在Internet上使用表单主要是为了实现浏览者同Internet服务器之间的交互。

通过表单，可以将浏览者的信息发送到Internet服务器上，以供处理。

表单也可以使用户与站点的浏览者交互。

例如，用户可以询问浏览者的用户名称和电子邮件地址，或者对浏览者做一个调查，签一下访客簿，或者提供关于用户的站点信息反馈。

在Dreamweaver中，用户还可以快速地设置CSS样式，这更突出了使用Dreamweaver来格式化文本的功能。

CSS是网页设计中众多样式的集成，使用CSS可以使页面风格统一化和标准化。

CSS提供的链接功能可以让所有的网页使用同一种样式，需要改变页面的风格时，只需要改变CSS文件中对样式进行注释的内容就可以了。

本章将介绍利用Dreamweaver在页面中创建、设置表单和怎样在Dreamweaver中快速地设置CSS样式制作网页。

教学目标：通过本章的学习，要求用户掌握创建和设置表单的方法，了解CSS样式的基本知识，掌握使用CSS样式制作网页的方法。

3.1 使用表单制作动态网页表单是网页设计者与网页的访问者进行交流的工具，其作用就是从访问Web站点的用户那里获得信息。

作为一个优秀的网页设计工具，Dreamweaver MX 2019为用户提供了简单快捷的表单建立方法。

表单中包括：单选按钮、复选框、列表、菜单、文本域(单行、多行、密码)及按钮等元素。

部分元素的显示状态如图3.1所示。

图3.1 表单部分组成元素单选按钮文本域(单行) 按钮列表3.1.1 创建表单域当访问者在网页的表单对象内输入信息后，这些信息将被程序处理，或者发到规定的邮箱里，于是需要给出网页一个范围。

只有在该范围内的表单对象中的信息才会被发送，这个范围就叫做表单域。

要创建表单，可执行如下操作：(1) 鼠标单击要插入表单的位置。

(2)选择【插入】|【表单】|【表单】命令，或单击【插入】面板上的【表单】选项卡中的【表单】按钮，此时在编辑区里可看到一个红色虚线的矩形区域，这个方框就是表单域，如图3.2所示。