1、第第3 3章章 框架、表格、框架、表格、AP DivAP Div框架、表格、框架、表格、AP DivAP Div都是設計和布局頁面的重要工具都是設計和布局頁面的重要工具本章要點本章要點能夠使用框架布局網頁。能夠使用框架布局網頁。熟練掌握表格的創建、編輯過程。熟練掌握表格的創建、編輯過程。熟練掌握表格的嵌套方法。熟練掌握表格的嵌套方法。熟練掌握表格的寬度、邊框、背景色及背景熟練掌握表格的寬度、邊框、背景色及背景 圖像的設置方法。圖像的設置方法。熟練掌握熟練掌握DivDiv標簽的使用方法。標簽的使用方法。掌握掌握AP DivAP Div的使用方法。的使用方法。 3.1 3.1 在網頁中使用框架在網

2、頁中使用框架 利用框架可以非常方便地對頁面進行利用框架可以非常方便地對頁面進行布局。布局。Dreamweaver CS3提供了許多框提供了許多框架模板，用戶也可手工修改框架的結構。架模板，用戶也可手工修改框架的結構。3.1.1 框架操作框架操作3.1.2 框架觀察器框架觀察器3.1.3 在框架內插入在框架內插入HTML文件內容與保文件內容與保存框架文件存框架文件3.1 3.1 在網頁中使用框架在網頁中使用框架3.1.1 框架操作框架操作 創建框架、調整框架、刪除框架、對創建框架、調整框架、刪除框架、對框架屬性的設置。框架屬性的設置。一、創建框架一、創建框架二、調整框架二、調整框架三、刪除框架三

3、、刪除框架四、設置框架集屬性四、設置框架集屬性五、設置分欄框架屬性五、設置分欄框架屬性3.1.1 框架操作框架操作3.1.1 框架操作框架操作一、創建框架一、創建框架創建框架有以下幾種方法。創建框架有以下幾種方法。（1方法一：單擊【文件】方法一：單擊【文件】/【新建】命令，【新建】命令，調出【新建文檔】對話框，如圖調出【新建文檔】對話框，如圖3-1所示。單所示。單擊該對話框左邊【類別】欄中【示例中的擊該對話框左邊【類別】欄中【示例中的頁】，再單擊示例文件夾中的【框架集】選頁】，再單擊示例文件夾中的【框架集】選項，單擊選中該對話框右邊【框架集】欄內項，單擊選中該對話框右邊【框架集】欄內的一種框架

4、選項，然后單擊【創建】按鈕，的一種框架選項，然后單擊【創建】按鈕，即可創建有框架的網頁。即可創建有框架的網頁。 圖3-1 在頁面內創建上下兩個框架 3.1.1 框架操作框架操作（2方法二：單擊【插入】（規劃面板的方法二：單擊【插入】（規劃面板的【框架】快捷菜單中的一個按鈕，即可在頁【框架】快捷菜單中的一個按鈕，即可在頁面內設置出相應的框架，如圖面內設置出相應的框架，如圖3-2所示。所示。3.1.1 框架操作框架操作圖3-2 【框架】快捷菜單 （3方法三：方法三： 利用【修正】利用【修正】/【框【框架集】下相應的命令架集】下相應的命令 或利用【插入記錄】或利用【插入記錄】/【HTML】/【框架】

5、【框架】下相應的命令，也可以下相應的命令，也可以創建框架。創建框架。 3.1.1 框架操作框架操作（3方法三：方法三： 利用【修正】利用【修正】/【框架【框架集】下相應的命令集】下相應的命令 或利用【插入記錄】或利用【插入記錄】/【HTML】/【框架】下【框架】下相應的命令，也可以創相應的命令，也可以創建框架。建框架。 3.1.1 框架操作框架操作建立框架之后，要增加框架的個數，可采用如建立框架之后，要增加框架的個數，可采用如下方法：下方法： 單擊框架內部，再單擊【查看】單擊框架內部，再單擊【查看】/【可視化助【可視化助理】理】/【框架邊框】命令，使該命令左邊有。【框架邊框】命令，使該命令左邊

