1、、第 4 章ap div、框架與網頁布局4.1 【案例 17】“秦始皇兵馬俑兵器介紹”網頁相關知識1設置 ap div 的默認屬性單擊“編輯”“首選參數”命令，彈出“首選參數”對話框，再選擇該對話框內“分類”列表框中的“ap元素”選項，如圖 4-1-3 所示。其中各個選項的作用如下：（1）“顯示”下拉列表框：設置默認狀態下 ap div 的可視度。可以選擇“default”（瀏覽器默認狀態）“inherit”（繼承母體可視度）、“visible”（可視）和“hidden”（隱藏）。（2）“寬”和“高”文本框：設置默認狀態下插入 ap div 的寬度和高度，單位為像素。（3）“背景顏色”按鈕與文

2、本框：設置默認狀態下插入 ap div 的背景顏色，默認值為透明。單擊 按鈕可以調出顏色面板，利用它來選中顏色；也可以在文本框內輸入顏色的代碼。（4）“背景圖像”文本框與“瀏覽”按鈕：用來設置默認狀態下插入 ap div 的背景圖像。單擊“瀏覽”按鈕，可以彈出“選擇圖像源”對話框，從中可以設定 ap div 的背景圖像。（5）“嵌套”復選框：選中它后，可以在將 ap div 拖動到其他 ap div 時實現嵌套。（6）“netscape 4 兼容性”復選框：選中它后，dreamweaver 會向 html 文件的標記中加入 javascript函數，用來解決在 netscape 4.0 瀏覽器

3、中添加嵌入 cssap div 時可自動調整 ap div 的尺寸，避免異常問題產生。2ap div 的基本操作（1）創建 ap div 可以有以下三種方法： 單擊“插入”（布局）欄內的“描繪 ap div”按鈕 ，在頁面內拖動出一個矩形，即可創建一個 ap div，如圖 4-1-4 所示。這時鼠標指針變為十字狀態。 將“繪制 ap div”按鈕 拖動到網頁頁面中，也可在頁面光標處插入一個默認屬性的 ap div。 將光標移到要插入 ap div 的位置。單擊“插入記錄”“布局對象”“ap div”命令，也可以在網頁內光標處創建一個 ap div。圖 4-1-4創建一個 ap div（2）選中

4、 ap div：在改變 ap div 的屬性前應先選中 ap div，選中的 ap div 會在 ap div 矩形的左上角產生一個雙矩形狀控制柄圖標 ，同時在 ap div 矩形的四周產生八個黑色的方形控制柄。選中一個 ap div 的效果如圖 4-1-5 所示。選中 ap div 的方法有多種，操作方法如下： 單擊 ap div 的邊框線，即可選中該 ap div。 單擊 ap div 的內部，會在 ap div 矩形的左上角產生一個雙矩形狀控制柄圖標 ，單擊該控制柄圖標 ，即可選中與它相應的 ap div。 按住【shift】鍵，分別單擊要選擇的各個 ap div 的內部或邊框線，即可選

5、中多個 ap div。如果選中的是多個 ap div，則只有一個 ap div 的方形控制柄是黑色實心的，其他選中的 ap div 的方形控制柄是空心的，如圖 4-1-6 所示。圖 4-1-5選中一個 ap div圖 4-1-6選中多個 ap div（3）調整一個 ap div 大小：改變一個 ap div 大小的方法有三種，首先要選中該對象。 鼠標拖動調整的方法：將鼠標移到 ap div 的方形控制柄處，當鼠標指針變為雙箭頭狀時拖動鼠標，即可調整 ap div 的大小。 按鍵調整的方法：按住【ctrl】鍵，同時按【】或【】鍵，可使 ap div 水平增加或減少一個像素；每按【】或【】鍵一次，

6、可使 ap div 垂直增加或減少一個像素；按住【ctrl+shift】組合鍵的同時，按光標移動鍵，可每次增加或減少五個像素。 利用 ap div“屬性”欄設置：在其“屬性”欄內的“寬”和“高”文本框內分別輸入修改的數值（單位是像素），即可調整 ap div 的寬度和高度。（4）調整多個 ap div 大小的方法也有兩種： 命令方法：單擊“修改”“排列順序”“設成寬度相同”命令（見圖 4-1-7），即可使選中的 ap div與最后選中的 ap div（它的方形控制柄是黑色實心的）的寬度相同。 利用 ap div“屬性”欄進行設置的方法：選中多個 ap div 后，其“屬性”欄變為多 ap di

