dreamever中如何應(yīng)用AP元素和時間軸

1、第第8章應(yīng)用章應(yīng)用AP元素和時間軸元素和時間軸 本章導(dǎo)讀：本章導(dǎo)讀：AP：Absolute Position，絕對位置。，絕對位置。AP元素：分配有絕對位置的元素。元素：分配有絕對位置的元素。AP元素主要應(yīng)用于網(wǎng)頁布局設(shè)計中，主要指元素主要應(yīng)用于網(wǎng)頁布局設(shè)計中，主要指AP Div，它們可以提供，它們可以提供最精確的布局定位最精確的布局定位方式，使網(wǎng)頁方式，使網(wǎng)頁呈現(xiàn)出呈現(xiàn)出層疊層疊的效果。的效果。AP元素和時間軸相結(jié)合可以制作出元素和時間軸相結(jié)合可以制作出動態(tài)效果動態(tài)效果。v教學(xué)目標(biāo)：本章將學(xué)習(xí)使用教學(xué)目標(biāo)：本章將學(xué)習(xí)使用AP元素精確定位網(wǎng)頁的元素精確定位網(wǎng)頁的頁面元素，達到能夠精確定位布局并

2、能使用他們使頁面元素，達到能夠精確定位布局并能使用他們使網(wǎng)頁呈現(xiàn)層疊效果。學(xué)會將時間軸和網(wǎng)頁呈現(xiàn)層疊效果。學(xué)會將時間軸和AP元素動畫結(jié)元素動畫結(jié)合使用，實現(xiàn)網(wǎng)頁的動態(tài)效果。合使用，實現(xiàn)網(wǎng)頁的動態(tài)效果。v重點和難點：重點和難點： 1AP元素精確定位網(wǎng)頁的頁面元素元素精確定位網(wǎng)頁的頁面元素 2時間軸和時間軸和AP元素動畫結(jié)合使用，實現(xiàn)網(wǎng)頁的動元素動畫結(jié)合使用，實現(xiàn)網(wǎng)頁的動態(tài)效果態(tài)效果8.1 Div標(biāo)簽簡介標(biāo)簽簡介vDiv標(biāo)簽又稱為標(biāo)簽又稱為區(qū)隔標(biāo)記區(qū)隔標(biāo)記，它的主要作用是可將頁面，它的主要作用是可將頁面分割成不同區(qū)域，設(shè)定文字、圖像和表格等的排列位分割成不同區(qū)域，設(shè)定文字、圖像和表格等的排列位置，

3、并對他們進行精確定位。置，并對他們進行精確定位。 v標(biāo)準(zhǔn)的工作流程：創(chuàng)建標(biāo)準(zhǔn)的工作流程：創(chuàng)建CSS規(guī)則規(guī)則創(chuàng)建創(chuàng)建Div標(biāo)簽標(biāo)簽8.1.1為為Div標(biāo)簽定義標(biāo)簽定義CSS規(guī)則規(guī)則v操作方法：操作方法：方法方法1：打開：打開【CSS】面板，單擊面板，單擊【CSS】|【屬性屬性】|【新建新建CSS規(guī)則規(guī)則】按鈕，打開按鈕，打開【新建新建CSS規(guī)則規(guī)則】對話框進行設(shè)置。對話框進行設(shè)置。方法方法2：也可以使用：也可以使用“文本文本”菜單進行操作。菜單進行操作。注意：一般使用注意：一般使用ID選擇器選擇器8.1.2 Div標(biāo)簽的創(chuàng)建標(biāo)簽的創(chuàng)建v創(chuàng)建的方法創(chuàng)建的方法【插入記錄插入記錄】|【布局對象布局對象

4、】|【Div標(biāo)簽標(biāo)簽】菜單命令來實現(xiàn)。菜單命令來實現(xiàn)。使用工具欄按鈕創(chuàng)建使用工具欄按鈕創(chuàng)建通過表格轉(zhuǎn)換為通過表格轉(zhuǎn)換為Div（“修改修改”菜單）菜單）v注意插入在代碼中的位置注意插入在代碼中的位置v結(jié)構(gòu)的隱藏（可視化助理）結(jié)構(gòu)的隱藏（可視化助理）8.2 AP 元素的應(yīng)用元素的應(yīng)用vAP元素元素(絕對定位元素絕對定位元素)是分配有絕對位置的是分配有絕對位置的HTML元素。元素。v特點：可以任意調(diào)整特點：可以任意調(diào)整AP元素的大小、位置、疊放順元素的大小、位置、疊放順序等，它提供了一種在網(wǎng)頁上序等，它提供了一種在網(wǎng)頁上比較自由地進行布局比較自由地進行布局和設(shè)計的途徑。和設(shè)計的途徑。vAP Div是

