DWAP元素的創(chuàng)建和使用

1、第第7 7章章 apap元素的創(chuàng)建和使用元素的創(chuàng)建和使用課題引入：課題引入：網(wǎng)頁布局是指網(wǎng)頁的各元素（如導(dǎo)航欄、圖象、網(wǎng)頁布局是指網(wǎng)頁的各元素（如導(dǎo)航欄、圖象、文字）在瀏覽器中的顯示方式，是網(wǎng)頁設(shè)計中的一項重要文字）在瀏覽器中的顯示方式，是網(wǎng)頁設(shè)計中的一項重要內(nèi)容。使用傳統(tǒng)的表格布局頁面存在很多缺陷；而在布局內(nèi)容。使用傳統(tǒng)的表格布局頁面存在很多缺陷；而在布局模式下，使用表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計頁面，可以簡化用模式下，使用表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計頁面，可以簡化用表格進行頁面布局的過程，具有定位簡單、容易調(diào)整等優(yōu)表格進行頁面布局的過程，具有定位簡單、容易調(diào)整等優(yōu)點；且能避免使用傳統(tǒng)表格布局的缺陷，同時

2、也使網(wǎng)頁布點；且能避免使用傳統(tǒng)表格布局的缺陷，同時也使網(wǎng)頁布局更加高效。局更加高效。本章將介紹用本章將介紹用dreamweaverdreamweaver進行網(wǎng)頁布局的方法和技巧進行網(wǎng)頁布局的方法和技巧. .教學(xué)目標：教學(xué)目標： 能使用能使用apap元素來精確的布局網(wǎng)頁，提高學(xué)生的審美觀元素來精確的布局網(wǎng)頁，提高學(xué)生的審美觀教學(xué)內(nèi)容：教學(xué)內(nèi)容：apap元素概述元素概述制作制作apap元素元素apap元素屬性詳解元素屬性詳解apap元素的基本操作元素的基本操作嵌套嵌套apap元素元素apap元素元素htmlhtml代碼代碼使用輔助工具精確定位網(wǎng)頁元素使用輔助工具精確定位網(wǎng)頁元素apap元素和表格的

3、相互轉(zhuǎn)換元素和表格的相互轉(zhuǎn)換本章重點：本章重點：apap元素的插入和屬性設(shè)置。元素的插入和屬性設(shè)置。本章難點：本章難點：嵌套嵌套apap元素和元素和apap元素元素htmlhtml代碼代碼7.2.1ap7.2.1ap元素的概述元素的概述1 1、apap元素的應(yīng)用：元素的應(yīng)用： 布局網(wǎng)頁；制作簡單動畫布局網(wǎng)頁；制作簡單動畫( (如網(wǎng)頁上飄來飄去的浮動圖如網(wǎng)頁上飄來飄去的浮動圖標標) ) ；設(shè)計特效等；設(shè)計特效等( (電子相冊、顯示與隱藏效果等電子相冊、顯示與隱藏效果等) )。2 2、apap元素的定義：元素的定義： apap元素是被分配了絕對位置的元素是被分配了絕對位置的htmlhtml頁面元素

4、，是頁面元素，是divdiv標標簽或任何其他標簽或其他任何可在簽或任何其他標簽或其他任何可在htmlhtml文檔正文中放入的文檔正文中放入的內(nèi)容內(nèi)容, ,是一種新的網(wǎng)頁元素定位技術(shù)。它的功能強大，可是一種新的網(wǎng)頁元素定位技術(shù)。它的功能強大，可以創(chuàng)建復(fù)雜的頁面布局。以創(chuàng)建復(fù)雜的頁面布局。3 3、apap元素的特點：元素的特點：在在apap元素上可以放置很多可以放在網(wǎng)頁上的內(nèi)容（文元素上可以放置很多可以放在網(wǎng)頁上的內(nèi)容（文本、本、 圖片、表格、圖像、圖片、表格、圖像、apap元素等，除了框架）；元素等，除了框架）；apap元素可以放在網(wǎng)頁的任何位置，可以對網(wǎng)頁元素精元素可以放在網(wǎng)頁的任何位置，可以

