期末作業

目標
以使用者經驗改善一家企業的網站

方法

• 依上半學期的分組，各組自選一家企業網站，改善之。改善之道如下：
  1. 提出其可改善之處。
  2. 提出同類型的優良企業網站，供改善參考。
  3. 在部落格記錄每週改善記錄。
  4. 在部落格做改善結果意見調查。

可改善者

• 台中技術學院日間部、進修部、進專及補校的網站

改善實例

• 大煒塑膠工業有限公司
  

繳交

1. 在你的www資料夾內新增work_7資料夾，把你修改的網站置入其中。
2. 在你的www資料夾的index.html檔案內，將作業七超連結到上一資料夾的首頁。
   

期限

1. 11/17(一)~22(六)：主題選定
2. 11/24~29：分析組織架構圖
3. 12/01~06：設計版型
4. 12/08~13：設計版型
5. 12/15~20：初稿
6. 12/22~27：修稿
7. 12/29~03：完稿
8. 01/05~10：檢討

網站外觀

目標
觀察網站，熟悉使用者經驗元素中的外觀 (surface)層，使頁面內的圖、文、色彩組合是一網站類型。

方法

1. 援用Dreamweaver的範本，更動其圖像及CSS。
   

隨堂演練

一、

1. 以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)
   
2. 在本地端網站的www資料夾內，新增work_6資料夾。
3. 開啟Dreamweaver，點按右邊的從範本建立中的起始頁面。

二、建立檔案

1. 從樣本頁面欄內選樣本，迄與你擬要改善的網站之頁面編排接近者。點按建立鈕。
2. 在work_6資料夾，儲存為index.html。

三、檢視及編修網頁

1. 點按頁面的圖像元素、文字元素及表格背景色等，變更之，以接近你欲修改的網站。
2. 儲存該index.html。

四、修改CSS

1. 在Dreamweaver右網站資訊區，點按附檔為CSS者。
2. 將.bodyText內的color #FFFF00改為FFFFFF。
3. 關啟CSS
4. 檢視html檔的設計，發現主文區的文字全部由黃色變為白色。
5. 可試著更改其他樣式的屬性，如文字大小等。
   

隨堂作業

1. 將www資料夾中index.html檔案內的作業六超連結到work_6的index.html。
2. 將www資料夾中的index.html存檔並上傳。

建議閱讀

• 張靜怡，葉俊賢，陳國明 (2003)，Dreamweaver MX，台北：文魁。六版。
• 胡為君譯 (2006)，Wogner原著，如何設計好網站，台北：上奇。
• 鄭巧玉譯 (2006)，Wogner原著，如何設計好網站之網頁改造術。台北：上奇。
• RoseNya, 小包子 (2007)，Dreamweaver cs3即效見本，台北：上奇。
• 視覺系研究菀 (2006)，網頁設計部屋，台北：碁峯。
  

頁面編排

目標
觀察網站，熟悉使用者經驗元素中的編排 (skeleton)層。使網頁元素的排列能讓使用者用起來最有效率。。

方法
瀏覽以下超連結內的網站，評析何者的編排最適合你擬要修改的網站

• 優良網站

隨堂演練

1. 開啟Dreamweaver，新增html檔。
2. 從主選單 >檢視 > 尺規 > 鉤選顯示。
3. 從主選單 >檢視 > 格線 > 鉤選顯示格線。
4. 從主選單 >檢視 > 格線 > 鉤選格線設定...。於對話框內調整間距的數值為10。
5. 點選版面標貼，選APdiv。
6. 在編輯區內畫一矩形。點選它，編輯它，並觀查及編輯區下方的屬性。並試著進行下列的屬性變動：
   
   1. APdiv的名稱、大小、背景色
   2. 文字的對齊
   3. 文字的超連結
      
   4. 置入背景圖、插入圖像、圖像的超連結
