网页设计基础7

第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.1 教学目标了解网页设计的基本概念和原则掌握网页设计的工具和软件学习网页设计的基本技能和技巧1.2 教学内容网页设计的定义和作用网页设计的原则和要素网页设计的工具和软件介绍网页设计的技能和技巧讲解1.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享1.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第二章：网页布局与排版2.1 教学目标学习网页布局的基本概念和原则掌握网页排版的方法和技巧学习使用网页布局工具和软件2.2 教学内容网页布局的定义和作用网页布局的基本原则和要素网页排版的方法和技巧网页布局工具和软件介绍2.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享2.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第三章：网页配色与图标设计3.1 教学目标学习网页配色的基本原则和方法掌握网页图标设计的基本技巧和风格学习使用网页配色工具和软件3.2 教学内容网页配色的定义和作用网页配色的一般原则网页配色的具体方法网页图标设计的基本技巧网页图标设计的风格3.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享3.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第四章：网页动画与交互设计4.1 教学目标学习网页动画的基本概念和制作方法掌握网页交互设计的基本原则和技巧学习使用网页动画和交互设计的工具和软件4.2 教学内容网页动画的定义和作用网页动画的基本类型和制作方法网页交互设计的定义和作用网页交互设计的原则和技巧网页动画和交互设计的工具和软件介绍4.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享4.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第五章：网页设计与网页标准5.1 教学目标学习网页设计的基本标准和规范掌握网页设计的最佳实践和技巧学习使用网页设计的相关工具和软件5.2 教学内容网页设计标准的基本概念和作用网页设计规范的定义和内容网页设计最佳实践的介绍网页设计的工具和软件介绍5.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享5.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第六章：HTML与CSS基础6.1 教学目标学习HTML的基本结构和语法掌握CSS的使用方法和技巧理解HTML和CSS在网页设计中的重要性6.2 教学内容HTML的定义和作用HTML的基本结构和语法CSS的定义和作用CSS的使用方法和技巧HTML和CSS在网页设计中的应用6.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享6.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第七章：响应式网页设计7.1 教学目标学习响应式网页设计的基本概念和原则掌握响应式网页设计的技巧和工具学习响应式网页设计的方法和流程7.2 教学内容响应式网页设计的定义和作用响应式网页设计的基本原则和要素响应式网页设计的技巧和工具响应式网页设计的方法和流程7.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享7.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第八章：网页设计与前端开发8.1 教学目标学习前端开发的基本概念和流程掌握HTML、CSS和JavaScript在网页设计中的应用学习使用前端开发工具和框架8.2 教学内容前端开发的定义和作用HTML、CSS和JavaScript在网页设计中的应用前端开发的流程和步骤前端开发工具和框架的介绍8.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享8.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第九章：网页设计与后端开发9.1 教学目标学习后端开发的基本概念和流程掌握后端编程语言和数据库在网页设计中的应用学习使用后端开发框架和工具9.2 教学内容后端开发的定义和作用后端编程语言和数据库在网页设计中的应用后端开发的流程和步骤后端开发框架和工具的介绍9.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享9.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第十章：网页设计项目实践10.1 教学目标培养学生独立完成网页设计项目的能力培养学生团队协作和沟通能力培养学生对网页设计行业的理解和认识10.2 教学内容网页设计项目的定义和作用网页设计项目的流程和步骤网页设计项目的实践操作和技巧团队协作和沟通的方法和技巧10.3 教学方法实践操作和项目实训团队协作和沟通的实践指导和学生互评10.4 教学评估项目完成的质量和效果团队协作和沟通的参与度学生互评和教师评价重点和难点解析一、网页设计基础1.1 教学内容中的网页设计的定义和作用、原则和要素，以及网页设计的工具和软件介绍是本节课的重点。

《网页设计与开发第７章》试卷一、选择题1、下列关于表单得说法不正确得一项就是( )。

