Dreamweaver 8與Flash 8案例教程第3章框架、表格、層與網(wǎng)頁(yè)布局

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

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

3、以實(shí)現(xiàn)在一個(gè)網(wǎng)頁(yè)內(nèi)顯示多個(gè)示多個(gè)HTML文件的效果。文件的效果。 對(duì)于一個(gè)有對(duì)于一個(gè)有n個(gè)區(qū)域的框架網(wǎng)頁(yè)來(lái)說(shuō)，個(gè)區(qū)域的框架網(wǎng)頁(yè)來(lái)說(shuō)，每個(gè)區(qū)域有一個(gè)每個(gè)區(qū)域有一個(gè)HTML文件，整個(gè)框架結(jié)文件，整個(gè)框架結(jié)構(gòu)也是一個(gè)構(gòu)也是一個(gè)HTML文件，因此該框架網(wǎng)頁(yè)文件，因此該框架網(wǎng)頁(yè)是一個(gè)是一個(gè)HTML文件集，它有文件集，它有n+1個(gè)個(gè)HTML文件。文件。 3.1.2 操作過(guò)程操作過(guò)程1創(chuàng)建框架與編輯框架創(chuàng)建框架與編輯框架（1）創(chuàng)建框架）創(chuàng)建框架方法方法1：?jiǎn)螕簦簡(jiǎn)螕簟拔募募薄靶陆ㄐ陆ā辈藛蚊?，菜單命令，打開(kāi)打開(kāi)“新建文檔新建文檔”對(duì)話框，如圖對(duì)話框，如圖3-1-4所示。所示。 單擊該對(duì)話框左邊單擊該對(duì)

4、話框左邊“類別類別”欄中的欄中的“框架框架集集”選項(xiàng)，再選中該對(duì)話框右邊選項(xiàng)，再選中該對(duì)話框右邊“框架集框架集”欄內(nèi)的一種框架選項(xiàng)。然后單擊欄內(nèi)的一種框架選項(xiàng)。然后單擊“創(chuàng)建創(chuàng)建”按鈕，即可創(chuàng)建有框架的網(wǎng)頁(yè)。按鈕，即可創(chuàng)建有框架的網(wǎng)頁(yè)。圖圖3-1-4 在頁(yè)面內(nèi)創(chuàng)建上下兩個(gè)框架在頁(yè)面內(nèi)創(chuàng)建上下兩個(gè)框架 方法方法2：?jiǎn)螕簦簡(jiǎn)螕簟安迦氩迦搿保ú季郑┟姘宓模ú季郑┟姘宓摹翱蚣芸蚣堋笨旖莶藛沃械囊粋€(gè)按鈕，即可在快捷菜單中的一個(gè)按鈕，即可在頁(yè)面內(nèi)設(shè)置出相應(yīng)的框架，如圖頁(yè)面內(nèi)設(shè)置出相應(yīng)的框架，如圖3-1-5所示。所示。 圖圖3-1-5 “框架框架”快捷菜單快捷菜單方法方法3：利用：利用“修改修改”“框架框架

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

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

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

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

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

10、否要滾動(dòng)條。選擇要滾動(dòng)條。選擇“是是”選項(xiàng)，表示要滾動(dòng)選項(xiàng)，表示要滾動(dòng)條；選擇條；選擇“否否”選項(xiàng)，表示不要滾動(dòng)條；選項(xiàng)，表示不要滾動(dòng)條；選擇選擇“自動(dòng)自動(dòng)”選項(xiàng)，表示根據(jù)分欄內(nèi)是否選項(xiàng)，表示根據(jù)分欄內(nèi)是否能夠完全顯示出其中的內(nèi)容來(lái)自動(dòng)選擇是能夠完全顯示出其中的內(nèi)容來(lái)自動(dòng)選擇是否要滾動(dòng)條；選擇否要滾動(dòng)條；選擇“默認(rèn)默認(rèn)”選項(xiàng)，表示采選項(xiàng)，表示采用默認(rèn)狀態(tài)。用默認(rèn)狀態(tài)?！安荒苷{(diào)整大小不能調(diào)整大小”復(fù)選框：如果選中該復(fù)復(fù)選框：如果選中該復(fù)選框，則不能用鼠標(biāo)拖曳框架的邊框線，選框，則不能用鼠標(biāo)拖曳框架的邊框線，調(diào)整分欄大??；如果沒(méi)有選中該復(fù)選框，調(diào)整分欄大小；如果沒(méi)有選中該復(fù)選框，則可以用鼠標(biāo)拖曳框

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

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

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

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

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

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

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

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

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

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

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

22、格之間兩個(gè)相鄰邊框線間的距離。鄰邊框線間的距離。 “對(duì)齊對(duì)齊”下拉列表框：該下拉列表框內(nèi)有下拉列表框：該下拉列表框內(nèi)有“默認(rèn)默認(rèn)”、“左對(duì)齊左對(duì)齊”、“居中對(duì)齊居中對(duì)齊”和和“右對(duì)齊右對(duì)齊”四個(gè)選項(xiàng)。四個(gè)選項(xiàng)。“邊框邊框”文本框：輸入表格邊框?qū)挾?，單文本框：輸入表格邊框?qū)挾?，單位為像素點(diǎn)。位為像素點(diǎn)。 “背景顏色背景顏色”按鈕與文本框：用來(lái)設(shè)置表按鈕與文本框：用來(lái)設(shè)置表格的背景色。格的背景色。 “背景圖像背景圖像”文本框與文件夾按鈕：?jiǎn)螕粑谋究蚺c文件夾按鈕：?jiǎn)螕粑募A按鈕，可以彈出文件夾按鈕，可以彈出“選擇圖像源文件選擇圖像源文件”對(duì)話框，利用它可以給表格添加背景圖像。對(duì)話框，利用它可以給表格

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

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

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

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

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

