工具啦

設為首頁
加入收藏
繁體中文

網頁鏈接資源查看器 所見即所得編輯器 在線HTML編輯器 網頁在線編輯器 在線編程 滾動條顏色生成器
OPEN參數生成器 彈窗代碼產生器 密碼登錄生成器 鼠標經過按鈕生成器 框架網頁代碼生成器 META標簽生成器
多彩特效字生成器 網頁代碼調試器 DIV+CSS編輯器 源文件查看器 頁面轉換效果生成器 常用JavaScript
CSS在線編輯器 CSS樣式編輯器 CSS生成器 字符替換器 在線FTP登陸 HTML語法教學

在線HTML語法教學

細說HTML標簽

在HTML語法中,大致上可以分為:

  1. 網頁架構:主要網頁主架構的介紹
  2. 分隔標簽:也就是所謂的水平線
  3. 排版標簽:針對標簽的屬性,可做適當的版面編排
  4. 字體標簽:教導您設定文字的字體。
  5. 文字標簽:教導您設定文字的顏色、行距、變化.....等等。
  6. 影像標簽:教導您如何在網頁中,植入圖像。
  7. 背景標簽:教導您如何設定背景顏色或是背景圖像。
  8. 鏈接標簽:教導您如何設定超鏈接,以及開視窗的條件。
  9. 表格標簽:教導您如何在網頁中運用表格。
  10. 序列標簽:教導您如何設定文字序列或圖形序列。
  11. 表單標簽:教導您如何制作可填寫用的表單。
  12. 框架標簽:可讓同一個視窗由多個網頁一起組成。
  13. 其他技巧:讓您的整個網頁背景可以讓您設定為圖片或是聲音。

4.1 網頁架構 <回細說索引>

<HTML>
 <HEAD>
  <TITLE>工具啦網頁制作教學</TITLE>
  <Meta>
 </HEAD>
 <BODY>
  BODY之間則為主要語法所在,也是網頁的主要呈現部分。
 </BODY>
</HTML>

【標簽解說】

以上看到的就是一篇最簡單架構的網頁。沒錯,網頁其實就是一堆標簽(所謂標簽就是指被<>包起來的語法)集合起來的,透過瀏覽器的消化整理,就便成了美侖美奐的網頁了。

簡單而言,通常一份完整的網頁包含了二個部份:抬頭(HEAD)、文件本體(BODY)。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>

在抬頭的部份<HEAD></HEAD>中,有另一組標簽<TITLE></TITLE>。打在<TITLE></TITLE>這里面的文字會出現在瀏覽器視窗最上頭藍色部份里,當作一篇網頁的主題。

您可能會發現,為什么我一直沒提到<HTML></HTML>這一組標簽,嗯!因為它可有可無。這一組標簽是告訴瀏覽器說:我是一份HTML文件喔!也就是說它是一個網頁的格式啦!通常都包在網頁的最上下兩端,將所有的原始碼都包起來。

4.2 分隔標簽 <回細說索引>


【文字上的分隔標簽】

或許你已經發現這個問題了:天啊!我不是在記事本里排版排得很漂亮,為何透過瀏覽器看起來一切都走了樣?對啊!別太訝異,在網頁的編排里,并不像漢書或WORD一樣,只要拼命按Enter鍵或空白鍵,便能完成分段或分行,因為,HTML語言是不認識我們所謂的Enter鍵或空白鍵,所以不管您按了多少次的空白或Enter,瀏覽器都會當作沒看見啦!

  1. 使用方法:強制斷行標簽<br>強制分段標簽<p>

  2. 標簽解說:我們在寫文章時,有時候在特定的地方會強迫斷行(<br>),或是在寫完某一段的時候便會分段(<p>),寫網頁也一樣,而且更需要斷行及分段的功能,以免整個網頁看起來亂糟糟的。

  3. 使用范例:
    原始碼 呈現結果
    這是一個斷行的范例<br>看出來了嗎? 這是一個斷行的范例
    看出來了嗎?
    這是一個分段的范例<p>基本上他會比斷行還多空出一行 這是一個分段的范例

    基本上分段會比斷行還多空出一行



【分隔線標簽】

  1. 使用方法:上一段文字內容<hr>下一段文字內容

  2. 標簽解說:利用<hr>這個標簽便可產生一條橫分隔線。另外,其有些屬性分別說明如下:

  3. 使用范例:
    一般用法 尚未加任何屬性。
    原始碼 普通分隔線<hr>
    呈現結果 普通分隔線

    顏色屬性 用法:<hr color="顏色碼或顏色名稱">
    原始碼 橘色分隔線<hr color="#ff8000">
    呈現結果 橘色分隔線

    寬度屬性 用法:<hr width="寬度">,其單位為px(像素),寬度亦可用百分比來作設定,如50%即意為寬度占螢幕50%。
    原始碼 寬度為240px的分隔線<hr width="240">
    呈現結果 寬度為240px分隔線

    厚度屬性 用法:<hr size="厚度">
    原始碼 厚度為5的分隔線<hr size="5">
    呈現結果 厚度為5分隔線

    位置屬性 用法:<hr align="水平對齊位置">,其設定值有三個,也就是置左align="left"、置中align="center"、置右align="right"
    原始碼 靠右的分隔線<hr align="right">
    呈現結果 靠右的分隔線

    陰影屬性 用法:<hr noshade>,無設定值,只要將 noshade 加入即可,通常會配合顏色設定,效果較佳。
    原始碼 實心分隔線(無陰影)<hr noshade>
    呈現結果 實心分隔線(無陰影)

