DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> Dreamweaver MX 2004從零開始(2)
Dreamweaver MX 2004從零開始(2)
編輯:Dreamweaver相關     
  使用表格可以清晰地顯示列表的數據,實際上表格的作用遠遠不止顯示數據,它在網頁定位上一直起著重要的作用,尤其是對於使用非IE浏覽器的網友來說,使用表格定位的網頁比使用圖層定位的網頁更具有優勢。
  一、創建表格
  第一步:在Dreamweaver MX 2004中運行“Insert→Table”命令,彈出屬性設置窗口,其中“Rows”和“Columns”分別對應著表格的行數和列數,“Table width”表示表格的寬度,而“Border thickness”則是邊框的寬度,同時還可以設定表格的樣式,根據自己的需要來設置表格的相應屬性即可。
  小提示:表格的寬度和高度可以通過浏覽器窗口百分比或者使用絕對像素值來定義,比如設置寬度為窗口寬度的60%,那麼當浏覽器窗口大小變化的時候表格的寬度也隨之變化;而如果設置寬度為400像素,那麼無論浏覽器窗口大小為多少,表格的寬度都不會變化。
  第二步:點擊窗口中的“OK”按鈕之後即可在Dreamweaver MX 2004中新建一個表格,而且通過窗口下部的屬性面板還可以對其進行諸如表格線條的顏色、表格的背景色、單元格的對齊方式等參數進行調整。
  二、基本使用
  在創建了上述的表格之後,我們就可以對它進行調整使用。比如我們需要制作圖1所示的表格,就可以先插入一個四行三列的表格,然後對其進行下述操作。
  第一步:在表格第一列的上面兩個單元格中按下並拖動鼠標,此時可以選中兩個單元格。接著點擊屬性模板中的“Merges selected cells using spans”按鈕,這樣就把選中的兩格合並成為一個單元格。按照這種方法再將表格第一行右側的兩個單元格合並為一個單元格。
  小提示:選中一個單元格之後點擊屬性面板中的“Splits cell into rows or columns”按鈕可以把單元格拆分為多個行或者列。
  第二步:將表格第一列的三個單元格全部選中,再將屬性模板中的背景顏色(Bg)一項設置為“#FFFF00”,這樣表格第一列中的單元格背景全部變為黃色。
  第三步:在表格中輸入相應的文本,為了美觀可以在屬性面板中進行居中設置。
  第四步:為了使表格產生立體效果,可以將整個表格選中,然後在屬性面板中設定表格邊框的寬度(Border)為7,並且將邊框顏色(Border color)設置為藍色即可。
  小提示:通常選取整個表格比較困難,在此提供四種常用的方法:1. 把鼠標移動到表格右邊界外側,按下鼠標之後往左拖拽,這樣可以快速選取整個表格。2. 運行“Modify→Table→Insert Table”命令選擇整個表格。3. 在單元格中右擊鼠標,並且從彈出菜單中選擇“Table→Insert Table”命令選取整個表格。4. 用鼠標點擊任一個單元格,接著按兩下“Ctrl+A”組合按鈕選取整個表格。
  完成上述操作之後,我們就可以在Dreamweaver MX 2004中定制出頗具專業水准的表格了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved