第7章 用表格來(lái)布局頁(yè)面

1、第7章用表格來(lái)布局頁(yè)面 前面章節(jié)所介紹的各種網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的插入，采用的都是直接插入的方式。通過(guò)這種方式將網(wǎng)頁(yè)元素插入到網(wǎng)頁(yè)中，以此生成的網(wǎng)頁(yè)，在瀏覽器窗口運(yùn)行時(shí)，其中的文本或者圖像會(huì)隨著IE窗口的放大或者縮小而發(fā)生變化，這就使得網(wǎng)頁(yè)處于一種不穩(wěn)定的狀態(tài)。如果要想改變這種現(xiàn)象，最簡(jiǎn)單的辦法就是使用表格。表格不僅能夠控制網(wǎng)頁(yè)在IE窗口中的位置，還可以控制網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的顯示位置，這樣以來(lái)無(wú)論IE窗口如何變化，其中的網(wǎng)頁(yè)都會(huì)保持默認(rèn)的狀態(tài)，從而對(duì)網(wǎng)頁(yè)的穩(wěn)定性起到一定的作用。7.1 7.1 創(chuàng)建表格創(chuàng)建表格 可以這樣說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)就是從創(chuàng)建表格開(kāi)始的，因?yàn)樵贒reamweaver中，表格除了具有歸

2、納的作用外，更具有定位和組合的作用，因此能夠?qū)⒃囟ㄎ辉诰W(wǎng)頁(yè)中的任何想要的顯示區(qū)域中。由引可見(jiàn)，網(wǎng)頁(yè)中表格創(chuàng)建是網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)。下面開(kāi)始對(duì)網(wǎng)頁(yè)中的表格進(jìn)行介紹。7.1.1 插入表格插入表格 對(duì)于較為復(fù)雜的網(wǎng)頁(yè)來(lái)說(shuō)，是有多個(gè)表格組成的，并不是只有一個(gè)表格，甚至包括表格中的表格組合而成，也就是嵌套表格。嵌套表格，顧名思義就是在表格中插入表格。在這種情況下，可以看作是由總表格負(fù)責(zé)整體的排版，由嵌套的表格來(lái)承接各個(gè)子欄目的排版，并插入到總表格的相應(yīng)位置中。各自發(fā)揮它的作用。 回顧一下表格的概念，表格就是由一些粗細(xì)不同的橫線(xiàn)和豎線(xiàn)構(gòu)成的，橫的叫做行，豎的叫做列，由行和列相交的一個(gè)個(gè)方格稱(chēng)為單元格。單元格

3、是表格的基本單位，每一個(gè)單元格都是一個(gè)獨(dú)立的正文輸入?yún)^(qū)域，可以輸入文字和圖形，并單獨(dú)進(jìn)行排版和編輯。1. 插入表格的方法插入表格的方法 方法1：在菜單欄中，選擇“插入”“表格”菜單項(xiàng)，彈出如圖7-3“表格”對(duì)話(huà)框，在該對(duì)話(huà)框中，可以設(shè)置表格的行數(shù)、列數(shù)、表格寬度、單元格間距、邊距和邊框粗細(xì)等選項(xiàng)。 圖7-1 菜單操作方法方法2：在插入：在插入“面板面板”中，選擇中，選擇“常用常用”“表格表格”彈出如圖彈出如圖7-3所示的表格設(shè)置對(duì)話(huà)框所示的表格設(shè)置對(duì)話(huà)框。圖7-2 “插入”面板 圖 7-3 表格設(shè)置 在“表格”對(duì)話(huà)框中設(shè)置相應(yīng)的參數(shù)，參數(shù)的含意如下： 表格的寬度：以像素或者百分比為單位確定表格

4、的寬度，可以在下拉列表中選擇設(shè)置寬度的不同單位。當(dāng)表格的單位為百分比時(shí)，表格的寬度會(huì)在IE瀏覽器窗口會(huì)隨著窗口變化而變化；但當(dāng)表格寬度的單位為像素時(shí)，則不會(huì)出現(xiàn)這樣的情況。 邊框粗細(xì)：用來(lái)設(shè)置表格邊框的寬度。 單元格邊距：指定單元格邊距和單元格內(nèi)容之間的像素?cái)?shù)，即單元格內(nèi)部空白的大小，如果不希望顯示邊框時(shí)，設(shè)置為“0”像素即可。 單元格間距：指定相鄰單元格之間的像素?cái)?shù)，即單元格與單元格之間的距離。 標(biāo)題：定義表格的標(biāo)題，即在表格外顯示的標(biāo)題。 對(duì)齊標(biāo)題按鈕：定義表格標(biāo)題的對(duì)齊方式。 摘要：可以此處對(duì)表格進(jìn)行注釋。2. 插入表格的參數(shù)設(shè)置插入表格的參數(shù)設(shè)置 圖7-4 參數(shù)設(shè)置 圖7-5 創(chuàng)建的表

