【文章內容簡介】 網頁編輯窗口中畫出布局表格。在繪制布局表格的地方，不能有任何文字和圖片。 （ 4） 如果在同一頁面上還需要繪制其他的布局表格，按住 Ctrl鍵，重復上述步驟可以連續(xù)畫多個布局表格。 （ 5） 在布局表格中必須畫好布局單元格后，才可以插入文字或圖片等對象。單擊【布局視圖】區(qū)域中的【繪制布局單元格】的按鈕，在布局表格中可根據需要畫出多個布局單元格。 （ 6） 在布局單元格中，可以根據頁面需要輸入文字或插入圖片等對象，如圖 511所示。 （ 7） 如果要調整布局表格或布局單元格的大小及其中內容的屬性，可選中布局表格或布局單元格，并在布局表格或布局單元格的【屬性】面板中完成它們的屬性設置。 圖 511在網頁中插入布局表格和布局單元格 例 5 1制作具有下列要求的網頁 (見圖 512)。 （ 1） 創(chuàng)建網頁名為 exa5 ，網頁的背景圖片為 ， 網頁文件保存在 My site文件夾中。 （ 2） 在網頁中創(chuàng)建 800 600像素的布局表格，在網頁頂部位置上插入 1個 800 80像素的布局單元格，在網頁左邊合適的位置上插入 4個 79 79像素的布局單元格，在網頁右邊合適的位置上插入 1個170 170像素的布局單元格。 （ 3） 在網頁的頂部區(qū)域的布局單元格中插入 ch05文件夾中的 Flash文件 。 布局視圖應用實例 圖 512布局視圖應用實例 （ 4） 在網頁左邊插入的 4個布局單元格中，分別插入 ch05文件夾中的圖片文件 、 、 。 每個圖片與 My site文件夾中的一個 HTML文件建立超鏈接，被鏈接的 HTML文件在新窗口中打開。 （ 5） 在網頁右邊的布局單元格中，插入 ch05文件夾中的逐幀動畫文件 。 （ 6） 預覽頁面效果后，保存網頁文件。 本例的操作步驟如下。 （ 1） 新建一個頁面，選擇【修改】 |【頁面屬性】命令，在【頁面屬性】對話框中設置背景圖片為， 并將網頁保存在 My site文件夾中。 （ 2） 在【插入】面板組的【布局】選項卡中，進行視圖工作模式切換，單擊【布局視圖】按鈕后，進入【布局視圖】模式。 （ 3） 單擊【布局視圖】區(qū)域中的【繪制布局表格】的按鈕，將鼠標移到網頁編輯窗口中，此時鼠標指針變?yōu)?+字形狀，在指定位置處拖曳鼠標畫出800 600像素的布局表格。 （ 4） 在頁面的合適位置上，按住 Ctrl鍵，分別按題目要求畫出 5個布局表格。 （ 5） 在網頁頂部的布局單元格中插入光標，單擊【插入】面板中【常用】選項卡的【 Flash】 按鈕，或選擇【插入】 |【媒體】 |【 Flash】 命令，此時可在網頁頂部的布局單元格中，插入 ch05文件夾中的Flash文件 。 （ 6） 在網頁其他 5個布局單元格中分別插入光標，單擊【插入】面板中【常用】選項卡的【圖像】按鈕，或選擇【插入】 |【圖像】命令，此時可在網頁其他 5個布局單元格中插入 ch05文件夾中的圖像文件 、 、 、 、。 （ 7） 按 F12鍵預覽頁面，屏幕顯示如圖 513所示的結果后，保存文件。 圖 513布局視圖實例 層是網頁中用來放置文本、圖像、動畫、表單、插件等網頁元素的載體。層在 Dreamweaver MX網頁編輯區(qū)中可以自由移動，改變層在網頁中的位置，便可實現(xiàn)層中網頁元素位置的改變。實際上，層的應用技術也是一種網頁元素的定位技術，利用層能夠精確對頁面元素定位。設計者可以控制多個層的疊放次序，顯示或隱藏層。層與時間軸配合使用，可以很方便地設計出動態(tài)頁面效果，層與行為配合使用，還可以很方便地制作出滾動字幕、下拉式菜單等頁面效果。 層的創(chuàng)建和基本操作 在網頁中創(chuàng)建一個新層 可以單擊【插入】面板組的【常用】選項卡中的【描繪層】按鈕，或選擇【插入】 |【層】命令來插入層。在創(chuàng)建好的層中還可以繼續(xù)創(chuàng)建層，以實現(xiàn)層的嵌套。嵌套層可稱為子層，包含嵌套層的那個層稱為父層，嵌套層永遠在其父層上方。創(chuàng)建層和嵌套層的操作步驟如下。 （ 1） 單擊【插入】面板組的【常用】選項卡中的【描繪層】按鈕，此時光標變?yōu)?+形狀。 （ 2） 在網頁編輯區(qū)中上選擇插入層的位置，拖動鼠標便可繪制一個層，此時在網頁編輯區(qū)窗口中出現(xiàn)一個層（如圖 514所示）和一個層的標記。 創(chuàng)建和刪除層 （ 3） 將光標插入到已建好的層中，然后選擇【插入】 |【層】命令，可在已建的層中插入一個嵌套層。 嵌套層的子層可以在其父層中間，也可以在其父層外邊，嵌套層永遠在其父層上方。對于普通層而言，它的層標記將依次出現(xiàn)在網頁編輯器窗口的左上角，而對于嵌套層，它的層標記將出現(xiàn)在父層的窗口中。 圖 5 14未被選中激活的層 一個層在被激活后，才能將文本、圖像、表格、表單、多媒體等網頁元素插入到層中，單擊層中任意位置，就可激活層，此時光標在層中閃爍，層的左上角出現(xiàn)選擇柄，邊框線由灰色變?yōu)楹谏?，如圖 515所示。 選中層后，才能對層設置屬性和進行調整、移動等操作，如圖 516所示。 激活和選中層 圖 515被激活的層 圖 516被選中的層 選中層的多種方法如下。 (1) 單擊層的標記，可選中相對應的層。 (2) 先激活層，再單擊層左上角的選擇柄，可選中該層。 (3) 單擊層的邊框，也可選中層。 (4) 如果在當前網頁編輯窗口中沒有層被激活和選中，按住 Shift鍵，再單擊層中任意位置，就可選中該層。 (5) 如果已經選中了多個層，按住 Shift+Ctrl鍵，再單擊要選中的層，可僅選中該層，同時取消對其他層的選擇。 (6) 按 F2鍵或選擇【窗口】 |【其他】 |【層】命令，還可以單擊【高級布局】浮動面板組的【層】標簽來打開層面板，單擊該層的名稱，就可選中該層。 (7) 按住 Shift鍵，單擊每一個要選中的層，可選中多個層。 (8) 按住 Shift鍵，在層面板中單擊每一個要選中的層名稱，可選中多個層。 1. 調整層的大小創(chuàng)建層后，可通過如下方法調整層的大小。 (1) 選中需要調整的層，此時在層的邊框四周出現(xiàn) 8個黑色活動塊，用鼠標拖曳某個活動塊，即可調整層的大小。 (2) 選中需要調整的層，在層的【屬性】面板的【寬】和【高】兩個文本框中，輸入層的寬度和高度尺寸，可精確調整該層的尺寸。 調整、移動和對齊層 2. 移動層 移動層的 2種方法如下。 (1) 用鼠標移動層時，可將光標移到層左上角的選擇柄上，或將鼠標移到層的邊框線上，當鼠標指針變成 4個十字狀箭頭時，拖動鼠標即可移動該層。 (2) 選中要移動的層，在層的【屬性】面板的【左】和【上】兩個文本框中，輸入層左上角坐標，便可精確設置這個層在網頁中的目標位置。 3. 對齊層 對齊層的方法如下。 先選中多個要對齊的層，選擇【修改】 |【對齊】菜單的下一級菜單中的【左對齊】、【右對齊】、【對齊上緣】、【對齊下緣】命令，可對齊選中的層。選擇【設成寬度相同】和【設成高度相同】命令，可使選中的層具有相同的寬度和高度。 ，可利用層【屬性】面板設置層的名稱、位置、大小、背景顏色或背景圖像、層的可見性、堆棧順序、層標記、層內容溢出時的處理方法、層中可見區(qū)域的位置和尺寸等。 選中層的選擇柄就可打開層【屬性】面板，如圖 517所示。 圖 517層【屬性】面板 層的屬性設置 層【屬性】面板中的各項參數(shù)的意義如下： (1) 在【層編號】文本框中，設置當前層的名稱。層名稱中不能帶有符號和漢字，也不能以數(shù)字開頭，只能是英文字母和數(shù)字。 (2) 在【左】和【上】文本框中，設置當前層相對于頁面或父層的左上角距離。 (3) 在【寬】和【高】文本框中，指定層的寬度和高度。 (4) 在【 Z軸】文本框中，可設置當前層的層次屬性值。 (5) 在【顯示】下拉列表框中可以設置層的可見性。下拉列表框中的 4個選項分別是 Default(默認狀態(tài) )、Inherit(繼承父層的可見性 )、 Visible（ 設置層為可見）、 Hidden（ 設置層為隱藏）。 (6) 在【背景圖像】和【背景顏色】文本框中，可設置層的背景圖片和背景顏色。 (7) 在【標簽】下拉列表框中，可選擇層的標記。由于不同的瀏覽器支持的層標識符不同，在【標簽】下拉列表框中提供了 DIV和 SPIN選項?？筛鶕g覽者主要使用哪種主流瀏覽器，確定一種合適的選項。選擇 SPAN和 DIV標記將創(chuàng)建 CSS層。 (8)