層在網(wǎng)頁制作中的應(yīng)用研究
2018-01-01 00:00:00田彥
現(xiàn)代信息科技 2018年5期
摘 要：層是網(wǎng)頁制作時經(jīng)常用到的對象，也是重要的網(wǎng)頁布局工具之一，運用層的特性使創(chuàng)建的頁面具有更合理、更美觀的網(wǎng)頁效果。
關(guān)鍵詞：層；網(wǎng)頁制作；應(yīng)用研究
中圖分類號：TP393.092 文獻標(biāo)識碼：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標(biāo)簽頁面元素。層可以包含圖像、文本和可放置到HTML文檔正文中的任何內(nèi)容。層可以精確控制瀏覽器窗口對象位置的頁面構(gòu)成元素；可以通過層的次序和重疊的改變，實現(xiàn)一組包含著圖像或文字等元素的變換效果；可以通過動態(tài)設(shè)定層的隱藏或顯示，可創(chuàng)造層內(nèi)容的動態(tài)交替等特殊效果；通過子層遺傳父級層的嵌套特征，實現(xiàn)內(nèi)容的可見和位置移動等。層的出現(xiàn)使網(wǎng)頁應(yīng)用技術(shù)從二維空間拓展上升到三維空間，實現(xiàn)頁面元素的相互重疊，實現(xiàn)更為復(fù)雜的布局設(shè)計，已成為網(wǎng)頁設(shè)計的重要技術(shù)。以下根據(jù)多年網(wǎng)頁制作中的使用經(jīng)驗介紹幾種層在網(wǎng)頁制作中的應(yīng)用。
1 利用層制作網(wǎng)頁兩側(cè)動態(tài)廣告特效
令人耳目一新的浮動廣告，可以用于最新的廣告宣傳，使網(wǎng)頁時尚漂亮，并可以體現(xiàn)一種及時性。制作兩側(cè)浮動廣告特效的主要核心步驟如下：
生成層并設(shè)置層的屬性：
（1）在網(wǎng)頁界面的適當(dāng)位置插入層，可以命名為laye r01等，并對層做屬性的設(shè)置，例如：
#layer1 {
position：absolute；
width：160px；
height：115px；
z-index：100；
top： 80px；
text-align： center；
left： 60px；
}
（2）在層里插入廣告圖片以及用于關(guān)閉廣告的小按鈕圖片，并調(diào)整大小。但值得注意的是層內(nèi)對象不要超出層的大小。如圖1所示。
（3）將層與懸浮特效代碼配合，主要的核心代碼如下：
<！--鏈接地址-->
<！--圖片地址-->
2 利用層制作具有可拖動行為的對象
“拖動AP元素”的層行為允許訪問者自由地放置網(wǎng)頁的各個欄目模塊，讓使用者自定義網(wǎng)頁的布局，設(shè)置簡單同時又簡化了設(shè)計工作?？墒窃诓僮鳌巴蟿覣P元素”層設(shè)置行為時，一定保證觸發(fā)該動作的事件要發(fā)生在訪問者拖動AP元素之前。最佳的方法是應(yīng)用onLoad事件，將“拖動AP元素”附加到body元素上。具體實現(xiàn)的主要步驟如下：
（1）在頁面適當(dāng)?shù)奈恢貌迦胍粋€AP元素層，并設(shè)置層內(nèi)容，然后單擊狀態(tài)欄左下角的
標(biāo)簽，在“行為”面板上單擊“+”添加行為，然后從彈出的列表中選擇“拖動AP元素”，出現(xiàn)對話框如圖2所示。（2）在對話框的“基本”選項卡中，設(shè)置是否限制拖動AP元素時的可移動范圍，拖動AP元素“放下目標(biāo)”時的位置以及“靠齊距離”的屬性設(shè)置。該屬性與“放下目標(biāo)”配合使用，當(dāng)AP元素被拖動到“放下目標(biāo)”位置距離小于“靠齊距離”時，將自動靠齊以實現(xiàn)AP元素的精確移動。
（3）若還要定義拖動柄等動作，可單擊“高級”選項卡，設(shè)置“拖動控制點”、拖動時是否使該層在文檔的最前方以及拖動整個元素時和放下整個元素后需要的JavaScript腳本程序，完成設(shè)置。
3 利用層制作頁面導(dǎo)航欄
使用層與行為配合制作網(wǎng)頁導(dǎo)航欄的下拉菜單，即時尚靈活又簡單方便。
（1）在網(wǎng)頁適當(dāng)?shù)奈恢貌迦?行N列的表格為一級導(dǎo)航欄，進行屬性設(shè)置。然后輸入及設(shè)置每個單元格中的內(nèi)容，作為一級導(dǎo)航欄下拉菜單的鏈接文字。
（2）在每個單元格內(nèi)插入層（如apdiv1），保持插入點在單元格的最左邊，層寬度盡量與單元格相同或略小，最重要的是千萬不要移動該層，否則層與表格的相對位置關(guān)系將解除。
（3）將插入點放在該層中，插入1列N行的表格，作為二級導(dǎo)航欄下拉菜單表格，表格高度與寬度不要大于所在層，輸入表格內(nèi)容。
（4）將層的屬性可見性設(shè)為不可見，然后選中一級導(dǎo)航欄單元格內(nèi)的文字，在行為面板中添加行為。
（5）設(shè)置“顯示-隱藏元素”。單擊行為面板“+”下拉菜單中的“顯示-隱藏元素”，然后在彈出的對話框中選擇apdiv1為“顯示”，如圖3所示。再新添加一個動作，在“顯示-隱藏元素”對話框中選擇apdiv1為“隱藏”。
（6）設(shè)置“顯示-隱藏元素”的觸發(fā)條件。在行為面板上會出現(xiàn)剛剛設(shè)置的兩個行為，將“顯示”的觸發(fā)條件設(shè)置為“onMouseOver”，將“隱藏”的觸發(fā)條件設(shè)置為“onMouseOut”。
（7）按上面的操作步驟，可以制作完成一級導(dǎo)航欄中的其他下拉菜單。
4 利用層設(shè)計圖文混排網(wǎng)頁
使用層的定位設(shè)計，制作圖文混排的網(wǎng)頁，體現(xiàn)對position屬性的靈活運用，取值適當(dāng)，并綜合應(yīng)用left、top、z-index等屬性來進行定位布局網(wǎng)頁。用層來自定義網(wǎng)頁的布局，大大增強了使用者的體驗性，其設(shè)置非常簡單，功能又十分強大，大大簡化了設(shè)計工作。下面以實例來具體介紹層在網(wǎng)頁布局中的應(yīng)用。
（1）新建AP DIV層，作為父級，設(shè)置代碼為positio n：absolute；top：0px；z-index：1；left：50%；width：960px；height：100%；。其中，寬度width：960px可以是任意值，最主要是left：50%一定要有，才能使其左邊框居中。父級不放內(nèi)容即可，如果怕它影響，可將其寬度設(shè)為0。
#apDiv1 {
position：absolute；
width：960px；
height：100%；
z-index：1；
left：50%；
top：0px；
}
（2）在上面的父級層里新建子級層，假設(shè)想要設(shè)計網(wǎng)頁寬度為960px，那么以下子級層只要設(shè)置left：-480px；width：960px；則子級的左邊框向左出去一半而被父級的左邊框均分，這樣，分辨率變化也不影響它居中，這個層才是真正意義上的布局框?qū)印?/p>
#apDiv2 {
position：absolute；
width：960px；
height：780px；
z-index：1；
top：0px；
left：-480px；
background-color： #9900FF；
}
（3）下一層可以放置4個同一級別的層，為apdiv2內(nèi)嵌層，頂部邊距則可以根據(jù)自己的需要調(diào)節(jié)其垂直位置，只要父級的height為100%（其實任意值都可以），那么子級可以在任意垂直位置。例如第一個height：200px；top：0px，那么第二個則top：201px，即可。同時同一級別并列的層相加的寬度不要超出上層的寬度。值的注意的是：實現(xiàn)這個方法的前提是所有的層都是position：absolute；這個值。
4個內(nèi)嵌在apdiv2中的層對應(yīng)的設(shè)置是：
#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個層的關(guān)系及頁面布局結(jié)構(gòu)如圖4所示。
最后在每個層中放入其他頁面元素，并進行設(shè)置，但是放置的元素大小不要超過所在層的大小。
由于層在頁面布局應(yīng)用中具有更大的隨意性，通過指定坐標(biāo)位置、方向鍵或拖動的方式就可以把層放到網(wǎng)頁的任何位置，不受頁面中其他元素的限制和干擾，就像懸浮在頁面上一樣，從而使運用層的特性創(chuàng)建的頁面具有更合理、更美觀的網(wǎng)頁效果。
參考文獻：
[1] 曲小納.淺談層與行為在網(wǎng)頁設(shè)計中的應(yīng)用研究 [J].科協(xié)論壇（下半月），2013（10）：102-103.
[2] 潘彪，曾陽.淺談網(wǎng)頁制作中制作滾動文本域的多種方法 [J].電腦知識與技術(shù)，2010，6（33）：9235-9236.
[3] 潘強，劉志，郭毅軍.網(wǎng)頁設(shè)計中的層定位問題 [J].電腦編程技巧與維護，2012（8）：84-86.
[4] 龍敏敏.網(wǎng)頁設(shè)計中使用表格和層排版的技巧分析 [J].無線互聯(lián)科技，2015（20）：40-41.
作者簡介：田彥（1969-），女，山東淄博人，教師，副教授，碩士。研究方向：計算機應(yīng)用。