5、格 經(jīng)過(guò)如圖7-4的參數(shù)設(shè)置，可在網(wǎng)頁(yè)中創(chuàng)建如圖7-5所示的表格。3. 插入嵌套表格（1）首先在網(wǎng)頁(yè)中先插入創(chuàng)建一個(gè)表格。如圖7-5所示。（2）將光標(biāo)定位在要在其中嵌入表格的單元格。（3）按照前面剛講的插入方法和表格的參數(shù)設(shè)置插入一個(gè)表格。如圖7-6所示。圖7-6 嵌套表格7.1.2 在表格中輸入網(wǎng)頁(yè)元素在表格中輸入網(wǎng)頁(yè)元素 在表格創(chuàng)建完成后，就可以向表格中添加相應(yīng)的網(wǎng)頁(yè)元素。在表格中插入文本或圖像的方法與直接在網(wǎng)頁(yè)中插入的方法基本相同，下面介紹在表格中插入元素的操作方法。 1. 在表格中輸入文本 （1）打開(kāi)或新建一個(gè)網(wǎng)頁(yè)。 （2）在網(wǎng)頁(yè)中插入創(chuàng)建一個(gè)表格。 （3）將光標(biāo)定位在要輸入內(nèi)容的單元

6、格。 （4）向所定位的單元格輸入文本。如圖7-7所示。 2. 在表格中插入圖像 在表格中導(dǎo)入圖像的方法與在網(wǎng)頁(yè)表格中插入文本的方式基本相同，都是先插入表格，將光標(biāo)放置在單元格中，然后插入圖像文件。 如果圖像超出了單元格大小，單元格會(huì)自動(dòng)擴(kuò)展。插入圖像后效果如圖7-8所示。圖7-7 輸入文本 除了上面講的在網(wǎng)頁(yè)表格單元格中插入文本、圖像元素以處，同樣可以插入FLV、SWF等文件。也可以導(dǎo)入和導(dǎo)出數(shù)據(jù)。圖7-8 插入圖像7.2 設(shè)置表格及單元格的屬性設(shè)置表格及單元格的屬性 對(duì)在Dreamweaver CS5中網(wǎng)頁(yè)中插入表格，并對(duì)表格進(jìn)行一定的設(shè)置，通過(guò)對(duì)表格和單元格的設(shè)置，在滿(mǎn)足網(wǎng)頁(yè)設(shè)計(jì)布局要求的

7、同時(shí)，滿(mǎn)足用戶(hù)瀏覽需求。下面介紹設(shè)置表格及單元格的屬性方面的知識(shí)。 在設(shè)置表格屬性時(shí)，除了可在通過(guò)菜單操作“插入”表格彈出的對(duì)話(huà)框中進(jìn)行一些設(shè)置外，主要是通過(guò)表格所在頁(yè)面下方的“屬性”面板來(lái)實(shí)現(xiàn)的。兩者的區(qū)別是前者是在插入表格時(shí)進(jìn)行的，而后者則是在插入表格以后進(jìn)行設(shè)置。 在文檔中插入表格之后，將光表格選中，然后在“屬性”面板進(jìn)行設(shè)置。如果沒(méi)有顯示“屬性”面板，可以選擇菜單中的“窗口”“屬性”打開(kāi)“屬性”面板。如圖7-9所示。7.2.1 設(shè)置表格屬性設(shè)置表格屬性圖7-9 表格“屬性”面板 表格“屬性”面板主要參數(shù)含意如下： 表格ID：定義表格在網(wǎng)頁(yè)中文檔中唯一編號(hào)標(biāo)識(shí)?？梢暂斎胍粋€(gè)表格的名稱(chēng)。

8、填充：用于定義表格邊框與其中各單元格之間的距離，單位為像素。如果不需要此設(shè)置，可設(shè)置為“0”。 對(duì)齊：定義表格中單元格內(nèi)容的對(duì)齊方式，默認(rèn)為兩端對(duì)齊。用戶(hù)可設(shè)定為左對(duì)齊、居中對(duì)齊、右對(duì)齊等。 類(lèi)：在該下拉列表框中可以將CSS規(guī)則應(yīng)用與對(duì)象。 表格設(shè)置區(qū)域（表格尺寸）：“清除列寬”按鈕，將已經(jīng)定義的表格寬度清除，轉(zhuǎn)換為無(wú)行高定義的表格，使表格隨內(nèi)容的增加而自動(dòng)擴(kuò)展寬度；“將表格寬度轉(zhuǎn)換成像素”按鈕，將以百分比為單位的表格寬度轉(zhuǎn)換為以像素為單位的表格寬度；“將表格當(dāng)前寬度轉(zhuǎn)成百分比”按鈕，將以像素為單位的表格寬度轉(zhuǎn)換為以百分比為單位的表格寬度；“清除行高”按鈕，將行高清除轉(zhuǎn)換成無(wú)行高定義的表格，使

