《Dreamweaver网页设计与制作 教学课件 ppt 作者 林晓峰 王晓平《Dreamweaver网页设计与制作》第1-5章教学课件 第7章》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计与制作 教学课件 ppt 作者 林晓峰 王晓平《Dreamweaver网页设计与制作》第1-5章教学课件 第7章（28页珍藏版）》请在金锄头文库上搜索。
1、交互式表单的应用,第7章,本章要点： 了解表单 创建各种表单域 表单的检查,7.1 表单概述,表单用途,在申请邮箱、网站留言及论坛发帖，往往需要浏览者填写一些信息，如姓名、密码和联系方式等，这时就必定少不了一项网页技术表单。,表单是用于实现网页浏览者与服务器之间交互的一种页面元素，在因特网上被广泛用于各种信息的搜集和反馈，是网站管理者与浏览者之间沟通的桥梁。,要填写信息的页面上往往会包括很多表单对象。如果允许用户能输入数据，就应该使用文本域、密码域等；如果允许用户进行选择，就应该使用单选框、复选框、下拉菜单、列表等，所有这些表单元素合在一起，我们称之为表单。,教学进程,首先要用表格确定好各种表
2、单元素的放置位置。,教学进程,根据实际需求添加不同的表单元素。,（1）规划页面布局,（2）添加表单元素,7.1 表单概述,如果要制作一个留言板的简单页面，一般步骤如下：,7.2 规划页面布局,教学进程,7.2.1 插入表格, 插入一个16行2列的表格，并调节表格。,7.2.2 添加文本,教学进程,在表格中添加文本后的效果,1. 插入表单域,教学进程,7.3 表单域的使用,2. 设置表单域属性,3. 调整表格位置,将光标定位在文档页面中需要插入表单的位置。 - 单击“表单”工具栏中的【表单】按钮，此时光标定位处出现一个红色的虚线框，它表示表单的范围。,1. 插入表单域,教学进程,7.3 表单域的
3、使用,2. 设置表单域属性,3. 调整表格位置,单击表单红框的内部，可以在【属性】面板中对其相关属性进行设定。,1. 插入表单域,教学进程,7.3 表单域的使用,2. 设置表单域属性,3. 调整表格位置,表单元素必须位于表单域中，因此我们应该将表格移动的红色的虚线框中。 - 首先选中表格对象，按Ctrl+X快捷键将它剪切到剪贴板中，然后插入一个表单，单击红框内部，按Ctrl+V快捷键将表可知粘贴在表单内。,教学进程,7.4 创建文本字段,7.4.1 插入单行文本框,文本字段主要用于单行信息的输入，如输入登录账号、密码、 联系电话、邮政编码等,教学进程,7.4 创建文本字段,7.4.2 添加密码
4、文本框,密码字段就是在浏览网页时，在该表单项中输入的字符显示为 “*”或“”的保密字符。密码字段和文本字段的创建方法一 样，不同的只是在【属性】面板中，密码字段的【类型】选择 为“密码”。,文本区域其实就是一个放大了的文本字段,教学进程,7.4.3 添加文本区域,方法一：插入一个文本框，然后在【属性】面板将其【类型】 修改为“多行”，此时文本框就变为文本区域。,方法二：单击【表单】工具栏中的【文本区域】铵钮，就可 以直接插入文本区域，,教学进程,7.5 创建复选框,复选框即提供多个选择项，浏览者可以任意选择。,复 选 框 效 果,教学进程,7.6 创建单选按钮和单选按钮组,方法,和复选框的功能
5、似乎有些相反，单选按钮是多个选项中只能选择一个，具有唯一选择性。在页面设计时插入单选按钮很简单，方法类似复选框。,效果,7.6.1 添加单选按钮,教学进程,7.6.2 添加单选按钮组,方法,将光标定位在要插入单选按钮组的位置，单击【表单】工具栏中的【单选按钮组】按钮，弹出【单选按钮组】对话框，我们仍然以前面制作的“性别”单选按钮为例，将【名称】修改为“sex”，同时修改【Label】和【Value】的值，单击【确定】按钮即可得到一组单选按钮组。,教学进程,7.7 创建菜单和列表,方法,将光标定位在要添加菜单的单元格内，单击【表单】工具栏中的【列表/菜单】按钮，此时在编辑窗口中就出一个菜单框，选
6、择该菜单框，然后在属性面板中设置其属性 。,7.7.1 添加菜单,教学进程,7.7.2 添加列表,介绍,列表不同于菜单，列表允许同时显示多个项目标签，并且允许对项目进行多选。其插入方法和“菜单”一样。,方法,选择刚才插入的菜单，在【属性】面板中将【类型】设置为【列表】，这时【高度】和【选定范围】就变成可用。,教学进程,浏览网页时经常需要用户将文件提交到网站服务器上，例如，当发送电子邮件需要添加附件时，或当发表帖子需要上传图片时，就会看到一个文本对话框和一个浏览按钮，以提供浏览本地文件进行上传。这就是文件域的具体表现。,7.8 创建其他常用表单域,7.8.1 插入文件域,将光标定位在“精彩留念”
7、右侧的单元格内，单击【表单】工具栏中的【文件域】按钮，文件域就被插入到编辑窗口中，在属性面板中设置其相关参数。,教学进程,7.8 创建其他常用表单域,7.8.2 插入按钮,表单中的按钮可以用来提交或重置表单，也可以为按钮提供一些“行为”动作，使得其具有一些功能。,按钮的预览效果,教学进程,7.8 创建其他常用表单域,7.8.3 插入图像域,图像域的出现弥补了按钮样式的单调性。可以用一张图像来实现按钮、提交表单等功能，,图像域的属性,教学进程,7.8 创建其他常用表单域,7.8.3 插入隐藏域,隐藏域就是当网页被浏览时，该表单不希望浏览者看到，此时就可以使用隐藏域。它一般用于信息的暂存但又无须在
8、页面中显示的情况，或者说更多的是为了网页程序的使用。,隐藏域的属性,教学进程,7.9 创建跳转菜单,跳转菜单可以让访问者在下拉菜单中直接选择相关的选项，单击链接后访问相关的页面，一般都用来制作友情链接。浏览者只要单击下拉按钮，在其中单击某一个选项，就可以打开该选项对应的URL地址。,教学进程,7.9 创建跳转菜单,7.9.1 插入跳转菜单,跳转菜单的效果,教学进程,7.9 创建跳转菜单,7.9.2 修改跳转菜单,（1）返中跳转菜单，进入属性面板,（2）在列表中修改即可,教学进程,7.10 表单的检查,对于已经创建好的表单，其功能及位置不一定能满足实际需求。比如，有些文本字段必须要填入内容，而有
9、些则是可选项；而有些文本字段要求输入指定范围内的数据等。 如何来检测表单是否满足我们的需求，就成了创建表单后的一项相当重要的工作。 - 进行表单检查有两种情况：一种是对单个表单对象进行检查，只要触及该对象就进行检查；另一种是提交表单时才进行全面检查。,教学进程,7.10 表单的检查,7.10.1 对单个表单进行检查,教学进程,7.10 表单的检查,7.10.2 表单提交时进行检查,只有当单击【提交】按钮那一刻开始，才对表单进行检查操作。,在制作表单检查的实际运用中，一般采用对【提交】按钮做最后检 查操作就可以了。当然，如果再加上对单个表单对象的检查，这样 就更加严谨了。但这并不代表这种检查就万无一失了，因为目前所 进行的表单检查，只是通过脚本语言在客户端的浏览器上进行的， 在数据信息传送到服务器端时，仍将有必要进行服务器端的枪柄， 这样安全性才会更高。,教学进程,（1）在站点目录下新建一个名为form.htm文件，利用本章学习的内容，制作如下图所示的用户注册页面效果，然后对表单进行检查。,7.11 习题与上机操作,上机操作题,教学进程,（2）在站点目录下新建一个名为navigation.htm文件，制作如下图所示的跳转菜单效果。,7.11 习题与上机操作,上机操作题,
