欢迎来到天天文库
浏览记录
ID:45847460
大小:1.50 MB
页数:24页
时间:2019-11-18
《DreamweaverCS3中文版实例教程 10 使用表单》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、第10章 使用表单本章简介:随着网络的普及,越来越多的人在网上拥有自己的个人网站。一般情况下,个人网站的设计者除了想宣传自己外,还希望收到他人的反馈信息。表单为网站设计者提供了通过网络接收用户数据的平台,如注册会员页、网上订货页、检索页等,都是通过表单来收集用户信息。因此,表单是网站管理者与浏览者间沟通的桥梁。课堂学习目标使用表单应用复选框和单选按钮创建列表和菜单10.1使用表单课堂案例——产品订单创建表单表单的属性单行文本域隐藏域10.1.1课堂案例——产品订单使用“表单”按钮插入表单。使用“表格”按钮插入表格。使用“文本字段”按
2、钮插入文本字段。使用“文本区域”按钮插入文本区域。使用“属性”面板设置表格、文本字段和文本区域的属性。效果图10.1.2创建表单在文档中插入表单的具体操作步骤如下。(1)在文档窗口中,将插入点放在希望插入表单的位置。(2)启用“表单”命令,文档窗口中出现一个红色的虚轮廓线用来指示表单域。创建表单10.1.3表单的属性在文档窗口中选择表单,“属性”面板中出现表单属性。“属性”面板10.1.4单行文本域通常使用表单的文本域来接收用户输入的信息,文本域包括单行文本域、多行文本域、密码文本域3种。一般情况下,当用户输入较少的信息时,使用单行
3、文本域接收;当用户输入较多的信息时,使用多行文本域接收;当用户输入密码等保密信息时,使用密码文本域接收。插入单行文本域插入多行文本域插入密码文本域文本域属性10.1.5隐藏域隐藏域在网页中不显示,只是将一些必要的信息存储并提交给服务器。插入隐藏域的操作类似于在高级语言中定义和初始化变量,对于初学者而言,不建议使用隐藏域。若要在表单域中插入隐藏域,先将光标放在表单轮廓内需要插入隐藏域的位置,然后插入隐藏域。10.2应用复选框和单选按钮课堂案例——留言板单选按钮单选按钮组复选框10.2.1课堂案例——留言板使用“单选”按钮插入单选按钮。
4、使用“复选框”按钮插入复选框。效果图10.2.2单选按钮为了单选按钮的布局更加合理,通常采用逐个插入单选按钮的方式。若要在表单域中插入单选按钮,先将光标放在表单轮廓内需要插入单选按钮的位置,然后插入单选按钮。10.2.3单选按钮组先将光标放在表单轮廓内需要插入单选按钮组的位置,然后启用“单选按钮组”对话框。启用“单选按钮组”对话框有以下几种方法。单击“插入”面板“表单”选项卡中的“单选按钮组”按钮。选择“插入记录>表单>单选按钮组”命令。10.2.4复选框为了复选框的布局更加合理,通常采用逐个插入复选框的方式。若要在表单域中插入复选
5、框,先将光标放在表单轮廓内需要插入复选框的位置,然后插入复选框。10.3创建列表和菜单课堂案例——会员注册表创建列表和菜单创建跳转菜单课堂案例——精品鲜花网页创建文件域创建图像域提交、无、重置按钮10.3.1课堂案例——会员注册表使用“列表/菜单”按钮插入列表。使用“属性”面板设置列表属性。效果图10.3.2创建列表和菜单插入下拉菜单若要在表单域中插入下拉菜单,先将光标放在表单轮廓内需要插入菜单的位置,然后插入下拉菜单。插入滚动列表若要在表单域中插入滚动列表,先将光标放在表单轮廓内需要插入滚动列表的位置,然后插入滚动列表。10.3.
6、3创建跳转菜单利用跳转菜单,设计者可将某个网页的URL地址与菜单列表中的选项建立关联。当用户浏览网页时,只要从跳转菜单列表中选择一菜单项,就会打开相关联的网页。在网页中插入跳转菜单的具体操作步骤如下。(1)将光标放在表单轮廓内需要插入跳转菜单的位置。(2)启用“插入跳转菜单”命令,调出“插入跳转菜单”对话框,在对话框中进行设置,单击“确定”按钮完成设置。(3)保存文档,在IE浏览器中单击“前往”按钮,网页就可以跳转到其关联的网页上。10.3.4课堂案例——精品鲜花网页使用“文本字段”按钮插入文本字段。使用“图像域”按钮插入图像域。效
7、果图10.3.5创建文件域网页中要实现上传文件的功能,需要在表单中插入文件域。文件域的外观与其他文本域类似,只是文件域还包含一个“浏览”按钮。用户浏览时可以手动输入要上传的文件路径,也可以使用“浏览”按钮定位并选择该文件。若要在表单域中插入文件域,则先将光标放在表单轮廓内需要插入文件域的位置,然后插入文件域。10.3.6创建图像域普通的按钮很不美观,为了设计需要,常使用图像代替按钮。通常使用图像按钮来提交数据。插入图像按钮的具体操作步骤如下。(1)将光标放在表单轮廓内需要插入的位置。(2)启用“选择图像源文件”对话框,选择作为按钮的
8、图像文件。(3)在“属性”面板中出现图像按钮的属性,可以根据需要设置该图像按钮的各项属性。(4)若要将某个JavaScript行为附加到该按钮上,则选择该图像,然后在“行为”控制面板中选择相应的行为。(5)完成设置后保存并预览网页。1
此文档下载收益归作者所有