第3章 框架、表格、層及網(wǎng)頁布局

1、 【案例【案例7 7】“操作系統(tǒng)比較操作系統(tǒng)比較”網(wǎng)頁網(wǎng)頁 3.1【案例【案例8 8】“主流電腦配置單主流電腦配置單”網(wǎng)頁網(wǎng)頁3.2【案例【案例9 9】“CPUCPU進化史進化史”網(wǎng)頁網(wǎng)頁3.3【案例【案例1010】“電腦展示電腦展示”網(wǎng)頁網(wǎng)頁 學習目標學習目標 “操作系統(tǒng)比較操作系統(tǒng)比較”網(wǎng)頁的顯示效果如網(wǎng)頁的顯示效果如圖圖3-1-1所示。該網(wǎng)頁被分割成兩個部分，所示。該網(wǎng)頁被分割成兩個部分，網(wǎng)頁的左半部分顯示出網(wǎng)頁的標題和各個網(wǎng)頁的左半部分顯示出網(wǎng)頁的標題和各個頁面的鏈接，單擊其中一個鏈接，即可在頁面的鏈接，單擊其中一個鏈接，即可在網(wǎng)頁的右半部分顯示出相應(yīng)的內(nèi)容，如圖網(wǎng)頁的

2、右半部分顯示出相應(yīng)的內(nèi)容，如圖3-1-2所示。通過本實例，介紹創(chuàng)建框架與所示。通過本實例，介紹創(chuàng)建框架與編輯框架，以及在框架內(nèi)插入編輯框架，以及在框架內(nèi)插入HTML文件文件內(nèi)容的方法。內(nèi)容的方法。圖圖3-1-1 “操作系統(tǒng)比較操作系統(tǒng)比較”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果圖圖3-1-2 單擊不同鏈接后網(wǎng)頁的顯示效果單擊不同鏈接后網(wǎng)頁的顯示效果 框架就是把一個網(wǎng)頁頁面分成幾個單框架就是把一個網(wǎng)頁頁面分成幾個單獨的區(qū)域（即窗口），每個區(qū)域就像一個獨的區(qū)域（即窗口），每個區(qū)域就像一個獨立的網(wǎng)頁，可以是一個獨立的獨立的網(wǎng)頁，可以是一個獨立的HTML文文件。件。 因此，框架可以實現(xiàn)在一個網(wǎng)頁內(nèi)顯因此，框架可

3、以實現(xiàn)在一個網(wǎng)頁內(nèi)顯示多個示多個HTML文件的效果。文件的效果。 對于一個有對于一個有n個區(qū)域的框架網(wǎng)頁來說，個區(qū)域的框架網(wǎng)頁來說，每個區(qū)域有一個每個區(qū)域有一個HTML文件，整個框架結(jié)文件，整個框架結(jié)構(gòu)也是一個構(gòu)也是一個HTML文件，因此該框架網(wǎng)頁文件，因此該框架網(wǎng)頁是一個是一個HTML文件集，它有文件集，它有n+1個個HTML文件。文件。 3.1.2 操作過程操作過程1創(chuàng)建框架與編輯框架創(chuàng)建框架與編輯框架（1）創(chuàng)建框架）創(chuàng)建框架方法方法1：單擊：單擊“文件文件”“新建新建”菜單命令，菜單命令，打開打開“新建文檔新建文檔”對話框，如圖對話框，如圖3-1-4所示。所示。 單擊該對話框左邊單擊該對

4、話框左邊“類別類別”欄中的欄中的“框架框架集集”選項，再選中該對話框右邊選項，再選中該對話框右邊“框架集框架集”欄內(nèi)的一種框架選項。然后單擊欄內(nèi)的一種框架選項。然后單擊“創(chuàng)建創(chuàng)建”按鈕，即可創(chuàng)建有框架的網(wǎng)頁。按鈕，即可創(chuàng)建有框架的網(wǎng)頁。圖圖3-1-4 在頁面內(nèi)創(chuàng)建上下兩個框架在頁面內(nèi)創(chuàng)建上下兩個框架 方法方法2：單擊：單擊“插入插入”（布局）面板的（布局）面板的“框架框架”快捷菜單中的一個按鈕，即可在快捷菜單中的一個按鈕，即可在頁面內(nèi)設(shè)置出相應(yīng)的框架，如圖頁面內(nèi)設(shè)置出相應(yīng)的框架，如圖3-1-5所示。所示。 圖圖3-1-5 “框架框架”快捷菜單快捷菜單方法方法3：利用：利用“修改修改”“框架框架

5、頁頁”“”菜單命令或利用菜單命令或利用“插插入入”“HTML”“框架框架”“”菜單菜單命令，也可以創(chuàng)建框架。命令，也可以創(chuàng)建框架。 建立了框架后，要增加框架的個數(shù)，建立了框架后，要增加框架的個數(shù)，可采用如下方法：將光標移到框架內(nèi)，再可采用如下方法：將光標移到框架內(nèi)，再單擊單擊“查看查看”“可視化助理可視化助理”“框架邊框架邊框框”菜單選項，使該菜單選項左邊有菜單選項，使該菜單選項左邊有 。然后將鼠標指針移到框架的邊緣處，當鼠然后將鼠標指針移到框架的邊緣處，當鼠標指針為標指針為“”或或“ ”形狀時，向鼠標指針形狀時，向鼠標指針箭頭指示的方向拖曳鼠標，即可在水平或箭頭指示的方向拖曳鼠標，即可在水平

6、或垂直方向增加一個框架。垂直方向增加一個框架。（2）簡單編輯框架）簡單編輯框架調(diào)整框架的大?。河檬髽送弦房蚣芫€，調(diào)整框架的大?。河檬髽送弦房蚣芫€，即可調(diào)整框架的大小。即可調(diào)整框架的大小。刪除框架：用鼠標拖曳框架線，拖曳到刪除框架：用鼠標拖曳框架線，拖曳到另一條框架線或邊框處，即可刪除該框架。另一條框架線或邊框處，即可刪除該框架。（3）設(shè)置框架集屬性）設(shè)置框架集屬性 單擊框架的外邊框后，可將單擊框架的外邊框后，可將“屬性屬性”欄變?yōu)榭蚣芗瘷谧優(yōu)榭蚣芗皩傩詫傩浴睓?，如圖欄，如圖3-1-6所示。所示。改變總框架屬性需要通過框架集改變總框架屬性需要通過框架集“屬性屬性”欄來完成。欄來完成。圖圖3-1

7、-6 框架集框架集“屬性屬性”欄欄 “邊框邊框”下拉列表框：用來確定是否要邊下拉列表框：用來確定是否要邊框。選擇框。選擇“是是”選項是保留邊框；選擇選項是保留邊框；選擇“否否”選項是不保留邊框；選擇選項是不保留邊框；選擇“默認默認”選項，表示采用默認狀態(tài)。通常是要保留選項，表示采用默認狀態(tài)。通常是要保留邊框。邊框?！斑吙蝾伾吙蝾伾睓冢河脕泶_定邊框的顏色。欄：用來確定邊框的顏色。單擊該按鈕，可彈出顏色板，利用它可確單擊該按鈕，可彈出顏色板，利用它可確定邊框的顏色。也可在文本框中直接輸入定邊框的顏色。也可在文本框中直接輸入顏色數(shù)據(jù)。顏色數(shù)據(jù)。 “邊框?qū)挾冗吙驅(qū)挾取蔽谋究颍河脕磔斎脒吙虻膶捨谋究?/p>