4.3 排版標簽 <回細說索引>


【文字置左、置中、置右】

  1. 使用方法:老實說,剛剛我們學過的分段標簽<p>再加上一些簡單的屬性設定,就可以讓其整個文字段落置左、置中或置右了,就如下表所示:

    原始碼 呈現結果
    <p align="left">文字靠左</p>

    文字靠左

    <p align="center">文字置中</p>

    文字置中

    <p align="right">文字靠右</p>

    文字靠右

    標簽解說:嗯!秘訣就在于“align=對齊位置”而已啦!align是分段標簽<p>的屬性之一,這個屬性將來會常常在不同標簽中看到,它的功能是專門在設定“水平對齊位置”,其常見的設定值有三個,也就是置左(align="left")置中(align="center")置右(align="right")



【置中標簽】

  1. 使用方法:<center>這是置中</center>

  2. 標簽解說:這個標簽是最常用到的標簽了,除了文字,對于圖片、表格,任何可以顯現在網頁上的東西都可以置中喔!

  3. 使用范例:
    原始碼 呈現結果
    <center>這是最中間</center>

    這是最中間



【向右縮排標簽】

  1. 使用方法:<blockquote>要縮排的文字</blockquote>

  2. 標簽解說:利用<blockquote></blockquote>這個標簽可以將其包起來的文字,全部往右縮排。而且加一組標簽,往右縮排一單位,加兩組標簽,往右縮排兩單位,依此類推。

  3. 使用范例:
    原始碼 呈現結果
    <blockquote>縮排1單位</blockquote>

    縮排1單位

    <blockquote><blockquote>縮排2單位</blockquote></blockquote>

    縮排2單位



【保存原始格式標簽】 強烈推薦!

  1. 使用方法:<pre>文字內容<pre>

  2. 標簽解說:利用<pre></pre>這個標簽可以將其包起來的文字排版、格式,原封不動的呈現出來。算是相當好用的標簽之一。

  3. 使用范例:
    原始碼 呈現結果
    <pre>
    文 字
     格 式
    </pre>
    文 字
     格 式
    
    

4.4 字體標簽 <回細說索引>


【標題標簽】

  1. 使用方法:<h1>標題內容</h1>

  2. 標簽解說:標題的大小一共有六種,兩個標簽一組,也就是從<h1>到<h6>,<h1>最大,<h6>最小。使用標題標簽時,該標簽會將字體變成粗體字,并且會自成一行。

  3. 使用范例:
    原始碼 呈現結果
    <h1>標題一</h1>

    標題一

    <h2>標題二</h2>

    標題二

    <h3>標題三</h3>

    標題三

    <h4>標題四</h4>

    標題四

    <h5>標題五</h5>
    標題五
    <h6>標題六</h6>
    標題六



【設定字體大小標簽】

  1. 使用方法:<font size=3>文字內容</font>

  2. 標簽解說:標題的大小一共有七種,也就是<font size=1>(最小)到<font size=7>(最大),另外,還有一種寫法:<font size=+1>文字內容</font>,其意思就是說:比預設字大一級。當然也可以 font size=+2(比預設字大二級),或是 font size=-1(比預設字小一級),以一般而言,預設字體多為 3。

  3. 使用范例:
    原始碼 呈現結果
    <font size=1>字體一</font> 或是
    <font size=-2>字體一</font>
    字體一
    <font size=2>字體二</font> 或是
    <font size=-1>字體二</font>
    字體二
    <font size=3>字體三</font> 或是
    <font size=+0>字體三</font>
    字體三
    <font size=4>字體四</font> 或是
    <font size=+1>字體四</font>
    字體四
    <font size=5>字體五</font> 或是
    <font size=+2>字體五</font>
    字體五
    <font size=6>字體六</font> 或是
    <font size=+3>字體六</font>
    字體六
    <font size=6>字體七</font> 或是
    <font size=+4>字體七</font>
    字體七



【字型變化標簽】

  1. 使用方法:<b>文字</b>

  2. 標簽解說:在文字標簽里,對于文字的格式也有相當多的變化,如粗體、斜體...等,此外,也定義了一些現成的格式供編者使用,如‘強調’、‘原始碼’...等,當然,這只是方便您參考用,并無強迫說遇到原始碼就要加上‘原始碼’的標簽。

  3. 使用范例:
    原始碼 呈現結果
    <b>粗體</b> 粗體
    <i>斜體</i> 斜體
    <u>底線</u> 底線
    <sup>上標</sup> 上標
    <sub>下標</sub> 下標
    <tt>打字機</tt> 打字機
    <blink>閃爍</blink>(ie沒效果) 閃爍
    <em>強調</em> 強調
    <strong>加強</strong> 加強
    <samp>范例</samp> 范例
    <code>原始碼</code> 原始碼
    <var>變數</var> 變數
    <dfn>定義</dfn> 定義
    <cite>引用</cite> 引用
    <address>所在地址</address>
    所在地址



【文字顏色設定】

  1. 使用方法:<font color="#fefecb">文字顏色</font>

  2. 標簽解說:文字也可以設定 顏色喔!至于顏色有哪些....這....哪天我心血來潮再來做個色彩對應表吧!

  3. 使用范例:
    原始碼 呈現結果
    <font color="#ff0000">紅</font> 紅色的字喔!
    <font color="#ff8000">橙</font> 橙色的字喔!
    <font color="#ffff00">黃</font> 黃色的字喔!
    <font color="#00ff00">綠</font> 綠色的字喔!
    <font color="#0080ff">藍</font> 藍色的字喔!
    <font color="#0000a0">靛</font> 靛色的字喔!
    <font color="#8000ff">紫</font> 紫色的字喔!
    <font color="#000000">黑</font> 黑色的字喔!
    <font color="#c0c0c0">灰</font> 灰色的字喔!