9、行高隨著內(nèi)容的增加而自動(dòng)擴(kuò)展行高。 Fireworks原文檔：如果在設(shè)計(jì)表格時(shí)使用了Fireworks源文件作為表格的樣式設(shè)置，則可通過(guò)此項(xiàng)目管理Fireworks的表格設(shè)置，并將其應(yīng)用到表格中。 在“屬性”檢查器中，還可以直接設(shè)置表格的各按鈕，這些按鈕可以在設(shè)置表格寬度或者高度之間轉(zhuǎn)換。7.2.2 設(shè)置單元格屬性設(shè)置單元格屬性 表是由一個(gè)個(gè)單元格組成的。所以對(duì)單元格的設(shè)置是對(duì)整個(gè)表進(jìn)行設(shè)置不可缺少的重要組成部分，下面對(duì)單元格屬性的設(shè)置作一介紹。圖7-10 單元格“屬性”面板 首先選中表格中的某一單元格，則會(huì)出現(xiàn)針對(duì)單元格進(jìn)行設(shè)置的屬性面板。如圖7-10所示。 單元格的“屬性”面板分為兩部分：

10、即上半部分和下半部分。 上半部分用來(lái)對(duì)單元格內(nèi)的文本進(jìn)行編輯；下半部分則針對(duì)單元格自身的屬性進(jìn)行設(shè)置。 對(duì)文本進(jìn)行操作在前面章節(jié)中已經(jīng)講過(guò)了，下面主要介紹對(duì)單元格本身的屬性設(shè)置。 水平和垂直：是指單元格內(nèi)容水平和垂直時(shí)的對(duì)齊方式?？善湎吕斜碇羞M(jìn)行選擇相應(yīng)的方式。 不換行：在其后面復(fù)選框中若打上“鉤”，則該單元格的內(nèi)容不會(huì)自動(dòng)換行。該選項(xiàng)屬于強(qiáng)制不換行，所有內(nèi)容在一行中顯示。選擇不換行選項(xiàng)，往往會(huì)撐大整個(gè)表格，所以建議一般不要使用這種方式。 合并單元格：在“屬性”面板“單元格”下方為合并單元按鈕，可對(duì)兩個(gè)以上的單元格進(jìn)行合并。 拆分單元格：按鈕，可以將一個(gè)單元格拆分成幾個(gè)按行或按列排列的單元格

11、，也可對(duì)兩個(gè)以上的單元格進(jìn)行合并以后再進(jìn)行拆分。標(biāo)題：在其后面復(fù)選框中若打上“鉤”，則設(shè)置該單元格為標(biāo)題單元格，表示將當(dāng)前單元格的內(nèi)容變成標(biāo)題。選中該復(fù)選框后，當(dāng)前單元格的內(nèi)容將自動(dòng)居中并加粗。如圖7-11所示。 背景顏色：用來(lái)設(shè)置整個(gè)單元格的背景顏色。在時(shí)行單元格的基本操作前。圖7-11 表中文本變成標(biāo)題7.3 表格與單元格具體操作表格與單元格具體操作7.3.1 表格的操作 在計(jì)算機(jī)中進(jìn)行操作時(shí)，要先選上被處理的對(duì)象，同樣對(duì)表格操作也不例外，對(duì)表格來(lái)說(shuō)其基本操作主要包括對(duì)表格行與列的操作。可以采取以下辦法選中表格。 （1）將光標(biāo)定位在某一單元格中，然后選擇“修改”“表格”“選擇表格”命令，如

12、圖7-12所示。圖7-12 表格選擇菜單 （2）單擊表格任意一個(gè)邊框，可以選擇上整個(gè)表格。如圖7-13所示。 （3）將光標(biāo)定位在一個(gè)單元格中，此時(shí)標(biāo)簽欄顯示出表格標(biāo)簽，單擊標(biāo)簽即可選取表格，如圖7-14所示。 圖7-13 用鼠標(biāo)選取表格 圖 7-14 單擊選取表格（4）將鼠標(biāo)移動(dòng)到表格的上邊框或下邊框，當(dāng)鼠標(biāo)尾部變成如圖7-15所示的形狀時(shí)，單擊即可選取整個(gè)表。圖7-15 鼠標(biāo)選取表格（5）將光標(biāo)定位在單元格中，右擊在彈出的快捷菜單中“表格”“表格表格”命令。如圖7-16所示 圖7-16 快捷菜單選取表7.3.2 網(wǎng)頁(yè)中表格行與列的操作網(wǎng)頁(yè)中表格行與列的操作 行與列是表格使用中最常用的操作，下

13、面主要介紹網(wǎng)頁(yè)中表格行與列的操作。 1.列的操作 （1）新建或打開(kāi)一個(gè)網(wǎng)頁(yè)，在其中建立一個(gè)表格，用鼠標(biāo)單擊表格的邊框，出現(xiàn)綠色標(biāo)注。然后將鼠標(biāo)指針移動(dòng)到需要選中的那一個(gè)列的下方，單擊綠線(xiàn)中的三角按鈕，如圖7-17所示。 圖7-17 選擇列 圖7-18 選擇菜單命令 （2）在彈出的快捷菜單中選擇“選擇列”命令，如圖7-18所示。 （4）經(jīng)過(guò)上面操作，第一列的兩個(gè)單元格邊框顏色都加粗了，說(shuō)明此列已經(jīng)被選取了。如圖7-19所示。圖7-19 選中表中列2.行的操作（1）利用圖7-17的表格。（2）將鼠標(biāo)指針移到表的第一行左側(cè)邊框上，鼠標(biāo)指針變成指向右側(cè)的箭頭時(shí)，單擊則出現(xiàn)如圖7-20所示。 圖7-20

