加入表格以编排页面.PPT

第9章 AP Div設定以靈活頁面 建立AP Div及內容 網頁藍圖 AP元素屬性設定 AP元素排版技巧 建立AP元素 建立完成的AP元素可以在頁面上自由的縮放及移動，不過在操作前要先點取AP元素的邊框；反之若要刪除AP元素時，只要點取AP元素後再按下「Delete」鍵即可。 將表格轉換成AP Div 建立AP元素內容 在設計時一般都會將所有的網頁元素搭配使用，我們可先在AP元素中建立表格，接著再對每一個儲存格內加入文字或圖片，這樣就同時具有AP元素自由移動及表格整齊排列的優點，如圖中的連結按鈕設計。 網頁藍圖 運用AP元素面板(1) 運用AP元素面板(2) 顯示AP元素清單 運用AP元素面板(3) 變更AP元素的上下順序 運用AP元素面板(4) 調整Z軸索引值 運用AP元素面板(5) AP元素的顯示及隱藏 運用AP元素面板(6) 避免重疊 屬性面板調整(1) AP元素的尺寸及位置 屬性面板調整(2) 背景影像及顏色 屬性面板調整(3) 溢位及裁切設定 1.溢位設定 各種溢位效果說明如下，請先設定後要再使用瀏覽器來觀看設定效果。 2.裁切設定 可用來限制AP元素內影像的顯示範圍，應該算是所有AP元素屬性中最不易理解的觀念，因為裁切分為上下左右四邊，所以我們分別為各位作說明（這裡是將圖片設為AP元素的背景影像），另外圖中的「紅色導引線」只是便於解說使用。 屬性面板調整(4) 左方裁切 屬性面板調整(5) 上方裁切 屬性面板調整(6) 右方裁切 屬性面板調整(7) 下方裁切 屬性面板調整(8) 設定AP元素名稱 屬性面板調整(9) 檢視AP元素屬性 在這些顯示的的屬性名稱中，只有部份可以從屬性面板中進行設定，至於其他的屬性調整就要藉助「CSS樣式」面板了。 尺規、格線及導引線(1) 尺規 尺規、格線及導引線(2) 格線 至於格線內容則請執行「檢視/格線/格線設定」，然後從視窗中進行設定。 尺規、格線及導引線(3) 導引線 繪製導引線時需藉助頁面上的尺規，當尺規顯示以後我們可以在水平尺規上按住往下拖曳（垂直尺規則是往右拖曳），這時所看到的綠色線條就是導引線，綠色是導引線的預設顏色，另外在拖曳的過程中也會同時顯示導引線的座標位置。 在同時使用格線及導引線的情況下會以格線的對齊會優先，也就是在移動導引線時會自動貼齊頁面格線，所以在同時使用時可以先將格線的貼齊功能取消以避免產生困擾。 AP元素的對齊 Dreamweaver中的AP元素對齊是以最後選取的圖層來做為對齊的依據，當各位選取完成後再執行功能表中的「修改/排列順序」，接著就可從清單中的「靠左對齊」、「靠右對齊」、「靠齊上緣」及「靠齊下緣」等擇一方式進行對齊。 另外功能清單中的「設定成同寬度」與「設定成同高度」功能，則可以同時將所選取的AP元素調整成相同的寬度或高度，但同樣是以「最後選取」的AP元素做為調整的依據。 巢狀AP元素(1) 建立巢狀AP元素 1.在AP元素面板利用拖曳方式 2.直接繪製 巢狀AP元素(2) 巢狀AP元素應用 巢狀AP元素(3) 巢狀圖層補充 1.子AP元素位置調整 2.AP元素的顯示及隱藏 應用範例-「上、左頁框內容」的頁面設計 (1) 這部份要設計的是位於頁框架構中的「上頁框」與「左頁框」的頁框畫面，在「上頁框」中要擺放的是網頁橫幅影像，而在「左頁框」中要放置的則是具有導覽功能的連結按鈕。 應用範例-「上、左頁框內容」的頁面設計 (2) 左方頁框畫面設計 應用範例-「上、左頁框內容」的頁面設計 (3) 加入導覽按鈕 其他導覽按鈕的設定內容如下： 應用範例-「上、左頁框內容」的頁面設計(4) 上方頁框畫面設計 請新增一個空白頁面「top.htm」並且以「frame_top_back.jpg」影像來做為背景，同時將重覆效果設定為「不重覆」。 應用範例-「上、左頁框內容」的頁面設計(5) 加入網頁橫幅 9-3 AP元素屬性設定 勾選「檢視/視覺輔助/CSS版面方塊模型」指令 9-3 AP元素屬性設定 游標移到AP元素內部，會顯示相關屬性資訊。 9-3 AP元素屬性設定 游標移到AP元素邊框，則會顯示邊框屬性資訊。 9-4 AP元素排版技巧 ? 水平尺規 垂直尺規 尺規單位 9-4 AP元素排版技巧 1.執行「檢視/格線/顯示格線」指令 2.頁面上立即顯示格線 9-4 AP元素排版技巧 ? 設定格線的外觀樣式 設定每條格線之間的距離 設定是否顯示及貼齊格線 可設定格線顏色 9-4 AP元素排版技巧 ? 導引線預設的顏色是綠色，調為粉紅色是為了易於識別 9-4 AP元素排版技巧 9-4 AP元素排版技巧 一次清除頁面上的所有導引