4.5 文字標簽 <回細說索引>

【文字字型設定】

  1. 使用方法:<font face="字型名稱">文字</font>

  2. 標簽解說:網頁上也可以使用字型喔!唯一的一個限制是:對方也要有該字型!否則看到的仍然還是宋體。另外要說明的是,這個標簽并無法保證在每個瀏覽器上都能正常的顯現,不過這并沒有關系,看不到特殊的字型時,瀏覽器仍會以宋體來顯示,所以不用怕會一團亂!

    另外,如果您的網頁中有加上這一行敘述<meta http-equiv="content-type" content="text/html;charset=big5">(指定網頁的語言格式,以后我會解釋),那么,netscape可以正確顯示出中文,但英文無反應。若沒有加該行,那么英文會正確顯示,但中文卻仍是宋體。至于 ie 系列,均能正常顯示。

  3. 使用范例:
    原始碼 呈現結果
    <font face="楷體_GB2312">楷體_GB2312</font> 楷體_GB2312
    <font face="華康儷中黑">華康儷中黑</font> 華康儷中黑



【特殊字元】

  1. 使用方法:&nbsp;

  2. 標簽解說:很多特殊的符號是需要特別處理的,比如說" < "、" > "這兩個符號若想要呈現在網頁上是沒有辦法直接打" < "的,要呈現" < "必須輸入編碼表示法:“&lt;”,常用的如下:

  3. 使用范例:
    原始碼 呈現結果
    &nbsp;   (&nbsp;代表一個不斷行空白)
    &lt; <
    &gt; >
    &amp; &
    &quot; "



【設定文字內定值大小】

  1. 使用方法:<basefont size="1~7">

  2. 標簽解說:這個標簽可以改變文字大小的內定值,直接加在<body>標簽之后就行了。一般而言,若是沒有特別設定,文字大小內定值預定值為3。

4.6 影像標簽 <回細說索引>

【影像標簽】

在使用影像標簽時有兩件事值得注意一下,一是檔名,二是路徑。首先要注意的就是,檔名是否正確以及大小寫是否一致!圖檔名稱不正確,任電腦再厲害也找不到您要的圖,檔名大小寫不一致,如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="http://www.tool.la/logo/logo2.gif">嗨!我是本站的模特兒喔!
    呈現結果 嗨!我是本站的模特兒喔!

    長寬設定 用法:<img src="圖檔" height="高度" width="寬度">
    設圖片的大小,其實不用設也可以,但是有設更好,可以加快瀏覽速度,因為瀏覽器就不用在那邊花時間算您的圖片有多大啦!此外您也可以自己隨意設定圖片大小。
    原始碼 <img src="http://www.tool.la/logo/logo2.gif">
    呈現結果

    加上說明 用法:<img src="圖檔" alt="說明文字">
    滑鼠一到圖上時,說明文字就會自動出現。此外,在圖片未顯示出來或顯示不出來時,也會以這一段字代替,讓使用者知道這個未顯示出來的圖片究竟是干嘛用的。
    原始碼 <img src="http://www.tool.la/logo/logo2.gif" alt="本站特約模特兒">移到圖上看看。
    呈現結果 本站特約模特兒移到圖上看看。

    圖片位置 用法:<img src="圖檔" align="位置">
    圖片位置設定!可以靠左放:align=left、靠上align=top、靠下align=bottom、垂直置中align=middle,其中靠左放可以造成‘文繞圖’的效果。
    原始碼 <img src="http://www.tool.la/logo/logo2.gif" align=right>嗨!我往右邊靠!
    呈現結果 嗨!我往右邊靠!
    原始碼 <img src="http://www.tool.la/logo/logo2.gif" align=left>嗨!我往左邊靠!
    呈現結果 嗨!我往左邊靠!
    原始碼

    <img src="http://www.tool.la/logo/logo2.gif" align=top>文字對齊我頭頂!

    呈現結果 文字對齊我頭頂!
    原始碼 <img src="http://www.tool.la/logo/logo2.gif" align=bottom>文字對齊我腳底!
    呈現結果 文字對齊我腳底!
    原始碼 <img src="http://www.tool.la/logo/logo2.gif" align=middle>文字對齊我中間!
    呈現結果 文字對齊我中間!
    原始碼 <img src="http://www.tool.la/logo/logo2.gif" align=absmiddle>文字對齊我絕對中間!
    呈現結果 文字對齊我絕對中間!

    邊框設定 用法:<img src="圖檔" border="邊框粗細">
    設定邊框大小,通常都設成 0 感覺比較美觀啦!因為內定的框框實在是不怎么漂亮....。尤其在鏈接時,設框框簡直是丑斃了...。
    原始碼 <img src="http://www.tool.la/logo/logo2.gif" border="4">
    呈現結果

    左右間距 用法:<img src="圖檔" hspace="離左右物件的距離">
    離文字的水平距離,通常多少也設一點,以免靠文字太近,看起來才不會有太擠的感覺。
    原始碼 左邊的字<img src="http://www.tool.la/logo/logo2.gif" hspace="15">右邊的字
    呈現結果 左邊的字右邊的字

    上下間距 用法:<img src="圖檔" vspace="離上下物件的距離">
    離文字的垂直距離,通常多少也設一點,以免靠文字太近,看起來才不會有太擠的感覺。
    原始碼 上面的字<br><img src="http://www.tool.la/logo/logo2.gif" vspace="15"><br>下面的字
    呈現結果 上面的字

    下面的字

    由于此網頁有用css控制版面圖文,故在netscape下觀看,會稍有不正確。