5、使用最多的是使用最多的AP元素。元素。8.2.1應(yīng)用應(yīng)用AP Div創(chuàng)建創(chuàng)建AP元素元素v方法方法1：切換到：切換到【布局布局】工具欄，單擊工具欄，單擊【標(biāo)準(zhǔn)標(biāo)準(zhǔn)】按按鈕，然后單擊鈕，然后單擊【繪制繪制AP Div】按鈕在設(shè)計視圖中拖按鈕在設(shè)計視圖中拖曳鼠標(biāo)繪制曳鼠標(biāo)繪制AP元素。元素。v方法方法2：執(zhí)行：執(zhí)行【插入記錄插入記錄】|【布局對象布局對象】|【AP Div】菜單命令，與菜單命令，與【繪制繪制AP Div】按鈕同樣能達到插入按鈕同樣能達到插入AP Div的目的。的目的。v舉例：舉例：繪制四個繪制四個150130的緊密排列為的緊密排列為“田田”字型字型的的AP元素元素8.2.2 為為A

6、P元素添加內(nèi)容元素添加內(nèi)容v方法：在方法：在AP元素內(nèi)部任意位置單擊鼠標(biāo)元素內(nèi)部任意位置單擊鼠標(biāo)左鍵，光標(biāo)將會在左鍵，光標(biāo)將會在AP元素中閃動，即可元素中閃動，即可以為以為AP元素添加內(nèi)容了。元素添加內(nèi)容了。v舉例：為剛才的四個舉例：為剛才的四個AP元素插入圖片元素插入圖片8.2.3操作和管理操作和管理AP元素元素1選擇選擇AP元素：當(dāng)元素：當(dāng)AP元素的四邊出現(xiàn)元素的四邊出現(xiàn)8個控制點個控制點則說明已被選中。則說明已被選中。（1）選定單個）選定單個AP元素（三種方法）元素（三種方法）單擊單擊AP元素的選擇柄元素的選擇柄單擊單擊AP元素的邊框元素的邊框“AP元素元素”面板中單擊面板中單擊AP元素

7、的名稱元素的名稱（2）選定多個）選定多個AP元素元素+單擊單擊2、調(diào)整大小、調(diào)整大小v在按在按【Ctrl】鍵的同時按鍵的同時按鍵盤鍵盤上的方向鍵，每上的方向鍵，每次可調(diào)整次可調(diào)整1像素。像素。v鼠標(biāo)鼠標(biāo)拖動拖動v屬性面板屬性面板中輸入數(shù)值中輸入數(shù)值3、移動、定位、移動、定位v在按在按【shift】鍵的同時按鍵盤上的方向鍵，每鍵的同時按鍵盤上的方向鍵，每次可調(diào)整次可調(diào)整10像素像素;移動鍵盤上的方向鍵，每次移動鍵盤上的方向鍵，每次可調(diào)整可調(diào)整1像素。像素。v鼠標(biāo)拖動鼠標(biāo)拖動v屬性面板中輸入數(shù)值屬性面板中輸入數(shù)值4AP元素的隱藏與重疊元素的隱藏與重疊（1）顯示和隱藏）顯示和隱藏v選擇選擇AP元素后

8、，進入元素后，進入【屬性屬性】面板操作。面板操作。vAP元素面板中操作元素面板中操作（2）重疊）重疊5對齊對齊AP元素元素v使用對齊使用對齊AP元素命令就可按最后一個選定元素命令就可按最后一個選定AP元素的邊框來對齊一個或多個元素的邊框來對齊一個或多個AP元素。元素。v方法：執(zhí)行方法：執(zhí)行【修改修改】|【排列順序排列順序】命令命令6AP元素的屬性面板元素的屬性面板v單個單個AP元素的屬性面板元素的屬性面板v多個多個AP元素的屬性面板元素的屬性面板要求：掌握各個屬性的含義。要求：掌握各個屬性的含義。各個選項的功能（單個）：各個選項的功能（單個）：（1）CSS-P元素：元素：AP Div的名稱，用