7. 儲存檔案。
   下圖是以上述的方法為frogdesign的首頁所做的版面編排。
   

將APdiv改為表格
div對較早期的瀏覽器可能不適用，所以若要為這些使用者考量，則可將div的程式碼轉換為表格table語法。其作法如下：

1. 開啟有div的網頁。
   
2. 從主選單 >修改 轉換 > 圖層轉換為表格。
   從程式碼觀看程式碼的改變。
   
3. 簡化表格。
   

隨堂作業

1. 以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)
   
2. 在本地端網站的www資料夾內，新增work_5資料夾。
3. 在work_5資料夾內新增skeleton.html，其內容係依前述瀏覽優良網站的評析，以APdiv方式排出頁面的間架--像建物的平面圖，每一APdiv插入該區間大小的圖像，並疊上文字。
   
4. 儲存skeleton.html，並將它上傳到遠端伺服器。
   
5. 將www資料夾中index.html檔案內的作業五超連結到skeleton.html。
6. 將index.html存檔並上傳。
7. 在瀏覽器測視你的作品。

建議閱讀

• 張靜怡，葉俊賢，陳國明 (2003)，Dreamweaver MX，台北：文魁。六版。
• 胡為君譯 (2006)，Wogner原著，如何設計好網站，台北：上奇。
• 鄭巧玉譯 (2006)，Wogner原著，如何設計好網站之網頁改造術。台北：上奇。
• RoseNya, 小包子 (2007)，Dreamweaver cs3即效見本，台北：上奇。
• 視覺系研究菀 (2006)，網頁設計部屋，台北：碁峯。
  

網站結構探討

目標
觀察網站，熟悉使用者經驗元素中的策略 (Strategy)層、眼界 (Scope)層、結構 (Structure)層。培養sitemap的建構及網站結構的命名。

方法
瀏覽以下的網站

• 創造力公司
• Apple
• frogdesign
  
• zafu
  
• woolworths

隨堂作業

1. 以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)
   
2. 在本地端網站的www資料夾內，新增work_3資料夾。
3. 依前二公司的網站瀏覽，在work_3資料夾內建立以下二個檔案
   
   1. sitemap1.html，其內容能一目了然地看到創造力公司或Apple公司的網站
      
      1. 對象是誰？ 要提供什麼？
      2. 網站地圖 (另一名稱為網站導覽 )
      3. 網站結構的資料夾命名及各網頁的英文命名。
         註：資料夾的名稱能在瀏覽器的網址欄看到，其原則如下：
         
         • 在http://右方第一個 / 之後未具.html的英文(和或數字)名為第一層資料夾名稱。
         • 在http://右方第二個 / 之後未具.html的英文(和或數字)名為第二層資料夾名稱，餘再依此類推。
         • 網頁的名稱為有.htm或.html或asp或php副檔名者。
4. 在本地端網站的www資料夾內，新增work_4資料夾。
   1. sitemap2.html，內容能一目了然地看到你期未作業欲改善的公司的網站
      
      1. 對象是誰？要提供什麼？
      2. 網站地圖。
      3. 網站結構的資料夾命名及各網頁的英文命名。
      4. 可改善之處何在？
5. 將前兩個檔案存檔並上傳。
   
6. 將www資料夾中index.html檔案中的作業三超連結到work_3資料夾內的sitemap1.html。
7. 將www資料夾中index.html檔案中的作業四超連結到work_4資料夾內的sitemap2.html。
8. 將index.html存檔並上傳。
9. 在瀏覽器測視你的作品。

建議瀏覽

• 到Google搜尋sitemap圖片。
• 同學的作業一
• 同學的作業二
• 同學的作業三
  

下周進度

• 版面編排設計
• Fireworks軟體應用
  

網站結構

目標
了解網站內容的線性結構、層屬結構與檔案命名

學習新功能

• 網站地圖 (site map)
• 線性結構
• 層屬結構
  
• 超連結

