MX中文版动态网页设计.ppt

精彩Dreamweaver MX中文版動態網頁設計 徐蕙英、劉月詩 編著 第4章 表格與網頁樣版的應用 目錄 4-1　在網頁插入表格 4-2　調整表格內容 4-3　用樣版一統網頁風格 4-1　在網頁插入表格 插入表格 為表格加框線及色彩 有漂亮背景的表格 套用表格樣式 匯入表格資料 插入表格： 只要設定好橫列與直欄數，Dreamweaver就會在網頁上產生一個空白表格，您就可以在儲存格中輸入文字或圖片。 以下就是插入表格的操作示範： 完成圖： 為表格加框線及色彩： Dreamweaver預設在插入新表格時，它是沒有框線的，也就是實際網頁是看不到編輯模式下這些虛線框的。要讓表格有框線，您就得要設定框線的粗細。 以下就是為表格加框線並設定色彩的操作示範： 完成圖： 有漂亮背景的表格： 表格和網頁一樣，也可以有背景色或背景圖。 以下就是為表格加上背景的操作示範： 完成圖： 套用表格樣式： 不曉得如何設計出漂亮的表格嗎？沒關係，Dreamweaver有一些預先設計好的表格樣式，只要選擇喜歡的樣式，馬上就有一個漂亮的表格。 以下就是套用表格樣式的操作示範： 完成圖： 匯入表格資料： 製作表格時，有的時候資料已經存在另外一個檔案中，這時只要用匯入的方式，就可以把它們置入Dreamweaver中，直接變成一個表格。 以下就是匯入表格資料的操作示範： 完成圖： 4-2　調整表格內容 調整欄寬 合併與分割儲存格 增加與刪除表格欄列 設定標題儲存格 調整儲存格內文字對齊方式 設定表格中的資料不換行 調整欄寬： 建好表格，在裡面填入內容時，欄位寬度會隨著內容多寡而調整，但大致上會平均分配每一欄的寬度。為了版面美觀，您可以自己設定每一欄的寬度。 以下就是調整表格欄寬的操作示範： 完成圖： 合併與分割儲存格： 表格內的儲存格規劃方式常要依實際需要調整，利用儲存格合併功能，可以把幾個分開的儲存格合起來變成一個。 以下就是合併儲存格的操作示範： 完成圖： 合併與分割儲存格的重要事項： 增加與刪除表格欄列： 編輯表格時，發現表格不夠用，您可以插入新的直欄或橫列，當然也可以把用不到的欄列刪除。 以下就是在表格插入欄或列的操作示範： 增加與刪除表格欄列的補充說明： 若要刪除整欄，只要把指標移到表格上緣變成 形狀後，按下滑鼠左鍵選取整欄儲存格，再按 鍵就可以了。 設定標題儲存格： 標題儲存格有特定的格式，這類儲存格中的文字會變粗體，內容則自動置中對齊。 以下就是設定標題儲存格的操作示範： 完成圖： 調整儲存格內文字對齊方式： 整個表格可以設定對齊方式，儲存格內的文字和圖片也是一樣。 以下就是調整儲存格內文字對齊方式的操作示範： 完成圖： 調整儲存格內文字對齊方式的注意事項： 設定表格中的資料不換行： 在儲存格中輸入文字時，超出儲存格邊界時，通常會自動換行，不過您也可以設定不換行。 以下就是設定表格資料不換行的操作示範： 完成圖： 輸入欄寬時，單位是像素點，若數字後面加一個%符號，則變成相對於表格總寬度的百分比。 <<上一頁 下一頁>> 首頁 目錄 終頁 總首頁 <<上一頁 下一頁>> 首頁 目錄 終頁 總首頁 您也可以從功能表列選擇插入，再從拉出的選單中選擇表格，同樣會跳出插入表格視窗讓您設定表格內容。 指定表格寬度時，像素代表固定大小，%則是設定讓表格依視窗大小來相對調整寬度。 若不想用背景圖，可以點選背景顏色欄的 鈕，再從拉出的色彩清單中選擇背景色。 在最左直行區的文字樣式欄可以設定表格最左邊欄的標題字體。 在外部檔案中，資料間可以用跳位鍵分隔，也可以用逗點、分號、冒號，甚至還可以自訂分隔符號，匯入前最好先開啟這個外部檔案確認一下資料分隔方式。 * * <<上一頁 下一頁>> 首頁 目錄 終頁 總首頁