《Dreamweaver网页设计与网站开发》第七章.ppt

Companyname主讲：Dreamweaver网页设计与网站开发第七章网页表单的应用第一节网页中的表单一、表单概述（见图7-1）表单可以与多种类型的编程语言相结合，同时也可以与前台的脚本语言合作，并通过脚本语言快速地控制表单内容。在互联网中，很多网站都会通过表单技术进行人机交互，如注册网页、登陆网页、搜索网页等（见图7-2）。上面的网页直接使用了最普通的表单以获取用户信息。该表单包含了多个表单对象，例如文本域、列表以及按钮等。设计师也可以使用CSS等技术，对表单中的表单对象进行美化，例如设置表单的背景图像等，使表单更加美观。第一节网页中的表单二、创建表单域在Dreamweaver中创建空白网页，并将其保存。然后，在【插入】面板中单击【表单】按钮，为网页添加一个表单。在Dreamweaver的【设计视图】中，表单以红色虚线为标记（见图7-3）。与其他网页标签类似，表单也涵盖了许多属性。在Dreamweaver中选中表单的标签，即可在【属性】检查器中设置这些表单属性（见图7-4）。第一节网页中的表单在设置表单属性时，必须了解其中各种属性含义，才能正确地使表单发挥作用。表单的属性及作用如下（见表7-1）。表单的编码类型是体现表单中数据内容上传方式的重要标志。如用户设置表单的方法为【默认】或【get】，则该编码类型的设置是无效的；而如用户设置表单的方法为【post】，则可以通过编码类型，确定数据是上传到服务器数据库中，还是同时存储到服务器的磁盘中。第二节插入文本域一、文本字段文本字段是单行的文本域表单对象。用户在这种表单对象中输入文本信息时，这些文本信息不会发生换行。在Dreamweaver中将光标置于表单内，然后在【插入】面板中单击【文本字段】按钮，打开【输入标签辅助功能属性】对话框，可以设置文本字段的属性（见图7-5）。在【输入标签辅助功能属性】对话框中，用户可以为文本字段的表单对象添加标签文本，同时设置标签文本显示的位置。【输入标签辅助功能属性】对话框中的属性作用如下（见表7-2）。第二节插入文本域完成【输入标签辅助功能属性】的设置后，单击【确定】按钮，插入文本字段。然后即可在【属性】检查器中定义文本字段的各种属性（见图7-6）。在文本域的【属性】检查器中，用户可以设置文本字段的一些简单的参数。文本字段的属性设置如下（见表7-3）。第二节插入文本域二、文本区域获取用户输入的文本信息时，如果需要网页获取较多的内容，用户可以使用文本区域对象。文本区域是文本域的一种变形，可以显示多行文本，另外还提供滚动条组件，使浏览者可以拖动查看输入的所有内容。创建文本区域的办法有两种：一种是先为表单插入一个文本字段的对象，然后在【属性】检查器中设置【类型】为【多行】（见图7-7）；另一种方法是单击【插入】面板中的【文本区域】按钮，设置【输入标签辅助功能属性】对话框中的各种属性后，同样也可以插入一个文本区域对象。选择相应的文本区域对象后，用户可以在【属性】检查器中设置其属性。这些属性与文本字段的属性十分类似，只是将【最大字符数】属性修改为【行数】，用于设置文本区域中可同时显示的文本行数量。同时，还将原单行的【初始值】更改为多行的初始值。注意：用户除了可以插入【文本字段】和【文本区域】对象外，还可以插入【隐藏域】对象。该对象用于存储并提交非浏览者输入信息，因此浏览者是无法看到该信息的。第三节插入复选框和单选按钮一、复选框复选框是允许用户同时选择多项内容的选择性表单对象。在多数浏览器中，复选框以矩形来表示。用户可以将复选框插入一个字段型表单中，以表示这些复选框属于同一个组。首先，将光标置于表单的容器中，在【插入】面板中单击【字段集】按钮，在弹出的【字段集】对话框中输入字段集的名称，然后单击【确定】按钮，就可以将字段集添加到网页文档中（见图7-8）。然后将光标置于字段集之后，在【插入】面板中单击【复选框】按钮，在弹出的【输入标签辅助功能】对话框中设置复选框的属性，即可将其添加到网页中（见图7-9）。第三节插入复选框和单选按钮除了插入单个的复选框外，Dreamweaver还提供了复选框组工具，帮助用户以可视化的方式插入多个复选框，并可以设置复选框的名称和显示的文体。将光标置于字段集中，然后在【插入】面板中单击【复选框组】按钮，即可打开【复选框组】对话框（见图7-10）。在【复选框组】对话框中，用户可以设置复选框组的多种属性，或者添加和删除复选框组中的项目。复选框组的属性作用如下（见表7-4）。第二节DreamweaverCS6的系统组成与操作界面设置复