層在網頁制作中的應用研究

摘 要：層是網頁制作時經常用到的對象，也是重要的網頁布局工具之一，運用層的特性使創建的頁面具有更合理、更美觀的網頁效果。

關鍵詞：層；網頁制作；應用研究

中圖分類號：TP393.092 文獻標識碼：A 文章編號：2096-4706（2018）05-0086-03

The Application of Layer in Web Page Making

TIAN Yan

（Shandong Vocational College of Industry，Zibo 256414，China）

Abstract：The layer is the object often used in the web making，and it is also one of the important web layout tools. Using the features of the layer makes the pages more reasonable and beautiful.

Keywords：layer；web making；application research

0 引 言

層就是AP元素，是分配有絕對位置的div標簽頁面元素。層可以包含圖像、文本和可放置到HTML文檔正文中的任何內容。層可以精確控制瀏覽器窗口對象位置的頁面構成元素；可以通過層的次序和重疊的改變，實現一組包含著圖像或文字等元素的變換效果；可以通過動態設定層的隱藏或顯示，可創造層內容的動態交替等特殊效果；通過子層遺傳父級層的嵌套特征，實現內容的可見和位置移動等。層的出現使網頁應用技術從二維空間拓展上升到三維空間，實現頁面元素的相互重疊，實現更為復雜的布局設計，已成為網頁設計的重要技術。以下根據多年網頁制作中的使用經驗介紹幾種層在網頁制作中的應用。

1 利用層制作網頁兩側動態廣告特效

令人耳目一新的浮動廣告，可以用于最新的廣告宣傳，使網頁時尚漂亮，并可以體現一種及時性。制作兩側浮動廣告特效的主要核心步驟如下：

生成層并設置層的屬性：

（1）在網頁界面的適當位置插入層，可以命名為laye r01等，并對層做屬性的設置，例如：

#layer1 {

position：absolute；

width：160px；

height：115px；

z-index：100；

top： 80px；

text-align： center；

left： 60px；

}

（2）在層里插入廣告圖片以及用于關閉廣告的小按鈕圖片，并調整大小。但值得注意的是層內對象不要超出層的大小。如圖1所示。

（3）將層與懸浮特效代碼配合，主要的核心代碼如下：

<！--鏈接地址-->

<！--圖片地址-->

2 利用層制作具有可拖動行為的對象

“拖動AP元素”的層行為允許訪問者自由地放置網頁的各個欄目模塊，讓使用者自定義網頁的布局，設置簡單同時又簡化了設計工作。可是在操作“拖動AP元素”層設置行為時，一定保證觸發該動作的事件要發生在訪問者拖動AP元素之前。最佳的方法是應用onLoad事件，將“拖動AP元素”附加到body元素上。具體實現的主要步驟如下：

（1）在頁面適當的位置插入一個AP元素層，并設置層內容，然后單擊狀態欄左下角的標簽，在“行為”面板上單擊“+”添加行為，然后從彈出的列表中選擇“拖動AP元素”，出現對話框如圖2所示。

（2）在對話框的“基本”選項卡中，設置是否限制拖動AP元素時的可移動范圍，拖動AP元素“放下目標”時的位置以及“靠齊距離”的屬性設置。該屬性與“放下目標”配合使用，當AP元素被拖動到“放下目標”位置距離小于“靠齊距離”時，將自動靠齊以實現AP元素的精確移動。

（3）若還要定義拖動柄等動作，可單擊“高級”選項卡，設置“拖動控制點”、拖動時是否使該層在文檔的最前方以及拖動整個元素時和放下整個元素后需要的JavaScript腳本程序，完成設置。

3 利用層制作頁面導航欄

使用層與行為配合制作網頁導航欄的下拉菜單，即時尚靈活又簡單方便。

（1）在網頁適當的位置插入1行N列的表格為一級導航欄，進行屬性設置。然后輸入及設置每個單元格中的內容，作為一級導航欄下拉菜單的鏈接文字。

（2）在每個單元格內插入層（如apdiv1），保持插入點在單元格的最左邊，層寬度盡量與單元格相同或略小，最重要的是千萬不要移動該層，否則層與表格的相對位置關系將解除。

（3）將插入點放在該層中，插入1列N行的表格，作為二級導航欄下拉菜單表格，表格高度與寬度不要大于所在層，輸入表格內容。