28、的文字以正文的形式顯示。 “背景背景”按鈕與文本框：?jiǎn)螕羯线叺陌粹o與文本框：?jiǎn)螕羯线叺摹氨潮尘熬啊蔽募A圖標(biāo)，可以彈出文件夾圖標(biāo)，可以彈出“選擇圖像源選擇圖像源文件文件”對(duì)話框，利用該對(duì)話框可以給表格對(duì)話框，利用該對(duì)話框可以給表格單元格添加背景圖像。下邊的單元格添加背景圖像。下邊的“背景顏色背景顏色”矩形按鈕與文本框用來(lái)設(shè)置表格單元格的矩形按鈕與文本框用來(lái)設(shè)置表格單元格的背景色。當(dāng)該文本框?yàn)榭諘r(shí)，其設(shè)置與頁(yè)背景色。當(dāng)該文本框?yàn)榭諘r(shí)，其設(shè)置與頁(yè)面表格的面表格的“背景背景”設(shè)置一樣。設(shè)置一樣。 “邊框邊框”按鈕與文本框：用來(lái)設(shè)置表格單按鈕與文本框：用來(lái)設(shè)置表格單元格的雙線條邊框線的顏色。當(dāng)該文本框

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

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

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

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

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

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

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

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

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

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

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

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

41、鍵，可每次增加或減少5個(gè)像素。個(gè)像素。利用層利用層“屬性屬性”欄進(jìn)行設(shè)置的方法：選欄進(jìn)行設(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）同時(shí)調(diào)整多個(gè)層的大小）同時(shí)調(diào)整多個(gè)層的大小 同時(shí)調(diào)整多個(gè)層的大小是使多個(gè)層的同時(shí)調(diào)整多個(gè)層的大小是使多個(gè)層的寬度相等或高度相同，其方法如下。寬度相等或高度相同，其方法如下。用菜單命令的方法

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

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

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

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

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

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

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

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

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

51、順序：?jiǎn)螕粢娘@示順改變層的顯示順序：?jiǎn)螕粢娘@示順序的層的序的層的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)的 按鈕列顯示的按鈕列顯示的 圖像（睜開(kāi)的人眼圖像）表示此行的層是圖像（睜開(kāi)的人眼圖像）表示此行的層是可視的（即可見(jiàn)的）。默認(rèn)狀態(tài)下，所有可視的（即可

52、見(jiàn)的）。默認(rèn)狀態(tài)下，所有層都是可視的。層都是可視的。圖圖3-3-12 單擊單擊按鈕后的按鈕后的“層層”面板面板 單擊單擊 圖像，可使圖像，可使 圖像消失，圖像消失，再單擊原再單擊原 圖像處，會(huì)出現(xiàn)圖像處，會(huì)出現(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、，一種是單層欄有兩種，一種是單層“屬性屬性”欄，這是在選中一個(gè)層時(shí)出現(xiàn)的；欄，這是在選中一個(gè)層時(shí)出現(xiàn)的；另一種是多層另一種是多層“屬性屬性”欄，這是在選中多欄，這是在選中多個(gè)層時(shí)出現(xiàn)的。單層個(gè)層時(shí)出現(xiàn)的。單層“屬性屬性”欄如圖欄如圖3-3-14所示，多層所示，多層“屬性屬性”欄如圖欄如圖3-3-15所示。所示?？梢钥闯?，多層可以看出，多層“屬性屬性”欄內(nèi)除了基本的欄內(nèi)除了基本的屬性設(shè)置選項(xiàng)外，增加了關(guān)于文本屬性的屬性設(shè)置選項(xiàng)外，增加了關(guān)于文本屬性的設(shè)置選項(xiàng)。設(shè)置選項(xiàng)?！皩傩詫傩浴睓谥懈鱾€(gè)選項(xiàng)的作用欄中各個(gè)選項(xiàng)的作用如下。如下。圖圖3-3-14 單層單層“屬性屬性”欄欄圖圖3-3-15 多層多層

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

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

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

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

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

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

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