正在浏览栏目导航：首页 > 网页设计学院 > HTML/CSS

HTML语法教学(下)

时间:2007-12-14 16:07:11 来源: 作者:

【表格栏位对齐位置设定】

我可以自己设定表格的大小吗？当然可以，您可以自由设定表格的“宽”及“高”喔！我们来制作一个宽100、高60的表格，做法如下：
原始码呈现结果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE>
1
哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然可以，只要在<TD>加入 ALIGN=CENTER 这参数即可：
原始码呈现结果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER>1</TD></TR>
</TABLE>
1
此外，利用 ALIGN=RIGHT可以让表格中物件置右、利用 ALIGN=LEFT可以让表格中物件置左（预设值），至于为什么要加在<TD>中呢？因为，<TD>是一个栏位的意思，我们要指定在这栏位中的东西要置中或置左置右，就必须将ALIGN加在<TD>中。
既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用 VALIGN=TOP 这种属性即可让表格内物件靠上方对齐。
原始码呈现结果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
</TABLE>
1
利用VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），VALIGN=BOTTOM可以H让表格中物件靠下方。

【表格背景、底色设定】

那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方法：
原始码呈现结果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
将BGCOLOR="颜色码"加在<TR>中，可以指定“一列”的背景颜色：
原始码呈现结果
<TABLE BORDER="1" >
<TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
将BGCOLOR="颜色码"加在<TD>中，可以指定“一栏”的背景颜色：
原始码呈现结果
<TABLE BORDER="1" >
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要将BACKGROUND="图片名称"加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，您也可以指定某栏或某列的背景图片：
原始码呈现结果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
将BACKGROUND="图片名称"加在<TD>中，可以指定“一栏”的背景颜色：
原始码呈现结果
<TABLE BORDER="1">
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4

【表格框线设定】

如何设定表格粗细？只要利用BORDER="粗细值"就行了。
原始码呈现结果
<TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>
1
如何设定表格颜色？只要利用BORDERCOLOR="颜色码"就行了。
原始码呈现结果
<TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>
1
另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮面设定） BORDERCOLORDARK="颜色码"（暗面设定）就行了。
原始码呈现结果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>
1

【表格栏距设定】

我们可以利用CELLPADDING属性自由设定表格内文距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为2，不过我建议设定为4比较漂亮。
原始码呈现结果
<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2
我们可以利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2，不过我通常习惯设为 0 。
原始码呈现结果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2

各位会发现，奇怪，在上面的语法中，怎么都没见到<BODY></BODY>熟悉的身影？呵呵...没错，它已经被待会儿要加进去的<FRAMESET></FRAMESET>标签给取代了！也就是说，如果我们要分割画面，就要先用<FRAMESET>标签告诉电脑说：‘喂！我要开始分割了！’此时，<BODY>是派不上用场的，所以躲到一旁凉快去了！

现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图：

原始码

呈现结果

在<FRAMESET>中，我们要告诉电脑到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成<FRAMESET COLS="120,*" >。COLS="120,*" 就是说，左边那一栏强制定为 120点，右边则随视窗大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"也是可以的。

然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。如下图：

原始码

呈现结果

看见了没？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 点的语法中）被另一组<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二组<FRAMESET ROWS="100,*" >是被第一组<FRAMESET COLS="120,*" >所包围起来的喔！（乱七八糟了对不对？）

呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰！当然，这是一个最阳春的分割法，我会再将一些进阶的标签在底下一一说明。

【其他标签参数说明】

<FRAMESET COLS="120,*" frameborder=0 framespacing=5>
COLS="120," 就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS="30,,50" （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！ ROWS="120,*" 就是横向切割画面，也就是将画面上下分开，切法同上。 frameborder=0 设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。 framespacing=5 表示框架与框架间的保留空白的距离，以免看起来太挤。
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>
SRC="a.htm" 设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚） NAME="1" 设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。 frameborder=0 设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。 scrolling="no" 设定是否要显示卷轴，YES是要显示卷轴，NO是无论如何都不要显示，AUTO是视情况显示。 noresize 设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。 marginhight=2 表示框架高度部份边缘所保留的空间。 marginwidth=2 表示框架宽度部份边缘所保留的空间。

【相关用法】

◆ <noframe>

