网页设计表格表单及框架.ppt

网页设计表格表单及框架.ppt

《网页设计表格表单及框架.ppt》由会员分享，可在线阅读，更多相关《网页设计表格表单及框架.ppt（37页珍藏版）》请在冰豆网上搜索。

第11页第3章表格、表单及框架b3.1表格表格b3.2表单表单b3.3框架框架第22页3.1表格表格3.1.13.1.1表格的基本结构表格的基本结构用表格显示信息条理清楚，使浏览者一目了然。

表格在网页中还有协助布用表格显示信息条理清楚，使浏览者一目了然。

表格在网页中还有协助布局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格的不同行列中，以制作整齐、清晰的页面。

的不同行列中，以制作整齐、清晰的页面。

HTML具有强大的建立、显示表格的功能。

具有强大的建立、显示表格的功能。

HTMLHTML的表格由行和列组成，的表格由行和列组成，每一行的一个列就是一个单元每一行的一个列就是一个单元格，如右图所示：

格，如右图所示：

创建创建HTML表格需要使用下列标签：

表格需要使用下列标签：

（1）、表格标签对，用于定义一个表格；表格标签对，用于定义一个表格；

（2）、行标签对，用于定义一个行，只能嵌套在表格标签对中行标签对，用于定义一个行，只能嵌套在表格标签对中（3）、单元格标签对，用于定义一个单元格，只能嵌套在单元格标签对，用于定义一个单元格，只能嵌套在行标签对中。

行标签对中。

、中放单元格内容，即要显示的数据。

中放单元格内容，即要显示的数据。

第33页3.1.13.1.1表格的基本结构表格的基本结构【例【例3-1】创建一个简单表格，放一组学生信息。

】创建一个简单表格，放一组学生信息。

简单表格示例简单表格示例学号学号姓名姓名性别性别08003301王明王明男男08003302张鸿张鸿女女第44页常见的表格上面往往有个标题，第一行常见的表格上面往往有个标题，第一行（表头表头）也常常用突出的字也常常用突出的字体体（如黑体、粗体等如黑体、粗体等）等来显示，以突显其内容。

这些在等来显示，以突显其内容。

这些在HTMLHTML表格中表格中可以利用表格下面两个标签来实现可以利用表格下面两个标签来实现：

l标题标签对，用于定义一个表格标标题标签对，用于定义一个表格标题，它只能放在题，它只能放在标签对中，并在标签对中，并在之前。

之前。

的的align、valign属性用于设置标题的对齐方式，取值同属性用于设置标题的对齐方式，取值同，默认在表的上方中间。

默认在表的上方中间。

l要突出某个单元格内容，只要将希望突显内要突出某个单元格内容，只要将希望突显内容的单元格标签对容的单元格标签对、改用表头单元格标签对改用表头单元格标签对、即可，甚至只需要将即可，甚至只需要将改为改为就可以了。

就可以了。