一、前置作業

1. 開啟Dreamweaver，進入網站管理，連結到遠端資訊。
2. 於本機端修改上周的index.html檔，加入居中排列，依序作業一、作業二至作業七。
3. 存檔。
   

二、網站地圖
一個網站是眾多網頁的組合，每一個網頁，都是個別的檔案，常見的附檔名為html。每一網頁會與其他網頁建立出關係，例如是同類關係，或者連續關係，或者連結關係。
為了管理這些網頁成為良好的結構，網站會附設網站地圖 (有中譯為網站導覽)，讓維修人員或瀏覽者容易理解整個網站的結構。在架網站時，須先想好內容的組織架構，以期能符合使用者經驗。

三、線性結構

• 線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
• 實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇)及→(下一篇)做超連結。
• 製作步驟：
  
  1. 在本地端的www資料夾內新增一個資料夾，取一小寫英文名，如work_1。
  2. 在work_1內新增一個檔案，取名為article1.html。
  3. 再新增一個檔案，取名為article2.html。
  4. 再新增一個檔案，取名為article3.html。
  5. 再新增一檔案夾，取名為images。
  6. 將三個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
     
  7. 開啟article1.html，編輯它，使成為圖文作品，在文章最下方下一篇。
  8. 為下一篇設超連結，連到入article2.html。
  9. 儲存檔案article1.html。
     
  10. 另存新檔為article2.html，編輯它，換新圖文，在文章最下方下一篇左側，另鍵入上一篇。
      1. 為下一篇設超連結，連到入article3.html。
      2. 為上一篇設超連結，連到入article1.html。
  11. 儲存檔案article2.html。
  12. 另存新檔為article3.html，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
      1. 將上一篇的超連結連到article2.html。
      儲存檔案article3.html。
  13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
  14. 上傳到伺服器。

四、層屬結構

• 層屬結構：像書本那樣，一書有數章，每章數節等。
• 實例簡介：利用可任選且具超連結的文字或圖像。
• 製作步驟：
  
  1. 在本地端的www資料夾，新增一個資料夾，取一小寫英文名，如work_2。
  2. 在work_2資料夾內新增一個檔案，取名為article1.html。
  3. 再新增一個檔案，取名為article2.html。
  4. 再新增一個檔案，取名為article3.html。
  5. 再新增一個檔案，取名為article4.html。
  6. 再新增一檔案夾，取名為images。
  7. 將四個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
     
  8. article1.html，編輯它，使成為圖文作品，在文章最下方加入第一篇、第二篇、第三篇、第四篇等四個詞，為讓各詞間有空白，按Ctrl+Shift+空間棒。
     
     1. 將第一篇做超連結到article1.html。
     2. 將第二篇做超連結到article2.html。
     3. 將第三篇做超連結到article3.html。
     4. 將第四篇做超連結到article4.html。
  9. 儲存檔案。
  10. 另存新檔，取名為article2.html，取代原檔案，編輯article2.html，存檔。
  11. 另存新檔，取名為article3.html，取代原檔案，編輯article3.html，存檔。
  12. 另存新檔，取名為article4.html，取代原檔案，編輯article4.html，存檔。
  13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
  14. 上傳到伺服器。

五、首頁與內頁超連結

1. 將index.html檔的作業一與work_1內的article1.html連結。
2. 將index.html檔的作業一與work_2內的article2.html連結。
3. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
4. 儲存檔案。
5. 上傳到伺服器。

六、在部落格做超連結

1. 到你的部落格，新增「網站結構」的文章。
2. 於內文寫「我在校方的網站」，將這些字做成超連結，其網址是http://web2.ntit.edu.tw/~sxxxxxxx，此處的xxxxxxx是你的學號。

架網站

目標
在學校伺服器架個人網站

方法
點按右側標籤的「架設網站」。

觀摩

一、同學優良作品

• 之一
  
• 之二
• 之三
• 之四