【網頁影像重要觀念】

  1. 關于路徑:現在我們來談談圖片路徑的事,路徑不對,不管您的網頁名稱寫的多正確也沒用,因為瀏覽器無法尋著您的路徑去找到該有的圖片,所以,我們來看看該如何正確的使用路徑。有些人并不喜歡將網頁及圖通通放在同一個目錄下,比如說有人將圖檔全放在c:\images里,而網頁檔放在c:\demo里,這樣子的話,我們該如何正確的寫圖片的路徑呢?我將幾種常見的情形整理成下表:
    html檔的位置 圖檔的位置 寫法 情形說明
    c:\demo c:\demo <img src="logo.gif"> 圖文均在同一目錄
    c:\demo c:\demo\images <img src="images/logo.gif"> 圖在網頁下一層目錄
    c:\demo c:\ <img src=" ../logo.gif"> 圖在網頁上一層
    c:\demo c:\images <img src="../images/logo.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%為適中。

4.7 背景標簽 <回細說索引>

【背景標簽】

說穿了,背景標簽只有<BODY>這個標簽,其余的效果,只要加上一些簡單的屬性便可做到。

  1. 使用方法:<body bgcolor="#ffffff" background="bg.jpg">

  2. 標簽解說:這個標簽其實應該老早就要講了,畢竟它是構成網頁不可或缺的基本要素之一。我們背景顏色或圖片的設定以及鏈接字體的顏色,通通都放在<body>這標簽里面。我就其屬性來一一解說:
    背景顏色 用法:<body bgcolor="顏色碼">
    設定背景顏色。有人會說:‘我已經設定了背景圖片,那背景顏色還有用嗎?’當然有用!當使用者鏈接到貴站時,若背景圖案還沒傳輸完之前(有的背景圖蠻大的),就會先顯現背景顏色,您說,是不是比一片灰灰的好看多了呢!
    原始碼 <html>
    <head>
    <title>這是標題</title>
    </head>

    <body bgcolor="#f9e6a2">

    這里是本文區

    </body>
    </html>

    背景圖案 用法:<body background="圖檔名稱、路徑">
    g設定背景圖案。圖檔可以是jpg或gif格式的圖檔,我建議:圖檔不要太大,否則網頁載入會蠻慢的。

    原始碼

    <html>
    <head>
    <title>這是標題</title>
    </head>

    <body bgcolor="#f9e6a2" background="bg.jpg">

    這里是本文區

    </body>
    </html>



【內文、鏈接文字顏色設定】

  1. 使用方法:<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>

  2. 標簽解說:用字體標簽中的顏色屬性,可以設定文字的顏色,不過,卻沒有提到文字的顏色內定值該如何修改,這個<body>標簽中,便有設定內文、鏈接等文字的顏色內定值功能。用法如下:

    內文顏色 用法:<body text="顏色碼">
    設定一般文字顏色,也就是說,若沒有特別去設定文字顏色的話,瀏覽器就會自動顯現您所設定的顏色。
    原始碼 <html>
    <head>
    <title>這是標題</title>
    </head>

    <body text="#0906a2">

    這里是本文區

    </body>
    </html>

    鏈接顏色 用法:<body link="顏色碼">
    設定“鏈接”的顏色。只要是有鏈接的地方就會出現你指定的顏色,當然,如果按下鏈接后,那又會變成另一個顏色了,這底下會說明。
    原始碼 <html>
    <head>
    <title>這是標題</title>
    </head>

    <body link="#ff6600">

    <a href="index.htm">鏈接文字</a>

    </body>
    </html>

    鏈接時顏色 用法:<body alink="顏色碼">
    設定“按下鏈接”的顏色,也就是當您滑鼠按下那鏈接的瞬間所呈現的顏色。
    原始碼 <html>
    <head>
    <title>這是標題</title>
    </head>

    <body alink="#0099ff">

    <a href="index.htm">鏈接中文字</a>

    </body>
    </html>

    已鏈接顏色 用法:<body vlink="顏色碼">
    設定“按下鏈結后”的顏色,也就是如果該鏈接已經有被按過了,那么就會呈現的顏色。如此的做法,是要讓使用者容易識別到底哪些鏈接有去過了,哪些沒去過。
    原始碼 <html>
    <head>
    <title>這是標題</title>
    </head>

    <body vlink="red">

    <a href="demo1-10-6.htm">鏈接文字</a>

    </body>
    </html>

     

4.8 鏈接標簽 <回細說索引>

WWW鏈接標簽基本概念

  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"> 這是‘相對路徑’的寫法

    如何?不難吧!(只是字有點多,看到腦子發脹!)

  1. 總整理:很亂嗎?嗯...看看這表,或許會清楚些。

    相對路徑表示方式 代表鏈接位置
    <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://www.tool.la">好站</a>
    電子郵件鏈接 寫情書給我 <a href="mailto:[email protected]jzba.com">寫情書給我</a>
    ftp鏈接 下載檔案 <a href="ftp://www.tool.la">下載檔案</a>
    news鏈接 seednet news服務 <a href="news:news.tool.la">seednet news服務</a>
    gopher鏈接 seednet gopher服務 <a href="gopher://www.tool.la/">seednet gopher服務</a>
    bbs鏈接 seednet gopher服務 <a href="telnet://bbs.tool.la/">seednet bbs服務</a>



