在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。

另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。

 

1. 使用方法：<img src="boy.gif" alt="本站特约模特儿" align=right border=0 hspace=2 vspace=2 height=56 width=32>

    

2. 标签解说：目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而jpg格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用jpg格式来呈现。

    

3. 使用范例：

   基本用法	用法：<img src="图档名称、路径"> 显示图片最基本的方法（就是不加任何属性啦！）其中 boy.gif 就是图档的档名。
   原始码	<img src="images/G-FASE4.GIF">嗨！我是本站的模特儿喔！
   呈现结果	嗨！我是本站的模特儿喔！

   长宽设定	用法：<img src="图档" height="高度" width="宽度"> 设图片的大小，其实不用设也可以，但是有设更好，可以加快浏览速度，因为浏览器就不用在那边花时间算您的图片有多大啦！此外您也可以自己随意设定图片大小。
   原始码	<img src="images/G-FASE4.GIF" height=32 width=32>
   呈现结果

   加上说明	用法：<img src="图档" alt="说明文字"> 滑鼠一到图上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段字代替，让使用者知道这个未显示出来的图片究竟是干嘛用的。
   原始码	<img src="images/G-FASE4.GIF" alt="本站特约模特儿">移到图上看看。
   呈现结果	移到图上看看。

   图片位置	用法：<img src="图档" align="位置"> 图片位置设定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文绕图’的效果。
   原始码	<img src="images/G-FASE4.GIF" align=right>嗨！我往右边靠！
   呈现结果	嗨！我往右边靠！
   原始码	<img src="images/G-FASE4.GIF" align=left>嗨！我往左边靠！
   呈现结果	嗨！我往左边靠！
   原始码	<img src="images/G-FASE4.GIF" align=top>文字对齐我头顶！
   呈现结果	文字对齐我头顶！
   原始码	<img src="images/G-FASE4.GIF" align=bottom>文字对齐我脚底！
   呈现结果	文字对齐我脚底！
   原始码	<img src="images/G-FASE4.GIF" align=middle>文字对齐我中间！
   呈现结果	文字对齐我中间！
   原始码	<img src="images/G-FASE4.GIF" align=absmiddle>文字对齐我绝对中间！
   呈现结果	文字对齐我绝对中间！

   边框设定	用法：<img src="图档" border="边框粗细"> 设定边框大小，通常都设成 0 感觉比较美观啦！因为内定的框框实在是不怎么漂亮....。尤其在连结时，设框框简直是丑毙了...。
   原始码	<img src="images/G-FASE4.GIF" border="4">
   呈现结果

   左右间距	用法：<img src="图档" hspace="离左右物件的距离"> 离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
   原始码	左边的字<img src="images/G-FASE4.GIF" hspace="15">右边的字
   呈现结果	左边的字右边的字

   上下间距	用法：<img src="图档" vspace="离上下物件的距离"> 离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
   原始码	上面的字<br><img src="images/G-FASE4.GIF" vspace="15"><br>下面的字
   呈现结果	上面的字 下面的字

   由于此网页有用css控制版面图文，故在netscape下观看，会稍有不正确。

 

1. 关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻着您的路径去找到该有的图片，所以，我们来看看该如何正确的使用路径。有些人并不喜欢将网页及图通通放在同一个目录下，比如说有人将图档全放在c:\images里，而网页档放在c:\demo里，这样子的话，我们该如何正确的写图片的路径呢？我将几种常见的情形整理成下表：
   

   html档的位置	图档的位置	写法	情形说明
   c:\demo	c:\demo	<img src="tad.gif">	图文均在同一目录
   c:\demo	c:\demo\images	<img src="images/tad.gif">	图在网页下一层目录
   c:\demo	c:\	<img src=" ../tad.gif">	图在网页上一层
   c:\demo	c:\image	<img src=" image/tad.gif">	图文在同一层但不同目录

   或许有人看到不明就理，我来说明一下，“../”是回到上一层目录的意思。“images/”则是进入下一层目录image之意，而“images/”的意思就是，回到上一层目录，然后再进入目录images中。以上我们使用的均为“相对路径”的概念。

    

2. 影像单位：或许您会常常看到px这个单位，没错，这是我们在制作最常用的一个单位了。这个单位完整的写法是“pixels”，我们称之为“像素”。像素，是萤幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，萤幕本身十五寸，不会因为你的任何设定而变成十七寸。但是，其解析度是可以改变的，我们常见的解析度有以下几种：“640 ×480”、“800 ×600”、“1024 ×768”。举其中之一的640 ×480来说，其代表的就是在萤幕上有宽640个光点，高有480光点，若是我们将解析度调整为800 ×600其宽势必要从640变成800个光点，也因此，该光点便会变小一点，所以，我们看起来就会觉得解析度调高后，萤幕内的东西，变得小小的，很精致，那就是因为光点变小的原因。

    