14、 選取行 圖7-22 刪除列 3.刪除行和列 （1）選擇需要?jiǎng)h除和行與列，然后按鍵盤(pán)上的Delete鍵就可以刪除行或者是列，但在電子表格中使用Delete鍵時(shí)刪除的是表格中的內(nèi)容。 （2）將光標(biāo)定位在要?jiǎng)h除的行或列中的某一單元格中，按鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”“刪除行”或者“刪除列”命令。如圖7-21所示。圖7-21 刪除行、列操作命令 （3）刪除列后的表格，如圖7-22所示。 （4）選擇完整一行或一列，再選擇“編輯”“清除”命令。 注意：注意：在對(duì)表格中的行或列進(jìn)行刪除時(shí)，只能刪除整行或整列，無(wú)法刪除一個(gè)幾個(gè)單元格，在這一點(diǎn)也和電子表格軟件中的操作是不一樣的。 4.插入行或列

15、插入行或列的最大特點(diǎn)是在表格中需要增加行或列時(shí)，不用再建立新的表格，通過(guò)增加行與列實(shí)現(xiàn)一個(gè)新表，從而滿(mǎn)足大家的需要。 （1）在如圖7-23表中，將鼠標(biāo)定位在準(zhǔn)備插入行或列的單元格。 圖7-23 定位參照行或列 圖7-25 插入了行和列 （2）在菜單欄選擇“插入”“表格對(duì)象”“在上面插入行”命令。在插入列時(shí)只是選擇“在左邊插入列”命令。如圖7-24所示。圖7-24 圖插入行或列菜單命令 （3）插入行和列的結(jié)果如上圖7-25所示。 另外，若在表格中的最一個(gè)單元格中按Tab鍵，則自動(dòng)在表格中最后一行之后添加一個(gè)新行。 （4）若要插入多行多列時(shí)操作如下： 將光標(biāo)定位在作為參照的某一單元格。 在菜單欄選

16、擇“修改”“表格”“插入行或列”命令。 彈出“插入行或列”對(duì)話(huà)框，在“插入”中選擇“行”或“列”。在“行數(shù)”或“列數(shù)”文本框中輸入所需要的行或列的數(shù)目。在“位置”中選擇在參照光標(biāo)之上還是之下單選選項(xiàng)。如圖7-26所示?！按_定”后結(jié)果如圖7-27所示。 圖7-26 多行多列 圖7-27 插入兩行兩列 7.3.3 單元格的操作 在Dreamweaver CS5中可以對(duì)單元格執(zhí)行合并與拆分操作，還可以剪切、復(fù)制、粘貼單元格并存留單元格的格式，下成作一介紹。 同樣在對(duì)網(wǎng)頁(yè)中的單元格進(jìn)行操作進(jìn)，首先要選中單元格，可以用以下辦法選擇單元格。 1.選取單元格方法 （1）將光標(biāo)定位在某一單元格內(nèi)，此時(shí)標(biāo)簽欄顯

17、示出了表格標(biāo)簽，單擊即可選取單元格，如圖7-28所示。圖7-28 選擇單元格 （2）按住Ctrl鍵單擊要選取的單元格。如果按住Ctrl鍵不放，依次單擊單元格可以選取多個(gè)單元格，選取的單元格可以是不連續(xù)的，也可以是連續(xù)的。 （3）按Ctrl+組合鍵選取當(dāng)前光標(biāo)所在的單元格。（4）將光標(biāo)定位在單元格中，或者單擊一個(gè)單元格，在菜單欄中選擇“編輯”“全選”命令，如圖7-29所示。圖7-29 菜單操作 （5）若要選擇一個(gè)矩形的單元格區(qū)域，可以使用以下方法實(shí)現(xiàn)： 從一個(gè)單元格手動(dòng)拖到另一個(gè)單元格。 單擊一個(gè)單元格，然后按住shift鍵單擊另一個(gè)單元格，這兩個(gè)單元格定義的直線(xiàn)或矩形區(qū)域中的所有單元格被選中。

18、 按住Ctrl鍵的同時(shí)單擊要選擇的行或列。 2.拆分單元格 在Dreamweaver中可以根據(jù)網(wǎng)頁(yè)的具體布局，利用表格中將一個(gè)單元格拆分成多個(gè)單元格的功能，已實(shí)現(xiàn)不同文本內(nèi)容或排版的需求。（1）將光標(biāo)定位在表格中的某一個(gè)單元格之中，在菜單中選擇“修改”“表格”“選擇表格”命令。如圖7-30所示。圖7-30 拆分單元格菜單 （2）彈出“拆分單元格”對(duì)話(huà)框，進(jìn)行拆分，如圖7-31所示。 圖7-31 拆分設(shè)置 圖7-32 拆分結(jié)果 （3）單擊“確定”按鈕后，可看到原單元格被折成了下下兩部分。如圖7-23所示。 利用同樣的方法，可以對(duì)“列”進(jìn)行拆分。 3.合并單元格 合并單元格在網(wǎng)頁(yè)布局中要比拆分單元

