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

1、創(chuàng)建層

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

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

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

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

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

4、層的樣式

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

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

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

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

6、6層中的樣式代碼

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

7、使用層制作下拉菜單

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

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

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

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

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

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

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

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

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

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

文章名稱(chēng)：使用層布局頁(yè)面制作網(wǎng)頁(yè)
網(wǎng)站鏈接：http://chinadenli.net/news/226670.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)、小程序開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、App開(kāi)發(fā)

廣告

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