【鏈接標簽的參數】

  1. 使用方法:在鏈接后面加入 target=_參數

  2. 標簽解說:鏈接的參數并不多,常見的大概就屬 target 這參數了,target 的意思是‘目標’,也就是網頁鏈接的指向目標,這參數在框窗(frame)里尤為重要!

  3. 使用范例:

    • target=框窗名稱
      這在‘框架標簽’中也有提到,而且也只有在框架(框窗 or frame)中才用得到。正常而言,框窗有各自的名稱,因此,我們可以利用此標簽,來指定鏈接的內容顯示到哪一個框窗中。

    • target=_blank
      將鏈接的畫面內容,開在新的瀏覽視窗中。

    • target=_parent
      將鏈接的畫面內容,當成文件的上一個畫面。

    • target=_self
      將鏈接的畫面內容,顯示在目前的視窗中。

    • target=_top
      這個參數可以解決新鏈接的畫面內容,被舊框窗包圍的困擾,使用這參數,會將整個畫面重新顯示成鏈接的畫面內容。

4.9 表格標簽 <回細說索引>

【網頁中的表格觀念】

舉個例子來說,如果今天我們要做一個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

4.10 序列標簽 <回細說索引>

【無序標簽】

  1. 序列標簽基本上可分為兩種,一種是“無序條列”,一種是“有序條列”。所謂“無序條列”當然就是意指各條列間并無順序關系,純粹只是利用條列式方法來呈現資料而已,此種無序標簽,在各條列前面均有一符號以示區隔。至于“有序條列”就是指各條列之間是有順序的,從1、2、3…一直延伸下去。

  2. 我們先來看看“無序列表標簽”如何使用:

    原始碼 呈現結果
    <UL>
    <LI>姓名:張三
    <LI>生日:12/13
    <LI>星座:射手座
    </UL>
    • 姓名:張三
    • 生日:12/13
    • 星座:射手座

    其中<UL>標簽即為“無序列表標簽”,每增加一列內容,就必須加一個<LI>。

  3. 前面的符號一定是要圓形的嗎?不,我們可以加入TYPE="形狀名稱"屬性來改變其符號形狀,一共有三個選擇:DISK(實心圓)、SQUARE(小正方形)、CIRCLE(空心圓)三種(由于本頁使用CSS故僅于Netscape看得出效果。)

    原始碼 呈現結果
    <UL TYPE="CIRCLE">
    <LI>姓名:張三
    <LI>生日:12/13
    <LI>星座:射手座
    </UL>
    • 姓名:張三
    • 生日:12/13
    • 星座:射手座



【有序標簽】

  1. 接下來,我們來看看“有序列表標簽”如何使用:

    原始碼 呈現結果
    <OL>
    <LI>姓名:張三
    <LI>生日:12/13
    <LI>星座:射手座
    </OL>
    1. 姓名:張三
    2. 生日:12/13
    3. 星座:射手座

    其中<OL>標簽即為“有序列表標簽”,每增加一列內容,就必須加一個<LI>。

  2. 和無序列表標簽一樣,我們也可以選擇不同的符號來顯示順序,一樣是用TYPE屬性來作更改,一更有五種符號:1(數字)、A(大寫英文字母)、a(小寫英文字母)、I(大寫羅馬字母)、i(小寫羅馬字母)等五種:

    原始碼 呈現結果
    <OL TYPE="A">
    <LI>姓名:張三
    <LI>生日:12/13
    <LI>星座:射手座
    </OL>
    1. 姓名:張三
    2. 生日:12/13
    3. 星座:射手座

  3. 另外,我們亦可指定序列起始的數目,其方法如下:

    原始碼 呈現結果
    <OL START="8">
    <LI>姓名:張三
    <LI>生日:12/13
    <LI>星座:射手座
    </OL>
    1. 姓名:張三
    2. 生日:12/13
    3. 星座:射手座



【定義列表標簽】

  1. 接下來我們要說明的這個標簽,是“定義列表標簽”也是屬于序列標簽之一。我們先來舉個例子,我們常常會在文章中看見這樣的格式:
    CSS(Cascading style sheet)

    CSS是由W3C于1996年12月所公布的一項新技術,什么叫做Cascading style sheet?簡單說來他是一種具有階層性的形式設定,能夠讓網頁設計者在設計網頁時,對于網頁上的任何物件均有更佳的操控性…


    網頁里也有可以做到這種效果的標簽喔!現在要來跟各位說的就是這個標簽。咱們先來看看這標簽的用法:

  2. 我們先來看看“定義列表標簽”如何使用:

    原始碼 呈現結果
    <DL>
    <DT>小標題
    <DD>標題的內容說明
    </DL>
    小標題
    標題的內容說明

4.11 表單標簽 <回細說索引>

【表單的用途】

對于一般的網頁設計初學者而言,表單功能其實并不常用,因為表單通常必須配合著CGI、JAVA Script程式或是ASP程式來運作,不然表單單獨存在的意義并不大。不過,一旦有機會將表單運用到網頁中時,您的網頁將擺脫單向呈現,而開始邁入和使用者互動的階段喔!

本單元純粹以介紹各式表單為主,至于一些CGI或ASP觀念在此我就不提出了,因為提供零碎的觀念,倒不如去看看專門介紹CGI的書籍來的妥當。

【各種輸入類型】

  1. 文字輸入列:每個表單之所以會有不同的類型,原因就在于TYPE="表單類型"設定的不同而已,我們就先來看看第一個類型:文字輸入列。文字輸入列的形態就是TYPE="TEXT,其使用方法如下:

    呈現結果

    姓名:

    原始碼 <FORM>
    姓名:<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
    </FORM>

    其有下列可設定之屬性:

    • NAME="名稱",是設定此一欄位的名稱,程式中常會用到。
    • SIZE="數值",是設定此一欄位顯現的寬度。
    • VALUE="預設內容",是設定此一欄位的預設內容。
    • ALIGN="對齊方式",是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。
    • MAXLENGTH="數值",是設定此一欄位可設定輸入的最大長度。


  2. 單選核取表單:利用TYPE="RADIO"就會產生單選核取表單,單選核取表單通常是好幾個選項一起擺出來供使用者點選,一次只能從中選一個,故為單選核取表單。

    呈現結果

    性別:男

    原始碼 <FORM>
    性別:
    男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">
    女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">
    </FORM>

    其有下列可設定之屬性:

    • NAME="名稱",是設定此一欄位的名稱,程式中常會用到。
    • VALUE="內容",是設定此一欄位的內容、值或是意義。
    • ALIGN="對齊方式",是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。
    • CHECKED,是設定此一欄位為預設選取值。


  3. 復選核取表單:利用TYPE=" CHECKBOX "就會產生復選核取表單,復選核取表單通常是好幾個選項一起擺出來供使用者點選,一次可以同時選好幾個,故為復選核取表單。

    呈現結果

    喜好: 電影 看書

    原始碼 <FORM>
    喜好:
    <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">電影
    <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看書
    </FORM>

    其有下列可設定之屬性:

    • NAME="名稱",是設定此一欄位的名稱,程式中常會用到。
    • VALUE="內容",是設定此一欄位的內容、值或是意義。
    • ALIGN="對齊方式",是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。
    • CHECKED,是設定此一欄位為預設選取值。


  4. 密碼表單:利用TYPE=" PASSWORD "就會產生一個密碼表單,密碼表單和文字輸入表單長得幾乎一樣,差別就在于密碼表單在輸入時全部會以星號來取代輸入的文字,以防他人偷窺。

    呈現結果

    請輸入密碼:

    原始碼 <FORM>
    請輸入密碼:<INPUT TYPE="PASSWORD" NAME="INPUT">
    </FORM>

    其有下列可設定之屬性:

    • NAME="名稱",是設定此一欄位的名稱,程式中常會用到。
    • SIZE="數值",是設定此一欄位顯現的寬度。
    • VALUE="預設內容",是設定此一欄位的預設內容,不過呈現出來仍是星號。
    • ALIGN="對齊方式",是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。
    • MAXLENGTH="數值",是設定此一欄位可設定輸入的最大長度。


  5. 送出按鈕:通常我們表單填完之后,都會有一個送出按鈕以及清除重寫的按鈕,分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來產生,相當的簡單易用。

    呈現結果

    原始碼 <FORM>
    <INPUT TYPE="SUBMIT" VALUE="送出資料">
    <INPUT TYPE="RESET" VALUE="重新填寫">
    </FORM>

    其有下列可設定之屬性:

    • NAME="名稱",是設定此一按鈕的名稱。
    • VALUE="文字",是設定此一按鈕上要呈現的文字,若是沒有設定,瀏覽器也會自動替您加上“送出查詢”、“重設”等字樣。
    • ALIGN="對齊方式",是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。


  6. 按鈕元件:表單中或是JAVA SCRIPT常會用到按鈕來作一些效果,因此,我們可以利用TYPE=" BUTTON "來產生一個按鈕,相當簡單。

    呈現結果

    請按下按鈕:

    原始碼 <FORM>
    請按下按鈕:<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
    </FORM>

    其有下列可設定之屬性:

    • NAME="名稱",是設定此一按鈕的名稱。
    • VALUE="文字",是設定此一按鈕上要呈現的文字。
    • ALIGN="對齊方式",是設定此一欄位的對齊方式,其值有:TOP(向上對齊)、MIDDLE(向中對齊)、BOTTOM(向下對齊)、RIGHT(向右對齊)、LEFT(向左對齊)、TEXTTOP(向文字頂部對齊)、BASELINE(向文字底部對齊)、ABSMIDDLE(絕對置中)、ABSBOTTOM(絕對置下)等。


  7. 隱藏欄位:表單中有時有些東西因為某些因素,不想讓使用者看到,但因程式需要卻又不得不存在,此時,我們就可以利用TYPE=" HIDDEN "來產生一個隱藏的欄位。

    呈現結果

    隱藏欄位:

    原始碼 <FORM>
    隱藏欄位:<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到">
    </FORM>

    其有下列可設定之屬性:

    • NAME="名稱",是設定此一欄位的名稱。
    • VALUE="文字",是設定此一欄位的值、文字或意義。



【大量文字輸入元件】

  1. 有時候我們會希望讓使用者輸入比較大量的文字,此時,文字輸入列就顯得不敷使用,因此我們就可以利用<TEXTAREA></TEXTAREA>來產生一個可以輸入大量文字的元件,夾在兩個標簽中的文字會出現在框框中,可作為預設文字。

    呈現結果

    請輸入您的意見:


    原始碼 <FORM>
    請輸入您的意見:<BR>
    <TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
    </FORM>

    其有下列可設定之屬性:

    • NAME="名稱",是設定此一欄位的名稱。
    • WRAP="設定值",是設定此一欄位的換行模式。設定值有三種:OFF(輸入文字不會自動換行)、VIRTUAL(輸入文字在螢幕上會自動換行,不過若是使用者沒有自行按下ENTER換行,送出資料時,也視為沒有換行)、PHYSICAL(輸入文字會自動換行,送出資料時,會將螢幕上的自動換行,視為換行效果送出)。
    • COLS="數值",是設定此一欄位的行數(橫向字數)。
    • ROWS="數值",是設定此一欄位的列數(垂直字數)。