（4）將層的屬性可見性設為不可見，然后選中一級導航欄單元格內的文字，在行為面板中添加行為。

（5）設置“顯示-隱藏元素”。單擊行為面板“+”下拉菜單中的“顯示-隱藏元素”，然后在彈出的對話框中選擇apdiv1為“顯示”，如圖3所示。再新添加一個動作，在“顯示-隱藏元素”對話框中選擇apdiv1為“隱藏”。

（6）設置“顯示-隱藏元素”的觸發條件。在行為面板上會出現剛剛設置的兩個行為，將“顯示”的觸發條件設置為“onMouseOver”，將“隱藏”的觸發條件設置為“onMouseOut”。

（7）按上面的操作步驟，可以制作完成一級導航欄中的其他下拉菜單。

4 利用層設計圖文混排網頁

使用層的定位設計，制作圖文混排的網頁，體現對position屬性的靈活運用，取值適當，并綜合應用left、top、z-index等屬性來進行定位布局網頁。用層來自定義網頁的布局，大大增強了使用者的體驗性，其設置非常簡單，功能又十分強大，大大簡化了設計工作。下面以實例來具體介紹層在網頁布局中的應用。

（1）新建AP DIV層，作為父級，設置代碼為positio n：absolute；top：0px；z-index：1；left：50%；width：960px；height：100%；。其中，寬度width：960px可以是任意值，最主要是left：50%一定要有，才能使其左邊框居中。父級不放內容即可，如果怕它影響，可將其寬度設為0。

#apDiv1 {

position：absolute；

width：960px；

height：100%；

z-index：1；

left：50%；

top：0px；

}

（2）在上面的父級層里新建子級層，假設想要設計網頁寬度為960px，那么以下子級層只要設置left：-480px；width：960px；則子級的左邊框向左出去一半而被父級的左邊框均分，這樣，分辨率變化也不影響它居中，這個層才是真正意義上的布局框層。

#apDiv2 {

position：absolute；

width：960px；

height：780px；

z-index：1；

top：0px；

left：-480px；

background-color： #9900FF；

}

（3）下一層可以放置4個同一級別的層，為apdiv2內嵌層，頂部邊距則可以根據自己的需要調節其垂直位置，只要父級的height為100%（其實任意值都可以），那么子級可以在任意垂直位置。例如第一個height：200px；top：0px，那么第二個則top：201px，即可。同時同一級別并列的層相加的寬度不要超出上層的寬度。值的注意的是：實現這個方法的前提是所有的層都是position：absolute；這個值。

4個內嵌在apdiv2中的層對應的設置是：

#apDiv3 {

position：absolute；

width：960px；

height：200px；

z-index：1；

background-color： #CCCCFF；

}

#apDiv4 {

position：absolute；

width：200px；

height：360px；

z-index：2；

top： 201px；

background-color： #99CC00；

}

#apDiv5 {

position：absolute；

width：756px；

height：360px；

z-index：3；

left： 201px；

top： 201px；

background-color： #33CC66；

}

#apDiv6 {

position：absolute；

width：960px；

height：200px；

z-index：4；

top： 568px；

background-color： #009966；

}

（4）完成后生成的6個層的關系及頁面布局結構如圖4所示。

最后在每個層中放入其他頁面元素，并進行設置，但是放置的元素大小不要超過所在層的大小。

由于層在頁面布局應用中具有更大的隨意性，通過指定坐標位置、方向鍵或拖動的方式就可以把層放到網頁的任何位置，不受頁面中其他元素的限制和干擾，就像懸浮在頁面上一樣，從而使運用層的特性創建的頁面具有更合理、更美觀的網頁效果。

參考文獻：

[1] 曲小納.淺談層與行為在網頁設計中的應用研究 [J].科協論壇（下半月），2013（10）：102-103.

[2] 潘彪，曾陽.淺談網頁制作中制作滾動文本域的多種方法 [J].電腦知識與技術，2010，6（33）：9235-9236.

[3] 潘強，劉志，郭毅軍.網頁設計中的層定位問題 [J].電腦編程技巧與維護，2012（8）：84-86.

[4] 龍敏敏.網頁設計中使用表格和層排版的技巧分析 [J].無線互聯科技，2015（20）：40-41.

作者簡介：田彥（1969-），女，山東淄博人，教師，副教授，碩士。研究方向：計算機應用。