下载文档原格式
第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所示。
第7讲布局技术之一-表格一1.1教学目标：◆知识目标1.掌握表格的基本操作2.掌握表格各项属性设置的作用◆技能目标能合理运用表格进行页面布局，能合理设置表格属性◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：掌握表格的插入和表格属性的设置。
1.3 教学难点理解表格进行页面布局的好处和表格各属性的作用。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题表格是网页设计制作时不可缺少的重要元素。
无论是用于对齐数据还是在页面上对文本进行排版，表格都体现出强大的功能。
它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。
对于使用表格绘制页面布局，而非着重文字数据编排的设计来说，手动绘制表格布局是最佳方法，虽然这种方法极其容易建立表格，但不容易掌握尺度，因为其手动操作的特性，所以非常适合于制作网页版面，但对于内容的编排，就不如标准模式的标准那么方便。
标准表格是表格应用的另一种方法，它以几行几列的方式插入到页面，然后将图像、文字等内容插入表格，即可定位和编排这些内容。
二、使用表格在Dreamweaver MX 2004中，可以导入外部数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。
表格的格式控制能力使设计者可以使用表格来构造网页的框架。
先用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。
使用表格排版的页面在不同的平台、不同的分辨率的浏览器里都能保持布局，所以表格是网页中常用的版面控制和制作模板的强有力的工具。
0.1插入表格Dreamweaver MX 2004提供了强大的工具进行表格编辑，使网页设计者可以对几乎所有的表格属性进行控制。
协议：事先约定或定义的一组精确地规定所交换数据的格式和传输方法的规则，即计算机在交换信息时都要遵守的表达方式。
主要包括用户数据与控制信息的结构和格式，需要发出的控制信息以及相应要完成的操作与响应，对时间事先顺序的详细说明等三部分内容。
标记型网页制作工具：是指创建的网页文件在编辑过程中只能看到页面的源代码，而需要转到浏览器中才能够看到页面的效果，要求用户对HTML的使用方法非常熟悉才能够做出希望要的页面，其优点在于可以完全的控制页面的元素，写出精简的代码。
Internet：是全球最大，开放的，有众多的网络相互连接而成的计算机联网。
WWW：Word Wide Web 的简称，是一个运行在Internet上的交互的，动态的，分布式的，高度集成的超文本信息系统。
下载：是指为了能够方便处理，客户机吧文件从服务器上复制到本地的过程，与下载相反的过程是上载。
URL：统一资源定位器的英文缩写，是一个提供在全球广域网上的站点或资源的Internet位置字符串，与此被访问的站点或资源所协议在一起，主要由四部分组成，分别是访问类型，访问的主机，端口号以及访问的文件的路径。
网页：Web站点中使用HTML编写而成的单位文档，是Web中的信息载体，其适应的描述语言是HTML。
Web浏览器：是指一个运行在用户计算机上的程序，主要作用在于在客户端与服务器之间进行交互，通信，负责下载，显示网页，因此也称为WWW客户程序。
所见即所得型网页制作工具：是指创建的网页文件在编辑过程中的显示与文件最终在浏览器中显示的效果是一样的，用户不需要接触HTML源代码就可以做出希望要的页面。
HTML：超文本标记语言，是创建网页时使用的语言，HTML文件被浏览器所解释后就是网页由标记和文本组成，究其本质而言，是一个给予文本的编码标准，用于指示浏览器以什么方式显示信息。
IP地址：在TCP/IP的地址编排方案中，采用了一种通用的地址格式，为互联网中的每一个网络和每一台主机都分配一个地址，这个地址在整个Internet中是唯一的，并以此屏蔽了物理网络地址的差异，这个统一的地址是由高层软件技术来完成的，确切的说是通过别的通信地址，是全球认可的计算机网络标识方法。
基于案例教学法的CSS+DIV网页表单圆角的制作摘要：css+div是目前网页设计中所使用的核心技术，如何引导学生更好的掌握这门技术，本文提出案例教学法，学生通过设计网页表单圆角这个案例，进而掌握css+div的各项知识点，避免以往先学习代码，而不知其用的痛苦，让学生体会在乐中学习。
关键词：案例教学法 css+div 样式选择器中图分类号：g712 文献标识码：a 文章编号：1673-9795（2013）04（b）-0168-01随着现代网页设计技术的发展，css+ div成为网页设计中的核心技术，如何制作精美的网站，本文旨在引导学生分析网页表单圆角案例，运用css+div知识点完成设计。
1 案例教学法案例教学法由美国哈佛商学院提出，是一种以案例为基础的教学法，通过学生间的相互讨论或研究，提高学生的学习兴趣，从而培养学生主动学习的能力。
本文用css+div制作表单圆角案例，形成学生思考和分析问题的能力，从而提高学生制作网页的技能。
案例教学法以注重学生的基本能力为基础，避免单纯理论知识的学习，在实践过程中，可以鼓励学生进行单独的思考和创造，提高学生学习的积极性。
2 表单表单（form）作为网页与用户接触最直接、最频繁的页面元素，其在网站用户体验中占有最重要的位置。
而表单也常常用于用户注册、登录、投票等功能，用于吸引新用户，留住新用户的重要工具。
设计一个表单很简单，但设计一个用户体验高，漂亮的表单却并不易。
如果表单设计用户体验不高，无疑将会对网站用户粘性大大降低。
3 设计过程3.1 展示案例，启发思考把此案例效果图展示给学生，吸引学生的注意力，激发学生探究学习案例的热情，让学生带着例子去探讨课本上的理论知识，为学生学习理论知识打下坚实的基础。
3.2 探究讨论案例，解决问题根据表单圆角的案例，让学生展开分析和讨论在案例中所用到的理论知识，分析表单的布局结构、分析实现的代码，学生试着写出css代码，并预览调整，测试优化页面。