8、：用來輸入邊框的寬度數(shù)值，其單位是像素。如果在該文本框度數(shù)值，其單位是像素。如果在該文本框內(nèi)輸入內(nèi)輸入0，則沒有邊框。如果，則沒有邊框。如果“查查看看”“可視化助理可視化助理”“框架邊框框架邊框”菜單菜單命令被選中，則網(wǎng)頁文檔窗口內(nèi)會顯示輔命令被選中，則網(wǎng)頁文檔窗口內(nèi)會顯示輔助的邊框線（不會在瀏覽器中顯示）。助的邊框線（不會在瀏覽器中顯示）。 “值值”文本框：用來確定網(wǎng)頁左邊分欄的文本框：用來確定網(wǎng)頁左邊分欄的寬度或上邊分欄的高度。寬度或上邊分欄的高度。 “單位單位”下拉列表框：用來選擇下拉列表框：用來選擇“值值”文文本框內(nèi)數(shù)據(jù)的單位，單位有像素等。本框內(nèi)數(shù)據(jù)的單位，單位有像素等。（4）設(shè)置分

9、欄框架屬性）設(shè)置分欄框架屬性 按住按住Alt鍵，單擊分欄框架的內(nèi)部后，鍵，單擊分欄框架的內(nèi)部后，可使可使“屬性屬性”欄變?yōu)榉謾诳蚣軝谧優(yōu)榉謾诳蚣堋皩傩詫傩浴睓冢瑱?，如圖如圖3-1-7所示。分欄框架的框架所示。分欄框架的框架“屬性屬性”欄中各選項的作用如下。欄中各選項的作用如下。圖圖3-1-7 分欄框架分欄框架“屬性屬性”欄欄“框架名稱框架名稱”文本框：用來輸入分欄框架文本框：用來輸入分欄框架的名字。的名字。 “源文件源文件”文本框：用來顯示該分欄內(nèi)文本框：用來顯示該分欄內(nèi)HTML文件的路徑和文件的名字。文件的路徑和文件的名字。 “滾動滾動”下拉列表框：用來選擇分欄是否下拉列表框：用來選擇分欄是

10、否要滾動條。選擇要滾動條。選擇“是是”選項，表示要滾動選項，表示要滾動條；選擇條；選擇“否否”選項，表示不要滾動條；選項，表示不要滾動條；選擇選擇“自動自動”選項，表示根據(jù)分欄內(nèi)是否選項，表示根據(jù)分欄內(nèi)是否能夠完全顯示出其中的內(nèi)容來自動選擇是能夠完全顯示出其中的內(nèi)容來自動選擇是否要滾動條；選擇否要滾動條；選擇“默認默認”選項，表示采選項，表示采用默認狀態(tài)。用默認狀態(tài)。“不能調(diào)整大小不能調(diào)整大小”復(fù)選框：如果選中該復(fù)復(fù)選框：如果選中該復(fù)選框，則不能用鼠標拖曳框架的邊框線，選框，則不能用鼠標拖曳框架的邊框線，調(diào)整分欄大??；如果沒有選中該復(fù)選框，調(diào)整分欄大?。蝗绻麤]有選中該復(fù)選框，則可以用鼠標拖曳框

11、架的邊框線，調(diào)整分則可以用鼠標拖曳框架的邊框線，調(diào)整分欄大小。欄大小。 “邊框邊框”下拉列表框：用來確定是否要邊下拉列表框：用來確定是否要邊框。當此處的設(shè)置與總框架框。當此處的設(shè)置與總框架“屬性屬性”欄的欄的設(shè)置矛盾時，以此處設(shè)置為準。設(shè)置矛盾時，以此處設(shè)置為準。（1）單擊網(wǎng)頁框架的某一個區(qū)域內(nèi)部，）單擊網(wǎng)頁框架的某一個區(qū)域內(nèi)部，使光標移到該框架內(nèi)。使光標移到該框架內(nèi)。（2）然后可以像在沒有框架的網(wǎng)頁頁）然后可以像在沒有框架的網(wǎng)頁頁面內(nèi)輸入文字和導入對象那樣，在選面內(nèi)輸入文字和導入對象那樣，在選中的框架區(qū)域內(nèi)輸入文字和導入對象。中的框架區(qū)域內(nèi)輸入文字和導入對象。也可以單擊也可以單擊“文件文件”

12、“在框架中打開在框架中打開”菜單命令，彈出菜單命令，彈出“選擇選擇HTML文件文件”對話框。利用它可將外部的對話框。利用它可將外部的HTML文文件加載到選定的框架區(qū)域內(nèi)。件加載到選定的框架區(qū)域內(nèi)。3.2.1 學習目標學習目標 “主流電腦配置單主流電腦配置單”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果如圖如圖3-2-1所示。由于電腦的配置單有很強所示。由于電腦的配置單有很強的條理性，所以在該網(wǎng)頁中使用表格對網(wǎng)的條理性，所以在該網(wǎng)頁中使用表格對網(wǎng)頁中的數(shù)據(jù)進行排版。頁中的數(shù)據(jù)進行排版。圖圖3-2-1 “主流電腦配置單主流電腦配置單”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果 表格比較適合顯示結(jié)構(gòu)性比較強的內(nèi)表格比較適合顯示結(jié)

13、構(gòu)性比較強的內(nèi)容，如值班表、課程表和考試安排表等。容，如值班表、課程表和考試安排表等。表格也是網(wǎng)頁中經(jīng)常使用的一個元件。表格也是網(wǎng)頁中經(jīng)常使用的一個元件。3.2.2 操作過程操作過程1表格的基本操作表格的基本操作 將光標移到需要插入表格的位置，單擊將光標移到需要插入表格的位置，單擊“插入插入”（常用）面板內(nèi)的（常用）面板內(nèi)的“表格表格”按按鈕鈕 ，彈出，彈出“表格表格”對話框，如圖對話框，如圖3-2-2所所示。示。（1）“表格表格”對話框內(nèi)各選項的作對話框內(nèi)各選項的作用用 “行數(shù)行數(shù)”和和“列數(shù)列數(shù)”文本框：輸入表格的文本框：輸入表格的行數(shù)和列數(shù)。行數(shù)和列數(shù)。 “表格寬度表格寬度”文本框：輸入

14、表格的寬度值，文本框：輸入表格的寬度值，其單位為像素或百分數(shù)。如果選擇其單位為像素或百分數(shù)。如果選擇“百分百分比比”，則表示表格占頁面或它的母體容量，則表示表格占頁面或它的母體容量寬度的百分比。寬度的百分比。 “邊框粗細邊框粗細”文本框：輸入表格邊框的寬文本框：輸入表格邊框的寬度數(shù)值，其單位為像素。當它的值為度數(shù)值，其單位為像素。當它的值為0時，時，表示沒有表格線。表示沒有表格線。 “單元格邊距單元格邊距”文本框：輸入的數(shù)值表文本框：輸入的數(shù)值表示單元格之間兩個相鄰邊框線（左與右、示單元格之間兩個相鄰邊框線（左與右、上和下邊框線）間的距離。上和下邊框線）間的距離。 “單元格間距單元格間距”文本

