网页设计与制作 第 8 章 表单和行为

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
出现滚动条。当在列表中选择多重选项时,按住Ctrl键进 行不连续的选择,Shfit键是进行连续列表项的选择。
• 图8-16 “列表值”对话框及滚动列表
• (2).创建菜单 • 创建菜单和创建列表的操作一样,只不过在属性检查器中
设置有所不同,如下图8-17所示,在“类型”中应选择 “菜单”,此时只需要设置“列表值”和“初始化时的选 定”两个属性。
• 插入方法是将光标放到表单域中要插入复选框的位置,然 后在“插入”工具栏的“表单”类别中,单击“复选框” 按钮或者是“复选框组”;此时,在“编辑区”中插入一 个复选框,及打开复选框的“属性检查器”,如图8-13所 示。
• 当插入复选框组时,如同插入单选按钮组一样,可以一次 性插入多个复选框,如图8-14。
• 表单在网页中的应用非常广泛,例如常见的会员注册/登 录表单,搜索查询表单、调查表单、留言簿表单等,如图 8-1所示,当用户填写了该图的注册信息后,单击“确定” 按钮后,这些填写的信息会被发送到服务器上,服务器端 脚本或应用程序对信息进行处理,并将结果反馈给浏览者 或执行一些指定的程序。Dreamweaver CS4作为一个网页 制作工具,也提供了表单的制作,用户可以方便的创建表 单及其各种表单对象,包括文本域、密码域、单选按钮、 复选框等。
• 插入方法是将光标放到表单域中要插入复选框的位置,然 后在“插入”工具栏的“表单”类别中,单击“单选按钮” 按钮或者“单选按钮组”按钮;此时,在“编辑区”中插 入一个单选按钮或一组单选按钮,及打开复选框的“属性 检查器”,如图8-11所示。
• 当插入单选按钮组时,打开如图8-12所示的单选按钮组对 话框,单击其中的“”可以添加单选按钮组中按钮的个数, 如果要删除某个单选按钮,可以单击“”,还可以利用“” 顺序按钮来调整单选按钮的显示顺序,其中“标签”栏下 是单选按钮后面显示的文本,用户可以单击该栏进行自定 义标签,值是表单被提交时采集的数据信息

图8-22 插入“按钮”
• 提交按钮:是把表单中的所有内容发送到 服务器端的指定应用程序。
• 重置按钮:用户在填写表单的过程中,若 希望重新填写,单击该按钮使全部表单元 素的值还原为初始值。
• 普通按钮:该按钮没有内在行为,但可以 用JavaScript等脚本语言为其指定动作。
8.3 行为
• 行为是一种动态HTML( DHTML )技术。在特定的时间或者 是某个特定的事件而引发的动作。事件可以是鼠标单击、 鼠标移动、网页下载完毕等事件,动作可以是打开新窗口、 弹出菜单、变换图像等。
• 注:“选定值”是用于设置该复选框被选中时向服务器端 传送的数值信息;
• “初始状态”用于设置默认状态下该复选框是否被选中。
图8-13 “复选框”属性检查器
图8-14 “复选框组”对话框
8.2.6 列表、菜单及跳转菜单
• 列表和菜单也是表单中常用的元素之一,其功能 与单选框和复选框差不多,可以显示多个选项, 用户通过滚动条在多个选项中选择。列表和菜单 的优点就在于其它以利用网页中有限的空间为用 户提供更多的选项,非常的节省网页的版面。其 中列表提供了一个滚动条,用户可以浏览众多选 项,利用Ctrl键或Shfit键可以进行多重选择。菜单 项默认情况下只显示一个选项,用户可以单击打
• HTML只能实现静态的网页,要在网页中实现一些动态效 果,大多需要通过javaScrip或者基于javaScrip的DHTML语言 来实现,但对于javaScrip不熟悉的网页设计者来说,相当 困难。Dreamweaver CS4提供了丰富的行为,这些行为的 使用可以为网页对象添加一些动态效果和简单的交互功能, 使那些不熟悉JavaScript语言的网页设计师,不需要书写任 何代码,通过Dreamweaver CS4提供的行为按钮和可视化 的操作,也可以方便的设计出通过编写JavaScript语言才能 实现的功能,如完成图像的翻转、播放声音等网页动态效 果的设置。
• 注:使用单选按钮组可以一次性插入入多个单选按钮,单
选按钮是一个一个的插入单个单选按钮。
图8-11 插入单选按钮
图8-12 插入单选按钮组
8.2.5 插入复选框和复选框组
• 复选框是在一组选项中,允许用户选中多个选项。复选框 是一种允许用户选择对勾的小方框,用户选中某一项,与 其对应的小方框就会出现一个对勾。再单击鼠标,小对勾 将消失,表示此项已被取消。
《网页设计与制作》
第8章 表单和行为
第8章 表单和行为
• 8.1 表单的基本概念 • 8.2 创建表单 • 8.3 行为 • 8.4 综合案例―――网站的论坛注册表单
《网页设计与制作》
8.1 表单的基本概念
• 表单在各个动态网站上几乎都可以看到,其作用不可小视, 主要负责数据的采集。在WEB网页中访问者通过填写表单 中信息从而获得用户信息,使网页具有交互功能,表单是 客户端和服务器端的桥梁,当用户填写信息后做提交操作, 于是表单的内容从客户端的浏览器传送到服务器端,经过 服务器上ASP或CGI等程序处理后,再将用户信息传送给客 户端的浏览器上。
图8-1 用户注册表单
8.2 创建表单
• 每个表单都由一个表单域和若干个表单对象组成 的,所有的表单对象都要放到表单域中才能被有 效的提交给服务器。在Dreamweaver CS4中,如果 在网页中插入了表单,则在网页中表单域的范围 由一个红色的虚线框来表示,如上图8-2所示。
• 创建表单的第一步就是要在网页中插入表单域, 方法是选择“插入”菜单中“表单”下拉命令项 中的“表单”,如图8-3所示;或者是在“窗口” 菜单中选择“工作区布局”命令项下的“经典”, 则会在菜单下方出现“插入栏”中选择“表单” 标签选项卡,然后单击“表单”按钮,如图8-4所 示,这两种方法都可在网页光标所在位置插入表 单域。
创建列表?创建列表和菜单的方法与创建其它表单对象一样单击插入菜单中的表单命令项在打开的下拉菜单中选择要插入的表单对象或者在经典布局下的插入栏中单击表单选项卡单击列表菜单按钮同插入文本域对项卡单击列表菜单按钮同插入文本域对象一样弹出输入标签辅助功能属性对话框如上图85所示可以对列表旁边显示的标签进行设置设置完成后就可以在页面光标所在位置处插入一个空白的菜单选中该菜单对象打开列表菜单的属性检查器如图815所示进行列表设置

