DW教程--三、表格的應(yīng)用

1、.第三節(jié) 表格的應(yīng)用 表格是網(wǎng)頁設(shè)計制作不可缺少的元素，它以簡潔明了和高效快捷的方式將圖片、文本、數(shù)據(jù)和表單的元素有序的顯示在頁面上，讓我們可以設(shè)計出漂亮的頁面，使用表格排版的頁面在不同平臺、不同分辨率的瀏覽器里都能保持其原有的布局，而在不同的瀏覽器平臺有較好的兼容性，所以表格是網(wǎng)頁中最常用的排版方式之一。 一、插入并編輯表格     1、插入表格     在文檔窗口中，將光標(biāo)放在需要創(chuàng)建表格的位置，單擊“常用”快捷欄中的表格按鈕彈出的“表格”對話框，指定表格的屬性后，在文檔窗口中插入設(shè)置的表格。 “行數(shù)”文本框用來設(shè)置表格的行數(shù)。&

2、#160;   “列數(shù)”文本框用來設(shè)置表格的列數(shù)。    “表格寬度”文本框用來設(shè)置表格的寬度，可以填入數(shù)值，緊隨其后的下拉列表框用來設(shè)置寬度的單位，有兩個選項百分比和像素。當(dāng)寬度的單位選擇百分比時，表格的寬度會隨瀏覽器窗口的大小而改變。     “單元格邊距”文本框用來設(shè)置單元格的內(nèi)部空白的大小。     “單元格間距”文本框用來設(shè)置單元格與單元格之間的距離。     “邊框粗細(xì)”用來設(shè)置表格的邊框的寬度。  &#

3、160;   “頁眉”定義頁眉樣式，可以在四種樣式中選擇一種。     “標(biāo)題” 定義表格的標(biāo)題。     “對其標(biāo)題”定義表格標(biāo)題的對齊方式。     “摘要” 可以在這里對表格進(jìn)行注釋。2、選擇單元格對象     對于表格、行、列、單元格屬性的設(shè)置是以選擇這些對象為前提的。     選擇整個表格的方法是把鼠標(biāo)放在表格邊框的任意處，當(dāng)出現(xiàn)這樣的標(biāo)志時單擊即可選中整個表格，或在表格內(nèi)任意處單擊，然

4、后在狀態(tài)欄選中<table>標(biāo)簽即可；或在單元格任意處單擊，點鼠標(biāo)右鍵在彈出菜單菜單中選擇“表格選擇表格”     要選中某一單元格，按住Ctrl鍵，鼠標(biāo)在需要選中的單元格單擊即可；或者，選中狀態(tài)欄中的<td>標(biāo)簽。    要選中連續(xù)的單元格，按住鼠標(biāo)左鍵從一個單元格的左上方開始向要連續(xù)選擇單元格的方向拖動。要選中不連續(xù)的幾個單元格，可以按住Ctrl鍵，單擊要選擇的所有單元格即可。     要選擇某一行或某一列，將光標(biāo)移動到行左側(cè)或列上方，鼠標(biāo)指針變?yōu)橄蛴一蛳蛳碌募^圖標(biāo)時，單擊即

5、可。     3、設(shè)置表格屬性     選中一個表格后，可以通過屬性面板更改表格屬性。 “填充”文本框用來設(shè)置單元格邊距，“間距”文本框用來設(shè)置單元格間距。     “對齊”下拉列表框用來設(shè)置表格的對齊方式，默認(rèn)的對齊方式一般為左對齊。     “邊框”文本框用來設(shè)置表格邊框的寬度。     “背景顏色”文本框用來設(shè)置表格的背景顏色。     “邊框顏色”用來設(shè)置表格邊框的顏色。    

6、  在“背景圖像”文本框填入表格背景圖像的路徑，可以給表格添加背景圖像。也可以如下圖所示給文本框加上鏈接路徑。還可以單擊文本框后的“瀏覽”按鈕，查找圖像文件。在“選擇圖像源”對話框中定位并選擇要設(shè)置為背景的圖片，單擊“確認(rèn)”按鈕即可。 4、單元格屬性     把光標(biāo)移動到某個單元格內(nèi)，可以利用單元格屬性面板對這個單元格的屬性進(jìn)行設(shè)置。 “水平”文本框用來設(shè)置單元格內(nèi)元素的水平排版方式，是居左、居右或是居中。     “垂直”文本框用來設(shè)置單元格內(nèi)的垂直排版方式，是頂端對齊、底端對齊或是居中對齊。   &#