6、有。然后，將鼠標指針移到框架的邊緣處，當鼠然后，將鼠標指針移到框架的邊緣處，當鼠標指針為標指針為“”或或“”“”形狀時，向鼠標指針箭形狀時，向鼠標指針箭頭頭指示的方向拖曳鼠標，即可在水平或垂直方指示的方向拖曳鼠標，即可在水平或垂直方向增加一個框架。向增加一個框架。 輔助的邊框線在瀏覽器中不會顯示。輔助的邊框線在瀏覽器中不會顯示。3.1.1 框架操作框架操作3.1.1 框架操作框架操作顯示框架邊框二、調整框架二、調整框架 用鼠標拖曳框架線，即可調整框架的大用鼠標拖曳框架線，即可調整框架的大小。小。( (圖圖3-3)P573-3)P57三、刪除框架三、刪除框架用鼠標拖曳框架線，一直拖曳到另一條框架

7、用鼠標拖曳框架線，一直拖曳到另一條框架線或邊框處，即可刪除框架。線或邊框處，即可刪除框架。( (圖圖3-4)P573-4)P573.1.1 框架操作框架操作四、設置框架集屬性四、設置框架集屬性 單擊框架的外邊框，可使單擊框架的外邊框，可使 屬性屬性 欄變為欄變為框架集框架集 屬性屬性 欄。欄。 邊框邊框 、 邊框顏色邊框顏色 、 邊框寬度邊框寬度 圖3-5 框架集【屬性】欄3.1.1 框架操作框架操作五、設置分欄框架屬性五、設置分欄框架屬性按住按住AltAlt鍵，單擊分欄框架的內部，可使【屬鍵，單擊分欄框架的內部，可使【屬性】欄變為分欄框架【屬性】欄，如圖性】欄變為分欄框架【屬性】欄，如圖3-

8、63-6所所示。示。 3.1.1 框架操作框架操作圖3-6 分欄框架【屬性】欄圖3-6 分欄框架【屬性】欄3.1.1 框架操作框架操作框架名稱框架名稱文本框、文本框、源文件源文件文本框、文本框、 滾動滾動下拉列表框、下拉列表框、 不能調整大小不能調整大小復選框、復選框、 邊邊框框下拉列表框、下拉列表框、 邊框顏色邊框顏色按鈕按鈕3.1.2 框架觀察器框架觀察器 單擊【窗口】單擊【窗口】/【框架】命令，或按【框架】命令，或按下下Shift+F2組合鍵，調出【框架】面板，組合鍵，調出【框架】面板，也叫也叫框架觀察器，如圖框架觀察器，如圖3-7所示。如果光所示。如果光標在框架標在框架內，則框架觀察器

9、中對應框架內的內，則框架觀察器中對應框架內的文字變為文字變為黑色，如圖黑色，如圖3-7所示。所示。3.1 在網頁中使用框架在網頁中使用框架3.1.2 框架觀察器 圖3-7 框架觀察器 3.1.2 框架觀察器 框架觀察器的作用是顯示出框架網頁的框架框架觀察器的作用是顯示出框架網頁的框架構造也叫分欄結構）。單擊某一個分欄框構造也叫分欄結構）。單擊某一個分欄框架選中的框架邊框呈黑色），即可選中該架選中的框架邊框呈黑色），即可選中該分欄框架，同時【屬性】欄變為該分欄框架分欄框架，同時【屬性】欄變為該分欄框架【屬性】欄。如果單擊框架的外框線，可以【屬性】欄。如果單擊框架的外框線，可以選中整個框架，如圖選

10、中整個框架，如圖3-8所示，同時【屬性】所示，同時【屬性】欄變為框架集【屬性】欄。欄變為框架集【屬性】欄。3.1.2 框架觀察器 圖3-8 選中整個框架后的觀察器3.1.3 在框架內插入在框架內插入HTML文件內容文件內容 與保存框架文件與保存框架文件 一、在框架內插入一、在框架內插入HTML文件內容文件內容的操作步驟如下：的操作步驟如下：1. 單擊網頁框架的某一個區域內部，單擊網頁框架的某一個區域內部，使光標在該區域內出現。使光標在該區域內出現。2. 可以象在沒有框架的網頁頁面內可以象在沒有框架的網頁頁面內輸入文字和導入對象那樣，在選中輸入文字和導入對象那樣，在選中的框架區域內輸入文字和導入