5、對網(wǎng)頁元素精確定位；確定位；可以任意調(diào)整可以任意調(diào)整apap元素的大小、背景、疊放順序等元素的大小、背景、疊放順序等可以移動、隱藏、嵌套?？梢砸苿?、隱藏、嵌套。 5 5、apap元素的優(yōu)點：元素的優(yōu)點： 可以像素為單位精確定位頁面元素可以像素為單位精確定位頁面元素( (圖象、文字、多媒圖象、文字、多媒體、表單、超級鏈接，但不可是框架體、表單、超級鏈接，但不可是框架) )； 可以將可以將apap元素放置在頁面的任意位置，使用它可以使元素放置在頁面的任意位置，使用它可以使頁面布局的井然、美觀，又能制作出重疊效果和運動頁面布局的井然、美觀，又能制作出重疊效果和運動效果。效果。 當把頁面元素放入當把頁

6、面元素放入apap元素中時，還可以控制哪個顯示元素中時，還可以控制哪個顯示在前面、哪個顯示在后面、哪個顯示、哪個隱藏，在前面、哪個顯示在后面、哪個顯示、哪個隱藏，apap元素的出現(xiàn)使網(wǎng)頁從二維平面拓展到三維。元素的出現(xiàn)使網(wǎng)頁從二維平面拓展到三維。6 6、apap元素的缺點：元素的缺點： 目前只有目前只有4.04.0以上的高版本瀏覽器才支持以上的高版本瀏覽器才支持apap元素。元素。 難以制作一個適應(yīng)不同分辨率的網(wǎng)頁。難以制作一個適應(yīng)不同分辨率的網(wǎng)頁。( (當一個頁面當一個頁面使用了多個使用了多個apap元素后，頁面的復(fù)雜程度增加而導(dǎo)致元素后，頁面的復(fù)雜程度增加而導(dǎo)致編輯起來非常煩瑣；編輯狀態(tài)與

7、瀏覽狀態(tài)的實際效編輯起來非常煩瑣；編輯狀態(tài)與瀏覽狀態(tài)的實際效果有相當明顯的差別等。果有相當明顯的差別等。) ) 注意：考慮到兼容性和修改時的方便，一般可在編注意：考慮到兼容性和修改時的方便，一般可在編輯或排版網(wǎng)頁時采用輯或排版網(wǎng)頁時采用apap元素布局或者部分頁面采用元素布局或者部分頁面采用apap元素布局，而在發(fā)布網(wǎng)頁時再將其轉(zhuǎn)換為表格布元素布局，而在發(fā)布網(wǎng)頁時再將其轉(zhuǎn)換為表格布局。局。7 7、apap元素面板元素面板apap元素面板是一個可視化管理元素面板是一個可視化管理apap元素的工具。元素的工具。執(zhí)行【窗口】執(zhí)行【窗口】-【apap元素】命令，即可元素】命令，即可打開打開apap元素

8、面板，元素面板，如下圖所示。如下圖所示。 其中眼睛睜開和關(guān)閉表示其中眼睛睜開和關(guān)閉表示apap元素的顯示和隱藏。元素的顯示和隱藏。 apap元素還元素還有一個概念就是有一個概念就是apap元素數(shù)，元素數(shù)，apap元素數(shù)決定了重疊時哪個元素數(shù)決定了重疊時哪個apap元素在上面哪個元素在上面哪個apap元素在下面。比如元素在下面。比如apap元素數(shù)為元素數(shù)為2 2的的apap元元素在素在apap元素數(shù)為元素數(shù)為1 1的的apap元素的上面。改變元素的上面。改變apap元素數(shù)就可以元素數(shù)就可以改變改變apap元素的重疊順序。元素的重疊順序。 apap元素面板中可以實現(xiàn)的操作有：可選擇顯示、隱藏、防元

9、素面板中可以實現(xiàn)的操作有：可選擇顯示、隱藏、防止止apap元素重疊。在元素重疊。在dreamweaverdreamweaver中使用中使用apap元素面板使得對元素面板使得對apap元素的操作變得十分方便和簡單。元素的操作變得十分方便和簡單。 7.2.27.2.2創(chuàng)制作創(chuàng)制作apap元素元素1.1.在首選參數(shù)對話框中設(shè)置在首選參數(shù)對話框中設(shè)置apap元素的參數(shù)元素的參數(shù)，可設(shè)置，可設(shè)置apap元素嵌套和顯示元素嵌套和顯示apap元素錨記。元素錨記。選中選中“ap元素錨記元素錨記”設(shè)置后，會在設(shè)置后，會在ap元素的左上角顯元素的左上角顯示一個示一個ap元素錨記，單擊元素錨記，單擊ap元素錨記可以

