淺談層與行為在網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究

摘 要：網(wǎng)頁設(shè)計(jì)是網(wǎng)站建設(shè)中的一個(gè)主體部分，要使設(shè)計(jì)的網(wǎng)頁具有較高的靈活、生動(dòng)性，掌握層和行為的概念、用法是必不可少的。重點(diǎn)敘述層結(jié)合行為、時(shí)間軸在制作網(wǎng)頁動(dòng)態(tài)效果的應(yīng)用。

關(guān)鍵詞：層 行為 時(shí)間軸

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-3973（2013）010-102-02

1 層的概念

層是網(wǎng)頁中用來放置文本、圖像、動(dòng)畫、表單、插件等網(wǎng)頁元素的載體。層在網(wǎng)頁編輯區(qū)中可以自由移動(dòng)，改變層在網(wǎng)頁中的位置，便可實(shí)現(xiàn)層中網(wǎng)頁元素位置的改變。實(shí)際上，層的應(yīng)用技術(shù)也是一種網(wǎng)頁元素的定位技術(shù)，利用層能夠精確對(duì)頁面元素定位。

1.1 創(chuàng)建層的方法

（1）插入層：把光標(biāo)置于網(wǎng)頁制作軟件Dreamweaver 的文檔編輯窗口中想插入層的地方，然后選擇菜單[插入]→[布局對(duì)象]→[層]命令。

（2）拖放層：把插入欄中的層按鈕拖到文檔編輯窗口中。

（3）創(chuàng)建多個(gè)層：?jiǎn)螕鬧插入]→[布局對(duì)象]→[層]按鈕，按下Ctrl 鍵的同時(shí)，在文檔編輯窗口中畫出一個(gè)層。只要不釋放Ctrl 鍵，可以連續(xù)創(chuàng)建多個(gè)層。

1.2 層的應(yīng)用介紹

在層中單擊鼠標(biāo)左鍵，將光標(biāo)置于矩形框內(nèi)，再單擊插入元素的按鈕，彈出選擇元素對(duì)話框，選擇要插入的元素，單擊確認(rèn)按鈕確定。

2 行為

2.1 行為的概念

行為是將javascript代碼放置在文檔中，以允許訪問者與web頁實(shí)現(xiàn)人機(jī)對(duì)話，從而更改頁面或引起某些任務(wù)的執(zhí)行。行為是事件和由該事件觸發(fā)的動(dòng)作構(gòu)成，事件是瀏覽器生成的消息，指示該頁的訪問者執(zhí)行的操作。動(dòng)作是Dreamweaver預(yù)先編寫好執(zhí)行特定任務(wù)的JavaScript代碼組成。

2.2 給對(duì)象添加行為的方法

（1）在設(shè)計(jì)窗口中，選中對(duì)象，可以是層、圖像、有鏈接的文本。

（2）單擊“窗口/行為”面板中的按鈕，在彈出的菜單欄中選擇“顯示-隱藏層”行為。

（3）在打開的設(shè)置對(duì)話框中，對(duì)參數(shù)進(jìn)行設(shè)置。

（4）單擊“確定“按鈕，即可將增加的行為添加到行為列表中。

（5）單擊“onClick”，在下拉列表框中選擇行為的事件。

3 層和行為應(yīng)用技巧實(shí)例

網(wǎng)頁下拉菜單的制作有很多方法。根據(jù)網(wǎng)頁類型的不同，有動(dòng)態(tài)網(wǎng)頁下拉菜單、靜態(tài)網(wǎng)頁下拉菜單。本文使用dreamweaver的層和行為面板制作下來菜單。

層和行為制作下拉菜單時(shí)，利用網(wǎng)頁制作中的javascript腳本中的 onmouseover和onmouseout事件來觸發(fā)層的顯示和隱藏，從而實(shí)現(xiàn)下拉子菜單的隱藏和顯示。具體操作步驟如下：

首先，利用HTML語言中的表格標(biāo)簽制作主菜單。其次，對(duì)各主菜單利用層、表格作下拉菜單，實(shí)現(xiàn)下拉菜單縱向排列。最后，實(shí)現(xiàn)下拉菜單的顯示、主菜單項(xiàng)及子菜單項(xiàng)的超鏈接的各項(xiàng)屬性配置。

按照上述步驟。層和行為方式制作下拉菜單的實(shí)現(xiàn)代碼步驟如下：

（1）利用HTML代碼中的表格標(biāo)簽實(shí)現(xiàn)網(wǎng)頁的主菜單。核心源代碼如下：

其中，td標(biāo)簽中的“首頁”、“學(xué)院概況”、“院系設(shè)置”、“學(xué)院新聞”、“新生園地”是主菜單中的幾項(xiàng)。

（2）對(duì)主菜單利用層作下拉菜單。部分源代碼如下：

學(xué)院簡(jiǎn)介

社會(huì)評(píng)價(jià)

學(xué)校地圖

校長(zhǎng)寄語

其中，“學(xué)院簡(jiǎn)介”、“社會(huì)評(píng)價(jià)”、“學(xué)校地圖”、“校長(zhǎng)寄語”是主菜單“首頁”的下拉菜單。

（3）下拉菜單的顯示、主菜單項(xiàng)及子菜單項(xiàng)的超鏈接的各項(xiàng)屬性配置。

首頁

其中，通過設(shè)置主菜單標(biāo)簽，實(shí)現(xiàn)對(duì)子菜單的顯示設(shè)置。常規(guī)狀態(tài)下，layer1標(biāo)簽內(nèi)的子菜單內(nèi)容隱藏，當(dāng)鼠標(biāo)移到主菜單時(shí)，彈出相應(yīng)的子菜單，當(dāng)鼠標(biāo)離開主菜單時(shí)，隱藏子菜單。

4 結(jié)束語

層和行為在動(dòng)態(tài)效果的網(wǎng)頁設(shè)計(jì)中得到了廣泛的應(yīng)用，層的顯示與隱藏效果已經(jīng)成為優(yōu)秀設(shè)計(jì)中不可缺少的因素。運(yùn)用好層和行為，可以使平面受限的網(wǎng)頁獲得更廣闊的空間。？

參考文獻(xiàn)：

[1] 孫冬梅.dreamweaver cs3 網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)詳解[M].北京：電子工業(yè)出版社，2008.

[2] 余健美.用Dreamweaver MX 2004制作下拉菜單[J].電腦知識(shí)與技術(shù)，2005（2）：65-66.

[3] 梁開敏.網(wǎng)站彈出式下拉菜單導(dǎo)航的實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2005（10）：45-46.