1、第八章使用AP Div布局網(wǎng)頁,第八章使用AP Div布局網(wǎng)頁,本章學習要點： AP Div的基本概念 AP Div的創(chuàng)建和基本操作 AP Div與表格的相互轉換 AP Div綜合應用,8.1 學習任務：AP Div基礎知識,所謂AP Div，是指存放用DIV標記描述的HTML內容的容器，用來控制瀏覽器窗口中元素的位置、層次。在Dreamweaver CS3環(huán)境下，可以利用AP Div靈活方便的進行頁面布局。 AP Div最主要的特性就是它是浮動在網(wǎng)頁內容之上的。也就是說，可以在網(wǎng)頁上任意改變其位置，實現(xiàn)對AP Div的準確定位。 AP Div可以相互堆疊，通過定義AP Div的層次關系，可以

2、方便實現(xiàn)文字陰影等效果；,8.1.2 創(chuàng)建AP Div元素工具欄,在Dreamweaver中可以通過“布局”工具欄方便的創(chuàng)建AP Div元素 在菜單欄中，選擇“插入布局”命令，可以展開“布局”工具欄。在“標準”模式下，和AP Div創(chuàng)建有關的是“插入Div標簽”按鈕和“繪制AP Div”按鈕。 “插入Div標簽”按鈕：單擊此按鈕，在文檔中自動插入一個AP Div元素。 “繪制AP Div”按鈕：單擊此按鈕，將鼠標指針移到文檔窗口中，鼠標指針變?yōu)槭譅睿聪率髽瞬⑼蟿?，可以繪制一個AP Div元素。,8.1.3 AP Div元素的“屬性”面板,AP Div“屬性”面板中各項含義如下： CSS-P

3、元素：為選中的AP Div元素設置名稱。名稱由數(shù)字或字母組成，不能用特殊字符。每個AP Div元素的名稱是唯一的。 左、上：分別設置AP Div元素左邊界和上邊界相對于頁面左邊界和上邊界的距離，默認單位為像素（px）。也可以指定為pc（pica）、pt（點）、in（英寸）、mm（毫米）、厘米（cm）或%（百分比）。 寬、高：分別設置AP Div元素高度和寬度，單位設置同“左”、“上”屬性。 Z軸：設置AP Div元素的堆疊次序，該值越大，則表示其在越前端顯示。 可見性：設置AP Div元素的顯示狀態(tài)?！翱梢娦浴庇覀认吕斜砜虬ㄋ膫€可選項： default（缺?。哼x中該項，則不明確指定其可見

4、性屬性，在大多數(shù)瀏覽器中，該AP Div會繼承其父級AP Div的可見性。 inherit（繼承）：選擇該項，則繼承其父級AP Div的可見性。 visible（可見）：選擇該項，則顯示AP Div及其中內容，而不管其父級AP Div是否可見。 hidden（隱藏）：選擇該項，則隱藏AP Div及其中內容，而不管其父級AP Div是否可見。 背景圖像：設置AP Div元素的背景圖像?？梢酝ㄟ^單擊“文件夾”按鈕選擇本地文件，也可以在文本框中直接輸入背景圖像文件的路徑確定其位置。 背景顏色：設置AP Div的背景顏色，值為空表示背景為透明。 類：可以將CSS樣式表應用于AP Div。 溢出：設置A

5、P Div中的內容超過其大小時的處理方法?！耙绯觥庇覀认吕斜砜蛑邪ㄋ膫€可選項： visible（可見）：選擇該項，當AP Div中內容超過其大小時，AP Div會自動向右或者向下擴展。 hidden（隱藏）：選擇該項，當AP Div中內容超過其大小時，AP Div的大小不變，也不會出現(xiàn)滾動條，超出AP Div內容不被顯示。 scroll（滾動）：選擇該項，無論AP Div中的內容是否超出AP Div的大小，AP Div右端和下端都會顯示滾動條。 auto（自動）：選擇該項，當AP Div內容超過其大小時，AP Div保持不變，在AP Div右端和下端都出現(xiàn)滾動條，以使其中的內容能通過拖動滾

6、動條顯示。 剪輯：設置AP Div可見區(qū)域大小。在“上”、“下”、“左”、“右”文本框中，可以指定AP Div可見區(qū)域上、下、左、右端相對于AP Div邊界距離。AP Div經(jīng)過剪輯后，只有指定的矩形區(qū)域才是可見的。,8.1.4 AP元素面板,“AP元素”面板各選項含義如下： 防止重疊：選中此選項，可以防止AP Div元素之間發(fā)生重疊。不選中此復選框，AP元素則可以相互重疊。該選項主要用在AP Div和表格相互轉換時，當將AP Div轉換為表格，為防止瀏覽器不兼容，選中該選項，以防止AP元素相互重疊。 圖標：如果某一個AP 元素左側有該圖標，表示該AP 元素可見，如果圖標變成，則不可見。如果沒