10、方便的選擇元素錨記可以方便的選擇ap元素，尤其是選擇被隱藏的元素，尤其是選擇被隱藏的ap元素。元素。2.2.在頁面中插入在頁面中插入apap元素元素（嵌套（嵌套apap元素是其代碼包含在另一個元素是其代碼包含在另一個apap元素中的元素中的apap元素）元素） 單擊插入欄單擊插入欄“布局布局繪制繪制apap元素元素”按鈕按鈕( (按住按住ctrlctrl鍵單擊鍵單擊時，可以一次插入多個），即可在設(shè)計視圖中繪制時，可以一次插入多個），即可在設(shè)計視圖中繪制apap元素。元素。 選擇菜單選擇菜單“插入插入布局對象布局對象-ap-ap元素元素”命令，即可在設(shè)命令，即可在設(shè)計視圖中繪制計視圖中繪制apa

11、p元素。元素。 繪制繪制apap元素和插入元素和插入apap元素的差別：只是在代碼視圖中與之元素的差別：只是在代碼視圖中與之相應(yīng)的相應(yīng)的htmlhtml代碼位置不盡相同，代碼位置不盡相同，繪制的繪制的apap元素元素緊跟緊跟bodybody標標簽之后顯示代碼；使用插入菜單插入的簽之后顯示代碼；使用插入菜單插入的apap元素，其相關(guān)代元素，其相關(guān)代碼在插入點處插入。碼在插入點處插入。為為apap元素添加內(nèi)容：用以往的插入對象的方法即可。元素添加內(nèi)容：用以往的插入對象的方法即可。設(shè)置設(shè)置apap元素的可見性：在屬性面板和元素的可見性：在屬性面板和apap元素面板中都可設(shè)置。元素面板中都可設(shè)置。設(shè)置

12、重疊性：在設(shè)置重疊性：在apap元素面板中設(shè)置元素面板中設(shè)置3.ap3.ap元素的元素的htmlhtml代碼代碼ap元素css樣式ap元素標簽4.ap4.ap元素的絕對定位（一般是默認設(shè)置）和相對定位元素的絕對定位（一般是默認設(shè)置）和相對定位 在居中頁面中使用在居中頁面中使用apap元素，最大的問題就是元素，最大的問題就是apap元素的定位問元素的定位問題，若題，若apap元素設(shè)置成相對定位，當改變顯示器分辨率后，元素設(shè)置成相對定位，當改變顯示器分辨率后，apap元素相對其它居中元素就會改變位置；若元素相對其它居中元素就會改變位置；若apap元素設(shè)置成絕對元素設(shè)置成絕對定位，當改變分辨率后，定

13、位，當改變分辨率后，apap元素的內(nèi)容相對其它居中元素都元素的內(nèi)容相對其它居中元素都不會發(fā)生錯位現(xiàn)象。不會發(fā)生錯位現(xiàn)象。 apap元素的絕對定位代碼元素的絕對定位代碼:div id=layer1 : width:400px; height:155px; z-index:1 apap元素的相對定位代碼元素的相對定位代碼:div id=layer1 :width:400px; height:155px; z-index:1注意：注意： 插入絕對定位代碼，當插入絕對定位代碼，當leftleft和和toptop含有正負數(shù)值時，含有正負數(shù)值時，apap元素元素就無法居中。當清除就無法居中。當清除left

14、left和和toptop屬性后，屬性后，apap元素可以居中，元素可以居中，相對頁面其它居中元素沒有錯位現(xiàn)象。相對頁面其它居中元素沒有錯位現(xiàn)象。 在居中頁面中，插入相對定位在居中頁面中，插入相對定位apap元素代碼，元素代碼，apap元素的位置在元素的位置在頁面居中。但是它變得不可移動，使用不夠方便。頁面居中。但是它變得不可移動，使用不夠方便。7.2.3.ap7.2.3.ap元素屬性詳解元素屬性詳解單個單個apap元素的屬性元素的屬性 apap元素編號元素編號：用于指定一個名稱，用于識別不同的：用于指定一個名稱，用于識別不同的apap元素。元素。 apap元素的命名規(guī)則：元素的命名規(guī)則：apa

15、p元素的名字是唯一的，即不允許重元素的名字是唯一的，即不允許重名；使用英文字母的字符開頭；不要使用空格、連字符、名；使用英文字母的字符開頭；不要使用空格、連字符、斜杠、句號等特殊字符。斜杠、句號等特殊字符。 左和上左和上：指定：指定apap元素的左上角相對于頁面（如果嵌套，則元素的左上角相對于頁面（如果嵌套，則為父為父apap元素）左上角的位置。用以精確定元素）左上角的位置。用以精確定apap元素的位置。元素的位置。用鼠標拖動的方法移動用鼠標拖動的方法移動apap元素的位置時直觀方便但不精確。元素的位置時直觀方便但不精確。 寬和高寬和高：指定：指定apap元素的寬度和高度。元素的寬度和高度。

16、z z 軸軸：確定：確定apap元素的元素的z z軸順序（即堆疊順序）。軸順序（即堆疊順序）。 背景圖像：背景圖像：指定指定apap元素的背景圖像。元素的背景圖像。 背景顏色：背景顏色：指定指定apap元素的背景顏色。元素的背景顏色。 剪輯：剪輯：定義定義apap元素的可見區(qū)域。指定左側(cè)、頂部、右側(cè)元素的可見區(qū)域。指定左側(cè)、頂部、右側(cè)和底邊坐標可在和底邊坐標可在apap元素的坐標空間中定義一個矩形。元素的坐標空間中定義一個矩形。apap元素經(jīng)過元素經(jīng)過“剪輯剪輯”后，只有指定的矩形區(qū)域才是可見。后，只有指定的矩形區(qū)域才是可見。 （apap元素本身的）可見性元素本身的）可見性：指定該：指定該ap

17、ap元素最初是否是可元素最初是否是可見的，有見的，有4 4個選項：個選項：auto“auto“默認默認”：不指定可見性屬性，默認為：不指定可見性屬性，默認為“繼承繼承”。inherit“inherit“繼承繼承”：使用該：使用該apap元素父級的可見性屬性。元素父級的可見性屬性。（子（子apap元素會遺傳父元素會遺傳父apap元素的特征）元素的特征） visible“visible“可見可見”：顯示這些：顯示這些apap元素的內(nèi)容。元素的內(nèi)容。 hidden“hidden“隱藏隱藏”：隱藏這些：隱藏這些apap元素的內(nèi)容。元素的內(nèi)容。 溢出（溢出（apap元素中內(nèi)容的可見性）：元素中內(nèi)容的可見

18、性）：控制當控制當apap元素的內(nèi)容元素的內(nèi)容超過超過apap元素的指定大小時如何在瀏覽器中顯示元素的指定大小時如何在瀏覽器中顯示apap元素。元素。visiblevisible“可見可見”：指示在：指示在apap元素中顯示額外元素中顯示額外的內(nèi)容的內(nèi)容. .hidden“hidden“隱藏隱藏”：指定不在瀏覽器中顯示額外的內(nèi)容。：指定不在瀏覽器中顯示額外的內(nèi)容。scroll“scroll“滾動滾動”：指定瀏覽器應(yīng)在：指定瀏覽器應(yīng)在apap元素上添加滾動元素上添加滾動條，而不管是否需要滾條，而不管是否需要滾 動條。動條。auto“auto“自動自動”：使瀏覽器僅在需要時才顯示：使瀏覽器僅在需要

19、時才顯示apap元素的元素的滾動條。滾動條。多個多個apap元素的屬性：元素的屬性： 標簽：制定所用的標簽：制定所用的htmlhtml標簽。推薦使用標簽。推薦使用spanspan和和divdiv。7.2.4ap7.2.4ap元素的基本操作元素的基本操作1.1.激活激活apap元素元素: :插入點放入插入點放入apap元素內(nèi)，向元素內(nèi)，向apap元素中添加內(nèi)容。元素中添加內(nèi)容。 通過在通過在apap元素中單擊激活元素中單擊激活apap元素。元素。2.2.選擇選擇apap元素元素: :對對apap元素設(shè)置屬性；元素設(shè)置屬性；和激活和激活apap元素的顯示方式元素的顯示方式與作用均不同與作用均不同單

20、擊單擊apap元素邊框元素邊框選擇一個選擇一個apap元素、多個元素、多個apap元素、連續(xù)元素、連續(xù)apap元素、不連續(xù)元素、不連續(xù)apap元素元素在在apap元素面板中通過選擇元素面板中通過選擇apap元素的名字元素的名字，直接選取一個，直接選取一個（按（按shiftshift選多個）選多個）單擊單擊apap元素標記或標簽元素標記或標簽3.3.調(diào)整調(diào)整apap元素大小元素大小一次可調(diào)整一個一次可調(diào)整一個apap元素的大小也可同時調(diào)整幾個元素的大小也可同時調(diào)整幾個apap元素的大小元素的大小具體操作是：拖動或在屬性面板中輸入具體操作是：拖動或在屬性面板中輸入apap元素的寬、高元素的寬、高3

21、.3.移動移動apap元素元素選定要移動的選定要移動的apap元素，拖動或按鍵盤的箭頭元素，拖動或按鍵盤的箭頭4.4.對齊對齊apap元素元素當將幾個當將幾個apap元素對齊時，選擇幾個元素對齊時，選擇幾個apap元素，然后選擇元素，然后選擇“修改修改-對齊對齊”5.5.吸附吸附apap元素到網(wǎng)格元素到網(wǎng)格 顯示網(wǎng)格有助于精確定位顯示網(wǎng)格有助于精確定位apap元素和調(diào)整元素和調(diào)整apap元素的大小。元素的大小。若若啟用吸附功能啟用吸附功能，在移動或調(diào)整，在移動或調(diào)整apap元素的大小時，則元素的大小時，則apap元元素被自動定位到最近的吸附位置。素被自動定位到最近的吸附位置。 要吸附要吸附ap

22、ap元素元素，選擇，選擇“查看查看網(wǎng)格網(wǎng)格靠齊到網(wǎng)格靠齊到網(wǎng)格” 改變網(wǎng)格和吸附的位置改變網(wǎng)格和吸附的位置，選擇，選擇“查看查看網(wǎng)格網(wǎng)格設(shè)置設(shè)置”7.2.57.2.5嵌套嵌套apap元素元素 嵌套嵌套apap元素是指在元素是指在apap元素內(nèi)部的子元素內(nèi)部的子apap元素，當移動元素，當移動apap元素元素的時候，其內(nèi)部的嵌套的時候，其內(nèi)部的嵌套apap元素也會隨之移動。元素也會隨之移動。添加嵌套添加嵌套apap元素的元素的3 3種方法：種方法：n創(chuàng)建創(chuàng)建2 2個個apap元素，把其中一個元素，把其中一個apap元素對應(yīng)的代碼剪切元素對應(yīng)的代碼剪切并粘貼到另一個并粘貼到另一個apap元素的元素

23、的divdiv標簽中。標簽中。n創(chuàng)建一個創(chuàng)建一個apap元素并激活它，然后在其中繼續(xù)繪制元素并激活它，然后在其中繼續(xù)繪制apap元元素，則新繪制的素，則新繪制的apap元素即是子元素即是子apap元素，嵌套在另一個元素，嵌套在另一個apap元素中。元素中。n按住按住ctrlctrl鍵，在鍵，在apap元素面板中用鼠標拖放一個元素面板中用鼠標拖放一個apap元素元素到另一個到另一個apap元素的上面。元素的上面。7.2.67.2.6使用輔助工具精確定位使用輔助工具精確定位網(wǎng)頁元素當頁面內(nèi)容越來越復(fù)雜時，尤其使用了大量圖片網(wǎng)頁元素當頁面內(nèi)容越來越復(fù)雜時，尤其使用了大量圖片時，頁面內(nèi)容的精確定位就會成為一個大問題，時，頁面內(nèi)容的精確定位就會成為一個大問題，dreamweaver 8dreamweaver 8提供了相當豐富的頁面內(nèi)容功能來解決這個提供了相當豐富的頁面內(nèi)容功能來解決這個問題，比如使用輔助線、視圖的縮放工具和使用視圖的選問題，比如使用輔助線、視圖的縮放工具和使用視圖的選取工具等。取工具等。 查看查看- -輔助線輔助線- -可以更方便地確定網(wǎng)頁元素的位置或大小可以更方便地確定網(wǎng)頁元素的位置或大小. . 將鼠標指針移動到輔助線分割的方格中將鼠標指針移動到輔助