使用層布局頁面制作網(wǎng)頁

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

1、創(chuàng)建層

在 Dreamweaver CS6的設(shè)計(jì)視圖中,單擊需要插入層的位置,再選擇“插入布局對象AP Div命令,即可插入一個層。新插入的層,默認(rèn)在網(wǎng)頁的左上角,沒有邊框與背景?？梢栽谝粋€網(wǎng)頁中插入多個層,實(shí)現(xiàn)網(wǎng)頁的布局。

2、設(shè)置層的屬性

網(wǎng)頁中的層可以獨(dú)立地設(shè)置層的背景顏色、內(nèi)容、層次等屬性,通過對層的設(shè)置可以實(shí)現(xiàn)很多網(wǎng)頁效果單擊一個層的邊框,即可選擇一個層,然后可以在層的“屬性”面板中對層的屬性進(jìn)行設(shè)置。可以設(shè)置層的背景顏色、背景圖像、大小、邊距、可見性等屬性。

3、設(shè)置層的Z軸

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

4、層的樣式

層的屬性設(shè)置,是利用單一對象的CSS樣式來實(shí)現(xiàn)的。每插入一個層,就會在樣式表中新建針對這個層的樣式,“CSS樣式”面板中層的樣式雙擊“CSS樣式”面板中一個層的樣式,即可對這個層的樣式進(jìn)行設(shè)置。在樣式表中可以實(shí)現(xiàn)很多在“屬性”面板中無法實(shí)現(xiàn)的設(shè)置。就是對層的邊框?qū)傩赃M(jìn)行設(shè)置可以對邊框不同邊的顏色、粗細(xì)、線型進(jìn)行設(shè)置。

層進(jìn)行屬性設(shè)置后,即可在層中輸入內(nèi)容,層中可以插入表格、文本、圖片等內(nèi)容,層中的內(nèi)容可以獨(dú)立于網(wǎng)頁的其他內(nèi)容進(jìn)行排版。

5、利用層實(shí)現(xiàn)網(wǎng)頁的布局

分別對多個層進(jìn)行屬性設(shè)置,再正確放置層的位置,即可在層中輸入內(nèi)容,實(shí)現(xiàn)網(wǎng)頁布局的排版是經(jīng)過了屬性設(shè)置的3個層實(shí)現(xiàn)的網(wǎng)頁布局設(shè)計(jì)。在層實(shí)現(xiàn)的網(wǎng)頁布局中,可以方便地實(shí)現(xiàn)網(wǎng)頁布局的調(diào)整。

6、6層中的樣式代碼

在進(jìn)行這些層的設(shè)置時,實(shí)際上是 Dreamweaver CS6自動生成CSS樣式腳本,針對單一層對象進(jìn)設(shè)置。下面是本例中網(wǎng)頁層布局的HTML代碼。

7、使用層制作下拉菜單

下拉菜單的主要特征是兩個鼠標(biāo)事件。當(dāng)鼠標(biāo)移動到某一個對象上時,顯示菜單;當(dāng)鼠標(biāo)移出這對象時,菜單隱藏使用層可以在網(wǎng)頁中制作下拉菜單。對一個對象進(jìn)行設(shè)置,當(dāng)鼠標(biāo)移動到這一對象上時,顯示菜單層;當(dāng)鼠標(biāo)移出時,隱藏菜單層。在用層制作網(wǎng)頁菜單時,可以利用這一思路來實(shí)現(xiàn)。

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

(2)需要設(shè)置鼠標(biāo)事件。當(dāng)有兩個菜單時,需要有如下的鼠標(biāo)事件。

當(dāng)鼠標(biāo)移動到第一個鏈接上時,顯示第一個層隱藏第二個層。

當(dāng)鼠標(biāo)移動到第二個鏈接上時,顯示第二個層隱藏第一個層。

當(dāng)鼠標(biāo)在這個層上單擊時,隱藏所單擊的層。

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

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

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

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

網(wǎng)站欄目：使用層布局頁面制作網(wǎng)頁
URL地址：http://www.muchs.cn/news20/226670.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、商城網(wǎng)站、軟件開發(fā)、靜態(tài)網(wǎng)站、云服務(wù)器、定制開發(fā)

廣告

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