目录 2
1.网页表格制作
2.网页表格装饰
3.网页元件设计
4.网页按钮
3.表格与表单 (组件 )
3 表格与表单
表格标签使用在网页中可是个重量级的角色,不要以为表格只是用
来填写格式化的 数据,其实表格最重要的功能是用来“排版”!虽
然有很多“所见即所得”的网页编辑软件提供你快速建立各种样式
表格的功能,但是在 ASP程序中却是毫无用武之处,因此,学会表
格标签的使用就显得非常重要了。
3- 1 网页表格制作
网页表格标签:要制作网页表格必须使用到三组标签,分别是<
TABLE>< /TABLE>、< TR>与< TD>< /TD>,我们在纸上绘制表
格,通常都是先画表格最外围的大方框对吧,在网页表格的制作上
也是一样,我们必须先使用< TABLE>< /TABLE>这组网页标签来
定义表格的方框。
定义表格行数,完成表格大方框的制作后,
接着就要制定表格的行数(画横线),
要定义表格行数则必须使用< TR>< /TR>这组网页标签。
定义表格列数,要定义表格列数(画直线)则必须使用< TD><
/TD>这组网页标签。
说明
☆于网页中先定义表格的外框< TABLE>< /TABLE>标
签,border属线为定义表格框线的粗细,数值越大框
线越粗。
☆在< TABLE>< /TABLE>标签之间加入行标签< TR>
< /TR>,这样就可以产生我们的标题栏位,接着在<
TR>< /TR>中加入三组< TD>< /TD>标签这样可将
行切成三份,然后分别在三组< TD>< /TD>标签中填
入数学、自动控制原理、传感器技术,这样就完成了
表格标题制作。
☆分数列请依法炮制。
☆标准的网页表格制作就是这么容易,请大家自己练
习制作一个 3× 3的表格吧!
例 1
<html>
<head>
<title>2X3网络表格
</title>
</head>
<body>
<table border="1">
<tr>
<td>高等数学 </td>
<td>自动控制原理 </td>
<td>传感器技术 </td>
</tr>
<tr>
<td>80</td>
<td>90</td>
<td>85</td>
</tr>
</table>
</body>
</html>
例 2<html>
<head>
<title>3X3网络表格 </title>
</head>
<body>
<table border="3">
<tr>
<td>高等数学 </td>
<td>自动控制原理 </td>
<td>传感器技术 </td>
</tr>
<tr>
<td>80</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>5学分 </td>
<td>4学分 </td>
<td>2学分 </td>
</tr>
</table>
</body>
</html>
3- 1- 1 合并列
制作标准网页表格(九宫格)是简易的事,但若是我们的表格并不是那么规矩时该怎么
处理?这个时就可以利用定义表格列数< TD>网页标签的,COLSPAN”属性。
如果希望将数据栏位修改一下,则我们必须使用合并列的功能,格式:< COLSPAN=
“合并列数”>。
3- 1- 2 合并行
既然 COLSPAN属性是< TD>网页标签专属的属性只能合并左右栏位,那如果要有一个
跨行的数据格该怎么办?要建立一个跨行的数据格则必须使用,ROWSPAN”属性,利用
上一个合并列的例子修改而成,我们在科目的左方再加上一个“成绩列表”的数据格,
同时这个数据必须直跨三行,我们先来看看原始代码:
在原始代码中,我们可以发现跨列的 COLSPAN属性值变成 3,为什么就成 3?因为我们加
入了一个跨越三行的数据格栏位,因此就变成每一行都有三栏之故。
接着我们在第二行中加入跨越三行的数据格栏位的标签语句< td rowspan=”3”>成绩列
表< /td>,其他的都没有变动。
注意
虽然我们的“成绩列表”数据格是直跨三行的,但是我们只要在第二行中加入< td
rowspan=”3”>标签语句就好,其余的行都不用加了,因为< tdrowspan=”3”>标签语
句就代表了我们建立的数据格栏是向下跨越三行了,千万不要再画蛇添足,否则将会有
错误的情形产生。
<html> 例 3
<head><title>合并行与列 </title></head>
<body>
<table border="1"><tr>
<td colspan="3">自动化专业 2000级学生平均成绩列表
</td>
</tr>
<tr><td rowspan="3">2003年考试成绩列表 </td>
<td>高等数学 </td><td>78</td></tr>
<tr>
<td>自动控制原理 </td><td>95</td>
</tr><tr>
<td>传感器技术 </td><td>85</td></tr>
</table>
</body>
</html>
3- 2 网页表格装饰布置
最基础的表格呈现就是它那外围的大框框,也就是< TABLE>标
签的,border” 属性设置。
指定表格框线< TABLE BORDER=“数值”>
BORDER属性值越大,表格的外框线越粗,当然你也可以把它设
置为 0,这们就没有表格的外框线了。
范例
3- 2- 1 表格框线颜色设置
指定表格框线颜色
< TABLE BORDERCOLOR,颜色值”>
BORDERCOLOR属性的颜色值大多使用 RGB16进制的颜色码来设置,
例如要设置为红色,则颜色码就是“# FF0000”,当然你也可
以用英文单句,RED” 来替代了。
范例
例 4 <html>
<head>
<title>表格框线设置
</title>
</head>
<body>
<table border="5">
<tr><td>高等数学
</td><td>自动控制原理
</td><td>传感器技术
</td></tr>
<tr><td>80</td><td>90
</td><td>85</td></tr>
</table>
</body>
</html>
例 5 <html>
<head>
<title>表格框线颜色设置
</title>
</head>
<body>
<table border="2"
bordercolor="#ff0000">
<tr><td>高等数学 </td><td>
自动控制原理 </td><td>传感
器技术 </td></tr>
<tr><td>80</td><td>90</td>
<td>85</td></tr>
</table>
</body>
</html>
3- 2- 3 表格背景图片设置
指定表格背景图片
< TABLE BACKGROUND=“图片文件名”>
注意,表格标签的 BACKGROUND属性值是链接一个图片文件,如
果图片与网页本身不是位于同一个目录下,我们就要再指定图
片文件的路径。
范例
3- 2- 4 表格宽度设置
< TABLE WIDTH=“宽度设置”>
表格标签的 WIDTH属性是用来设置表格宽度,其宽度的设置分为
像素或百分比,使用百分比来设置宽度,则表格的宽度会随着
显示画面的大小自动调整宽度,若使用像素为单位来设置,则
表格的宽度不会随着显示画面的大小而调整宽度。
例 6<html>
<head>
<title>表格背景颜色设置
</title>
</head>
<body>
<table border="2"
bordercolor="#ff0000"
bgcolor="yellow">
<tr><td>高等数学
</td><td>自动控制原理
</td><td>传感器技术
</td></tr>
<tr><td>80</td><td>90
</td><td>85</td></tr>
</table>
</body>
</html>
例 7 <html>
<head>
<title>表格背景图片设置
</title></head>
<body>
<table border="6"
background="0C.gif">
<tr><td>高等数学 </td><td>
自动控制原理 </td><td>传感
器技术 </td></tr>
<tr><td>80</td><td>90</td
><td>85</td></tr>
</table>
</body>
</html>
3- 3 网页表单制作
表单无法独立于网页程序之外(例如 ASP),但是网页
程序的数据仁慈传递又非得靠表单不可,因此,网页
表单的地位在网页程序的写作上扮演着非常、非常重
要的角色。
表单只是一个统称,表单其实还包含了很多的表单组
件,例如:单行文字输入框、单选按钮等,光有表单
是没用的,表单内必须还有表单组件的存在才有意义。
在本章节中,我们将就各个表单组件做个介绍,至于
表单与网页程序的互动就留到实作演练的章节再谈吧。
3- 3- 1 送出与清除按钮
送出与清除按钮是最常见的表单组件,尤其是送出按
钮,一旦按下送出按钮,则浏览者在网页填写的数据
就会送交表单所指定的网页程序进行处理。清除按钮
的用处其实不大,按下清除按钮会将浏览者在表单相
关栏位中所填写的数据清除,方便浏览者重新填写数
据。
送出与清除按钮组件具有下列属性:
NAME,指定按钮组件的名称 (对于送出与清除按钮可省
略该项属性设置 )
TYPE,指定组件的类型 (送出按钮为” SUBMIT”,清除
按钮为” RESET”)
VALUE,出现在按钮组件上的文字
在表单中布置送出与清除按钮
例 8<html>
<head>
<title>表格宽度设置
</title>
</head>
<body>
<table border="2"
background="0B.gif"
width="500">
<tr><td>计算机原理
</td><td>动态网页设计
</td><td>工业总线
</td></tr>
<tr><td>80</td><td>90</t
d><td>85</td></tr>
</table>
</body>
</html>
例 9
<html>
<head>
<title>发送与清除按键
</title>
</head>
<body>
<FORM>
<INPUT TYPE="SUBMIT"
VALUE="发送 ">
<INPUT TYPE="RESET"
VALUE="清除 ">
</FORM>
</body>
3- 3- 2 单行文字输入框
NAME,指定单行文字输入框组件的名称 (一定要写,是与 ASP程序相
对应的变量名称 )
TYPE,指定组件的类型,将属性设定为” TEXT”,就代表加入的元件
是单行文字输入框
VALUE,默认出现的文字输入框内的文字内容,
MAXLENGTH,设置单行文字输入框内可输入的数据长度
SIZE,设置单行文字输入框外观宽度
3- 3- 3 密码输入栏位
NAME,指定密码输入栏位组件的名称 (一定要写,是与 ASP程序相对
应的变量名称 )
TYPE,指定组件的类型,将属性设定为” PASSWORD”,就代表加入的
元件是密码输入栏位
VALUE,默认出现的密码输入栏位的文字内容,实际出现的是” *”
星号,无意义,
MAXLENGTH,设置密码输入栏位内可输入的数据长度
SIZE,设置密码输入栏位外观宽度
例 10
<html>
<head>
<title>单行文字框
</title>
</head>
<body>
<FORM>
请你在下列栏中填写住址
<BR>
<INPUT TYPE="TEXT"
VALUE="填写数据 "
NAME="ADDRESS">
</FORM>
</body>
</html>
例 11
<html>
<head>
<title>密码输入栏
</title>
</head>
<body>
<FORM>
请输入你的密码 <BR>
<INPUT TYPE="PASSWORD"
NAME="INWORD">
</FORM>
</body>
3- 3- 4 多行文字输框
NAME,指定多行文字输框组件的名称 (一定要写,是与 ASP程序相
对应的变量名称 )
COLS:设置多行文字输框需要显示的列数
ROWS:设置多行文字输框需要显示的行数
3- 3- 5 单选式选择钮
NAME,指定单选式选择钮组件的名称 (一定要写,是与 ASP程序相
对应的变量名称,若有多个单选式选择钮,则每个单选式选择钮
的属性值都必是相同的,以便构成群组关系,)
TYPE,指定组件的类型,将属性设定为” RADIO”,就代表加入的
元件是单选式选择钮
VALUE,默认出现的单选式选择钮的数值内容,
CHECKED,设置单选式选择按钮组件是否预先核取
注意
选择钮只有单选的功能,也就是说表单中全部的选择钮栏位只
有一个能生效,不能复选,虽然名称都相同,但是表单传送出
去的选择钮“值”却是不同的。
例 12
<html>
<head>
<title>多行文字输入栏
</title></head>
<body>
<FORM>
请认真填写你的意见
<BR>
<TEXTAREA COLS="30"
ROWS="3" NAME="MEMO">
</TEXTAREA>
</FORM>
</body>
</html>
例 13
<html><head>
<title>单选式选择键 </title>
</head><body>
<FORM>
请选择你喜欢的职业 <BR>
<INPUT TYPE="RADIO"
NAME="JOB" VALUE="计算机信息
业 " CHECKED>计算机信息业
<INPUT TYPE="RADIO"
NAME="JOB" VALUE="化学工程 ">
化学工程 <INPUT TYPE="RADIO"
NAME="JOB" VALUE="信息控制工
程 ">信息控制工程
</FORM>
</body>
</html>
3-3-6 复选式核取钮
NAME,指复选式核取钮组件的名称 (一定要写,是与 ASP程序相对应的变量名称,若
有多个复选式核取钮,则每个复选式核取钮的属性值都必是相同的,以便构成群组
关系,)
TYPE,指定组件的类型,将属性设定为” CHECKBOX”,就代表加入的元件是复选式
核取钮
VALUE,默认出现的复选式核取钮的数值内容,
CHECKED,设置复选式核取钮组件是否预先核取
3- 3- 7 下拉式选单
“下拉式菜单”组件是在 Frontpage编辑器中称呼,一般我们都称它为“下拉式
选单”,下拉式菜单就是将所有备选的项目集中起来放在一个独立的栏位中,使
用者只能“选”,不能输入!要产生一个下拉式选单,只要利用 Html标签<
SELECT Name=,选单名称”>就可以创造出一个下拉式选单,但是选单内总要
有选项吧!所以我们还得利用< OPTION Value=,选项值”>标签来建立备选的
项目。
NAME,指定下拉式选单项目的名称 (一定要写,是与 ASP程
序相对应的变量名称 )
VALUE,默认出现的下拉式选单的数据内容,
SIZE,设置下拉式选单的显示项目数量
例 14 <html>
<head>
<title>复式核取键 </title>
</head>
<body><FORM>
请选择你喜欢的音乐类型 <BR>
<INPUT TYPE=,CHECKBOX”
NAME=,MUSIC” VALUE=“摇
滚” >摇滚 <INPUT
TYPE="CHECKBOX"
NAME="MUSIC" VALUE="爵士 ">
爵士
<INPUT TYPE="CHECKBOX"
NAME="MUSIC" VALUE="古典 ">
古典
</FORM>
</body>
</html>
例 15<html>
<head>
<title>下拉式选单名 </title>
</head>
<body>
<form>
你所学的专业是 <p>
<select name="下拉式选单名 ">
<option value="1自动化 ">自动化
</option>
<option value="2电气工程及自动化
">电气工程及自动化 </option>
<option value="3计算机应用 ">计算
机应用 </option>
<option value="4电子信息 ">电子信
息 </option>
</select>
</form>
</body>
</html>
● 下拉式选单的变形
下拉式选单除了单栏的显示方式外(单行文字框加下拉列表按
钮),它还可变成含有上下移动列表按钮的选择区块,变形的
方法是增加下拉式选单的 Size属性设置,例如下例:
● 可复选的下拉式菜单
下拉式选单通常都是只能选取一个备选项目,但是如果题目是
可以多重选择的例如让浏览者选取他喜欢的休闲项目,那我们
该如何处理?
要让下拉式选单具有多重选取(复选)的功能,我们必须为下
拉式选单组件再加入一个 MULTIPLE属性设置!
提示
1,当 Size属性的设置与备选项目的数目相同时,则下拉式选单
就变成了, 选项列表,,例如上例中我们将 Size属性值设为 4,
而备选项目的数目刚好也是 4,所以下拉式选单就变成了选项列
表。
例 16 <html>
<head>
<title>下拉式选单变形 </title>
</head><body>
<form>
你所学的专业是,<p>
<select Size="2" name="下拉式选单
变形 ">
<option value="1自动化 ">自动化
</option>
<option value="2电气工程及自动化 ">
电气工程及自动化 </option><BR>
<option value="3计算机应用 ">计算机
应用 </option>
<option value="4电子信息 ">电子信息
</option>
<option value="4电子测量与应用 ">电
子测量与应用 </option>
</select></form>
<IMG SRC="bg.gif">
</body>
</html>
例 17<html>
<head>
<title>下拉式选单特例 </title>
</head><body>
<form>
你所喜欢的休闲活动是,<p>
<select Size="6" MULTIPLE
name="下拉式选单特例 ">
<option value="1上网聊天 ">上网聊
天 </option>
<option value="2健美操 ">健美操
</option>
<option value="3玩电子游戏 ">玩电
子游戏 </option>
<option value="4徒步旅游 ">徒步旅
游 </option>
<option value="5打扑克 ">打扑克
</option>
<option value="6看电影 ">看电影
</option></select>
</form></body>
</html>
综合练习
制作一个网页,内容如下:
1:姓名、系部、专业、
2:个人爱好。(三项以上)
3:所学课程的成绩表单。(三门以上)
4:个人喜欢的业余活动构成的下拉式选单。(三项以
上)
5:别人对你看法的单选式按键(二项)
6:插入必要的图画及艺术字。
发到 EMAIL地址为:
kalu03@vip.sina.com
kanglu04a@sina.com
操作平台 IIS与 PWS
单机上的浏览器无法打开我们所设计的动态
网页,我们必须通过有能力打开 ASP动态网页
的网络服务器模拟机构 PWS (Personal Web
Server) 或 IIS (Internet Information
Server )来建立我们 ASP动态网页设计的操
作平台。就将安装 PWS或 IIS模拟机制的软件
WINDOWS 98/95 安装 PWS4.0
WINDOWS 2000/XP 安装 IIS 5.0