9、來識別不同的的名稱，用來識別不同的AP Div，此處為此處為apDiv4。（2）左：）左：AP Div距離距離容器容器左邊界的距離。左邊界的距離。（3）上：）上：AP Div距離距離容器容器上邊界的距離。上邊界的距離。（4）寬：）寬：AP Div的寬度。的寬度。（5）高：）高：AP Div的高度。的高度。（6）Z軸：軸：AP Div的的Z軸順序，或者說疊加順序。數(shù)值高的軸順序，或者說疊加順序。數(shù)值高的AP元素會顯示在數(shù)值低的上面。數(shù)值可以是正也可以是負。元素會顯示在數(shù)值低的上面。數(shù)值可以是正也可以是負。（7）可見性：設(shè)置）可見性：設(shè)置AP Div的可見性，的可見性，AP Div的顯示狀態(tài)包括：

10、的顯示狀態(tài)包括：default（默認）：不指定可視性屬性。當(dāng)未指定可見性（默認）：不指定可視性屬性。當(dāng)未指定可見性時，大多數(shù)瀏覽器會默認為時，大多數(shù)瀏覽器會默認為inherit。inherit（繼承）：使用該（繼承）：使用該AP Div元素父級的可見屬性。元素父級的可見屬性。visible（可視）：顯示（可視）：顯示AP元素的內(nèi)容，不管其父元素的內(nèi)容，不管其父AP元素元素的值。的值。hidden（隱藏）：不顯示（隱藏）：不顯示AP元素內(nèi)容，不管其父元素內(nèi)容，不管其父AP元元素的值。素的值。（8）背景圖像：為）背景圖像：為AP Div設(shè)置一個背景圖像，單擊其文件夾設(shè)置一個背景圖像，單擊其文件夾圖

11、標(biāo)可瀏覽到一個圖像文件并將其選定。圖標(biāo)可瀏覽到一個圖像文件并將其選定。（9）背景顏色：設(shè)置）背景顏色：設(shè)置AP Div的背景顏色，如果將此選項留為的背景顏色，如果將此選項留為空白，則表示指定透明的背景?？瞻?，則表示指定透明的背景。（10）類：選擇）類：選擇AP Div的樣式的樣式(如在頁面中對如在頁面中對AP Div進行了進行了CSS樣式設(shè)置樣式設(shè)置)。（11）溢出：設(shè)置當(dāng)）溢出：設(shè)置當(dāng)AP Div 元素超出了元素超出了AP Div范圍后顯示內(nèi)范圍后顯示內(nèi)容的方式。它包括容的方式。它包括visible (可視可視)：當(dāng)：當(dāng)AP元素內(nèi)的內(nèi)容超出了元素內(nèi)的內(nèi)容超出了AP元素的大小元素的大小則增大則

12、增大AP元素的尺寸。元素的尺寸。AP元素的擴展方向為下方和右方。元素的擴展方向為下方和右方。hidden (隱藏隱藏)：保持：保持AP元素的大小并裁掉容納不下的東元素的大小并裁掉容納不下的東西，并且不會出現(xiàn)滾動。西，并且不會出現(xiàn)滾動。scroll(滾動滾動)：無論：無論AP元素內(nèi)的內(nèi)容是否超出了，元素內(nèi)的內(nèi)容是否超出了，AP元元素的大小都為素的大小都為AP元素添加滾動條。元素添加滾動條。auto(自動自動)：只有當(dāng)：只有當(dāng)AP元素內(nèi)的內(nèi)容超出了它的邊界才元素內(nèi)的內(nèi)容超出了它的邊界才出現(xiàn)滾動條出現(xiàn)滾動條。（12）剪輯：定義）剪輯：定義AP Div的可見區(qū)域。指定左側(cè)、頂部、右側(cè)的可見區(qū)域。指定左

13、側(cè)、頂部、右側(cè)和底邊坐標(biāo)可在和底邊坐標(biāo)可在AP Div的坐標(biāo)空間中定義一個矩形，一般的坐標(biāo)空間中定義一個矩形，一般從從AP Div的左上角開始計算。的左上角開始計算。AP Div經(jīng)過剪輯后，只有指經(jīng)過剪輯后，只有指定的矩形區(qū)域才是可見的。定的矩形區(qū)域才是可見的。v文本屬性部分在前面的學(xué)習(xí)中己經(jīng)講過，這里就不再重復(fù)了。文本屬性部分在前面的學(xué)習(xí)中己經(jīng)講過，這里就不再重復(fù)了。這里只簡單介紹下半部分的設(shè)置。這里只簡單介紹下半部分的設(shè)置。（1）左、上：指定）左、上：指定AP元素相對頁面或者其父元素相對頁面或者其父AP元素左上角元素左上角的位置。的位置。（2）寬、高：指定）寬、高：指定AP元素的寬和高。當(dāng)

