圖層在網頁設計中的應用

摘要：介紹Dreamweaver8.0中圈層的定位作用，重點敘述圖層結合時間軸、行為在制作網頁動態效果的應用。

關鍵詞；圖層 定位 時間軸 行為

中圖分類號：TP317 文獻標識碼：B 文章編號：1002－2422(2008)03－0032－02

1 元素的定位

在網頁設計中，用來定位頁面元素技術一般包括：表格和圖層。其中表格在網頁的整體布局中使用應該是最廣泛的，尤其是布局表格和布局單元格應用，使頁面布局更方便。但如果在頁面元素上面放置對象時，表格就不能勝任了，這時需要用圖層來排版。網頁設計初學者往往喜歡用圖層來進行頁面定位，層的定位方便且隨意。層的定位是由絕對坐標值實現定位的，而表格的定位是由相對坐標值實現的。層設計的網頁在不同分辨率顯示器上顯示時會出現錯位現象，不能準確定位，很難進行調整。如果在網頁元素中非要采用圖層定位，通過網頁中層的相對定位技術或者將排好的層轉換為表格(Modify/Layout Mode/Convent LayerstoTable)。

2 圖層在制作網頁動態效果中的應用

2.1時間軸與圖層結合制作漂浮廣告

時間軸是由許多幀構成的，這些幀在頁面中的連續播放就構成了時間軸動畫。時間軸使用動態HTML通過幀的變化來改變層的位置、大小、疊放順序和可見性等屬性來創建動畫。使用層中的內容在一定的時間內，按照設計好的路線顯示在頁面中。由于時間軸實現網頁動畫時沒有用到ActiveX、任何插件或Java Applent。必須在IE4.0或更高版本的瀏覽器中瀏覽。下面介紹漂浮廣告制作步驟：

(1)在頁面中繪制圖層：在“插入欄”中單擊布局選項卡中“繪制層”按鈕，在頁面中拖拽一個圖層；

(2)在圖層中插入一個圖片。把光標定位在圖層中插入圖片或動畫，然后調整圖層大小或調整圖片大小，如圖l所示：

(3)記錄層路徑。選中層，把層的起點位置確定好，在選中的層上(不是圖片)單擊鼠標右鍵，彈出菜單中選擇“記錄路徑”，然后拖動圖層，如圖2所示。

(4)設置時間軸參數：Fps設為15，選中“自動播放”和“循環”復選框，如要調節播放速度，可調整Fps的值；

(5)按F12瀏覽網頁

2.2行為與圖層結合應用動態導航條菜單

行為是事件和由該事件觸發的動作的組成。事件是由瀏覽器定義的，瀏覽器響應用戶的某些操作而成為事件。一般事件總是面向頁面元素或標記的。如瀏覽者用鼠標單擊一個按鈕時，瀏覽器就會生成一個Onclick事件。動作由一段寫好的JavaScript代碼所組成，該代碼能執行各種特殊任務，如播放聲音、顯示與隱藏圖層等。動態導航條菜單可以節省頁面空間，使頁面顯得比較干凈。下面介紹層結合行為制作動態導航菜單的步驟。

(1)在頁面插入一個1行3列的表格，設置表格屬性寬度為80％，對齊為居中對齊，填充為0，間距為0；

(2)繪制層，在“專業介紹”下面繪制一個層，在層中插入一個“6行1列”的表格，在表格中輸入文本，如果暫無鏈接，也可不設置；

(3)其他導航條的圖片下方繪制層，并插入表格和輸入文本；操作步驟與第(2)步相同；

(4)添加行為，選中“專業介紹”圖片，打開“行為”面板，在“行為”面板中單擊“+”按鈕，在彈出的下拉菜單中選擇“顯示一隱藏層”選項，把層Layerl設置“顯示”，其他層設置為“隱藏”；

(5)選擇事件，把動作為“顯示一隱藏層”，事件改為“OnMouseOver”，同時為其他的圖層設置相同的行為和選擇事件；

(6)設置圖層起始狀態為“隱藏”，在層面板中通過單擊“眼睛”圖標，使各個層關閉；

(7)按F12鍵瀏覽效果，保存頁面，在IE中瀏覽效果，當單擊相應的文本內容后。會彈出下拉菜單，如果在下拉菜單中設置了鏈接，單擊相應超級鏈接到相應的頁面。

做好的下拉菜單有個缺陷：當下拉菜單在單擊出現后，不會消失。在實際應用中希望動態下拉菜單的功能：當鼠標移動到導航條上時出現下拉菜單，鼠標移開時則下拉菜單消失。為了進一步完善下拉菜單的功能，依次選中各個圖層，分別對每個圖層添加兩個行為。一個是OnMouseOver行為，設置動作為“顯示一隱藏層”，設置選中的層為“顯示”，其他層為“隱藏”；另一個是OnMouseOut事件，同樣設置動作為“顯示一隱藏層”，設置選中的層為“隱藏”，其他層為“顯示”。

3 結束語

為了使網站吸引更多瀏覽者，網頁元素緊緊停留在平面二維是不夠的，可以進一步發揮圖層在空間設置上優越性，再配合行為和時間線兩者結合應用，制作出更多三維網頁效果，如放大圖片，交替顯示圖片廣告等。