網站外觀

目標
觀察網站，熟悉使用者經驗元素中的外觀 (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)，網頁設計部屋，台北：碁峯。