14、元素的寬和高。當(dāng)AP元素中的內(nèi)容超元素中的內(nèi)容超出設(shè)定值時這些值將失效。出設(shè)定值時這些值將失效。（3）顯示：指定）顯示：指定AP元素顯示的初始情況元素顯示的初始情況(顯示與否顯示與否)。（4）標(biāo)簽：指定所用的）標(biāo)簽：指定所用的HTML標(biāo)簽。標(biāo)簽。（5）背景圖象：為）背景圖象：為AP元素指定背景圖像。元素指定背景圖像。（6）背景顏色：為）背景顏色：為AP元素指定背景顏色。當(dāng)這個選項空著即元素指定背景顏色。當(dāng)這個選項空著即為指定透明背景。為指定透明背景。各個選項的功能（多個）：各個選項的功能（多個）：8.2.4嵌套嵌套AP元素元素v嵌套嵌套AP元素是指在元素是指在AP元素內(nèi)部的子元素內(nèi)部的子AP元

15、素。當(dāng)移動元素。當(dāng)移動AP元素的時候，其內(nèi)部的嵌套元素的時候，其內(nèi)部的嵌套AP元素也會隨之移動。元素也會隨之移動。1、執(zhí)行、執(zhí)行【編輯編輯】|【首選參數(shù)首選參數(shù)】命令，打開命令，打開“首選參數(shù)首選參數(shù)”對話框，選擇對話框，選擇【分類分類】，列表中的，列表中的【AP元素元素】，勾選，勾選【在在AP div中創(chuàng)建以后嵌套中創(chuàng)建以后嵌套】復(fù)選框。然后直接繪制。復(fù)選框。然后直接繪制。2、在、在AP元素內(nèi)部使用插入菜單新建嵌套元素內(nèi)部使用插入菜單新建嵌套AP元素。元素。3、將已經(jīng)存在的、將已經(jīng)存在的AP元素添加為另外一個元素添加為另外一個AP元素的嵌套元素的嵌套AP元素。（元素。（+拖動）拖動）講講CS

16、S中的定位屬性中的定位屬性8.2.5合并分割圖像合并分割圖像1、為什么要分割圖像？、為什么要分割圖像？在網(wǎng)頁設(shè)計中，經(jīng)常將較大的圖像分割成若干個小圖在網(wǎng)頁設(shè)計中，經(jīng)常將較大的圖像分割成若干個小圖像插入到網(wǎng)頁中，防止長時間空白頁面的出現(xiàn)。像插入到網(wǎng)頁中，防止長時間空白頁面的出現(xiàn)。2、合并的方法、合并的方法v步驟步驟1：選擇需要顯示的素材圖像。：選擇需要顯示的素材圖像。v步驟步驟2：根據(jù)圖像的個數(shù)和位置創(chuàng)建若干：根據(jù)圖像的個數(shù)和位置創(chuàng)建若干AP div，調(diào)整其，調(diào)整其大小和位置。大小和位置。注意要緊密排列、防止重疊。注意要緊密排列、防止重疊。v步驟步驟3：在其中放入圖片。：在其中放入圖片。注意注意

17、AP div大小和圖片大小相同，防止空隙產(chǎn)生。大小和圖片大小相同，防止空隙產(chǎn)生。v步驟步驟4（可選可選）（）轉(zhuǎn)換為表格固定效轉(zhuǎn)換為表格固定效果。果。“修改修改”菜單菜單3、舉例說明、舉例說明8.3 制作制作AP元素動畫元素動畫動畫的原理：動畫的原理： 畫面的連續(xù)播放，產(chǎn)生的一種運畫面的連續(xù)播放，產(chǎn)生的一種運動的錯覺。動的錯覺。實現(xiàn)方法：實現(xiàn)方法： 時間軸時間軸8.3.1.認識認識“時間軸時間軸”面板面板（1）“時間軸時間軸”下拉列表框：指定當(dāng)前在下拉列表框：指定當(dāng)前在【時間軸時間軸】面板中顯面板中顯示文檔的哪些時間軸。示文檔的哪些時間軸。（2）播放欄：播放欄所處位置就是動畫當(dāng)前所在時間軸的幀。