15、框：輸入單元格內(nèi)的文本框：輸入單元格內(nèi)的內(nèi)容與單元格邊框間的空白數(shù)值，其單位內(nèi)容與單元格邊框間的空白數(shù)值，其單位為像素。這種空白存在于單元格內(nèi)容的四為像素。這種空白存在于單元格內(nèi)容的四周。周。 “頁眉頁眉”欄：用來設(shè)置表格的頁眉單元格。欄：用來設(shè)置表格的頁眉單元格。被設(shè)置為頁眉的單元格，其中的字體將被被設(shè)置為頁眉的單元格，其中的字體將被設(shè)置成居中和黑體格式。設(shè)置成居中和黑體格式。 “輔助功能輔助功能”欄：欄：“輔助功能輔助功能”欄中各選欄中各選項的作用如下。項的作用如下?！皹祟}標題”文本框：設(shè)置表格的標題。文本框：設(shè)置表格的標題。 “對齊標題對齊標題”列表框：設(shè)置標題與表格的列表框：設(shè)置標題與

16、表格的位置關(guān)系，默認為表格的頂部。位置關(guān)系，默認為表格的頂部。 “摘要摘要”文本框：設(shè)置表格的摘要。文本框：設(shè)置表格的摘要。 通過上述設(shè)置后，單擊通過上述設(shè)置后，單擊“確定確定”按鈕，按鈕，即可插入符合要求的表格，如圖即可插入符合要求的表格，如圖3-2-3所示。所示。圖圖3-2-3 網(wǎng)頁中的表格網(wǎng)頁中的表格（2）調(diào)整表格大?。┱{(diào)整表格大小調(diào)整整個表格的大小：單擊表格的邊框，調(diào)整整個表格的大小：單擊表格的邊框，選中該表格，此時表格右邊、下邊和右下選中該表格，此時表格右邊、下邊和右下角會出現(xiàn)角會出現(xiàn)3個方形的黑色控制柄。再用鼠標個方形的黑色控制柄。再用鼠標拖曳控制柄，即可調(diào)整整個表格的大小。拖曳控

17、制柄，即可調(diào)整整個表格的大小。調(diào)整表格中行或列的大?。簩⑹髽酥羔樥{(diào)整表格中行或列的大小：將鼠標指針移到表格線處，當鼠標指針變?yōu)殡p箭頭橫移到表格線處，當鼠標指針變?yōu)殡p箭頭橫線或雙箭頭豎線時拖曳鼠標，即可調(diào)整表線或雙箭頭豎線時拖曳鼠標，即可調(diào)整表格線的位置，從而調(diào)整表格行或列的大小。格線的位置，從而調(diào)整表格行或列的大小。（3）表格和單元格標簽）表格和單元格標簽表格標簽：選中表格后，在表格的下面表格標簽：選中表格后，在表格的下面用綠色顯示出了表格的寬度，如圖用綠色顯示出了表格的寬度，如圖3-2-3所所示。單擊下邊的三角按鈕，可以彈出示。單擊下邊的三角按鈕，可以彈出“表表格格”快捷菜單。利用快捷菜單。

18、利用“表格表格”快捷菜單可快捷菜單可以進行選擇表格、清除表格列的寬度、左以進行選擇表格、清除表格列的寬度、左側(cè)插入列和右側(cè)插入列等操作。側(cè)插入列和右側(cè)插入列等操作。單元格標簽：選中表格后，在表格標簽單元格標簽：選中表格后，在表格標簽的下面顯示出了每一列單元格的標簽，如的下面顯示出了每一列單元格的標簽，如圖圖3-2-3所示。單擊任意一個下三角按鈕，所示。單擊任意一個下三角按鈕，可以彈出可以彈出“單元格單元格”快捷菜單，操作方法快捷菜單，操作方法和和“表格表格”快捷菜單基本相同?？旖莶藛位鞠嗤?。（4）選擇表格）選擇表格選擇整個表格：單擊表格的外邊框，可選擇整個表格：單擊表格的外邊框，可選中整個表

19、格，此時表格右邊、下邊和右選中整個表格，此時表格右邊、下邊和右下角會出現(xiàn)下角會出現(xiàn)3個方形黑色控制柄。個方形黑色控制柄。選擇多個表格單元格：按住選擇多個表格單元格：按住Ctrl鍵，同時鍵，同時依次單擊所有要選擇的表格單元格。依次單擊所有要選擇的表格單元格。選擇表格的一行或一列單元格：將鼠標選擇表格的一行或一列單元格：將鼠標移到一行的最左邊或移到一列的最上邊，移到一行的最左邊或移到一列的最上邊，當鼠標指針呈黑色箭頭時單擊，即可選中當鼠標指針呈黑色箭頭時單擊，即可選中一行或一列。一行或一列。選擇表格的多行或多列單元格：按住選擇表格的多行或多列單元格：按住Ctrl鍵，將鼠標依次移到要選擇的各行或各列

20、，鍵，將鼠標依次移到要選擇的各行或各列，當鼠標指針呈黑色箭頭時單擊，即可選中當鼠標指針呈黑色箭頭時單擊，即可選中多行或多列。還可以將鼠標移到要選擇的多行或多列。還可以將鼠標移到要選擇的多行或多列的起始處，當鼠標指針呈黑色多行或多列的起始處，當鼠標指針呈黑色箭頭時，拖曳鼠標也可選擇多行或多列單箭頭時，拖曳鼠標也可選擇多行或多列單元格。元格。 單擊表格的外邊框，選中整個表格，單擊表格的外邊框，選中整個表格，此時表格的此時表格的“屬性屬性”欄如圖欄如圖3-2-4所示。表所示。表格格“屬性屬性”欄內(nèi)各選項的作用如下。欄內(nèi)各選項的作用如下。圖圖3-2-4 表格的表格的“屬性屬性”欄欄“表格表格Id”下拉

21、列表框：用來輸入表格的名下拉列表框：用來輸入表格的名字。字。 “行行”和和“列列”文本框：用來輸入表格的文本框：用來輸入表格的行數(shù)與列數(shù)。行數(shù)與列數(shù)。 “寬寬”和和“高高”文本框：用來輸入表格的文本框：用來輸入表格的寬度與高度值。它們的單位可利用其右邊寬度與高度值。它們的單位可利用其右邊的下拉列表框來選擇，其中的選項有的下拉列表框來選擇，其中的選項有“%”（百分數(shù)）和（百分數(shù)）和“像素像素”兩種。兩種。“填充填充”文本框：輸入單元格內(nèi)的內(nèi)容與文本框：輸入單元格內(nèi)的內(nèi)容與單元格邊框間的空白數(shù)，單位為像素。單元格邊框間的空白數(shù)，單位為像素。 “間距間距”文本框：輸入單元格之間兩個相文本框：輸入單元

22、格之間兩個相鄰邊框線間的距離。鄰邊框線間的距離。 “對齊對齊”下拉列表框：該下拉列表框內(nèi)有下拉列表框：該下拉列表框內(nèi)有“默認默認”、“左對齊左對齊”、“居中對齊居中對齊”和和“右對齊右對齊”四個選項。四個選項?！斑吙蜻吙颉蔽谋究颍狠斎氡砀襁吙?qū)挾龋瑔挝谋究颍狠斎氡砀襁吙驅(qū)挾?，單位為像素點。位為像素點。 “背景顏色背景顏色”按鈕與文本框：用來設(shè)置表按鈕與文本框：用來設(shè)置表格的背景色。格的背景色。 “背景圖像背景圖像”文本框與文件夾按鈕：單擊文本框與文件夾按鈕：單擊文件夾按鈕，可以彈出文件夾按鈕，可以彈出“選擇圖像源文件選擇圖像源文件”對話框，利用它可以給表格添加背景圖像。對話框，利用它可以給表格

