摘要 APDiv層在網(wǎng)頁設(shè)計中是非常靈活，能用于對網(wǎng)頁元素的定位；特別是與行為的結(jié)合使用，能制作出很多動力效果。本文將介紹APDiv層與行為結(jié)合使用的三個實例，分別為：滾動新聞制作、下拉菜單制作、圖片切換。這三種效果用在網(wǎng)頁中制作的使用頻率非常高，所以學(xué)會這幾種效果的制作也是非常必要的。

關(guān)鍵詞 AP Div層 行為 子層

APDiv層在網(wǎng)頁設(shè)計中是非常靈活，能用于對網(wǎng)頁元素的定位；特別是與行為的結(jié)合使用，能制作出很多動力效果。本文將介紹APDiv層與行為結(jié)合使用的三個實例，分別為：滾動新聞制作、下拉菜單制作、圖片切換。

實例一：滾動新聞主要在頁面中顯示4條新聞，并滾動顯示，當(dāng)鼠標(biāo)移上去時，停止?jié)L動，鼠標(biāo)離開新聞繼續(xù)滾動。鼠標(biāo)單擊相應(yīng)鏈接跳轉(zhuǎn)到相應(yīng)的新聞頁面。操作步驟如下：

（1）制作層：插入層Layer1，設(shè)置層Layer1屬性，寬為：200Px，高為：100px。

（2）插入子層：在層Layer1中插入子層Layer2，設(shè)置Layer2的屬性，寬為：200px，高為：200px.。

（3）插入表格：選中子層，在子層Layer2中插入表格（8行，1列，寬為200Px），設(shè)置每個單元格的高度為：25Px，背景為白色。

（4）表格中添加內(nèi)容。分別為：計算機(jī)教學(xué)部、汽車教學(xué)部、經(jīng)貿(mào)教學(xué)部、機(jī)電教學(xué)部、計算機(jī)教學(xué)部、汽車教學(xué)部、經(jīng)貿(mào)教學(xué)部、機(jī)電教學(xué)部。再添加相應(yīng)的鏈接。

（5）將子層添加到時間軸：選中子層Layer2，右擊，選擇“添加到時間軸”，將最后一幀移動到第100幀。設(shè)置子層Layer2位置，左為：0px，上為：-100px（使子層Layer2向上移動與父層高度相等的距離：100px）。時間軸上選擇自動播放和循環(huán)屬性。

（6）隱藏溢出區(qū)域：選擇父層Layer1，在屬性面板中，溢出選項中選擇：hidden。

（7）添加行為：選中子層Layer2，在行為面板中單擊“”添加行為。選擇時間軸，再選擇“停止時間軸”，選擇相應(yīng)時間軸，這里選Timeline1。事件選擇：onMouseOver。用相同方法設(shè)置當(dāng)鼠標(biāo)離開（onMouseOut）播放時間軸。

（8）預(yù)覽，效果如下圖所示：

實例二：下拉菜單制作，當(dāng)鼠標(biāo)移動到相應(yīng)的父菜單時，顯示子菜單。離開子菜單時隱藏子菜單。單擊子菜單的相應(yīng)鏈接跳轉(zhuǎn)到相應(yīng)的頁面。操作步驟如下：

（1）制作導(dǎo)航：在網(wǎng)頁中插入表格（2行6列，寬：720px），設(shè)置表格屬性（背景、單元格寬度：120px）。設(shè)置第二行的單元格對齊方式（水平：默認(rèn)，垂直：頂端）。

（2）插入層：在相應(yīng)的菜單下面插入層Layer1。寬度為父菜單的寬度（720px/6=120px），高度（行數(shù)*行高：4*25px=100px）。

（3）插入表格及內(nèi)容：選中層Layer1，在層中插入表格（4行1列，寬度為：120px）。設(shè)置單元格的高度為：25px。表格背景為：白色。設(shè)置對齊方式，輸入內(nèi)容。

（4）添加行為：選擇父菜單所在單元格，在行為面板中選擇“顯示/隱藏”，選擇子菜單所在層，選擇“顯示”，設(shè)置事件為：OnMouseOver。選擇父菜單所在單元格，在行為面板中選擇“顯示/隱藏”選擇子菜單所在層，選擇“隱藏”。設(shè)置事件為：OnMouseOut。然后對子層進(jìn)行相同的設(shè)置，設(shè)置層Layer1的可見性為hidden。

（5）預(yù)覽效果如下圖所示：

實例三：

（1）插入4行2列的表格，將第二行合并。設(shè)置表格屬性。在第一行的中制作圖片交換。

（2）在第二行單元格中插入三個層：Layer1，Layer2，Layer3。并分別在三個層中插入圖片。并設(shè)置插入圖片的大?。?00px€？00px）。設(shè)置Layer2，Layer3可見性為：hidden。

（3）選中第一行第一個單元格，單擊添加行為按鈕“”，選擇顯示—隱藏層。在對話框中選擇Layer1層，單擊按鈕，在行為中選擇“onMouseOver”。再單擊添加行為按鈕“”，選擇顯示—隱藏層。在對話框中選擇Layer1層，單擊按鈕，在行為中選擇“onMouseOut”。

（4）按照步驟（3）完成第一行第二個單元格、第三個單元格的顯示隱藏層制作。對應(yīng)的為：第二個單元格顯示Layer2，第三個單元格顯示Layer3。效果如下圖所示。

（作者單位：河源理工學(xué)校）

參考文獻(xiàn)：

[1]叢書編委會.網(wǎng)頁設(shè)計與制作——DreamweaverCS3+FireworksCS3中文版[M].清華大學(xué)出版社，2009.

[2]溫謙編著.HTML+CSS網(wǎng)頁設(shè)計與布局從入門到精通[M].人民郵電出版社，2008.