淺談APDiv層與行為的應用

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

關鍵詞 AP Div層 行為 子層

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

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

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

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

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

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

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

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

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

（8）預覽，效果如下圖所示：

實例二：下拉菜單制作，當鼠標移動到相應的父菜單時，顯示子菜單。離開子菜單時隱藏子菜單。單擊子菜單的相應鏈接跳轉到相應的頁面。操作步驟如下：

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

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

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

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

（5）預覽效果如下圖所示：

實例三：

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

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

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

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

（作者單位：河源理工學校）

參考文獻：

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

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