第55页3.1.23.1.2表格的常用属性表格的常用属性1.的常用属性的常用属性属性属性用途用途属性值属性值border设置边框的宽度设置边框的宽度像素像素值，默，默认值为1bordercolor设置边框的颜色设置边框的颜色颜色值，默认值为黑色颜色值，默认值为黑色bgcolor设置背景颜色设置背景颜色颜色值，默认值为白色颜色值，默认值为白色background设置背景图片设置背景图片同页面同页面背景图片设置背景图片设置width设置表格的宽度设置表格的宽度像素值或占窗口的百分比像素值或占窗口的百分比height设置表格的高度设置表格的高度像素值或占窗口的百分比像素值或占窗口的百分比cellspacing设置表格中格子间的空隙设置表格中格子间的空隙像素值像素值cellpadding设置表格的格子中内容与边框间的空隙设置表格的格子中内容与边框间的空隙像素值像素值align设置表格在网页中的位置设置表格在网页中的位置（左左,中中,右）右）left、center、right2.行、单元格的常用属性行、单元格的常用属性属性属性用途用途属性值属性值width设置行或单元格的宽度设置行或单元格的宽度像素值或百分比像素值或百分比height设置行或单元格的高度设置行或单元格的高度像素值或百分比像素值或百分比bgcolor设置行或单元格背景颜色设置行或单元格背景颜色颜色值，默认值为白色颜色值，默认值为白色align单元格中内容的水平对齐方式单元格中内容的水平对齐方式left（默认）、center、rightvalign单元格中内容的垂直对齐方式单元格中内容的垂直对齐方式top、middle（默认）、bottombordercolor设置单元格边框的颜色设置单元格边框的颜色颜色值，默认值为黑色颜色值，默认值为黑色background设置单元格背景图片设置单元格背景图片同页面同页面背景图片设置背景图片设置第66页【例【例3-2】属性设置示例属性设置示例学生表学生表学号学号姓名姓名性别性别08003301王明王明男男08003302张鸿张鸿女女学号学号姓名姓名性别性别08003301王明王明男男08003302张鸿张鸿女女第77页【例【例3-3】设置行及单元格的对齐方式示例】设置行及单元格的对齐方式示例行、单元格的对齐方式行、单元格的对齐方式表头行单元表头行单元2表头行单元表头行单元3表头行单元表头行单元4第第1行行水平右对齐水平右对齐水平水平右对齐右对齐水平右对齐水平右对齐水平中对齐水平中对齐第第2行行水平左对齐水平左对齐水平水平左对齐左对齐水平左对齐水平左对齐水平右对齐水平右对齐第第3行行高高80垂直底对齐垂直底对齐垂直垂直顶对齐顶对齐垂直中对齐垂直中对齐第88页3.1.33.1.3合并单元格合并单元格日常使用的表格中，常有些格子需要跨多行或多列，例如下面的学生表。

日常使用的表格中，常有些格子需要跨多行或多列，例如下面的学生表。

实际上，跨多列的格子就是将一行的多个格子合并到一起，也就是该格子占多列。

实际上，跨多列的格子就是将一行的多个格子合并到一起，也就是该格子占多列。

类似地，跨多行的格子就是将一列的多个格子合并到一起，也即该格子占多行。

于是，类似地，跨多行的格子就是将一列的多个格子合并到一起，也即该格子占多行。

于是，在在HTMLHTML中，就是使用中，就是使用指定单元格占多行或多列来创建跨多行或多列的单元格，指定单元格占多行或多列来创建跨多行或多列的单元格，即合并单元格即合并单元格。

、标签都有指定单元格占的行数或列数的属性：

标签都有指定单元格占的行数或列数的属性：

lcolspn属性属性设置单元格占的列数，默认值是设置单元格占的列数，默认值是1。

例：

例：

，指定单元格占，指定单元格占3列。

列。

lrowspan属性属性设置单元格占的行数设置单元格占的行数，默认值是默认值是1。

例：

例：

，指定单元格占，指定单元格占2行。

行。

第99页【例【例3-4】创建前面所示的学生表表格】创建前面所示的学生表表格学生表学生表基本信息基本信息成绩成绩班级班级学号学号姓名姓名课程课程分数分数计算机计算机一班一班08003301王明王明计算机基础计算机基础9208003302张鸿张鸿85网络网络一班一班08003331李晓娟李晓娟网络编程网络编程7308003332刘刚刘刚90第1010页3.1.43.1.4利用表格布局网页示例利用表格布局网页示例使用表格设计网页格局，布局比较规则、容易，也使网页看上去更加整齐。

使用表格设计网页格局，布局比较规则、容易，也使网页看上去更加整齐。

表格布局中，不同的对象放在各自的单元格中，可以对它们进行不同的处理，表格布局中，不同的对象放在各自的单元格中，可以对它们进行不同的处理，而不用担心不同对象之间的影响。

而不用担心不同对象之间的影响。

【例【例3-5】利用表格布局创建如图所示网页】利用表格布局创建如图所示网页1.1.根据网页中元素设计表格根据网页中元素设计表格网页中有以下网页中有以下66个元素：

个元素：