11、對象。的框架區域內輸入文字和導入對象。也可以單擊【文件】也可以單擊【文件】/【在框架中【在框架中打開】命令，調出【選擇打開】命令，調出【選擇HTML文文件】對話框。利用它可將外部的件】對話框。利用它可將外部的HTML文件加載到選定的框架區域文件加載到選定的框架區域內。內。3.1 在網頁中使用框架在網頁中使用框架在框架內插入HTML文件內容圖圖3-9 【選擇【選擇HTML文件】對話框文件】對話框3.1.3 在框架內插入HTML文件內容與保存框架文件二、保存框架文件二、保存框架文件1. 1. 單擊【文件】單擊【文件】/ /【框架集另存為】命令，【框架集另存為】命令，調出【另存為】對話框。利用該對話

12、框可輸入調出【另存為】對話框。利用該對話框可輸入文件名，再單擊【保管】按鈕，完成框架文件文件名，再單擊【保管】按鈕，完成框架文件的存儲。的存儲。2. 2. 如果網頁中的框架進行了修改，而且框架如果網頁中的框架進行了修改，而且框架網頁已經保存過，則單擊【文件】網頁已經保存過，則單擊【文件】/ /【保存框【保存框架頁】命令即可再保存。架頁】命令即可再保存。二、保存框架文件二、保存框架文件3. 3. 單擊【文件】單擊【文件】/ /【框架另存為】命令，調【框架另存為】命令，調出【另存為】對話框。利用該對話框可輸入出【另存為】對話框。利用該對話框可輸入文件名，再單擊【保管】按鈕，完成該框架文件名，再單擊

13、【保管】按鈕，完成該框架窗口中的內容存儲窗口中的內容存儲( (該框架窗口中的該框架窗口中的HTML)HTML)。4. 4. 單擊【文件】單擊【文件】/ /【保存全部】命令。先保【保存全部】命令。先保存框架，再依次保存框架窗口內的存框架，再依次保存框架窗口內的HTMLHTML文件文件 。3.1.3 在框架內插入HTML文件內容與保存框架文件二、保存框架文件二、保存框架文件5. 5. 單擊【文件】單擊【文件】/ /【封鎖】命令，關閉框架【封鎖】命令，關閉框架時，系統會彈出一系列對話框，依次保存框時，系統會彈出一系列對話框，依次保存框架及各框架窗口內的架及各框架窗口內的HTMLHTML文件文件 。3

14、.1.3 在框架內插入HTML文件內容與保存框架文件3.2 3.2 在網頁中創建表格在網頁中創建表格 表格是最常用的頁面布局工具。表格是最常用的頁面布局工具。3.2.1 制作簡單表格與調整表格大小制作簡單表格與調整表格大小3.2.2 選擇表格和設置表格的屬性選擇表格和設置表格的屬性3.2.3 編輯表格編輯表格3.2 3.2 在網頁中創建表格在網頁中創建表格 3.2.1 制作簡單表格與調整表格大小制作簡單表格與調整表格大小 將光標移到需要插入表格的位置，將光標移到需要插入表格的位置，單擊【插入】（常用面板內的單擊【插入】（常用面板內的【表格】按鈕，調出【表格】對話【表格】按鈕，調出【表格】對話框

15、，如圖框，如圖3-11所示。所示。圖3-11 【表格】對話框 一、【表格】對話框內各選項的作用一、【表格】對話框內各選項的作用 （1）【行數】和【列數】文本框：輸入表格）【行數】和【列數】文本框：輸入表格的行數和列數。的行數和列數。（2）【表格寬度】文本框：輸入表格寬度值，）【表格寬度】文本框：輸入表格寬度值，其單位為像素或百分數。如果選擇【百分其單位為像素或百分數。如果選擇【百分比】，則表示表格占頁面或它的母體容量比】，則表示表格占頁面或它的母體容量寬度的百分比。寬度的百分比。一、【表格】對話框內各選項的作用一、【表格】對話框內各選項的作用 （3）【邊框粗細】文本框：輸入表格邊框的）【邊框粗

