你嘛幫幫忙！所謂「1×1 圖案」不過就是個小點，有什麼好講的。
再看看上方這條黑線，難道……它是……？
沒錯，它就是本單元的主題：1×1 圖案。因為 1×1 圖案的高度和寬度各只有一點而已，無論在檔案大小和製作容易程度上都非常適合，所以愈來愈多的網頁設計工作者開始使用它來構成線條或框格。
製作圖案
除非你直接下載艾爾弗烈德的 1×1 圖案，製圖的工作是不能避免的，我通常是使用小畫家(MS Paint)，你可以使用任何你熟悉的軟體。有些軟體規定圖形高度和寬度至少要兩點，沒有關係，2×2 圖案也不錯。
我發誓，上列正中央真的有一個 1×1 黑點，不知道你看出來沒有？貼近螢幕，用力仔細看，小心別弄出一個油油的鼻印來！
很奇妙吧！上方所有黑點、黑線和黑塊都是由同一個圖形構成的。
設定高度及寬度
在 新手入門：第五單元 中，我們已介紹過高度及寬度屬性，這裡不再贅述。上方的大黑塊的語法如下：
<IMG SRC="1×1.gif" width="320" height="25" alt="1×1 black" />
你也許會問為何要這樣做？<HR>旗標就可以畫出一條水平線了，幹嘛如此費事呢？因為某些瀏覽程式，<HR>只能是一條半透明線，不能設定顏色屬性。1×1 圖案可以自由設定顏色，如下方藍線及紅線：
而且1×1 圖案在網路上的傳送速度快，參考下表：
| 水平線尺寸 (256色) | 檔案大小 |
| 320×2 (上方細黑線大小) | 640 bytes |
| 320×25 (上方粗黑塊大小) | 8000 bytes |
| 1×1 (上方黑點大小) | 1 byte |
只使用 1×1 圖案可以減少另外兩個較大檔案的傳輸時間；而且以一代多，可以減少網路伺服主機的負荷，也增快網頁回應速度。
如果你使用 2×2 圖案，那麼花樣就更多了，例如下方的4色線條；
或是 2×10 圖案，例如下方的16色線條；
這些線條也許不好看，你可以自行製作一些好看的線條。不過，其中最複雜的16色線條才只要30 bytes而已，太令人驚奇了！
下載圖案
這兒有一些 2×2 圖案，因為原圖尺寸在螢光幕上只是一個小點而已，所以我先放大了，方便你點選下載。
藍色
紅色
黑色
綠色
紫色
橙色
肉色
白色(用力看，這兒真的有白色圖案哦！)
黃色
本文配合HTML 4.0撰寫，新版HTML均可向前相容。
0 留言:
張貼留言