19、格用的多，因?yàn)橐湃雴卧裰械膬?nèi)容一般都比較多或比較大（如圖像），如果不采用合并單元格的方式來(lái)放這些內(nèi)容，其他的單元格也就會(huì)隨之而被撐大，造成布局混亂而無(wú)法進(jìn)行的情況。所以在用表格進(jìn)行頁(yè)面布局的時(shí)候，合理合并單元格成為非常重要的操作。 （1）用前面講過(guò)的選取多個(gè)單元格的方法，選取要合并的單元格。 （2）在選取的單元格按鼠標(biāo)右鍵在彈出的快捷菜單中選擇“表格”“選擇表格”如圖7-33所示。 圖7-33 單元格合并菜單操作（3）選取的兩個(gè)單元格就被合并在了一起。如圖7-34所示。圖7-34 合并單元格 4.復(fù)制、剪切、粘貼和刪除單元格 （1）將要復(fù)制（剪切）的單元格選取，如圖7-35所示。 （2）選

20、擇菜單欄“編輯”“拷貝”（或“剪切”）命令。如圖7-36所示。 圖7-35 選取單元格 圖7-37 定位粘貼位置圖7-36 拷貝、剪切、粘貼命令 圖7-38 復(fù)制結(jié)果（3）將光標(biāo)定位在要粘貼的起始單元格。然后在如圖7-36菜單操作中選擇“粘貼”命令，可得到如圖7-38所示的結(jié)果。（4）如果在實(shí)現(xiàn)粘貼實(shí)時(shí)選擇了“選擇性粘貼”命令，則會(huì)現(xiàn)“選擇性粘貼”對(duì)話(huà)框，若選擇“僅文本”選擇項(xiàng)，如圖7-39所示。出現(xiàn)如圖7-40所示。 圖7-39 選擇性設(shè)置 圖7-40 復(fù)制的結(jié)果 由復(fù)制后的結(jié)果可以看出，把原來(lái)單元格中的內(nèi)容全部當(dāng)成純文本來(lái)看待；當(dāng)選擇“帶結(jié)構(gòu)的文本（段落、列表、表格等）”選項(xiàng)時(shí)，粘貼后的結(jié)

21、果如圖7-38所示，保留復(fù)制前的格式，比如“制作”二字沒(méi)有加粗，復(fù)制后也沒(méi)有加粗。 注意：要把已經(jīng)復(fù)制（或剪切）的內(nèi)容復(fù)制（或移動(dòng)）到選定的單元格數(shù)進(jìn)行粘貼時(shí)，如果選取的粘貼單元格數(shù)小于被復(fù)制的單元格數(shù)時(shí)，就會(huì)彈出如圖7-41所示的提示對(duì)話(huà)框。圖7-41 粘貼錯(cuò)誤對(duì)話(huà)框 同樣如果選擇的粘貼單元格的數(shù)多于復(fù)制的單元格的數(shù)，同樣也會(huì)彈出一提示的對(duì)話(huà)框。所以在一般情況下，只要選定粘貼的起始單元格進(jìn)行粘貼就行了。 5.刪除單元格 一般來(lái)說(shuō)單個(gè)的單元格是不能刪除的，但可以刪除單元格中的內(nèi)容，簡(jiǎn)要介紹如下： （1）選擇一個(gè)或多個(gè)單元格（用前面介紹過(guò)的方法）。 （2）按Delete鍵或者選擇菜單欄中的“編輯

22、”“清除”命令，如圖7-42所示。 如果選擇“編輯”“清除”命令或按Delete鍵時(shí)選擇了完整的行或列，則將從表格中刪除整個(gè)行或列，包括行列中的內(nèi)容。圖7-42 命令選擇7.4 表格的進(jìn)一步操作表格的進(jìn)一步操作 在前面幾節(jié)里，主要講了表格和單元格通過(guò)Dreamweaver CS5窗口有關(guān)菜單進(jìn)行的基本操作，下面再來(lái)進(jìn)一步介紹一些表格的操作。 邊框構(gòu)成了表格的實(shí)現(xiàn)效果，其寬度以像素為單位。通過(guò)對(duì)邊框的設(shè)置，可以制作出各種不同效果的表格，進(jìn)一步對(duì)網(wǎng)頁(yè)進(jìn)行了美化，下面通過(guò)實(shí)例和相應(yīng)代碼來(lái)進(jìn)行介紹。7.4.1 表格分隔線(xiàn)與邊框操作表格分隔線(xiàn)與邊框操作 1.設(shè)置表格分隔線(xiàn) （1）在菜單欄中選擇“插入”“

23、表格”命令。 （2）彈出“表格”對(duì)話(huà)框，作如圖7-43所示的參數(shù)設(shè)置。 （3）單擊“確定”后，實(shí)現(xiàn)一個(gè)帶邊框的表格。如圖7-44所示。 圖7-43 表格參數(shù)設(shè)置 7-44 插入實(shí)線(xiàn)表格 （3）單擊“確定”后，實(shí)現(xiàn)一個(gè)帶邊框的表格。如圖7-44所示。 （4）切換到代碼視圖，選擇“拆分”出現(xiàn)如圖7-46所示效果，可以看到插入的2行3列表格所對(duì)應(yīng)的代碼。 （5）在標(biāo)簽中加入代碼rules=”none”,如圖7-45所示。圖7-45 添加代碼 6）保存文檔。按F12鍵，在瀏覽器窗口可以看到表格的分隔線(xiàn)全部被隱藏了，如圖7-47所示。由此可以看出，對(duì)表格處理也可通過(guò)代碼的方式來(lái)實(shí)現(xiàn)。圖7-46 拆分窗口

