加入表格以编排页面课件.ppt

1、1第第9章章 AP Div設定以靈活頁面設定以靈活頁面建立AP Div及內容 網頁藍圖 AP元素屬性設定 AP元素排版技巧 2建立AP元素 9-1 建立建立AP Div及內容及內容 1.新增空白網頁2.點選此圖示39-1 建立建立AP Div及內容及內容 在頁面上拖曳繪製AP元素繪製完成的AP元素4建立完成的AP元素可以在頁面上自由的縮放及移動，不過在操作前要先點取AP元素的邊框；反之若要刪除AP元素時，只要點取AP元素後再按下Delete鍵即可。9-1 建立建立AP Div及內容及內容 點選AP元素邊框後，可移動AP元素、調整大小或刪除。5將表格轉換成AP Div9-1 建立建立AP Div

2、及內容及內容 執行功能表上的修改/轉換/表格到AP Div指令先點選整個表格69-1 建立建立AP Div及內容及內容 表格已轉換成AP元素先取消勾選所有設定（稍後會介紹）7建立AP元素內容 在設計時一般都會將所有的網頁元素搭配使用，我們可先在AP元素中建立表格，接著再對每一個儲存格內加入文字或圖片，這樣就同時具有AP元素自由移動及表格整齊排列的優點，如圖中的連結按鈕設計。9-1 建立建立AP Div及內容及內容 1.先在AP元素內建立表格2.再對每一個儲存格加入圖片8網頁藍圖 9-2 網頁藍圖網頁藍圖 1.開啟範例檔案9-2.html2.執行修改/頁面屬性指令99-2 網頁藍圖網頁藍圖 根據

3、藍圖影像在頁面上建立AP元素3.設定影像的透明度50%2.選擇layout.jpg影像1.點選影像藍圖項目10運用AP元素面板(1)9-3 AP元素屬性設定元素屬性設定 AP元素面板開啟範例檔9-3-1.html執行視窗/AP元素指令11運用AP元素面板(2)顯示顯示AP元素清單元素清單 9-3 AP元素屬性設定元素屬性設定2.再繼續繪製第二個圖層1.先在頁面上繪製第一個AP元素12運用AP元素面板(3)變更變更AP元素的上下順序元素的上下順序 9-3 AP元素屬性設定元素屬性設定2.按下此鈕，插入圖檔banner9-2-1a.jpg；在另一AP元素中，插入圖檔banner9-2-1b.jpg

4、1.先點選apDiv2元素139-3 AP元素屬性設定元素屬性設定變更後的AP元素上下順序影像的上下順序也跟著對調按下此AP元素，向下拖曳。14運用AP元素面板(4)調整調整Z軸索引值軸索引值 9-3 AP元素屬性設定元素屬性設定 Z軸索引值與圖層上下順序的關係圖 159-3 AP元素屬性設定元素屬性設定 此數值就是Z軸索引值按二下可調整數值（這裡請輸入0）169-3 AP元素屬性設定元素屬性設定 二個AP元素的上下位置又交換了。如果在圖層中放置了Flash影片時，不管AP元素的Z軸索引值為何，在瀏覽器預覽時都會自動移到最上層。17運用AP元素面板(5)AP元素的顯示及隱藏元素的顯示及隱藏 9

5、-3 AP元素屬性設定元素屬性設定 點取此位置可變更圖層的顯示狀態（重覆點選可循環設定）189-3 AP元素屬性設定元素屬性設定各種AP元素的顯示狀態各種AP元素的顯示狀態19運用AP元素面板(6)避免重疊避免重疊 9-3 AP元素屬性設定元素屬性設定此時圖層無論怎麼移動都無法產生重疊（只能沿其他圖層的邊緣移動）勾選是否啟用避免重疊功能勾選是否開啟AP元素面板20屬性面板調整(1)AP元素的尺寸及位置元素的尺寸及位置 9-3 AP元素屬性設定元素屬性設定 圖層寬度利用屬性面板可進行調整圖層高度21屬性面板調整(2)背景影像及顏色背景影像及顏色 9-3 AP元素屬性設定元素屬性設定同時指定背景影

6、像及背景顏色時，會以背景影像為優先顯示。22屬性面板調整(3)溢位及裁切設定溢位及裁切設定1.溢位設定溢位設定 9-3 AP元素屬性設定元素屬性設定顯示AP元素的寬與高數值為200100從屬性面板的溢位功能進行調整 23各種溢位效果說明如下，請先設定後要再使用瀏覽器來觀看設定效果。9-3 AP元素屬性設定元素屬性設定 溢位方式溢位方式作用作用Visible(顯示顯示)瀏覽器預覽時會顯示完整影像內容。Hidden(隱藏隱藏)瀏覽器預覽時會將超出AP元素範圍以外的影像畫面隱藏起來。Scroll(捲軸捲軸)瀏覽器預覽時會將超出AP元素範圍以外的影像畫面隱藏起來，並顯示捲軸供使用者捲動（就算影像尺寸比

