第6章 網(wǎng)頁布局new課件

1、第第6章章 網(wǎng)頁布局網(wǎng)頁布局2014.11網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作第第6章章 網(wǎng)頁布局網(wǎng)頁布局應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁6.2應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁6.3應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁6.1網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作本章要點本章要點 在網(wǎng)頁中，表格、在網(wǎng)頁中，表格、Div+CSSDiv+CSS與框架主要用于網(wǎng)頁與框架主要用于網(wǎng)頁的布局定位。表格用于精確定位，的布局定位。表格用于精確定位，Div+CSSDiv+CSS可以靈活可以靈活定位，框架在定位的基礎(chǔ)上，可以引入多個定位，框架在定位的基礎(chǔ)上，可以引入多個HTMLHTML文文件。件。v 創(chuàng)建表格與嵌套表格創(chuàng)建表格與

2、嵌套表格v 編輯表格與設(shè)置表格的屬性編輯表格與設(shè)置表格的屬性v 創(chuàng)建框架與框架集創(chuàng)建框架與框架集v 設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性v 插入插入Divv 絕對定位與相對定位絕對定位與相對定位v 浮動定位浮動定位v 應(yīng)用表格、應(yīng)用表格、Div+CSS與框架設(shè)計網(wǎng)頁與框架設(shè)計網(wǎng)頁網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格是一種在HTML頁面上布局?jǐn)?shù)據(jù)與圖像的工具。表格為網(wǎng)頁設(shè)計者提供了向網(wǎng)頁添加垂直與水平結(jié)構(gòu)的方法。例如，使用表格安排表格數(shù)據(jù)，在網(wǎng)頁上布局文本與圖像等。表格由三個基本組件構(gòu)成：行（水平空間）列（垂直空間）單元格（行和列交匯的空間）網(wǎng)頁設(shè)計

3、與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 創(chuàng)建表格創(chuàng)建表格 6.1.1操作實例操作實例6-1 在網(wǎng)頁中按圖在網(wǎng)頁中按圖6-1所示建立表格所示建立表格網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 創(chuàng)建表格創(chuàng)建表格 6.1.1操作步驟：操作步驟：在本地站點html文件夾下新建網(wǎng)頁blzl.html。在文檔頭將網(wǎng)頁“標(biāo)題”設(shè)置為“巴黎之旅”。設(shè)置標(biāo)題：在“文檔”窗口的第一行輸入標(biāo)題文字“巴黎之旅”，并在屬性面板設(shè)置為“隸書”、大小為“xx-large”、水平為“居中對齊”。設(shè)置表格插入點。在文檔窗口，將表格插入點設(shè)置在標(biāo)題文字的下方。執(zhí)行下列操作之一，打開

4、“表格”對話框。單擊“常用”工具欄的“表格”按鈕。從“常用”工具欄將“表格”按鈕拖動到表格插入點，即標(biāo)題文字的下方。在“插入”菜單選擇“表格”選項。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 創(chuàng)建表格創(chuàng)建表格 6.1.1在對話框中默認(rèn)當(dāng)前值或重新輸入新值。如圖6-2所示?！氨砀瘛睂υ捒蝻@示的默認(rèn)數(shù)據(jù)是最近一次創(chuàng)建表格時使用的數(shù)據(jù)。在“行數(shù)”中，指定表格的行數(shù)。例如，輸入16。在“列數(shù)”中，指定表格的列數(shù)。例如，輸入4。在“表格寬度”中，指定以像素為單位或占瀏覽器窗口百分比的表格寬度。例如，輸入寬度為85，選擇單位為百分比。在“邊框粗細(xì)”中，指定以像素為單位的表格邊框?qū)?/p>

5、度，如果不需要邊框可輸入0。例如，輸入1。在“單元格邊距”中，指定單元格內(nèi)容與單元格邊框之間的距離，單位是像素。默認(rèn)邊距為1像素，如果不需要邊距可輸入0。例如，輸入1。在“單元格間距”中，指定單元格之間的距離，單位是像素。默認(rèn)間距為1像素，如果不需要間距可輸入0。單擊“確定”按鈕，網(wǎng)頁中創(chuàng)建了一個16行4列的表格。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.21向表格中輸入文字向表格中輸入文字操作實例操作實例6-2 按圖按圖6-1所示完成表格中的文字輸入與設(shè)置所示完成表格中的文字輸入與設(shè)置操作步驟：操作步驟：（

6、1）向表格中輸入文字在指定單元格中單擊鼠標(biāo)，設(shè)置插入點。在插入點輸入文字。在表格中輸入的信息如圖6-1所示。（2）選中表格并設(shè)置表格的居中對齊執(zhí)行下列操作之一，選中整個表格。單擊表格的左上角。單擊表格下邊界的任何一處，當(dāng)鼠標(biāo)指針下方出現(xiàn)表格狀圖標(biāo)時單擊即可。在表格中單擊一次，在“修改”菜單選擇“表格”、“選擇表格”選項。在表格中單擊一次，在文檔窗口下方的標(biāo)簽選擇器中單擊標(biāo)簽。如圖6-3所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的

7、基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2在表格“屬性”面板的“對齊”下拉列表中選擇“居中對齊”。（3）選中行或列并設(shè)置行或列文本的居中對齊執(zhí)行下列操作之一，選中行或列。將鼠標(biāo)移動到一行的左邊界或一列的頂部，當(dāng)出現(xiàn)選擇箭頭時單擊鼠標(biāo)左鍵。如圖6-4、6-5所示。在指定行或列，按住鼠標(biāo)左鍵左右或上下拖動以選取行或列。在行或列“屬性”面板的“水平”下拉列表中選擇“居中對齊”；在“垂直”下拉列表中選擇“居中”。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)

8、頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2（4）選中單元格并設(shè)置單元格文本的居中對齊執(zhí)行下列操作之一，選中一個或多個單元格。在單元格中單擊，上下或左右拖動到另一個單元格。 在單元格中單擊，然后按下Shift鍵并單擊另一個單元格，以這兩個單元格為頂點的矩形區(qū)域中的所有單元格被選中。按下Ctrl鍵然后依次單擊單元格、行或列，選中不相鄰的單元格、行或列。按下Ctrl鍵并單擊被選中的單元格、行或列可取消選中。在單元格“屬性”面板的“水平

