1、主講：主講：韓維良韓維良2022年年5月月網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院第一節(jié)第一節(jié) 認識認識AP DivAP Div元素元素APAP是Absolutely Positioned的縮寫，意為絕對定位；DIV是指Div標簽，Ap Div元素用Div標簽實現(xiàn)。在以前的版本中稱為層，所以又稱為Ap Div層。如果用戶想在網頁上實現(xiàn)多個元素重疊的效果，可以使用層。層是網頁中的一個區(qū)域，并且游離在網頁之上。利用層可精確定位精確定位和重疊網頁元素重疊網頁元素。通過設置不同層的顯示或隱藏，實現(xiàn)特殊的效果。3網站建設網站建設第8章使用AP Div2022年5月9日星期一

2、教育學院Ap DivAp Div層層，全名叫圖層圖層，是網頁中的一種容器，它可定位在頁面上的任意位置，并且其中可包含文本、圖像、表單等所有可直接用于文檔的元素。 Ap DivAp Div層最大的優(yōu)點層最大的優(yōu)點在于使網頁元素位于網頁中的任意位置。（實際上也是一種頁面布局的工具）Ap Div層的出現(xiàn)使網頁從二維平面拓展到三維。可以使頁面上元素進行重疊和復雜的布局。 4網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院Ap Div層在網頁中主要有兩個方面的應用： 1 、制作動態(tài)效果 層可以自由地移動，層可以根據需要顯示或者隱藏，這是應用層創(chuàng)建動態(tài)效果的重要原因。 2 、排版 因

3、為層比表格有更大的自由度，可以自由地放置，同時還可以相互嵌套、疊加，所以很大程度上彌補了表格排版的不足。 5網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院6網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院第二節(jié)第二節(jié) 定義定義AP DivAP Div元素元素一、可視化定義一、可視化定義AP DivAP Div元素元素方法：單擊插入欄上“布局”標簽下的“繪制AP Div”層圖標。在文檔窗口的設計視圖中拖動鼠標繪制出層?；蛘撸簩⒉迦朦c置于欲插入處，執(zhí)行“插入”菜單的“布局對象”中“AP Div”命令，創(chuàng)建默認大小的層。默認大小可以在首先參數(shù)中設置。7網

4、站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院查看或設置層參數(shù)：選擇“編輯/首選參數(shù)”菜單。從“分類”列表中選擇“AP元素”。 可指定新建層的默認設置。8網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院二 、 使 用 代 碼 定 義二 、 使 用 代 碼 定 義 A P A P DivDiv元素元素在網頁的head部分,定義一個Ap Div元素的代碼如左。在Body部分，Div標簽如右下。9#apDiv1 position:absolute;left:208px;top:108px;width:190px;height:172px;z-index:1

5、;網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院第三節(jié)第三節(jié) AP DivAP Div元素嵌套元素嵌套AP Div元素可以嵌套，在一個AP Div元素中可以嵌套另一個AP Div元素，從而繼承父AP Div元素的一些屬性。嵌套的AP元素會隨著父AP元素的移動而移動，繼承父AP元素的可見性。一、識別嵌套的一、識別嵌套的AP DivAP Div元素元素要注意識別AP Div元素的嵌套與重疊：可以用拖動法識別，也可以在代碼中查看（代碼嵌套），或者用Ap Div錨點識別。Ap Div錨點在首選參數(shù)的不可見元素中設置。10網站建設網站建設第8章使用AP Div2022年5月9日星

6、期一教育學院11選中了顯示選中了顯示網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院二、設置二、設置APDivAPDiv元素相互嵌套元素相互嵌套1、插入嵌套ApDiv元素方法：在欲插入的ApDiv元素中單擊，“插入”“布局對象”“ApDiv”。12網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院2、繪制嵌套ApDiv元素設置嵌套參數(shù)：選中“首選參數(shù)”中“Ap元素”的“在Ap Div中創(chuàng)建以后嵌套”選項。繪制：單擊插入欄上“布局”面板中的“繪制AP Div”，拖動鼠標到欲嵌套ApDiv元素上拖動繪制出新的ApDiv元素，即會嵌套在里面。按下Alt鍵的方

7、法沒有操作成功。13網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院3、拖動嵌套ApDiv元素方法：從插入欄上“布局”面板中拖動“繪制AP Div”按鈕到欲嵌套ApDiv元素上，即可創(chuàng)建一個嵌套在內的ApDiv元素。14網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院第四節(jié)第四節(jié) 選擇選擇AP DivAP Div元素元素方法：單擊欲選AP Div層的邊框或者AP Div層左上角標簽。按下SHIFT的同時，單擊欲選AP Div層內任意區(qū)域，或者單擊多個層。在“AP元素”面板中單擊該欲選層的名稱。若要選擇多個層，可按住Shift鍵并單擊“AP元素”面板上

8、的兩個或更多個名稱或在兩個或更多個層的邊框內（或邊框上）按住Shift鍵并單擊。 15網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院第五節(jié)第五節(jié) 設置設置AP DivAP Div元素的屬性元素的屬性一、單個一、單個AP DivAP Div元素的屬性元素的屬性選擇一個層，在屬性面板中設置層的屬性。左、上左、上：分別表示其左上角在上一級容器中的顯示坐標。16網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院寬、高寬、高：分別表示Ap Div層的寬度、高度。溢出溢出表示，當層的內容超出層的大小時，如何在瀏覽器中顯示。如：添加滾動條、隱藏、可見等。還可以設置

