第7章 AP元素的使用1

1、第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)12022-2-7第第7章章 AP元素的使用元素的使用 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo):第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)22022-2-77.1AP元素概述元素概述 Dreamweaver 中，中，AP 元素通常是指具有絕對定位的元素通常是指具有絕對定位的 div 標(biāo)簽，習(xí)慣稱標(biāo)簽，習(xí)慣稱AP Div（它是（它是 Dreamweaver 默認(rèn)插入的默認(rèn)插入的 AP 元素類型）。但是請記住，我們可以將元素類型）。但是請記住，我們可以將任何任何 HTML 元素（例如，一個(gè)圖像或一個(gè)表格）作為元素（例如，一個(gè)圖像或一個(gè)表格）作為 AP 元素進(jìn)行分類，

2、方法是元素進(jìn)行分類，方法是為其分配一個(gè)絕對位置。所有為其分配一個(gè)絕對位置。所有 AP 元素（不僅僅是絕對定位的元素（不僅僅是絕對定位的 div 標(biāo)簽）都將在標(biāo)簽）都將在“AP 元素元素”面板中顯示。面板中顯示。 通過通過 Dreamweaver，您可以使用，您可以使用 AP 元素來設(shè)計(jì)頁面的布局。您可以將元素來設(shè)計(jì)頁面的布局。您可以將 AP 元素放置到其它元素放置到其它 AP 元素的前后，隱藏某些元素的前后，隱藏某些 AP 元素而顯示其它元素而顯示其它 AP 元素，以及元素，以及在屏幕上移動(dòng)在屏幕上移動(dòng) AP 元素。您可以在一個(gè)元素。您可以在一個(gè) AP 元素中放置背景圖像，然后在該元素中放置背

3、景圖像，然后在該 AP 元素的前面放置另一個(gè)包含帶有透明背景的文本的元素的前面放置另一個(gè)包含帶有透明背景的文本的 AP 元素。元素。第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)32022-2-7AP Div主要有以下幾方面的功能： AP Div是絕對定位的，游離在文檔之上，利用它可以浮動(dòng)定位網(wǎng)頁元素。 AP Div的Z軸屬性可以使多個(gè)AP Div進(jìn)行重疊，產(chǎn)生多重疊加的效果。 AP Div的顯示和隱藏可以控制，從而使網(wǎng)頁的內(nèi)容變得更加豐富多彩。第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)42022-2-77.1AP元素概述元素概述 層的屬性包括名稱（）、位置、大小、層的屬性包括名稱（）

4、、位置、大小、 軸、可見性、軸、可見性、背景、類、溢出、剪輯等基本屬性，如圖所示背景、類、溢出、剪輯等基本屬性，如圖所示第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)52022-2-77.2AP Div的創(chuàng)建及屬性設(shè)置的創(chuàng)建及屬性設(shè)置 div 標(biāo)簽是用來定義標(biāo)簽是用來定義 Web 頁面的內(nèi)容中的邏輯區(qū)域的標(biāo)簽。通過菜頁面的內(nèi)容中的邏輯區(qū)域的標(biāo)簽。通過菜單單“插入插入” “布局對象布局對象” “Div標(biāo)簽標(biāo)簽”命令，插入命令，插入Div標(biāo)簽。標(biāo)簽。第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)62022-2-7 除了利用上述的向?qū)Х绞讲迦階P Div外，我們還可以直接創(chuàng)建AP Div，目前主

5、要有以下幾種方式：在Dreamweaver右側(cè)的“插入”面板的“布局”類別中，選中“繪制 AP Div”并拖動(dòng)至文檔以繪制一個(gè) AP Div。 在“插入”菜單中選擇“布局對象”，單擊“AP Div”，即繪制一個(gè) AP Div。在Dreamweaver右側(cè)的“插入”面板的“布局”類別中，選中“繪制 AP Div”，將鼠標(biāo)移動(dòng)至文檔中時(shí)，鼠標(biāo)指針會(huì)變成一個(gè)“+”圖標(biāo)，此時(shí)可以利用鼠標(biāo)繪制一個(gè)自定義大小的AP Div。第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)72022-2-7創(chuàng)建嵌套創(chuàng)建嵌套AP層層方法一，直接在已經(jīng)創(chuàng)建的AP層內(nèi)再創(chuàng)建一個(gè)層，創(chuàng)建的步驟如下： 在“插入”面板的“布局”類別中

