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