9、”下拉列表中選擇“居中對齊”；在“垂直”下拉列表中選擇“居中”。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.22編輯表格編輯表格操作實例操作實例6-3 將圖將圖6-1所示的表格修飾為圖所示的表格修飾為圖6-6所示的形式所示的形式操作步驟：操作步驟： （1）插入列如圖6-6所示，在原第一列之前插入新的一列。在需要添加新列的右側(cè)列單擊任意的單元格。例如，單擊“景點1”單元格。執(zhí)行下列操作之一，在原列的左側(cè)插入新的一列。在“修改”菜單中選擇“表格”、“插入列”選項。在“插入”菜單中選擇“表格對象”、“在左邊插入列”選

10、項。單擊鼠標(biāo)右鍵，在快捷菜單中選擇“表格”、“插入列”選項。在“布局”工具欄，單擊“在左邊插入列”按鈕。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2（2）調(diào)整列的寬度執(zhí)行下列操作之一，可調(diào)整列寬。將鼠標(biāo)移到第一列的右邊框，當(dāng)鼠標(biāo)指針變?yōu)殡p向箭頭時，向左右拖動邊框線，可使列的寬度縮小或增大。選中第一列，在列“屬性”面板的“寬”文本框輸入選中列的寬度。（3）合并單元格如圖6-6所示，第

11、一列第24行單元格合并，輸入“第一游覽區(qū)”；第58行單元格合并，輸入“第二游覽區(qū)”；第911行單元格合并，輸入“第三游覽區(qū)”；第1214行單元格合并，輸入“第四游覽區(qū)”。選中需要合并的單元格。選中的單元格必須是連續(xù)的，并且形狀應(yīng)是矩形。例如，選中第一列的24行單元格。執(zhí)行下列操作之一，合并單元格。在“修改”菜單選擇“表格”、“合并單元格”選項。單擊鼠標(biāo)右鍵，在快捷菜單中選擇“表格”、“合并單元格”選項。在單元格“屬性”面板單擊“合并所選單元格，使用跨度”按鈕。如圖6-7所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置

12、6.1.2在合并后的單元格中輸入“第一游覽區(qū)”。參照步驟，將第一列第58行單元格合并，輸入“第二游覽區(qū)”；第911行單元格合并，輸入“第三游覽區(qū)”；第1214行單元格合并，輸入“第四游覽區(qū)”。參照步驟，將第一行第12列單元格合并。注意：如果合并前的單元格有內(nèi)容，則所有合并前單元格的內(nèi)容將被放置到合并后的單元格中，被選定的第一個單元格的屬性將應(yīng)用到合并后的單元格上。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2（4）插入行與移動行如圖6-6所示，在“第三游覽區(qū)”與“第四游覽區(qū)”之間添加一行。由于已經(jīng)縱向合并了單元

13、格，直接在“第四游覽區(qū)”行之上插入行可能得不到預(yù)期的效果。因此，采用如下的間接方法。在第一行的第一個單元格內(nèi)單擊鼠標(biāo)，設(shè)置插入點。執(zhí)行下列操作之一，在原第一行之上插入新行。在“修改”菜單選擇“表格”、“插入行”選項。單擊鼠標(biāo)右鍵，在快捷菜單選擇“表格”、“插入行”選項。在“布局”工具欄，單擊“在上面插入行”按鈕。選中新插入的行，在“編輯”菜單選擇“剪切”選項，將該行剪切到剪貼板。在“第四游覽區(qū)”單元格中單擊鼠標(biāo)右鍵，在“編輯”菜單中選擇“粘貼”選項，將所剪切的行插入到當(dāng)前位置之前。合并新添加行的第12列和第35列單元格，并分別輸入“自行游覽”、“迪斯尼樂園、購物”。注意：采用下述方法也能完成上

14、述操作。在需要添加新行的上一行，單擊任意的、非合并的單元格，在“布局”工具欄，單擊“在下面插入行”按鈕。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.23設(shè)置表格屬性設(shè)置表格屬性首先通過“窗口”菜單的“屬性”選項，打開“屬性”面板。操作實例操作實例6-4 按圖按圖6-8所示的格式修飾圖所示的格式修飾圖6-6的表格的表格操作步驟：操作步驟：選中表格。查看表格“屬性”面板，如圖6-9所示。

15、命名表格操作：在“表格”文本框中，為表格輸入一個名稱。例如，輸入“巴黎之旅”。 網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2設(shè)置表格布局選項。在“行”和“列”中，輸入表格的行數(shù)和列數(shù)。編輯表格時，一般采用原表格的行列數(shù)。在“寬”中，指定表格的寬度，一般采用瀏覽器窗口的百分比；也可采用以像素為單位的數(shù)值。通常情況下不需要設(shè)置表格的高度。使用“對齊”下拉列表，設(shè)置同一段落中表格與其他元素的對齊方式。使用“清除行高”和“清除列寬”按鈕，可刪除表格中所有的行高值和列寬值。使用“將表格寬度轉(zhuǎn)換成像素”按鈕，可將占瀏覽器

16、窗口百分比的寬度表達方式轉(zhuǎn)換為像素數(shù)值的表達方式。使用“將表格寬度轉(zhuǎn)換成百分比”按鈕，可將當(dāng)前的像素數(shù)值表達方式轉(zhuǎn)換為占瀏覽器窗口百分比的寬度表達方式。在“間距”中，指定單元格之間的距離，單位是像素。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2設(shè)置表格邊框在“邊框”中，輸入以像素為單位的表格邊框的寬度。例如，輸入4。單擊“快速標(biāo)簽編輯器” ，在彈出的標(biāo)簽內(nèi)“id=巴黎之旅”后面輸入空格，在彈出的列表中雙擊選擇“bordercolor”，在雙引號中輸入“#D6D3CE”，即可給表格賦予“邊框顏色”。如圖6-10

17、所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2在標(biāo)簽內(nèi)輸入空格，在彈出的列表中雙擊選擇“bgcolor”，在雙引號中輸入六位顏色編碼，即可為表格賦予一種背景顏色。 在標(biāo)簽內(nèi)輸入空格，在彈出的列表中雙擊選擇“background”，在雙引號中輸入圖像文件名，即可為表格插入一幅背景圖像。 設(shè)置行、列與單元格的屬性在表格中選取任何單元格的組合。例如，選中第一行的第26列。顯示單元格“屬性”面板，如圖6-11所示。使用“水平”下拉列表，設(shè)置單元格、行、列內(nèi)容的水平對齊方式。使用“垂直”下拉列表，設(shè)置單元格、行、列