23、添加背景圖像?！斑吙蝾伾吙蝾伾本匦伟粹o與文本框：用來設(shè)矩形按鈕與文本框：用來設(shè)置表格的邊框線顏色。置表格的邊框線顏色。6個按鈕：個按鈕： 按鈕用來清除行高，按鈕用按鈕用來清除行高，按鈕用來清除列寬，來清除列寬， 按鈕用來將表格寬度的單按鈕用來將表格寬度的單位轉(zhuǎn)換為像素，位轉(zhuǎn)換為像素， 按鈕用來將表格寬度的按鈕用來將表格寬度的單位改為百分比，單位改為百分比， 按鈕用來將表格高度按鈕用來將表格高度的單位轉(zhuǎn)換為像素，的單位轉(zhuǎn)換為像素， 按鈕用來將表格寬按鈕用來將表格寬度的單位改為百分比。度的單位改為百分比?！邦愵悺毕吕斜砜颍河脕碓O(shè)置表格的樣式。下拉列表框：用來設(shè)置表格的樣式。3設(shè)置表格單元格的

24、屬性設(shè)置表格單元格的屬性 按住按住Ctrl鍵，單擊表格中的單元格，鍵，單擊表格中的單元格，選中幾個單元格。此時選中幾個單元格。此時“屬性屬性”欄變?yōu)楸頇谧優(yōu)楸砀駟卧窀駟卧瘛皩傩詫傩浴睓?，如圖欄，如圖3-2-5所示。所示。圖圖3-2-5 表格單元格表格單元格“屬性屬性”欄欄 在表格單元格在表格單元格“屬性屬性”欄中，上半部欄中，上半部分用來設(shè)置單元格內(nèi)文本的屬性，它與文分用來設(shè)置單元格內(nèi)文本的屬性，它與文本本“屬性屬性”欄的選項基本一樣。下半部分欄的選項基本一樣。下半部分用來設(shè)置單元格的屬性，各選項的作用如用來設(shè)置單元格的屬性，各選項的作用如下。下。 “合并所選單元格合并所選單元格”按鈕按鈕

25、 ：選中要合并：選中要合并的單元格，再單擊的單元格，再單擊 按鈕，即可將選中的按鈕，即可將選中的單元格合并（將圖單元格合并（將圖3-2-3所示表格左上角的所示表格左上角的2行行3列單元格合并），其效果如圖列單元格合并），其效果如圖3-2-6所所示。示。圖圖3-2-6 合并單元格后的效果合并單元格后的效果 “拆分單元格拆分單元格”按鈕按鈕 ：選中一個單元格，：選中一個單元格，再單擊再單擊 按鈕，彈出按鈕，彈出“拆分單元格拆分單元格”對對話框，如圖話框，如圖3-2-7所示。選中所示。選中“行行”單選項，單選項，表示要拆分為幾行；單擊選中表示要拆分為幾行；單擊選中“列列”單選單選項，表示要拆分為幾列

26、。在項，表示要拆分為幾列。在“列數(shù)列數(shù)”數(shù)字數(shù)字框內(nèi)選擇行或列的個數(shù)。再單擊框內(nèi)選擇行或列的個數(shù)。再單擊“確定確定”按鈕即可。將圖按鈕即可。將圖3-2-6所示的表格中左上角所示的表格中左上角的單元格拆分為的單元格拆分為2列，其效果如圖列，其效果如圖3-2-8所所示。示。 圖圖3-2-7 “拆分單元格拆分單元格”對話框?qū)υ捒?圖圖3-2-8 拆分單元格拆分單元格 “水平水平”和和“垂直垂直”下拉列表框：用來選擇下拉列表框：用來選擇水平對齊方式和垂直對齊方式。水平對齊方式和垂直對齊方式。 “寬寬”和和“高高”文本框：用來設(shè)置單元格文本框：用來設(shè)置單元格的寬度與高度。的寬度與高度。 “不換行不換行”

27、復(fù)選框：如果選中該復(fù)選框，復(fù)選框：如果選中該復(fù)選框，則當單元格內(nèi)的文字超過單元格的寬度時，則當單元格內(nèi)的文字超過單元格的寬度時，不換行，自動將單元格的寬度加大到剛好可不換行，自動將單元格的寬度加大到剛好可以放下文字；沒選中該復(fù)選框，則當單元格以放下文字；沒選中該復(fù)選框，則當單元格內(nèi)的文字超過單元格的寬度時，自動換行。內(nèi)的文字超過單元格的寬度時，自動換行?！皹祟}標題”復(fù)選框：如果選中該復(fù)選框，則復(fù)選框：如果選中該復(fù)選框，則單元格中的文字以標題的格式顯示（粗體、單元格中的文字以標題的格式顯示（粗體、居中）；如果沒選中該復(fù)選框，則單元格居中）；如果沒選中該復(fù)選框，則單元格中的文字以正文的形式顯示。中

28、的文字以正文的形式顯示。 “背景背景”按鈕與文本框：單擊上邊的按鈕與文本框：單擊上邊的“背背景景”文件夾圖標，可以彈出文件夾圖標，可以彈出“選擇圖像源選擇圖像源文件文件”對話框，利用該對話框可以給表格對話框，利用該對話框可以給表格單元格添加背景圖像。下邊的單元格添加背景圖像。下邊的“背景顏色背景顏色”矩形按鈕與文本框用來設(shè)置表格單元格的矩形按鈕與文本框用來設(shè)置表格單元格的背景色。當該文本框為空時，其設(shè)置與頁背景色。當該文本框為空時，其設(shè)置與頁面表格的面表格的“背景背景”設(shè)置一樣。設(shè)置一樣。 “邊框邊框”按鈕與文本框：用來設(shè)置表格單按鈕與文本框：用來設(shè)置表格單元格的雙線條邊框線的顏色。當該文本框

29、元格的雙線條邊框線的顏色。當該文本框為空的時候，其設(shè)置與表格的為空的時候，其設(shè)置與表格的“邊框邊框”顏顏色一樣。色一樣。3.3.1 學習目標學習目標 “CPU進化史進化史”網(wǎng)頁的顯示效果如圖網(wǎng)頁的顯示效果如圖3-3-1所示。該網(wǎng)頁是使用層對網(wǎng)頁中的內(nèi)所示。該網(wǎng)頁是使用層對網(wǎng)頁中的內(nèi)容進行布局的。層是一種可以插入各種網(wǎng)容進行布局的。層是一種可以插入各種網(wǎng)頁對象，可以自由定位、精確定位和容易頁對象，可以自由定位、精確定位和容易控制的容器，它實際上就是一個網(wǎng)頁子頁控制的容器，它實際上就是一個網(wǎng)頁子頁面。面。 在層中，可以嵌套其他的層，層可以在層中，可以嵌套其他的層，層可以重疊，可以控制對象的位置和內(nèi)

30、容，從而重疊，可以控制對象的位置和內(nèi)容，從而實現(xiàn)網(wǎng)頁對象的重疊和立體化等特效，還實現(xiàn)網(wǎng)頁對象的重疊和立體化等特效，還可以實現(xiàn)網(wǎng)頁的動畫和交互?？梢詫崿F(xiàn)網(wǎng)頁的動畫和交互。圖圖3-3-1 “CPU進化史進化史”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果 目前，目前，WWW網(wǎng)頁已經(jīng)采用了動態(tài)超網(wǎng)頁已經(jīng)采用了動態(tài)超文本標記語言文本標記語言DHTML技術(shù)，它可以實現(xiàn)技術(shù)，它可以實現(xiàn)網(wǎng)頁的多層化、立體化和動態(tài)化等特效，網(wǎng)頁的多層化、立體化和動態(tài)化等特效，使網(wǎng)頁更加生動活潑。使網(wǎng)頁更加生動活潑。Internet Explorer 4.0及以上的版本使用層的實現(xiàn)方法是及以上的版本使用層的實現(xiàn)方法是CSS（層疊樣式表）的層，