二、值得借鏡者

• 按鈕猜謎
  使用者會像無頭蒼蠅，撞得頭冒金星。
• 超連結太亂
  瀏覽者會不知身在何處，像在走迷宮。
  
• 各頁五花八門
  瀏覽者很難理解是在瀏覽同一個網站。
  
• 首頁與內頁不搭調
  瀏覽者無法從視覺風格的一致性歸納自己是在看同一作者的網站。
  
• 黑底藍字
  瀏覽者因黑與藍的明度太接近而難以分辨字與底。

期末作業

目標
以使用者經驗改善一家企業的網站

方法

• 依上半學期的分組，各組自選一家企業網站，改善之。改善之道如下：
  1. 提出其可改善之處。
  2. 提出同類型的優良企業網站，供改善參考。
  3. 在部落格記錄每週改善記錄。
  4. 在部落格做改善結果意見調查。

可改善者

• 台中技術學院日間部、進修部、進專及補校的網站

改善實例

• 大煒塑膠工業有限公司
  

期限

1. 11/19~22：主題選定
2. 11/26~29：分析組織架構圖
3. 12/03~06：設計版型
4. 12/10~13：設計版型
5. 12/17~20：初稿
6. 12/24~27：修稿
7. 12/31~06：完稿
8. 01/07~10：檢討

網站類型

目標
了解網路的類型

說明
網路的類型，可以從不同的面向來分類，以下是分類中的二種大分法

類一

• 入口網站
  例：http://www.yahoo.com

• 搜尋網站
  例：http://www.google.com
  

• 社群網站
  例：http://www.facebook.com
  

• 電子商務網站
  例：http://www.zakka.com.tw
  

• 小冊子網站
  例：http://www.thu.edu.tw
  

類二

• 資訊網
  網址尾端有.edu 或 .gov (education or government)
  例： http://www.ntu.edu.tw
  

• 倡導網
  網址尾端有.org (organization)
  例： http://www.greenpeace.org
  

• 企業或行銷網
  網址尾端有.com (commercial)
  例： http://www.adobe.com
  

• 新聞網
  網址尾端有.com (organization)
  例： http://www.cnn.com
  

• 個人網
  網址尾端於.com、 .edu之後會有~
  例： http://web.ntit.edu.tw/~hsieh

使用者經驗元素

目標
介紹網站設計的使用者經驗元素，並觀看實例以理解其內涵。

說明
依據Jesse James Garrett的看法，網站設計使用者經驗元素有五種，係由表層進入到最深層，依序有以下五層：

1. 外觀 (Surface)層：圖、文元素的組合看起來是某一網站類型。
2. 編排 (Skeleton)層：網頁元素的排列能讓使用者用起來最有效率。
3. 結構 (Structure)層：內容的分類讓讀者知道如何去某目的地。
4. 眼界 (Scope)層：使結構層得以完成的功能，例如，網路書店提供與甲書性質相近的書。
5. 策略 (Strategy)層：網主及網友要能該網站取得什麼。

進行設計時，要由下往上建起。

方法

1. 請到Apple網站瀏覽，描述你對該網站的使用者經驗的各層觀點。

建議閱讀

• Jesse James Garrett, The Elements of User Experience. New Riders, 2003.
• http://semanticstudios.com/publications/semantics/000029.php
  
• 優良網站設計的四個原則--對比、重復、對齊及鄰近

隨堂作業

目標
檢討部落格製作；比較部落格與一般網站的差異

方法

在你的學習部落格內描述

1. 半學期來製作個人部落格及分組部落格的收穫與待改進之處，參考以下同學的個人與分組部落格。
   徐文嫻的部落格
   白意婷的部落格
   蔡妙音的部落格
   
   虛實之間 (入選無名網站動漫第20名)
   阿土伯的有機肥
   雪兒好
   小心眼
   
2. 以下兩者的差異
   阿默的生活
   中國攝影