18、內(nèi)容的垂直對齊方式。在“寬”和“高”中，設(shè)置選中單元格的寬度和高度，單位是像素。使用百分比時，應(yīng)在數(shù)值后面添加%號。 網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2使用“背景”，可為單元格、行、列插入背景圖像。使用“背景顏色”，可為單元格、行、列設(shè)置背景顏色，可使用顏色拾取器或直接輸入所需顏色的十六進制編碼值。例如，輸入“#CCCCFF”。使用“邊框”，可為單元格設(shè)置邊框顏色。單擊“合并單元格”按鈕，可將選中的單元格、行或列合并為一個單元格。單擊“拆分單元格” 按鈕，可將一個單元格拆分為幾個單元格。應(yīng)在“拆分單

19、元格”對話框中，選擇是拆分為行還是列，并輸入需要拆分的行數(shù)或列數(shù)。如圖6-12所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的基本操作與屬性設(shè)置表格的基本操作與屬性設(shè)置 6.1.2選中“不換行”選項，可防止英文單詞中間被截斷換行。此時，單元格將自動擴展以容納輸入或粘貼的英文單詞。通常單元格將橫向擴展以適應(yīng)最長的單詞，然后再縱向擴展。選中“標(biāo)題”選項，將選中單元格的內(nèi)容格式化為表頭格式。表頭單元格的內(nèi)容默認(rèn)為是粗體并居中。在單元格內(nèi)插入圖像。在第一行、第一列單元格的文字“景點序列”之前單擊鼠標(biāo)。單擊“常用”工具欄的“圖象”按鈕，選擇需要插入的圖像文件“point

20、01.jpg”，單擊“確定”按鈕，將圖像插入到單元格中。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的修飾和嵌套表格的修飾和嵌套 6.1.31表格的修飾表格的修飾操作實例操作實例6-5 按圖按圖6-14所示的形式修飾圖所示的形式修飾圖6-1的表格的表格操作步驟：操作步驟：在整個表格的周圍設(shè)計一個邊框，以便將內(nèi)容包圍起來，可以通過插入行和列來實現(xiàn)。（1）在表格的底部和右邊添加行與列選中整個表格。在表格“屬性”面板中，將現(xiàn)有的行數(shù)與列數(shù)分別增加1，則表格底部增加1行、表格右側(cè)增加1列。例如，在“行”中輸入17、在“列”中輸入5。（2）在表格的頂部和左邊添加行與列單擊第

21、一行中的任意單元格，在“布局”工具欄，單擊“在上面插入行”按鈕。單擊第一列中的任意單元格，在“布局”工具欄，單擊“在左邊插入列”按鈕。插入行和列完成后，如圖6-13所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的修飾和嵌套表格的修飾和嵌套 6.1.3網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的修飾和嵌套表格的修飾和嵌套 6.1.3（3）設(shè)置四周的寬度合并四周的單元格。選中第一列與最后一列，在列“屬性”面板的“寬”中，輸入確定的寬度值。例如，輸入1%。（4）設(shè)置單元格背景圖像與顏色選中第一行。將視圖切換為“拆分”視圖。在“代碼”窗

22、口的標(biāo)簽內(nèi)插入background屬性，并將屬性值設(shè)置為準(zhǔn)備好的背景圖片bg03.jpg。例如：background=./image/bg03.jpg。參照步驟為最后一行的單元格設(shè)置相同的背景圖像。選中第一列與最后一列。在屬性面板的“背景顏色”框中設(shè)置背景顏色。例如，輸入#6BC7FF。按快捷鍵Ctrl + S保存網(wǎng)頁，按快捷鍵F12預(yù)覽網(wǎng)頁。如圖6-14所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的修飾和嵌套表格的修飾和嵌套 6.1.3網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的修飾和嵌套表格的修飾和嵌套 6.1.32表格嵌

23、套表格嵌套嵌套表是指在表格中插入另一個表格。操作實例操作實例6-6 利用嵌套表格完成圖利用嵌套表格完成圖6-15所示的效果所示的效果網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的修飾和嵌套表格的修飾和嵌套 6.1.3操作步驟：操作步驟：打開或新建一個網(wǎng)頁文件，將網(wǎng)頁標(biāo)題設(shè)置為“表格嵌套”。利用“表格”對話框，創(chuàng)建一個3行3列的表格，表格寬度為400像素，邊框為0，在表格“屬性”面板設(shè)置為“居中對齊”。如圖6-16所示。單擊需要插入第二個表格的單元格。例如，單擊第2行第2列的單元格，設(shè)置表格插入點。利用“表格”對話框插入第二個表格，設(shè)置表格屬性為3行、3列、寬度10

24、0%、邊框為1。嵌套表格形式如圖6-17所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的修飾和嵌套表格的修飾和嵌套 6.1.3分別將第一列與最后一列的單元格合并，并設(shè)置寬度為“5%”。分別將第一行與最后一行的單元格合并。利用“代碼”視圖，分別為外圍的合并單元格插入背景圖像，例如，插入image文件夾中的文件bg03.jpg。如圖6-18所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 表格的修飾和嵌套表格的修飾和嵌套 6.1.3選中嵌套的內(nèi)表格的所有單元格，在“屬性”面板中將“水平”設(shè)置為“居中對齊”，“垂直”設(shè)置為“居中”。合并內(nèi)嵌

25、表格的第一行，在內(nèi)嵌表格中輸入圖6-15所示的文字。按快捷鍵Ctrl + S保存網(wǎng)頁，按快捷鍵F12預(yù)覽網(wǎng)頁。效果如圖6-15所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 應(yīng)用實例應(yīng)用實例利用表格設(shè)計網(wǎng)頁利用表格設(shè)計網(wǎng)頁 6.1.4很多網(wǎng)頁設(shè)計者喜歡使用表格設(shè)計網(wǎng)頁的布局。通過表格可以精確地定位網(wǎng)頁元素，準(zhǔn)確地表達創(chuàng)作意圖。操作實例操作實例6-7 利用表格設(shè)計如圖利用表格設(shè)計如圖6-19所示的網(wǎng)頁所示的網(wǎng)頁操作步驟：操作步驟：（1）建立網(wǎng)頁文件在本地站點窗口中，新建網(wǎng)頁文件example1.html。雙擊打開該文件，將頁面標(biāo)題設(shè)置為“利用表格設(shè)計網(wǎng)頁”。按快捷鍵C