7、v“屬性”欄。在“寬”和“高”文本框內分別輸入修改的數值（單位是像素），即可調整選中的多個 ap div 的寬度和高度（單位是像素）。（5）設置多個 ap div 的排列順序和對齊可采用以下方法： 命令的方法：選中多個 ap div，單擊“修改”“排列順序”命令，可彈出它的下一級菜單，如圖 4-1-7所示。單擊其中的一個命令，即可獲得相應的對齊效果。例如，選中多個 ap div，單擊“修改”“排列順序”“對齊下緣”命令，即可將各 ap div 以最后選中的 ap div（控制柄是實心）的下邊線為基準進行對齊，如圖 4-1-8 所示。圖 4-1-7 “排列順序”的下一級菜單圖 4-1-8對齊下緣

8、后的多個 ap div 按鍵調整的方法：按住【ctrl】鍵，同時按光標移動鍵，即可將選中的多個 ap div 對齊。按【】鍵可右對齊，按【】鍵可左對齊，按【】鍵可下對齊，按【】鍵可上對齊。 利用 ap div“屬性”欄設置：選中多個 ap div 后，在多 ap div“屬性”欄內的“左”或“上”文本框內輸入修改的數值，即可使多個 ap div 的左邊線或上邊線以修改的數值對齊。（6）調整 ap div 的位置可以采用如下方法： 鼠標拖動調整的方法：將鼠標指針移到 ap div 的邊框上，當鼠標指針變為 形狀時拖動，即可移動 ap div。 按鍵調整的方法：每按一次【】或【】鍵，可使 ap d

9、iv 向右或向左移動一個像素；每按一次【】或【】鍵，可使 ap div 向下或向上移動一個像素；如果按住【shift】鍵的同時，按光標移動鍵，也可調整ap div 的位置，每次移動五個像素。 利用 ap div“屬性”欄進行設置的方法：選中要調整大小的 ap div，在其單個 ap div“屬性”欄內的“左”文本框中輸入修改的數值（單位是像素），即可調整 ap div 的水平位置；在“上”文本框內輸入修改的數值（單位是像素），可調整 ap div 的垂直位置。3ap div“屬性”欄ap div“屬性”欄有兩種：一種是單 ap div“屬性”欄，這是在選中一個 ap div 時出現的；另一個是

10、多ap div“屬性”欄，這是在選中多個 ap div 時出現的。單 ap div“屬性”欄如圖 4-1-9 所示，多 ap div“屬性”欄如圖 4-1-10 所示。從圖中可以看出，多 ap div“屬性”欄內除了基本的屬性設置選項外，還增加了關于文本屬性的設置選項。其中各選項的作用如下：圖 4-1-9單 ap div“屬性”欄圖 4-1-10多 ap div“屬性”欄（1）“css-p 元素”下拉列表框：用來輸入 ap div 的名稱，它會在“ap 素材”面板中顯示出來。該名稱可以在腳本中使用，例如通過腳本實現 ap div 的顯示或隱藏等。（2）“左（l）”文本框用來確定 ap div

11、在頁面中的位置，單位為像素，其內的數據是 ap div 左邊線與頁面左邊緣的間距。對于嵌套中的子 ap div，“左（l）”文本框內的數據是相對于父 ap div 的左邊的位置。（3）“上（t）”文本框內的數據是 ap div 頂邊線與頁面頂邊緣的間距。對于嵌套中的子 ap div，是相對于父 ap div 的左邊或頂端的位置。（4）“寬”和“高”文本框：用來確定 ap div 的大小，單位為像素。（5）“z 軸”文本框：用來確定 ap div 的 z 軸順序，用來設置嵌套 ap div 的重疊層次，值越大，越靠上方。（6）“可見性”和“顯示”下拉列表框：用來確定 ap div 的可視性。它有

12、“default”（默認，由瀏覽器決定，大多數會繼承它的父 ap div 的可見性）、“inherit”（與其父 ap div 的可視性相同）、“visible”（顯示 ap div圖 4-1-11和其內對象，與其父 ap div 無關）和“hidden”（隱藏 ap div 和其內對象，與其父 ap div 無關）四個選項。（7）“背景圖像”文本框與 按鈕：用來確定 ap div 的背景圖案。（8）“背景顏色”按鈕與文本框：用來確定 ap div 的背景顏色。（9）“標簽”下拉列表框：用來選擇 ap div 的樣式，其內有 div 和 span 兩個選項，這是 html 的兩個標簽。（10）