18、）播放欄：播放欄所處位置就是動畫當(dāng)前所在時間軸的幀。（3）動畫條：顯示每個對象的動畫的持續(xù)時間。一個行可以包）動畫條：顯示每個對象的動畫的持續(xù)時間。一個行可以包含表示不同對象的多個條。不同的條無法控制同一幀中的同含表示不同對象的多個條。不同的條無法控制同一幀中的同一對象。一對象。（4）關(guān)鍵幀）關(guān)鍵幀: 是動畫條中已經(jīng)為對象指定屬性是動畫條中已經(jīng)為對象指定屬性(如位置如位置)的幀。的幀。Dreamweaver會計算關(guān)鍵幀之間幀的中間值。小圓標(biāo)記表示會計算關(guān)鍵幀之間幀的中間值。小圓標(biāo)記表示關(guān)鍵幀。關(guān)鍵幀。（5）幀編號：指示幀的序號。）幀編號：指示幀的序號?！竞笸撕笸恕亢秃汀静シ挪シ拧堪粹o之間的按鈕

19、之間的數(shù)字數(shù)字8是當(dāng)前幀編號?？梢酝ㄟ^設(shè)置幀的總數(shù)和每秒幀數(shù)來控是當(dāng)前幀編號。可以通過設(shè)置幀的總數(shù)和每秒幀數(shù)來控制動畫的持續(xù)時間。每秒制動畫的持續(xù)時間。每秒15幀這一默認設(shè)置是比較適當(dāng)?shù)钠綆@一默認設(shè)置是比較適當(dāng)?shù)钠骄俾?，可用于在通常的均速率，可用于在通常的Windows和和Macintosh系統(tǒng)上運行系統(tǒng)上運行的大多數(shù)瀏覽器。的大多數(shù)瀏覽器。（6）“行為行為”通道：是應(yīng)該在時間軸中特定幀處執(zhí)行的行為的通道：是應(yīng)該在時間軸中特定幀處執(zhí)行的行為的通道。通道。（7）“動畫動畫”通道：顯示用于制作通道：顯示用于制作AP元素和圖像動畫的條。元素和圖像動畫的條。（8）前進按鈕將播放欄移至?xí)r間軸中的第一

20、幀。）前進按鈕將播放欄移至?xí)r間軸中的第一幀。（9）后退按鈕將播放欄向左移動一幀。單擊）后退按鈕將播放欄向左移動一幀。單擊【后退后退】按鈕并按按鈕并按住鼠標(biāo)可向后播放時間軸。住鼠標(biāo)可向后播放時間軸。（10）播放按鈕將播放欄向右移動一幀。單擊）播放按鈕將播放欄向右移動一幀。單擊【播放播放】按鈕并按鈕并按住鼠標(biāo)可向前播放時間軸。按住鼠標(biāo)可向前播放時間軸。（11）自動播放：勾選自動播放選項可以使時間軸在瀏覽器中）自動播放：勾選自動播放選項可以使時間軸在瀏覽器中加載時自動開始播放。加載時自動開始播放。“自動播放自動播放”將一個行為附加到頁的將一個行為附加到頁的body標(biāo)簽，它在頁加載時執(zhí)行標(biāo)簽，它在頁加

21、載時執(zhí)行“播放時間軸播放時間軸”操作。操作。（12）循環(huán)：勾選循環(huán)選項可以使時間軸于當(dāng)前頁在瀏覽器中）循環(huán)：勾選循環(huán)選項可以使時間軸于當(dāng)前頁在瀏覽器中打開時無限地循環(huán)。打開時無限地循環(huán)。“循環(huán)循環(huán)”在動畫的最后一幀之后將在動畫的最后一幀之后將“轉(zhuǎn)轉(zhuǎn)到時間軸幀到時間軸幀”行為插入到行為插入到“行為行為”通道中。在通道中。在“行為行為”面板面板中雙擊該行為的標(biāo)記可編輯此行為的參數(shù)并更改循環(huán)的次數(shù)。中雙擊該行為的標(biāo)記可編輯此行為的參數(shù)并更改循環(huán)的次數(shù)。8.3.2創(chuàng)建時間軸動畫創(chuàng)建時間軸動畫注意：時間軸只能移動注意：時間軸只能移動AP元素，所以待移動的元素應(yīng)放元素，所以待移動的元素應(yīng)放AP元元素中。素中。舉例說明以下步驟舉例說明以下步驟步驟步驟1：制作：制作AP元素元素步驟步驟2：將：將AP元素拖動到元素拖動到“時間軸時間軸”面板或面板或使用使用“修改修改”菜單菜單步驟步驟3 ：拖動最后一幀到需要的幀數(shù)：拖動最后一幀到需要的幀數(shù)步驟步驟4 ：增加關(guān)鍵幀，并修改其屬性：增加關(guān)鍵幀，并修改其屬性步驟步驟5 ：選定：選定“自動播放自動播放”和和“循環(huán)循環(huán)”選項選項8.3.3使用多個時間軸使用多個時間軸