Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

第二階段【網頁製作系列報導】電子報【初學者必修篇】
初學者必修篇

第三篇
認識網頁背景 & 文字顏色用法
適合程度： 初學者 一般程度 進階者 以上均宜
壹、HTML標籤(Tag)用於表示背景 & 文字顏色的屬性(Properties)有兩種：
A.<BODY  BGCOLOR="背景顏色"  TEXT="文字顏色" >Next Step用於主體內背景及所有文字顏色。
B.<FONT  COLOR="文字顏色" .....>文字或圖片</FONT>Next Step用於字型(FONT)文字顏色，其值優先於BODY內的TEXT。
<BODY ...> &<FONT ..>為HTML標籤(Tag)；BGCOLOR & TEXT & COLOR是該標籤的屬性(Properties)。
這裡的標籤(Tag) & 屬性(Properties)都必須被<... & ... >包裹起來；其英文字母可不區分大小寫。

貳、HTML標籤(Tag)用於表示背景 & 文字顏色的屬性值(Value)有兩種：
A.以16進位色碼為屬性值：如紅色背景BGCOLOR="#ff0000"或紅色文字TEXT="#ff0000"。
B.以英文顏色字母為屬性值：如紅色背景BGCOLOR="red"或紅色文字TEXT="red"。
這裡的顏色屬性可為大寫(BGCOLOR)或小寫(bgcolor)或大小寫混合(BgColor)。
這裡的顏色屬性值也可以為大寫(RED)或小寫(red)或大小寫混合(Red)。

參、認識HTML的16進位制(Hexadecimal)色彩(RGB)值：
16進位制他們的範圍從0～F，也就是0123456789ABCDEF(大於9的16進位數字，其意義就等於10進位中的10～15。
在HTML中，是以三對(RGB)16進位的數字來表示色彩。
每一對數字代表了RGB色彩成份中的一種，最前面是紅色(Red)、再來是綠色(Green)、最後是藍色(Blue)。
所以16進位制色碼就是由00至FF共同組成，因此由00最深至FF最淺漸進；00表示最深(黑)，FF則為最淺(白)。
而每次輸入16進位制色碼時，需要在前面加入#符號及6個色碼值，也就是#RRGGBB。
前兩個RR便是由16*16色組成，也等於256色；所以三組便是256*256*256，就相當等於1,677萬色。

肆、認識HTML的英文顏色字母：
以下是16個常用16進位色碼值與英文顏色字母對照表：
實際顯示顏色 16進位制色碼值 英文顏色字母 實際顯示顏色 16進位制色碼值 英文顏色字母
  #000000(最黑) black   #808080 gray
  #000080 navy   #C0C0C0 silver
  #00FFFF aqua   #008000 green
  #808000 olive   #008080 teal
  #0000FF blue   #00FF00 lime
  #800080 purple   #FFFF00 yellow
  #FF00FF fuchsia   #800000 maroon
  #FF0000 red   #FFFFFF(最白) white
這裡還有10進位制連線前往查看、16進位制連線前往查看、英文顏色字母連線前往查看 及中譯對照混合色碼表連線前往查看供您參考。

伍、顏色理論：
在HTML內定語法中，顏色是由紅、綠、藍(RRGGBB)三原色組合而成的，所以我們以RRGGBB值來表示。
RRGGBB值如採十六進位制(0-9，A-F)時，就會分別給予三原色兩個十六進位來定義。
白色的組成便是： 紅=FF、綠=FF、藍=FF RGB值即為： #FFFFFF  
紅色的組成便是： 紅=FF、綠=00、藍=00 RGB值即為： #FF0000  
綠色的組成便是： 紅=00、綠=FF、藍=00 RGB值即為： #00FF00  
藍色的組成便是： 紅=00、綠=00、藍=FF RGB值即為： #0000FF  
黑色的組成便是： 紅=00、綠=00、藍=00 RGB值即為： #000000  

陸、色彩概念：
RGB色光(加色)模式連線前往查看、CMYK色料(減色)模式連線前往查看、HSB模式連線前往查看。

柒、綜合技巧：
01.選用背景圖案、顏色時，應力求簡單、清晰，以利網友觀看。
02.使用文字顏色，務必考慮到背景顏色或圖案，以免看不清除或不協調。
03.背景圖<BODY BackGround="路徑\圖檔">優先於背景色<BODY BGColor="RRGGBB">。
04<FONT...字型文字顏色>其值優先於<BODY.....內的TEXT>。
05.您不必死背這些色碼的數字、顏色英文語彙，應善用編輯工具或Copy To Paste 方式。
06.請學會第玖項：如何隨時呼叫這些好用的色碼表做為您的網頁工具？以提升您的作業效率。
07.HTML是依據他內訂的語法來解讀，雖然您隨便輸入一個顏色，或許也可以顯示結果，但這並不是我們要的。

捌、色碼轉換速算表 ：
10進位制他們的範圍從0～9，也就是0123456789；如果採十進位制(Decimal Value)，則會以0～255數值來表示。
十進位制用於Java程式語言比較多，JavaScript語言偶會使用到(略)。
特別提供10 進位制與16進位制互相轉換器連線前往查看給大家備用。

玖、如何隨時呼叫這些好用的色碼表做為您的網頁工具？
首先將這些色碼表用 IE Browser 呼叫出來，然後：
建立【我的最愛】：我的最愛指引加到我的最愛指引新資料夾指引填寫【網頁工具】指引確定指引再確定。
滑鼠指向 IE Browser 按一下Ctrl + N 指引他會開一個新網頁，然後：
呼叫【我的最愛】：我的最愛指引找到【網頁工具】資料夾指引選取您想打開的網頁檔案。

拾、結論與建議：(網站想長久經營與服務，有賴加值收益才能持續，以下部份為廣告內容，敬請支持)
01.以後這個單元【初學者必修篇】就以最基本的觀念，為初學者介紹各種HTML基本用法，敬請期待並歡迎訂閱！
02.本報導資料取自網頁研習室教學會員檔案資料，內另附更多範例介紹，歡迎加入教學會員進一步研習。
03.我們還是強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，不要再用所見即所得軟體了。
04.如果您找不到有人可以詢問，又想徹底學會HTML語法，建議您加入我們的教學會員。
05.現在加入教學會員，提供一整年的諮詢顧問服務，並在半年內以無痛苦的學習方式，讓您自然輕鬆學會HTML。
06.贊助本報，一次取得本報第一階段所有資料，即可完整全部獲得近110餘篇精採報導內容。
07.本報自2002年開始接受網站委製，協助極需網站朋友，採最迅速、最便宜的方式，完整取得自己的網站。
08.對本報導有興趣，歡迎完整資料下載，俾利離線詳研；也拜託將本報導推薦給您需要的朋友，一起分享與成長。
09.電子報第二階段報導資料，持續每隔10日發表一次，歡迎訂閱，或加入教學會員完整取得。
10.本報導內容或資料，因限人數眾多，非本報教學會員，不接受任何疑惑解答，敬請見諒。

第二階段91.07.05.發行第019期
前期：要如何開啟一個無邊框的全螢幕視窗！