13、“溢出”下拉列表框：它決定了當 ap div 中的內容超出 ap div 的邊界時的處理方法。它有“visible”（可見，即根據圖像大小自動調整 ap div 的大小，使內容全部顯示，為系統默認）、“hidden”（當圖像超出 ap div的范圍后，超出的部分不顯示）、“scroll”（當圖像超出 ap div 的范圍后，加滾動條）和“auto”（根據 ap div中的內容能否超出 ap div 的范圍，決定是否加滾動條）四個選項。選擇前三個不同選項后，在瀏覽器中的顯示效果如圖 4-1-11 所示。注意：在網頁頁面設計視圖窗口內顯示的都與圖 4-1-11（a）一樣。（a）（b）（c）在“溢出

14、”下拉列表框中分別選擇“visible”、“hidden”和“scroll”后的不同效果（11）“剪輯”選項組：用來確定 ap div 的可見區域，即確定 ap div 中的對象與 ap div 邊線的間距。“左”、“上”、“右”和“下”四個文本框分別用來輸入 ap div 中的對象與 ap div 的左邊線、頂部邊線、右邊線和底部邊線的間距，單位為像素。4.2 【案例 18】“不同亮度的圖像”網頁相關知識1“ap 元素”面板和改變 ap div 的重疊順序在“ap 元素”面板中，用戶可以對 ap div 的可視性、嵌套關系、顯示順序和相互覆蓋性等屬性進行設置。單擊“窗口”“ap div”命令

15、，即可調出“ap div”面板，即 ap div 監視器，如圖 4-2-6（b）所示。（1）顯示 ap div 的信息：在圖 4-2-4 所示的“ap 元素”面板中有五個 ap div，“名稱”列，是各個 ap div的名稱，“z”列內的數據顯示各 ap div 的順序，z 值越高，顯示越靠上。z 值可以是負數，表示在網頁下邊，即隱藏起來，網頁的“z 軸”數值為 0。（2）選定 ap div：單擊“ap 元素”面板中 ap div 的名稱，即可選中網頁中相應的 ap div。按住【shift】鍵，同時依次單擊“ap 元素”面板中各個 ap div 的名稱，即可選中網頁中相應的多個 ap div

16、。（3）更改 ap div 的名稱：雙擊“名稱”列中 ap div 的名稱，使此行名稱處出現白色的矩形，如圖 4-2-8所示，即可輸入 ap div 的新名字。（4）設定是否允許 ap div 重疊：如果不選中“ap 元素”面板中的“防止重疊”復選框，則表示允許 ap div之間有重疊關系；如果選中“防止重疊”復選框，則表示不允許 ap div 之間有重疊關系。（5）改變 ap div 之間的嵌套關系：在 ap div 中插入另一個 ap div 叫做 ap div 的嵌套。在 ap div 的嵌套中，子 ap div 的屬性決定于其父 ap div 的屬性。在選定父 ap div 后，子 a

17、p div 也會被選定；在移動或復制父 ap div 時，子 ap div 也會隨之被移動或復制。按住【ctrl】鍵，同時拖動“ap 元素”面板中源 ap div 的名稱（“apdiv4”）到另一個 ap div 名稱之上（例如“apdiv5”，可稱為目標 ap div），當目標 ap div 名字（例如“apdiv5”）四周出現矩形框時釋放鼠標左鍵，即可將源 ap div 成為目標 ap div 的子 ap div。再按住【ctrl】鍵，將“apdiv3”ap div 拖動到“apdiv4”ap div 之上，然后釋放鼠標左鍵，“apdiv3”ap div 即可成為“apdiv4”ap di

18、v 的子 ap div。 “ap div”面板如圖 4-2-9 所示。圖 4-2-8更改 ap div 的名稱）按鈕，使由圖 4-2-9 可以看出，“apdiv3”ap div 是“apdiv4”ap div 的子 ap div，“apdiv4”ap div 是“apdiv5”ap div 的子 ap div。父 ap div 名稱的左邊有一個 圖標，單擊該圖標，可以使父 ap div 收縮， 圖標變為 圖標。再單擊 圖標，可使父 ap div 的子 ap div 展開， 圖標變為 圖標。如果向左下方拖動子 ap div 的名稱，可以取消它與父 ap div 的嵌套關系。（6）改變 ap di