16、細】文本框：輸入表格邊框的寬度數值，其單位為像素。當它的值為寬度數值，其單位為像素。當它的值為0時，時，表示沒有表格線。表示沒有表格線。 (邊框邊框P61)（4）【單元格邊距】文本框：輸入的數表示）【單元格邊距】文本框：輸入的數表示單元格之間兩個相鄰邊框線左與右、上單元格之間兩個相鄰邊框線左與右、上和下邊框線間的距離。和下邊框線間的距離。(填充填充P61)一、【表格】對話框內各選項的作用一、【表格】對話框內各選項的作用 （5）【單元格間距】文本框：輸入單元格內）【單元格間距】文本框：輸入單元格內的內容與單元格邊框間的空白數值，其單的內容與單元格邊框間的空白數值，其單位為像素。這種空白存在于單元

17、格內容的位為像素。這種空白存在于單元格內容的四周。四周。 (間距間距P61)一、【表格】對話框內各選項的作用一、【表格】對話框內各選項的作用 （6）【頁眉】欄：用來設置表格的頁眉單元）【頁眉】欄：用來設置表格的頁眉單元格樣式。被設置為頁眉的單元格，其中的格樣式。被設置為頁眉的單元格，其中的字體將被設置成居中和黑體格式。字體將被設置成居中和黑體格式。（7）【輔助功能】欄：【輔助功能】欄中各）【輔助功能】欄：【輔助功能】欄中各選項的作用如下。選項的作用如下。【標題】文本框：設置表格的標題。【標題】文本框：設置表格的標題。【摘要】文本框：設置表格的摘要。【摘要】文本框：設置表格的摘要。【對齊標題】下

18、拉列表框：設置標題與表格【對齊標題】下拉列表框：設置標題與表格的位置關系，默認為表格的頂部。的位置關系，默認為表格的頂部。通過上述設置后，單擊【確定】按鈕，即可通過上述設置后，單擊【確定】按鈕，即可插入符合要求的表格，如圖插入符合要求的表格，如圖3-12所示。所示。3.2.1 制作簡單表格與調整表格大小圖3-12 制作的第一個表格 二、調整表格大小二、調整表格大小 （1調整整個表格的大小：單擊表格的邊框，調整整個表格的大小：單擊表格的邊框，選中該表格，此時表格右邊、下邊和右下角會選中該表格，此時表格右邊、下邊和右下角會出現三個方形的黑色控制柄，再用鼠標拖曳控出現三個方形的黑色控制柄，再用鼠標拖

19、曳控制柄，即可調整整個表格的大小。制柄，即可調整整個表格的大小。3.2.1 制作簡單表格與調整表格大小二、調整表格大小二、調整表格大小 （2調整表格中行或列的大小：將鼠標指針調整表格中行或列的大小：將鼠標指針移到表格線處，當鼠標指針變為雙箭頭橫移到表格線處，當鼠標指針變為雙箭頭橫線或雙箭頭豎線時，拖曳鼠標，即可調整線或雙箭頭豎線時，拖曳鼠標，即可調整表格線的位置，從而調整了表格行或列的表格線的位置，從而調整了表格行或列的大小。大小。3.2.1 制作簡單表格與調整表格大小三、表格和單元格標簽三、表格和單元格標簽 表格標簽：選中表格后，在表格的下面用表格標簽：選中表格后，在表格的下面用綠色顯示出了

20、表格的寬度，如圖綠色顯示出了表格的寬度，如圖3-15所示。單所示。單擊下邊的三角按鈕，可以調出【表格】快捷菜擊下邊的三角按鈕，可以調出【表格】快捷菜單，利用此菜單可以對表格進行選擇、清除列單，利用此菜單可以對表格進行選擇、清除列的寬度、左側插入列和右側插入列等操作。的寬度、左側插入列和右側插入列等操作。3.2.1 制作簡單表格與調整表格大小3.2.2 3.2.2 選擇表格和設置表格的屬性選擇表格和設置表格的屬性一、選擇表格一、選擇表格（1 1選擇整個表格：單擊表格的外選擇整個表格：單擊表格的外邊框，可選中整個表格，此時表格邊框，可選中整個表格，此時表格右邊、下邊和右下角會出現三個方右邊、下邊和