7、圖層小也還是會顯示出捲軸）。Auto(自動自動)根據影像尺寸自動調整是否要顯示捲軸。242.裁切設定裁切設定可用來限制AP元素內影像的顯示範圍，應該算是所有AP元素屬性中最不易理解的觀念，因為裁切分為上下左右四邊，所以我們分別為各位作說明（這裡是將圖片設為AP元素的背景影像），另外圖中的紅色導引線只是便於解說使用。9-3 AP元素屬性設定元素屬性設定25屬性面板調整(4)左方裁切左方裁切 9-3 AP元素屬性設定元素屬性設定2.指定寬高分別為320px及240px，左及上邊距離為10px。1.在網頁上建立一空白AP元素269-3 AP元素屬性設定元素屬性設定上邊距離10px在左側裁切為20px

8、左側距離10px1.滑鼠點選AP元素內部2.按一下此鈕，加入影像檔overflow.jpg。27屬性面板調整(5)上方裁切上方裁切 9-3 AP元素屬性設定元素屬性設定28屬性面板調整(6)右方裁切右方裁切 9-3 AP元素屬性設定元素屬性設定29屬性面板調整(7)下方裁切下方裁切 9-3 AP元素屬性設定元素屬性設定30屬性面板調整(8)設定設定AP元素名稱元素名稱 9-3 AP元素屬性設定元素屬性設定AP元素的預設名稱。點選這裡，可以變更AP元素的名稱。在AP元素面板也一併變更變更為易於辨識的名稱 31屬性面板調整(9)檢視檢視AP元素屬性元素屬性9-3 AP元素屬性設定元素屬性設定勾選檢

9、視/視覺輔助/CSS版面方塊模型指令 32在這些顯示的的屬性名稱中，只有部份可以從屬性面板中進行設定，至於其他的屬性調整就要藉助CSS樣式面板了。9-3 AP元素屬性設定元素屬性設定游標移到AP元素內部，會顯示相關屬性資訊。339-3 AP元素屬性設定元素屬性設定游標移到AP元素邊框，則會顯示邊框屬性資訊。34尺規、格線及導引線(1)尺規尺規 9-4 AP元素排版技巧元素排版技巧 水平尺規垂直尺規尺規單位35尺規、格線及導引線(2)格線格線 9-4 AP元素排版技巧元素排版技巧 1.執行檢視/格線/顯示格線指令2.頁面上立即顯示格線36至於格線內容則請執行檢視/格線/格線設定，然後從視窗中進行

10、設定。9-4 AP元素排版技巧元素排版技巧 設定格線的外觀樣式設定每條格線之間的距離設定是否顯示及貼齊格線可設定格線顏色37尺規、格線及導引線(3)導引線導引線 9-4 AP元素排版技巧元素排版技巧 導引線預設的顏色是綠色，調為粉紅色是為了易於識別38繪製導引線時需藉助頁面上的尺規，當尺規顯示以後我們可以在水平尺規上按住往下拖曳（垂直尺規則是往右拖曳），這時所看到的綠色線條就是導引線，綠色是導引線的預設顏色，另外在拖曳的過程中也會同時顯示導引線的座標位置。9-4 AP元素排版技巧元素排版技巧 39在同時使用格線及導引線的情況下會以格線的對齊會優先，也就是在移動導引線時會自動貼齊頁面格線，所以在

11、同時使用時可以先將格線的貼齊功能取消以避免產生困擾。9-4 AP元素排版技巧元素排版技巧 功能名稱功能名稱作用作用顯示導引線顯示導引線可用來切換顯示及隱藏頁面上的導引線鎖定導引線鎖定導引線可讓頁面上的所有導引線都固定不可移動。貼齊導引線貼齊導引線讓圖層在移動或是縮放時都會自動貼齊導引線。導引線貼齊元素導引線貼齊元素此功能和貼齊導引線剛好相反，它讓導引線在移動時會自動貼齊頁面上元素的邊緣。編輯導引線編輯導引線開啟編輯導引線的視窗畫面。清除導引線清除導引線一次清除頁面上的所有導引線。40AP元素的對齊 Dreamweaver中的AP元素對齊是以最後選取的圖層來做為對齊的依據，當各位選取完成後再執行

