網路傳播設計_網站外觀

◎網站結構探討_Homework6

以下是我設計的作業網站畫面(Homework6):
●Homework6_01


資料擷取自阿寶老師部落格:
目標
觀察網站，熟悉使用者經驗元素中的外觀 (surface)層，使頁面內的圖、文、色彩組合是一網站類型。

方法
援用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)，網頁設計部屋，台北：碁峯。