以下是我設計的作業網站畫面(Homework5):
●Homework5_01
資料擷取自阿寶老師部落格:
目標
觀察網站，熟悉使用者經驗元素中的編排 (skeleton)層。使網頁元素的排列能讓使用者用起來最有效率。。
方法
瀏覽以下超連結內的網站，評析何者的編排最適合你擬要修改的網站
● 優良網站
隨堂演練
1.開啟Dreamweaver，新增html檔。
2.從主選單 >檢視 > 尺規 > 鉤選顯示。
3.從主選單 >檢視 > 格線 > 鉤選顯示格線。
4.從主選單 >檢視 > 格線 > 鉤選格線設定...。
於對話框內調整間距的數值為10。
5.點選版面標貼，選APdiv。
6.在編輯區內畫一矩形。點選它，編輯它，並觀查及編輯區下方的屬性。並試著進行下列的屬性變動：
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)，網頁設計部屋，台北：碁峯。
下圖是以上述的方法為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)，網頁設計部屋，台北：碁峯。
