Document

Download Report

Transcript Document 

第1章 网页制作基础
主要内容
• Internet及Web的概念
• 超文本标记语言
• 常用的主页制作工具
学习要求
•了解Internet及Web的概念；
•熟悉HTML文档格式和常用标签；
•了解常用的主页制作工具
本章目录
1.1 Internet信息服务
1.2 超文本标记语言
1.2.1 第一个HTML文档
1.2.2 文字修饰与布局
1.2.3 加入其它网页元素
1.2.4 框架
1.2.5 使用表单
1.3 主页制作工具
本章习题
1.1 Internet信息服务
• http://www.baidu.com/
?
HTTP(HyperText Transmission
Protocol超文本传输协议)
1.1 Internet信息服务
• Internet(因特网)是一个通过网络设备把世
界各国的计算机相互连接在一起的计算
机网络。
• 在Internet上，人们可以利用任何两台支
持TCP/IP网络协议的计算机进行通信。
• Internet还支持多种流行的程序，包括
World Wide Web。
World Wide Web
• World Wide Web(万维网)是在因特网上运
行的全球性分布式信息系统，它是一个
抽象的信息场所，在这个场所中，包含
了几十乃至几百万台通过超文本传输协
议（HTTP）提供信息服务的Web服务器，
当用户使用浏览器向这些服务器发出请
求时，服务器将把响应信息发送给浏览
器，最后由浏览器解释并显示。
协议
• 所谓协议是指计算机通信所使用的语言
和规则。具体地如规定通信双方的操作
过程，每次交换数据使用的数据格式等
等。
• 常用的协议有FTP和HTTP等
FTP协议
• FTP(File Transfer Protocol文件传输协议)，
用于将文本、二进制文件和图形从一台
计算机传输到另一台计算机，有了它，
你可以将编写好的网页传送到能被其它
用户访问的Web服务器上。
HTTP协议
• HTTP(HyperText Transmission Protocol超
文本传输协议)用于定义在Web浏览器和
Web服务器之间如何传送数据。
Web服务器和浏览器
• 任何一台使用的计算机可能是一台Web
服务器，也可能是一台安装有浏览器的
普通计算机（客户机），这取决于这台
计算机中安装了什么程序，以及这台计
算机接入到Internet的接入方式 。
• 通常一台机器可以同时承担两者的任务。
Web服务器
• 一台安装有Web服务器程序的计算机可
以成了Web服务器，它向其它机器或程
序提供Web访问服务。
• 常用的Web服务器程序有IIS和Apache等，
它们使用在不同的操作系统环境中。
浏览器
• 指计算机上安装的一个程序，通过它及
相应的硬件设备，可以向Web服务器发
出请求，从而得到相应的服务。
• Microsoft的Internet Explorer（简称IE）是
一般常用的浏览器。
Web出版
• 把一些文字、图片、声音等内容组织成
一个或多个Web文档，放置在Web服务器
上，供用户在能与该服务器相连的机器
上访问，这一过程称为Web出版。
Web出版的方式
• 主要有两种，一种是建立一个独立的
Web服务器，这需要较高的代价，另一
种是在其它服务器上开辟一个空间，通
过链接的形式来访问你的Web页。
返回本章目录
1.2 超文本标记语言
• 超文本
– 一般把通过在文本中插入链接把相关文本组织在一
起而形成的文档称为超文本(hypertext)。通常超文本
使用超文本标记语言来描述。
• 超文本标记语言
– 超文本标记语言(HyperText Makeup Language，简称
HTML)是一种用来创作万维网页面的描述语言，它
使用HTML标签来定义文档的格式、组成和链接关
系，供浏览器解释执行。
1.2 超文本标记语言
• HTML标签
– 所谓HTML标签，由3部分组成：左尖括号“＜”，
“标签名称”，和右尖括号“＞”。标签通常是成
对出现的，分别称为“开始标签”和“结束标签”，
结束标签的左尖括号后加一个斜杠符号“/”。
• 定义属性
– 在各种HTML标签中，常常还可以定义一些属性，
这些属性用于指出文档元素的一些特性，如背景颜
色、字体大小、对齐方式等，指定文档元素属性的
附加信息一般放在相应的“开始标签”中。
1.2.1 第一个HTML文档
• 本小节按以下顺序讨论：
–
–
–
–
举例
文档一般格式
说明
调试方法
1.举例
• 程序代码
<html>
<head>
<title>我的第一个WEB页</title>
</head>
<body bgcolor="WHITE">
正文内容写在这里......
</body>
</html>
1.举例
• 操作方法
将上述代码用文本编辑器或其他专门的主
页制作软件输入并保存为一个扩展名为htm
或html的文件后，在文件夹窗口双击该文件
图标，就可看到浏览结果了。
1.举例
• 浏览结果
点击这里
测试一下
2.一般形式
<html>
<head>
头部
</head>
<body>
主体部分
</body>
</html>
网页开始标签
头部标签
网页主体标签
网页结束标签
3.说明
• <html>…</html>开始和结束标签
• <head>…</head>头部信息，可以包含标
题(title)，媒体环境(meta)等说明信息,客
户端脚本也可放在这一部分。
• <body>…</body>网页主体部分。
3.说明
• <body>标签可以设置一些属性，形式为：
<body bgcolor=#rrggbb text=#rrggbb link=#rrggbb
alink=#rrggbb vlink=#rrggbb>
• 其中：
–
–
–
–
–
bgcolor背景颜色
text 非链接文字的颜色
link 链接文字的颜色
alink正被点击的链接文字的颜色
vlink 已经点击(访问)过的链接文字的颜色
3.说明
• 如果要使用背景图像，语法为：
<body background=“图片文件名”>
• 在HTML文档中，不区分英文字母的大
小写，对于标签中的属性值，一般可以
不加引号，只有当属性值中包含空格或
一些其它符号时，引号才是必须的。
特别说明
• 按照Web标准，网页中三个部分，即结
构、表现和行为应该相互分离。因此，
像body中的颜色设置和背景图片设置均
属于表现部分内容，应分离出来，即
<body>标签中不应有属性设置。
• 以后的内容中，对Web标准中不推荐的
内容将用红色文字加以说明。
调试HTML代码
• 总有一些时候会忘了输入某些代码或敲错某些符
号，这时Web页可能会变得非常滑稽。通过反复
的浏览，比较出现的效果与预想效果的不同点，
从中发现存在的错误，这一过程称为调试。
对于文件类型为htm的文
件，都可以通过浏览器
窗口中的“查看”=》
“源文件”来打开源文
件进行修改，保存后再
在浏览器窗口点击刷新
按钮即可。
调试HTML代码
• 常见的错误有标签名称书写错误、标签的属性
书写错误、结束标签遗忘或书写错误等。如例
1-1第3行中若结束位置的</title>遗忘了或写成
<title>，则在窗口的标题栏中将看到不正确的
内容。只要仔细观察显示结果，不难发现其中
的错误。
点击这里测试一下
看看你能找到其中
的错误吗？
返回本章目录
也许点击后没有看到浏览器窗口，
这时可按ATL-TAB进行切换，继
续放映前请关闭浏览器窗口。
1.2.2 文字修饰与布局
1.修饰方法
–
–
–
–
–
标题文字
文字大小
文字颜色
定义字体
标记文字
2.文字布局
–
–
–
–
段落
换行
文字对齐
预格式化文本
1.修饰方法
• 标题文字 (Header)
– 指使用<h>标签将某些文字设置成标题，形
式如下：
<hn>作为标题的文字</hn>
– 其中n为1到6的数字，根据n的大小不同，将
显示出不同大小的黑体字。h1最大，h6最小。
标题文字独立占一行，不受段落标记的影响。
1.修饰方法
• 文字大小 (font size) Web标准中不推荐
– 指使用<font>标签的SIZE属性设置文字的大小。形
式如下：
<font size=n>需显示成n号大小的文字</font>
– 其中：n=1,2,3…7。
size的默认大小为3，在此基础上，可以用-2，-1，0，
+1，+2，+3或+4代替n。即+1代表4。
另外，可以用<basefont size=n>指出缺省字符大小，
用<big>或<small>来指出字符相对于周围字符的大
小。
1.修饰方法
点击这里
观看例子
• 文字颜色(font color) Web标准中不推荐
– 指使用<font>标签的color属性设置文字的颜色。形
式如下：
<font color=#rrggbb>文字</font>
– 其中：rrggbb为16进制值，表示组成颜色的RGB三
原色的对比关系，对常用的颜色，可以使用名称来
代替式中的“#rrggbb”，对应关系为：
Black(000000),Olive(808000),Red(ff0000),Blue(0000F
F),Maroon(800000),Navy(000080),Gray(808080),Lime
(00ff00),Fuchsia(ff00ff),White(ffffff),Green(008000),P
urple(800080),Silver(C0C0C0),Yellow(ffff00),Aqua(0
0ffff)。
1.修饰方法
• 定义字体(font face) Web标准中不推荐
– 指使用<font>标签的face属性设置文字的字
体。形式如下：
<font face=“字体”>需设置字体的文字
</font>
– 其中：字体为Arial、Times、宋体、楷体等。
– 值得注意的是，当别的机器访问你的网页时，
在浏览器上是否能按照你所设置的字体显示，
取决于浏览器所在的机器中是否安装了相应
的字体。
三种文字的修饰方法有一个共同点就是
都使用标签<font>把要修饰的文字括起来，
所不同的是使用不同的属性，即：
–size表示大小
–color表示颜色
–face表示字体
通常这几个属性可以同时使用，例如要用
6号大小红色显示“动态网页”这几个字时，
形式如下：
<font size=6 color=Red>动态网页</FONT>
1.修饰方法
• 标记文字 Web标准中不推荐
– 对于文字还有一些常用的修饰，即加粗、斜体和加
下划线等。对此，HTML中设计了几个独立的标签，
使用形式如下：
<B>需要加粗的文字</B>
<I>需要显示成斜体的文字</I>
<U>需要添加下划线的文字</U>
– 以上三个标签可重叠使用。如：<B>动态<U>网页
</B><I>制作</I></U>，将使“动态”两字加粗显示，
“网页”两字加粗并加下划线，“制作”两字显示
成斜体并加下划线。
修饰举例
• 网页内容
<html><head>
<title>文字的修饰</title>
</head>
<body>
<h1>这是标题字体h1</h1>
<h6>这是标题字体h6</h6>
<p><font size=5 face="楷体">这是大小为
<big>5<small>的楷体字</font></p>
<p>本教材讨论的是：<b>动态<u>网页</b><i>制作</i></u>
<p><font color=#ff0000>这是红色的文字</font>
</body>
</html>
修饰举例
• 浏览结果
点击这里
测试一下
同其他例子一样，
在抓取屏幕图形
时已将窗口缩小。
2.文字布局
• 段落<p> 属于结构描述的内容
–段落是文档的基本单位，在HTML中可以使
用<p>标签来指定文档中具有独立意义的段
落，通过设置段落标签的某些属性可以控制
段落的对齐方式。浏览器在显示时，一个段
落的前后将留有较大的空隙，也可以说相当
于有一个空行。
2.文字布局
• 换行<br> Web标准中推荐格式<br />
– 一个段落中可以包含多个行，可以使用<br>
标签来强制文字换行。一般情况行与行之间
的间隔比段与段之间的间隔要小。
– 注意：如果不使用段落标签指出从哪里开始
新的一段或一行，那么显示时文本就会连成
一整块，而不管你在源文件中输入了多少个
回车符。一般情况根据浏览器窗口的宽度，
当一行太长时，会自动换行。
点击这里
测试一下
2.文字布局
• 文字对齐
– 可以以段落为单位设置文字的对齐方式，形
式如下：
<p align=对齐方式>文字</p>
– 其中：对齐方式有left、center和right，分别
表示左对齐、居中对齐和右对齐。默认为
left表示左对齐。标题文字也有相应的属性，
使用形式为：
<Hn align=对齐方式>标题文字</H>
2.文字布局
• 文字对齐
– 如果需要将文字或其它对象居中对齐，也可
以使用<center>标签，形式如下：
–
<center>要居中的文字或对象</center>
– 注意：标题不能作为段落的一部分，也不受
段落标记的影响。
2.文字布局
• 预格式化文本
– 当需要按照源文件输入时的格式来控制换行
时，可以使用预格式化文本标签<pre>，使
用形式如下：
<pre>
点击这里
这里是多行文本
测试一下
</pre>
– 注意：用这一标识符标识的文本不能随浏览
器窗口的宽度大小而自动换行，这在低分辨
率显示器上使用是很不方便的。
返回本章目录
1.2.3 加入其它网页元素
• 网页中除了一般的文字外，通常还有一些其它
对象，如线条、图片、表格等。
• 要在HTML中插入各种对象，通常需要指出三
个内容：即标签名称、标签属性及提示信息。
• 以下分别进行讨论：
1.插入水平线
2.加入超级链接
3.加入图像
4.插入表格
1.插入水平线
• 有时为了较明显地划分上下各部分的内容，在
文档中间加入一些水平线，使用形式如下：
<hr width=“宽度” align=“对齐方式” size=“高度”>
• 其中：hr为标签名称，它指出插入的元素为一
个线条。width、align和size都是线条的属性，
其右侧为该属性对应的值。式中的宽度可以是百
分比，表示占屏幕宽度的百分比，如“90%”,也
可以是屏幕的象数点个数，如“222”。对齐方
式可以是Left(左对齐)，Center(中间对齐)及
Right(右对齐)。高度为点数。
水平线举例
• 网页内容
<html>
<head>
<title>水平线</title>
</head>
<body>
<h2>这里是标题</h2>
<hr width="90%" align="center">
这里是正文内容……
</body>
</html>
水平线举例
• 浏览结果
点击这里
测试一下
2.加入超级链接
• 使用超文本标记语言来编写网页的主要
原因是网页的内容中常常需要使用超链
接，通过超链接，用户可以简单地用点
击某些文字来转向到其它网页或本网页
的其它位置。根据需要转向的位置不同，
超级链接的形式有所不同。
1) 链接到其它地址
• 形式：
<a href=“链接地址”>提示文字</a>
•例如：
<a href="http://cn.yahoo.com">雅虎中文</a>
•作用：
用于链接到其它网站或本网站的其它网页
2) 链接到本页的其它地方
•形式：
<a href=“#位置名称”>提示文字</a>
•其中：位置是命名的一个地方，命名形式为：
<a name=“位置名称”>内容</a>
•例如：
<a href="#喜">喜</a>
•作用：
当同一个网页中包含较长的内容时，用此方式转移到目
标位置
3) 链接到其它地址的某一地方
•形式：
<a href=“链接地址#位置名称”>提示文字</a>
•这种方式是上述两种方式的结合
4) 在新窗口打开链接
•形式：在Web标准中不推荐
<a href=“链接地址” target=“窗口名称”>
•用于打开一个新的窗口显示指定网页的内
容，当使用框架时一般要使用这种形式，
有关内容参见后面内容。
超链接举例
•网页内容：
<html><head><title>超级链接</title></head><body>
友情链接：
<a href="http://cn.yahoo.com">雅虎中文</a>
<a href="http://www.netease.com
target="Windows_name">网易</a>
<h2>我家的生活</h2>
--<a href="#喜">喜</a> <a href="#怒">怒</a>
<a href="#哀">哀</a> <a href="#乐">乐</a>全都
有
<p>有人说："生活像一条长长的路，崎岖蜿蜒。"有人说："生
活像一束鲜花，带来了希望和成功。"有人说："生活像一个
多彩的梦，是由红、橙、黄、绿编织而成。"可是我说："生
活不是梦，不是画，它有苦也有乐......“</p>
超链接举例
•网页内容：（续）
<p><a name="喜"><h3>喜</h3></a>
有一年放暑假前夕，我去学校领《小学生手册》。我刚拿到手册
时，提心吊胆的，担心成绩不理想，就急忙把它翻开来看。
语文九十八分，数学九十七分。"太好了!"我激动得喊了出来。
于是......妈妈看着我点了点头，满意地笑了。我望着妈妈
满意的笑容，心中不由想起几个月之前的一件事来。</p>
<p><a name="怒"><h3>怒</h3></a>
那是一个狂风怒吼的阴天。"任浩数学七十六分!"老师紧皱着眉
头，来到我身边，说："这次你是怎么考数学的?好好查查原
因!"天才知道我是怎样回到家的。一进门，妈妈便笑眯眯地
走出来迎接我，可她看了我的成绩单......妈妈和我谈了两
个小时。我心里才轻松了些。</p>
<p><a name="哀"><h3>哀</h3></a>
超链接举例
•网页内容： （续）
今天，我们家接到了老家来的电报，说家里发洪水，要求我们立
即支援。我们得到消息后，充满阳光的生活变得灰蒙蒙的，
全家都为这突然发生的事感到哀愁，不愉快。爸爸妈妈商量
后便寄去了几百块钱和姐姐小时候的衣服给叔伯们。同时爸
爸还准备回家去看看。谁知......全家看完了电报，都十分
高兴，家中的一丝阴云，又飞散了。</p>
<p><a name="乐"><h3>乐</h3></a>
"夫人，请--"爸爸调皮地向妈妈做了一个邀请动作。
"哈哈--"我们都笑了起来。妈妈白了爸爸一眼，从容地站了起
来。奇怪，那步子既准确又合拍，把我们都看呆了。
......
欢笑声和歌声交织在一起，随着微风传出窗外......</p>
</body></html>
超链接举例
•浏览结果
本例浏览时，首先显示如图
单击“怒”字显示如
单击“雅虎中文”将
图
转到雅虎中文网站，
显示如图所示
点击这里
测试一下
3.加入图像
•使用图像的作用
图片是网页的一个重要组成部分，显示在网
页上的任何东西都可以用图像来实现，如特
殊字体的文字、线条分隔符等。图片可以使
页面更直观、更漂亮。但由于图片文件有较
多的字节，在网络上传送需要较长的时间。
3.加入图像
•方法
–要在网页的某个位置放置一个图像，使用<img>标签，
形式为：
<img src=“文件名” width=宽度 height=高度 alt=“提示文
字” />
–其中：src属性指出显示的图片的文件名。常用的图
像文件格式为gif和jpeg格式。width和height分别指出
图片显示的宽度和高度，以像素点为单位。alt属性后
面的“提示文字”指出当图片文件不存在时，或当鼠
标移动到该图片上方时系统给出的提示内容(Web标准
中要求alt是必须的）。
–使用border属性可为图像加边框。
加入图像举例
•网页内容
<html><head>
<title>图片的例子</title>
</head><body>
<img src=nju.jpg width=780
height=80 alt=“欢迎光临南京大学” />
</body>
</html>
加入图像举例
• 浏览结果
点击这里
测试一下
• 注意：本例中使用的图片文件一定要放
在和网页文件相同的目录中。
3.加入图像
•图像的对齐方式
–使用img标签的align属性，可指出图像的对
齐方式。形式为：
＜img align=“对齐方式” />
–其中：对齐方式有top、middle、bottom、left
和right等几种。分别表示顶端对齐、中间对齐、
底部对齐、左边对齐和右边对齐等。
图像对齐方式举例
• 网页内容
–
–
–
–
–
–
–
–
–
–
<html><head>
<title>图像和文字的对齐</title>
</head><body>
<img src=tu.jpg />默认对齐方式<br />
<img src=tu.jpg align="top“ />top对齐方式<br />
<img src=tu.jpg align="middle“ />middle对齐方式<br
/>
<img src=tu.jpg align="bottom“ />bottom对齐方式<br
/>
<img src=tu.jpg align="left“ />left对齐方式<br />
<img src=tu.jpg align="right“ />right对齐方式
</body></html>
图像对齐方式举例
•浏览结果
为了验证本例，首先
要找到一个图片文件，
改名为tu.jpg放入与
网页文件目录中，再
双击该网页文件，显
示结果如图
点击这里
测试一下
3.加入图像
•用图像实现超链接
–在超链接的显示文本区放入图像，可让用户
通过点击图像实现超链接。形式为：
<a href=“链接目标”> <img
件”></a>
src=“图片文
–这是网页中使用超链接和使用图片的结合，
两者都可以设置各自的属性。如超链接的显示
目标，图片的对齐方式等。
用图像实现超链接举例
•网页内容
<html><head>
<title>用图像建立链接</title>
</head><body>
<a
href="http://cn.yahoo.com"><img
src="yahoo.gif"></a>
</body></html>
用图像实现超链接举例
•游览结果
点击这里
测试一下
4.插入表格
•要在网页中插入一个表格，需要用到一组标签，
分别表示整个表格的属性、表格中一行的属性和
表格中一列的属性。定义表格的有关标签如下：
–<table>…</table>：定义一个表格的开始和结束
–<tr>…</tr>：定义表格中一行的开始和结束
–<th>…</th>：定义表格中一个显示表头的单元格
–<td>…</td>：定义表格中某行的一个单元格的开
始和结束，其中省略号表示具体的数据
4.插入表格
•一个简单的表格例
<html>
<head><title>简单表格</title></head>
<body>
<table border=1>
<tr><th>姓名</th><th>年龄</th></tr>
<tr><td>张三</td><td>18</td></tr>
<tr><td>李四</td><td>20</td></tr>
</table>
<body>
</html>
点击这里
测试一下
表格常用属性
• 本部分对照例子讨论以下内容：
表格边框
表格和表项的大小
表元间隙
表元内部空白
对齐方式
背景颜色和背景图
像
表格常用属性
(1) 设定表格边框
– 标签<table>的border属性用于设置表格边框
的宽度，范围为1到4，设为0时或无此项时
表格没有边框。在IE浏览器中，这
一属性值的大小影响到
外边框的阴影宽度，取
值不限，如图是设置值
为30时的情况。
表格常用属性
(2) 设定表格和表项的大小
形式：<table width=宽 height=高>
其中：宽和高可以是数值，表示像素点个数，也
可以用百分比，表示占窗口大小的比例。例：
<table width=80%>
表示表格宽度占窗口宽度的80%,当用户调整窗口
大小时表格会随之改变。
对于<td>和<th>也有width和height属性，其设置
意义相同
表格常用属性
(3) 设定表元间隙
形式：＜table cellspacing=n>
其中：n为像素点个数，在IE浏览器中，反映
了实际的表格线宽度，
图中设为10点时的情况，
表格线的颜色和表格
背景颜色相同，图中为
红色(RED)。
表格常用属性
(4) 设定表元内部空白
形式：<table border cellpadding=n>
该属性用于设定单元格中的文字离开表格线的
距离，图中设为20点，
当单元格宽度不足以容
纳文字时，会自动换行，
如图中的第2和第3列。
表格常用属性
(5) 设定表格和表项的对齐方式
形式：＜table align=“对齐方式”>
其中：对齐方式可以是left、center和right。这一
属性指出宽度不是100%的表格在窗口中的位置。
例中设置为center，即表格离窗口两边的距离相
等。
另外， <tr>、<td>和<th>标签也有align属性，它
反映的是表格中的内容的对齐方式。
表格常用属性
(6) 在表格中加入图像(Web标准中不推荐）
用bgcolor可以设置整个表格的背景颜色或某一
行或某一列的背景颜色。
用background属性可指定一幅图像作为表格或单
元格的背景图片，请参见例子。
表格常用属性举例
•网页内容
<html><head><title>表格示例</title></head>
<body>
<table border=30 width=95% cellspacing=10
cellpadding=20 align=center bgcolor=red>
<tr bgcolor=green>
<th width=50%>星期一</th>
指定表格中第一
<th align=left>星期二</th>
行内容
<th>星期三</th>
</tr>
表格常用属性举例
•网页内容
<tr height=50%>
<td BACKGROUND="tu.jpg">MON</td>
<td align=center>TUE</td>
<td>WED</td>
</tr>
</table>
</body>
</html>
表格中第
二行内容
表格常用属性举例
•浏览结果
点击这里
测试一下
表格其它属性
本部分对照例子，
讨论以下内容：
表格的标题
垂直方向的对齐
多列合并和多行合并
单元格中使用超链接
表格其它属性
(7) 表格的标题
紧接着<table>标签的下一行，可以设置表格的
标题，形式如下：
<caption align=bottom>标题内容</caption>
其中：align属性指出
标题相对于表格的位置，
可以取top或bottom分别表
示标题在表格的上方或下
方，缺省值为上方。
表格其它属性
(8) 多列合并和多行合并
通过设置th或td标签的colsPAN属性，可以让一个单元
格占用表格的几列，形式如下：
<td colspan=n>单元格内容</td>
其中：n为列数。如例中所示。
同样可以通过rowsPAN属性，
让一个单元格占用表格的几行，
形式如下：
<td rowspan=n>单元格
内容</td>
表格其它属性
(9) 垂直方向的对齐
对于<td>、<th>和<tr>标签，都有一个指出垂直
方向对齐方式的属性valign，其取值为top、
bottom和middle，分别表示顶端对齐，底端对
齐和中间对齐。
表格其它属性
(10) 单元格中使用超链接
在<td>和</td>所界定的单元格内容中，可以使
用超链接，如例中：
<td><a href="http://www.yahoo.com">上网
</a></td>
表格其它属性举例
•网页内容
<html><body>
<table border>
<CAPTION align=bottom>课 程 表</CAPTION>
<tr><th colsPAN=2>时间</th><th>星期一</th><th>星期二
</th><th>星期三</th>
<tr>
<td rowsPAN=2 width=10% height=100 Valign=top>上午</td>
<td>1-2节</td><td>数学</td><td>语文</td><td>英语</td>
<tr align=center>
<td>3-4节</td><td>语文</td><td><a
href="http://www.yahoo.com">上网</a></td>
<td>数学</td>
</table></body></html>
表格其它属性举例
•浏览结果
点击这里
测试一下
表格的其它应用
•另外，单元格的内容可以是另外一个表格，这
时就构成表格的嵌套。表格的嵌套在实际的网页
中经常出现，如需要在网页中显示左右两个表格
时，就需要设计成表格嵌套形式，外层的表格一
般不设置边框线。
•表格还常常用于排列页面中的内容，嵌套的表
格更能灵活地用于进行页面的布置。如果在表格
中不使用边框，可以使页面看上去象正常文本一
样，或者是文本与图像的组合。
返回本章目录
1.2.4 框架
• 使用框架可以将一个浏览器窗口分成几
个部分，而每个部分可独立地装入一个
网页文件，可以将分成的每个部分称为
窗格。这样，可以在一个窗格中显示目
录列表，而在另一个窗格中显示选中的
文档内容，较好地体现出文档的层次结
构。
1、一个简单的框架
• 以下来实现如图的框架式网页
在本例中，共有3个网页文件，其中一个文件主要用于说明
框架的组成形式，各部分的大小比例及显示的文档名称。而
另外两个网页文件是实际显示在框架的窗格里的内容。
1、一个简单的框架
• frameset标签
以下先看网页文件一（设文件名为L1_10.html）
<html>
<head><title>一个简单的框架</title></head>
<frameset rows="100%" cols="50%,50%">
<frame src="L1_10a.HTML">
<frame src="L1_10b.HTML">
</frameset>
</html>
左边显示的是网页文件
L1_10a.HTML的内容
frame标签
frameset标签
• frameset标签规定窗口的划分方式，形式如
下：
<frameset rows="100%" cols="50%,50%">
• 其中：rows属性指出上下的划分比例，cols
属性指出左右的划分比例，例中表示两部
分各占50%。也可以指出多个数据，用逗号
分隔。用“*”表示剩余部分。如：
cols=“*，20%”相当于cols=“80%，20%”
cols=“20%，*，40%”相当于cols=“20%，40%，40%”
frame标签
•标签<frame>指出显示在窗格中的文档名称
及窗格的名称。一般形式如下：
<frame src=“网页名称” name=“窗格名称”>
•注意：在网页“文件一”中，不应该使用
<body>标签。
1、一个简单的框架
• 网页文件二（设文件名为L1_10a.html）
<html><body>
这是页面A
</body></html>
•网页文件三（设文件名为L1_10b.html）
<html><body>
点击这里
这是页面B
测试一下
</body></html>
2、框架使用形式
•使用框架，需要用到以下标签：
–<frameset>…</frameset>：指出各窗格的大小分
配
–<frame src=“url”>：指出窗格中的文档，及窗格
的名称
–<noframeS>…</noframeS>：当浏览器不支持框架
时的显示信息。
•另外，frameset标签可以嵌套使用。
3、窗口划分
•将一个窗口分成左右排列的多个窗格：
<frameset cols=“25%,25%,50%”>
<frame src= “网页文件二”>
<frame src= “网页文件三”>
<frame src= “网页文件四”>
</frameset>
3、窗口划分
•将一个窗口分成上下排列的多个窗格：
<frameset rows=20%,30%,50%>
<frame src="网页文件二">
<frame src="网页文件三">
<frame src="网页文件四">
</frameset>
3、窗口划分
•混合划分
使用框架的嵌套可以将整个窗口先进行上下划分，再
对其中的某些部分左右划分。或进行相反顺序的处理。
请看例子
窗口划分举例
•网页文件内容（只列出文件一内容）
<html>
左右分成
<head>
两部分
<title>纵横排列多个窗口</title>
</head>
<frameset cols=20%,*>
<frame src="L1_11a.HTML">
<frameset rows=40%,*>
<frame src="L1_11b.HTML">
<frame src="L1_11c.HTML">
</frameset>
</frameset>
右边部分再分
</html>
成上下两部分
点击这里
测试一下
4、各窗口间相互操作
•通过对窗口的命名，结合超链接，可以实现窗
口间的相互操作。请看例子：
窗口间相互操作例
•网页文件一：
<html>
<head>
<title>各窗口间相互操作</title>
</head>
<frameset cols=30%,*>
<frame src="L1_12a.HTML">
<frame src="L1_12b.HTML"
name="HELLO">
</frameset>
</html>
窗口间相互操作例
•网页文件二：（显示在左边窗格中的网页文件）
<html>
<head><title>各窗口间相互操作</title></head>
<body>
<a href="L1_12b.HTML" target="HELLO">第一章
</a><br />
<a href="L1_12c.HTML" target="HELLO">第二章
</a><br />
<a href="L1_12d.HTML" target="HELLO">第三章
</a><br />
<a href="L1_12e.HTML" target="HELLO">第四章
</a><br />
</body></html>
窗口间相互操作例
•网页文件三（开始时显示在右边窗格中的网页文
件，其它文件形式类似）
<html>
<body>
这里是第一章内容<br />
…………
</body>
</html>
窗口间相互操作例
•浏览结果
点击这里
测试一下
返回本章目录
1.2.5 使用表单
• 表单为Web页的设计者提供了一种在Web
中实现双向通信的方法。通过表单可以
获得用户提交的信息。
（一）表单的一般形式
•表单使用的一般形式为：
＜form action=“url” method=get(或post)>
表单域的定义
</form>
用<form>标签括起来的整个内容称为表单。
•在form标签中可设置的几个常用属性为：
（1）action属性 (2)method属性 (3)name属
性
（一）表单的一般形式
(1)action属性
指出当表单提交时由哪个网页或程序接
收表单域中输入的信息。
一种方式是将信息发送到邮箱，例如：
action=“mailto:[email protected]”
另一种方式是指出某个用ASP编写的网
页文件来接收该信息，对此将在第7章中讨
论。此项省略时表示不发送信息。
（一）表单的一般形式
(2) method属性
指出表单信息的发送方式，其值有get和
post两种，关于两种方式的不同点，将在第
7章中进行深入的讨论。
（一）表单的一般形式
(3) name属性
指出表单的名称。可供客户端脚本中使用和接
收表单信息的程序中使用。
例如：
<form action=“abc.asp” method=get
name=myform>
在一个网页文件中可以包含多个表单， 这时给
每一个表单加以命名，将方便于后面的操作。
（二）表单域
• 表单中出现的一些供用户输入或选择信息的地
方称为表单域。根据表单域输入信息类型的不同，
表单域的形式也有所不同，最常见的是用<input>
标签引导的表单域，其一般形式为：
<input type=类型 name=名称>
• 其中：类型属性(type)说明表单域的具体类型，
它的值可以是text(文本框)、password(密码框)、
checkbox(复选框)、radio(单选框)、hidden(隐藏对
象)、submit(提交按钮)、reset(复位按钮)等。当表
单被提交时，表单域的名称和值一起发送到服务
器。
（二）表单域
以下分别对各种不同类型表单域的使用方
式作一讨论：
1、文本框和密码框
2、复选框和单选框
3、下拉列表框和滚动列表框
4、文本区域
5、隐藏表单的元素
1、文本框和密码框
•文本框和密码框都用<input>标签指出，文
本框类型用text指定，密码框类型用
password指定，除了都有名称(name)属性外，
文本框和密码框都有value（初始值）、
size（显示的长度）、maxlength（允许输
入的最大字符数）等属性，Maxlength属性
缺省时，表示不限制用户输入字符的个数。
文本框和密码框的不同点在于密码框中输
入字符时显示成“＊”。
文本框和密码框举例
•网页内容
这里不发送给任何
对象
文本框
<html><body>
<form method=get>
你的姓名：<input type=text name=姓名 SIZE=8><br
/>
你所在部门：<input type=text name=部门 value=计算
机系><br />
密码：<input type=password name=密码
maxlength=10><br />
<input type=submit value="发送">
<input type=reset value="重设">
密码框
</form>
</body></html>
文本框和密码框举例
•浏览结果
点击这里
测试一下
2、复选框和单选框
• 复选框和单选框也是用<input>标签来指定，复
选框的类型用checkbox表示，单选框类型用radio
表示，复选框和单选框都可以用checked标识设置
初始状态(选中还是没有选中)，另外可以用value属
性设置当选中时发送的值，若value缺省时，将用
“on”作为值发送。
• 多个复选框可以有相同的名称，这时，其值将
形成一个数组。一组单选框应该具有相同的名称。
复选框和单选框举例
•网页内容
三个单选框
<html><body>
<form method=get>
<input type=checkbox name=蔬菜>白菜
<input type=checkbox name=荤菜
checked=“checked”>鱼
<input type=checkbox name=点心 value=蛋糕>蛋糕<P>
<input type=radio name=饮料>牛奶
<input type=radio name=饮料 checked=“checked”>咖
啡
<input type=radio name=饮料 value=雪碧>雪碧<P>
<input type=submit><input type=reset>
三个复选框
</form>
</body></html>
复选框和单选框举例
•浏览结果
点击这里
测试一下
3、下拉列表框和滚动列表框
• 下拉列表框和滚动列表框都用<select>标
签指出，它们都有名称属性(name)，对
于滚动列表框用size属性指出同时列出的
选项个数，用multiple标识说明该列表框
中是否可以同时选择多项。列表框中列
出的每一个选项用＜option>标签来指出，
例中给出了三种常见的形式。
下拉列表框和滚动列表框举例
•网页内容
下拉列表框
<html><body><form method=get>
请选择部门：
<select name="bm">
<option >计算机专业
<option value="网络" selected=“selected”>网络与通
讯专业
<option value="多媒体专业">多媒体专业
</SELECT><br />
请选择现有职位：
<select name="zw" multiple size=3 >
滚动列表框
<option selected>主任
<option value="秘书">主任秘书
<option value="组长">组长
</select><br />
<input type=submit value="提交">
</form></body></html>
下拉列表框和滚动列表框举例
•浏览结果
点击这里
测试一下
4、文本区域
• 使用文本区域可以让用户输入较多的文
本，使用形式如下：
＜textarea name=“名称”cols=列数 rows=行数
>初始文本</textarea>
• 注意：文本区域没有Maxlength属性。
文本区域举例
•网页内容
<html>
<body>
<form method=get>
<br />请在下面的文本区域中输入你的简历:
<br /><textarea name="jl" cols=40
rows=10></textarea><br />
<input type=submit value="提交">
</form>
</body>
</html>
文本区域举例
•浏览结果
点击这里
测试一下
5、隐藏表单的元素
• 用类型为hidden的表单域可实现网页间信
息的传递。隐藏域有name属性和value属性
分别用于记录该域的名称和值。当表单提
交时，这种类型的域的内容将和其它元素
一样发送到服务器中。
隐藏表单的元素举例
•网页内容
<html>
<head><title>隐藏表单的元素</title></head>
<body>
<form method=get>
<input type=hidden name=add
[email protected]>
这里隐藏了一个表单元素。<P>
<input type=submit><input type=reset>
</form>
点击这里
</body>
测试一下
</html>
返回本章目录
1.3 主页制作工具
•要想制作出理想的网页，需要使用一个好
的工具，尤其是对于具有丰富内容的网页
来说，色彩的搭配、对象的布局等都是非
常重要的，而要做到这些，没有一个可视
化的设计环境，是很难做到的。
•一个好的制作环境，还能为编写代码提供
必要的帮助。
1.3.1 FrontPage
•FrontPage是一种所见即所得的主页制作软
件，通过它可以象操作WORD那样轻松地
完成一个网页的设计。在FrontPage中还提
供了许多模板，让使用者方便地构成整个
站点的框架，提高了制作效率。
•在普通视图中，你可以输入文字，插入图
片，设计制作表格，之后在HTML视图中，
可以观看相应的HTML代码。最后，还可
以使用预览观看实际显示结果。
1.3.1 FrontPage
•FrontPage的编辑界面如图1-20所示。
1.3.2 DreamWeaver
•DreamWeaver是一套针对专业网页开发者
的可视化网页设计工具，它采用所见所得
的操作界面，并能同时管理多个站点。在
学习本课程的有关实例时，使用
DreamWeaver可以方便地调试ASP脚本。
1.3.2 DreamWeaver
•DreamWea
ver的运行
界面如图
所示。
1.3.3 Microsoft InterDev
•InterDev是一个集成的网页开发环境，它是
面向代码的，在这一环境中，可以方便地书
写HTML代码或ASP脚本，它能提供必要的
帮助，对于每一种标签，都能显示出它的所
有属性，以及该对象可编写的事件过程等。
• 建议在学习本课程，尤其是在学习第7章开
始的内容时使用这一开发环境。
1.3.3 Microsoft InterDev
•InterDev
的工作界
面如图122所示。
返回本
章目录
思考题
1．HTML页的基本结构是什么样子的？
2．创建一个可以链接到http://www.microsoft.com的
页面，并且用插入的一张图片实现链接。
3．在HTML页面上如何实现左对齐、右对齐和居中
对齐？
4．请模仿[例1-9]的形式自己制作一张课程表。
5．把窗口分成三个部分的框架通常要设计几个网
页文件？为什么？
6．请设计一个用于输入一般个人信息的表单。
7．用#rrggbb的形式固然可以组成各种不同
的颜色，但对常用的颜色有一个名称使用
起来还是方便的，你想知道plum是什么颜
色 吗 ？ 还 有 “ gold”、“hotpink”、
“midnightblue”、“khaki”、“chartreuse” 等 ，
也不妨试一下。
8 ． < input> 标 签 一 定 要 出 现 在 < form> 和
</form>标签之间吗？
返回目录