另一種網頁布局的方法是使用層。層與標簽類似,但與標簽不同的是層可以浮動在其他網頁對象的上面,可以自由拖動層的位置。與其他網頁元素不同的是,層具有絕對定位的功能,設置層的位置以后,這個層可以浮動在其他層的上面,不受其他層的約束。上面的層會遮擋下面元素的內容。利用層的這一特點,可以用層來實現網頁的布局。

1、創建層

在 Dreamweaver CS6的設計視圖中,單擊需要插入層的位置,再選擇“插入布局對象AP Div命令,即可插入一個層。新插入的層,默認在網頁的左上角,沒有邊框與背景。可以在一個網頁中插入多個層,實現網頁的布局。

2、設置層的屬性

網頁中的層可以獨立地設置層的背景顏色、內容、層次等屬性,通過對層的設置可以實現很多網頁效果單擊一個層的邊框,即可選擇一個層,然后可以在層的“屬性”面板中對層的屬性進行設置。可以設置層的背景顏色、背景圖像、大小、邊距、可見性等屬性。

3、設置層的Z軸

對層的屬性設置時,除了對層的位置、大小、背景進行設置,另一個重要設置是Z軸。層的Z軸指的是層的上下關系,上面的層可以遮蓋住下面層的內容。層的Z軸數字較大就會在網頁的最上層在層的“屬性”面板“Z軸”文本框中輸入一個數字,即可設置層的Z軸屬性。網頁中兩個層不同Z軸設置的遮蓋效果。

4、層的樣式

層的屬性設置,是利用單一對象的CSS樣式來實現的。每插入一個層,就會在樣式表中新建針對這個層的樣式,“CSS樣式”面板中層的樣式雙擊“CSS樣式”面板中一個層的樣式,即可對這個層的樣式進行設置。在樣式表中可以實現很多在“屬性”面板中無法實現的設置。就是對層的邊框屬性進行設置可以對邊框不同邊的顏色、粗細、線型進行設置。

層進行屬性設置后,即可在層中輸入內容,層中可以插入表格、文本、圖片等內容,層中的內容可以獨立于網頁的其他內容進行排版。

5、利用層實現網頁的布局

分別對多個層進行屬性設置,再正確放置層的位置,即可在層中輸入內容,實現網頁布局的排版是經過了屬性設置的3個層實現的網頁布局設計。在層實現的網頁布局中,可以方便地實現網頁布局的調整。

6、6層中的樣式代碼

在進行這些層的設置時,實際上是 Dreamweaver CS6自動生成CSS樣式腳本,針對單一層對象進設置。下面是本例中網頁層布局的HTML代碼。

7、使用層制作下拉菜單

下拉菜單的主要特征是兩個鼠標事件。當鼠標移動到某一個對象上時,顯示菜單;當鼠標移出這對象時,菜單隱藏使用層可以在網頁中制作下拉菜單。對一個對象進行設置,當鼠標移動到這一對象上時,顯示菜單層;當鼠標移出時,隱藏菜單層。在用層制作網頁菜單時,可以利用這一思路來實現。

(1)在 Dreamweaver中新建一個網頁,在網頁中加入圖中布局的鏈接與層菜單然后需要設置兩個層的屬性,并且設置這兩個層隱藏。

(2)需要設置鼠標事件。當有兩個菜單時,需要有如下的鼠標事件。

當鼠標移動到第一個鏈接上時,顯示第一個層隱藏第二個層。

當鼠標移動到第二個鏈接上時,顯示第二個層隱藏第一個層。

當鼠標在這個層上單擊時,隱藏所單擊的層。

(3)選擇需要設置事件的對象,選擇“標簽檢査器”選項卡,單擊“行為”標簽。在“行為”標簽中單擊“添加行為”按鈕*,在顯示的菜單中單擊“顯示-隱藏元素”,彈出“顯隱藏元素”對話框。

(4)在“顯示-隱藏元素”對話框中,需要進行對象和顯示隱藏的設置。

(5)用與前面相同的方法,對兩個鏈接與兩個層進行各自的行為設置,這樣就完成了一個菜單的制作。可以在層中插入圖片、鏈接、文本等內容實現更多的菜單功能,如圖12-17所示是用層制作的菜單效果。

(6)網頁中的菜單功能,實際上就是用 JavaScript對網頁中對象與事件的設置。兩個鏈接的事件分別對兩個層的隱藏與顯示屬性進行設置,這就是菜單。

網站欄目：使用層布局頁面制作網頁
URL地址：http://www.js-pz168.com/news20/226670.html

成都網站建設公司_創新互聯，為您提供定制網站、商城網站、軟件開發、靜態網站、云服務器、定制開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