21、右下角會出現三個方形黑色控制柄。形黑色控制柄。（2 2選擇多個表格單元格：按住選擇多個表格單元格：按住CtrlCtrl鍵，同時依次單擊所有要選擇鍵，同時依次單擊所有要選擇的表格單元格。的表格單元格。 3.2 在網頁中創建表格在網頁中創建表格 3.2.2 選擇表格和設置表格的屬性一、選擇表格一、選擇表格（3 3選擇表格的一行或一列單元格：將鼠標移到一選擇表格的一行或一列單元格：將鼠標移到一行的最左邊或一列的最上邊，當鼠標指針呈黑色行的最左邊或一列的最上邊，當鼠標指針呈黑色箭頭時單擊鼠標，即可選中一行或一列。箭頭時單擊鼠標，即可選中一行或一列。（4 4選擇表格的多行或多列單元格：按住選擇表格的多行

22、或多列單元格：按住CtrlCtrl鍵，鍵，將鼠標依次移到要選擇的各行或各列，當鼠標指將鼠標依次移到要選擇的各行或各列，當鼠標指針呈黑色箭頭時單擊鼠標，即可選中多行或多列。針呈黑色箭頭時單擊鼠標，即可選中多行或多列。還可以將鼠標移到要選擇的多行或多列的起始處，還可以將鼠標移到要選擇的多行或多列的起始處，當鼠標指針呈黑色箭頭時，拖曳鼠標也可選擇多當鼠標指針呈黑色箭頭時，拖曳鼠標也可選擇多行或多列單元格。行或多列單元格。二、設置整個表格的屬性二、設置整個表格的屬性 單擊表格的外邊框，選中整個表格，此時表單擊表格的外邊框，選中整個表格，此時表格的【屬性】欄如圖格的【屬性】欄如圖3-16所示。所示。 3

23、.2.2 選擇表格和設置表格的屬性圖3-16 表格的【屬性】欄3.2.2 選擇表格和設置表格的屬性(1)表格id: 表格的名稱(2)行和列: 表格的行數和列數(3)寬和高: 表格的寬度數 %(百分數) 像素(4)填充: 單元格邊距P60(5)間距: 單元格間距P60(6)對齊: “默許”、“左對齊”、“居中對齊”、“右對齊”(7)邊框: 邊框粗細P603.2.2 選擇表格和設置表格的屬性(8)背景顏色(9)背景圖案(10)邊框顏色(11)4個按鈕: 清除行高、清除列寬、將表格寬度的單位改為像素、將表格寬度的單位改為百分比(12)類: 設置表格的樣式三、設置表格單元格的屬性三、設置表格單元格的屬

24、性按住按住Ctrl鍵，單擊表格中的單元格，選中幾個鍵，單擊表格中的單元格，選中幾個單元格。此時【屬性】欄變為表格單元格單元格。此時【屬性】欄變為表格單元格【屬性】欄，如圖【屬性】欄，如圖3-17所示。其上半部分用來所示。其上半部分用來設置單元格內文本的屬性設置單元格內文本的屬性P30，下半部分用來，下半部分用來設置單元格的屬性。設置單元格的屬性。3.2.2 選擇表格和設置表格的屬性圖3-17 表格單元格【屬性】欄3.2.2 選擇表格和設置表格的屬性(1) 合并所選單元格: 先選中，再單擊按鈕(2) 拆分單元格: 先選中，再單擊按鈕，翻開拆分單元格對話框，如圖3-19。3.2.2 選擇表格和設置

25、表格的屬性(3) 程度和垂直: 水平對齊方式和垂直對齊方式(4) 寬和高: 單元格的寬度和高度(5)不換行復選框: 單元格內的文字超過單元格寬度時，是自動換行還是加大單元格寬度。(6)標題復選框: 該單元格內的文字以標題格式顯示(粗體、居中)(7)背景按鈕與文本框、背景顏色按鈕與文本框 (8)邊框按鈕與文本框: 設置單元格雙線條邊框的顏色。 3.2 在網頁中創建表格在網頁中創建表格 3.2.3 編輯表格 將鼠標指針移到表格內，單擊鼠標右鍵，調出其快捷菜單，再單擊快捷菜單內的【表格】菜單命令，調出它的下一級菜單，如圖3-21所示。利用該快捷菜單，可對表格進行許多編輯操作。圖3-21 表格的快捷菜

26、單 一、在表格中插入行或列一、在表格中插入行或列 （1在表格中插入一行或一在表格中插入一行或一列：選中一行或一列單元格，列：選中一行或一列單元格，再單擊圖再單擊圖3-21所示的菜單中所示的菜單中的【插入行】或【插入列】的【插入行】或【插入列】命令，即可在選中行的上邊命令，即可在選中行的上邊插入一行或在選中列的左邊插入一行或在選中列的左邊插入一列。按插入一列。按Tab鍵可以在鍵可以在表格單元格內移動光標，當表格單元格內移動光標，當光標在最后一個單元格時，光標在最后一個單元格時，再按再按Tab鍵，即可在表格的鍵，即可在表格的下邊增加一行。下邊增加一行。3.2.3 編輯表格圖3-21 表格的快捷菜單

27、 （2在表格中插入多行或多列：選中一行或在表格中插入多行或多列：選中一行或一列。單擊圖一列。單擊圖3-21所示菜單中的【插入行所示菜單中的【插入行或列】命令，即可調出【插入行或列】對或列】命令，即可調出【插入行或列】對話框，如圖話框，如圖3-22所示。所示。(插入插入、行數行數 、位置位置) 3.2.3 編輯表格圖3-22 【插入行或列】對話框 二、刪除表格中的行或列二、刪除表格中的行或列 刪除表格中的行或列可采用刪除表格中的行或列可采用以下幾種方法。以下幾種方法。（1利用表格的快捷菜單刪除利用表格的快捷菜單刪除表格中的行與列：選中要刪除的表格中的行與列：選中要刪除的行或列，再單擊圖行或列，再

28、單擊圖3-21所示菜單所示菜單中的【刪除行】或【刪除列】命中的【刪除行】或【刪除列】命令，即可刪除選定的行或列。例令，即可刪除選定的行或列。例如，選中圖如，選中圖3-20所示表格中右邊所示表格中右邊的的1列，再刪除該列，其效果如列，再刪除該列，其效果如圖圖3-23所示。所示。3.2.3 編輯表格圖3-21 表格的快捷菜單 （2利用【去除】利用【去除】命令刪除表格中命令刪除表格中的行與列：選中的行與列：選中要刪除的行或列，要刪除的行或列，再單擊【編輯】再單擊【編輯】/【去除】命令，【去除】命令，即可刪除選定的即可刪除選定的行或列。行或列。3.2.3 編輯表格三、復制和移動表格的單元格的內容三、復

29、制和移動表格的單元格的內容 復制和移動表格的單元格操作如下。復制和移動表格的單元格操作如下。（1選中要復制或移動的表格的單元格，它選中要復制或移動的表格的單元格，它們應構成一個矩形。然后，單擊【編輯】們應構成一個矩形。然后，單擊【編輯】/【復制】或單擊【編輯】【復制】或單擊【編輯】/【剪切】命令。【剪切】命令。（2將光標移到要復制或移動處，再單擊將光標移到要復制或移動處，再單擊【編輯】【編輯】/【粘貼】命令。【粘貼】命令。3.2.3 編輯表格四、在表格中插入對象四、在表格中插入對象 （1在表格中插入表格：單擊要插入表格在表格中插入表格：單擊要插入表格的一個單元格內部。再按照上述創建表格的一個單

30、元格內部。再按照上述創建表格的方法建立一個新的表格，如圖的方法建立一個新的表格，如圖3-24所示。所示。3.2.3 編輯表格圖3-24 在表格單元格內插入表格 （2在表格中插入圖像或文字：單擊要插入對在表格中插入圖像或文字：單擊要插入對象的一個單元格內部，再按照以前所述方法在單象的一個單元格內部，再按照以前所述方法在單元格內輸入文字或粘貼文字。也可以在單元格內元格內輸入文字或粘貼文字。也可以在單元格內插入圖像或動畫，如圖插入圖像或動畫，如圖3-25所示。所示。 3.2.3 編輯表格圖3-25 在表格單元格內插入文字和圖像 3.3 AP Div與與Div標簽標簽 Dreamweaver CS3中