3. 影像格式：网页用的图档目前只有gif格式（即副档名为gif的图档，如：bg.gif）以及jpg格式（即副档名为jpg的图档，如：bg.jpg）为一般的浏览器所接受。其他如bmp格式或是pcx格式都是无法在网页上使用的，若非得要用，那就利用影像绘图软体来作格式的转换吧！

   图档范例	说明
   	gif格式的图形只能以256个颜色显示，虽然其色彩较少，但颜色鲜艳亮丽，若是图形颜色不多，用gif格式存档会较漂亮。
   	jpg格式的图形是以全彩显示，适合用在相片或是渐层颜色的图片上，压缩比例以75%为适中。

    

 

1. 连结基本概念：一般而言，所谓连结就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当游标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。

   扯到连结，最基本来看有‘内部连结’及‘外部连结’，所谓‘内部连结’就是自己网站间网页的连结，至于外部连结我们稍后再来讨论。

   要了解内部连结，首先必须先了解一下这两种东西，一个是‘相对路径’，一个是‘绝对路径’。

   现在假设一个情形：我们在自己的电脑里设计网页，所有网页相关的档案我们通通放在 c:\www 里面，现在假设 c:\www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！

   现在我们想在 index.htm 里面设一个连结，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述：

   <a href="/c|/www/text1.htm">	这就是‘绝对路径’
   <a href="text1.htm">	这就是‘相对路径’

   瞧出什么端倪了没有？嗯嗯....没错，‘绝对路径’要给电脑一个非常详尽的位置，让电脑寻着这路径去找到档案。而‘相对路径’就简单多啦！如果没有特别指定，他就会直接在 index.htm 的所在目录下找，也就是在 c:\www 底下去找text1.htm。

   如果说，今天我们将 c:\www 里所有的档案都上传到网路上的网页伺服器（总不能做好了只给自己看吧！），且该伺服器是别人的电脑，而非你自己架设的主机，那么问题就来了！你猜，哪一种连结会出问题？呵呵...答案是‘绝对路径’，您猜对了吗？

   为什么说‘绝对路径’会出问题呢？因为，当您将档案上传到网路上时，您的整个网页目录架构一定会变，到时候，电脑可能找不到 c:\ （尤其是unix系列的主机）更可能找不到 www 这目录（有些会规定要放在特定的目录下才能显示网页），所以说，没事的话，尽量用‘相对路径’来作连结吧！好写又不容易出错。

   另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:\www\gif\ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:\www 底下。现在我们想在 index.htm 下设个连结到 p1.gif 这图档（连结不限于只能连html档，图档、文字档均可），那我们又该如何来使用‘相对路径’呢？他们又不在‘同一个目录’下...？

   <a href="/c|/www/gif/p1.gif">	这是‘绝对路径’的写法
   <a href="gif/p1.gif">	这是‘相对路径’的写法

   如何？不难吧！（只是字有点多，看到脑子发胀）

 

2. 总整理：很乱吗？嗯...看看这表，或许会清楚些。

   相对路径表示方式	代表连结位置
   <a href="text1.htm">	text1.htm在目前的目录中（就例子而言，就是在c:\www中）
   <a href="docs/text1.htm">	text1.htm在名为docs的次目录中（就本例而言，就是在c:\www\docs中）
   <a href="../text1.htm">	text1.htm在目前目录的上一层目录中（就本例而言，就是在c:\底下了）

    

 

1. 使用方法：

    

   1. 先在欲连结处作记号：<a name="here1">这里是你想连结的点</a>

       

   2. 设定连结：<a href="#here1">连结</a>

    

2. 标签解说：有时候，当某页的内容很多时，我们可以利用网页的内部连结，来使使用者快速的找到资料。其原理不过是：在欲连结处做个记号（网页的任何地方都可以喔！），然后，连结时就寻这记号，就可以快速找到资料。很简单吧！

    

3. 使用范例：

   范例	第一步骤	第二步骤
   www连结标签基本概念	<a name="m1">欲连结的位置</a>	<a href="#m1">www连结标签基本概念</a>
   网页内部的连结	<a name="m2">欲连结的位置</a>	<a href="#m2">网页内部的连结</a>
   网页外部的连结	<a name="m3">欲连结的位置</a>	<a href="#m3">网页外部的连结</a>

    

 

1. 标签解说：连结到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网路上的服务五花八门，所以不同的服务有不同的连结方法，我将之整理在下表。

    

