第14章使用表格和IFrame框架布局網(wǎng)頁(yè)

1、表格（table）是頁(yè)面的重要元素，在Div+CSS布局方式被廣泛運(yùn)用之前，表格布局在很長(zhǎng)一段時(shí)間中都是重要頁(yè)面布局方式。在使用Div+CSS布局中，也并不是完全不可以使用表格，而是將表格回歸它本身的作用，用于顯示表格式數(shù)據(jù)。14.1.1“表格表格”對(duì)話框?qū)υ捒?行數(shù) 該選項(xiàng)用于設(shè)置所插入表格的行數(shù)。 列該選項(xiàng)用于設(shè)置所插入表格的列數(shù)。 表格寬度 該選項(xiàng)用于設(shè)置所插入表格的寬度. 邊框粗細(xì) 該選項(xiàng)用于設(shè)置所插入表格的邊框的寬度。 單元格邊距 該選項(xiàng)用于設(shè)置所插入的表格中單元格內(nèi)容和單元格邊框之間的像素?cái)?shù)。 單元格間距 該選項(xiàng)用于設(shè)置所插入的表格中相鄰的表格單元格之間像素?cái)?shù)。 標(biāo)題 在該選項(xiàng)組中

2、可以選擇已定義的標(biāo)題樣式，包括有“無”、“左”、“頂部”和“兩者”。 輔助功能在該選項(xiàng)組定義與表格存儲(chǔ)相關(guān)的參數(shù)，。14.1.2插入表格插入表格在前面的章節(jié)中已經(jīng)學(xué)習(xí)了在網(wǎng)頁(yè)中插入Div的方法，在網(wǎng)頁(yè)中插入表格的方法與插入Div的方法類似，非常方便。14.1.3選擇表格和單元格選擇表格和單元格設(shè)置表格時(shí)，可以選擇整個(gè)表格或單個(gè)表格元素，例如選擇表格中的某一行或某一列，并且還可以選擇表格中連續(xù)的單元格或者不連續(xù)的單元格。課堂案例課堂案例在網(wǎng)頁(yè)中插在網(wǎng)頁(yè)中插入表格入表格課堂案例：在網(wǎng)頁(yè)中插入表格最終文件：光盤最終文件第14章14-1-2.html視頻：光盤視頻第14章14-1-2.swf課堂案例課

3、堂案例選擇表格和選擇表格和單元格單元格課堂案例：選擇表格和單元格最終文件：光盤最終文件第14章14-1-3.html視頻：光盤視頻第14章14-1-3.swf14.1.4設(shè)置表格屬性設(shè)置表格屬性 行和列在“行”文本框中顯示了當(dāng)前所選中表格的行數(shù)，在文本框中輸入數(shù)值，可以修改所選中的表格的行。Cols在Cols文本框中顯示了當(dāng)前所選中表格的列數(shù)，在文本框中輸入數(shù)值，可以修改所選中的表格的列。 寬顯示當(dāng)前選中表格的寬度，可以在該選項(xiàng)的文本框中填入數(shù)值，修改選中的表格的寬度。緊跟其后的下拉列表框用來設(shè)置寬度的單位，有兩個(gè)選項(xiàng)“%”和“像素”。 CellPad該選項(xiàng)用來設(shè)置單元格內(nèi)部填充的大小，可填入

4、數(shù)值，單位是像素。 CellSpace該選項(xiàng)用來設(shè)置單元格的間距，即單元格與單元格之間的距離，可填入數(shù)值，單位是像素。 Align該選項(xiàng)用來設(shè)置表格的水平對(duì)齊方式。Align下拉列表框有4個(gè)選項(xiàng)，分別是“默認(rèn)”、“左對(duì)齊”、“居中對(duì)齊”和“右對(duì)齊”。在Align下拉列表框中選擇“默認(rèn)”選項(xiàng)，則表格將以瀏覽器默認(rèn)的水平對(duì)齊方式來對(duì)齊，默認(rèn)的水平對(duì)齊方式一般為“左對(duì)齊”。 Border該選項(xiàng)用來設(shè)置表格邊框的寬度，可填入數(shù)值，單位是像素。 Class在該選項(xiàng)的下拉列表中可以選擇應(yīng)用于該表格的CSS樣式。“清除列寬”按鈕 ：?jiǎn)螕粼摪粹o，則可以清除當(dāng)前選中表格的寬度?！皩⒈砀駥挾绒D(zhuǎn)換成像素”按鈕 ：?jiǎn)?/p>

