• <nav id="waukw"></nav>
  • 13996527831
    詳細

    使用層布局頁面制作網頁

    發表日期:2021-01-17 22:13:02   作者來源:米卓網絡   瀏覽:    

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

    使用層布局頁面制作網頁

      1、創建層

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

      2、設置層的屬性

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

      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)用與前面相同的方法,對兩個鏈接與兩個層進行各自的行為設置,這樣就完成了一個菜單的制作??梢栽趯又胁迦雸D片、鏈接、文本等內容實現更多的菜單功能,如圖12-17所示是用層制作的菜單效果。

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

    玩弄铁扇公主娇喘呻吟
  • <nav id="waukw"></nav>