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