5、擊該按鈕，則可以將當(dāng)前選中表格的寬度單位轉(zhuǎn)換為像素。“將表格寬度轉(zhuǎn)換成百分比”按鈕 ：?jiǎn)螕粼摪粹o，則可以將當(dāng)前選中表格的寬度單位轉(zhuǎn)換為百分比?！扒宄懈摺卑粹o ：?jiǎn)螕粼摪粹o，則可以清除當(dāng)前選中表格的高度。14.1.5設(shè)置單元格屬性設(shè)置單元格屬性在單元格的“屬性”面板上還有一個(gè)CSS選項(xiàng)卡，單擊轉(zhuǎn)換到CSS選項(xiàng)卡中，在該選項(xiàng)卡中的設(shè)置選項(xiàng)，與在HTML選項(xiàng)卡中的設(shè)置選項(xiàng)相同。主要的區(qū)別在于，在CSS選項(xiàng)卡中設(shè)置的屬性，會(huì)生成相應(yīng)的CSS樣式表應(yīng)用于該單元格，而在HTML選項(xiàng)卡中設(shè)置的屬性，會(huì)直接在該單元格標(biāo)簽中寫入相關(guān)屬性的設(shè)置。14.2.1調(diào)整表格大小調(diào)整表格大小用戶可以通過拖動(dòng)選中表格時(shí)顯示

6、的3個(gè)選擇柄來調(diào)整表格的大小。在水平方向調(diào)整表格的大小，可拖動(dòng)右邊的選擇柄，在垂直方向調(diào)整表格的大小，可以拖動(dòng)底部的選擇柄，如果需要同時(shí)從兩個(gè)方向調(diào)整表格大小，可拖動(dòng)右下角的選擇柄。14.2.2調(diào)整單元格大小調(diào)整單元格大小“調(diào)整單元格的大小有以下兩種方法。一種方法是直接拖動(dòng)行或列的邊框，如果需要更改某個(gè)列的大小不變，可以按住Shift鍵，然后拖動(dòng)列的邊框。另一種方法是在“屬性”面板上設(shè)置“寬”和“高”文本框內(nèi)的數(shù)值。單位可以為“像素”或“百分比”，默認(rèn)輸入的數(shù)值單位即為像素如果需要單位為百分比顯示，則需要在數(shù)值的后面輸入%。在頁(yè)面中插入表格后，可以通過“屬性”面板對(duì)表格或單元格的相關(guān)屬性進(jìn)行設(shè)

7、置，還可以通過其他方式對(duì)表格或單元格的大小以及表格結(jié)構(gòu)進(jìn)行相應(yīng)的調(diào)整。14.2.3插入行或列插入行或列選中要插入行或列的單元格，單擊鼠標(biāo)右鍵，在彈出的菜單中執(zhí)行“表格插入行（插入列）”命令，就可以插入一行或一列單元格。如果需要插入多行或多列，執(zhí)行“插入行或列”命令，在彈出的“插入行或列”對(duì)話框中進(jìn)行相應(yīng)的設(shè)置。14.2.4檢查表單檢查表單如果想刪除行或列，只需選中要?jiǎng)h除行或列的單元格，單擊鼠標(biāo)右鍵，在彈出菜單中執(zhí)行“表格刪除行（刪除列）”命令即可。14.2.5復(fù)制和粘貼單元格復(fù)制和粘貼單元格單元格和文本一樣，也是可以進(jìn)行剪切、復(fù)制和粘貼的操作。選擇要復(fù)制或剪切的單元格，既可以選擇一個(gè)單元格，也

8、可以選擇多個(gè)單元格，但要保證選中的單元格區(qū)域呈連續(xù)的、矩形的形狀。14.2.6合并單元格合并單元格拖動(dòng)鼠標(biāo)選擇多個(gè)單元格，單擊“屬性”面板上的“合并所選單元格，使用夸度”按鈕 ，或在所選單元格上單擊鼠標(biāo)右鍵，在彈出菜單中執(zhí)行“表格合并單元格”命令，即可將所選的多個(gè)單元格合并為一個(gè)單元格，14.2.7拆分單元格拆分單元格 將光標(biāo)放置在需要拆分的單元格內(nèi)，單擊“屬性”面板上的“拆分單元格為行或列”按鈕 ，或在要拆分的選單元格上單擊鼠標(biāo)右鍵，在彈出菜單中執(zhí)行“表格拆分單元格”命令，彈出“拆分單元格”對(duì)話框，在該對(duì)話框中可選擇將選中的單元格拆分成“行”或“列”和拆分的“行數(shù)”或“列數(shù)”。這里將單元格拆

9、分成3列。針對(duì)表格數(shù)據(jù)的處理需要，在Dreamweaver CC中還提供了對(duì)表格數(shù)據(jù)進(jìn)行排序、導(dǎo)入表格數(shù)據(jù)和導(dǎo)出表格數(shù)據(jù)的高級(jí)操作技巧，通過這些技巧的應(yīng)用，可以更加方便、快捷地對(duì)表格數(shù)據(jù)進(jìn)行處理。14.3.1排序表格排序表格網(wǎng)頁(yè)中表格內(nèi)部常常有大量的數(shù)據(jù)，Dreamweaver CC可以方便的將表格內(nèi)的數(shù)據(jù)進(jìn)行排序。如果需要對(duì)表格數(shù)據(jù)進(jìn)行排序，則選中需要排序的表格，執(zhí)行“命令排序表格”命令，彈出“排序表格”對(duì)話框，在該對(duì)話框中可以對(duì)表格排序的規(guī)則進(jìn)行設(shè)置。14.3.2導(dǎo)入表格式數(shù)據(jù)導(dǎo)入表格式數(shù)據(jù)在Dreamweaver CC中，可以將Word等軟件處理的數(shù)據(jù)放到網(wǎng)上，先從Word等軟件中將文件