【下拉式選單】

  1. 下拉式選單令整個網頁看起來有很專業的感覺,我們只要利用<SELECT NAME="名稱">便可以產生一個下拉式選單,另外,還需要配合<OPTION>標簽來產生選項,這樣才算完整喔!

    呈現結果

    您喜歡看書嗎?:

    原始碼 <FORM>
    您喜歡看書嗎?:
    <SELECT NAME="LIKE">
    <OPTION VALUE="非常喜歡">非常喜歡
    <OPTION VALUE="還算喜歡">還算喜歡
    <OPTION VALUE="不太喜歡">不太喜歡
    <OPTION VALUE="非常討厭">非常討厭
    </SELECT>
    </FORM>

    其有下列可設定之屬性:

    • SIZE="數值",是設定此一欄位的大小,預設值為1,若是您的選項有四個,然后您將SIZE設成4,那么,下拉式選單便會變成選項方塊,將四個選項一起呈現在方塊中。
    • MULTIPLE,是設定此一欄位為復選,可以一次選好幾個選項。

4.12 框架標簽 <回細說索引>


【框架的基本概念】

  1. 首先,各位先看看右手邊這張圖,我將利用這張圖來作解說,這樣子,講起來可能會清楚一點。框架說明圖 OK!我們可以看見,右邊的這個視窗,一共分為 1 、 2 、 3 三個框架,每一個框架,各有其顯示的內容分別是a.htm、b.htm、c.htm三個檔案。然而左下角的那個 index.htm 是做什么用的呢?

  2. 原來,左下角的這個檔案 index.htm,就是要告訴電腦,我們要將畫面分割成這樣,也就是說,所有Frame的標簽,其實都只擺在 index.htm 這個檔案里(當然,不是檔名一定要叫做 index.htm 取其他檔名也是可以的。)

  3. 這樣明白了嗎?總之,您要分割幾個框框,就一定會有幾個對應的html檔案(假如您要分割100個框框,就要有100個html檔就對了。),另外,還會多一個檔案是來告訴電腦要如何分割的。(也就是例中的 index.htm 檔啦!)



【開始分割】

  1. 別急、別急,分割視窗可是一門學問,要分割也是要一步一步來的。看看剛剛那例子,想像畫面是一個蛋糕,你要怎么割,才能割成那樣呢?

    原始碼 呈現結果
    <HTML>
    <HEAD>
    <TITLE>框窗實作</TITLE>
    </HEAD>
    </HTML>
     

  2. 各位會發現,奇怪,在上面的語法中,怎么都沒見到<BODY></BODY>熟悉的身影?呵呵...沒錯,它已經被待會兒要加進去的<FRAMESET></FRAMESET>標簽給取代了!也就是說,如果我們要分割畫面,就要先用<FRAMESET>標簽告訴電腦說:‘喂!我要開始分割了!’此時,<BODY>是派不上用場的,所以躲到一旁涼快去了!

  3. 現在開始動手割割看啰!我們先將畫面分成左右兩邊(左邊就是框窗 1 了,右邊就暫定為 2 等一下還要分割呢!),如下圖:

    原始碼 呈現結果
    <HTML>
    <HEAD>
    <TITLE>框窗實作</TITLE>
    </HEAD>
    <FRAMESET COLS="120,*" >
     <FRAME SRC="a.htm" NAME="1">
     <FRAME SRC="b.htm" NAME="2">
    </FRAMESET>
    </HTML>
       

  4. 在<FRAMESET>中,我們要告訴電腦到底是要左右分(COLS)?還是上下分(ROWS)。一開始我們是左右分,所以我們寫成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說,左邊那一欄強制定為 120點,右邊則隨視窗大小而變。除了直接寫點數外,我們亦可用百分比來表示,例如COLS="20%,80%"也是可以的。

  5. 然后,再將右邊的框窗再割成上下兩個畫面(也就是框窗 2 和 3 了)。如下圖:

    原始碼 呈現結果
    <HTML>
    <HEAD>
    <TITLE>框窗實作</TITLE>
    </HEAD>
    <FRAMESET COLS="120,*">
     <FRAME SRC="a.htm" NAME="1">
     <FRAMESET ROWS="100,*">
      <FRAME SRC="b.htm" NAME="2">
      <FRAME SRC="c.htm" NAME="3">
     </FRAMESET>
    </FRAMESET>
    </HTML>
       
     

  6. 看見了沒?原本的<FRAME SRC="b.htm" NAME="2">(在第 3 點的語法中)被另一組<FRAMESET ROWS="100,*" >所取代了!所以要注意喔!第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來的喔!(亂七八糟了對不對?)

  7. 呵呵...不知不覺就大功告成了,其實只要將最后完成的那些語法存成 index.htm,然后再準備三個檔 a.htm 、b.htm 、c.htm那么就完工啰!當然,這是一個最陽春的分割法,我會再將一些進階的標簽在底下一一說明。



【其他標簽參數說明】

