《網頁設計與制作(Dreamweaver-CS5)》06表格的相關操作

表格的相關操作靜態(tài)網站制作教學資源課件

單擊“插入”菜單中的“表格”命令，或單擊“插入”工具欄“常用”選項卡中的“表格”按鈕

，都可以打開“表格”對話框來插入表格。插入表格插入表格“表格寬度”：用于設置表格的總寬度，有兩種單位：百分比或是像素。如果以像素為單位，則表格的寬度不會隨著顯示窗口的變化而改變。一般情況下，網頁的總體布局表格都采用像素為單位。而“%”是一個相對單位，是相對于外層容器而言的，如顯示屏幕的寬度、框架的寬度、外層單元格的寬度或層的寬度等，內層的嵌套表格才會采用該單位?！斑吙虼旨殹保河糜谠O置表格邊框的寬度，以像素為單位。如果用戶沒有明確指定，則大多數(shù)瀏覽器默認邊框值為“1”像素，而布局表格的邊框粗細一般應為0。“邊距”和“間距”：邊距是指單元格中文本與單元格邊框之間的距離，而間距是指單元格之間的距離，如圖2.28所示。插入表格實例4：在“練習”站點的“gywm.html”插入如圖2.23所示的布局表格。插入整個頁面的布局表格：表格一，寬度：960像素，行數(shù)為6，列數(shù)為1，“邊框粗細”為0像素，“單元格邊距”為0像素，“單元格間距”為0像素。在表格“屬性”面板的“對齊”屬性中選擇“居中對齊”，如圖2.29所示。插入表格實例圖2.29 表格“屬性”面板（3） 在表格一的第二行，插入導航欄的布局表格：表格二，表格寬度：800像素，行數(shù)為1，列數(shù)為19，“邊框粗細”為0像素，“單元格邊距”為0像素，“單元格間距”為0像素。（4） 在表格“屬性”面板中設置表格二為“居中對齊”（5） 在表格一的第四行插入頁面中部的布局表格：表格三，表格寬度：960像素，行數(shù)為1，列數(shù)為3，“邊框粗細”為0像素，“單元格邊距”為0像素，“單元格間距”為0像素。選擇表格元素將鼠標移動到表格的上部或底部邊緣的外側，當光標變成表格狀態(tài)時單擊。單擊表格中任一單元格，然后在文檔窗口左下角任務欄的標簽選擇器中選擇<table>標簽。單擊表格任一單元格后，單擊“修改”菜單“表格”命令中的“選擇表格”。

表格選中后，所選表格的下邊框和右邊框會出現(xiàn)選擇控制點，如圖2.30所示。

選擇表格元素

選擇行或列的方法：移動光標到表格的左邊緣或列的上邊緣，當光標變成向右或向下的箭頭時單擊。

選擇單個單元格：在單元格中單擊鼠標，然后在任務欄的標簽選擇器中選擇<td>標簽。設置表格屬性

選中表格后，屬性面板如圖2.31所示。

在表格的屬性面板中，各主要選項的功能如下：“表格”下拉列表框：用于設置表格的Id，即表格的名稱，將顯示在表格標簽里，如“<tablehead2_1>”，這樣就可以直接對該表格編寫腳本代碼。設置表格屬性

“填充”文本框：用于設置單元格內容和單元格邊界之間的寬度，功能同于“表格”對話框中的“單元格邊距”。“間距”文本框：用于設置相鄰的單元格之間的像素值，功能同于“表格”對話框中的“單元格間距”?！扒宄袑挕卑粹o

和“清除行高”按鈕

：用于刪除表格中已設置的行高或列寬值?！皩⒈砀駥挾绒D換成像素”按鈕

：用于將表格中每列的寬度單位設置為像素。

“將表格寬度轉換成百分比”按鈕

：用于將表格中每列的寬度單位設置為表格總寬度的百分比。設置單元格屬性

單元格的屬性面板如圖2.31所示。各主要選項的功能如下：“水平”文本框用來設置單元格內元素的水平排版方式，是居左、居右或是居中。設置單元格屬性“垂直”文本框用來設置單元格內的垂直排版方式，是頂端對齊、底端對齊、基線對齊或是居中對齊?！安粨Q行”復選框可以防止單元格中較長的文本自動換行。“標題”復選框使選擇的單元格成為標題單元格，單元格內的文字自動以標題格式顯示出來。實例5：用表格制作如圖2.33所示的文本導航欄布局表格。1、將插入點光標移到實例4表格一的第二行中，在屬性面板上方左側的標簽選擇器

中選擇行標簽<tr>，即選擇表格一中的第二行，在如圖2.34所示的“行”屬性面板中，將其行高設為“30”，在“背景顏色”框中輸入“#0066CB”，為導航欄設置背景顏色，分別設置單元格中內容的“水平”對齊方式和“垂直”對齊方式為“居中對齊”。2、將插入點光標移到導航欄表格的第一個單元格中，在“單元格”屬性面板中設置“寬”度為“77”，如圖2.35所示，將該單元格的寬度設為“77”像素，分別設置單元格中內容的“水平”對齊方式和“垂直”對齊方式為“居中對齊”。3、將插入點光標移到表格二的第二個單元格中，在“單元格”屬性面板中的“寬”