26、trl + S保存網(wǎng)頁。 網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 應(yīng)用實例應(yīng)用實例利用表格設(shè)計網(wǎng)頁利用表格設(shè)計網(wǎng)頁 6.1.5（2）制作標(biāo)題區(qū)在網(wǎng)頁中插入一個2行1列的表格：寬度為100%、邊框粗細(xì)為0、單元格邊距與單元格間距均為0。制作標(biāo)題：在第一行的單元格中輸入標(biāo)題，并在屬性面板中將標(biāo)題文字設(shè)置為“居中對齊”。例如，輸入“我的音樂小屋”；單元格背景顏色#000000；字體隸書、大小為xx-large、顏色#FF0000。插入一條水平線。單擊第二行的單元格，單擊“常用”工具欄的“水平條”按鈕。設(shè)置水平線：選中水平線，在屬性面板中設(shè)置“寬”為90%，設(shè)置“高”為4

27、。在“修改”菜單中選擇“編輯標(biāo)簽”選項，彈出“標(biāo)簽編輯器”對話框，在列表中選擇“瀏覽器特定的”選項，輸入顏色值#FF00FF，按“確定”按鈕退出。如圖6-20所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 應(yīng)用實例應(yīng)用實例利用表格設(shè)計網(wǎng)頁利用表格設(shè)計網(wǎng)頁 6.1.5（3）插入表格并排版將光標(biāo)定位在水平線下方。繼續(xù)在網(wǎng)頁中插入一個1行2列的表格，寬度設(shè)置為700像素，邊框設(shè)置為0。在屬性面板將表格設(shè)置為“居中對齊”。（4）插入嵌套表格在左側(cè)的單元格插入一個6行2列的表格，寬度設(shè)置為100%，邊框設(shè)置為0，單元格間距設(shè)置為10，單元格邊距設(shè)置為0。單擊右側(cè)的單元格，在屬

28、性面板中將“垂直”設(shè)置為“頂端”，表示該單元格中的內(nèi)容垂直方向是“頂端對齊”。在右側(cè)的單元格插入一個2行1列的表格，寬度設(shè)置為100%，邊框設(shè)置為0，單元格間距設(shè)置為10，單元格邊距設(shè)置為0。如圖6-21所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 應(yīng)用實例應(yīng)用實例利用表格設(shè)計網(wǎng)頁利用表格設(shè)計網(wǎng)頁 6.1.5（5）設(shè)置欄目區(qū)選中第一個嵌套表格的第一列單元格，在屬性面板中設(shè)置“背景顏色”為#FFCCFF；“水平”設(shè)置為“居中對齊”；“垂直”設(shè)置為“居中”。第一列單元格中輸入欄目的內(nèi)容，并調(diào)整列寬。（以后可以設(shè)置超級鏈接）。第二列中按圖6-19所示輸入內(nèi)容。（5）設(shè)置

29、圖片區(qū)域在第二個嵌套表格的一、二行分別插入圖像并設(shè)置格式。（6）設(shè)置分隔線與E-mail鏈接在外層表格的下方設(shè)置插入點。插入一個2行1列的表格，寬度為100%、邊框為0、單元格邊距和單元格間距均為0。選中標(biāo)題欄下的水平分隔線，按快捷鍵Ctrl + C復(fù)制到剪貼板。將光標(biāo)定位在新插入表格的第一行，按快捷鍵Ctrl + V粘貼。在新插入表格的最后一行輸入文字“請與我聯(lián)系”，在屬性面板中設(shè)置E-mail鏈接“mailto:”，并“居中對齊”。按快捷鍵Ctrl + S保存網(wǎng)頁，按F12預(yù)覽網(wǎng)頁，效果如圖6-19所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.1 應(yīng)用表格布局網(wǎng)頁應(yīng)用表格布局網(wǎng)頁 應(yīng)用實例應(yīng)用實例

30、利用表格設(shè)計網(wǎng)頁利用表格設(shè)計網(wǎng)頁 6.1.5注意：注意：在定義表格寬度時，寬度單位是選擇百分比還是像素，應(yīng)視具體情況而定。一般情況下，如果是網(wǎng)頁最外層的表格，應(yīng)選擇像素為單位。否則，表格的寬度將隨瀏覽器的大小而變化，網(wǎng)頁上顯示的內(nèi)容將會出現(xiàn)混亂。而內(nèi)嵌的表格，選擇百分比和像素均可以，因為該表格所在的單元格的寬度是固定的。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁 框架的作用是將網(wǎng)頁頁面劃分為多個相對獨立的區(qū)域，每個區(qū)域相當(dāng)于一個獨立的頁面，從而達到將幾個獨立頁面同時顯示在瀏覽器中的效果?？蚣埽‵rames）技術(shù)由框架集（Frameset）和框架（Frame）兩部分組成

31、?？蚣芗强蚣艿募?，它定義了各框架的結(jié)構(gòu)、數(shù)量、大小尺寸、裝入框架中的HTML文件名和路徑等屬性?？蚣芗⒉辉跒g覽器中顯示，只是存儲所屬框架的有關(guān)信息?？蚣芗械娜靠蚣芪募?gòu)成一個網(wǎng)頁頁面?？蚣苁强蚣芗慕M成元素?？蚣艹Ｓ糜趯?dǎo)航。例如，在圖6-22所示的網(wǎng)頁中，網(wǎng)頁頁面由三個框架組成，頂部的框架用于包含網(wǎng)站的標(biāo)題，左邊的框架用于包含導(dǎo)航欄，而占據(jù)頁面空間最大的主框架包含網(wǎng)站的主要內(nèi)容。本例中，頂部框架一般保持靜態(tài)；左邊框架通過導(dǎo)航欄的鏈接改變主框架區(qū)域的顯示內(nèi)容，仍然是一種靜態(tài)；主框架區(qū)域是動態(tài)區(qū)域，將根據(jù)所選導(dǎo)航欄選項的不同而變化。只要單擊導(dǎo)航欄中的一個選項，其內(nèi)容立即顯示在主框架中。網(wǎng)

