第7章 用表格來布局頁面

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

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

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

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

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

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

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

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

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

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

11、，也可對兩個以上的單元格進行合并以后再進行拆分。標題：在其后面復選框中若打上“鉤”，則設置該單元格為標題單元格，表示將當前單元格的內容變成標題。選中該復選框后，當前單元格的內容將自動居中并加粗。如圖7-11所示。 背景顏色：用來設置整個單元格的背景顏色。在時行單元格的基本操作前。圖7-11 表中文本變成標題7.3 表格與單元格具體操作表格與單元格具體操作7.3.1 表格的操作 在計算機中進行操作時，要先選上被處理的對象，同樣對表格操作也不例外，對表格來說其基本操作主要包括對表格行與列的操作?？梢圆扇∫韵罗k法選中表格。 （1）將光標定位在某一單元格中，然后選擇“修改”“表格”“選擇表格”命令，如

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

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

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

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

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

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

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

19、格用的多，因為要放入單元格中的內容一般都比較多或比較大（如圖像），如果不采用合并單元格的方式來放這些內容，其他的單元格也就會隨之而被撐大，造成布局混亂而無法進行的情況。所以在用表格進行頁面布局的時候，合理合并單元格成為非常重要的操作。 （1）用前面講過的選取多個單元格的方法，選取要合并的單元格。 （2）在選取的單元格按鼠標右鍵在彈出的快捷菜單中選擇“表格”“選擇表格”如圖7-33所示。 圖7-33 單元格合并菜單操作（3）選取的兩個單元格就被合并在了一起。如圖7-34所示。圖7-34 合并單元格 4.復制、剪切、粘貼和刪除單元格 （1）將要復制（剪切）的單元格選取，如圖7-35所示。 （2）選

20、擇菜單欄“編輯”“拷貝”（或“剪切”）命令。如圖7-36所示。 圖7-35 選取單元格 圖7-37 定位粘貼位置圖7-36 拷貝、剪切、粘貼命令 圖7-38 復制結果（3）將光標定位在要粘貼的起始單元格。然后在如圖7-36菜單操作中選擇“粘貼”命令，可得到如圖7-38所示的結果。（4）如果在實現粘貼實時選擇了“選擇性粘貼”命令，則會現“選擇性粘貼”對話框，若選擇“僅文本”選擇項，如圖7-39所示。出現如圖7-40所示。 圖7-39 選擇性設置 圖7-40 復制的結果 由復制后的結果可以看出，把原來單元格中的內容全部當成純文本來看待；當選擇“帶結構的文本（段落、列表、表格等）”選項時，粘貼后的結

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

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

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

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

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”代碼 標簽中的frame，它主要包括above、below、vsides、hsides、rhs和void這7個參數，并且它只控制表格的邊框。各參數的含意如下。 Frame=”a

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

27、7-53所示。 （3）在“CSS”樣式面板的“全部”下的“所有規(guī)則”欄，在右鍵快捷菜單中選擇“新建”命令，如圖7-54所示。 圖7-53 創(chuàng)建表 圖7-54 菜單操作 （4）在彈出的“新建CSS”規(guī)則對話框中“為CSS規(guī)則選擇上下文選擇類型”的下拉列表中選擇“標簽（重新定義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 細線表格 （7）在保存文檔后，按F12鍵在瀏覽窗口中得到細線邊框表格，如圖7-58所示。 2.并排兩個表格 如果在一個頁面中插入兩個表格時，第二個表格會自動跑到第一表格的下方的問題。但如果想讓兩個表格放置在同一行，可通過如下操作完成。 （1）選取第一表格，如圖7-59所示。 （2）在表格“屬性”面板的“對齊”中選擇“左對齊”可得到如圖7-60所示的排列在同一行的效果。 圖7-59 選取表 圖7-60 兩個表的同行排列 3.立體化表格 通過顏色對比使表格達到立體化的效果，可以使表格具有更加多彩的外觀視覺。從而使得頁面的變化更加豐富，體現網站的風格。具體操作方法如下。 （1）先在頁面插入

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

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

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

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

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

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

35、”后出現如圖7-75所示的表格。圖7-74 導入的數據格式表格圖7-75 導入的表格（4）選擇導入的表格，在“屬性”面板中設置表格的邊框等，最后效果如圖7-76所示。圖7-76 導入網頁中數據格式表格 2.導出表格數據 （1）在網頁中建立一個表格，如圖7-77所示。 （2）在菜單欄選擇“文件”“導出”“表格”命令。 圖7-77 網頁中的表格 圖7-78 導出設置 （3）在彈出的“導出表格”對話框中，設“定界符”為“Tab”格式。如圖7-78所示。 （4）在按“導出”按鈕，所彈出的“表格導出為”對話框中的“文件名”后文本框中輸入文件名稱時，要注意擴展名。比如.txt文件等。 （5）打開導出的文件

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