网页标题网页标题“网页编程学习网站网页编程学习网站”；带学位帽人图片，文件是带学位帽人图片，文件是“a1.gifa1.gif”；装饰条图片，文件是装饰条图片，文件是“a2.gifa2.gif”；竹子图片，文件是竹子图片，文件是“a3.gifa3.gif”；文字文字“如今如今”；文字超链接文字超链接“点击进入点击进入”（为简化为简化,并不真链接并不真链接）。

根据根据66个元素的布局，划分出网格如图个元素的布局，划分出网格如图3-83-8所示。

虽然网页中只有所示。

虽然网页中只有66个元个元素，但有些元素需要占多个单元格，总共需要素，但有些元素需要占多个单元格，总共需要44行。

行。

第1111页根据根据66个元素的布局，个元素的布局，划分出网格如右图所示。

划分出网格如右图所示。

再根据各个元素所占位置，合并相关格子得到再根据各个元素所占位置，合并相关格子得到66个元素的单元格，如右图。

个元素的单元格，如右图。

由上面分析可知，表格结构应该如下：

由上面分析可知，表格结构应该如下：

第1212页2.2.设置表格属性设置表格属性根据各元素的特点和网页的整体布局，可基本定出表格的属性。

根据各元素的特点和网页的整体布局，可基本定出表格的属性。

设置属性后的表格结构如下：

设置属性后的表格结构如下：

3.3.表格填充具体代码表格填充具体代码最后，填入各单元格的具体内容，根据需要修正属性并最后，填入各单元格的具体内容，根据需要修正属性并完善代码。

完善代码。

Cha3-5.htmCha3-5.htm文档最后内容如下：

文档最后内容如下：

网页编程学习网站网页编程学习网站   如今，公司、企业和个人都在建如今，公司、企业和个人都在建设自己的设自己的Web站点，编写自己的站点，编写自己的Web网页。

网页。

HTML正是创建网页的正是创建网页的基础语言。

基础语言。

点击进入点击进入第1313页3.1.53.1.5习题习题1.设计一个表格网页如下图所示，表格宽度占窗口设计一个表格网页如下图所示，表格宽度占窗口100%100%，表头行背景色为，表头行背景色为橙色橙色（orange）（orange）。

2.使用表格布局给自己设计一个主使用表格布局给自己设计一个主页，结构如下图所示，表格宽、高页，结构如下图所示，表格宽、高占窗口占窗口100%100%。

表格的第。

表格的第22行是个装行是个装饰条图片，表格的第饰条图片，表格的第33行是三个超行是三个超链接链接（不必真链接不必真链接）。

第1414页3.2表单表单3.2.13.2.1表单的基本结构表单的基本结构在网页中，除了要向浏览者显示信息外，还常常需要接受浏览者输入的信息，例如需要用在网页中，除了要向浏览者显示信息外，还常常需要接受浏览者输入的信息，例如需要用户注册时，就要收集用户的姓名、地址、电话号码等信息。

表格是用于显示信息的，而表单正户注册时，就要收集用户的姓名、地址、电话号码等信息。

表格是用于显示信息的，而表单正是用来接受用户输入信息的。

是用来接受用户输入信息的。

一个表单要放在表单标签对一个表单要放在表单标签对、之间，中间放置表单输入控之间，中间放置表单输入控件元素或其他内容。

表单的一般格式如下：

件元素或其他内容。

表单的一般格式如下：

表单输入控件元素或其他内容表单输入控件元素或其他内容表单控件元素是用于接受输入的控件，如文本框、提交按钮等。

表单控件元素是用于接受输入的控件，如文本框、提交按钮等。

属性说明：

属性说明：

lmethodmethod设置传送表单数据的方式。

取值为设置传送表单数据的方式。

取值为getget（默认方式）或（默认方式）或postpost。

lactionaction设置处理表单数据的处理程序。

设置处理表单数据的处理程序。

postpost和和getget是两种不同的传送表单数据的方式。

是两种不同的传送表单数据的方式。

getget方法把表单数据附加到浏览器地址栏地方法把表单数据附加到浏览器地址栏地址的后面（信息被显示，不安全）向服务器传送，其长度不能超过址的后面（信息被显