32、頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁一個包含三個框架的網(wǎng)頁是由四個獨立的HTML頁面組成的：框架頁文件和三個在框架中顯示的頁面文件。使用框架設(shè)計網(wǎng)頁時，必須依次保存框架頁與其他框架頁面。創(chuàng)建基于框架的網(wǎng)頁一般包括以下步驟：（1）在網(wǎng)頁中創(chuàng)建框架集和框架。（2）保存框架集文件與框架文件。每個框架與框架集都是獨立的網(wǎng)頁，應(yīng)單獨保存。（3）設(shè)置框架和框架集的屬性。包括命名框架與框架集、設(shè)置是否顯示框架等。（4）確認(rèn)鏈接的目標(biāo)框架設(shè)置，使所有鏈接內(nèi)容顯示在正確的區(qū)域內(nèi)。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁創(chuàng)建框架創(chuàng)建框架 6.2.11插入框

33、架插入框架在Dreamweaver中有兩種創(chuàng)建框架的方式：一種是自己設(shè)計；另一種是從Dreamweaver提供的框架類中選取。Dreamweaver中預(yù)定義了13種框架類型，如圖6-23所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁創(chuàng)建框架創(chuàng)建框架 6.2.1操作實例操作實例6-8 插入框架插入框架操作步驟：操作步驟：新建一個HTML網(wǎng)頁文件。在“插入”菜單選擇“HTML”、“框架”選項，單擊選擇一種框架。例如，選擇“上方及左側(cè)嵌套”。2打開框架面板打開框架面板操作實例操作實例6-9 打開框架面板打開框架面板操作步驟：操作步驟：執(zhí)行下列操作之一，打開框架面板。在“窗

34、口”菜單選擇“框架”選項。按快捷鍵Shift + F2。一般情況下，“框架”面板中顯示的框架形式就是當(dāng)前視圖中正在編輯的網(wǎng)頁的框架形式。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁創(chuàng)建框架創(chuàng)建框架 6.3.13選擇框架與框架集選擇框架與框架集框架和框架集都是獨立的HTML文件。要修改框架或框架集，必須首先選中框架或框架集。（1）直接在文檔窗口中選擇。在框架的邊框上單擊鼠標(biāo)，選中框架集。被選中的框架或框架集邊框?qū)⒊霈F(xiàn)由若干小點組成的虛線框，稱為“選擇線”。（2）使用框架面板進行選擇在框架面板中單擊指定框架，選中該框架。在“框架”面板中單擊環(huán)繞框架的邊框，選中框架集。 4拆

35、分框架拆分框架插入框架之后，可利用拆分框架的方法調(diào)整框架的結(jié)構(gòu)。選中框架，按住“Alt”鍵，拖動框架邊框，可將框架縱向或橫向劃分。在需要拆分的框架內(nèi)單擊，在“修改”菜單選擇“框架集”選項，在“拆分左框架”、“拆分右框架”、“拆分上框架”、“拆分下框架”四選項中選擇一項。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁創(chuàng)建框架創(chuàng)建框架 6.2.15刪除框架刪除框架刪除框架是拆分框架的逆操作。刪除框架時，可將框架邊框拖動到其他框架的邊框上。6保存框架和框架集文件保存框架和框架集文件框架結(jié)構(gòu)的網(wǎng)頁制作結(jié)束后，可以分別保存每個框架文件，也可單獨保存框架集文件，還可以將整個框架集與它

36、的各個框架文件一起保存。使用Dreamweaver創(chuàng)建框架時，每個框架文件都有一個暫時的文件名。例如，UntitledFrameset-1是框架集的文件名；UntitledFrame-1、UntitledFrame-2等是框架的文件名。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁創(chuàng)建框架創(chuàng)建框架 6.2.1操作實例操作實例6-10 保存框架與框架集保存框架與框架集操作步驟：操作步驟：（1）單獨保存框架集文件在“框架”面板或“文檔”窗口選中框架集。執(zhí)行下列操作之一，保存框架集文件。在“文件”菜單選擇“保存框架頁”選項。若要將框架集文件另存為一個新文件，在“文件”菜單選擇“

37、框架集另存為”選項。（2）保存框架文件在“文檔”窗口單擊需要保存的框架。在“文件”菜單選擇“保存框架頁”選項。（3）保存框架集中的所有文件在“文件”菜單選擇“保存全部”選項，保存所有框架與框架集文件。Dreamweaver將依次提示需要保存的內(nèi)容。首先保存的是框架集文件，然后是其他框架文件。當(dāng)前執(zhí)行保存操作的框架或框架集邊框?qū)⒊霈F(xiàn)由若干黑斜線組成的線框。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.2框架和框架集均有對應(yīng)的“屬性”面板?？蚣軐傩詻Q定了該框架的名稱、源文件名稱與路徑、邊界大小、框架邊框的顯示等。框架集屬性

38、控制著框架的維數(shù)及框架之間邊框的顏色和寬度。1打開屬性面板打開屬性面板（1）在“窗口”菜單選擇“屬性”選項，打開屬性面板。（2）查看框架屬性。選中指定框架，顯示如圖6-25所示的框架“屬性”面板。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.2（3）查看框架集屬性選中框架集，顯示如圖6-26所示的框架集“屬性”面板。2設(shè)置框架屬性設(shè)置框架屬性在框架的屬性面板中，各項參數(shù)的含義如下?？蚣苊Q：可在文本框中為選中框架輸入一個名稱?？蚣苊Q將用于超級鏈接和腳本的調(diào)用中。框架名稱只能使用字母、數(shù)字和下劃線，不要使用JavaSc

39、ript的保留字。源文件：指定該框架所在的源文件。如果該框架已經(jīng)保存，則顯示已有的文件名與路徑。如果該框架未保存，可輸入一個文件名或單擊文件夾圖標(biāo)選取一個源文件。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.2滾動：設(shè)置是否允許顯示滾動條。該列表有四個選項：“是”、“否”、“自動”、“默認(rèn)”。絕大部分瀏覽器的默認(rèn)值是“自動”，即在需要時自動添加滾動條。不能調(diào)整大?。哼x中該選項將禁止調(diào)整當(dāng)前框架的大小。邊框：控制當(dāng)前框架的邊框。該列表有三個選項：“是”：以立體效果顯示框架的邊框?！胺瘛保翰伙@示框架的邊框?！澳J(rèn)”：由瀏覽

