頁面編排

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