3. 看以下的網站有何感想
   Macannashoe
   

調查

• 完成本部落格右上兩項調查。

參賽消息
研究參加下列比賽的可能性

1. 第六屆育秀杯

2008華文部落格決選名單

2008第四屆全球華文部落格大獎 - 決選入圍名單

• 最佳 生活情報 － Thomas Wine 葡萄酒美食漫談
• 最佳 生活情報 － 努爾古麗
• 最佳 興趣嗜好 － 立體書專門店
• 最佳 藝術文化 － 良牙的純樸記事
• 最佳 藝術文化 － 海洋之心
• 最佳 藝術文化 － Annie's 攝影筆記本
• 最佳 藝術文化 － 古蹟與狗

問題

• 觀覽以上的部落格，將有關寫部落格的啟示有條理地寫入你的學習部落格內。

進專1A發表

目標
檢核同學個人及分組作業的結果及表達能力

說明
每組可用時間為3分x組員數+6分(組作品)+5分鐘提問。各組須挑出最佳三篇作品發表。

發表場序：抽籤決定
發表地點：在4304室；
發表時間：

• 第1組10:15~10:35
• 第2組10:37~10:57
• 第3組11:05~11:25
• 第4組11:27~11:47

發表日期與貼文篇數
10/25：每組貼文篇數=2x組員人數
11/01：每組貼文篇數=3x組員人數
11/08：每組貼文篇數=4x組員人數

分組編目

• 1 三人成唬
  林佩君 33973008 (組長)
  周雅鈴 33973003
  張英森 33973007
  
  
• 2 虛實之間
  陳昭雯 33973006 (組長)
  嚴姿涵 33973018
  陳逸慈 33973028 (組3)
  
  (興趣嗜好)
  
  
• 3 狗熊一班
  林厚志 33973023(組長)
  _陳逸慈 33973028
  _熊康伶 33973026
  
  
• 4 for nothing
  白意婷 33973039 (組長)
  楊仕鵬 33973034
  曾惠萱 33973031
  (藝術文化)
  
  
• 5 嗖咪咪
  蘇裕雯 33973041
  王郁萍 33973001
  熊康伶 33973026 (組3)
  (音樂說說說)
  
  
• 6 發現Funny
  陳俊利 33973035 (組長)
  吳怡君 33973009
  李季霏 33973010
  陳俊達 33973020
  (藝術文化)
  
  
• 7 波本可樂
  劉亞倫 33973016 (組長)
  吳美瑩 33973014
  辛薏如 33973033
  
  
• 8 八分之四等於二分之ㄧ
  陳盈攸 33973005
  譚昕 33973005
  王智廣 33973017
  
  
• 9 毛毛造造
  胡浩文 33973025
  毛梅蘭 33973030
  周建成 33973038
  (藝術文化)
  
  
• 10 饕掏不嚼
  阮楚蘋 33973012
  廖庭馴 33973015
  黃圓錞 33973015
  邱美秀 33973044
  
  
• 11 人生樂不樂
  黃資華 33973043 (組長)
  楊郁葶 33973029
  陳雪華 33973042
  
  
• 12 阿土伯的有機肥
  洪坤照 33973037 (組長)
  陳巨峰 33973019
  柯豐義 33973022
  

夜二1發表

目標
檢核同學個人及分組作業的結果及表達能力

說明
每組可用時間為3分x組員數+6分(組作品)+5分鐘提問。各組須挑出最佳三篇作品發表。

發表場序：抽籤決定
發表地點：在4405室；
發表時間：

• 第1組20:35~20:55；
• 第2組20:58~21:18；
• 第3組21:21~21:41；
• 第4組21:44~22:04

發表日期與貼文篇數
10/24：每組貼文篇數=2x組員人數
10/31：每組貼文篇數=3x組員人數
11/07：每組貼文篇數=4x組員人數

分組編目