6、，單擊“繪制 AP Div”按鈕 。 在“文檔”窗口的“設(shè)計(jì)”視圖中，拖動(dòng)以在現(xiàn)有 AP Div 的內(nèi)部繪制 AP Div。 方法二，利用“AP元素”面板來建立嵌套關(guān)系。在編輯窗口隨意創(chuàng)建兩個(gè)或多個(gè)層。以圖所示的效果為例，假設(shè)apDiv5和apDiv2開始不具有嵌套關(guān)系，我們只需要在AP元素面板中單擊選取層apDiv5，按住Ctrl鍵并拖動(dòng)鼠標(biāo)至層apDiv2，即可實(shí)現(xiàn)apDiv5嵌套于apDiv2，apDiv5成為子層，而apDiv2成為母層。第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)82022-2-72.AP層的屬性設(shè)置層的屬性設(shè)置常見“屬性”，設(shè)置方法如下：1CSS-P 元素：為選

7、定的 AP 元素指定一個(gè) ID。此 ID 用于在“AP 元素”面板和 JavaScript 代碼中標(biāo)識(shí) AP 元素。只應(yīng)使用標(biāo)準(zhǔn)的字母數(shù)字字符，而不要使用空格、連字符、斜杠或句號等特殊字符。每個(gè) AP 元素都必須有各自的唯一 ID。2左和上：指定 AP 元素的左上角相對于頁面（如果嵌套，則為父 AP 元素）左上角的位置，從而實(shí)現(xiàn)層內(nèi)元素在網(wǎng)頁中的精確定位。3寬和高：指定 AP 元素的寬度和高度。4Z 軸：確定 AP 元素的 Z 軸或堆疊順序。5可見性：指定 AP 元素最初是否是可見的。從以下選項(xiàng)中選擇：“default”不指定可見性屬性。當(dāng)未指定可見性時(shí)，大多數(shù)瀏覽器都會(huì)默認(rèn)為“繼承”。“繼承

8、”將使用 AP 元素的父級的可見性屬性。 “可見”將顯示 AP 元素的內(nèi)容，而與父級的值無關(guān)?！半[藏”將隱藏 AP 元素的內(nèi)容，而與父級的值無關(guān)。 6背景圖像：指定 AP 元素的背景圖像。 7背景顏色：指定 AP 元素的背景顏色。 8類：指定用于設(shè)置 AP 元素的樣式的 CSS 類。 第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)92022-2-77.3AP Div的基本操作的基本操作 通過以下方式選擇通過以下方式選擇AP層：層：單擊單擊 AP 元素的選擇柄。元素的選擇柄。 單擊單擊 AP 元素的邊框。元素的邊框。 按住按住 Ctrl-Shift (Windows) 或或 Command-S

9、hift (Macintosh) 在在 AP 元素內(nèi)部單擊。元素內(nèi)部單擊。在在 AP 元素內(nèi)部單擊并在標(biāo)簽選擇器中選擇其標(biāo)簽。元素內(nèi)部單擊并在標(biāo)簽選擇器中選擇其標(biāo)簽。通過通過“AP 元素元素”面板選擇面板選擇AP元素。元素。第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)102022-2-72.在在AP層內(nèi)插入內(nèi)容層內(nèi)插入內(nèi)容選擇選擇AP層之后，就可以在層之后，就可以在AP層內(nèi)輸入或從其他文件中復(fù)制粘貼相應(yīng)層內(nèi)輸入或從其他文件中復(fù)制粘貼相應(yīng)文本內(nèi)容，也可單擊文本內(nèi)容，也可單擊“插入插入”工具欄工具欄“常用常用”類別中的各種按鈕，插類別中的各種按鈕，插入圖像、媒體、腳本等內(nèi)容入圖像、媒體、腳本等