图8-21 插入“文件域”
8.2.9插入按钮
• 在表单中,按钮是用来控制表单的操作。使用按钮可以将 表单数据传送给服务器,或者重新设置表单中的内容。在 Dreamweaver CS4中,表单按钮可分为三类:提交按钮、 重置按钮和普通按钮等。应用三种按钮的表单,具体插入 方法是在“插入栏”中单击“按钮”,在弹出“输入标签 辅助功能属性”对话框中设置标签,单击“确定”在页面 中插入文件域,如上图8-22所示。
开下拉菜单来进行选择。
• (1).创建列表
• 创建列表和菜单的方法与创建其它表单对象一样, 单击“插入”菜单中的“表单”命令项,在打开 的下拉菜单中选择要插入的表单对象,或者在 “经典布局”下的“插入栏”中单击“表单”选 项卡,单击“列表/菜单”按钮,同插入文本域对 象一样,弹出“输入标签辅助功能属性”对话框, 如上图8-5所示,可以对列表旁边显示的标签进行 设置,设置完成后就可以在页面光标所在位置处 插入一个空白的菜单,选中该菜单对象,打开 “列表/菜单”的“属性检查器”,如图8-15所示, 进行列表设置。
• “ID”:用来指定该文本字段的名称,在代码中可以看到。 • “标签”:为该文本字段添加的文字标签 • “样式”:指在代码中为该表单对象添加<lable>标记
• (1).单行文本 • 单行文本域通常提供类似姓名、性别、邮箱等信息的收集,
将光标定位在表单域的红色线框内,当插入文本字段时, 在网页中选中该字段,在文档的下方打开“属性检查器”, 如图8-6所示,其中: • “类型”:单行 • “字符宽度”:用于设置该文本区域在网页显示宽度 • “最多字符数”:用于设置该文本区域中最多可输入的字 符个数 • “初始值”:指在网页中默认显示的内容
• “编码(MIME)类型”下拉列表框指定提交服务器处理 数据所使用MIME编码类型。默认设置 “application/xwww-form-urlencode”与POST方法一起使用。
• 图 8-5 “输入标签辅助功能属性”对话框
8.2.2 插入文本字段
• 在Dreamweaver CS4文本字段是表单中常用的元素之一, 主要包括单行文本字段、密码文本字段、多行文本区域三 种,插入的方法就是在“插入”菜单中选择“表单”中的 “文本域”,或者是在“经典”工作区布局中的菜单栏下 方的“插入栏”中选择“文本字段”按钮,就可以在光标 所在的位置插入文本字段,并打开“输入标签辅助功能属 性”对话框,如图8-5所示,其中:
输入文字时,所输入的内容将以“*”号或其它符号显示。
• 图8-8 插入密码文本字段
8.2.3 插入隐藏域
• 隐藏域是用来收集或发送信息的不可见元素,对于网页的 访问者来说,隐藏域是看不见的。当表单被提交时,隐藏 域就会将信息用你设置时定义的名称和值发送到服务器上。
• 插入方法就是将光标放在表单域中要插入隐藏域的位置, 然后在“插入”工具栏的“表单”类别中,单击“隐藏域” 按钮;则在“编辑区”中插入一个隐藏域,如图8-9所示。
• “动作”用于指定哪个程序文件来处理表单所采集到数据 信息。
• “方法”下拉列表框中,选择处理表单数据向服务器端的 传输方法,“Post”方法是在信息正文中发送表单数据, “Get”方法是将值附加到请求该页面的URL中,默认使用 Post;
• “目标”下拉列表框选择服务器返回反馈数据的显示方式, 这里选择“_blank”,即在新窗口打开;
图8-2 网页中插入空白表单域
• 图8-3 利用“插入”菜单创建表单 单
图8-4 利用“插入栏”创建表
• 插入表单域后,单击红色虚线,选中表单,打开其“属性 检查器”面板,如图8-5所示,其中:
• “表单id(名称)”文本框中输入表单名称,以便脚本语言 Javascript通过名称对表单进行控制;
• 图 8-6 插入单选文本 Nhomakorabea• 多行文本 • 多行文本的插入方法和单行文本一样,只是多行用于输入
信息比较多的地方,例如用户留言或者是建议等,其“属 性检查器”如图8-7所示,其中: • “类型”:多行 • “字符宽度”:用于设置该文本区域在网页显示宽度 • “行数”:用于设置该文本区域在网页中显示的高度 • “初始值”:指在网页中默认显示的内容
• (2)设置隐藏域属性。选中“隐藏域”标识,在“属性 检查器”中,在“隐藏区域”文本框中输入隐藏域的名称, “值”文本框中给隐藏域赋值,如图8-10所示。
• 图8-9 插入隐藏域
8-10 隐藏域属性检查器
8.2.4 插入单选按钮和单选按钮组
• 单选按钮是在一组选项中,只允许选择一个选择项,例如 性别、文化程度等选项。
• 图 8-15 “列表/菜单”属性检查器
• 类型:选择“列表”; • 高度:其单位是行,用于设置列表显示的高度; • 选定范围:设置该列表的选项是否允许进行多重选择。如
果允许,就选中该复选框; • 列表值:单击该按钮,打开如图8-16所示的对话框,在这
里可以添加、设置列表项; • 初始时选定:用于设置默认情况下选定的列表项; • 注:如果指定的列表高度下于列表中的选项,列表中则会
• 图8-7 插入多行文本域
• (3).密码字段文本 • 密码字段是单行文本,其插入方法和单行文本相同,其属
性检查器如图8-8所示,其中: • “类型”:密码 • “字符宽度”:用于设置该文本区域在网页显示宽度 • “最大字符数”:用于设置该密码的长度 • “初始值”:指在网页中默认显示的内容 • 注:密码字段是一个特殊的文本域,当浏览者在密码域中
入跳转菜单,并打开属性检查器,如图8-19所示。
• 图8-18 “插入跳转菜单”对话框 图8-19 跳转菜单和属性检查器
8.2.7插入图像域
• 在表单中,经常会出现文件域。文件域能使一个文件附加 到正被提交的表单中,比如表单中的上传照片或图片、邮 件中添加附件就是使用了文件域。
• 具体插入方法是在“插入栏”中单击“文件域”按钮,在 弹出“输入标签辅助功能属性”对话框中设置标签,单击 “确定”在页面中插入文件域,如图8-21所示。
• 图8-17 “菜单”属性检查器及下拉菜单
• (3).跳转菜单 • 跳转菜单实际上是一种下拉菜单,在菜单中显示当前站点的
导航名称,单击某个选项,即可跳转到相应的网页上,从而 实现导航的目的。其插入方法同样是在“插入栏”中单击 “跳转菜单”按钮,弹出“插入跳转菜单”对话框,如图818所示,进行相应的设置,单击“确定”后在页面光标处插
相关文档
最新文档