使用方法：<noframe>请换有支援Frame功能的浏览器</noframe>
标签解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此标签，让这些网友知道，该换换浏览器了。或者，你也可以在这标签中，摆上没有Frame语法的网页标签，那么，没有支援Frame功能的浏览器，便会自动显示没有Frame语法的网页。

◆ target=框窗名称

使用方法：<A HREF="d1-1.htm" target=3>显示内容</A>
标签解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框窗名称就行啦！

◆ target=_top

使用方法：<A HREF="http://www.kimo.com" target=_top>奇摩站</A>
标签解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个荧幕啦！

4.13 其他技巧 <回细说索引>

■ 网页配色及背景音乐

首先是网页的底色，通常是白白的，要怎么做变化呢？可以做自己的背景图片。
要注意一点，如果背景和文字颜色一样～或者颜色相近，天啊～那谁知道你在写什么呀？最好文字与背景颜色有对比，像敝人当初，网页背景是黑的，字是白的红的，就可以很明显的突显出文字。如果图片中有文字，也要尽量淡化，否则影响内容就不好啰！
内容的东西颜色要配的适宜（除非你想要有奇怪的风格），不然像背景大红大红，太刺眼了，有人会想去吗？剩下的就让您自己配配看吧！
然后是音乐，有人喜欢用bgsound标签
<bgsound src="music.mid">
可是用NetScape看就没有声音了最好用embed标签 <embed src="music.mid">
这样就可以正常播放了唷～

■ 首页应有的特质及重要性

About Open Page：打开browser看到网站的第一个部份，有人称之为Open Page(通常是首页的一半或三分之一)，这个部份应该包含网站的主功能(亦即使用者上这个网站最希望或者最可能做的事)，ex. 一进入Allproducts.com即可看到“Key word search”及“Search by category”，应该尽量避免让使用者还要使用mouse上下左右拉才能看到他(她)所想要的功能或资讯，有时资讯太多，在不得已的情况下，页面可以往下沿申，但切忌右左划面过大，不符一般人的使用习惯，也会造成列印上的困扰。
主题明确：Open Page应包含公司Logo、网站主题(最好是一段简短的Slogan，让使用者一看就知道这个网站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)
Navigation：让使用者很明确了解他(她)目前在网站的什么地方(或功能)，首页上应该有主要功能的连结，各个icon如果可能的话，尽可能加上一些纯文字的说明及link；至于icon或者link的摆放亦应有其相对应的逻辑，如与整个网站或大架构较为相关的，放在较外层，与目前执行的功能或页面较为相关的link应该放在内层；另外，最好能在首页上提供Site Map的连结，让使用者可以很快了解网站的架构；所有的link应该把握 intuitive , obvious , fast的原则。
Color or image：对于颜色的采用，应该考虑到该网站的特性及与其它相关网站的区别，特别是首页的颜色配置，应该让使用者感觉很舒服、没有压迫感，但又不失其专业性，但切忌过度追求美感而牺牲其功能性，就公司目前的网站设计理念，应该是功能性的考量优于纯美术的考量，首页的设计最好设定在60k以内，而且不要用太多层的table。
Meta tag：该部份不会出现在前端的页面上，但网站规划时应该将该部份一并考量，做为网站登录时使用，网站上线时务必将相关资料加入。
其它：首页上应该有service account 及联络资料

■ Meta Tag 的简介

一般常用的格式如下：

<Title>All Products Online</title>
这虽说不是meta的一部份，但是也不可忽略，总长度不要超过85个Character (约10个字)。
<meta http-quive="content-type" content="text/html; charset=iso-8859-1">
说明网站的格式及编码方式，另外这个功能也可以拿来说明网站的名称。
<meta name="keyword" contents="关键字一, 关键字二, 关键字三, …..">
铲明整个网站的关键字，关键字间用逗点隔开，总长度最好不要超过1000个Character (约44个字)。
<meta name="description" contents="整个网站的描述….">
铲明整个网站为何吸引人的地方，可用逗点隔开，总长度最好不要超过200个Character (约15个字)，若文章真的太长，可以切割成两个部分，较不重要的部分置入下一个Description。
<meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW">
此功能是要给搜寻引擎使用的，是要用来告诉Spider哪些网页是要去撷取的或不用去撷取的，一般都设定成All(内定值)。