• 1 角落
  黃俞瑄 24965012(組長)
  倪紀萱 24965025
  邱義盛24965042
  (生活情報組)
  
  
• 2 無名
  李宛蒨 24965049(組長)
  王滋娸 24965043
  陳玟蓉 24965011
  (生活情報組)
  
  
• 3 插畫and亂七八糟的創作
  吳政億(組長)
  劉丞原 24965021
  蔡文欽 24965027
  
  
• 4 Tin Pan Alley流行音樂作曲家和發行人集中區
  林鈺娟 24965048(組長)
  陳思瑩 24951011
  劉雅惠 24952085
  (藝術文化；音樂)
  
  
• 5 雪兒好死share house
  魏德瑀 24965024 (組長)
  徐文嫻 24965002
  張雅君 24965044
  莊宏儀 24965050
  (生活情報；興趣嗜好)
  
  
• 6 Our life, our story
  楊淋元 24965018 (組長)
  賴麗真 24965004
  姚瑋 24965033
  陳宜欣 24965036
  (藝術文化)
  
  
• 7 音樂
  24965014 陳洺頤 (組長)
  24965009 游雅雯
  24965017 許燕婷
  
  
• 8 影音Club
  李瑀潔 24965026 (組長)
  邱家鳳 24965008
  周兆萱 24965028
  
  
• 9 3宅e生
  陳克婷 24965029 (組長)
  蕭文鳳 24965020
  廖英琦 24965037
  (生活情報組)
  
  
• 10 垃圾集中營
  宋義威 24925026
  陳奕縉 24965016
  郭芷融 24965030
  
  
• 林奇震 24965003
  
  
• 蔡芳珍 24965001
  

日三A發表

目標
檢核同學個人及分組作業的結果及表達能力

說明
每組可用時間為3分x組員數+6分(組作品)+5分鐘提問。各組須挑出最佳三篇作品發表。

發表場序：抽籤決定
發表地點：在4405室；
發表時間：第1組8:20~8:40；第2組8:45~9:05；第3組9:15~9:35；第4組9:40~10:00

發表日期與貼文篇數
10/22：每組貼文篇數=2x組員人數
10/29：每組貼文篇數=3x組員人數
11/05：每組貼文篇數=4x組員人數

分組編目

• 1 孵，藝文
  林語屏13972007 -組長
  陳思澐13972015
  顏 凡 13972039
  

• 2 台中眼
  余桂棻 13972002 組長
  鄂智涵 13972016
  張曉慧 13972009
  

• 3 設界‧介設
  吳季珊 13972003 組長
  許心瑜 13972010
  郭瀞喧 13972011
  

• 4 太陽餅馬戲團
  鹿筱薇 13972034 組長
  黃佳鈴 13972017
  陳佳慧 13972012
  

• 5 Subculture
  彭冠廸 13972035 組長
  黃邦銓 13972037
  李念祖 13972029
  李崇任 13972030
  

• 6 Mix Music
  廖姿婷 13972020 組長
  林于評 13972006
  薛仰玲 13972026
  

• 7 夏克-Shock
  廖泊宜 13972019 組長
  蔡妙音 13972022
  

• 8 Mangekyou
  蔡宛廷 13972023 組長
  余思穎 13972001
  周晏婷 13972005
  

• 9 憋頭
  彭凱盟 13972036 組長
  蔡宗儒 13972038
  陳宛渝 13972013
  鄭詔蓉 13972025
  
  
• 10 MANIA MOVIE MUSIC
  郭郭益言 13972033 組長
  陳玟如 13972014
  
  

意見調查表測試

目標
模擬做一個意見調查

步驟

1. 登入部落格
2. 點按版面設定
3. 點按右上角「新增小工具」，在「意見調查」欄按「+」鈕
4. 在問題欄內鍵入你的問題
5. 在作答欄內鍵入你的答案選項

