Dreamweaver网页设计第七章表单本章重点内容是:了解表单的工作原理。文本域、复选框、单选按钮、列表/菜单的使用。难点内容是:制作发送电子邮件表单。制作跳转菜单。在网页中加入搜索引擎等较为高级的内容。本课程学习需要3个课时来完成,在学习过程中应掌握课程涉及的所有内容,并做到举一反三,学会制作该课程以外的表单网页。《Dreamweaver8网页设计与制作》表单概述创建表单添加各类表单元素上机实践课程总览《Dreamweaver8网页设计与制作》课程总览创建表单添加各类表单元素上机实践表单概述什么是表单表单是实现网页互动的元素,与客户端和服务器端脚本进行结合使用,可以实现互动性。表单支持客户端-服务器关系中的客户端。当访问者在Web浏览器中显示的表单中输入信息,然后单击【提交】按钮时,这些信息将被发送到服务器,服务器端脚本或应用程序对这些信息进行处理,最后服务器端将处理结果返回给客户端。用于处理表单数据的常用服务器端技术包括cgi、asp/asp.net、jsp、PHP等。《Dreamweaver8网页设计与制作》课程总览课程总览表单概述添加各类表单元素创建表单上机实践•表单的工作原理《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践创建表单(1)新建一个网页,将光标定位在希望表单出现的位置上。(2)执行【插入】-【表单】-【表单】命令,或选择“插入”栏上的“表单”类别,然后单击“表单”按钮。(3)这时文档中将插入一个空的表单,如图7-1所示。在“设计”视图中,红色的虚轮廓线表示表单。注意:如果没有看到红色的虚轮廓线,请检查是否选中了【查看】-【可视化助理】-【不可见元素】选项。图7-2红色的虚轮廓线表示表单(4)选定上面的表单,显示表单属性面板,如图7-3所示。《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践添加表单对象•文本字段•隐藏域•文本区域•复选框单选按钮单选按钮组列表/菜单跳转菜单图像域文件域按钮标签字段集•文本字段《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践文本字段是最常见的表单对象之一,可以输入字母、数字、文本等类型的内容。文本可以是单行或多行显示,也可以以密码的方式显示,在这种情况下,输入文本将被替换为星号或项目符号,以避免旁观者看到这些文本,一般用作密码等项目。•隐藏域《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践隐藏域用于存储用户输入的信息,但它并不会在网页上显示出来,只是为了向服务器提供一些数据。如输入一项电子邮件地址后,服务器就记住了该数据,下次访问时就不用再输入。•文本区域《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践文本区域用来输入大段文本,与文本字段使用方式相同,也可以以密码的方式显示。•复选框《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践复选框的标记是在选项前有符号,其允许同时选择多个选项。•单选按钮《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践在一组选项中只能选择一个选项,如在性别单选按钮组中选中了“男”单选按钮,再选中“女”单选按钮时,“男”单选按钮就会被撤消。•单选按钮组《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践一组相关联的单选按钮,同样一次只能选择一个单选按钮。•列表/菜单《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践“列表”指在一个下拉列表框中显示一些选项,可以从其中选择多个。“菜单”指在一个菜单中显示一些选项值,用户只能从中选择单个选项•插入文件域文件域与单行文本字段外型相似,只是在文本框右侧增加了一个“浏览”按钮,用于引用本地电脑上的文件作为表单内容。《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践•插入按钮《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践表单按钮在表单中用于控制表单的操作。•插入图像域《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践图像域用来将图像作为按钮。•插入跳转菜单•跳转菜单是创建链接的一种形式,但比真正的链接、跳转菜单可以节省很大的空间。《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践《Dreamweaver8网页设计与制作》课程总览表单概述创建表单添加各类表单元素上机实践上机实战本课上机实战将制作一个论坛的注册页面。在练习过程中将用到创建表单、设置表单属性、添加表单对象和设置表单对象的属性等知识点。•小组活动安排•问题1:请问如何在插入文件域中实现带有预览功能的图片上传效果•问题2:如何让表单提交后按钮变灰《Dreamweaver8网页设计与制作》