24、圖7-47 瀏覽效果 查看表格代碼的標(biāo)簽，其中“width”表示表格的寬度，“border”顯示表格邊框的粗細(xì)，“cellspacing”表示單元格的間距。標(biāo)簽中的rules,它主要包括cols、rows和none這三個(gè)參數(shù)，其含意如下。 Rules=“cols”時(shí)，表格會(huì)隱藏橫向的分隔線(xiàn)，此時(shí)只能看到表格的列。 Rules=“rows”時(shí)，表格會(huì)隱藏縱向的分隔線(xiàn)，此時(shí)只能看到表格的行。 Rules=“rows”時(shí)，表格的橫向和縱向分隔線(xiàn)全部被隱藏。 2.隱藏表格邊框（1）在圖7-46中的代碼添加如下內(nèi)容，如圖7-48所示。圖7-48 添加代碼生成新表格 （2）如果不顯示表格的外邊框，可以在標(biāo)

25、簽頁(yè)中加入代碼frame=”void”,去掉表格的外邊框，更改代碼如圖7-49所示。 （3）保存文檔。按F12鍵，看到如圖7-50所示的瀏覽效果。圖7-49 添加frame=”void”代碼 圖7-50 瀏覽效果 圖7-52 瀏覽效果 （4）再在如圖7-49中添加rules=”none”代碼，如圖7-51所示。在保存文檔，并運(yùn)行后看到如圖7-52所示的效果，即沒(méi)有任何邊框的表格。 圖7-51 添加rules=”none”代碼 標(biāo)簽中的frame，它主要包括above、below、vsides、hsides、rhs和void這7個(gè)參數(shù)，并且它只控制表格的邊框。各參數(shù)的含意如下。 Frame=”a

26、bove”時(shí)，顯示上邊框。 Frame=”below”時(shí)，顯示下邊框。 Frame=”vsides”時(shí)，顯示左、右邊框。 Frame=”hsides”時(shí)，顯示上、下邊框。 Frame=”lhs”時(shí)，顯示左邊框。 Frame=”rhs”時(shí)，顯示右邊框。 Frame=”void”時(shí)，不顯示任何邊框。7.4.2 表格特效設(shè)置表格特效設(shè)置 表格除了可以布局頁(yè)面的作用以外，還可通過(guò)對(duì)表格的美化，增加頁(yè)面的效果。 1.細(xì)線(xiàn)邊框表格 細(xì)線(xiàn)邊框表格，使得表格看起來(lái)比較清晰，所以在網(wǎng)頁(yè)中應(yīng)用比較多。 （1）在頁(yè)面中插入一個(gè)2行3列，寬度為200像素、邊框粗細(xì)為0、單元格間距為1的表格。 （2）選取整個(gè)表格。如圖

27、7-53所示。 （3）在“CSS”樣式面板的“全部”下的“所有規(guī)則”欄，在右鍵快捷菜單中選擇“新建”命令，如圖7-54所示。 圖7-53 創(chuàng)建表 圖7-54 菜單操作 （4）在彈出的“新建CSS”規(guī)則對(duì)話(huà)框中“為CSS規(guī)則選擇上下文選擇類(lèi)型”的下拉列表中選擇“標(biāo)簽（重新定義HTML元素）”，并在“選擇或輸入選擇器名稱(chēng)”文本框中輸入“table”。如圖7-55所示。圖7-55 新建CSS規(guī)劃 （5）“確定”后在如圖7-56中“分類(lèi)”中選擇“背景”，在Background-color中選擇黑色。 （6）“確定”后表格變成如圖7-57所示的效果。圖7-56 CSS規(guī)則定義 圖7-57 表格線(xiàn)變化 圖

28、7-58 細(xì)線(xiàn)表格 （7）在保存文檔后，按F12鍵在瀏覽窗口中得到細(xì)線(xiàn)邊框表格，如圖7-58所示。 2.并排兩個(gè)表格 如果在一個(gè)頁(yè)面中插入兩個(gè)表格時(shí)，第二個(gè)表格會(huì)自動(dòng)跑到第一表格的下方的問(wèn)題。但如果想讓兩個(gè)表格放置在同一行，可通過(guò)如下操作完成。 （1）選取第一表格，如圖7-59所示。 （2）在表格“屬性”面板的“對(duì)齊”中選擇“左對(duì)齊”可得到如圖7-60所示的排列在同一行的效果。 圖7-59 選取表 圖7-60 兩個(gè)表的同行排列 3.立體化表格 通過(guò)顏色對(duì)比使表格達(dá)到立體化的效果，可以使表格具有更加多彩的外觀視覺(jué)。從而使得頁(yè)面的變化更加豐富，體現(xiàn)網(wǎng)站的風(fēng)格。具體操作方法如下。 （1）先在頁(yè)面插入