2. 使用范例：

   网站连结	好站	<a href="http://sunspot-design.com">好站</a>
   电子邮件连结	写情书给我	<a href="mailto:tad@ms1.url.com.tw">写情书给我</a>
   ftp连结	下载档案	<a href="ftp://ftp.ntu.edu.tw">下载档案</a>
   news连结	seednet news服务	<a href="news:news.seed.net.tw">seednet news服务</a>
   gopher连结	seednet gopher服务	<a href="gopher://gopher.seed.net.tw/">seednet gopher服务</a>
   bbs连结	seednet gopher服务	<a href="telnet://bbs.seed.net.tw/">seednet bbs服务</a>

    

 

1. 使用方法：在连结后面加入 target=_参数

    

2. 标签解说：连结的参数并不多，常见的大概就属 target 这参数了，target 的意思是‘目标’，也就是网页连结的指向目标，这参数在框窗（frame）里尤为重要！

    

3. 使用范例：

    

   • target=框窗名称：
     这在‘框架标签’中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标签，来指定连结的内容显示到哪一个框窗中。

      

   • target=_blank：
     将连结的画面内容，开在新的浏览视窗中。

      

   • target=_parent：
     将连结的画面内容，当成文件的上一个画面。

      

   • target=_self：
     将连结的画面内容，显示在目前的视窗中。

      

   • target=_top：
     这个参数可以解决新连结的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成连结的画面内容。

举个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用<TABLE></TABLE>标签告诉电脑我要做一个表格；第二个步骤，利用一组<TR></TR>标签先做一个横列，然后在横列中利用三组<TD></TD>标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系，以下咱们就来慢慢的看个仔细：

1. 首先我们来看一个最简单的表格：

   原始码	呈现结果
   <TABLE BORDER=1> <TR><TD>1</TD></TR> </TABLE>	1

   利用<TABLE>这个标签来告诉电脑，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位。当然，文字就是要摆在这里面。

    

2. 现在我们再来增加二个格子：

   原始码	呈现结果
   <TABLE BORDER=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> </TABLE>	1 2 3

    

3. 看见没有，<TR></TR>没有增加，<TD></TD>却增加了二组。那如果我要再加上一列呢？很简单，就像这样：

   原始码	呈现结果
   <TABLE BORDER=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE>	1 2 3 4 5 6

    

1. 并非所有的表格都是规规矩矩的只有几栏、几列而已，有时候，我们还会希望能够“合并栏位”，让表格更美观、更实用一点，而谈到“合并栏位”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是横列间的合并），一种是左右合并（也就是直栏间的合并），这两种合并方式各有不同的属性设定方法。

    

2. 左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们就来看看，如何将 1、2、3 格通通合并变成一大格：

   原始码	呈现结果
   <TABLE BORDER=1> <TR><TD COLSPAN=3>1</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE>	1 4 5 6

   您应该会发现，怎么2、3都消失了？只剩下1，而且该栏的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个<TD>都可以省掉了，因为都被并掉了嘛！

    

3. 上下栏位合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4格通通合并变成一大格：

   原始码	呈现结果
   <TABLE BORDER=1> <TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>5</TD><TD>6</TD></TR> </TABLE>	1 2 3 5 6

   有了上一次的经验后，我们就知道，要合并栏位就一定有些栏位会被“牺牲”掉（也就是那些被合并的栏位啦！），这次我们要“上下合并”，我们将1与4合并成一个栏位，那么被牺牲的是哪一个栏位呢？没错就是下面那一个倒楣的4，我们看看上图，果然4已经删掉了，而在1的<TD>标签中则多了个生面孔ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”，其结果如下：

    

    

1. 我可以自己设定表格的大小吗？当然可以，您可以自由设定表格的“宽”及“高”喔！我们来制作一个宽100、高60的表格，做法如下：

   原始码	呈现结果
   <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD>1</TD></TR> </TABLE>	1

    

2. 哎呀！怎么 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>中。

    

3. 既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用 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让表格中物件靠下方。

    

    

1. 那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用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

    

2. 表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要将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

    

1. 如何设定表格粗细？只要利用BORDER="粗细值"就行了。

   原始码	呈现结果
   <TABLE BORDER=5> <TR><TD>1</TD></TR> </TABLE>	1

    

2. 如何设定表格颜色？只要利用BORDERCOLOR="颜色码"就行了。

   原始码	呈现结果
   <TABLE BORDER="5" BORDERCOLOR="#0080FF"> <TR><TD>1</TD></TR> </TABLE>	1

    

3. 另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮面设定） BORDERCOLORDARK="颜色码"（暗面设定）就行了。

   原始码	呈现结果
   <TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"> <TR><TD>1</TD></TR> </TABLE>	1

    

1. 我们可以利用CELLPADDING属性自由设定表格内文距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为2，不过我建议设定为4比较漂亮。

   原始码	呈现结果
   <TABLE BORDER="1" CELLPADDING="10"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE>	1 2

    

2. 我们可以利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2，不过我通常习惯设为 0 。

   原始码	呈现结果
   <TABLE BORDER="1" CELLSPACING="5"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE>	1 2