40、器決定是否顯示框架的邊框。如果設(shè)置了“邊框”，則框架集中的邊框設(shè)置不再有效。絕大多數(shù)瀏覽器的默認(rèn)值為“是”。如果所有相鄰框架的“邊框”均設(shè)置為“否”，或所有框架的“邊框”均設(shè)置為“默認(rèn)”，而框架集中設(shè)置為“否”時，才可以關(guān)閉邊框的顯示。邊框顏色：為當(dāng)前框架的所有邊框設(shè)置顏色，該設(shè)置將覆蓋框架集的邊框顏色設(shè)置。邊界寬度：設(shè)置當(dāng)前框架的內(nèi)容與框架左右邊界的距離，單位是像素。邊界高度：設(shè)置當(dāng)前框架的內(nèi)容與框架上下邊界的距離，單位是像素。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.23設(shè)置框架集屬性設(shè)置框架集屬性使用框架集屬

41、性可以設(shè)置所有邊框的共同屬性。如果指定框架設(shè)置了屬性，將覆蓋框架集所對應(yīng)的屬性設(shè)置。在框架集的屬性面板中，各項參數(shù)的含義如下。邊框：設(shè)置是否在瀏覽器中顯示框架的邊框。邊框?qū)挾龋涸O(shè)置當(dāng)前框架集中的邊框?qū)挾取＿吙蝾伾涸O(shè)置當(dāng)前框架集中的邊框顏色。行列選定范圍：深色是框架被選中的部分，淺色是框架未被選中的部分。單擊可選中行或列。值：指定所選擇的行或列的大小。單位：設(shè)置“值”域中數(shù)值所使用的單位。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.24改變框架的背景顏色改變框架的背景顏色通過設(shè)置框架中文檔的背景顏色，可以改變框架的背

42、景顏色。操作實例操作實例6-11 設(shè)置框架的背景顏色設(shè)置框架的背景顏色操作步驟：操作步驟：單擊指定的框架，在“修改”菜單選擇“頁面屬性”選項，打開“頁面屬性”對話框。在“外觀（CSS）”對話框，單擊“背景顏色”按鈕選取顏色。5為框架集設(shè)置標(biāo)題為框架集設(shè)置標(biāo)題操作實例操作實例6-12 設(shè)置框架集的標(biāo)題設(shè)置框架集的標(biāo)題操作步驟：操作步驟：選中框架集。打開“頁面屬性”對話框。在“標(biāo)題/編碼”對話框的“標(biāo)題”文本框中輸入框架集的名稱。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁應(yīng)用實例應(yīng)用實例利用框架設(shè)計網(wǎng)頁利用框架設(shè)計網(wǎng)頁6.2.3操作實例操作實例6-13 利用框架設(shè)計如圖利

43、用框架設(shè)計如圖6-22所示的網(wǎng)頁所示的網(wǎng)頁操作步驟：操作步驟：（1）創(chuàng)建框架集及框架集文件啟動Dreamweaver。在站點-我愛旅游窗口的html文件夾建立一個空白網(wǎng)頁blyx.html。選中html文件夾，在右鍵快捷菜單中選擇“新建文件”選項。顯示文檔的框架邊框。在“查看”菜單選擇“可視化助理”、“框架邊框”選項。創(chuàng)建框架。在“插入”菜單選擇“HTML”、“框架”選項，單擊選擇 “上方及左側(cè)嵌套”。如圖6-27所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.3保存框架集文件。在“文件”菜單選擇“保存全部”選項，

44、將框架保存為4個文件。保存位置選擇本地站點“我愛旅游”下的html文件夾?？蚣芗募麨閎lyx-frame.html，其他三個文件名分別為主框架blyx-main.html、標(biāo)題框架blyx-title.html、欄目blyx-totic.html。（2）設(shè)置框架與框架集屬性框架創(chuàng)建結(jié)束后，Dreamweaver自動為每個框架起一個名字，該名字是在內(nèi)部調(diào)用時使用的。選中標(biāo)題欄框架topFrame，為保證標(biāo)題欄的瀏覽效果，其大小應(yīng)是固定的，并且應(yīng)關(guān)閉滾動條顯示。因此，在“屬性”面板中選中“不能調(diào)整大小”選項，設(shè)置“滾動”欄為“否”。如圖6-28所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架

45、布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.3導(dǎo)航欄框架leftFrame與主框架mainFrame應(yīng)自動顯示滾動條，所以在屬性面板中選中設(shè)置“滾動”欄為“自動”。選中框架集，在框架集屬性面板中設(shè)置“邊框”為“否”，設(shè)置“邊框?qū)挾取睘?。即，在瀏覽器中不顯示所有框架的邊框。（3）編輯標(biāo)題欄框架的內(nèi)容在框架頁面編輯文本的方法與編輯獨立網(wǎng)頁頁面是完全一樣的。將鼠標(biāo)放在框架邊框上拖動，適當(dāng)調(diào)整標(biāo)題欄框架的大小。在標(biāo)題欄框架中單擊鼠標(biāo)，設(shè)置插入點。輸入標(biāo)題文本“柏林印象”并設(shè)置文本屬性：字體幼圓、字號60、單位像素、居中、加粗、顏色#CC0000。在“頁面屬性”中設(shè)置

46、標(biāo)題欄的背景顏色為#CEFFFF。單擊“保存”按鈕，保存修改。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.3（4）編輯導(dǎo)航欄框架的內(nèi)容并設(shè)置超級鏈接。對導(dǎo)航欄框架采用表格布局方式。將鼠標(biāo)放在框架邊框上拖動，適當(dāng)調(diào)整導(dǎo)航欄框架的大小。在導(dǎo)航欄框架中單擊鼠標(biāo)，設(shè)置插入點。單擊“布局”工具欄的“表格”按鈕，插入7行1列的表格。在屬性面板中將表格的“邊框”設(shè)置為0。在各個單元格內(nèi)插入如圖6-22所示的導(dǎo)航文本，并設(shè)置文本屬性：字體隸書、字號18、單位像素、居中、加粗、顏色#CC6699。在“頁面屬性”中設(shè)置導(dǎo)航欄框架的背景顏

