- 最後登錄
- 2012-8-5
- 在線時間
- 978 小時
- UID
- 275
- 閱讀權限
- 140
- 精華
- 71
- 帖子
- 3799
- 日誌
- 0
- EXP
- 6040 點
- 金幣
- 4990 個
- 註冊時間
- 2008-3-27
  
- 帖子
- 3799
- EXP
- 6040 點
- 金幣
- 4990 個
- 好友
- 0
- 註冊時間
- 2008-3-27
|
壹、網頁設計的基本概念
網頁設計並非只是簡單的字體大小設定、簡單鏈結設定或使用很多花俏的技巧這麼簡單而已，想要設計出一個好的網頁，應當要把握下列幾項要點：
- 確認網頁的主要目的。這個環節往往是最重要的一環，想一想，你希望來參觀你網頁的人能獲得怎樣的收穫或概念呢？
- 你期望到你的網頁會是哪些人？你想吸引怎樣的人來參觀？你的網頁設計是要設計給怎樣的團體來看？所以在設計網頁時，請用以使用者的角度來設計。
- 圖片的最佳化，避免浪費下載的頻寬。一個好的網站，其圖片都會壓縮過，因為每個網站都會有自己的頻寬限制，比如說，你申請的是ADSL，那麼你的下載只有512Bit，但是上載卻只有64Bit，所以你只能提供64Bit(大約8K左右)給眾多的使用者參觀，若圖形資料過於龐大，那你的網站就會慢的比撥接上網還慢喔！
- 確認設計的解析度環境。現在一般的使用者大都還都用800*600像素的解析度居多，所以在設計網頁時，就可以以800800*600像素的解析度為基礎。
- 確認是否要跨平台，並且在各種瀏覽器皆能顯示，尤其在兩大瀏覽器的相容性上。(現在Internet Explorer佔有市場約95%的使用者)
- 請確認設計網站時，各個網頁間的一致性。讓整體的感覺是一致的，這樣瀏覽它們會覺得是一體成形的。
- 提供一個網頁間良好的導覽流程。讓參觀的使用者可以很順暢的找尋到欲查閱的資訊。
- 使用字型標籤(font)或是CSS(Cascading Style Sheet)時，請使用各種平台都有提供的字型，不要使用唯有自己電腦才有的字型。因為使用者不會為了觀看你的網頁而去安裝字型的。(目前可以跨平台的字型大概有 Verdana, Arial,Helvetica, Courier New, Courier, Times New Roman)
- 請注意所使用的圖形及資料皆屬於自己所有，而不是連結或抄襲他人的。違反著作權法，是一見相當嚴重的侵害行為。
- 定期做好備份，以免一些不預期的事件發生。
- 若可以，也可以規劃一些策略來吸引客戶繼續光臨網站。
|
貳、HTML寫作注意事項
2.1 編輯工具：
- 記事本：因為編輯的是純文字。
- Dreamweaver：專業的網頁編輯器。
- FrontPage：微軟設計的網站編輯器。
- Ultra Edit：工程師常用的軟體之一，易用於文字編輯和程式撰寫。
當然，市面上還有很多其他的小工具，在此就不再列舉..。
2.2 注意事項：
- 雖然HTML標籤不分大小寫，但為了日後方便搜尋修改，最好還是統一大小寫。
- 在儲存檔案的時候，若單純只是html語法而已，請儲存成.html或.htm(不支援長檔名系統所用)，另外若使用的是Unix系統，則檔名的大小寫會有差別。檔名最好不要有空白字元，可用"_"代替。
- 適時地在網頁文件內加入說明標籤(如 <!-這裡是個人的介紹開始-->)，讓網頁文件的架構較適合用於程式語法的套用以及日後的修改。
- 常用到的HTML標籤語法，儲存在自己專用的標籤列表。
如 <img src="X" width="X" height="X" border="0" alt="X">
|
參、第一次認識HTML
在HTML語法中是由標籤(tag)和屬性(attributes)所組成，而瀏覽器就可根據這些標籤及屬性，轉譯成網頁呈現瀏覽器中。
■ 標籤及屬性的介紹
3.1 標籤(tag)：
大致上可以分成兩種，一種是用來網頁識別用；另外一種是用來呈現網頁用。
例如：
網頁識別: <html>、<head>、<meta>、<title>、<body>；
呈現網頁: <p>、<table>、<a>、<img>.....等都是用來展現網頁的標籤。
每個標籤中都會用以"<",">"兩個符號刮起來，而且多數都會成對出現。例如你要將「Microsoft」弄成斜體，你只要在文字的前後加入<I>與</I>兩個標籤就可以(如<I>Microsoft</I>)，其中<I>是個起始標籤，</I>是個結束標籤，這樣瀏覽器就會知道你要把Microsoft設定成斜體了。
當然囉！也是有部分標籤不需要成對出現，例如，<br>是一個中斷字元的標籤(斷行標籤)，那你只要在想要斷行的地方，打入<br>這樣瀏覽器遇到此標籤，就會把文字往下一行開始列出。
3.2 屬性(attributes)：
每一個標籤都有著自己的屬性，除了HTML標籤的本身所能描述的特性以外，大部分的標籤還會搭配上屬性，以提供更多的相關資訊。舉例來說，我們要將一段文字設定成標題1的標籤，並且設定成紅色、置中對齊，所以我們除了用<H1>和</H1>來包住文字外，還要加上紅色屬性以及置中對齊的屬性才行。
例如：
<H1>過一個香草瀰漫的下午</H1>
......只有標籤<H1> <<Simple>>
<H1><font color="FF0000">過一個香草瀰漫的下午</font></H1>
......<H1>標籤加入紅色屬性 <<Simple>>
<H1 align="center"><font color="FF0000">過一個香草瀰漫的下午</font></H1>
......<H1>標籤加入紅色屬性和置中對齊 <<Simple>>
通常屬性都會有一個值(value)，每個value都會隨著屬性的不同會有不同的選擇範圍，例如水平線<hr>，其align的屬性就只有left, right, center三種可以選擇。
請注意，我們通常會在值的前後加入一個雙引號"，但是若值為英文字母、數字(0-9)、減號(-)、小數點(.)所組成，那麼雙引號可以省略。
在標籤的使用上，有一種用法叫做『巢狀標籤(nesting tag)』，也就是說，我們需要使用一個以上的標籤來表示同一個資料，銜接剛剛的範例，我們若要把文字在變成有斜體字，並設定成粗體字，則可以如下處理：
<H1 align="center"><font color="FF0000"><B><I>過一個香草瀰漫的下午</I></B></font></H1>
......這意思就是先讓文字變成粗體在變成斜體
<H1 align="center"><font color="FF0000"><I><B>過一個香草瀰漫的下午</B></I></font></H1>
......這意思就是先讓文字變成斜體在變成粗體
<<Simple>>
絕不可以寫成以下狀況
<H1 color="FF0000" align="center"><I><B>過一個香草瀰漫的下午</I></B></H1>
......這樣就不是對應式的標籤喔～這是錯誤寫法！
3.3 空白字元：
在HTML中的空白字元，瀏覽器在呈現網頁時都會忽略標籤之間的空白字元，所以在編輯上，您可以標籤的層次利用空白來表示，比較容易修改。
3.4 特殊字元：
在HTML中有蠻多的特殊字元是不可以直接由鍵盤來輸入該字元，必須依照HTML的特殊字元表來輸入才行。
例如：你要在網頁上表示一個幾度C的度，就要輸入°才行。
|
肆、細說HTML標籤
在HTML語法中，大致上可以分為： ( 節錄自『網站建置百寶箱』)
- 網頁架構：主要網頁主架構的介紹
- 分隔標籤：也就是所謂的水平線
- 排版標籤：針對標籤的屬性，可做適當的版面編排
- 字體標籤：教導您設定文字的字體。
- 文字標籤：教導您設定文字的顏色、行距、變化.....等等。
- 影像標籤：教導您如何在網頁中，植入圖像。
- 背景標籤：教導您如何設定背景顏色或是背景圖像。
- 連結標籤：教導您如何設定超連結，以及開視窗的條件。
- 表格標籤：教導您如何在網頁中運用表格。
- 序列標籤：教導您如何設定文字序列或圖形序列。
- 表單標籤：教導您如何製作可填寫用的表單。
- 框架標籤：可讓同一個視窗由多個網頁一起組成。
- 其他技巧：讓您的整個網頁背景可以讓您設定為圖片或是聲音。
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，瀏覽器都會當作沒看見啦！ - 使用方法：強制斷行標籤<br>、強制分段標籤<p>
- 標籤解說：我們在寫文章時，有時候在特定的地方會強迫斷行（<br>），或是在寫完某一段的時候便會分段（<p>），寫網頁也一樣，而且更需要斷行及分段的功能，以免整個網頁看起來亂糟糟的。
- 使用範例：
| 原始碼 | 呈現結果 | | 這是一個斷行的範例<br>看出來了嗎？ | 這是一個斷行的範例
看出來了嗎？ | | 這是一個分段的範例<p>基本上他會比斷行還多空出一行 | 這是一個分段的範例 基本上分段會比斷行還多空出一行
|
【分隔線標籤】 - 使用方法：上一段文字內容<hr>下一段文字內容
- 標籤解說：利用<hr>這個標籤便可產生一條橫分隔線。另外，其有些屬性分別說明如下：
- 使用範例：
| 一般用法 | 尚未加任何屬性。 | | 原始碼 | 普通分隔線<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 排版標籤
【文字置左、置中、置右】 - 使用方法：老實說，剛剛我們學過的分段標籤<p>再加上一些簡單的屬性設定，就可以讓其整個文字段落置左、置中或置右了，就如下表所示：
| 原始碼 | 呈現結果 | | <p align="left">文字靠左</p> | 文字靠左 | | <p align="center">文字置中</p> | 文字置中 | | <p align="right">文字靠右</p> | 文字靠右 |
標籤解說：嗯！祕訣就在於「align=對齊位置」而已啦！align是分段標籤<p>的屬性之一，這個屬性將來會常常在不同標籤中看到，它的功能是專門在設定「水平對齊位置」，其常見的設定值有三個，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。
【置中標籤】 - 使用方法：<center>這是置中</center>
- 標籤解說：這個標籤是最常用到的標籤了，除了文字，對於圖片、表格，任何可以顯現在網頁上的東西都可以置中喔！
- 使用範例：
| 原始碼 | 呈現結果 | | <center>這是最中間</center> | 這是最中間 |
【向右縮排標籤】 - 使用方法：<blockquote>要縮排的文字</blockquote>
- 標籤解說：利用<blockquote></blockquote>這個標籤可以將其包起來的文字，全部往右縮排。而且加一組標籤，往右縮排一單位，加兩組標籤，往右縮排兩單位，依此類推。
- 使用範例：
| 原始碼 | 呈現結果 | | <blockquote>縮排1單位</blockquote> | 縮排1單位 | | <blockquote><blockquote>縮排2單位</blockquote></blockquote> | 縮排2單位
|
【保存原始格式標籤】 - 使用方法：<pre>文字內容<pre>
- 標籤解說：利用<pre></pre>這個標籤可以將其包起來的文字排版、格式，原封不動的呈現出來。算是相當好用的標籤之一。
- 使用範例：
| 原始碼 | 呈現結果 | <pre>
文 字
格 式
</pre> | 文 字 格 式 |
|
4.4 字體標籤
【標題標籤】 - 使用方法：<h1>標題內容</h1>
- 標籤解說：標題的大小一共有六種，兩個標籤一組，也就是從<h1>到<h6>，<h1>最大，<h6>最小。使用標題標籤時，該標籤會將字體變成粗體字，並且會自成一行。
- 使用範例：
| 原始碼 | 呈現結果 | | <h1>標題一</h1> | 標題一 | | <h2>標題二</h2> | 標題二 | | <h3>標題三</h3> | 標題三 | | <h4>標題四</h4> | 標題四 | | <h5>標題五</h5> | 標題五 | | <h6>標題六</h6> | 標題六 |
【設定字體大小標籤】 - 使用方法：<font size=3>文字內容</font>
- 標籤解說：標題的大小一共有七種，也就是<font size=1>（最小）到<font size=7>（最大），另外，還有一種寫法：<font size=+1>文字內容</font>，其意思就是說：比預設字大一級。當然也可以 font size=+2（比預設字大二級），或是 font size=-1（比預設字小一級），以一般而言，預設字體多為 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> | 字體七 |
【字型變化標籤】 - 使用方法：<b>文字</b>
- 標籤解說：在文字標籤裡，對於文字的格式也有相當多的變化，如粗體、斜體...等，此外，也定義了一些現成的格式供編者使用，如『強調』、『原始碼』...等，當然，這只是方便您參考用，並無強迫說遇到原始碼就要加上『原始碼』的標籤。
- 使用範例：
| 原始碼 | 呈現結果 | | <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> | 所在地址 |
【文字顏色設定】 - 使用方法：<font color="#fefecb">文字顏色</font>
- 標籤解說：文字也可以設定 顏色喔！至於顏色有哪些....這....哪天我心血來潮再來做個色彩對應表吧！
- 使用範例：
| 原始碼 | 呈現結果 | | <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 文字標籤
【文字字型設定】 - 使用方法：<font face="字型名稱">文字</font>
- 標籤解說：網頁上也可以使用字型喔！唯一的一個限制是：對方也要有該字型！否則看到的仍然還是細明體。另外要說明的是，這個標籤並無法保證在每個瀏覽器上都能正常的顯現，不過這並沒有關係，看不到特殊的字型時，瀏覽器仍會以細明體來顯示，所以不用怕會一團亂！ 另外，如果您的網頁中有加上這一行敘述<meta http-equiv="content-type" c>（指定網頁的語言格式，以後我會解釋），那麼，netscape可以正確顯示出中文，但英文無反應。若沒有加該行，那麼英文會正確顯示，但中文卻仍是細明體。至於 ie 系列，均能正常顯示。
- 使用範例：
| 原始碼 | 呈現結果 | | <font face="標楷體">標楷體</font> | 標楷體 | | <font face="華康儷中黑">華康儷中黑</font> | 華康儷中黑 |
【特殊字元】 - 使用方法：
- 標籤解說：很多特殊的符號是需要特別處理的，比如說" < "、" > "這兩個符號若想要呈現在網頁上是沒有辦法直接打" < "的，要呈現" < "必須輸入編碼表示法：「<」，常用的如下：
- 使用範例：
| 原始碼 | 呈現結果 | | ( 代表一個不斷行空白) | | < | < | | > | > | | & | & | | " | " |
【設定文字內定值大小】 - 使用方法：<basefont size="1~7">
- 標籤解說：這個標籤可以改變文字大小的內定值，直接加在<body>標籤之後就行了。一般而言，若是沒有特別設定，文字大小內定值預定值為3。
|
4.6 影像標籤 【影像標籤】 在使用影像標籤時有兩件事值得注意一下，一是檔名，二是路徑。首先要注意的就是，檔名是否正確以及大小寫是否一致！圖檔名稱不正確，任電腦再厲害也找不到您要的圖，檔名大小寫不一致，如Image.gif、image.gif、image.GIF在自己的電腦中看都能正確的顯示，但是一但傳到網路上去時，因為系統不一樣的關係（電腦伺服器的作業系統可比個人用電腦的作業系統嚴謹多了）就變成三個不一樣的檔案了，所以，可別忽略檔名大小寫不一致的影響。 另外一個就是路徑問題了，這個問題也不難，我們在稍後會提到。我們先來看看影像的標籤如何寫。 - 使用方法：<img src="boy.gif" alt="本站特約模特兒" align=right border=0 hspace=2 vspace=2 height=56 width=32>
- 標籤解說：目前常見的網頁圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色，不過色彩比較鮮豔乾淨漂亮，適合電腦美工圖案。而jpg格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用jpg格式來呈現。
- 使用範例：
| 基本用法 | 用法：<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下觀看，會稍有不正確。
【網頁影像重要觀念】 - 關於路徑：現在我們來談談圖片路徑的事，路徑不對，不管您的網頁名稱寫的多正確也沒用，因為瀏覽器無法尋著您的路徑去找到該有的圖片，所以，我們來看看該如何正確的使用路徑。有些人並不喜歡將網頁及圖通通放在同一個目錄下，比如說有人將圖檔全放在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中。以上我們使用的均為「相對路徑」的概念。 - 影像單位：或許您會常常看到px這個單位，沒錯，這是我們在製作最常用的一個單位了。這個單位完整的寫法是「pixels」，我們稱之為「像素」。像素，是螢幕上的一個小光點，然而這一小光點的大小，並非是固定的，舉個例子而言，螢幕本身十五吋，不會因為你的任何設定而變成十七吋。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：「640 ×480」、「800 ×600」、「1024 ×768」。舉其中之一的640 ×480來說，其代表的就是在螢幕上有寬640個光點，高有480光點，若是我們將解析度調整為800 ×600其寬勢必要從640變成800個光點，也因此，該光點便會變小一點，所以，我們看起來就會覺得解析度調高後，螢幕內的東西，變得小小的，很精緻，那就是因為光點變小的原因。
- 影像格式：網頁用的圖檔目前只有gif格式（即副檔名為gif的圖檔，如：bg.gif）以及jpg格式（即副檔名為jpg的圖檔，如：bg.jpg）為一般的瀏覽器所接受。其他如bmp格式或是pcx格式都是無法在網頁上使用的，若非得要用，那就利用影像繪圖軟體來作格式的轉換吧！
| 圖檔範例 | 說明 | ![]() | gif格式的圖形只能以256個顏色顯示，雖然其色彩較少，但顏色鮮豔亮麗，若是圖形顏色不多，用gif格式存檔會較漂亮。 | ![]() | jpg格式的圖形是以全彩顯示，適合用在相片或是漸層顏色的圖片上，壓縮比例以75%為適中。 |
|
4.7 背景標籤 【背景標籤】 說穿了，背景標籤只有<BODY>這個標籤，其餘的效果，只要加上一些簡單的屬性便可做到。 - 使用方法：<body bgcolor="#ffffff" background="bg.jpg">
- 標籤解說：這個標籤其實應該老早就要講了，畢竟它是構成網頁不可或缺的基本要素之一（哎哎哎...現在放馬後砲有什麼用！）。我們背景顏色或圖片的設定以及連結字體的顏色，通通都放在<body>這標籤裡面。我就其屬性來一一解說：
| 背景顏色 | 用法：<body bgcolor="顏色碼">
設定背景顏色。有人會說：『我已經設定了背景圖片，那背景顏色還有用嗎？』當然有用！當使用者連結到貴站時，若背景圖案還沒傳輸完之前（有的背景圖蠻大的），就會先顯現背景顏色，您說，是不是比一片灰灰的好看多了呢！ | | 原始碼 | <html>
<head>
<title>這是標題</title>
</head> <body bgcolor="#f9e6a2"> 這裡是本文區 </body>
</html>
| | 呈現結果 | 按下此處觀看結果 |
| 背景圖案 | 用法：<body background="圖檔名稱、路徑">
g設定背景圖案。圖檔可以是jpg或gif格式的圖檔，我建議：圖檔不要太大，否則網頁載入會蠻慢的。 | | 原始碼 | <html>
<head>
<title>這是標題</title>
</head> <body background="bg.jpg"> 這裡是本文區 </body>
</html>
| | 呈現結果 | 按下此處觀看結果 |
【內文、連結文字顏色設定】 - 使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>
- 標籤解說：用字體標籤中的顏色屬性，可以設定文字的顏色，不過，卻沒有提到文字的顏色內定值該如何修改，這個<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連結標籤基本概念】 - 連結基本概念：一般而言，所謂連結就是，在網頁中有些字會有特別的顏色，而且字的底下會有條線，當游標移到那些字上時，會變成手指形狀，按下去，則會連到別的文章或網站，就像這樣（以上這段是給超級新手看的...）。 扯到連結，最基本來看有『內部連結』及『外部連結』，所謂『內部連結』就是自己網站間網頁的連結，至於外部連結我們稍後再來討論。 要了解內部連結，首先必須先了解一下這兩種東西，一個是『相對路徑』，一個是『絕對路徑』。 現在假設一個情形：我們在自己的電腦裡設計網頁，所有網頁相關的檔案我們通通放在 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"> | 這是『相對路徑』的寫法 |
如何？不難吧！（只是字有點多，看到腦子發脹）
| - 總整理：很亂嗎？嗯...看看這表，或許會清楚些。
| 相對路徑表示方式 | 代表連結位置 | | <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:\底下了） |
【網頁內部的連結】 - 使用方法：
- 先在欲連結處作記號：<a name="here1">這裡是你想連結的點</a>
- 設定連結：<a href="#here1">連結</a>
- 標籤解說：有時候，當某頁的內容很多時，我們可以利用網頁的內部連結，來使使用者快速的找到資料。其原理不過是：在欲連結處做個記號（網頁的任何地方都可以喔！），然後，連結時就尋這記號，就可以快速找到資料。很簡單吧！
- 使用範例：
| 範例 | 第一步驟 | 第二步驟 | | 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> |
【網頁外部的連結】 - 標籤解說：連結到外面去，可以擴充您網站的實用性及充實性，也正因這功能，才造就了www五彩繽紛的世界。由於網路上的服務五花八門，所以不同的服務有不同的連結方法，我將之整理在下表。
- 使用範例：
| 網站連結 | 好站 | <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> |
【連結標籤的參數】 - 使用方法：在連結後面加入 target=_參數
- 標籤解說：連結的參數並不多，常見的大概就屬 target 這參數了，target 的意思是『目標』，也就是網頁連結的指向目標，這參數在框窗（frame）裡尤為重要！
- 使用範例：
- 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列的表格。聽不太懂嗎？沒關係，以下咱們就來慢慢的看個仔細： - 首先我們來看一個最簡單的表格：
| 原始碼 | 呈現結果 | <TABLE BORDER=1>
<TR><TD>1</TD></TR>
</TABLE>
| |
利用<TABLE>這個標籤來告訴電腦，這是一個表格，至於 BORDER=1 這參數是設定此表格的框線粗細為 1。一組<TR></TR>是設定一橫列的開始。一組<TD></TD>則是設定一個欄位。當然，文字就是要擺在這裡面。 - 現在我們再來增加二個格子：
| 原始碼 | 呈現結果 | <TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
| |
- 看見沒有，<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 格通通合併變成一大格：
| 原始碼 | 呈現結果 | <TABLE BORDER=1>
<TR><TD COLSPAN=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
| |
您應該會發現，怎麼2、3都消失了？只剩下1，而且該欄的<TD>標籤還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是「左右欄位合併」的屬性，COLSPAN="3"的意思就是「這個欄位左右橫跨了3個欄位」，也正因如此，本來的兩個<TD>都可以省掉了，因為都被併掉了嘛！ - 上下欄位合併：學會了左右合併！接下來，咱們就來看看，如何上下合併，將 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與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，而在1的<TD>標籤中則多了個生面孔ROWSPAN，這就是「上下欄位合併」的屬性，ROWSPAN=2的意思就是「這個欄位上下連跨了2個欄位」，其結果如下：
【表格欄位對齊位置設定】 - 我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的「寬」及「高」喔！我們來製作一個寬100、高60的表格，做法如下：
| 原始碼 | 呈現結果 | <TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE> | |
- 哎呀！怎麼 1 老是在表格的左邊呢？可以弄到中間嗎？當然可以，只要在<TD>加入 ALIGN=CENTER 這參數即可：
| 原始碼 | 呈現結果 | <TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER>1</TD></TR>
</TABLE> | |
此外，利用 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> | |
利用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> | |
將BGCOLOR="顏色碼"加在<TR>中，可以指定「一列」的背景顏色： | 原始碼 | 呈現結果 | <TABLE BORDER="1" >
<TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE> | |
將BGCOLOR="顏色碼"加在<TD>中，可以指定「一欄」的背景顏色： | 原始碼 | 呈現結果 | <TABLE BORDER="1" >
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE> | |
- 表格除了可以設定底色外，也可以用圖片來作背景嗎？當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱"加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，您也可以指定某欄或某列的背景圖片：
| 原始碼 | 呈現結果 | <TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE> | |
將BACKGROUND="圖片名稱"加在<TD>中，可以指定「一欄」的背景顏色： | 原始碼 | 呈現結果 | <TABLE BORDER="1">
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE> | |
【表格框線設定】 - 如何設定表格粗細？只要利用BORDER="粗細值"就行了。
| 原始碼 | 呈現結果 | <TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>
| |
- 如何設定表格顏色？只要利用BORDERCOLOR="顏色碼"就行了。
| 原始碼 | 呈現結果 | <TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>
| |
- 另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感喔！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設定） BORDERCOLORDARK="顏色碼"（暗面設定）就行了。
| 原始碼 | 呈現結果 | <TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>
| |
【表格欄距設定】 - 我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離，這個屬性很好用，保持適當的距離，看起來比較舒服。一般而言內定值為2，不過我建議設定為4比較漂亮。
| 原始碼 | 呈現結果 | <TABLE BORDER="1" CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
| |
- 我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。一般而言內定值為2，不過我通常習慣設為 0 。
| 原始碼 | 呈現結果 | <TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
| |
|
4.10 序列標籤
【無序標籤】 - 序列標籤基本上可分為兩種，一種是「無序條列」，一種是「有序條列」。所謂「無序條列」當然就是意指各條列間並無順序關係，純粹只是利用條列式方法來呈現資料而已，此種無序標籤，在各條列前面均有一符號以示區隔。至於「有序條列」就是指各條列之間是有順序的，從1、2、3…一直延伸下去。
- 我們先來看看「無序列表標籤」如何使用：
| 原始碼 | 呈現結果 | <UL>
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</UL> | - 姓名：傑克昇
- 生日：1974/11/21
- 星座：天蠍座
|
其中<UL>標籤即為「無序列表標籤」，每增加一列內容，就必須加一個<LI>。 - 前面的符號一定是要圓形的嗎？不，我們可以加入TYPE="形狀名稱"屬性來改變其符號形狀，一共有三個選擇：DISK（實心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種（由於本頁使用CSS故僅於Netscape看得出效果。）：
| 原始碼 | 呈現結果 | <UL TYPE="CIRCLE">
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</UL> | - 姓名：傑克昇凱
- 生日：1974/11/21
- 星座：天蠍座
|
【有序標籤】 - 接下來，我們來看看「有序列表標籤」如何使用：
| 原始碼 | 呈現結果 | <OL>
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL> | - 姓名：傑克昇
- 生日：1974/11/21
- 星座：天蠍座
|
其中<OL>標籤即為「有序列表標籤」，每增加一列內容，就必須加一個<LI>。 - 和無序列表標籤一樣，我們也可以選擇不同的符號來顯示順序，一樣是用TYPE屬性來作更改，一更有五種符號：1（數字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）等五種：
| 原始碼 | 呈現結果 | <OL TYPE="A">
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL> | - 姓名：傑克昇
- 生日：1974/11/21
- 星座：天蠍座
|
- 另外，我們亦可指定序列起始的數目，其方法如下：
| 原始碼 | 呈現結果 | <OL START="8">
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL> | - 姓名：傑克昇
- 生日：1974/11/21
- 星座：天蠍座
|
【定義列表標籤】 - 接下來我們要說明的這個標籤，是「定義列表標籤」也是屬於序列標籤之一。我們先來舉個例子，我們常常會在文章中看見這樣的格式：
CSS（Cascading style sheet） CSS是由W3C於1996年12月所公佈的一項新技術，什麼叫做Cascading style sheet？簡單說來他是一種具有階層性的形式設定，能夠讓網頁設計者在設計網頁時，對於網頁上的任何物件均有更佳的操控性… |
網頁裡也有可以做到這種效果的標籤喔！現在要來跟各位說的就是這個標籤。咱們先來看看這標籤的用法： - 我們先來看看「定義列表標籤」如何使用：
| 原始碼 | 呈現結果 | <DL>
<DT>小標題
<DD>標題的內容說明
</DL> | 小標題 標題的內容說明 |
|
4.11 表單標籤
【表單的用途】 對於一般的網頁設計初學者而言，表單功能其實並不常用，因為表單通常必須配合著CGI、JAVA Script程式或是ASP程式來運作，不然表單單獨存在的意義並不大。不過，一旦有機會將表單運用到網頁中時，您的網頁將擺脫單向呈現，而開始邁入和使用者互動的階段喔！ 本單元純粹以介紹各式表單為主，至於一些CGI或ASP觀念在此我就不提出了，因為提供零碎的觀念，倒不如去看看專門介紹CGI的書籍來的妥當。
【各種輸入類型】 - 文字輸入列：每個表單之所以會有不同的類型，原因就在於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="數值"，是設定此一欄位可設定輸入的最大長度。
- 單選核取表單：利用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，是設定此一欄位為預設選取值。
- 複選核取表單：利用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，是設定此一欄位為預設選取值。
- 密碼表單：利用TYPE=" PASSWORD "就會產生一個密碼表單，密碼表單和文字輸入表單長得幾乎一樣，差別就在於密碼表單在輸入時全部會以星號來取代輸入的文字，以防他人偷窺。
| 呈現結果 | 請輸入密碼： | | 原始碼 | <FORM>
請輸入密碼：<INPUT TYPE="PASSWORD" NAME="INPUT">
</FORM> |
其有下列可設定之屬性：- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- SIZE="數值"，是設定此一欄位顯現的寬度。
- VALUE="預設內容"，是設定此一欄位的預設內容，不過呈現出來仍是星號。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
- 送出按鈕：通常我們表單填完之後，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用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（絕對置下）等。
- 按鈕元件：表單中或是JAVA SCRIPT常會用到按鈕來作一些效果，因此，我們可以利用TYPE=" BUTTON "來產生一個按鈕，相當簡單。
| 呈現結果 | 請按下按鈕： | | 原始碼 | <FORM>
請按下按鈕：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
</FORM> |
其有下列可設定之屬性：- NAME="名稱"，是設定此一按鈕的名稱。
- VALUE="文字"，是設定此一按鈕上要呈現的文字。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- 隱藏欄位：表單中有時有些東西因為某些因素，不想讓使用者看到，但因程式需要卻又不得不存在，此時，我們就可以利用TYPE=" HIDDEN "來產生一個隱藏的欄位。
| 呈現結果 | 隱藏欄位： | | 原始碼 | <FORM>
隱藏欄位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到">
</FORM> |
其有下列可設定之屬性：- NAME="名稱"，是設定此一欄位的名稱。
- VALUE="文字"，是設定此一欄位的值、文字或意義。
【大量文字輸入元件】 - 有時候我們會希望讓使用者輸入比較大量的文字，此時，文字輸入列就顯得不敷使用，因此我們就可以利用<TEXTAREA></TEXTAREA>來產生一個可以輸入大量文字的元件，夾在兩個標籤中的文字會出現在框框中，可作為預設文字。
| 呈現結果 | 請輸入您的意見：
| | 原始碼 | <FORM>
請輸入您的意見：<BR>
<TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
</FORM> |
其有下列可設定之屬性：- NAME="名稱"，是設定此一欄位的名稱。
- WRAP="設定值"，是設定此一欄位的換行模式。設定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視為沒有換行）、PHYSICAL（輸入文字會自動換行，送出資料時，會將螢幕上的自動換行，視為換行效果送出）。
- COLS="數值"，是設定此一欄位的行數（橫向字數）。
- ROWS="數值"，是設定此一欄位的列數（垂直字數）。
【下拉式選單】 - 下拉式選單令整個網頁看起來有很專業的感覺，我們只要利用<SELECT NAME="名稱">便可以產生一個下拉式選單，另外，還需要配合<OPTION>標籤來產生選項，這樣才算完整喔！
| 呈現結果 | 您喜歡看書嗎？： | | 原始碼 | <FORM>
您喜歡看書嗎？：
<SELECT NAME="LIKE">
<OPTION VALUE="非常喜歡">非常喜歡
<OPTION VALUE="還算喜歡">還算喜歡
<OPTION VALUE="不太喜歡">不太喜歡
<OPTION VALUE="非常討厭">非常討厭
</SELECT>
</FORM> |
其有下列可設定之屬性：- SIZE="數值"，是設定此一欄位的大小，預設值為1，若是您的選項有四個，然後您將SIZE設成4，那麼，下拉式選單便會變成選項方塊，將四個選項一起呈現在方塊中。
- MULTIPLE，是設定此一欄位為複選，可以一次選好幾個選項。
|
4.12 框架標籤
【框架的基本概念】 - 首先，各位先看看右手邊這張圖，我將利用這張圖來作解說，這樣子，講起來可能會清楚一點。
![]() OK！我們可以看見，右邊的這個視窗，一共分為 1 、 2 、 3 三個框架，每一個框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個檔案。然而左下角的那個 index.htm 是做什麼用的呢？ - 原來，左下角的這個檔案 index.htm，就是要告訴電腦，我們要將畫面分割成這樣，也就是說，所有Frame的標籤，其實都只擺在 index.htm 這個檔案裡。（當然，不是檔名一定要叫做 index.htm 取其他檔名也是可以的。）
- 這樣明白了嗎？總之，您要分割幾個框框，就一定會有幾個對應的html檔案（假如您要分割100個框框，就要有100個html檔就對了。），另外，還會多一個檔案是來告訴電腦要如何分割的。（也就是例中的 index.htm 檔啦！）
【開始分割】 - 別急、別急，分割視窗可是一門學問，要分割也是要一步一步來的。看看剛剛那例子，想像畫面是一個蛋糕，你要怎麼割，才能割成那樣呢？
| 原始碼 | 呈現結果 | <HTML>
<HEAD>
<TITLE>框窗實作</TITLE>
</HEAD>
</HTML>
| |
- 各位會發現，奇怪，在上面的語法中，怎麼都沒見到<BODY></BODY>熟悉的身影？呵呵...沒錯，它已經被待會兒要加進去的<FRAMESET></FRAMESET>標籤給取代了！也就是說，如果我們要分割畫面，就要先用<FRAMESET>標籤告訴電腦說：『喂！我要開始分割了！』此時，<BODY>是派不上用場的，所以躲到一旁涼快去了！
- 現在開始動手割割看囉！我們先將畫面分成左右兩邊（左邊就是框窗 1 了，右邊就暫定為 2 等一下還要分割呢！），如下圖：
| 原始碼 | 呈現結果 | <HTML>
<HEAD>
<TITLE>框窗實作</TITLE>
</HEAD>
<FRAMESET COLS="120,*" >
<FRAME SRC="a.htm" NAME="1">
<FRAME SRC="b.htm" NAME="2">
</FRAMESET>
</HTML>
| |
- 在<FRAMESET>中，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）。一開始我們是左右分，所以我們寫成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說，左邊那一欄強制定為 120點，右邊則隨視窗大小而變。除了直接寫點數外，我們亦可用百分比來表示，例如COLS="20%,80%"也是可以的。
- 然後，再將右邊的框窗再割成上下兩個畫面（也就是框窗 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>
| |
- 看見了沒？原本的<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
表示框架與框架間的保留空白的距離，以免看起來太擠。
[td][/td] | | <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" c>
說明網站的格式及編碼方式，另外這個功能也可以拿來說明網站的名稱。 - <meta name="keyword" c>
剷明整個網站的關鍵字，關鍵字間用逗點隔開，總長度最好不要超過1000個Character (約44個字)。 - <meta name="description" c>
剷明整個網站為何吸引人的地方，可用逗點隔開，總長度最好不要超過200個Character (約15個字)，若文章真的太長，可以切割成兩個部分，較不重要的部分置入下一個Description。 - <meta name="robots" c>
此功能是要給搜尋引擎使用的，是要用來告訴Spider哪些網頁是要去擷取的或不用去擷取的，一般都設定成All(內定值)。
|
伍、認識CSS階層樣式表
【CSS是什麼碗糕？】
要講CSS之前，先要概略知道HTML 4.0這個東西。HTML 4.0大家或多或少有有聽說過吧！有人亦稱之為Dynamic HTML（動態語言）。我在這裡簡單的介紹一下這東西，Dynamic HTML實際上包含了三大要素，那就是「傳統的HTML」、「Script語言」以及「CSS」，換言之，您要完全操作Dynamic HTML語言，那麼以上三項要素您都要相當熟捻才行。
「傳統的HTML」，也就是所謂的HTML3.2，在上一個系列的教學文章已經涵蓋其大部分，若是您還不太熟，建議您Ｋ完後再來看這一系列文章比較好一點。至於，「Script語言」則是指JavaScript或是VBScript語言，這部份若是想學好，那又要花一番工夫了！等到這一系列寫到一個段落後，我們再來謝謝這方面的文章吧！而剩下的「CSS」就是這一系列文章要說明的玩意兒啦！
CSS是「Cascading Style Sheets」的縮寫，Cascading是串接、連接之意；Style則是風格、款式之意；Sheets則是一頁紙、表的意思。所以呢，要以中文來解釋CSS的話呢，您可以稱之為「串接樣式表」。很奇怪的一串名詞對不對，其實，當您CSS用習慣後，您會發現它會這樣被稱呼還蠻貼切的。
【CSS能做什麼？】
CSS能做什麼？可做的事可多著，不過，以最簡單的方式來比喻其功能的話，我們可以說它是網頁的美容師，凡是網頁上看得到的文字、圖片、表格、表單都有它發揮的空間，文字方面，您可以利用CSS來隨意設定字體大小（不再像HTML最大只能到size=7而已），設定行距、間距、去除連結底線…等。
您也可以利用CSS將圖片或文字精準的定位在網頁上的某一個地方，更可以更改表單、表格的框線、顏色…等，您甚至可以更改滑鼠形狀或是做出類似簡報的轉場效果。這些只是我隨便舉幾個效果而已，實際上，若是要認真講解，是可以寫成一本書的。所以，今天主題不再介紹CSS，若是看完這篇介紹後，還覺得意猶未盡的人，可以自行去買相關的書籍來閱讀喔！但是，我個人真的覺得，懂得使用CSS，真的會讓您再製作網頁上如虎添翼的，所以建議一定要瞭解。
|
陸、開始設計一個網站
各位同學，這就是要給你們的作業喔！(必定要交喔～因為會佔您的學期總成績25%！)
請好好利用以上的方法，製作一個屬於自己專屬的網站，網站的主題是『網頁履歷表』，格式不設限，不侷定你們的創造力，把自己的色彩表達出來，但是至少要有以下的幾項內容喔～
- 設計風格的描述。(包括你想表達的意念，你希望參觀你網站的人能得到什麼，感覺到什麼)
- 網站導覽。(整個網站的導覽列)
- 基本背景資料的介紹。(圖文並茂的自我簡介，請善用表格標籤)
- 學習成長經歷的介紹。(在校或是社會工作經歷的簡介，並做一個下拉式清單)
- 未來期許。(把自己對未來的規劃描述出來)
- 訪客流言。(做一個表單可以讓User來填寫建議，可先不連結程式)
- 自創部分。(想做什麼就做什麼)
- 版權宣告。
|
[ 本帖最後由 dlalden 於 2008-10-27 19:20 編輯 ] |
|
發表於 2008-10-27 19:14:11
分享
收藏
