处理 SSI 文件时出错
上一次给大家介绍了body的一些用法，这一次我们主要说段落。
Align属性
语法格式：
其中Align有以下三种选择：
Left(默认值) 文字左对齐
Center 文字居中对齐
Right 文字据右对齐
示例：
|
<html>
<head>
<title>测试Align属性</title>
</head>
<body bgcolor="#ffffff">
<h1 Align="left">文字左对齐</h1>
<h2 Align="center">文字居中</h2>
<h3 Align="right">文字右对齐</h3>
</body>
</html> |
大家在看到上面一段代码的效果之后，肯定会问到一个问题，什么时候可以使用Align bgcolor这些属性。其实在html网页中。大多数段落的标记都能够使用这一属性，像 p Hx 等等。具体方面大家请察看MSDN中的有关说明。
作为段楼的标记 <p>……</p> 也是不可缺少的一部分。写在<p></p>中的代码将会被认为是一个段落，但实际意义并不重大。<br>是换行标记，夹在代码的最后，显示出的网页将自动换行。同样，<nobr>……</nobr> 就是不换行标记，无论你在代码中将文字写为何种形式，都会在一行中显示。
示例：
|
<html>
<head>
<title>段落属性显示</title>
</head>
<body>
<h3>江雪</h3>
<p><nobr>
千山鸟飞绝，万径人踪灭。
孤舟蓑笠翁，独钓寒江雪。
</nobr></p>
<h4>赤壁</h4>
折戟沉沙铁未销，自将磨洗认前朝。<br>东风不与周郎便，铜雀春深锁二乔。
</body>
</html> |
通过浏览器，我们可以看到其中的效果，大家也就能体会到其中的用法。还有一种属性叫做预格式化<pre>……</pre>。请大家看一下下面的例子。
示例：
|
<html>
<head>
<title>预格式化演示</title>
</head>
<body>
<p>卜算子 咏梅</p>
<pre>
驿外断桥边，寂寞开无主。
已是黄昏独自愁，更著风和雨。
无意苦争春，一任群芳妒。
零落成泥碾作尘，只有香如故。
</pre>
</body>
</html> |
通过浏览器看看上面这段代码的产生效果。
小结：这一次我给大家介绍了段落的基本元素，algin p br nobr pre ，大家还要细心体会其中的用法。下次给大家介绍body中的元素的更多用法。
这一次给大家介绍表格的使用方法。
实际上表格也莃ody的一部分，单独提出来介绍，是因为表格在网页制作中显得尤为的重要。我们这里所谓的表格，是广义上的表格。你可以认为这是一个区域，也可以认为是一个拥有边界的常见的表格。
下面这个例子用table元素和其中的thead、tr、th元素建立了一个三行两列的表格。
<TABLE BORDER=1 WIDTH=80%>
<THEAD>
<TR>
<TH>Heading 1</TH>
<TH>Heading 2</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Row 1, Column 1 text.</TD>
<TD>Row 1, Column 2 text.</TD>
</TR>
<TR>
<TD>Row 2, Column 1 text.</TD>
<TD>Row 2, Column 2 text.</TD>
</TR>
</TBODY>
</TABLE>
说明：
这是一段很普通的表格表格代码。我们可以看到其中的主要部分被包含在<table></table>的标签之中。同时，这段代码的主要结构也是由<tr></tr>以及<th></th>和<td></td>组成的。
其中<tr></tr>的作用是定义table中的行，可以粗略地说有几个tr，这个表格中就有几行。我们在上面的代码中看到了一共有三对<tr></tr>，所以这是一个有三行的表格。其中的<th></th>构成了表格头的列（注意这里是表格头的列）。还有就是<td></td>，构成了表格身体的列（注意这里是表格身体的列）。其中两者的区别大家从浏览器的效果中也看到了，默认情况下，<th></th>是表格头，这个元素将其中的文字显示在中间，而且将文字效果变为粗体；而相对应，<td></td>就没有这一效果。但注意，其中的<THEAD></THEAD>与<TBODY></TBODY>则定义了表格中的表格头与表格身体。
下面我来给大家介绍一下表格中常用的元素：
align
这个属性在以前给大家介绍过，作用是确定表格中的文字所属于的边缘。
语法
| HTML |
<ELEMENT ALIGN = sAlign... > |
| Scripting |
object.align [ = sAlign ] |
可调整的值
| sAlign |
String 指定或收到下面的其中一个值。
| left |
排列到最左边的可用空间之中。 |
| center |
排列到可用空间的中间，并不必要的相同于浏览器窗口。 |
| right |
排列到右边的可用空间之中。 | |
background
这个属性的作用是设定背景图案。
语法
| HTML |
<ELEMENT BACKGROUND = sURL... > |
| Scripting |
object.background [ = sURL ] |
可调整的值
| sURL |
String 指定或接收要作为背景图片文件的URL。 |
bgColor
这个属性的作用是设定背景颜色。
语法
| HTML |
<ELEMENT BGCOLOR = sColor... > |
| Scripting |
object.bgColor [ = sColor ] |
可调整的值
| sColor |
Variant 指定或着接收背景颜色的RGB值。 |
border
指定或接收对象周围边界的宽度。
语法
| HTML |
<ELEMENT BORDER = iBorder... > |
| Scripting |
object.border [ = iBorder ] |
可调整的值
| iBorder |
Variant 指定或接收对象边界的像素数值。 |
table中还有很多属性，熟练的运用这些属性能够让你做出更多的更漂亮的表格。但要注意的一点是，在table中，只能应用一次thead和tfoot。通过更多的实例，相信大家会更加深刻体会到table的各种属性。
这一次我来给大家介绍frame的使用技巧：
frame作为html语言中的一部分，在网页制作中占据着重要的地位。大家看到很多网页上都好像windows下的资源管理器一样，在左边点击相应的唇樱冶呔突嵊邢嘤Φ耐诚允尽＞腿缥颐墙胗氏涞氖焙蛞谎Ｕ庑┒际鞘褂胒rame的结果。
下面我来给大家介绍frame的具体使用方法。
使用frame必须首先用frameset来定义，可以说frameset就是frame的一个“统治者”。在html文档中，可以有frameset元素或者body元素，但是绝对不能同时使用这两种元素。
frameset元素的使用：
(1) <html>
(2) <head><title>frameset元素的使用</title></head>
(3) <frameset>
(4) <frame>
(5) <frame>
(6) </frameset>
(7) </html> |
当然了，这个html文档在浏览器上什么也显示不出来。只是告诉大家最基本的frameset及frame的使用方法。
frameset是确定网页分框的定义，其属性rols及rows、border将在下面给大家介绍。
frame是frameset定义的每个“网页分框”的定义，其属性name、scrolling及noresize、marginHeight及marginWidth、frameborder也将在下面给大家介绍。
在本篇文章中，我还要给大家介绍浮动框架、超链接与框架的制作方法。
frameset元素的cols及rows属性
属性说明：cols及rows的作用是设置frame的宽度及高度
(1) <html>
(2) <head><title>frameset元素中cols及rows属性的使用</title></head>
(3) <frameset cols="20%,200,*">
(4) <frame>
(5) <frameset rows="30%,*">
(6) <frame>
(7) <frame>
(8) </frameset>
(9) <frame>
(10) <frame>
(11) </frameset>
(12) </html> |
这段文档的显示效果如下图所示
示例说明：
第三行中的语句cols="20%,400,*" 定义了浏览器中frame的“列数”。20%说明最左边的frame占据整个浏览器宽度的百分比，400说明中间的frame占据整个浏览器的宽度是400个像素，*则说明除去左边和中间的frame以外的地方，其余全部留给最右边的frame。
第4、9、10行的frame是<frameset cols="20%,400,*">语句定义后的每个“框架”的各自定义。同样，第6、7行的frame是<frameset rows="30%,*">语句所定义的“框架”的各自定义。
第二个frameset定义在一个frame之内，大家也从浏览器的结果看来了，横向的“框架”只出现在最中间的列向“框架”之中。
可以试图改变浏览器窗口的大小，就可以看出中间的frame的宽度是始终不变的，大小总是400像素。最左边的frame所占的比例总是总宽度的20%，剩下的宽度就留给了最右边的frame。横向frame同理。
frameset元素的border属性
属性说明：设置frame之间的距离，包括3-D边框
(1) <html>
(2) <head><title> frameset元素中border属性的使用</title></head>
(3) <frameset cols="20%,60%,*" border=10>
(4) <frame>
(5) <frame>
(6) <frame>
(7) </frameset>
(8) </html> |
这段文档的显示效果如下图所示
示例说明：
- 如图，frame之间的宽度现在为10个像素。
- 如果定义border属性的值为0，则在浏览器中将不会看到边界。
- 同样，framespacing也可以设定frame之间的宽度，只不过framespacing设定的是附加的空间。
- 另外：bordercolor属性作用是设定边框的颜色，颜色值为标准RGB颜色值。
frame元素的name属性
属性说明：设置frame的名字
(1) <html>
(2) <head><title> frame元素中name属性的使用</title></head>
(3) <frameset cols="50%,*">
(4) <frame name="left" src="html语言教程1.htm">
(5) <frame name="right" src="html语言教程2.htm">
(6) </frameset>
(7) </html> |
说明：框架的名称并不会影响到框架内显示的内容，名称的作用是指定相应框架链接的显示内容。
frameset元素的scrolling属性及noresize属性
属性说明：
scrolling:决定frame是否可以使用滚动条
noresize:决定frame是否可以改变大小
(1) <html>
(2) <head><title> frame元素中scrolling属性及noresize属性的使用</title></head>
(3) <frameset cols="30%,40%,*">
(4) <frame name="left" src="html语言教程1.htm" scrolling=no>
(5) <frame name="center" src="html语言教程2.htm" noresize=true>
(6) <frame name="right" src="html语言教程3.htm" scrolling=yes>
(7) </frameset>
(8) </html> |
这段文档的显示效果如下图所示
示例说明：
如图，左边的frame使用了scrolling=no的属性，则无论需要显示的页面有多大，都不会有滚动条出现。中间的frame使用了noresize=true属性，这用户不能调整frame的大小（大家可以看到以前例子中的frame是可以调整大小的）。最右边的frame使用了scrolling=yes的属性，在这里大家看得不是很清楚，如果需要显示的页面过小，就是说不需要滚动条也能够显示出全部，则此时最右边的frame也是拥有滚动条的。默认情况下，scrolling的值是auto。
而noresize是一个布尔型的变量，当为true时，不能改变frame的大小；为false时(默认情况)，可以改变frame的大小。
frameset元素的marginHeight属性及marginWidth属性
属性说明：
- marginHeight:设定在显示frame中的文字之前文字距离顶部及底部的空白距离
- marginWidth:设定在显示frame中的文字之前文字距离左右两边的空白距离
(1) <html>
(2) <head><title> frame元素中marginHeight属性及marginWidth属性的使用</title></head>
(3) <frameset cols="50%,*">
(4) <frame name="left" src="html语言教程1.htm" marginHeight=60 marginWidth=30>
(5) <frame name="right" src="html语言教程2.htm">
(6) </frameset>
(7) </html> |
这段文档的显示效果如下图所示
示例说明：
如图，左边的框架中文字与上下底边都有60像素的空间空白，与左右两边都有30像素的空间空白。右边的框架没有使用这一属性，所以就没有空间空白。
frameset元素的frameborder属性
属性说明：决定是否在frame中显示边界
可以使用的值有四个，分别是1、0、no、yes。frameborder值为1或者yes，则会显示框线；frameborder值为0或者no，则不会显示框线。frameborder的默认值为1。
浮动框架的制作
浮动框架，就好像一个文档之中又嵌入了一个文档，或者可以说成是一个浮动的frame。制作这样的文档需要用到iframe元素。iframe基本的语法格式如下
| <IFRAME ID=IFrame1 FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm"></IFRAME> |
需要注意的是iframe与frameset不同，其可以与body元素共同出现在同一篇文档之中。
(1) <html>
(2) <head><title> 浮动框架的使用</title></head>
(3) <body>
(4) <h1>浮动框架的使用</h1><hr>
(5) <iframe name="inside" src="html语言教程1.htm" height=300 width=200 align=right>
(6) </iframe>
(7) <p>右边显示的是《html语言教程1》中的内容。现在就好像是在这个网页中又嵌入了另外的一个
网页。使用的就是iframe元素。这样可以使网页的可视性加强，
对于讲解、说明等特定网页十分适合。</p>
(8) </body>
(9) </html> |
这段文档的显示效果如下图所示
示例说明：
iframe的作用就是在网页中标记出一块区域，使得这块区域可以显示其他内容。iframe元素中的各种常用属性，border、frameBoder、marginHeight、marginWidth、scrolling等，与frame中的用法相同，不再重复。
超链接与框架的制作
经过前面艰苦的学习，下面开始让我们一步一步地制作类似于访问邮箱的网页。
首先：我需要说明个部分的html文件，详见下表：
|
HTML文件 |
说明 |
| main.htm |
主页面，分为左右两个框架 |
| host.htm |
左边框架所显示的内容。用于索引文件之用，点击其中不同的链接，右边框架会显示不同的内容。 |
| html语言教程1.htm |
在右边框架中准备需要显示的内容 |
| html语言教程2.htm |
| html语言教程3.htm |
我在这个例子中，在左边的框架中设定了三个超链接。在右边框架中需要显示的就有三个网页。就是说左边框架中的内容是不会变的，右边框架是真正的“显示区域”，其内容根据左边框架中点击超链接的不同而不同。这样，左边的框架就好像一个目录一样，点击不同的链接，右边框架会显示不同的内容。
下面我来告诉大家各个网页的制作方法。
|
main.htm |
(1) <html>
(2) <head><title>超链接与框架的制作</title></head>
(3) <frameset cols="20%,*">
(4) <frame name="index" src="host.htm">
(5) <frame name="content" src="html语言教程1.htm">
(6) </frameset>
(7) </html> |
|
host.htm |
(1) <html>
(2) <head><title>超链接与框架的制作</title></head>
(3) <body>
(4) <a href="html语言教程1.htm" target="content">html语言教程1</a><br />
(5) <a href="html语言教程2.htm" target="content">html语言教程2</a><br />
(6) <a href="html语言教程3.htm" target="content">html语言教程3</a>
(7) </body>
(8) </html> |
显示出来后的效果如下图所示。
在左边框架中点击不同的链接，可以看到右边框架会显示不同的内容。
同时，可以在“html语言教程1.htm”的最后加入下面的语句：
| <a href="html语言教程1.htm" target="_top">全屏显示</a> |
这样在右边框架中显示的《HTML语言教程1》这篇文档中会出现“全屏显示”字样的文字，点击后即会全屏显示此篇文档。大家不妨自己试一试。
同理，在网页中也可以设定一个浮动框架，点击不同的链接，会在浮动框架中显示不同的内容。原理与这个差不多，请读者自己完成。
关于frame的使用，还有很多我没有介绍到的。请读者自己参考相关资料，完善这方面的知识。
利用frame元素，可以制作出相当漂亮的网页，而且功能齐全。这全部依赖于大家的基础知识以及创作灵感！