31、的層，稱為中的層，稱為AP Div，它是一種被定義了絕對位置的特，它是一種被定義了絕對位置的特殊的殊的HTML標簽，可包含其他網頁元標簽，可包含其他網頁元素。素。(1)由于由于AP Div是絕對定位的，因此，是絕對定位的，因此， AP Div可以游離在文檔之上。利用可以游離在文檔之上。利用AP Div可以浮動定位網頁元素，它可以包可以浮動定位網頁元素，它可以包括文本、圖像甚至其他括文本、圖像甚至其他AP Div。(2)AP Div的的z軸屬性使多個軸屬性使多個AP Div可可以發生堆疊，即產生多重疊加的效果。以發生堆疊，即產生多重疊加的效果。(3)可以控制可以控制AP Div的顯示和隱藏，使的

32、顯示和隱藏，使網頁的內容變得更加豐富。網頁的內容變得更加豐富。3.3.1 創建創建AP Div3.3.2 選定選定AP Div3.3.3 AP Div屬性屬性3.3.4 AP Div的默認屬性的默認屬性3.3.5 AP 元素面板元素面板3.3.6 Div標簽標簽3.3.7 縮放縮放AP Div3.3.8 移動移動AP Div3.3.9 對齊對齊AP Div3.3.10 AP Div可見性可見性3.3.11 設置設置AP Div的的Z軸順序軸順序3.3.12 嵌套嵌套AP Div3.3 AP Div與與Div標簽標簽3.3.1 創建創建AP Div 新建一個網頁文檔，新建一個網頁文檔，將光標置于

33、欲插入將光標置于欲插入AP Div的位置。的位置。(1)選擇菜單欄中的選擇菜單欄中的【插入記錄】【插入記錄】/【布【布局對象】局對象】/【AP Div】命令，插入一個默認命令，插入一個默認的的AP Div3.3 AP Div與與Div標簽標簽3.3.1 創建創建AP Div 新建一個網頁文檔，將光標置于欲插新建一個網頁文檔，將光標置于欲插入入AP Div的位置。的位置。(2) 將【插入】將【插入】/【規劃】面板上的按鈕【規劃】面板上的按鈕 拖曳到拖曳到 文檔窗口中，插入一個默認的文檔窗口中，插入一個默認的AP Div(3)單擊【插入】單擊【插入】/【規劃】面板上的按【規劃】面板上的按鈕鈕 ，在

34、文檔窗口中拖曳十字形鼠標，在文檔窗口中拖曳十字形鼠標，畫出一個自定義大小的畫出一個自定義大小的AP Div3.3 AP Div與與Div標簽標簽3.3.1 創建創建AP Div 創建好創建好AP Div后，將光標置于后，將光標置于AP Div內，然后插入一副圖片。內，然后插入一副圖片。 AP Div會隨會隨著圖像的增大而自動增大。著圖像的增大而自動增大。 3.3.2 選定選定AP Div單擊文檔中的圖標來選定單擊文檔中的圖標來選定AP Div將光標置于將光標置于AP Div內，然后在文檔窗內，然后在文檔窗口底邊的標簽條中選擇口底邊的標簽條中選擇“”標簽標簽單擊單擊AP Div的邊框線的邊框線在

35、在AP元素面板中單擊元素面板中單擊AP Div的名稱。的名稱。如果要選定兩個以上的如果要選定兩個以上的AP Div，只要，只要按住按住Shift鍵，逐個單擊鍵，逐個單擊AP Div手柄，手柄，就可將就可將AP Div同時選定。同時選定。3.3 AP Div與與Div標簽標簽3.3.3 AP Div屬性屬性CSS-P元素元素: AP Div的名稱的名稱左左上上: AP Div的左邊框、上邊框距文的左邊框、上邊框距文檔左邊界、上邊界的距離。檔左邊界、上邊界的距離。寬寬高高圖3-30 AP Div的屬性面板3.3 AP Div與與Div標簽標簽3.3.3 AP Div屬性屬性Z軸軸:可見性可見性:

