資源描述：
《利用表格設計和制作網頁(1).ppt》由會員上傳分享，免費在線閱讀，更多相關內容在行業(yè)資料-天天文庫。
1、第3章利用表格設計和制作網頁3.1表格網頁實例3.2利用DreamweaverMX編輯網頁表格3.3利用HTML編輯網頁表格3.4表格的應用技巧在網頁的設計制作中，表格（Table）是一個重要的網頁元素，主要用來在頁面上布局數(shù)據和圖像，使頁面中的信息布局合理、簡潔。另外，在網頁設計制作中，表格還有一個重要作用，就是對網頁進行排版。3.1表格網頁實例表格化的頁面在不同平臺、不同分辨率的瀏覽器里都能顯示出原有的布局和對齊。圖4-1所示的是“天使部落”網頁利用表格進行布局的頁面效果。圖4-1“天使部落”主頁3.2利用DreamweaverMX編輯網頁表格3.2.1創(chuàng)建表格表格主要由以下3個基本元
2、素組成。行（Row）：表格在水平方向上的組成元素。列（Column）：表格在豎直方向上的組成元素。單元格（Cell）：表格中的最小的獨立存放數(shù)據的區(qū)域。另外，還有以下幾個概念需要掌握。邊框（Border）：單元格四周的界線標志。表格間距（Cellspace）：定義內部表格線的寬度。表格間隙（Cellpad）：相鄰的單元格之間的間隙。在DreamweaverMX中，創(chuàng)建表格有以下4種方式。執(zhí)行主菜單中的“插入”→“表格”命令。按組合鍵Ctrl+Alt+T。單擊插入面板上“常用”選項卡中的“插入表格”按鈕。單擊插入面板上“表格”選項卡中的“插入表格”按鈕。使用上述4種方式中任意一種方法都將打開
3、如圖3-2所示的“插入表格”對話框。圖3-2“插入表格”對話框對話框中各選項含義如下。行數(shù)：初次指定表格的總行數(shù)。列數(shù)：初次指定表格的總列數(shù)。單元格填充：指定單元格的大小，以像素為單位。單元格間距：指定單元格之間的距離，以像素為單位。寬度：指定表格的寬度，以百分比或像素為單位（百分比用于根據瀏覽器窗口的大小來自動調整表格的寬度）。邊框：指定表格邊界的寬度，以像素為單位（如果在瀏覽器窗口中不顯示表格的邊框，則定義為0）。3.2.2表格的編輯1．修改表格（1）調整表格的大小圖3-4利用“屬性”面板調整表格的大?。?）調整行高、列寬（3）合并單元格（4）拆分單元格（5）表格的嵌套（6）表格的復制
4、（7）刪除表格（8）增加或減少行、列跨度2．在表格中輸入文字和圖像向表格中輸入的內容主要是文字和圖片兩種形式。（1）在表格中輸入文字（2）在表格中插入圖像3.2.3設置表格屬性1．表格整體屬性設置圖3-11表格“屬性”面板2．行、列和單元格屬性設置圖3-12表格的行、列和單元格“屬性”面板3.2.4表格的排序在表格的應用中，常要對表格中的一組數(shù)據進行排序。在DreamweaverMX中可以實現(xiàn)按數(shù)字的排序和按字母的排序。3.2.5表格的格式化DreamweaverMX為表格提供了17種表格格式模板，可以從中選擇一種方案快速應用到用戶設計的表格中。圖4-14“格式化表格”對話框3.3利用HT
5、ML編輯 網頁表格3.3.1利用HTML制作示例網頁表格利用HTML同樣可以制作網頁表格。對于初學者直接使用HTML代碼編制網頁表格是件很困難的事情，但是，可以通過DreamweaverMX提供的“文檔”面板來查看已經設計好的網頁表格的HTML代碼，以幫助用戶學習和掌握HTML代碼的編寫規(guī)則及方法。3.3.2表格的基本構成通常在HTML中創(chuàng)建一個普通的表格應包括以下標記符。（1）TABLE（2）TITLE（3）CAPTION（4）TR（5）TD和TH（6）META3.3.3表格的編輯及屬性設置1．合并單元格2．邊框與分隔線3．表格的對齊4．控制表格和單元格的大小5．設置表格和單元格的背景6
6、．控制單元格空白3.4表格的應用技巧3.4.1利用表格制作水平線與垂直線在對網頁布局排版時，有時候會需要一條細線作為分隔線，用一些線型的圖像可以完成這項功能，但既費事又占據存儲空間。其實，這個小問題用表格就能很好的實現(xiàn)，只需對表格屬性、單元格屬性及其源代碼稍作修改即可。3.4.2利用表格進行頁面布局DreamweaverMX為此提供了一種新的網頁排版視圖——布局視圖（LayoutView），在這種視圖模式下，用戶可以通過繪制布局表格和布局單元格，從而可以像在一張白紙上用筆來規(guī)劃網頁的布局，并可在布局單元格中插入文本和圖像，通過移動布局表格和布局單元格的位置來精確地定位網頁上的文本和圖像。1
7、．切換視圖2．繪制布局表格3．編輯和設置布局表格