10、內(nèi)容第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)112022-2-73.調(diào)整調(diào)整AP層的位置層的位置方法一：通過選擇方法一：通過選擇AP層，拖動(dòng)其到適當(dāng)位置，改變前層，拖動(dòng)其到適當(dāng)位置，改變前apDiv1和和apDiv2的位置。的位置。方法二：使用方法二：使用“屬性屬性”面板對面板對AP層進(jìn)行精確定位，選擇目標(biāo)層，在層進(jìn)行精確定位，選擇目標(biāo)層，在屬性面板中的屬性面板中的“左左”欄及欄及“上上”欄輸入層所在位置坐標(biāo)。用這種方法可以欄輸入層所在位置坐標(biāo)。用這種方法可以迅速實(shí)現(xiàn)層的精確定位。迅速實(shí)現(xiàn)層的精確定位。方法三：選取目標(biāo)層，按鍵盤上的方向鍵，可使選取層作方法三：選取目標(biāo)層，按鍵盤上的方向

11、鍵，可使選取層作1個(gè)像素的個(gè)像素的位移；按住位移；按住Shift鍵按方向鍵，可使選取層作鍵按方向鍵，可使選取層作10個(gè)像素的位移。個(gè)像素的位移。第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)122022-2-74.調(diào)整調(diào)整AP層的大小層的大小通過選擇通過選擇AP層，通過拖曳使其大小得當(dāng)，移動(dòng)鼠標(biāo)指針到層的邊框變形層，通過拖曳使其大小得當(dāng)，移動(dòng)鼠標(biāo)指針到層的邊框變形點(diǎn)，當(dāng)鼠標(biāo)指針變?yōu)殡p箭頭形狀時(shí)，按住鼠標(biāo)左鍵拖動(dòng)調(diào)整即可，調(diào)整結(jié)點(diǎn)，當(dāng)鼠標(biāo)指針變?yōu)殡p箭頭形狀時(shí)，按住鼠標(biāo)左鍵拖動(dòng)調(diào)整即可，調(diào)整結(jié)束后釋放鼠標(biāo)。如圖束后釋放鼠標(biāo)。如圖7-12所示。所示。使用使用”屬性屬性”面板對面板對AP層進(jìn)行大小的

12、精確調(diào)整，在寬和高欄中直接輸入層進(jìn)行大小的精確調(diào)整，在寬和高欄中直接輸入層的寬和高的值。層的寬和高的值。第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)132022-2-75.改變改變AP層的層疊順序?qū)拥膶盈B順序使用使用 AP 元素面板更改元素面板更改 AP 元素的堆疊順序元素的堆疊順序選擇選擇“窗口窗口” “AP 元素元素”打開打開“AP 元素元素”面板。面板。 將將 AP 元素向上或向下拖元素向上或向下拖至所需的堆疊順序。至所需的堆疊順序。 使用屬性檢查器更改使用屬性檢查器更改 AP 元素的堆疊順序元素的堆疊順序 在在“AP 元素元素”面板或面板或“文檔文檔”窗口中選擇窗口中選擇 AP 元

13、素。元素。 在在“屬性屬性”面板（面板（“窗口窗口” “屬性屬性”）中，在）中，在“Z 軸軸”文本框中鍵入一個(gè)文本框中鍵入一個(gè)數(shù)字。數(shù)字。 鍵入一個(gè)較大的數(shù)字可將鍵入一個(gè)較大的數(shù)字可將 AP 元素在堆疊順序中上移。鍵入一個(gè)較小的數(shù)元素在堆疊順序中上移。鍵入一個(gè)較小的數(shù)字可將字可將 AP 元素在堆疊順序中下移。元素在堆疊順序中下移。在在“AP 元素元素”面板中，單擊相應(yīng)層的面板中，單擊相應(yīng)層的Z列數(shù)值，輸入新的數(shù)字。列數(shù)值，輸入新的數(shù)字。第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)142022-2-7AP層可見性的改變也可通過層可見性的改變也可通過 “AP元素元素”面板與面板與”屬性屬性”面