36、default inherit visible hidden背景圖像背景圖像背景顏色背景顏色溢出溢出: AP Div的內容超過的內容超過AP Div大小時的顯大小時的顯示方式，示方式，visible hidden scroll auto剪輯剪輯: 距距AP Div的的4個邊界的距離個邊界的距離圖3-30 AP Div的屬性面板3.3 AP Div與與Div標簽標簽3.3.4 AP Div的默認屬性的默認屬性AP Div的默認屬性是可以改變的。的默認屬性是可以改變的。選擇文檔窗口菜單欄中的【編輯】選擇文檔窗口菜單欄中的【編輯】/【首選參【首選參數】命令，翻開【首選參數】對話數】命令，翻開【首選參

37、數】對話框，在其框，在其中的【分類】列表框中選擇【中的【分類】列表框中選擇【AP元元素】選素】選項，如圖項，如圖3-31所示。所示。3.3 AP Div與與Div標簽標簽圖圖3-31首選參數對話框首選參數對話框 3.3 AP Div與與Div標簽標簽顯示顯示: 可見性。可見性。 寬寬高高 背景圖像背景圖像背景顏色背景顏色嵌套嵌套: 當當AP Div出現重疊時，將采用嵌套的方式。出現重疊時，將采用嵌套的方式。3.3.5 AP 元素面板元素面板選擇菜單欄中的【窗口】選擇菜單欄中的【窗口】/【AP元素】元素】命令，命令，翻開【翻開【AP元素】面板，如圖元素】面板，如圖3-24所所示。示。圖3-32

38、AP元素面板3.3 AP Div與與Div標簽標簽嵌套、嵌套、選定、選定、z軸順序、軸順序、可見性、可見性、重疊重疊3.3.6 Div標簽標簽 AP Div與與Div標簽使用的是同一個標簽使用的是同一個標簽標簽“”，只是，只是AP Div被賦予被賦予了了CSS樣式，而樣式，而Div標簽只有標簽只有id一個一個屬性參數。屬性參數。 打開文檔窗口，將【插入】打開文檔窗口，將【插入】/【規劃】【規劃】面板上的按鈕面板上的按鈕 拖曳到文檔窗口中，拖曳到文檔窗口中，在彈出的在彈出的插入插入Div標簽標簽對話框中輸對話框中輸入入ID。【插入記錄】【插入記錄】/【布局對象】【布局對象】/【Div 標簽】標簽

39、】3.3 AP Div與與Div標簽標簽3.3.6 Div標簽標簽3.3 AP Div與與Div標簽標簽Div標簽并沒有可見的特性，只顯示其中的內標簽并沒有可見的特性，只顯示其中的內容，只有當鼠標接近時，它才顯示紅邊框。容，只有當鼠標接近時，它才顯示紅邊框。AP Div標簽轉換為AP標簽CSS規則定義規則定義對話框的對話框的定位定位分類中，將分類中，將“類型選項設置為絕對，表示層，即為類型選項設置為絕對，表示層，即為AP Div標簽；否則為標簽；否則為Div標簽。標簽。雙擊雙擊3.3.7 縮放縮放AP Div可同時縮放一個或多個可同時縮放一個或多個AP Div，使它們，使它們具有相同的尺寸。具

40、有相同的尺寸。3.3 AP Div與與Div標簽標簽縮放單個縮放單個AP Div的幾種方法：的幾種方法：1. 選定選定AP Div，拖曳縮放句柄。，拖曳縮放句柄。2. 選定選定AP Div，然后按住，然后按住Ctrl鍵，再按方鍵，再按方向鍵。向鍵。3. 選定選定AP Div，然后按住，然后按住Shift+Ctrl鍵，鍵，再按方向鍵。再按方向鍵。3.3.7 縮放縮放AP Div3.3 AP Div與與Div標簽標簽同時縮放多個同時縮放多個AP Div的方法：的方法：按住按住Shift鍵，選定多個鍵，選定多個AP Div。在屬性面。在屬性面板中，修正板中，修正寬寬高高文本框即可。文本框即可。修正修正/排列順序排列順序/設置寬度相同設置寬度相同命令命令 設置高度相同設置高度相同命令命令3.3.8 移動移動AP Div3.3 AP Div與與Div標簽標簽1. 選定一個或多個選定一個或多個AP Di