12、功能表中的修改/排列順序，接著就可從清單中的靠左對齊、靠右對齊、靠齊上緣及靠齊下緣等擇一方式進行對齊。另外功能清單中的設定成同寬度與設定成同高度功能，則可以同時將所選取的AP元素調整成相同的寬度或高度，但同樣是以最後選取的AP元素做為調整的依據。9-4 AP元素排版技巧元素排版技巧 41巢狀AP元素(1)建立巢狀建立巢狀AP元素元素 1.在在AP元素面板利用拖曳方式元素面板利用拖曳方式 9-4 AP元素排版技巧元素排版技巧 建立2個AP元素 429-4 AP元素排版技巧元素排版技巧 按住Ctrl鍵，將apDiv3拖曳到apDiv4上方。建立完成的巢狀AP元素432.直接繪製直接繪製 9-4 A

13、P元素排版技巧元素排版技巧 1.先點選頁面上的現有AP元素2.接著按住Alt鍵，在原來的AP元素內繪製子元素。449-4 AP元素排版技巧元素排版技巧 移動父元素時，子元素也會跟著移動。繪製完成的巢狀AP元素 45巢狀AP元素(2)巢狀巢狀AP元素應用元素應用 9-4 AP元素排版技巧元素排版技巧 2.在2個元素中輸入同樣的文字，並指定不同的顏色。1.在頁面上先建立父AP元素，再建立2個子元素。469-4 AP元素排版技巧元素排版技巧 調整AP元素的Z軸數值，如此畫面。移動陰影文字時，只需拖曳父元素，整個陰影文字就會一併移動了。47巢狀AP元素(3)巢狀圖層補充巢狀圖層補充1.子子AP元素位置

14、調整元素位置調整 9-4 AP元素排版技巧元素排版技巧 將子元素的左及上的位置都設為0時，會貼齊父元素的左上角。482.AP元素的顯示及隱藏元素的顯示及隱藏 9-4 AP元素排版技巧元素排版技巧 目前AP元素的顯示狀況將父元素設為隱藏時，子元素也會同時隱藏。499-4 AP元素排版技巧元素排版技巧 若有需要時也可以將子元素單獨顯示。或是將父元素單獨顯示。50應用範例-上、左頁框內容的頁面設計(1)這部份要設計的是位於頁框架構中的上頁框與左頁框的頁框畫面，在上頁框中要擺放的是網頁橫幅影像，而在左頁框中要放置的則是具有導覽功能的連結按鈕。9-4 AP元素排版技巧元素排版技巧 51應用範例-上、左頁

15、框內容的頁面設計(2)左方頁框畫面設計左方頁框畫面設計 9-4 AP元素排版技巧元素排版技巧 以frame_left_back.jpg影像做為背景在班級網站中新建left.html網頁52應用範例-上、左頁框內容的頁面設計(3)加入導覽按鈕加入導覽按鈕 9-4 AP元素排版技巧元素排版技巧 2.在網頁中拖曳出AP元素1.點選AP Div按鈕539-4 AP元素排版技巧元素排版技巧 點選在AP元素中，並執行插入/影像物件/滑鼠變換影像指令。完成第一個按鈕設定54其他導覽按鈕的設定內容如下：9-4 AP元素排版技巧元素排版技巧 按鈕名稱按鈕名稱原始影像原始影像滑鼠變換影像滑鼠變換影像替代文字替代文

16、字連結頁面連結頁面成績查詢成績查詢Bt_score_link.gifBt_score_hover.gif連結到成績查詢score.html網路藝廊網路藝廊Bt_graphic_link.gifBt_graphic_hover.gif連結到網路藝廊graphic.html好站相連好站相連Bt_links_link.gifBt_links_hover.gif連結到好站相連links.html講師介紹講師介紹Bt_teacher_link.gifBt_teacher_hover.gif連結到講師介紹teacher.html討論園地討論園地Bt_form_link.gifBt_form_hover.gif連結到討論園地form.html55應用範例-上、左頁框內容的頁面設計(4)上方頁框畫面設計上方頁框畫面設計請新增一個空白頁面top.htm並且以frame_top_back.jpg影像來做為背景，同時將重覆效果設定為不重覆。9-4 AP元素排版技巧元素排版技巧 56應用範例-上、左頁框內容的頁面設計(5)加入網頁橫幅加入網頁橫幅 9-4 AP元素排版技巧元素排版技巧 1.建立新的AP Div2.按下此鈕，在AP Div中新增影像檔。579-4 AP元素排版技巧元素排版技巧 在AP元素內插入banner001.png