29、一個(gè)2行2列的表格，寬度為“200像素”、邊框粗細(xì)為“3”、單元格邊距“0”、單元格間距為“0”的表格。 （2）選取整個(gè)表格。 （3）用前面講過(guò)的操作方法設(shè)置整個(gè)表格的背景顏色為“綠色#006600”，如圖7-61所示。邊框顏色為白色，如圖7-62所示。圖7-61 設(shè)置背景顏色圖7-63 表格顏色設(shè)置效果 圖7-62 設(shè)置邊框顏色（4）顏色設(shè)置的效果如圖7-63所示，選中此表格，選擇菜單“修改”“編輯標(biāo)簽”命令。（5）在彈出的“標(biāo)簽編輯器-table”對(duì)話(huà)框，單擊“瀏覽器特定的”選項(xiàng)，設(shè)置“邊框顏色亮”為黑色（#000000）。 （4）顏色設(shè)置的效果如圖7-63所示，選中此表格，選擇菜單“修改

30、”“編輯標(biāo)簽”命令。 （5）在彈出的“標(biāo)簽編輯器-table”對(duì)話(huà)框，單擊“瀏覽器特定的”選項(xiàng)，設(shè)置“邊框顏色亮”為黑色（#000000）。圖7-64 設(shè)置瀏覽器中顯示 （6）單擊“確定”完成設(shè)置，保存文檔。按F12鍵，在瀏覽器窗口瀏覽，結(jié)果如圖7-65所示。 若要使凸起感更強(qiáng)，可以對(duì)表格的間距進(jìn)行修改，列如將間距設(shè)為5時(shí)，其效果如圖7-66所示。 圖7-65 瀏覽效果 圖7-66 間距加大的效果7.5 表格擴(kuò)展模式表格擴(kuò)展模式 所謂的表格施展模式就是指臨時(shí)向文檔中所有的表格添加單元格邊距、間距和增加表格的邊框，為編輯提供更加方便的操作，在此模式下可以精確地放置插入點(diǎn)。 7.5.1 表格擴(kuò)展模

31、式的進(jìn)入和退出 （1）在網(wǎng)頁(yè)中插入一個(gè)表格。 （2）選取整個(gè)表格，選擇菜單“查看”“表格模式”“擴(kuò)展表格模式”命令 圖7-67 菜單操作命令 （3）執(zhí)行命令后，顯示如圖7-68所示的擴(kuò)展效果。表格中單元格的間距和間距加大了，同時(shí)還增加了表格的邊框。若要退出擴(kuò)展模式，單擊“退出”按鈕。圖7-68 擴(kuò)展效果 7.5.2 表格擴(kuò)展模式的應(yīng)用 （1）在創(chuàng)建的表格單元格中插入一張圖片，如圖7-69所示。 （2）要給圖像所在單元格中加入文字，會(huì)發(fā)現(xiàn)總是選中的是該圖像或表格單元格，而想要把插入點(diǎn)放置在該單元格時(shí)比較困難。圖7-69 表格單元格插入圖片 （3）進(jìn)入表格的擴(kuò)展模式后，會(huì)發(fā)現(xiàn)的圖片的周?chē)黾恿碎g距

32、，此時(shí)光標(biāo)很容易插入在圖片所在的單元格內(nèi)，可以方便地輸入文本等內(nèi)容。如圖7-70所示。圖7-70 圖片單元放置插入點(diǎn)7.6 表格中數(shù)據(jù)的處理表格中數(shù)據(jù)的處理 在制作網(wǎng)頁(yè)時(shí)，表格除了用來(lái)布局網(wǎng)頁(yè)以外，表格還是一種常見(jiàn)的數(shù)據(jù)處理和數(shù)據(jù)存儲(chǔ)方式，所以掌握網(wǎng)頁(yè)中表格的數(shù)據(jù)處理功能也是非常重要的，它可豐富網(wǎng)頁(yè)的內(nèi)容。7.6.1 導(dǎo)入和導(dǎo)出表格數(shù)據(jù)導(dǎo)入和導(dǎo)出表格數(shù)據(jù)在網(wǎng)頁(yè)中可在建立的表格中輸入需要處理的數(shù)據(jù)，但當(dāng)數(shù)據(jù)量比較大時(shí)候，輸入起來(lái)就比較麻煩了。在Dreamweaver中可以將另一個(gè)應(yīng)用程序（比如常用的Microsoft Excel、Word、記事本等）中創(chuàng)建的并以分隔文本的格式，比如用制表符、逗號(hào)

