2009年11月1日 星期日

HTML再接再厲(七):背景

背景顏色

看膩了一成不變的白底黑字了嗎?想要為自己的網站加點變化嗎?最簡單的方法就是替網頁加上背景顏色,網頁立刻顯得活潑起來。首先,你要以<BODY>旗標告訴瀏覽程式你想要更換背景顏色,接著你就要設定色碼。一篇網頁通常是這樣的:

<HTML>
<HEAD>
<TITLE>……</TITLE>
  ……  ……
</HEAD>
<BODY BGCOLOR="rrggbb">
  ……  ……
  ……  ……
</BODY>
</HTML>

  • <BODY> 本文開始旗標。通常放在放在<HEAD></HEAD>之後;若是簡單的網頁(省略了<HEAD></HEAD>),則放在<TITLE></TITLE>之後。
  • BGCOLOR= 背景顏色(BackGround COLOR)的英文縮寫,設定背景顏色屬性rrggbb為六個十六進位的色碼,可以設定出16,777,216種顏色。不過不見得每一台電腦都能顯示這麼多顏色,而且它們不是很好記憶。你不妨參考一下 常用色碼命名 或 GIF安全色盤,應該可以找到一些適當的顏色,把色碼隨手抄下來,試用於你的網頁上,再選擇最合意的。
  • </BODY> 本文回復旗標。通常放在頁尾的</HTML>之前。

如果你仍然不滿意艾爾弗烈德提供的色表中的顏色,那就還是用白色(FFFFFF)好了,畢竟白色是最為廣泛使用且被接受的網頁背景顏色。

背景圖案

背景圖案非常類似於在牆壁上貼上一片片的瓷磚,如果功夫細沒有接縫,每一片又和上下左右鄰片的紋路穩合,完成後就渾然一體,看不出是一片片拼出來的。首先你找一個合適的小圖案,GIF或JPG規格皆可,然後告訴瀏覽程式你想要設定背景圖案,其檔案名稱為何。其語法如下:

<BODY BACKGROUND="image.gif"><BODY BACKGROUND="image.jpg"><BODY BACKGROUND="image.png">

那麼那裡有合適的小圖案呢?通常艾爾弗烈德都是自行製作,不過你若嫌自行製作麻煩,最方便的來源就是你的作業系統(Windows、Linux或MAC OS)所附的背景圖案(Wallpaper Pattern),不過它們多半是點陣圖(BMP),最好能轉換為GIF或JPG規格;要不然網路上也有許多圖庫提供背景圖案下載服務。還有,不見得所有的瀏覽程式都支援PNG規格。

注意:背景圖案(BACKGROUND)會遮蓋背景顏色(BGCOLOR)。但這不是瀏覽程式的缺點,你反而應該充分運用此一瀏覽程式的特性。舉例說明,你若採用深色的背景圖案(BACKGROUND),你八成會採用淺色的前景文字,而通常網頁下載時,前景文字會先出現,背景圖案需要一段時間才能完成下載,你若不設定背景顏色(BGCOLOR)或設定了淺色的背景顏色,在這段時間裡網頁上出現的是一片空白或朦朧(即使文字已下載完成),會讓網友眼花潦亂或是以為網站掛了。所以,最好選擇與背景圖案(BACKGROUND)相近的顏色作為背景顏色(BGCOLOR),同時設定這兩個屬性,其語法如下:

<BODY BACKGROUND="image.gif" BGCOLOR="rrggbb">

自行製作背景圖案

有兩個簡單方法可自行製作背景圖案(BACKGROUND)。首先,如果你有掃描器,可以拿它來製作背景圖案(BACKGROUND),通常是找一張淺色而且上面有字的紙,(其視覺效果如同你的網頁有著文字及背景圖案),例如:畢業證書或獎狀,然後掃描沒有字的區域,再將掃描下來的圖案剪裁至適當的大小,例如:30x30、30x50、50x50。你要是能找一本瓷磚或地毯的目錄,掃描的效果會很好。

注意:背景圖案(BACKGROUND)是一片片拼接而成的,所以圖案最左邊和最右邊(最上端和最下端)的色調必須很搭調,否則拼起來時會顯得很突兀。

其次就是運用繪圖軟體,我通常是用小畫家(MS PAINT)來製作浮水印形式的背景圖案。先決定背景圖案尺寸,例如:30x30、30x50、50x50、100x100等等,除非另有目的不要選擇太大的數字;再加上淡淡的底色,例如:淡黃色(FFFFCC);再加上淡淡的文字,例如:淺綠色(CCFFCC)或灰色(CCCCCC)的文字,見下圖,然後轉成GIF或JPG格式即可。

Make your own background pattern - MS Paint

活頁形式背景圖案

有沒有看過一些網頁的背景圖案(BACKGROUND)像是一本活頁簿,左邊像是打孔的裝訂邊,這又是怎麼做的呢?你現在已經知道背景圖案是一片片的拼湊起來的,所以你最好是製作一條寬寬扁扁的圖案,圖案左邊是變化的花樣,右邊則留白供網頁顯示文字用。因為目前螢光幕最大可超過1600x1200,所以圖案寬度最好能超過1600點,高度則能小就小,4~5點就足夠了,以節省下載的時間。以下範例是Yahoo/Geocities提供給會員們使用的一些活頁形式背景圖案:(注意它們的設計,圖案的最上端和最下端的顏色在相接時可以吻合。)

尺寸:1280x38
Free background - Yahoo!

尺寸:1100x73
Free background - Yahoo!

尺寸:1200x45
Free background - Yahoo!

尺寸:1280x70
Free background - Yahoo!

尺寸:1280x114
Free background - Yahoo!

本文配合HTML 4.0撰寫,新版HTML均可向前相容。

0 留言:

張貼留言