<FRAMESET COLS="120,*" frameborder=0 framespacing=5>

  1. COLS="120,*"
    就是垂直切割畫面啦!你可以一次切成左右兩個畫面,當然也可以切成三個,很簡單只要寫成 COLS="30,*,50" (數字隨便您自己調整啦!),依此類推,四個以上當然就是四組數字啦!

  2. ROWS="120,*"
    就是橫向切割畫面,也就是將畫面上下分開,切法同上。

  3. frameborder=0
    設定框架的邊框,其值只有 0 和 1 , 0 就是不要邊框, 1 就是要顯示邊框。邊框是無法調整粗細的。

  4. framespacing=5
    表示框架與框架間的保留空白的距離,以免看起來太擠。
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>

  1. SRC="a.htm"
    設定此框架中要顯示的網頁名稱,每個框架一定要對應一個網頁,否則就會產生錯誤,這里就是要您填入對應網頁的名稱。(如果該網頁在不同目錄,記得路徑要寫清楚)

  2. NAME="1"
    設定這個框架的名稱,這樣才能指定框架來作鏈接,所以一定要設定喔!當然名稱隨你高興取名。

  3. frameborder=0
    設定框架的邊框,其值只有 0 和 1 , 0 就是不要邊框, 1 就是要顯示邊框。邊框是無法調整粗細的。

  4. scrolling="no"
    設定是否要顯示卷軸,YES是要顯示卷軸,NO是無論如何都不要顯示,AUTO是視情況顯示。

  5. noresize
    設定不讓使用者可以改變這個框框的大小,如果沒有設定這個參數,使用者可以很容易的拉動框架,改變其大小。

  6. marginhight=2
    表示框架高度部份邊緣所保留的空間。

  7. marginwidth=2
    表示框架寬度部份邊緣所保留的空間。



【相關用法】

◆ <noframe>

  1. 使用方法:<noframe>請換有支援Frame功能的瀏覽器</noframe>

  2. 標簽解說:有些瀏覽器較為老舊,無法顯示Frame的功能,因此,就要使用此標簽,讓這些網友知道,該換換瀏覽器了。或者,你也可以在這標簽中,擺上沒有Frame語法的網頁標簽,那么,沒有支援Frame功能的瀏覽器,便會自動顯示沒有Frame語法的網頁。

◆ target=框窗名稱

  1. 使用方法:<A HREF="d1-1.htm" target=3>顯示內容</A>

  2. 標簽解說:常常有一個情況是,我想在框窗 1 的地方按下鏈接,但是希望他的內容出現在框窗 3 中(請參照上面那個圖),那應該如何寫呢?就像上面加個 target=框窗名稱 就行啦!

◆ target=_top

  1. 使用方法:<A HREF="http://www.kimo.com" target=_top>奇摩站</A>

  2. 標簽解說:有時候,在框窗里會鏈接到別的站,卻發現,新鏈接的這個站,竟然被框窗包住了,不但難看,而且可能會吃上官司說!所以,這時候你必需加入 target=_top這個參數,那么,這個新連到的網站,就會重新占據整個螢幕啦!

4.13 其他技巧 <回細說索引>

網頁配色及背景音樂

首先是網頁的底色,通常是白白的,要怎么做變化呢?可以做自己的背景圖片。

要注意一點,如果背景和文字顏色一樣~或者顏色相近,天啊~那誰知道你在寫什么呀?最好文字與背景顏色有對比,像敝人當初,網頁背景是黑的,字是白的紅的,就可以很明顯的突顯出文字。如果圖片中有文字,也要盡量淡化,否則影響內容就不好啰!

內容的東西顏色要配的適宜(除非你想要有奇怪的風格),不然像背景大紅大紅,太刺眼了,有人會想去嗎?剩下的就讓您自己配配看吧!

然后是音樂,有人喜歡用bgsound標簽

<bgsound src="music.mid">

可是用NetScape看就沒有聲音了最好用embed標簽 <embed src="music.mid">

這樣就可以正常播放了唷~

首頁應有的特質及重要性

  1. About Open Page:打開browser看到網站的第一個部份,有人稱之為Open Page(通常是首頁的一半或三分之一),這個部份應該包含網站的主功能(亦即使用者上這個網站最希望或者最可能做的事),ex. 一進入Allproducts.com即可看到“Key word search”及“Search by category”,應該盡量避免讓使用者還要使用mouse上下左右拉才能看到他(她)所想要的功能或資訊,有時資訊太多,在不得已的情況下,頁面可以往下沿申,但切忌右左劃面過大,不符一般人的使用習慣,也會造成列印上的困擾。

  2. 主題明確:Open Page應包含公司Logo、網站主題(最好是一段簡短的Slogan,讓使用者一看就知道這個網站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)

  3. Navigation:讓使用者很明確了解他(她)目前在網站的什么地方(或功能),首頁上應該有主要功能的鏈接,各個icon如果可能的話,盡可能加上一些純文字的說明及link;至于icon或者link的擺放亦應有其相對應的邏輯,如與整個網站或大架構較為相關的,放在較外層,與目前執行的功能或頁面較為相關的link應該放在內層;另外,最好能在首頁上提供Site Map的鏈接,讓使用者可以很快了解網站的架構;所有的link應該把握 intuitive , obvious , fast的原則。

  4. Color or image:對于顏色的采用,應該考慮到該網站的特性及與其它相關網站的區別,特別是首頁的顏色配置,應該讓使用者感覺很舒服、沒有壓迫感,但又不失其專業性,但切忌過度追求美感而犧牲其功能性,就公司目前的網站設計理念,應該是功能性的考量優于純美術的考量,首頁的設計最好設定在60k以內,而且不要用太多層的table。

  5. Meta tag:該部份不會出現在前端的頁面上,但網站規劃時應該將該部份一并考量,做為網站登錄時使用,網站上線時務必將相關資料加入。

  6. 其它:首頁上應該有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(內定值)。

回到頂部

四川快乐12怎么杀号