19、v 的顯示順序：單擊要更改顯示順序的 ap div 的 z 值（例如“apdiv3”，使它周圍出現矩形框，如圖 4-2-10 所示，輸入新的 z 值。此外，在 ap div 的“屬性”欄內的“z 軸”文本框內也可以改變 z 值。（7）設置 ap div 的可視性：單擊“ap 元素”面板內的按鈕列出現許多人眼圖像，如圖 4-2-11所示。“ap 元素”面板內的 按鈕列顯示的圖像（睜開的人眼圖像），表示此行的 ap div 可視（即可見的）。圖 4-2-9ap div 之間的嵌套圖 4-2-10修改 z 值圖 4-2-11單擊按鈕后效果llll單擊圖像，可使圖像消失，再單擊原圖像處，會出現圖像，表

20、示此行的 ap div 是不可視的。如果再單擊圖像，可使它變為圖像，表示此行的 ap div 又變為可視的。將“apdiv3”ap div 變為不可視后的“ap 元素”面板如圖 4-2-12 所示。2ap div 與表格互相轉換（1）將 ap div 轉換為表格：單擊“修改”“轉換”“將 ap div 轉換為表格”命令，彈出“將 ap div轉換為表格”對話框，如圖 4-2-13 所示。其內各選項的作用如下：“最精確”單選按鈕：表示使用最高的精度轉換。轉換后的單元格位置基本不變，空白處會產生空的單元格。“最小：合并空白單元格”單選按鈕：選中它后，會合并空白單元格。文本框：選中“最小：合并空白單

21、元格”單選按鈕后，該文本框會變為有效，其內可輸入數值，單位為像素。當 ap div 與 ap div 的間距小于此值時，ap div 轉換為表格后會自動對齊，而不是以空白單元格去補充，從而避免產生過多的表格和單元格。“使用透明 gifs”復選框：選中該復選框后，ap div 轉換后的表格空白單元格用透明的 gif 圖像填充，以保證在任何瀏覽器中都能正常顯示。lllll“置于頁面中央”復選框：選中該復選框后，轉換后的表格在頁面居中顯示。不選中此復選框時，轉換后的表格居頁面左上角顯示。“防止重疊”復選框：選中該復選框后，可防止 ap div 重疊。“顯示 ap 元素面板”復選框：選中該復選框后，可

22、顯示“ap 元素”面板。“顯示網格”復選框：選中該復選框后，可顯示網格。“靠齊到網格”復選框：選中它后，可使網格吸附（捕捉）功能有效。（2）將表格轉換為 ap div：由于 ap div 的功能比表格的功能要強得多，所以將表格轉換為 ap div 以后，可以使網頁更豐富多彩。將表格轉換成 ap div 的方法如下：圖 4-2-12將“apdiv3” ap div 不可視單擊“修改”“轉換”“將表格轉換為 ap div”命令，彈出“將表格轉換為 ap div”對話框，如圖 4-2-14所示。該對話框內各復選框的作用與“轉換 ap div 為表格”對話框內“布局工具”選項組中各選項的含義一樣。圖

23、4-2-13 “轉換 ap div 為表格”對話框圖 4-2-14 “將表格轉換為 ap div”對話框4.3 【案例 19】“中國名勝圖像瀏覽 2”網頁相關知識1創建框架和“框架”面板（1）創建框架的常用方法：在網頁中創建框架的常用方法可以有以下三種。 單擊“文件”“新建”命令，彈出“新建文檔”對話框，如圖 4-3-7 所示。在該對話框中可以創建有框架的網頁。 單擊“插入”（布局）欄內“框架”快捷菜單中的一個命令，如圖 4-3-14 所示，即可在頁面內設置出相應的框架。 單擊“修改”“框架集”“”命令或單擊“插入記錄”“html”“框架”“”命令，也可以創建框架。（2）增減框架個數：在創建框