47、色為#CEFFFF。設(shè)置超級鏈接：選中導(dǎo)航文本（例如“佩加蒙博物館”），單擊“鏈接”框右側(cè)的圖標(biāo)，選擇鏈接文件。例如，選擇本地站點文件夾html中的blyx02.html文件。設(shè)置鏈接文件在主框架mainFrame中打開：在屬性面板的“目標(biāo)”列表中選擇“mainFrame”框架。如圖6-29所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.3注意：在使用框架布局后，“目標(biāo)”列表中將顯示全部框架名，所有框架名均可作為顯示鏈接文件的窗口。參照步驟設(shè)置其他導(dǎo)航文本的超級鏈接，其鏈接“目標(biāo)”均選擇“mainframe”。單擊

48、“保存”按鈕，保存修改。（5）編輯主框架mainFrame的內(nèi)容在主框架中單擊鼠標(biāo)，設(shè)置插入點。輸入如圖6-22所示的文本內(nèi)容并分別設(shè)置標(biāo)題、正文的文本屬性。在“頁面屬性”中設(shè)置主框架的背景顏色#FFFFE9。單擊“保存”按鈕，保存修改。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.2 應(yīng)用框架布局網(wǎng)頁應(yīng)用框架布局網(wǎng)頁設(shè)置框架與框架集的屬性設(shè)置框架與框架集的屬性 6.2.3（6）為框架集設(shè)置網(wǎng)頁標(biāo)題選中框架集。在“修改”菜單選擇“頁面屬性”選項，打開“頁面屬性”對話框。在“標(biāo)題/編碼”對話框的“標(biāo)題”文本框輸入框架集的名稱“柏林印象”。單擊“保存”按鈕，保存修改。（7）分別編輯被鏈接的網(wǎng)頁在站點窗口文件夾h

49、tml中，分別雙擊打開網(wǎng)頁blyx02.html、blyx03.html、blyx07.html。分別輸入對應(yīng)的景點介紹并分別設(shè)置標(biāo)題、正文的文本屬性。單擊“保存”按鈕，保存修改。（8）預(yù)覽網(wǎng)頁按快捷鍵F12預(yù)覽網(wǎng)頁。在網(wǎng)頁上單擊導(dǎo)航欄中的文本“博德博物館”，顯示結(jié)果如圖6-22所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁Div+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語之一。Div+CSS是一種網(wǎng)頁布局方法，這種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式，可實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。XHTML（The Extens

50、ible HyperText Markup Language，可擴展超文本標(biāo)識語言）是一種基于可擴展標(biāo)記語言（XML）、在HTML基礎(chǔ)上優(yōu)化和改進的的新語言。目的是基于XML應(yīng)用與強大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。在XHTML網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用Div+CSS的方式實現(xiàn)各種定位。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁Web標(biāo)準(zhǔn)標(biāo)準(zhǔn)6.3.111122233網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁Web標(biāo)準(zhǔn)標(biāo)準(zhǔn)6.3.111122233網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+

51、CSS布局網(wǎng)頁布局網(wǎng)頁Web標(biāo)準(zhǔn)標(biāo)準(zhǔn)6.3.11什么是什么是Web標(biāo)準(zhǔn)標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)，即網(wǎng)站標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。Web標(biāo)準(zhǔn)是由W3C（World Wide Web Consortium）和其他標(biāo)準(zhǔn)化組織制定的一套規(guī)范。符合Web標(biāo)準(zhǔn)的網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的網(wǎng)站標(biāo)準(zhǔn)也分三個方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言，主要包括XHTML和XML；表現(xiàn)標(biāo)準(zhǔn)語言，主要包括CSS；行為標(biāo)準(zhǔn)，主要包括對象模型（如W3C DOM）、ECMAScript等?；赪eb標(biāo)準(zhǔn)的網(wǎng)站設(shè)計核心在于如何運用眾多We

52、b標(biāo)準(zhǔn)中的各項技術(shù)來達到“表現(xiàn)”和“結(jié)構(gòu)”的分離。即，使用統(tǒng)一的Web表現(xiàn)層技術(shù)的標(biāo)準(zhǔn)設(shè)計網(wǎng)頁的表現(xiàn)，以便于通過不同瀏覽器或終端設(shè)備（計算機、手機等）向展示網(wǎng)頁內(nèi)容時，保持信息的一致性。Web標(biāo)準(zhǔn)中典型的應(yīng)用模式是Div+CSS。利用Div+CSS布局頁面，可以實現(xiàn)表現(xiàn)、結(jié)構(gòu)、行為三者分離。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁Web標(biāo)準(zhǔn)標(biāo)準(zhǔn)6.3.12Web標(biāo)準(zhǔn)的構(gòu)成標(biāo)準(zhǔn)的構(gòu)成（1）結(jié)構(gòu)。指網(wǎng)頁的設(shè)計結(jié)構(gòu)。結(jié)構(gòu)技術(shù)用于對網(wǎng)頁所使用的信息（文本、圖像、動畫等）進行分類和整理。（2）表現(xiàn)。指網(wǎng)頁的整體顯示屬性。表現(xiàn)技術(shù)用于控制已被結(jié)構(gòu)化的信息的整體顯示效果。包

53、括對位置、顏色、字體、大小等整體顯示的設(shè)置。W3C創(chuàng)建CSS的目的是用CSS控制整個網(wǎng)頁的布局，與XHTML所實現(xiàn)的結(jié)構(gòu)完全分離。表現(xiàn)與結(jié)構(gòu)完全分離，使站點的維護更加容易，這正是“Div+CSS”布局的一大特點。（3）行為。行為是對整個文檔的一個模型定義和交互行為的設(shè)置。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁Div的定義的定義6.3.2Div是一個標(biāo)識（標(biāo)簽），作用是標(biāo)識網(wǎng)頁上的一個區(qū)域。一個網(wǎng)頁的布局，可以通過若干個div標(biāo)識區(qū)域組成?？梢哉J(rèn)為Div是XHTML語言中的一個塊定義，相當(dāng)于一個容器，由起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容構(gòu)成。塊內(nèi)可以內(nèi)嵌表格（t