14、板來實(shí)現(xiàn)。面板來實(shí)現(xiàn)。l通過通過“窗口窗口” “AP元素元素”命令，打開命令，打開“AP元素元素”面板，如圖面板，如圖7-15所示。用鼠所示。用鼠標(biāo)單擊要更改標(biāo)單擊要更改AP層名稱前面的眼睛圖標(biāo)即可改變層名稱前面的眼睛圖標(biāo)即可改變AP層的可見性。閉上的眼睛圖標(biāo)表層的可見性。閉上的眼睛圖標(biāo)表示示AP層被隱藏，處于不可見狀態(tài)；睜開的眼睛圖標(biāo)表示層被隱藏，處于不可見狀態(tài)；睜開的眼睛圖標(biāo)表示AP層被顯示，處于可見狀態(tài)；層被顯示，處于可見狀態(tài)；沒有眼睛圖標(biāo)表示該沒有眼睛圖標(biāo)表示該AP層繼承其父層繼承其父AP層（即被嵌套層（即被嵌套AP層）的可見性屬性。層）的可見性屬性。l在在”屬性屬性”面板中更改。選中

15、要設(shè)置可見性的面板中更改。選中要設(shè)置可見性的AP層，在層，在”屬性屬性”面板中面板中“可見可見性性”下拉列表框中選擇相應(yīng)可見性選項(xiàng)即可，如圖下拉列表框中選擇相應(yīng)可見性選項(xiàng)即可，如圖6.改變改變AP層的可見性層的可見性第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)152022-2-7l選中創(chuàng)建好的多個(gè)選中創(chuàng)建好的多個(gè)AP層，如圖層，如圖7-178所示。最左端的所示。最左端的AP層為最層為最后選中的后選中的AP層。層。l單擊單擊“修改修改” “排列順序排列順序” “對齊下緣對齊下緣”命令菜單，將所命令菜單，將所有選中的有選中的AP層以最后選中的層以最后選中的AP層的下邊框?yàn)闃?biāo)準(zhǔn)對齊層的下邊框?yàn)闃?biāo)

16、準(zhǔn)對齊7.對齊對齊AP層層第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)162022-2-7l將將 AP 元素轉(zhuǎn)換為表格元素轉(zhuǎn)換為表格選擇選擇“修改修改” “轉(zhuǎn)換轉(zhuǎn)換” “將將 AP Div 轉(zhuǎn)換為表轉(zhuǎn)換為表格格”。 轉(zhuǎn)換即可完成，各個(gè)選項(xiàng)的含義如下：轉(zhuǎn)換即可完成，各個(gè)選項(xiàng)的含義如下： （1）最精確：為每個(gè)）最精確：為每個(gè) AP 元素創(chuàng)建一個(gè)單元格以及保元素創(chuàng)建一個(gè)單元格以及保留留 AP 元素之間的空間所必需的任何附加單元格。元素之間的空間所必需的任何附加單元格。（2）最?。┳钚?折疊空白單元格折疊空白單元格 指定若指定若 AP 元素位于指定元素位于指定的像素?cái)?shù)內(nèi)則應(yīng)對齊的像素?cái)?shù)內(nèi)則應(yīng)對齊

17、AP 元素的邊緣。元素的邊緣。 （3）使用透明）使用透明 GIFs：使用透明的：使用透明的 GIF 填充表格的最填充表格的最后一行。這將確保該表在所有瀏覽器中以相同的列寬顯示。后一行。這將確保該表在所有瀏覽器中以相同的列寬顯示。（4）置于頁面中央：將結(jié)果表放置在頁面的中央。如）置于頁面中央：將結(jié)果表放置在頁面的中央。如果禁用此選項(xiàng)，表將在頁面的左邊緣開始。果禁用此選項(xiàng)，表將在頁面的左邊緣開始。 8.AP層與表格間的轉(zhuǎn)換層與表格間的轉(zhuǎn)換第第1篇篇 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)172022-2-78.AP層與表格間的轉(zhuǎn)換層與表格間的轉(zhuǎn)換l將表格轉(zhuǎn)換為將表格轉(zhuǎn)換為 AP Div選擇選擇“修改修改” “轉(zhuǎn)換轉(zhuǎn)換” “將表格轉(zhuǎn)換為將表格轉(zhuǎn)換為 AP Div”。 如圖如圖7-20所示，指定任一選項(xiàng)，然后單擊所示，指定任一選項(xiàng)，然后單擊“