31、它使用標記（層疊樣式表）的層，它使用標記和和來創(chuàng)建層和定位層，這是由萬來創(chuàng)建層和定位層，這是由萬維網(wǎng)聯(lián)盟指定的。維網(wǎng)聯(lián)盟指定的。 Netscape Navigator 4.0及以上的版本及以上的版本使用層的實現(xiàn)方法是使用層的實現(xiàn)方法是Netscape的層，它使的層，它使用標記用標記和和來創(chuàng)建層和來創(chuàng)建層和定位層，這是由定位層，這是由Netscape公司指定的。公司指定的。3.3.2 操作過程操作過程 1設(shè)置層的默認屬性和創(chuàng)建層設(shè)置層的默認屬性和創(chuàng)建層（1）設(shè)置層的默認屬性）設(shè)置層的默認屬性 單擊單擊“編輯編輯”“首選參數(shù)首選參數(shù)”菜單命令，菜單命令，彈出彈出“首選參數(shù)首選參數(shù)”對話框，再選中該

32、對話對話框，再選中該對話框內(nèi)框內(nèi)“分類分類”列表框中的列表框中的“層層”列表項，列表項，這時這時“首選參數(shù)首選參數(shù)”對話框如圖對話框如圖3-3-2所示。所示?！笆走x參數(shù)首選參數(shù)”對話框內(nèi)各個選項的作用如對話框內(nèi)各個選項的作用如下。下。圖圖3-3-2 “首選參數(shù)首選參數(shù)”對話框?qū)υ捒?“顯示顯示”下拉列表框：用來設(shè)置默認狀態(tài)下拉列表框：用來設(shè)置默認狀態(tài)下層的可視度?？梢赃x擇下層的可視度。可以選擇“default”（瀏覽（瀏覽器的默認狀態(tài)）、器的默認狀態(tài)）、“inherit”（繼承母體的（繼承母體的可視度）、可視度）、“visible”（可視）和（可視）和“hidden”（隱藏）。（隱藏）。 “寬

33、寬”和和“高高”文本框：用來設(shè)置默認狀文本框：用來設(shè)置默認狀態(tài)下插入層的寬度和高度，單位為像素。態(tài)下插入層的寬度和高度，單位為像素。 “背景顏色背景顏色”按鈕與文本框：用來設(shè)置默按鈕與文本框：用來設(shè)置默認狀態(tài)下插入層的背景顏色，默認值為透認狀態(tài)下插入層的背景顏色，默認值為透明。單擊明。單擊 按鈕可以彈出顏色板，利用按鈕可以彈出顏色板，利用它來選定顏色，也可以在文本框內(nèi)輸入顏它來選定顏色，也可以在文本框內(nèi)輸入顏色的代碼。色的代碼。“背景圖像背景圖像”文本框與文本框與“瀏覽瀏覽”按鈕：用按鈕：用來設(shè)置默認狀態(tài)下插入層的背景圖像。單來設(shè)置默認狀態(tài)下插入層的背景圖像。單擊擊“瀏覽瀏覽”按鈕，可以彈出按

34、鈕，可以彈出“選擇圖像源選擇圖像源文件文件”對話框，利用它可以設(shè)定層的背景對話框，利用它可以設(shè)定層的背景圖像。圖像。 “嵌套嵌套”復(fù)選框：選擇它后，可以在將層復(fù)選框：選擇它后，可以在將層拖曳到其他層時實現(xiàn)嵌套。拖曳到其他層時實現(xiàn)嵌套。 “Netscape 4兼容性兼容性”復(fù)選框：選擇它后，復(fù)選框：選擇它后，Dreamweaver會向會向HTML文件的文件的標記中加入標記中加入JavaScript函數(shù)，用來解決在函數(shù)，用來解決在Netscape 4.0瀏覽器中添加嵌入瀏覽器中添加嵌入CSS層時可層時可自動調(diào)整層的尺寸，避免異常問題的產(chǎn)生。自動調(diào)整層的尺寸，避免異常問題的產(chǎn)生。（2）在頁面中創(chuàng)建層

35、）在頁面中創(chuàng)建層單擊單擊“插入插入”（布局）面板中的（布局）面板中的“描繪描繪層層”按鈕按鈕 ，將鼠標指針移到文檔窗口之，將鼠標指針移到文檔窗口之中，這時鼠標指針變?yōu)槭志€狀態(tài)。再在中，這時鼠標指針變?yōu)槭志€狀態(tài)。再在頁面內(nèi)拖曳鼠標來創(chuàng)建層，如圖頁面內(nèi)拖曳鼠標來創(chuàng)建層，如圖3-3-3所示。所示。用鼠標將用鼠標將“描繪層描繪層”按鈕按鈕 拖曳到網(wǎng)頁拖曳到網(wǎng)頁頁面中，也可在頁面光標處插入一個默認頁面中，也可在頁面光標處插入一個默認屬性的層。屬性的層。圖圖3-3-3 在頁面內(nèi)創(chuàng)建一個層在頁面內(nèi)創(chuàng)建一個層將光標移到要插入層的位置，單擊將光標移到要插入層的位置，單擊“插插入入”“布局對象布局對象”“層層

36、” （1）選定層）選定層 在改變層的屬性前應(yīng)選定層，選中的在改變層的屬性前應(yīng)選定層，選中的層會在層矩形的左上角產(chǎn)生一個雙矩形形層會在層矩形的左上角產(chǎn)生一個雙矩形形狀控制柄圖標狀控制柄圖標 ，同時在層矩形的四周產(chǎn)，同時在層矩形的四周產(chǎn)生生8個方形控制柄。選定一個層的情況如圖個方形控制柄。選定一個層的情況如圖3-3-4所示。選定層的方法可以有多種，操所示。選定層的方法可以有多種，操作方法如下。作方法如下。 圖圖3-3-4 選定一個層選定一個層 單擊層的邊框線，即可選定該層。單擊層的邊框線，即可選定該層。單擊層的內(nèi)部，會在層矩形的左上角產(chǎn)單擊層的內(nèi)部，會在層矩形的左上角產(chǎn)生一個雙矩形形狀控制柄圖標生

37、一個雙矩形形狀控制柄圖標 ，單擊該，單擊該控制柄圖標控制柄圖標 ，即可選定與它相對應(yīng)的層。，即可選定與它相對應(yīng)的層。按住按住Shift鍵，分別單擊要選擇的各個層鍵，分別單擊要選擇的各個層的內(nèi)部或邊框線，可以選中多個層。的內(nèi)部或邊框線，可以選中多個層。 如果選定的是多個層，則只有一個層如果選定的是多個層，則只有一個層的方形控制柄是黑色實心的，其他選定的的方形控制柄是黑色實心的，其他選定的層的方形控制柄是空心的，如圖層的方形控制柄是空心的，如圖3-3-5所示。所示。 圖圖3-3-5 選定多個層選定多個層（2）調(diào)整一個層或多個層的位置）調(diào)整一個層或多個層的位置用鼠標拖曳的方法：選中要調(diào)整大小的用鼠標