24、架后，要增加或刪除框架的個數，首先應單擊框架內部，再單擊“查看”“可視化助理”“框架邊框”命令選項，然后可采用如下方法進行。 增加新框架：將鼠標指針移到框架的四周邊緣處，當鼠標指針為“n”或“o”形狀時，向鼠標指針箭頭指示的方向向內拖動，即可在水平或垂直方向增加一個框架。 在框架區域內增加新框架：單擊某一個框架區域內部，使光標在此區域內出現，然后按照上述方法在框架區域內增加新框架。 調整框架的大小：用鼠標拖動框架線，即可調整框架的大小。 刪除框架：拖動框架線，一直拖動到另一條框架線或邊框處，即可刪除框架。（3）“框架”面板：單擊“窗口”“框架”命令，調出“框架”面板，“框架”面板也叫框架觀察器

25、，如圖4-3-15 所示。如果光標在框架內，則框架觀察器中對應框架內的文字變為黑色，如圖 4-3-16 所示。“框架”面板的作用是顯示出框架網頁的框架結構（也叫分欄結構）。單擊某一個分欄框架（選中的框架邊框呈黑色），即可選中該分欄框架，同時“屬性”欄變為該分欄框架“屬性”欄。如果單擊框架的外框線，可以選中整個框架（即框架集），如圖 4-3-17 所示，同時“屬性”欄變為框架集“屬性”欄。圖 4-3-15 “框架”快捷菜單圖 4-3-16 “框架”面板圖 4-3-17選中整個框架集2在框架內插入 html 文件（1）單擊網頁分欄框架的某一個分欄框架窗口內部，使光標在該分欄框架窗口內出現。在選中的

26、分欄框架窗口內輸入文字和導入對象，然后將該分欄框架中的內容保存為網頁文件。（2）按住【alt】鍵，單擊一個框架分欄的內部，使光標出現在該分欄框架窗口內，或者單擊“框架”面板中的分欄框架內部，選中相應的分欄框架。然后，單擊其“屬性”欄中“源文件”文本框后的按鈕 ，彈出“選擇 html 文件”對話框。從中選擇文件夾、要加載的文件，在“相對于”下拉列表框中選擇“站點根目錄”選項后，“url”文本框中會給出選中文件相對于站點文件夾的相對路徑和文件名稱；選擇“文檔”選項后，“url”文本框中會給出選中文件的名稱。然后，單擊“確定”按鈕，即可完成在分欄框架內插入 html 文件的案例。（3）也可以單擊“文

27、件”“在框架中打開”命令，彈出“選擇 html 文件”對話框。利用它可將外部的 html文件加載到選定的分欄框架窗口內。3保存框架文件在文件菜單內有許多命令用來保存框架集和框架分欄內的網頁，而且具有智能化，用戶可以針對需要保存的內容顯示可以使用的相應的命令。（1）如果網頁中的框架集是新建的或是進行過修改的，則單擊“文件”“保存全部”命令，彈出“另存為”對話框，同時整個框架（即框架集）會被虛線框住。然后輸入文件名，再單擊“保存”按鈕，完成整個框架集網頁文件的存儲。此時再次調出“另存為”對話框，同時某一個框架會被虛線框住。輸入文件名，再單擊“保存”按鈕，完成該框架內網頁文件的存儲。以后依次將框架分

28、欄內的內容保存為 html 網頁文件，保存的是哪個分欄ll中的網頁文件，則該分欄就會被虛線框住。（2）如果網頁中的框架集是新建的或修改后的，則單擊“文件”“框架集另存為”命令，或單擊“文件”“保存框架頁”命令，可彈出“另存為”對話框。從中輸入文件名，再單擊“保存”按鈕，完成框架集文件的保存。（3）單擊一個框架分欄內部，使光標出現在該框架窗口內。單擊“文件”“保存框架”命令，彈出“另存為”對話框。輸入網頁的名字，單擊“保存”按鈕，即可將該框架分欄中的網頁保存。（4）修改框架文件后，單擊“文件”“關閉”命令，會彈出一個提示框，提示是否存儲各個 html 文件。連續單擊“是”按鈕可依次保存各框架（先

29、保存光標所在的框架，最后保存整個框架集）。4框架集和分欄框架的“屬性”欄（1）框架集的“屬性”欄：單擊框架的外邊框后，可使“屬性”欄變為框架集“屬性”欄。改變框架集屬性需要通過框架集“屬性”欄來完成，如圖 4-3-14 所示。“邊框”下拉列表框：用來確定是否要邊框。選擇“是”選項保留邊框；選“否”選項是不保留邊框；選“默認”選項是采用默認狀態，通常要保留邊框。“邊框顏色”下拉按鈕：用來確定邊框的顏色。單擊可在后面的文本框中直接輸入顏色數據。按鈕，可調出顏色面板，從中可選擇邊框的顏色，也lllllll“邊框寬度”文本框：用來輸入邊框的寬度數值，其單位是像素。如果在該文本框內輸入 0，則沒有邊框。