7、有該圖標，表示該層繼承其父級AP Div元素的可見性。如果沒有父級AP Div元素，則父級AP Div元素可以看成其本身，通常情況下，這意味著是可見的?？梢酝ㄟ^單擊圖標控制該AP Div的可見屬性。 名稱：該屬性用來顯示和更改AP Div元素的名稱。如果想更改該AP Div元素的名稱，可以通過雙擊名字進行更改。 Z：該屬性見“屬性”面板相關設置?？梢酝ㄟ^雙擊AP Div元素的Z值屬性來更改其值。,8.2 案例1 創(chuàng)建AP Div元素并在其中添加文字和圖像,學習目標在Dreamweaver CS3中，創(chuàng)建若干AP Div元素，在其內部添加文字和圖像，并設置其屬性。 知識要點AP Div元素的添加

8、；AP Div屬性設置；在AP Div中插入文字；在AP Div中插入圖像；創(chuàng)建嵌套AP Div；AP Div的基本操作；設置AP Div元素的排列次序等。利用AP Div制作的圖文混排網(wǎng)頁效果如圖所示。,8.3 學習任務：AP Div與表格相互轉換,8.3.1 將AP Div元素轉換為表格,轉換步驟：,1）選擇“修改轉換將AP Div轉換為表格”菜單命令，彈出“將AP Div元素轉換為表格”對話框中，從中進行相應設置，如圖8-11所示。 “將AP Div元素轉換為表格”對話框各選項含義如下： “最精確”單選按鈕：將所有AP Div轉換為表格。 “最?。汉喜⒖瞻讍卧眴芜x按鈕：將一定距離以內的

9、AP Div元素創(chuàng)建為相鄰的單元格，即融合其間的間隙。 “使用透明GIFs”復選框：將轉換后表格的最后一行中填充為透明的GIF圖像，這樣可以確保在所有的瀏覽器中表格顯示結果一致。 “置于頁面中央”復選框：選中此復選框，則生成的表格在頁面居中位置；若取消此復選框，則生成的表格在頁面中左對齊。 “防止重疊”復選框：選中此復選框，可以防止AP Div重疊。 “顯示AP元素面板”復選框：選中此復選框，在轉換完成后會顯示“AP元素”面板。 “顯示網(wǎng)格”復選框：選中此復選框，可以在轉換后的文檔中顯示網(wǎng)格線。 “靠齊到網(wǎng)格”復選框：選中此復選框，可以將轉換后的文檔靠齊到網(wǎng)格。 2）保持默認設置。單擊【確定】

10、按鈕，將文檔中的AP Div元素轉換為表格。,8.3.2 將表格轉換為AP Div元素,8.3.2 將表格轉換為AP Div元素,操作步驟：,1）打開一個用表格布局的網(wǎng)頁文件，選擇“修改轉換將表格轉換為AP Div”菜單命令，彈出“將表格轉換為AP Div”對話框， “將表格轉換為AP Div”對話框各選項含義如下： “防止重疊”復選框：選中此復選框，可以在操作AP Div元素時，防止AP Div元素之間相互重疊。 “顯示AP Div元素面板”復選框：選中此復選框，在轉換完成后會顯示“AP元素”面板。 “顯示網(wǎng)格”復選框：選中此復選框，可以在轉換后的文檔中顯示網(wǎng)格線。 “靠齊到網(wǎng)格”復選框：選中此復選框，可以將轉換后的文檔同網(wǎng)格靠齊。 2）選中“防止重疊”復選框和“顯示AP Div元素面板”復選框，單擊【確定】按鈕，將文檔中的表格轉換為AP Div元素。,8.4 案例2 使用Div制作網(wǎng)頁下拉菜單,學習目標 使用AP Div元素的“顯示”和“隱藏”屬性制作下拉菜單，并熟悉AP Div標簽。 知識要點AP Div元素的基本操作；AP Div標簽的HTML代碼規(guī)范；網(wǎng)頁中的行為；使用“行為”面板設置行為的方法；AP Div元素“可見性”屬性使用的技巧。案例效果：當鼠標移動到導航條的相關位置時，彈