38、拖曳的方法：選中要調(diào)整大小的層，將鼠標移到層的方形控制柄處或雙矩層，將鼠標移到層的方形控制柄處或雙矩形形狀控制柄圖標形形狀控制柄圖標 處，當鼠標指針變?yōu)樘?，當鼠標指針變?yōu)樗南蚣^狀時拖曳鼠標，即可調(diào)整層的位四向箭頭狀時拖曳鼠標，即可調(diào)整層的位置。置。用按鍵的方法：選中層后，每按一次用按鍵的方法：選中層后，每按一次“”或或“”鍵，可使層向右或向左移動一個像鍵，可使層向右或向左移動一個像素；每按一次素；每按一次“”或或“”鍵，可使層向下鍵，可使層向下或向上移動一個像素?；蛳蛏弦苿右粋€像素。 如果按住如果按住Shift鍵的同按光標移動鍵，鍵的同按光標移動鍵，也可調(diào)整層的位置，每次移動也可調(diào)整層的位置

39、，每次移動5個像素。個像素。利用層利用層“屬性屬性”欄進行設(shè)置的方法：選欄進行設(shè)置的方法：選中要調(diào)整大小的層，在其單個層中要調(diào)整大小的層，在其單個層“屬性屬性”欄內(nèi)的欄內(nèi)的“左左”文本框中輸入修改數(shù)值（單文本框中輸入修改數(shù)值（單位是像素），即可調(diào)整層的水平位置；在位是像素），即可調(diào)整層的水平位置；在“上上”文本框內(nèi)輸入修改數(shù)值（單位是像文本框內(nèi)輸入修改數(shù)值（單位是像素），即可調(diào)整層的垂直位置。素），即可調(diào)整層的垂直位置。（3）改變一個層的大小）改變一個層的大小 改變一個層的大小有改變一個層的大小有3種方法，操作方種方法，操作方法如下所述。法如下所述。用鼠標拖曳的方法：選中要調(diào)整大小的用鼠標拖曳

40、的方法：選中要調(diào)整大小的層，將鼠標移到層的方形控制柄處，當鼠層，將鼠標移到層的方形控制柄處，當鼠標指針變?yōu)殡p箭頭狀時拖曳鼠標，即可調(diào)標指針變?yōu)殡p箭頭狀時拖曳鼠標，即可調(diào)整層的大小。整層的大小。選中要調(diào)整大小的層，用按鍵調(diào)整的方選中要調(diào)整大小的層，用按鍵調(diào)整的方法：按住法：按住Ctrl鍵，同時按鍵，同時按“”或或“”鍵，鍵，可使層在水平方向增加或減少一個像素；可使層在水平方向增加或減少一個像素；每按一次每按一次“” 或或“”按鍵，可使層在垂直按鍵，可使層在垂直方向增加或減少一個像素。方向增加或減少一個像素。 按住按住Ctrl+Shift鍵的同時，按光標移動鍵的同時，按光標移動鍵，可每次增加或減少

41、鍵，可每次增加或減少5個像素。個像素。利用層利用層“屬性屬性”欄進行設(shè)置的方法：選欄進行設(shè)置的方法：選中要調(diào)整大小的層，在其中要調(diào)整大小的層，在其“屬性屬性”欄內(nèi)的欄內(nèi)的“寬寬”文本框內(nèi)輸入修改數(shù)值（單位是像文本框內(nèi)輸入修改數(shù)值（單位是像素），即可調(diào)整層的寬度；在素），即可調(diào)整層的寬度；在“高高”文本文本框內(nèi)輸入修改數(shù)值（單位是像素），即可框內(nèi)輸入修改數(shù)值（單位是像素），即可調(diào)整層的高度。調(diào)整層的高度。（4）同時調(diào)整多個層的大?。┩瑫r調(diào)整多個層的大小 同時調(diào)整多個層的大小是使多個層的同時調(diào)整多個層的大小是使多個層的寬度相等或高度相同，其方法如下。寬度相等或高度相同，其方法如下。用菜單命令的方法

42、：選中多個層后，單用菜單命令的方法：選中多個層后，單擊擊“修改修改”“排列順序排列順序”“設(shè)成寬度相設(shè)成寬度相同同”菜單命令，即可使選中的層寬度相等，菜單命令，即可使選中的層寬度相等，其寬度與最后選中的層（它的方形控制柄其寬度與最后選中的層（它的方形控制柄是黑色實心的）的寬度一樣。如果單擊是黑色實心的）的寬度一樣。如果單擊“修改修改”“排列順序排列順序”“設(shè)成高度相同設(shè)成高度相同”菜單命令，即可使選中的層高度相等，其菜單命令，即可使選中的層高度相等，其高度與最后選中的層的高度一樣。高度與最后選中的層的高度一樣。利用層利用層“屬性屬性”欄進行設(shè)置的方法：選欄進行設(shè)置的方法：選中多個層后，其中多個

43、層后，其“屬性屬性”欄變?yōu)槎鄬訖谧優(yōu)槎鄬印皩賹傩孕浴睓?。在其多層欄。在其多層“屬性屬性”欄?nèi)的欄內(nèi)的“寬寬”文本框內(nèi)修改數(shù)值（單位是像素），即可文本框內(nèi)修改數(shù)值（單位是像素），即可調(diào)整多個層的寬度；在調(diào)整多個層的寬度；在“高高”文本框內(nèi)修文本框內(nèi)修改數(shù)值（單位是像素），即可調(diào)整多個層改數(shù)值（單位是像素），即可調(diào)整多個層的高度。的高度。 （5）對齊多個層）對齊多個層用菜單命令的方法：選中多個層后，單用菜單命令的方法：選中多個層后，單擊擊“修改修改”“排列順序排列順序”菜單命令，可彈菜單命令，可彈出它的下一級菜單，如圖出它的下一級菜單，如圖3-3-6所示。單擊所示。單擊其中一個菜單命令，即可獲得相

44、應(yīng)的對齊其中一個菜單命令，即可獲得相應(yīng)的對齊效果。效果。圖圖3-3-6 “對齊對齊”菜單的下一級菜單菜單的下一級菜單 例如，單擊例如，單擊“修改修改”“排列順排列順序序”“右對齊右對齊”菜單命令，即可將選中的菜單命令，即可將選中的多個層以最后選中的層（它的方形控制柄多個層以最后選中的層（它的方形控制柄是黑色實心的）的右邊線為基準對齊，如是黑色實心的）的右邊線為基準對齊，如圖圖3-3-7所示。所示。 圖圖3-3-7 右對齊后的多個層右對齊后的多個層用按鍵的方法：選中多個層后，在按住用按鍵的方法：選中多個層后，在按住Ctrl鍵的同時按光標移動鍵，即可將多個鍵的同時按光標移動鍵，即可將多個層對齊。按

45、層對齊。按“”鍵可右對齊，按鍵可右對齊，按“”鍵鍵可左對齊，按可左對齊，按“”鍵可下對齊，按鍵可下對齊，按“”鍵鍵可上對齊。例如，按可上對齊。例如，按Ctrl+“”鍵，即可將鍵，即可將選中的多個層以最后選中的層的左邊線對選中的多個層以最后選中的層的左邊線對齊。齊。利用層利用層“屬性屬性”欄進行設(shè)置的方法：選欄進行設(shè)置的方法：選中多個層后，在其多層中多個層后，在其多層“屬性屬性”欄內(nèi)的欄內(nèi)的“左左”或或“上上”文本框內(nèi)輸入修改數(shù)值，文本框內(nèi)輸入修改數(shù)值，即可使多個層的左邊線或上邊線以修改的即可使多個層的左邊線或上邊線以修改的數(shù)值對齊。數(shù)值對齊。 利用利用“層層”面板可以對層的可視性、面板可以對層