9、Ap Div層的背景顏色和背景圖案?？梢娦钥梢娦裕涸O置Ap Div層的顯示與否。nDefault：不指明層的可見性,大多瀏覽器會繼承該層的父級層的可見性nInherit：表示新建層繼承父級層的可見性nVisible：顯示層及其中的內容,不管其父級層是否可見nHidden：隱藏層及其中的內容,不管其父級層是否可見 17網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院二、多個二、多個AP DivAP Div元素的屬性元素的屬性選中欲設置屬性的多個AP Div層，再在屬性面板中設置相應屬性。18網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院第六節(jié)第六節(jié)

10、使用使用AP DivAP Div元素面板元素面板通過“AP元素”面板可以管理文檔中的AP Div層。打開方法打開方法：選擇“窗口/ AP元素”菜單，打開“AP元素”層面板，層顯示為按z軸順序排列的名稱列表。19可視性名稱Z軸網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院一、顯示隱藏一、顯示隱藏AP DivAP Div元素元素方法：在“AP元素”面板中，眼睛睜開表示該層是可見的。眼睛閉合表示該層是不可見的。如果沒有眼形圖標，該層通常會繼承其父級的可見性。在層面板中選中層后，可再看屬性面板，“可見性”改為：hidden20網站建設網站建設第8章使用AP Div2022年5月

11、9日星期一教育學院二、防止二、防止AP DivAP Div元素重疊元素重疊方法：在“AP元素”面板中，選擇“防止重疊”選項。 因為表格單元格不能重疊，所以Dreamweaver CS5無法從重疊層創(chuàng)建表格。如果要將一個文檔中的層轉換為表格以兼容IE 3.0瀏覽器，則選擇“防止重疊”選項來約束層的移動和定位，使層不會重疊。21網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院三、更改三、更改AP DivAP Div元素名稱元素名稱方法：在“AP元素”面板中，雙擊欲更名的Div元素名稱處，編輯輸入新的名稱。22網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學

12、院四、改變四、改變AP DivAP Div元素順序元素順序排版時常需要控制疊放在一起的不同網頁元素的顯示順序，以實現(xiàn)特殊的效果；在屬性面板中“Z軸”表示圖層在網頁中順序號；層的顯示順序與Z軸值的順序一致。Z值越大，層的位置越靠上面。其中號位于最下面，編號較大的層出現(xiàn)在編號較小的層上面，編號也可以是負值。 方法：在“AP元素”面板中，雙擊欲改變順序的Div元素Z軸值進行編輯，或者在屬性面板中編輯選定層的“Z軸”屬性值。23網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院第七節(jié)第七節(jié) 操作操作AP DivAP Div元素元素一、激活一、激活AP DivAP Div元素元素方法

13、：在AP Div元素內的任意位置，單擊鼠標。激活以后，插入點出現(xiàn)在其內部，可以插入內容。二、在二、在AP DivAP Div元素中插入對象元素中插入對象激活AP Div元素后，可以在其中插入各種網頁對象。內容要與層的大小匹配（如圖片太大），可以加入文本、圖片、表格、插件，也可以在里面再嵌套層。 24網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院三、調整三、調整AP DivAP Div元素的大小元素的大小可以調整單個AP DivAP Div層的大小，也可以同時調整多個AP DivAP Div層的大小以使其具有相同的寬度和高度。如果已啟用“AP元素”面板選項，那么在調整層的

14、大小時將無法使該層與另一個層重疊。方法方法：選中層，拖動該層的任一大小調整柄，或者在屬性面板中輸入寬、高值。微調法：微調法： （一次調整10個像素的大?。〤trl+SHift+ 或 （一次調整一個像素的大小）Ctrl + 或 25網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院四、移動四、移動AP DivAP Div元素元素選定AP Div層，用鼠標拖動至新的位置，或者用光標移動鍵移動至新的位置。26演示：用層繪制一個常見的網頁布局：（半圓形鏈接分布）、（圖片的堆疊分布)。網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院五、對齊五、對齊AP DivA

15、P Div元素元素當有多個AP層時，可以對它們進行對齊操作，包括左對齊、右對齊、上對齊與對齊下緣，以最后一個選定AP層的邊框位置為標準對齊。方法：選中創(chuàng)建好的多個AP層，單擊“修改”“排列順序”中的對齊方式（左、右、上、下）；如“對齊下緣”命令菜單，將所有選中的AP層以最后選中的AP層的下邊框為標準對齊27網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院六、對齊六、對齊AP DivAP Div元素到網格元素到網格顯示網絡顯示網絡：選中“查看” “網格設置”“顯示網格”選項。網絡設置網絡設置：執(zhí)行“查看” “網格設置”“網格設置”命令。開戶對齊網格功能后，通過鼠標拖動改變A

16、p Div層的位置時，在靠近網格時，會自動吸附到網格的某一條邊上對齊。28開啟對齊網格功能網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院七、七、AP DivAP Div元素的定位方式元素的定位方式絕對定位絕對定位：是指定Ap Div元素以最近的上級包含塊的左上角為參考點進行定位，可用拖動法移動Ap Div元素的位置。但相近的其它內容位置改變時，不會影響Ap Div元素的位置。相對定位相對定位：是指定Ap Div元素以相對于自身位置的左上角為參考點進行定位，不能用拖動法移動Ap Div元素的位置。其位置不固定，相近的其它內容位置改變時，Ap Div元素的位置會相應地發(fā)生變化（如其上方增加或者減少行，會相應變化）。29網站建設網站建設第8章使用AP Div2022年5月9日星期一教育學院默認的定位為絕對定位；改變定位方式改變定位方式：在Ap Div元素定義代碼中將position屬性值由absolute改為relative，區(qū)別：相對定位的Ap Div元素沒有左上角的層選擇標記。30#apDiv7 position:relative;left:123px;top:50px;width:206px;height:177px;z-index:2;background-color: #990000;網站建設網站建設第8章使用AP Div