54、able）、文本（text）等其他XHTML元素（代碼）。但是，Div只負(fù)責(zé)整體區(qū)域（塊）的表現(xiàn)屬性設(shè)置，不包含對諸如表格等內(nèi)部元素屬性的設(shè)置。一般通過樣式表CSS格式化的方式設(shè)置Div標(biāo)識區(qū)域的整體表現(xiàn)屬性。Div代碼有以下兩種使用形式：內(nèi)容內(nèi)容使用id屬性，可為當(dāng)前Div指定一個id名稱，以便在CSS中使用id選擇符進行樣式編寫。同理，使用class屬性，也是為了在CSS中使用class選擇符進行樣式編寫。Div與CSS的關(guān)系可以歸納為：首先使用Div標(biāo)記區(qū)域，然后為這個Div編寫需要的CSS樣式，最后使用CSS樣式格式化Div標(biāo)記區(qū)域。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+

55、CSS布局網(wǎng)頁布局網(wǎng)頁應(yīng)用實例應(yīng)用實例利用利用Div+CSS布局網(wǎng)頁框架布局網(wǎng)頁框架6.3.3利用Div+CSS布局網(wǎng)頁，首先需要設(shè)計頁面的效果圖，然后對頁面結(jié)構(gòu)進行分析。從圖6-30所示的網(wǎng)頁效果圖可以看出，整個頁面分為導(dǎo)航區(qū)域、頭部區(qū)域、主體部分和底部區(qū)域。其中主體部分又分為左、中、右三列，整個頁面居中顯示。如圖6-31所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁應(yīng)用實例應(yīng)用實例利用利用Div+CSS布局網(wǎng)頁框架布局網(wǎng)頁框架6.3.3操作實例操作實例6-14 利用利用Div+CSS布局圖布局圖6-31所示的網(wǎng)頁框架所示的網(wǎng)頁框架操作步驟：操作步驟：（1）

56、搭建html框架代碼在站點窗口，新建網(wǎng)頁文件index.html。將頁面標(biāo)題設(shè)置為“利用Div+CSS布局網(wǎng)頁”。設(shè)置Div插入點。在“代碼”視圖中，將光標(biāo)定位在標(biāo)簽與中間。插入“導(dǎo)航區(qū)域”的Div標(biāo)簽“nav”。單擊“布局”工具欄的“插入Div標(biāo)簽”按鈕，打開“插入Div標(biāo)簽”對話框。設(shè)置“ID”為“nav”。如圖6-32所示。“插入”：下拉列表中的內(nèi)容將根據(jù)插入點所在位置而發(fā)生變化，通過在下拉列表中選擇不同選項，可以更精確地定位插入點的位置。“類”：選擇要應(yīng)用于Div標(biāo)簽的類樣式，如果要新建針對該Div標(biāo)簽的類樣式，可以在“類”文本框輸入樣式名，然后單擊“新建CSS規(guī)則”按鈕定義類樣式?！?/p>

57、ID”：如果要新建針對該Div標(biāo)簽的ID樣式，可在“ID”文本框輸入樣式名，然后單擊“新建CSS規(guī)則”按鈕定義ID樣式。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁應(yīng)用實例應(yīng)用實例利用利用Div+CSS布局網(wǎng)頁框架布局網(wǎng)頁框架6.3.3設(shè)置各項參數(shù)后，單擊“確定”按鈕，完成Div標(biāo)簽的插入。將光定位在“nav”的標(biāo)簽之后，重復(fù)步驟-，依次插入“ID”為“head”（頭部區(qū)域）、“main”（內(nèi)容區(qū)域）、“foot”（尾部區(qū)域）的。在“ID”為“main”的中間，插入“l(fā)eft”（左）、“center”（中）、“right”（右）三個。插入完成后的代碼及設(shè)計效果如圖

58、6-33所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁應(yīng)用實例應(yīng)用實例利用利用Div+CSS布局網(wǎng)頁框架布局網(wǎng)頁框架6.3.3設(shè)置網(wǎng)頁整體的居中顯示效果。方法一：將nav、header、main、foot分別設(shè)置為居中。方法二：為上述標(biāo)簽增加設(shè)置一個父標(biāo)簽“contain”。通過設(shè)置父標(biāo)簽的居中，完成網(wǎng)頁整體的居中設(shè)置。增加后的代碼如圖6-34所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁應(yīng)用實例應(yīng)用實例利用利用Div+CSS布局網(wǎng)頁框架布局網(wǎng)頁框架6.3.3（2）設(shè)置CSS樣式表選擇“文件”菜單的“新建”選項，進入“新建文檔

59、”對話框，在“空白頁”的“頁面類型”中，選擇“css”，單擊“創(chuàng)建”按鈕。在“文件”菜單選擇“保存”選項，以文件名“l(fā)ayout.css”，存入CSS文件夾。設(shè)置全局的樣式。將圖6-35所示的代碼寫入layout.css中。按Ctrl+S鍵保存。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁應(yīng)用實例應(yīng)用實例利用利用Div+CSS布局網(wǎng)頁框架布局網(wǎng)頁框架6.3.3將樣式表與網(wǎng)頁關(guān)聯(lián)?；氐健癷ndex.html”文檔窗口，在“CSS樣式”面板，單擊“附加樣式表”按鈕 。如圖6-36所示。在打開的“鏈接外部樣式表”對話框，單擊“瀏覽”按鈕，選中CSS文件夾下的文件“l(fā)ay

60、out.css”，單擊“確定”按鈕。如圖6-37所示。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作6.3 應(yīng)用應(yīng)用Div+CSS布局網(wǎng)頁布局網(wǎng)頁應(yīng)用實例應(yīng)用實例利用利用Div+CSS布局網(wǎng)頁框架布局網(wǎng)頁框架6.3.3（3）設(shè)置各Div區(qū)域的樣式表打開樣式表文件layout.css。在“定義全局樣式”的代碼下方，將圖6-38所示代碼寫入。為了便于觀察，將部分Div區(qū)域設(shè)置了背景色。按快捷鍵Ctrl + S保存樣式表文件layout.css。打開index.html文件，按F12鍵預(yù)覽網(wǎng)頁。設(shè)置結(jié)果如圖6-39所示。至此，網(wǎng)頁的整體框架布局完畢，讀者可利用已經(jīng)學(xué)習(xí)過的知識繼續(xù)完成網(wǎng)頁設(shè)計。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與