第4章 框架和交互式表单,4.1 框架的基本操作,1 框架的概念 框架：把网页页面划分成相对独立的的若干区域，每个区域相当于一个独立的页面，这些页面既各自独立又相互联系。 功能： 窗口的平铺 一个浏览器窗口中用框架制作的网页能显示多个不同的HTML文档，好象平铺了几个子窗口，分别显示不同的内容。 版面更友好，结构更清晰,框架（Frames）技术的组成： 框架集（Frameset） 定义框架的结构、数量、大小尺寸及装入框架中的页面文件名和路径等框架属性。框架集自身不在浏览器中显示，只存储所属框架的有关信息。框架集中的全部框架文件构成一个网页页面。 框架（Frame） 框架集的组成元素。各框架的页面是整个网页页面的一部分，是一个矩形区域。具有网页所有的属性和功能。 注意：当一个页面被划分为若干框架时，DM自动建立框架集文件，每个框架中包含一个文档。例：一个包含两个框架的框架集实际存在3个文件：一个是框架集文档，另两个分别包含于各自的框架内。,2 框架的创建、调整与删除 1）创建方式： 【插入】| HTML | 【框架】命令 可选框架模式： “左对齐”-左框架 “右对齐”-右框架 “对齐上缘”-顶框架 “对齐下缘”-底框架 “下方及左侧嵌套” “左侧及下方嵌套”等 布局工具栏-框架工具 在网页编辑器窗口中选中已插入的框架，然后按住Alt键的同时，用鼠标纵向拖曳或横向拖曳框架边框线，就可以加入上下结构或左右结构的框架。,2）拆分与调整： 【修改】|【框架页】命令 按住Alt键不放，用鼠标拖曳边框线可拆分框架 鼠标拖拽边框线调整框架大小 框架集属性面板中的设置参数可精确调整框架尺寸 3）删除 用鼠标拖动框架边框到上一级框架的边框线处，松开鼠标即可。,3 框架和框架集的选择与设置 选择方式： 【窗口】|【框架】命令(Shift+F2)打开框架面板，单击某个框架区域选择框架；单击边框线选择框架集。 在网页编辑窗口： Alt+ 单击框架的任意位置：选中该框架 Alt+ ：同一级别框架选取 Alt+ ：上一级别框架选取，连续操作可选中整个框架集,框架属性面板设置： “源文件”：设置框架源文件的URL，指定该框架打开的源文件。 “边框”：设置框架边框在浏览器中是否显示。 “滚动”：设置是否允许边框有滚动条。 “边界宽度”：设置当前框架的内容与框架左右边界的距离。 “边界高度”：设置当前框架的内容与框架上下边界的距离。 “不能调整大小”：禁止改变框架的尺寸。,4 框架和框架集的保存方式 框架中的内容主要是HTML文档 选中要保存的框架，【文件】|【保存框架】 选中框架集，【文件】|【保存框架页】 【文件】|【保存全部】：保存框架集与所有框架文档。,例一：框架页面布局,4.2 表单的创建与应用 表单（form）技术是实现信息交互的重要工具，也是网络信息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。 常用功能： 网上调查； 留言板； 聊天室等。,表单的组成： 由DM生成的表单页面 用于处理浏览者在表单域中输入的信息的服务器端应用程序或客户端脚本。 浏览者在网页上看到的表单，只是供浏览者输入信息的表单页面。当浏览者在表单中输入信息，单击表单的提交（Submit）按钮后，表单内容就会上传到服务器，并由事先编好的程序来处理这些信息，最后服务器再将处理结果发送给浏览者的浏览器。,1 表单的创建方法,【插入】|【表单】命令插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。,2 表单对象,1）表单 “表单”在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。 注：所插入的表单边框是不能被编辑的，设定者在表单区域中插入对象后表单区域会自动调整大小。 2）文本域 “文本域”在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。,文本域,3）复选框 “复选框”在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。 4）单选按钮 “单选按钮”在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。,复选框,单选按钮,5）单选按钮组 “单选按钮组”插入共享同一名称的单选按钮的集合。 6）列表/菜单 “列表/菜单”使您可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。,7）跳转菜单 “跳转菜单”插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。 8）图像域 “图像域” 可以替换“提交”按钮，以生成图形化按钮。当浏览时单击这个图像时，表单就会将表单数据提交给处理程序或脚本。,9）文件域 “文件域”在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。 10）按钮 “按钮”在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。,3 表单对象的属性,1）表单的属性 “动作”：指定处理该表单的动态页或脚本的路径。 “方法”：选择将表单数据传输到服务器的方法。表单“方法”有： POST 在 HTTP 请求中嵌入表单数据。GET 将值追加到请求该页的 URL 中。通常，默认方法为 POST方法。,表单的属性,“目标”：指定一个窗口，在该窗口中显示调用程序所返回的数据。目标值有： _blank，在新窗口中打开目标文档。 _parent，在显示当前文档的窗口的父窗口中打开。 _self，在提交表单所使用的窗口中打开目标文档。 _top，在当前窗口的窗体内打开目标文档，此值可用于确保目标文档占用整个窗口。,2）文本域的属性 “字符宽度”设置域中最多可显示的字符数。 “最多字符数”设置单行文本域中最多可输入的字符数。,3）复选框的属性 “复选框”：为该对象指定一个名称。 “选定值”：设置在该复选框被选中时发送给服务器的值。例如，在一项调查中，可以将值 4 设置为表示非常同意，值 1 设置为表示强烈反对。 “初始状态”：确定在浏览器中载入表单时，该复选框是否被选中。 “动态”：使服务器可以动态确定复选框的初始状态。,4）单选按钮的属性 “单选按钮”：为该对象指定一个名称。 对于一组单选按钮，如果希望这些选项为互斥选项，必须共用同一名称。 “选定值”：设置在该单选按钮被选中时发送给服务器的值。 例如，可以在属性面板的“选定值”文本框中键入滑雪，指示用户选择滑雪。,5）列表/菜单的属性 “列表/菜单”：为该菜单指定一个名称，该名称在表单中必须是唯一的。 “类型”：指定该菜单是单击时下拉的菜单（“菜单”选项），还是显示一个列有项目的可滚动列表（“列表”选项）。 “高度”：（仅“列表”类型）设置列表中显示的项数。 “选定范围”：（仅“列表”类型）指定用户是否可以从列表中选择多个项。 “列表值”：打开一个对话框，可以在该对话框中向菜单/ 列表 中添加菜单项/列表项。,6）按钮的属性 “按钮名称”：为该按钮指定一个名称。“提交”和“重置”是两个保留名称，“提交”通知表单将表单数据提交给处理应用程序或脚本，“重置”将所有表单域重置为其原始值。 “值”：确定按钮上显示的文本。 “动作”：确定单击该按钮时发生的操作。 如果选中了“提交表单”选项，当单击该按钮时将提交表单数据进行处理，该数据将被提交到表单的“动作”属性中指定的页面或脚本。 如果选中了“重置表单”选项，当单击该按钮时将清除该表单的内容。 选择“无”选项。可通过为该按钮设置“行为”，指定单击该按钮时要执行的操作。例如，您可以添加一个 JavaScript 脚本，使得当用户单击该按钮时打开另一个页面。,7）图像域的属性 “图像区域”：为该按钮指定一个名称。 “源文件”：指定要为该按钮使用的图像。 “替代”：用于输入描述性文本，一旦图像在浏览器中载入失败，将显示这些文本。,8）设置跳转菜单对话框的选项,例二：表单页面,4 表单的验证,若要在用户填写表单时分别检查各个域，请选择一个文本域； 若要在用户提交表单时检查多个域，请在“文档”窗口左下角的标签选择器中单击 标签，选择整个表单 【窗口】|【行为】打开行为面板，单击加号 “+” 按钮，然后从列表中选择“检查表单” 注意： “检查表单”行为仅在文档中已插入了文本域的情况下可用。,提交按钮onClick事件的JavaScript： if(password.value != password2.value) alert(两次输入的密码不相同); password.focus(); return false; else if(password.value.length10) alert(密码长度不能少于6位，多于10位！); password.focus(); return false; ,思考题：,1. 什么是框架，它的组成和功能是什么？ 2. 标准的表单域有几种形式？各自的功能是什么？ 3. 创建表单后，为什么还要创建表单处理程序？ 4. 表单的主要属性有哪些？,