下载文档原格式
第7章表单在制作动态网页时，要实现信息交互，常常用到表单。
常见的表单有搜索表单、用户登录注册表单、调查表单、留言簿表单等。
本章节将和大家一起探讨在表单的基本概念和各个元素，以及在Dreamweaver CS4中如何创建表单，并通过实例掌握表单制作的方法。
【学习目标】●了解Web服务器的作用。
●掌握IIS的安装和设置方法。
●掌握更改站点设置的方法。
●知道表单域的含义；熟练掌握各种表单栏目的插入与设置。
●能够综合使用各种表单栏目制作留言簿。
●知道发送表单结果的多种方法。
●掌握验证表单的方法。
7.1 关于表单表单是用来收集站点访问者信息的域集，可实现网页与浏览者间的交互，达到收集浏览者输入信息的目的。
表单是浏览网页的用户与网站管理者进行交互的主要窗口，Web管理者和用户之间可以通过表单进行信息交流。
表单内有多种可以与用户进行交互的表单元素，如文本框、单选框、复选框、提交按钮等元素。
在服务器端，信息处理由CGI （Common Gete Way Interface）、JSP （Javaserver Page）或ASP （Active Server Page）等应用程序处理。
下面是几个表单应用的例子，邮箱用户注册表单如图14.1所示，搜索引擎表单如图14.2所示，在线测试表单如图14.3所示。
7.2 表单元素表单域简单地说，表单就是用户可以在网页中填写信息的表格，其作用是接收用户信息并将其提交给Web服务器上特定的程序进行处理。
表单域，也称表单控件，是表单上的基本组成元素，用户通过表单中的表单域输入信息或选择项目。
在建立表单网页之前，首先就要建立一个表单域。
在7.1节中详细介绍了表单的基本概念，使用Dreamweaver CS4可以创建各种表单元素，如文本框、滚动文本框、单选框、复选框、按钮、下拉菜单等。
在“插入”工具栏的“表单”类别中列出了所有表单元素，如图14.4所示7.2.1 插入表单（1）将光标放在“编辑区”中要插入表单的位置；然后在“插入”工具栏的“表单”类别中，单击“表单”按钮；此时一个红色的虚线框出现在页面中，表示一个空表单，如图14.5所示（2）单击红色虚线，选中表单；在“属性检查器”中，“表单名称”文本框中输入表单名称，以便脚本语言Javascript通过名称对表单进行控制；在“方法”下拉列表框中，选择处理表单数据的传输方法，“Post”方法是在信息正文中发送表单数据，“Get”方法是将值附加到请求该页面的URL中；在“目标”下拉列表框选择服务器返回反馈数据的显示方式，这里选择“_blank”，即在新窗口打开；“MIME类型”下拉列表框指定提交服务器处理数据所使用MIME编码类型。
1协议：事先约定货定义的一组精确地规定所交换数据的格式和传输方式的方法和规则，即计算机在交换信息时都要遵守的表达方式。
主要包括用户数据和控制信息的结构和格式，需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三个部分。
2网站的层次：指整个站点各个层次之间的结构关系。
这是一种逻辑上的概念，目的在于合理组织整个站点中的所有内容，便于访问者查找和浏览，一般来说站点都把自身的内容分为多个层次，每个层次逐渐递进,最后达到最相信的内容。
3表单：是网页中站点服务器处理的一组数据输入域。
当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。
它是非常重要的通过网页在与服务器之间传递信息的途径，表单网页可以用来说收集浏览者的意见和建议，以实现浏览者与站点之间的互动。
4内联式样式单：它利用于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。
5虚拟主机:使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分为多台“虚拟"主机,每一台虚拟主机都具有独立的域名和IP地址,具有完整的Internet服务器功能，虚拟主机之间完全独立,并可由用户自行管理，每一台虚拟主机和一台独立的主机完全一样.6标记型网页制作工具：指创建的网页文件在编辑过程中只能看到页面的源代码，只需要转到浏览器中就能看到页面的效果。
要求用户对HTML的使用方法非常熟悉才能够做出希望要的页面，其优点在于可以完全的控制页面元素，写出精简的代码.7色相：是颜色的基本属性，反应颜色的原貌,通过色相,人们才能区分种种颜色。
8客户端图像地图：它可将每个作用区的URL位置直接对应在Web网页的图像。
客户端图像映射并不需要通过服务器处理来允许站点访问者是否可在图像映射上进行超级链接。
但是,并非所有的浏览器都支持客户端图像映射。
9嵌入式样式单：和Script类似，嵌入到HTML文件的头部中去（<html>和<body>标记之间的〈head〉〈/head>标记之间）使用<Style>和〈/style>标记装载。
表单页面的开发实验总结全文共四篇示例，供读者参考第一篇示例：表单页面是Web开发中常见的一种页面类型，用于收集用户输入的信息或进行交互操作。
在实际开发中，设计优秀的表单页面可以提高用户体验、增加用户参与度，因此在开发表单页面时需要注意设计、交互、数据验证等方面。
本文将通过一个关于表单页面的开发实验总结，分享一些开发表单页面的经验和技巧。
一、设计阶段1. 界面设计在设计表单页面时，需要考虑页面布局、颜色搭配、字体大小等因素，以保证页面的整体美观和用户友好性。
可以采用响应式设计，使表单页面在不同设备上都能展现良好的用户体验。
2. 表单组件选择根据页面需求，选择合适的表单控件，如文本框、单选框、复选框、下拉框等。
需要考虑表单控件的排列顺序和位置，以便用户能够顺利填写信息。
3. 数据验证为了保证用户输入的数据的正确性和完整性，需要为表单中的每个控件添加相应的数据验证规则，如必填字段、格式验证等。
在界面上给用户明确的提示信息，让用户知道需要填写和如何填写。
二、开发阶段1. HTML编写在编写表单页面的HTML代码时，需要为每个表单控件添加合适的标记和属性，以便进行后续的样式和逻辑处理。
需要注意表单标签的嵌套关系，保证页面结构的清晰和可维护性。
2. CSS样式设计通过CSS样式设计，美化表单页面的外观，使其更加吸引人。
可以使用各种样式技巧，如边框、背景色、字体样式等，来增强页面的整体表现。
3. JavaScript交互通过JavaScript编写交互逻辑，实现表单控件之间的联动效果，如依赖性或条件性显示、隐藏某些控件等。
可以使用JavaScript对用户输入的数据进行实时验证和反馈，提高用户填写表单的体验。
三、测试阶段1. 兼容性测试在测试阶段，需要检查表单页面在不同浏览器和设备上的兼容性，确保页面在各种情况下都能正常显示和工作。
可以使用工具或在线服务进行测试，及时发现并解决兼容性问题。
2. 功能测试对表单页面的功能进行全面测试，包括用户输入、数据验证、提交操作等，检查是否符合设计要求，并且能够正常工作。
网页制作表单教学设计教案(共5页)-本页仅作为预览文档封面，使用时请删除本页-5．2网页制作——表单教学方法：教学演示、任务驱动、自主练习一、教学目标：1、知识与技能了解表单的概念掌握表单网页的制作方法2、过程与方法体验表单网页的制作过程体验用表单网页进行信息的采集过程3、情感、态度、价值观认识信息技术对人们日常生活、学习、工作的影响激发学生对信息技术的求知欲，形成积极主动地学习和使用信息技术、参与信息活动的态度二、重点难点：表单网页的概念表单网页的制作方法三、课程标准：选修模块3：网络技术应用---网站设计与评价---内容标准---能够根据表达任务的需求，使用常用的网页制作软件制作网页四、教学媒体：(本教案需用到的各种教学媒体和资源)1.硬件：网络机房2.软件：多媒体广播教学软件，FrontPage2000学生在学习本节内容之前，已经学习过因特网的相关知识、会上网，并且已经掌握常用网络工具软件的使用，如QQ、E-mail等等，并且有着浓厚的兴趣。
大部分学生只停留在利用QQ聊天、进行网络游戏、收发E-mail等阶段，对申请QQ号码和E-mail时的网页结构形式知之甚少。
本节课的关键是通过学习，了解表单网页的制作过程和方法，为以后信息获取和处理打下基础。
六、教材分析：网络基础及应用是高中信息技术课程的重点，是培养学生信息素养的关键章节，对于培养学生获取、评价、利用和表达信息的能力，起着举足轻重的作用。
而表单网页在基于网络的信息收集处理方面有着明显的优势。
一、一、问题的提出制作一张如下所示的用户登记表二、二、问题：1．上述用户登记表中有哪几种表单域？2．表单的工作原理是什么？三、三、表单的构成表单域：是容纳输入信息的容器，是用户输入数据的地方。
表单控制器：负责处理用户在表单中填写的信息。
“提交”和“重置”按钮：将信息提交到站点服务器、清除表单中已填写的内容。
四、四、制作用户登记表单行文本框：用于让用户输入一行文本信息，并能够被Web 服务器接受，用户登记表中的姓名、年龄和E_mail均是单行文本框。
实验五：Web制作—Dreamweaver5.1 实验目的●了解DreamweaverCS4中，超文本标记语言HTML用于网页结构设计的概念。
●了解CSS层叠样式表用于网页样式应用的概念。
●了解JS（Javascript）用于网页行为的调用的概念。
●掌握超文本标记语言HTML与网页的关系、熟悉最基本的HTML语言。
●掌握HTML网页的基本设置、代码的基本应用。
●掌握用表格、单元格和DIV（层）对网页进行布局的方式设计网页。
●掌握各类超链接：文字、图片（图片包含热点）、书签、电子邮件的超链接。
●掌握多媒体网页的制作、动画、图片、视频、声音的设置。
●掌握网页中动态效果的制作以及背景图片、音乐的设置。
●掌握框架网页的设计。
●掌握表单技术：单行文本框、下拉菜单、单选按钮、复选框、文本区、提交和重置。
●掌握网页设计中层的应用、行为设置、网页特效的应用。
●掌握站点的建设、调试和发布。
5.2 实验范例范例一：熟悉 Hypertext Markup Language（1）简单网页的制作：将Dreamweaver范例一文件夹放置在桌面上，应用记事本软件打开“我的第一张网页”文件，输入下述HTML命令（注意：除了中文字之外，其余超文本标记语言全部换用英文、半角）〈HTML〉〈!--HTML文档开始--〉〈HEAD〉〈!--HTML文档头部分开始--〉〈TITLE〉我的第一个网页+学生自己姓名〈/TITLE〉〈!--设置标题栏--〉〈/HEAD〉〈!--HTML文档头部分结束--〉〈BODY〉〈!--HTML文档主体部分开始--〉正常体〈!—字题设置--〉〈B〉粗体字〈/B〉〈I〉斜体字〈/I〉〈U〉加下划线〈/U〉〈TT〉打字机风格字体〈/TT〉〈SUP〉上标字体〈/SUP〉〈SUB〉下标字体〈/SUB〉〈S〉加删除线〈/S〉〈EM〉强调文本〈/EM〉〈STRONG〉加重文本〈/STRONG〉〈BR〉〈!—换行--〉〈SMALL〉小字体〈/SMALL〉〈BIG 〉大字体〈/BIG 〉〈table border="1" width="50%" id="table1"〉〈!—表格开始 框线粗1 宽度50%--〉〈tr 〉 〈!—表格第一行开始--〉〈td width="470"〉 〈!—表格第一列 宽470像素--〉〈H1〉第1标题字体〈/H1〉〈H2〉第2标题字体〈/H2〉〈H3〉第3标题字体〈/H3〉〈H4〉第4标题字体〈/H4〉〈H5〉第5标题字体〈/H5〉〈H6〉第6标题字体〈/H6〉〈td 〉 〈!—表格第二列开始--〉〈p align="center"〉 〈!—内容居中对齐--〉〈img border="0" src="file:///X:/范例一/范例1图片.JPG" width="350" height="280"〉 〈!—插入桌面/范例一/图片.JPG ，图片边框为0，图片大小为350×280像素--〉〈/td 〉 〈!—表格第二列结束--〉〈/tr 〉 〈!—表格第一行结束--〉〈/table 〉 〈!—表格结束--〉〈HR 〉 〈!—加水平线--〉〈FONT SIZE="6" COLOR="red"〉红色6号字体〈/FONT 〉〈FONT SIZE="+3" COLOR="#0000FF"〉蓝色6号字体〈/FONT 〉〈/BODY 〉 〈!--HTML 文档主体部分结束--〉〈/HTML 〉 〈!--HTML 文档结束--〉（2）保存为“my first web.htm ” 在桌面上，然后用IE 浏览器打开观察，对照样张如图5-1所示。
