第7章 用表格來布局頁面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19、格用的多，因為要放入單元格中的內(nèi)容一般都比較多或比較大（如圖像），如果不采用合并單元格的方式來放這些內(nèi)容，其他的單元格也就會隨之而被撐大，造成布局混亂而無法進(jìn)行的情況。所以在用表格進(jìn)行頁面布局的時候，合理合并單元格成為非常重要的操作。 （1）用前面講過的選取多個單元格的方法，選取要合并的單元格。 （2）在選取的單元格按鼠標(biāo)右鍵在彈出的快捷菜單中選擇“表格”“選擇表格”如圖7-33所示。 圖7-33 單元格合并菜單操作（3）選取的兩個單元格就被合并在了一起。如圖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）如果在實現(xiàn)粘貼實時選擇了“選擇性粘貼”命令，則會現(xiàn)“選擇性粘貼”對話框，若選擇“僅文本”選擇項，如圖7-39所示。出現(xiàn)如圖7-40所示。 圖7-39 選擇性設(shè)置 圖7-40 復(fù)制的結(jié)果 由復(fù)制后的結(jié)果可以看出，把原來單元格中的內(nèi)容全部當(dāng)成純文本來看待；當(dāng)選擇“帶結(jié)構(gòu)的文本（段落、列表、表格等）”選項時，粘貼后的結(jié)

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

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

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

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

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

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

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

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

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

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

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

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

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

34、選項。如圖7-72所示。圖7-72 設(shè)置頁面屬性 （3）在網(wǎng)頁頁面中定位要插入表格的光標(biāo)位置。選擇“插入”“表格對象”“導(dǎo)入表格式數(shù)據(jù)”命令。在“數(shù)據(jù)文件”選擇要導(dǎo)入的表格式文件，在“定界符”下拉列表中選擇“逗點”等其它設(shè)置，如圖7-73所示。圖7-73 導(dǎo)入表格式數(shù)據(jù) （4）單擊“確定”后出現(xiàn)如圖7-74所示的表格。 2）導(dǎo)入Excel中的數(shù)據(jù) （1）首先要建立一個Excel數(shù)據(jù)表格文件，最好將其放在自己所建立的站點中。 （2）打開或建立一個網(wǎng)頁頁面，將光標(biāo)插入到要生成表的位置。 （3）選擇菜單“文件”“導(dǎo)入”“Excel文檔”命令。在彈出的對話框中選擇要導(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)頁中數(shù)據(jù)格式表格 2.導(dǎo)出表格數(shù)據(jù) （1）在網(wǎng)頁中建立一個表格，如圖7-77所示。 （2）在菜單欄選擇“文件”“導(dǎo)出”“表格”命令。 圖7-77 網(wǎng)頁中的表格 圖7-78 導(dǎo)出設(shè)置 （3）在彈出的“導(dǎo)出表格”對話框中，設(shè)“定界符”為“Tab”格式。如圖7-78所示。 （4）在按“導(dǎo)出”按鈕，所彈出的“表格導(dǎo)出為”對話框中的“文件名”后文本框中輸入文件名稱時，要注意擴(kuò)展名。比如.txt文件等。 （5）打開導(dǎo)出的文件

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