10、另存為文本格式的文件，再用Dreamweaver將這些數(shù)據(jù)導(dǎo)入為網(wǎng)頁(yè)中的表格式數(shù)據(jù)。如果要導(dǎo)入表格式數(shù)據(jù)，可以執(zhí)行“文件導(dǎo)入表格式數(shù)據(jù)”命令，彈出“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框，在該對(duì)話框中進(jìn)行設(shè)置。課堂案例課堂案例對(duì)表格數(shù)據(jù)對(duì)表格數(shù)據(jù)進(jìn)行排序進(jìn)行排序課堂案例：對(duì)表格數(shù)據(jù)進(jìn)行排序最終文件：光盤最終文件第14章14-3-1.html視頻：光盤視頻第14章14-3-1.swf課堂案例課堂案例導(dǎo)在網(wǎng)頁(yè)中導(dǎo)在網(wǎng)頁(yè)中導(dǎo)入表格式數(shù)據(jù)內(nèi)容導(dǎo)入表格式數(shù)據(jù)內(nèi)容課堂案例：在網(wǎng)頁(yè)中導(dǎo)入表格式數(shù)據(jù)內(nèi)容最終文件：光盤最終文件第14章14-3-2.html視頻：光盤視頻第14章14-3-2.swf14.3.3導(dǎo)出表格數(shù)據(jù)導(dǎo)出表

11、格數(shù)據(jù)如果要導(dǎo)出表格數(shù)據(jù)，需要把鼠標(biāo)指針放置在表格中的任意單元格中。執(zhí)行“文件導(dǎo)出表格”命令，彈出“導(dǎo)出表格”對(duì)話框。14.4.1使用使用CSS實(shí)現(xiàn)隔行變色的單元格實(shí)現(xiàn)隔行變色的單元格對(duì)于大量的數(shù)據(jù)表格，單元格如果采用相同的背景色，那么用戶在查看數(shù)據(jù)時(shí)會(huì)非常的不清晰，并且容易讀錯(cuò)，通常的解決方法就是通過CSS樣式實(shí)現(xiàn)隔行變色的效果，使得奇數(shù)行和偶數(shù)行的背景色不一樣，從而達(dá)到數(shù)據(jù)的一目了然。在網(wǎng)頁(yè)中使用表格來表現(xiàn)數(shù)據(jù)內(nèi)容時(shí)，有時(shí)數(shù)據(jù)量比較大，表格的行和列就比較多。通過CSS樣式，可以實(shí)現(xiàn)一些表格的特殊效果，從而使數(shù)據(jù)信息更加有條理，不至于非常凌亂。14.4.2使用使用CSS實(shí)現(xiàn)交互變色表格實(shí)現(xiàn)交

12、互變色表格如果數(shù)據(jù)行能動(dòng)態(tài)根據(jù)鼠標(biāo)懸浮來改變顏色，就會(huì)使頁(yè)面充滿動(dòng)態(tài)效果，通過CSS就可以輕松的實(shí)現(xiàn)變色表格的效果。14.5.1制作制作IFrame框架頁(yè)面框架頁(yè)面課堂案例課堂案例使用使用CSS實(shí)實(shí)現(xiàn)隔行變色的單元格現(xiàn)隔行變色的單元格課堂案例：使用CSS實(shí)現(xiàn)隔行變色的單元格最終文件：光盤最終文件第14章14-4-1html視頻：光盤視頻第14章14-4-1.swf課堂案例課堂案例使用使用CSS實(shí)現(xiàn)實(shí)現(xiàn)交互變色表格交互變色表格課堂案例：使用CSS實(shí)現(xiàn)交互變色表格最終文件：光盤最終文件第14章14-4-2.html視頻：光盤視頻第14章14-4-2.swfIFrame框架是一種特殊的框架技術(shù)，IF

13、rame框架比框架更加容易地控制網(wǎng)站的內(nèi)容。但是，由于Dreamweaver中并沒有提供IFrame框架的可視化制作方案，因此需要手動(dòng)添加一些頁(yè)面的源代碼。課堂案例課堂案例制作制作IFrame框架頁(yè)面框架頁(yè)面課堂案例：制作IFrame框架頁(yè)面最終文件：光盤最終文件第14章14-5-1.html視頻：光盤視頻第14章14-5-1.swf課堂案例課堂案例IFrame框架頁(yè)面鏈接框架頁(yè)面鏈接課堂案例：IFrame框架頁(yè)面鏈接最終文件：光盤最終文件第14章14-5-2html視頻：光盤視頻第14章14-5-2.swf14.5.2IFrame框架頁(yè)面鏈接框架頁(yè)面鏈接課堂案例：制作社區(qū)類網(wǎng)站頁(yè)面最終文件：光盤最終文件第14章14-6.html視頻：