Dreamweaver8

中文版網頁制作基礎

第九講層的使用1、層的基本知識

2、層的屬性設置3、層的高級應用

1、層的基本知識1．層的概念2．插入層3．繪制層4．嵌套層1.1.層的概念什么是層？層是一個被準確定位的HTML網頁元素，它和文字、圖像等一樣都是網頁的組成部分；層也是一個網頁內容的容器，可以在層中放入任何頁面元素；同時層也可以層疊和疊加。利用層可以控制網頁元素的位置，可以實現網頁對象的重疊和立體化等動態效果，使網頁內容變得更加豐富。1.2．插入層在【插入】菜單欄執行【插入】/【布局對象】/【層】命令，即可在頁面中插入一個默認的層，如圖所示。用菜單命令插入的層，采用的是程序默認的設置，寬是200像素，高115像素。1.3．繪制層將【常用】插入欄切換到【布局】插入欄，單擊繪制層按鈕，移動鼠標光標到編輯窗口，待鼠標光標變成十字狀，按住鼠標左鍵拖拉出一個160×70像素的層，如圖所示。放開鼠標即可完成，用這個方法插入的層可以控制大小。層的大小1.4．嵌套層嵌套是將一個層包含在另一個層中。嵌套層通常用于層的疊加和組織，并且子層可隨父層一起移動，可繼承父層的一些屬性。首先在編輯窗口插入一個層，將鼠標光標置于父層內，再執行【插入】/【布局對象】/【層】命令插入一個子層，這就是嵌套層，如圖所示。子層父層2、

層的基本屬性2.1層的選取2.2層的屬性設置2.3移動層2.4多個層操作2.1．層的選取

設置層屬性前要先選中層，常用的層的選擇方法有如下幾種：直接在編輯窗口中單擊層的邊框。將鼠標光標置于層內，然后在單擊標簽選擇器上的<div>標簽。單擊層上面的圖標，也可選中層。執行【窗口】/【層】命令，打開【層】面板，在面板中單擊層名稱即可選中。

2.2．層的屬性設置2.3．移動層

移動層：移動鼠標光標到層的邊框上，待鼠標光標變成狀時，按住鼠標左鍵不放，拖動層，到達目的后放開鼠標即可。2.4．多個層操作多個層操作：按住Shift鍵，然后依次單擊選中三個層，將它們同時選中，執行【修改】/【排列順序】/【左對齊】等命令，如圖所示。3、

層的高級應用3.1隱藏與顯示3.2層的堆疊3.3與表格的相互轉化3.1．隱藏與顯示層的隱藏與顯示可以通過【層】面板上的眼形列來設定，在眼形圖標所在的列中，單擊層名的前部，單擊一次鼠標，就改變一種狀態。當層名前的圖標為時，表示該層處于隱藏狀態；當層名前的圖標為時，表示該層處于顯示狀態；如果層名前沒有任何圖標，表示該層處于瀏覽器默認狀態或者繼承其父層的可見性。設置層的顯示/隱藏狀態在未設置層的顯示狀態前，層名前面不顯示任何圖標，即采用默認的顯示狀態。單擊一次，顯示，表示隱藏，再單擊一個，顯示，表示顯示，再單擊一次，圖標消失，回到默認狀態。3.2．層的堆疊