网页设计基础-表格与表单

第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.在前端开发中我们最常⽤的就是⽆序列表。

⽆序列表<ul><li></li></ul>有序列表<ol><li></li></ol>⾃定义列表<dl><dt></dt><dd></dd></dl>表格1.创建表格的基本语法<table><tr><td>单元格内的⽂字</td>...</tr>...</table>2.表格的主要⽬的是⽤来显⽰特殊数据的。

3.⼀个完整的表格有表格标签(table)，⾏标签(tr),单元格标签（td）组成，没有列的标签。

4.表格中的属性。

这⾥列举两个⽐较重要的cellspacing、cellpadding。

cellpadding设置单元格内容与单元格边框之间的空⽩间距。

默认为1像素cellspacing设置单元格与单元格边框之间的空⽩间距。

默认为2像素5.合并单元格。

两种⽅式rowspan和colspan，分别是跨⾏合并和跨列合并。

合并单元格的顺序按照先上、后下、先左、后右的顺序。

6.对于⽐较复杂的表格，表格的结构也就相对复杂。

所以⼜将表格分割成三个部分：表格头、正⽂和脚注。

这三个部分分别⽤thead、tbody、tfoot来标注，这样能更好的愤青表格的结构。

7.以上的所有标签都放到table标签中。

表单1.表单的⽬的是为了收集⽤户信息。

2.⼀个完整的表单通常由表单控件、提⽰信息和表单域三个部分组成。

表单控件包含了具体的表单功能项。

单⾏⽂本输⼊框、复选框、提交按钮等提⽰信⼀些说明性的⽂字，提⽰⽤户进⾏填写和操作息表单域容器。

网页设计表格知识点表格是网页设计中常用的一种元素，可以用于展示数据、呈现排版布局、创建表单等功能。

掌握表格的使用方法和相关知识点，对于提升网页设计的质量和效果至关重要。

本文将介绍一些常见的网页设计表格知识点，帮助你理解和运用表格来实现各种设计需求。

一、表格的基础结构在网页设计中，表格的基本结构由行和列组成。

行（Row）是表格中的水平行，用于放置数据或其他内容；列（Column）则是表格中的垂直列，用于对数据进行分类归纳。

表格的交点处形成的小方块被称为单元格（Cell），单元格是表格中的最小单位，用于储存和展示具体的数据。

二、表格的属性设置1. 表格大小和边框样式在网页设计中，我们可以通过CSS样式来设置表格的大小和边框样式。

通过设置width和height属性，可以调整表格的宽度和高度，使其适应不同的页面布局。

同时，也可以通过border属性来设置表格的边框样式，包括颜色、粗细、边框样式等。

2. 表头和表体设置表格通常包含表头和表体两部分。

表头（Table Header）用于呈现表格的标题或说明信息，可以使用<th>标签进行定义。

而表体（TableBody）则用于展示具体的数据内容，可以使用<td>标签进行定义。

通过设置表头和表体的样式，可以使表格看起来更加清晰易读。

3. 合并单元格在一些情况下，我们需要将相邻的单元格合并为一个单元格，以实现特定的设计需求。

在HTML中，可以通过使用rowspan和colspan属性来实现单元格的合并，达到更灵活的布局效果。

三、表格的样式设计1. 表格背景颜色和边框样式通过设置CSS样式，可以为表格添加背景颜色或背景图片，使其与页面整体设计相协调。

同时，还可以调整表格的边框样式，例如设置圆角边框或使用阴影效果，增加表格的美观性。

2. 表格文字和数字样式表格中的文字对于信息的传达非常重要，我们可以通过设置字体、大小、颜色等样式属性，使表格中的文字更加清晰易读。

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

Dreamweaver制作表格和表单表格当初主要用于数据的格式化显示，现在表格更多地用于排列网页中的内容，今天我们就一起来看看在Dreamweaver CS3里如何创建表格，以及如何使用表格对网页中的图文进行布局。

一、什么是表格布局表格布局就是为了精确定位、合理安排网页中的文字、图片等元素，它就像网页的脸面，是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置，从而设计出版式漂亮的页面。

如图1所示，就是一个使用表格布局的页面。

图1 表格布局文字和图片二、表格的使用如果我们要实现如图1所示的表格布局页面，该怎么办？不急！下面就一步一步地实现如图1所示的表格布局页面。

请执行以下步骤：(1) 新建空白文档，然后选择“插入”一“表格”命令，以显示“表格”对话框，如图2所示。

图2 “表格”对话框(2) 输入所需的行数为7和列数为4，选择“百分比”或“像素”为单位的表格宽度。

(3) 在“边框粗细”后的文本框中输入边框宽度，如果不需要显示边框，请将值设为"0"。

(4) 设置“单元格边距”和“单元格间距”。

(5) 设置的相关值如图2所示，然后单击“确定”按钮。

(6) 选中第1行所有单元格，然后右击鼠标选择“表格”一“合并单元格”命令，高度设为34。

同理，合并第3行所有单元格，合并第7行所有单元格，合并第1列第 4行、第1列第5行、第1列第6行这3个单元格，合并第2列第4行、第2列第5行、第2列第6行这3个单元格，合并第4列第4行、第4列第5行、第4列第 6行这3个单元格，合并后的效果如图3所示。

(7) 按图1添加相关文字内容。

(8) 光标定位到第4行第1个单元格里，然后依次选择“插入”一“表单”一“复选框”命令。

(9) 在第1行单元格里插入图片“commodity_tablehead.gif'’。

同理，在相应位置插入图片commodity_huaping.jpg、online_pic.gif和list_tool_favl.gif。