33、、冒號(hào)或分號(hào)隔開(kāi)保存的表格式數(shù)據(jù)導(dǎo)入到Dreamweaver中，并設(shè)置成表格格式。反之，也可以將表格數(shù)據(jù)從Dreamweaver導(dǎo)出到文本文件中，相鄰單元格內(nèi)容由分隔符隔開(kāi)。當(dāng)導(dǎo)出表格時(shí)，將導(dǎo)出整個(gè)表格，但不能選擇部分導(dǎo)出。1.導(dǎo)入表格數(shù)據(jù)1）通過(guò)記事本向?qū)氡砀駭?shù)據(jù)（1）比如創(chuàng)建一個(gè)記事本表格數(shù)據(jù)（相當(dāng)于2行4列，用“,”逗號(hào)隔開(kāi)）。如圖7-71所示。并將文件最好存放在自己建立的網(wǎng)站中。 圖7-71 創(chuàng)建文本格式數(shù)據(jù) （2）在Dreamweaver CS5的新建的網(wǎng)頁(yè)窗口中，選擇“修改”“頁(yè)面屬性”命令，在“分類(lèi)”選擇“標(biāo)題/編號(hào)”選項(xiàng)，在“編碼”下拉列表框中選擇“簡(jiǎn)體中文（GB2312）”

34、選項(xiàng)。如圖7-72所示。圖7-72 設(shè)置頁(yè)面屬性 （3）在網(wǎng)頁(yè)頁(yè)面中定位要插入表格的光標(biāo)位置。選擇“插入”“表格對(duì)象”“導(dǎo)入表格式數(shù)據(jù)”命令。在“數(shù)據(jù)文件”選擇要導(dǎo)入的表格式文件，在“定界符”下拉列表中選擇“逗點(diǎn)”等其它設(shè)置，如圖7-73所示。圖7-73 導(dǎo)入表格式數(shù)據(jù) （4）單擊“確定”后出現(xiàn)如圖7-74所示的表格。 2）導(dǎo)入Excel中的數(shù)據(jù) （1）首先要建立一個(gè)Excel數(shù)據(jù)表格文件，最好將其放在自己所建立的站點(diǎn)中。 （2）打開(kāi)或建立一個(gè)網(wǎng)頁(yè)頁(yè)面，將光標(biāo)插入到要生成表的位置。 （3）選擇菜單“文件”“導(dǎo)入”“Excel文檔”命令。在彈出的對(duì)話(huà)框中選擇要導(dǎo)入的電子表格Excel文檔，“確定

35、”后出現(xiàn)如圖7-75所示的表格。圖7-74 導(dǎo)入的數(shù)據(jù)格式表格圖7-75 導(dǎo)入的表格（4）選擇導(dǎo)入的表格，在“屬性”面板中設(shè)置表格的邊框等，最后效果如圖7-76所示。圖7-76 導(dǎo)入網(wǎng)頁(yè)中數(shù)據(jù)格式表格 2.導(dǎo)出表格數(shù)據(jù) （1）在網(wǎng)頁(yè)中建立一個(gè)表格，如圖7-77所示。 （2）在菜單欄選擇“文件”“導(dǎo)出”“表格”命令。 圖7-77 網(wǎng)頁(yè)中的表格 圖7-78 導(dǎo)出設(shè)置 （3）在彈出的“導(dǎo)出表格”對(duì)話(huà)框中，設(shè)“定界符”為“Tab”格式。如圖7-78所示。 （4）在按“導(dǎo)出”按鈕，所彈出的“表格導(dǎo)出為”對(duì)話(huà)框中的“文件名”后文本框中輸入文件名稱(chēng)時(shí)，要注意擴(kuò)展名。比如.txt文件等。 （5）打開(kāi)導(dǎo)出的文件

36、，其表格式數(shù)據(jù)形式，如圖7-79所示。圖7-79 導(dǎo)出的文本數(shù)據(jù)格式 7.6.2 網(wǎng)頁(yè)中表格排序操作 在Dreamweaver中除了可以根據(jù)表中單個(gè)列的內(nèi)容對(duì)表格中的行進(jìn)行排序，還可以根據(jù)兩個(gè)列的內(nèi)容對(duì)表格中的行進(jìn)行排序。 （1）創(chuàng)建一個(gè)表格，并向表格輸入一些數(shù)據(jù)，如圖7-80所示。圖7-80 創(chuàng)建表格 （2）選定表格，選擇菜單“命令”“排序表格”命令，彈出如圖7-81所示“排序表格”對(duì)話(huà)框，進(jìn)行排序選項(xiàng)進(jìn)行設(shè)置。圖7-81 排序表格設(shè)置 （3）單擊“確定”按鈕，得到排序后結(jié)果，如圖7-82所示。 圖7-81 表格排序結(jié)果7.7 上機(jī)練習(xí)：用表格布局模式設(shè)計(jì)網(wǎng)上機(jī)練習(xí)：用表格布局模式設(shè)計(jì)網(wǎng)頁(yè)頁(yè) 使用表格布局模式設(shè)計(jì)網(wǎng)頁(yè)方便又快捷，本章已經(jīng)學(xué)習(xí)了一些使用表格布局頁(yè)面的方法，下面通過(guò)練習(xí)操作，掌握表格布局模式設(shè)計(jì)網(wǎng)頁(yè)的操作方法。 （1）啟動(dòng)Dreamweaver CS5，在菜單欄中選擇“文件”“新建”命令，彈出“新建文檔”對(duì)話(huà)框。新建HTML文檔，保存創(chuàng)建的網(wǎng)頁(yè)文件。 （2）在新建的網(wǎng)頁(yè)文件“CSS