A.表单元素可以单独存在于网页表单之外B。

表单中包含各种对象，例如文本域、列表框、复选框与单选按钮Ｃ。

get与poｓt方法就是浏览器将表单信息提交给服务器程序得两种主要方法Ｄ.表单由两部分组成:一就是描述表单得HTML源代码;二就是用来处理用户在表单域中输入得信息得服务器端应用程序客户端脚本答案： A2、下列不就是表单域得控件就是（).A。

单行文本框B。

复选框C.下拉菜单D。

图文框答案： D3、ＨTMＬ语言中表单得作用就是（)。

A。

显示图像B．设置超链接C.收集用户反馈信息Ｄ.显示网页信息答案： C4、有如下一行代码〈inpuｔtｙpe="text”name=”txｔ＂＞请问它得功能就是（).A.创建一个文本框B.创建一个密码框C.创建一个文本域D．创建一个按钮答案： A5、在HＴML中，<form ａctｉon＝？＞,aｃtion表示( )。

A.提交得方式B.表单所用得脚本语言C．提交得URＬ地址D。

表单得形式答案: Ｂ6、在HTML中,〈foｒm methoｄ=?＞，ｍetｈｏd表示（ ).A.提交得方式B。

表单所用得脚本语言C.提交得UＲＬ地址D.表单得形式答案: A７、增加表单得复选框得HTML代码就是( )。

Ａ。

<ｉnｐut typｅ＝sｕbｍit>B.<iｎpｕt ｔype=imaｇe ＞Ｃ.<input tyｐｅ＝ｔexｔ〉Ｄ.〈iｎpｕt type=ｃｈecｋｂox＞答案： D8、增加表单得密码域得ＨTML代码就是( )。

A。

<inｐut tyｐｅ＝sｕbmit〉Ｂ。

〈inｐut tｙpｅ=ｐａssｗoｒｄ〉C．<ｉnｐut type＝radio＞D。

＜iｎput tyｐe=chｅckｂox〉答案: B9、创建选项菜单应使用以下标记符( )。

Ａ。

《网页设计与开发第7章》试卷一、选择题1。

下列关于表单的说法不正确的一项是（ ).A．表单元素可以单独存在于网页表单之外B．表单中包含各种对象，例如文本域、列表框、复选框和单选按钮C．get和post方法是浏览器将表单信息提交给服务器程序的两种主要方法D．表单由两部分组成：一是描述表单的HTML源代码；二是用来处理用户在表单域中输入的信息的服务器端应用程序客户端脚本答案： A2. 下列不是表单域的控件是( ）。

A．单行文本框B．复选框C．下拉菜单D．图文框答案: D3. HTML语言中表单的作用是( ）。

A．显示图像B．设置超链接C．收集用户反馈信息D．显示网页信息答案: C4。

有如下一行代码〈input type=”text”name="txt”〉请问它的功能是（）。

A．创建一个文本框B．创建一个密码框C．创建一个文本域D．创建一个按钮答案： A5.在HTML中，〈form action=?〉，action表示（）。

A．提交的方式B．表单所用的脚本语言C．提交的URL地址D．表单的形式答案： B6。

在HTML中，〈form method=?〉，method表示（）。

A．提交的方式B．表单所用的脚本语言C．提交的URL地址D．表单的形式答案： A7.增加表单的复选框的HTML代码是（）。

A．<input type=submit〉B．〈input type= image 〉C．〈input type=text>D．<input type=checkbox>答案: D8。

增加表单的密码域的HTML代码是（）.A．〈input type=submit>B．〈input type=password〉C．<input type=radio〉D．〈input type=checkbox>答案： B9. 创建选项菜单应使用以下标记符（ ).A．SELECT 和OPTIONB．INPUT 和LABELC．INPUTD．INPUT 和OPTION10。

第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提供了强大的工具进行表格编辑，使网页设计者可以对几乎所有的表格属性进行控制。