46、的可視性、嵌套關(guān)系、顯示順序和相互覆蓋等屬性進嵌套關(guān)系、顯示順序和相互覆蓋等屬性進行設(shè)置。單擊行設(shè)置。單擊“窗口窗口”“層層”菜單命令，菜單命令，即可彈出即可彈出“層層”面板，即層監(jiān)視器，如圖面板，即層監(jiān)視器，如圖3-3-8所示。所示。圖圖3-3-8 “層層”面板面板 （1）顯示層的信息與選定層）顯示層的信息與選定層顯示層的信息：圖顯示層的信息：圖3-3-8所示的所示的“層層”面面板中有板中有2個層，個層，“名稱名稱”欄給出了各個層的欄給出了各個層的名字：名字：“Layer1”、“Layer2”，“Z”欄內(nèi)欄內(nèi)的數(shù)據(jù)給出了各層的顯示順序，的數(shù)據(jù)給出了各層的顯示順序，Z值越高，值越高，顯示越靠上

47、。顯示越靠上。Z值可以是負數(shù)，表示在網(wǎng)值可以是負數(shù)，表示在網(wǎng)頁下邊，即隱藏起來，網(wǎng)頁的頁下邊，即隱藏起來，網(wǎng)頁的“Z軸軸”數(shù)數(shù)值為值為0。選定層：單擊選定層：單擊“層層”面板中層的名字，面板中層的名字，即可選中相應(yīng)的層。按住即可選中相應(yīng)的層。按住Shift鍵，同時依鍵，同時依次單擊次單擊“層層”面板中各個層的名字，即可面板中各個層的名字，即可選中多個層。選中多個層。（2）更改層的名稱和是否允許層重）更改層的名稱和是否允許層重疊疊更改層的名稱：雙擊更改層的名稱：雙擊“名稱名稱”欄內(nèi)層的欄內(nèi)層的名字，使此行名字處出現(xiàn)白色的矩形，如名字，使此行名字處出現(xiàn)白色的矩形，如圖圖3-3-9所示。此時即可輸入

48、層的新名字。所示。此時即可輸入層的新名字。圖圖3-3-9 更改層的名稱更改層的名稱設(shè)定是否允許層重疊：如果不選中設(shè)定是否允許層重疊：如果不選中“防防止重疊止重疊”復(fù)選框，則表示允許層之間有重復(fù)選框，則表示允許層之間有重疊關(guān)系；如果選中疊關(guān)系；如果選中“防止重疊防止重疊”復(fù)選框，復(fù)選框，則表示不允許層之間有重疊關(guān)系。則表示不允許層之間有重疊關(guān)系。 （3）改變層之間的嵌套關(guān)系和層的）改變層之間的嵌套關(guān)系和層的顯示順序顯示順序 在層中插入層叫做層的嵌套。在層的在層中插入層叫做層的嵌套。在層的嵌套中，子層的屬性決定于其父層的屬性。嵌套中，子層的屬性決定于其父層的屬性。在選定父層后，子層也會被選定；在移

49、動在選定父層后，子層也會被選定；在移動或復(fù)制父層時，子層也會隨之被移動或復(fù)或復(fù)制父層時，子層也會隨之被移動或復(fù)制。制。改變層之間的嵌套關(guān)系：按住改變層之間的嵌套關(guān)系：按住Ctrl鍵，同鍵，同時用鼠標拖曳選中的層名字（例如時用鼠標拖曳選中的層名字（例如“Layer3”）到另一個層名字上（例如）到另一個層名字上（例如“Layer1”，可稱為目標層），當該層名字，可稱為目標層），當該層名字四周出現(xiàn)矩形框時松開鼠標左鍵，即可使四周出現(xiàn)矩形框時松開鼠標左鍵，即可使選中的層成為目標層的子層。再按住選中的層成為目標層的子層。再按住Ctrl鍵，將鍵，將“Layer2”層拖曳到層拖曳到“Layer3”層之層之上

50、，然后松開鼠標左鍵，此時的上，然后松開鼠標左鍵，此時的“層層”面面板如圖板如圖3-3-10所示。所示。 圖圖3-3-10 改變層之間的嵌套關(guān)系改變層之間的嵌套關(guān)系 由圖由圖3-3-10可以看出，可以看出，“Layer3”層是層是“Layer1”層的子層，層的子層，“Layer2”層是層是“Layer3”層的子層。父層名字的左邊有一層的子層。父層名字的左邊有一個個 圖標，單擊它，可以使它的子層名字圖標，單擊它，可以使它的子層名字收縮起來，收縮起來， 圖標變?yōu)閳D標圖標變?yōu)閳D標 。再單擊圖。再單擊圖標標 ，又可使父層的子層展開顯示，又可使父層的子層展開顯示， 圖圖標變?yōu)閳D標標變?yōu)閳D標 。改變層的顯示

51、順序：單擊要更改顯示順改變層的顯示順序：單擊要更改顯示順序的層的序的層的Z值（例如值（例如“Layer2”），使它周），使它周圍出現(xiàn)矩形框，如圖圍出現(xiàn)矩形框，如圖3-3-11所示，再輸入所示，再輸入新的新的Z值。值。圖圖3-3-11 選中層的選中層的Z值值（4）設(shè)置層的可視性）設(shè)置層的可視性 單擊單擊“層層”面板內(nèi)的面板內(nèi)的 按鈕，使按鈕，使 按鈕列出現(xiàn)許多人眼圖像，如圖按鈕列出現(xiàn)許多人眼圖像，如圖3-3-12所所示。示。 “層層”面板內(nèi)的面板內(nèi)的 按鈕列顯示的按鈕列顯示的 圖像（睜開的人眼圖像）表示此行的層是圖像（睜開的人眼圖像）表示此行的層是可視的（即可見的）。默認狀態(tài)下，所有可視的（即可

52、見的）。默認狀態(tài)下，所有層都是可視的。層都是可視的。圖圖3-3-12 單擊單擊按鈕后的按鈕后的“層層”面板面板 單擊單擊 圖像，可使圖像，可使 圖像消失，圖像消失，再單擊原再單擊原 圖像處，會出現(xiàn)圖像處，會出現(xiàn) 圖像，圖像，表示此行的層是不可視的。如果再單擊表示此行的層是不可視的。如果再單擊 圖像，可使它變?yōu)閳D像，可使它變?yōu)?圖像，表示此行的圖像，表示此行的層變?yōu)榭梢?。層變?yōu)榭梢暋?將將“Layer3”層變?yōu)椴豢梢暫?，層變?yōu)椴豢梢暫螅皩訉印泵姘鍍?nèi)的顯示情況如圖面板內(nèi)的顯示情況如圖3-3-13所示。所示。 圖圖3-3-13 將將“Layer3”層變?yōu)椴豢梢晫幼優(yōu)椴豢梢?層層“屬性屬性”欄有兩種

