| 【示範】按鈕需外部鏈結，請連線使用 | |
|
|
|---|
|
壹、運用說明： 我們都知道：在網路上圖檔是越小越好，加了表格您就可以把大圖變小了。 我們都知道：表格不能畫出圓形或不對稱欄與列位，可是但加了圖檔就可以了。 簡單的圖檔及表格很容易製作，但是複雜的圖檔及表格就不簡單了。 這一期我特別介紹幾個有意思的圖檔表格給大家參考，希望您能舉一反三，做出更多有創意的圖檔表格。 |
|
貳、圖檔基本HTML語法： 基本架構：<IMG SRC="路徑\圖案名稱.附檔名 相關屬性...."> 相關屬性：(可任選擇或不依序使用) ALT="給圖片的註解文字"。 BORDER="N" 圖檔邊框值，0表示無邊框。 WIDTH="PIXELS" 圖檔寬度值，單位像素。 HEIGHT="PIXELS" 圖檔高度值，單位像素。 ALING="TOP、MIDDLE、BOTTOM、LEFT、RIGHT" 圖檔水平排列方式。 HSPACE="PIXELS"(左右)， 圖檔周邊左右空隙值，單位像素，H=水平(Horizontal)。 VSPACE="PIXELS"(上下)， 圖檔周邊上下空隙值，單位像素，V=垂直(Vertical)。 |
|
參、表格基本HTML語法： 基本架構：<TABLE><TR><TD>文字或圖片</TD></TR></TABLE> 其他標籤： 列位<TR>...</TR>、標題欄位<TH>...</TH>、標題<CAPTION>...</CAPTION> <TABLE>...</TABLE>內常用屬性計有： BORDER="N" 表格邊框值，0表示無邊框，數字越大框線越粗。 CELLSPACING="N" 表格框線粗細，"N"表示粗細值，單位像素。 CELLPADDING="N" 表格內資料內容與四周邊的空隙，"N"表示空隙值，單位像素。 WIDTH="N" 表格寬度值，單位像素。 HEIGHT="N" 表格高度值，單位像素。 ALIGN="L/C/R" 表格水平排列方式。 註：L = LEFT C = CENTER R = RIGHT (以下同) BGCOLOR="RGB/COLOR" 表格底色值。 註：RGB = RED GREEN BLUE COLOR = ENGLISH COLOR NAME (以下同) BORDERCOLOR="RGB/COLOR" 表格邊框顏色值。 BACKGROUND="URL" 表格背景圖檔路徑\圖案名稱.附檔名。 BORDERCOLORDARK="RGB/COLOR" 表格框線顏色值 (IE Only)。 BORDERCOLORLIGHT="RGB/COLOR" 表格框線顏色值 (IE Only)。 <CAPTION>...</CAPTION>屬性計有(較少用)： ALIGN="L/C/R" 標題水平排列方式。 VALIGN="T/B" 標題垂直(上下)存放位置(IE Only)。 註：T = TOP B = BOTTOM (以下同) 列位<TR>...</TR>內常用屬性計有： HEIGHT="N" 表格列位高度值，單位像素。 ALIGN="L/C/R" 表格列位水平排列方式。 VALIGN="T/M/B" 表格列位垂直(上下)存放位置。 註：T = TOP M = MIDDLE B = BOTTOM (以下同) BGCOLOR="RGB/COLOR" 表格列位底色值。 欄位<TD>...</TD>內常用屬性計有： WIDTH="N" 表格欄位寬度值，單位像素。 HEIGHT="N" 表格欄位高度值，單位像素。 BGCOLOR="RGB/COLOR" 表格欄位底色值。 BACKGROUND="URL" 表格欄位背景圖檔路徑\圖案名稱.附檔名。 ALIGN="L/C/R" 表格欄位水平排列方式。 VALIGN="T/M/B" 表格欄位垂直(上下)存放位置。 COLSPAN="N" 表格欄位的合併，"N"表示向右合併欄位的數目。 ROWSPAN="N" 表格列位的合併，"N"表示向下合併列位的數目。 NoWrap 命令資料格內所存放的文字不會斷行。 標題欄<TH>...</TH>內常用屬性計有： WIDTH="N" 表格標題列位高度值，單位像素。 HEIGHT="N" 表格標題欄位高度值，單位像素。 BGCOLOR="RGB/COLOR" 表格標題欄位底色值。 BACKGROUND="URL" 表格標題欄位背景圖檔值。 ALIGN="L/C/R" 表格標題欄位水平排列方式。 VALIGN="T/M/B" 表格標題欄位垂直(上下)存放位置。 COLSPAN="N" 表格標題欄位的合併，"N"表示向右合併欄位的數目。 ROWSPAN="N" 表格標題列位的合併，"N"表示向下合併列位的數目。 NoWrap 命令標題資料格內所存放的文字不會斷行。 表格標籤英文原文： TH => Table Header、TR => Table Row、TD => Table Data、VAlign => Verticale Align |
|
肆、圖檔可放在表格內的那些位置及其他技巧： 01.<TABLE BACKGROUND="URL"> 註：URL = 圖檔路徑\圖案名稱.附檔名 (以下同) 02.<TD BACKGROUND="URL"> 03.<TD><IMG SRC="路徑\圖案名稱.附檔名 相關屬性...."></TD>內 04.表格結束標籤</TD></TR>，收尾不要省略，IE 與 NC 有些不一樣，請注意哦！ 05.利用表格的CELLSPACING="0" CELLPADDING="0"，可製作無縫接圖。 06.設計表格之初，Border值最好先設為"1"，等表格修正完成後再改為"0"。 07.網頁也可運用一些技巧，做出純表格變化花樣。 08.表格可作巢狀包覆使用，也可插入任何網頁元件，其內也可含蓋其他標籤。 09.大多數的表格標籤屬性，若無設定相關參數時，會以內定值顯示。 如TD="Left"、TH="Center"、ALIGN="Left"、BORDER="0"、CELLSPACING="2"、CELLPADDING="1"。 10.標籤的對稱使用也是很重要，由外往內或由內往外都可以，但是不可交叉使用； 正確：<Tr><Td>...</Td></Tr>；錯誤：<Tr><Td>...</Tr></Td>。 |
|
伍、用單一圖檔製作成列印表紙型： 只要一張底圖，就可以用表格把它做的如此特別。 
|
|
陸、用單一圖檔製作成立體型佈告欄： 這也是一張底圖，加些文字就可以用表格把它做的如此特別。
|
|
柒、用單一圖檔製作成可愛型表單： 這只是一張大的底圖加上簡單的表單表格，就可以用把它做的如此可愛。
|
|
捌、用上下兩張圖檔製作成外框型表單： 這是利用一張底圖，放於表格上下兩端，就可以用把它做的如此實用。
|
|
玖、用幾張角圖檔製作成立體型表單： 這是利用四張角圖檔及兩種背景顏色，就可以用把訂閱表單做的如此逼真。
|
|
拾、更多學習技巧： 更多範例，在本報教學會員教材中 。更多學習技巧.....，歡迎  本報教學會員。
|
|
結論與建議：(網站想長久經營與服務，有賴加值收益才能持續，以下為廣告內容，敬請支持) 01.這個【實用進階語法】單元，將會以最實用的各類程式，為大家介紹如何規劃與套用，敬請期待並歡迎訂閱！ 02.本報導資料取自網頁研習室教學會員檔案資料，內另附更多範例介紹，歡迎加入教學會員進一步研習。 03.我們還是強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，不要再用所見即所得軟體了。 04.如果您找不到有人可以詢問，又想徹底學會HTML語法，建議您加入我們的教學會員。 05.現在加入教學會員，提供一整年的諮詢顧問服務，並在半年內以無痛苦的學習方式，讓您自然輕鬆學會HTML。 06.贊助本報，一次取得本報第一階段所有資料，即可完整全部獲得近110餘篇精採報導內容。 07.本報自2002年開始接受網站委製，協助極需網站朋友，採最迅速、最便宜的方式，完整取得自己的網站。 08.對本報導有興趣，歡迎完整資料下載，俾利離線詳研；也拜託將本報導推薦給您需要的朋友，一起分享與成長。 09.電子報第二階段報導資料，持續每隔10日發表一次，歡迎訂閱，或加入教學會員完整取得。 10.本報導內容或資料，因限人數眾多，非本報教學會員，不接受任何疑惑解答，敬請見諒。 |
|
第二階段91.11.15.發行第032期 前期：介紹我做的戀戀莒光網站給您參考 |
|