30、如果單擊“查看”“框架邊框”命令，則網頁頁面編輯窗口內會顯示輔助的邊框線（不會在瀏覽器中顯示出來）。“值”文本框：用來確定網頁左邊分欄的寬度或上邊分欄的高度。“單位”下拉列表框：用來選擇“值”文本框內數據的單位，單位有“像素”等。（2）分欄框架的“屬性”欄：按住【alt】鍵，單擊分欄框架的內部后，可使“屬性”欄變為分欄框架“屬性”欄。分欄框架屬性的改變需要通過分欄框架“屬性”欄來完成。分欄框架的框架“屬性”欄中各選項的作用如下：“框架名稱”文本框：用來輸入分欄的名字。“源文件”文本框：用來設置該分欄內 html 文件的路徑和文件的名字。“滾動”下拉列表框：用來選擇分欄是否在框架的右邊和下邊添加

31、滾動條。選擇“是”選項，表示添加滾動條；選擇“否”選項，表示不添加滾動條；選擇“自動”選項，表示根據框架分欄內是否能夠完全顯示出其網頁的內容來自動選擇是否在框架的右邊和下邊添加滾動條；選擇“默認”選項，表示采用默認狀態。“不能調整大小”復選框：如果選中該復選框，則不能用鼠標拖動框架的邊框線，調整分欄大小；如果有選中該復選框，則可以用鼠標拖動框架的邊框線，調整分欄大小。ll“邊框”下拉列表框：用來確定是否要邊框。當此處的設置與框架集“屬性”欄的設置不一致時，以此處設置為準。“邊框顏色”下拉按鈕：用來確定邊框的顏色。4.4 【案例 20】“中國旅游萬里行”網頁相關知識1描圖（1）將描圖與其他對象對

32、齊：載入描圖，在網頁內插入一個對象，單擊選中網頁內的對象（例如，圖像或文字等）。單擊“查看”“跟蹤圖像”“對齊所選范圍”命令，即可將描圖的左上角與選中對象的左上角對齊。（2）顯示/隱藏描圖：在網頁中調入描圖后，單擊“查看”“跟蹤圖像”“顯示”命令，可以在顯示描圖和隱藏描圖之間切換。（3）調整描圖的位置：單擊“查看”“跟蹤圖像”“調整位置”命令，彈出“調整跟蹤圖像位置”對話框，如圖 4-4-10 所示。利用它可以改變描圖的位置。在該對話框的“x”和“y”文本框內分別輸入坐標值（單位為像素），即可將描圖的左上角以指定的坐標值定位。單擊“確定”按鈕完成重定位。另外，在打開“調整跟蹤圖像位置”對話框的

33、情況下，也可以通過按鍵盤中的方向鍵來移動描圖，每按一次鍵即可移動一個像素。按住【shift】鍵的同時，按鍵盤中的方向鍵也可以移動描圖，每按一次鍵即可移動五個、 、像素。（4）重設描圖位置：單擊“查看”“跟蹤圖像”“重設位置”命令，可將描圖的位置恢復到調整前的位置。圖 4-4-10 “調整跟蹤圖像位置”對話框2“插入”（布局）欄簡介和網頁布局的調整dreamweaver cs3 的“插入”（布局）欄如圖 4-4-7 所示。“插入”（布局）欄從左到右的主要按鈕有“插入div 標簽”按鈕、“繪制 ap div”按鈕 、“spry 菜單欄”按鈕 、“spry 選項卡式面板”按鈕 、“spry 折疊式”

34、按鈕 “spry 可折疊面板”按鈕 “表格”按鈕 ，右邊的兩個按鈕是“繪制布局表格”工具按鈕 和“繪制布局單元格”工具按鈕 。單擊“查看”“表格模式”“布局模式”命令，進入網頁布局模式狀態，此時，“繪制布局表格”工具按鈕 和“繪制布局單元格”工具按鈕 有效。利用“繪制布局表格”工具按鈕 可以繪制布局表格，如圖 4-4-11 所示。利用“繪制布局單元格”工具按鈕 ，可在布局表格內繪制出網頁布局單元格，如圖 4-4-12 所示。如果沒有繪制布局表格就繪制布局單元格，則會自動產生一個布局表格。注意：不可以在布局單元格內繪制布局表格和布局單元格。（1）選中布局表格：單擊布局表格內部或它的標簽布局表格，