7、160; “高”、“寬”文本框用來設(shè)置單元格的寬度和高度。     “不換行”復(fù)選框可以防止單元格中較長的文本自動換行。     “標(biāo)題”復(fù)選框使選擇的單元格成為標(biāo)題單元格，單元格內(nèi)的文字自動以標(biāo)題格式顯示出來。     “背景”文本框用來設(shè)置表格的背景圖像。     “背景顏色”文本框用來設(shè)置表格的背景顏色。     “邊框”文本框用來色設(shè)置表格邊框的顏色。     5、表格的行和列   

8、60; 選中要插入行或列的單元格，單擊鼠標(biāo)右鍵，在彈出菜單中選擇“插入行”或“插入列”或“插入行或列”命令。 如果選擇了“插入行”命令，在選擇行的上方就插入了一個空白行，如果選擇了“插入列”命令，就在選擇列的左側(cè)插入了一列空白列。     如果選擇了“插入行或列”命令，會彈出“插入行或列”對話框，可以設(shè)置插入行還是列、插入的數(shù)量，以及使在當(dāng)前選擇的單元格的上方或下方、左側(cè)或是右側(cè)插入行或列。 要刪除行或列，選擇要刪除的行或列，單擊鼠標(biāo)右鍵，在彈出菜單中選擇“刪除行”或“刪除列”命令即可。     6、拆分與合并單元格  &#

9、160;  拆分單元格時，將光標(biāo)放在待拆分的單元格內(nèi)，單擊屬性面板上的“拆分”按鈕，在彈出對話框中，按需要設(shè)置即可。 合并單元格時，選中要合并的單元格，單擊屬性面板中的“合并”按鈕即可。 二、嵌套表格     表格之中還有表格即嵌套表格。     網(wǎng)頁的排版有時會很復(fù)雜，在外部需要一個表格來控制總體布局，如果內(nèi)部排版的細(xì)節(jié)也通過總表格來實現(xiàn)，容易引起行高列寬等的沖突，給表格的制作帶來困難。其次，瀏覽器在解析網(wǎng)頁的時候，是將整個網(wǎng)頁的結(jié)構(gòu)下載完畢之后才顯示表格，如果不使用嵌套，表格非常復(fù)雜，瀏覽者要等待很長時間才能看到網(wǎng)頁內(nèi)容

10、。     引入嵌套表格，由總表格負(fù)責(zé)整體排版，由嵌套的表格負(fù)責(zé)各個子欄目的排版，并插入到總表格的相應(yīng)位置中，各司其職，互不沖突。     另外，通過嵌套表格，利用表格的背景圖像、邊框、單元格間距和單元格邊距等屬性可以得到漂亮的邊框效果，制作出精美的音畫貼圖網(wǎng)頁。     創(chuàng)建嵌套表格的操作方法，先插入總表格，然后將光標(biāo)置于要插入嵌套表格的地方，繼續(xù)插入表格即可。     1、將光標(biāo)放置在文檔窗口要插入表格的位置，單擊常用插入欄“表格”按鈕，插入一個1行1列的表格一，寬度50

11、0像素，高度100，邊框為0，單元格間距為0，單元格邊距為12像素。背景圖像選擇beij/003.gif。     2、將光標(biāo)放置在表格一內(nèi)，插入表格二，1行1列，寬度100，高度100，邊框為0，單元格間距為0，單元格邊距為12像素。背景圖像選擇beij/002.gif。     3、將光標(biāo)放置在表格二內(nèi)，插入表格二，1行1列，寬度100，高度100，單元格間距和單元格邊距都為8像素，邊框為10，邊框顏色為#FEE4ED。背景圖像選擇beij/005.gif。     4、將光標(biāo)放置在表格三內(nèi)，選擇單元格的背景圖像為beij/006.gif。添加文字“恭賀新禧”，字號68px，字體為隸書，顏色為#A51008。 三、表格的格式化     做好的表格可以使用DW提供的預(yù)設(shè)外觀，可以提高制作效率，保持表格外觀的同一性，同時樣式提供的色彩搭配也比較美觀。