網(wǎng)頁制作教程第04課

第4章布局頁面學(xué)習(xí)目標(biāo)本章要點上機練習(xí)習(xí)題學(xué)習(xí)目標(biāo)在網(wǎng)頁布局方面，表格起著舉足輕重的作用，通過設(shè)置表格以及單元格的屬性，可以對頁面中的元素進(jìn)行準(zhǔn)確定位，有序地排列數(shù)據(jù)并對頁面進(jìn)行更加合理的布局。布局視圖是網(wǎng)頁設(shè)計中一項重要的內(nèi)容，利用頁面布局功能可以將以前繁瑣的頁面布局工作變得簡單而輕松。本章將講解利用表格和頁面布局功能布局頁面的方法。本章要點創(chuàng)建表格編輯表格布局視圖模式頁面布局的基本應(yīng)用創(chuàng)建表格表格在網(wǎng)頁制作中的應(yīng)用非常廣泛，它可以使頁面層次更清晰，條理更清楚，可以嚴(yán)格地控制對象擺放的位置，對網(wǎng)頁中的文本、圖像、Flash動畫等元素進(jìn)行準(zhǔn)確定位，并能有序地排列各種頁面數(shù)據(jù)。表格的元素組成插入表格表格的元素組成表格主要由行、列、單元格和邊框4種元素組成。表格的元素組成表格中4種元素的含義分別如下：單元格：表格中的每一個小格稱為一個單元格。行：水平方向的一排單元格稱之為一行。表格共有5行。列：垂直方向的一排單元格稱之為一列。表格共有4列。邊框：組成表格的線條稱之為邊框。插入表格在Dreamweaver8中，插入表格可以通過“常用”面板或“插入”菜單來完成。插入表格“表格”對話框中主要參數(shù)的含義分別如下：“行數(shù)”文本框：用于設(shè)置插入表格的行數(shù)?！傲袛?shù)”文本框：用于設(shè)置插入表格的列數(shù)?！氨砀駥挾取蔽谋究颍河糜谠O(shè)置插入表格的寬度。在其右側(cè)的下拉列表框中可以選擇表格的寬度單位，有“像素”和“百分比”兩種。插入表格“邊框粗細(xì)”文本框：用于設(shè)置表格邊框線的粗細(xì)，以像素為單位?！皢卧襁吘唷蔽谋究颍河糜谠O(shè)置單元格中內(nèi)容與單元格邊界間的距離，以像素為單位。“單元格間距”文本框：用于設(shè)置表格中單元格間的距離，以像素為單位?！纠?-1】通過“常用”面板在頁面中插入一個5行3列的表格。表格的編輯合理運用表格對頁面布局有著至關(guān)重要的作用?？梢哉f表格是Dreamweaver8頁面布局的核心。但直接創(chuàng)建出來的表格往往不能滿足需要，還需對其進(jìn)行編輯，使其符合要求，下面就對如何編輯表格進(jìn)行介紹。選擇表格元素輸入頁面元素設(shè)置表格屬性添加/刪除行或列單元格的合并及拆分應(yīng)用舉例——創(chuàng)建細(xì)線表格選擇表格元素在對表格進(jìn)行編輯操作之前，首先應(yīng)掌握如何選中需要編輯的表格元素。對于表格而言，可以選擇單行、單列、多行、多列、連續(xù)或不連續(xù)的單元格及整個表格。選擇單行或者單列選擇連續(xù)的多行或多列選擇不連續(xù)的多行或多列選擇連續(xù)的單元格選擇不連續(xù)的單元格選擇整個表格選擇單行或者單列要選擇表格的行或者列，可將鼠標(biāo)光標(biāo)指向該行的左邊線或該列的上邊線并單擊，即可選擇單行或者單列。當(dāng)表格的某個行或列被選擇后，選擇的行或列中所有單元格四周都會出現(xiàn)黑色粗框。選擇單行和選擇單列選擇連續(xù)的多行或多列如果要選擇多行或多列相鄰的單元格，可將鼠標(biāo)光標(biāo)移動到需要選擇行的左側(cè)邊框處或列的上方邊框處，當(dāng)其變?yōu)楹谏^形狀時，單擊鼠標(biāo)并拖動即可選擇相鄰的多行或多列。選擇連續(xù)的多行和選擇連續(xù)的多列選擇不連續(xù)的多行或多列如果要選擇不相鄰的多行或多列，可先選擇一行或一列，然后按住Ctrl鍵并依次在其他行的左邊框或列的上邊框單擊，即可選擇不相鄰的多行或多列。選擇不連續(xù)的多行和選擇不相鄰的多列選擇連續(xù)的單元格先選擇一個單元格，然后按住Shift鍵并單擊其他要選擇的單元格，或在一個單元格中單擊并橫向或縱向拖動鼠標(biāo)，即可選擇多個連續(xù)的單元格。選擇不連續(xù)的單元格按住Ctrl鍵，分別單擊不連續(xù)的各單元格即可，若再次單擊已被選擇的單元格，則可取消該單元格的選中狀態(tài)。選擇整個表格選擇整個表格有多種方法。最簡單的方法有兩種，第一種是將鼠標(biāo)光標(biāo)指向表格框線，當(dāng)出現(xiàn)紅色外框線時單擊；第二種方法是將鼠標(biāo)光標(biāo)置于表格單元格中，然后單擊狀態(tài)欄中的“<table>”標(biāo)簽。選擇整個表格輸入頁面元素創(chuàng)建表格后，通常需要在表格中輸入文本、插入圖像等頁面元素，也可以在單元格中插入表格或?qū)ΤＲ?guī)數(shù)據(jù)進(jìn)行編輯操作。在表格中插入文本插入圖像嵌套表格在表格中插入文本在表格中插入文本，只需在表格的單元格中直接輸入文本或?qū)?fù)制的文本粘貼到表格單元格中即可。插入圖像在表格中插入圖像與直接在網(wǎng)頁中插入圖像的方法相同。【例4-2】在表格的某個單元格中插入圖像。嵌套表格在表格的單元格中可以再插入表格，插入單元格中的表格稱為嵌套表格。嵌套表格可以將單元格再分為許多行和列，并且可以無限制地插入。但嵌套表格插入得越多，瀏覽器的下載時間就越長，因此嵌套表格的層數(shù)不應(yīng)過多，一般不要超過3層。設(shè)置表格屬性在Dreamweaver8中，通過設(shè)置表格和單元格的屬性，可以修改表格和單元格的各項參數(shù)，使其滿足布局需求。下面將分別介紹表格和單元格的屬性設(shè)置設(shè)置表格屬性置單元格屬性設(shè)置表格屬性選擇頁面中插入的表格，其“屬性”面板。設(shè)置表格屬性通過表格“屬性”面板可以設(shè)置表格的名稱、行列數(shù)、寬度和高度等參數(shù)。各參數(shù)的具體含義如下：“表格Id”下拉列表框：用于設(shè)置表格的名稱，可在該下拉列表框中直接輸入。“行”文本框：用于設(shè)置表格的行數(shù)。“列”文本框：用于設(shè)置表格的列數(shù)。“寬”文本框：用于設(shè)置表格的寬度，其單位是“像素”或“%”。設(shè)置表格屬性“高”文本框：設(shè)置表格的高度，其單位的設(shè)置同“寬”文本框相同?！疤畛洹蔽谋究颍涸O(shè)置單元格內(nèi)容與邊框的距離?！伴g距”文本框：設(shè)置每個單元格間的距離。“對齊”下拉列表框：設(shè)置表格對齊方式，有左對齊、居中對齊和右對齊3種?！斑吙颉蔽谋究颍罕砀襁吙?qū)挾龋韵袼貫閱挝?，?dāng)數(shù)值為“0”時沒有邊框。設(shè)置表格屬性設(shè)置表格屬性設(shè)置表格屬性“背景顏色”顏色框：用于設(shè)置表格的背景顏色?！氨尘皥D像”文本框：用于設(shè)置表格的背景圖像?！斑吙蝾伾鳖伾颍河糜谠O(shè)置表格邊框的顏色。設(shè)置單元格屬性通過“屬性”面板可以單獨設(shè)置單元格的屬性，將光標(biāo)放置于單元格中或單擊要設(shè)置屬性的單元格后，單元格“屬性”面板。設(shè)置單元格屬性通過單元格“屬性”面板可以設(shè)置單元格中內(nèi)容的對齊方式、單元格的寬度和高度、背景顏色和背景圖像等參數(shù)。單元格“屬性”面板中各項參數(shù)的含義如下：“水平”下拉列表框：設(shè)置單元格中內(nèi)容的水平對齊方式，有默認(rèn)、左對齊、居中對齊和右對齊4種方式?！按怪薄毕吕斜砜颍涸O(shè)置單元格中內(nèi)容的垂直對齊方式，有默認(rèn)、頂端、居中、底部和基線5種方式。設(shè)置單元格屬性“寬”、“高”文本框：設(shè)置單元格寬度和高度?！氨尘啊蔽谋究颍涸O(shè)置單元格的背景圖像?！氨尘邦伾鳖伾颍涸O(shè)置單元格的背景顏色?！斑吙颉鳖伾颍涸O(shè)置單元格邊框的顏色。設(shè)置單元格屬性添加/刪除行或列為了制作的需要，有時需在已經(jīng)創(chuàng)建的表格中添加或刪除行或列。添加行或者列刪除行或者列添加行或者列將光標(biāo)放置到表格的單元格內(nèi)，選擇“修改/表格/插入行”命令，或?qū)⒐鈽?biāo)放置到單元格內(nèi)，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格/插入行”命令，或按Ctrl+M快捷鍵都可以添加一行。將光標(biāo)放置到表格的單元格內(nèi)，選擇“修改/表格/插入列”命令，或?qū)⒐鈽?biāo)放置到單元格內(nèi)，單擊鼠標(biāo)右鍵，在彈出快捷菜單中選擇“表格/插入列”命令，或按Ctrl+Shift+A快捷鍵都可以添加一列。刪除行或者列將光標(biāo)放置到單元格內(nèi)，選擇“修改/表格/刪除行”命令，或單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格/刪除行”命令可刪除一行。將光標(biāo)放置到單元格內(nèi)，選擇“修改/表格/刪除列”命令，或單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格/刪除列”命令可刪除一列。單元格的合并及拆分為了頁面制作的需要，有時需要對已創(chuàng)建表格中的單元格進(jìn)行合并或拆分，下面分別介紹。合并單元格拆分單元格合并單元格合并單元格的前提是要合并的單元格必須是連續(xù)的多個單元格，對不連續(xù)的單元格無法進(jìn)行合并操作。合并單元格比較簡單，只需選擇要合并的單元格后，執(zhí)行相應(yīng)的命令即可?！纠?-3】合并連續(xù)單元格。拆分單元格拆分單元格是將單個單元格拆分為多個單元格，在拆分時需指定拆分的行數(shù)或列數(shù)。應(yīng)用舉例——創(chuàng)建細(xì)線表格細(xì)線表格就是邊框只有1像素粗細(xì)的表格，但在Dreamweaver中，將表格邊框設(shè)置為“1”時，所創(chuàng)建的表格的邊框其實并不止1像素。因此要創(chuàng)建細(xì)線表格，可以將表格的單元格間距設(shè)置為“1”，然后通過分別為表格和單元格設(shè)置不同的背景顏色來實現(xiàn)。布局視圖模式為了簡化利用表格布局頁面的過程，Dreamweaver提供了布局視圖模式。在布局視圖模式下可以方便地繪制表格、單元格，并定制和移動這些表格單元格。下面對布局視圖模式進(jìn)行講解。布局視圖模式介紹布局視圖模式的切換和退出布局視圖模式介紹前面介紹的用表格進(jìn)行網(wǎng)頁布局定位的方法是通過直接設(shè)定表格的參數(shù)來實現(xiàn)的，對于簡單的情況，這種方法尚能勝任，如果布局較復(fù)雜，手工設(shè)置表格則是一件極其繁瑣的工作，而通過布局視圖模式則可方便地完成。當(dāng)在頁面中創(chuàng)建布局單元格時，Dreamweaver會自動創(chuàng)建一個布局表格用來放置布局單元格。布局單元格不能存放在布局表格之外，在創(chuàng)建頁面布局時可以在同一個布局表格中放置多個布局單元格或創(chuàng)建多個布局表格。布局視圖模式的切換和退出切換到布局視圖模式頁面布局的基本應(yīng)用在布局視圖模式中，可以繪制布局表格或布局單元格，并分別設(shè)置其屬性。繪制布局表格和單元格清除布局表格高度設(shè)置布局表格寬度移動/調(diào)整布局表格和布局單元格應(yīng)用舉例——在頁面中使用布局視圖繪制布局表格和單元格繪制布局表格和單元格繪制布局表格繪制布局單元格繪制布局表格在布局視圖模式下繪制布局表格。布局表格以綠色的輪廓線、灰色背景顯示，在表格的左上角會顯示表格標(biāo)簽，通過標(biāo)簽，可以分辨并選擇布局表格，其寬度值顯示在表格下邊線中間。繪制布局單元格在布局視圖模式下繪制布局單元格。頁面布局表格不能相互重疊，但可以將一個布局表格繪制在另一個布局表格中，以生成嵌套表格，而且對外部表格所進(jìn)行的更改不會影響嵌套表格中的單元格。清除布局表格高度在Dreamweaver中，創(chuàng)建布局表格時會自動為所有創(chuàng)建的表格設(shè)置高度，當(dāng)向其中輸入文本和插入圖像時，就不需要再設(shè)置高度。清除布局表格高度有以下兩種方法：清除布局表格高度設(shè)置布局表格寬度在布局視圖模式中可以設(shè)置布局表格的寬度，包括固定寬度和自動伸展。設(shè)置固定寬度設(shè)置自動伸展設(shè)置固定寬度設(shè)置布局表格寬度為固定寬度。設(shè)置自動伸展將布局表格寬高設(shè)置為自動伸展有以下兩種方法：選擇要設(shè)置自動伸展的布局表格后，在“屬性”面板中選中“自動伸展”單選按鈕。單擊布局表格標(biāo)題欄上的列標(biāo)題菜單，在彈出的下拉菜單中選擇“列寬設(shè)置為自動”命令。移動/調(diào)整布局表格和布局單元格在頁面布局中，可以通過移動操作簡捷地定位布局表格和布局單元格，但在布局表格或布局單元格的周圍，必須要有一定的可移動空間，這樣被灰色包圍的布局單元格與嵌套表格才可以被移動。用鍵盤上的方向鍵來控制布局表格或布局單元格的移動，每次只能移動1像素的距離；按Shift鍵的同時用方向鍵移動，每次可移動10像素的距離。移動/調(diào)整布局表格和布局單元格調(diào)整布局單元格尺寸時，首先應(yīng)選中該單元格，使之出現(xiàn)邊角控制點。將光標(biāo)移動到邊角控制點并拖動鼠標(biāo)，即可調(diào)整單元格的大小。布局單元格的邊界和大小不能超出它所在的布局表格。調(diào)整布局表格尺寸時，首先要選擇該表格，然后將鼠標(biāo)光標(biāo)移動到邊角控制點，根據(jù)箭頭方向拖動鼠標(biāo)可調(diào)整布局表格的大小。顯示布局單元格控制點和調(diào)整布局表格的大小

應(yīng)用舉例——在頁面中使用布局視圖

下面在布局視圖模式中進(jìn)行頁面的布局，掌握布局視圖模式的使用方法，完成布局后的頁面（光盤:\最終效果\第4章\index2.html）。上機練習(xí)本章上機練習(xí)將分別使用表格和布局視圖模式對“英雄巴喬”頁面（光盤:\實例素材\第4章\baqiao.html）進(jìn)行布局并添加圖像，完成后的最終效果如圖4-47所示（光盤:\最終效果\第4章