作業
為你的部落格設計一個問卷調查。

建立部落格的秘訣

目標
觀看其他網客的建言。

國內網站

• 老貓學出版
• 如何經營部落格
• 如何經營成功部落格
• 部落客生涯的省思
• 友善易讀的好日誌
• 寫部落格的努力、毅力與自省
  

國外網站

• designer blog
  
• 2009年Time雜誌選出最優25個部落格
• 2008年Time雜誌選出最優25個部落格
• 部落客初學者秘笈
• 部落客的九門課
  

寫部落格的策略

當部落成為網路世界的一個重要媒體時，企業如何應用，成為重要的課題之一，以下是企業使用部落格的十個基本觀念。

1. 熟悉部落格寫法及由消費者所興起的媒體。
2. 決定部落格是否適用於你的公司。
3. 發展內容策略。
   
4. 找出寫你的部落格的最佳人選。
5. 選擇一個適當的發佈平台。
6. 為搜尋引擎最佳化你的部落格內容。
7. 與網友啟動誠實的對話。
8. 監視部落格氛圍以找到中肯的新聞及點子。
9. 經常寫，保持聚焦，並包含可以增加的中肯連結。
10. 設定寫部落格的政策及寫部落格的指南。

資料來源
http://www.scoutblogging.com/blogs101.html

建議閱讀

• 有效企業部落格策略的七元素
• 部落格主的九門課
• Why We Look at Some Web Ads and Not Others
  

部落格的用色

部落格的用色與網頁設計一樣，其用色目標包括：吸引人、便利閱讀 (分類)、表現該部落格的特質等。

在上述的目標下，顧及瀏覽者在不同的作業系統 (像MAC或PC)瀏覽，不生色偏，以及減低資訊的負荷，所以用到網頁安全色共216色，包含於256色內，讓每一色僅佔一個byte即可。這216色是以RGB各6個色來組合。
RGB每色有256(0到255)可能色值，今從中挑出六個，各色值的十進位及十六進位(有#表示)如下
0 (#0)
51 (#33)
102 (#66)
153 (#99)
204 (#cc)
255 (#ff)
有以上基礎概念，在部落格的範本之幕後程式HTML內，就可以較容易駕御色彩了。
另以下的網站是提供調色的好處所值得一遊。

參考網站

• Chritine的部落格色彩範本

日三a 2008

01余思穎 部落格 / 網站
02余桂棻 部落格 / 網站
03吳季珊 部落格 / 網站
05周晏婷 部落格 / 網站
07林語屏 部落格 / 網站
09張曉慧 部落格 / 網站
10許心瑜 部落格 / 網站
11郭靜暄 部落格 / 網站
12陳佳慧 部落格 / 網站
13陳宛渝 部落格 / 網站
14陳玟如 部落格 / 網站
15陳思澐 部落格 / 網站
16鄂智涵 部落格 / 網站
17黃佳鈴 部落格 / 網站
19廖泊宜 部落格 / 網站
20廖姿婷 部落格 / 網站
22蔡妙音 部落格 / 網站
23蔡宛廷 部落格 / 網站
25鄭詔蓉 部落格 / 網站
26薛仰玲 部落格 / 網站
33郭郭益言 部落格 / 網站
34鹿筱薇 部落格 / 網站

個人部落格格式編修

目標

• 完成個人部落格的版頭圖像的編修
• 分組部落格的主題及內容初製
  
  1. 設計方向
  2. 學習模範--列舉三個部落格
  3. 任務分配及執行
  4. 初試啼聲--本周先架出第一篇分組內容

看看別人

• 2008華文部落格入圍
• 台中技術學院「學生學習部落格」
• 大頭佬的創意森林
• 就醬的營養午餐
• 窩@埔里
• 律師歌手蘇兒真
• Character Design
• 出色的設計師
• 同學的版頭例一
• 雜記寶
• 範例
• 寫部落格救地球
• mr6