35、即可選中布局表格。選中的布局表格的四周會出現三個控制柄和布局表格寬度標注，如圖 4-4-11 所示。（2）調整布局表格的大小：用鼠標拖動布局表格的標簽，可改變布局表格的位置；用鼠標拖動布局表格的綠色控制柄，可改變布局表格的大小。注意：不能將布局表格調整到比其中的單元格還小，也不能將布局表格移到其他布局表格之上。圖 4-4-11繪制的布局表格圖 4-4-12繪制的布局單元格（3）選中布局單元格：將鼠標指針移到布局單元格的藍色線條處，布局單元格的線條會變為紅色，此時單擊布局單元格的線條，即可選中布局單元格。選中的布局單元格四周會有八個控制柄，如圖 4-4-12 所示。（4）調整單元格的大小與位置：

36、選中單元格后，用鼠標拖動單元格線條，可改變單元格的位置；用鼠標拖動單元格的控制柄，可改變單元格的大小。注意：不能將單元格移出所在的布局表格，也不能將單元格移到其他單元格之上。3布局表格和布局單元格的“屬性”欄（1）布局表格的“屬性”欄：單擊選中布局表格后，調出布局表格的“屬性”欄，它與表格的“屬性”欄不一樣，如圖 4-4-13 所示。布局表格“屬性”欄內各選項的作用如下：llllllll“寬”選項組：它有兩個單選按鈕，分別是“固定”和“自動伸展”。選擇“固定”單選按鈕后，還需要在其文本框內輸入布局表格的寬度數值（單位為像素），可以保證布局表格的固定寬度；選擇“自動伸展”單選按鈕后，布局表格的寬

37、度可以自動伸展為整個窗口的寬度。“高”文本框：用來設置布局表格的高度數值（單位為像素）。“背景顏色”按鈕與文本框：用來設置布局表格的背景顏色。圖 4-4-13網頁布局表格“屬性”欄“填充”文本框：用來設置布局表格內布局單元格中插入對象距邊線的距離數值（單位為像素）。該值為 0時，如圖 4-4-14 所示；該值為 10 時，如圖 4-4-15 所示。“間距”文本框：用來設置布局表格內各布局單元格的間距數值（單位為像素）。該值為 0 時，如圖 4-4-14所示；該值為 10、填充值為 10 時，如圖 4-4-15 所示。“清除行高”按鈕 ：單擊該按鈕，可清除行高。“使單元格寬度一致”按鈕 ：單擊該

38、按鈕，可使單元格寬度一致。“刪除所有間隔圖像”按鈕 ：該按鈕在添加間隔圖像后才會有效。單擊該按鈕，可刪除所有的間隔圖像。ll圖 4-4-14 “填充”和“間距”值均為 0圖 4-4-15 “填充”和“間距”值均為 10“刪除嵌套”按鈕 ：單擊該按鈕，可刪除嵌套在布局表格內的選中的布局表格。（2）布局單元格的“屬性”欄：選中布局單元格，調出布局單元格的“屬性”欄，如圖 4-4-16所示。布局單元格“屬性”欄內前面沒有提到的選項的作用如下：“水平”下拉列表框：用來確定布局單元格內對象在水平方向的對齊方式。它有四個選項，分別為“默認”（一般為左對齊）、“左對齊”、“居中對齊”和“右對齊”。圖 4-4

39、-16布局單元格的“屬性”欄ll“垂直”下拉列表框：用來確定布局單元格內對象在垂直方向的對齊方式。它有五個選項，分別為“默認”（一般為居中）、“頂端”、“中間”、“底部”和“基線”。“不換行”復選框：選中該復選框后，可取消外框線。4布局表格和布局單元格菜單單擊選中布局表格，再單擊總寬度標注右邊的箭頭，可調出布局表格菜單，如圖 4-4-17 所示。單擊單元格寬度標注右邊的箭頭，可調出單元格菜單，如圖 4-4-18 所示。圖 4-4-17布局表格菜單圖 4-4-18單元格菜單（1）“清除所有高度”：可以將布局表格內的單元格的高（即單元格頂部與布局表格頂端的間距）清除。如果布局表格內沒有單元格，則自動