53、，一種是單層欄有兩種，一種是單層“屬性屬性”欄，這是在選中一個層時出現(xiàn)的；欄，這是在選中一個層時出現(xiàn)的；另一種是多層另一種是多層“屬性屬性”欄，這是在選中多欄，這是在選中多個層時出現(xiàn)的。單層個層時出現(xiàn)的。單層“屬性屬性”欄如圖欄如圖3-3-14所示，多層所示，多層“屬性屬性”欄如圖欄如圖3-3-15所示。所示?？梢钥闯觯鄬涌梢钥闯?，多層“屬性屬性”欄內(nèi)除了基本的欄內(nèi)除了基本的屬性設(shè)置選項外，增加了關(guān)于文本屬性的屬性設(shè)置選項外，增加了關(guān)于文本屬性的設(shè)置選項。設(shè)置選項。“屬性屬性”欄中各個選項的作用欄中各個選項的作用如下。如下。圖圖3-3-14 單層單層“屬性屬性”欄欄圖圖3-3-15 多層多層

54、“屬性屬性”欄欄（1）“層編號層編號”下拉列表框：用來輸下拉列表框：用來輸入層的名稱，它會在入層的名稱，它會在“層層”面板中顯示面板中顯示出來。出來。（2）“左左”和和“上上”文本框：用來確文本框：用來確定層在頁面中的位置，單位為像素。定層在頁面中的位置，單位為像素?！白笞蟆蔽谋究騼?nèi)的數(shù)據(jù)是層左邊線與頁文本框內(nèi)的數(shù)據(jù)是層左邊線與頁面左邊緣的間距，面左邊緣的間距，“上上”文本框內(nèi)的數(shù)文本框內(nèi)的數(shù)據(jù)是層頂邊線與頁面頂邊緣的間距。對據(jù)是層頂邊線與頁面頂邊緣的間距。對于嵌套中的子層，是相對于父層的位置。于嵌套中的子層，是相對于父層的位置。（3）“寬寬”和和“高高”文本框：用來文本框：用來確定層的大小，

55、單位為像素。確定層的大小，單位為像素。（4）“Z軸軸”文本框：用來確定層的文本框：用來確定層的顯示順序，數(shù)值越大，顯示越靠上。顯示順序，數(shù)值越大，顯示越靠上。（5）“顯示顯示”列表框：用來確定層列表框：用來確定層的可視性。它有的可視性。它有“默認默認”、“可見可見”、“隱藏隱藏”和和“與父層的可視性相與父層的可視性相同同”4個選項。個選項。（6）“背景圖像背景圖像”文本框與文本框與 按鈕：按鈕：用來確定層的背景圖案。用來確定層的背景圖案。（7）“背景顏色背景顏色”按鈕與文本框：按鈕與文本框：用來確定層的背景顏色。用來確定層的背景顏色。（8）“標簽標簽”列表框：用來確定標列表框：用來確定標記方式

56、。記方式。（9）“溢出溢出”列表框：它決定了當列表框：它決定了當層中的內(nèi)容超出層的邊界時的處理方層中的內(nèi)容超出層的邊界時的處理方法。它有法。它有“Visible”（可見，即根據(jù)（可見，即根據(jù)層中的內(nèi)容自動調(diào)整層的大小，為系層中的內(nèi)容自動調(diào)整層的大小，為系統(tǒng)默認）、統(tǒng)默認）、“Hidden”（剪切）、（剪切）、“Scroll”（加滾動條）和（加滾動條）和“Auto”（自動，根據(jù)層中的內(nèi)容能否在層中（自動，根據(jù)層中的內(nèi)容能否在層中放得下，決定是否加滾動條）放得下，決定是否加滾動條）4個選個選項。項。 選擇前選擇前3個不同選項后，瀏覽器個不同選項后，瀏覽器中的效果如圖中的效果如圖3-3-16、圖、圖

57、3-3-17和圖和圖3-3-18所示。注意：在網(wǎng)頁頁面編輯窗所示。注意：在網(wǎng)頁頁面編輯窗口內(nèi)顯示的都與圖口內(nèi)顯示的都與圖3-3-16一樣。一樣。圖圖3-3-16 選擇選擇“Visible” 圖圖3-3-17 選擇選擇“Hidden” 圖圖3-3-18 選擇選擇“Scroll” （10）“剪輯剪輯”欄：用來確定層的可欄：用來確定層的可見區(qū)域，即確定層中的內(nèi)容與層邊線見區(qū)域，即確定層中的內(nèi)容與層邊線的間距。的間距?！白笞蟆?、“上上”、“右右”和和“下下”4個文本框分別用來輸入層中個文本框分別用來輸入層中的內(nèi)容與層的左邊線、頂部邊線、右的內(nèi)容與層的左邊線、頂部邊線、右邊線和底部邊線的間距，單位為像素

58、。邊線和底部邊線的間距，單位為像素。3.4.1 學習目標學習目標 “電腦展示電腦展示”網(wǎng)頁的顯示效果如圖網(wǎng)頁的顯示效果如圖3-4-1所示。在該網(wǎng)頁的制作過程中，使用了所示。在該網(wǎng)頁的制作過程中，使用了“布局布局”操作。網(wǎng)頁布局的作用是在插入操作。網(wǎng)頁布局的作用是在插入對象以前先對網(wǎng)頁進行區(qū)域分割，也就是對象以前先對網(wǎng)頁進行區(qū)域分割，也就是設(shè)計網(wǎng)頁中的文字、圖像與動畫等對象如設(shè)計網(wǎng)頁中的文字、圖像與動畫等對象如何安排。何安排。 網(wǎng)頁布局可以使用框架、層或表格，網(wǎng)頁布局可以使用框架、層或表格，使用最多的是表格。常規(guī)的方法是插入表使用最多的是表格。常規(guī)的方法是插入表格，但是需要進行表格的合并和拆分等

59、調(diào)格，但是需要進行表格的合并和拆分等調(diào)整。整。圖圖3-4-1 “電腦展示電腦展示”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果 Dreamweaver 8中的中的“布局布局”欄有兩欄有兩個工具，即個工具，即“布局表格布局表格”和和“布局單元布局單元格格”。利用它們可以方便地對網(wǎng)頁進行布。利用它們可以方便地對網(wǎng)頁進行布局操作。局操作。3.4.2 操作過程操作過程1“布局布局”欄中按鈕的作用欄中按鈕的作用 在網(wǎng)頁設(shè)計中，網(wǎng)頁的布局是非常重在網(wǎng)頁設(shè)計中，網(wǎng)頁的布局是非常重要的，也就是網(wǎng)頁中的文字、圖像與動畫要的，也就是網(wǎng)頁中的文字、圖像與動畫等對象如何安排。通常在插入對象以前，等對象如何安排。通常在插入對象以前，先

60、進行區(qū)域分割。先進行區(qū)域分割。 區(qū)域的分割可以使用框架、層或表格，區(qū)域的分割可以使用框架、層或表格，使用最多的是表格。常規(guī)的方法是插入表使用最多的是表格。常規(guī)的方法是插入表格，但是這樣會需要進行表格的合并和拆格，但是這樣會需要進行表格的合并和拆分等調(diào)整。分等調(diào)整。Dreamweaver 8提供了提供了“布局布局”欄的兩個按鈕；欄的兩個按鈕；“布局表格布局表格”按鈕按鈕 和和“繪制布局單元格繪制布局單元格”按鈕按鈕 ，利用它們可，利用它們可以方便地制作出網(wǎng)頁布局的表格。這兩個以方便地制作出網(wǎng)頁布局的表格。這兩個按鈕的作用如下。按鈕的作用如下。（1）“布局表格布局表格”按鈕的作用按鈕的作用 單擊按