網(wǎng)站建設(shè)與管理PPT電子課件教案-第5章 表格和框架.ppt

第五章 表格和框架,內(nèi)容提要,5.1 表格概述 5.2 制作表格 5.3 選擇表格對象 5.4 編輯表格 5.5 表格屬性面板的使用 5.6 框架,5.1 表格概述,表格在網(wǎng)頁中具有非常重要的作用，表格是網(wǎng)頁設(shè)計人員用來進行網(wǎng)頁排版的設(shè)計工具。本章將學(xué)習(xí)如何插入表格、選取表格或單元格區(qū)域、合并與拆分單元格、格式化表格及表格屬性的設(shè)置等。,5.2 制作表格,插入表格 插入表格的步驟： 1 新建一個html文檔，將光標(biāo)放在要插入表格的位置。 2 單擊“常用”工具欄的“表格”按鈕，打開如圖所示的“表格”對話框。,制作表格,3 在“表格大小”欄中的“行數(shù)”輸入框中輸入要創(chuàng)建的表格的行數(shù)3。在“列數(shù)”輸入框中輸入表格的列數(shù)3。 4“表格寬度”輸入框用于設(shè)置表格的寬度，右側(cè)的列表中可選擇“像素”或“百分比”。 5. “邊框粗細”輸入框用于設(shè)置表格邊框的粗細。輸入大于0的整數(shù)表示有邊框，若輸入0表示在網(wǎng)頁中不顯示邊框，在設(shè)計頁面中以虛線表示。 6. “單元格邊距”輸入框用于輸入單元格邊框和單元格內(nèi)容之間的像素數(shù)。 7.“單元格間距”輸入框用于輸入單元格與單元格間的間距值，值越大間距越寬。 8. “頁眉”欄用于設(shè)置“頁眉”在表格中的位置 。,制作表格,9設(shè)置好需要的參數(shù)后，單擊“確定”按鈕即可將設(shè)置的表格插入到設(shè)計頁面中。下圖所示為加了標(biāo)題文字的表格。, 演示,制作表格,10單擊插入表格中“700”的向下箭頭，彈出如圖所示的列表。,制作表格,選擇表格：選擇該項，就可選取整個表格。 清除所有行高：選擇該項，表格高度為默認值。 清除所有寬度：選擇該項，表格寬度縮為一個字符寬。 使所有寬度一致：固定為第一行中所有單元格的寬度。 隱藏表格寬度：選擇該項后表格中的寬度顯示線被隱藏。此時，可選擇 “查看”“可視化助理”“表格寬度”命令使其顯示。,各選項的含義如下：,制作表格,11單擊“700”上方的向下箭頭按鈕，打開如下圖所示的表格列設(shè)置列表。,各選項的含義如下： l 左側(cè)插入列：在當(dāng)前列左邊插入一列，則將平分單元格寬度，同時每個單元格下方都出現(xiàn)列按鈕。 l 右側(cè)插入列：在當(dāng)前列右邊插入一列，重新平分所有單元格寬度。,嵌套表格,嵌套表格就是在一個表格的單元格中再插入一個表格。 插入嵌套表格的步驟： 1將光標(biāo)定位到要插入表格的單元格中。 2單擊“常用”工具欄的“表格”按鈕，打開“插入表格”對話框。 3根據(jù)需要分別輸入行數(shù)、列數(shù)、寬度和邊框等項。然后單擊“確定”。,5.3 選擇表格對象,選擇表格： 表格的選中方法有以下幾種: 1.將鼠標(biāo)移到表格上鼠標(biāo)變?yōu)?圖標(biāo)時，單擊鼠標(biāo)左鍵即可。 2.將鼠標(biāo)移到表格的邊框線上，表格四周的邊框線呈現(xiàn)紅色，并且光標(biāo)變?yōu)?時單擊鼠標(biāo)左鍵即可。 3.將光標(biāo)定位到表格中，表格彈出綠線的標(biāo)志，單擊標(biāo)有大小“700”的綠線中的按鈕，如下圖所示。然后從列表中選取“選擇表格”項即可。, 演示,選擇行列,選擇行列的方法有以下幾種: 1將光標(biāo)移到要選定行的左側(cè)，當(dāng)所選行的邊框線變?yōu)榧t色時單擊鼠標(biāo)左鍵即可。 2將光標(biāo)定位到所選行最左側(cè)的單元格中，再水平拖動鼠標(biāo)到該行中最終一個單元格中釋放鼠標(biāo)可選定嵌套表格的行。 列的選取方法與行類似，只是從上方來選取 。,選定單元格,選定單元格的方法有以下幾種: 1單個單元格的選定方法很簡單，只需將光標(biāo)定位到要選定的單元格中即可。 2選擇相鄰的多個單元格的方法：將鼠標(biāo)光標(biāo)定位到開始的單元格中，按下鼠標(biāo)左鍵不放，并開始拖動鼠標(biāo)到最后一個單元格中釋放鼠標(biāo)即可。 3選中不相鄰的單元格的方法：按住鍵盤的ctrl鍵，用鼠標(biāo)單擊要選中的的單元格，可以選定任意多個不相鄰的單元格。,5.4 編輯表格,合并單元格的步驟： 1 選取要合并的單元格區(qū)域。 2 單擊“屬性”面板左下角的 按鈕即可。如果未見 按鈕，則點擊右下角 按鈕即可。,拆分單元格,拆分單元格的步驟（以拆分成若干行為例 ）： 1將光標(biāo)定位于要拆分的單元格中。 2單擊“屬性”面板中的 按鈕，打開如圖所示的“拆分單元格”對話框。,拆分單元格,拆分單元格的步驟（以拆分成若干行為例 ）： 3在“把單元格拆分”欄中，選中“行”單選項。 4在“行數(shù)”框中輸入要拆分的行數(shù)，如輸入2。 5單擊“確定”按鈕，即可按設(shè)置的參數(shù)拆分指定的單元格。如圖所示的粗框部分即為拆分的行。,拆分列的方法與拆分行的方法類似。,插入行列,插入單行的步驟： 1將光標(biāo)定位到要插入行的單元格中 。 2選擇“插入”“表格對象”“在上面插入行”命令，即可在當(dāng)前行的上方插入一行，并且該行成為當(dāng)前行 。 3選擇“修改”“表格”“插入行”命令，或在當(dāng)前單元格上單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格”“插入行”命令也可以實現(xiàn)插入行功能。,插入行列,插入多行的步驟： 1將光標(biāo)置于表格中希望插入多行的位置上，單擊鼠標(biāo)右鍵，在打開的菜單中選擇“表格 ”|“插入行或列”命令，此時將打開一個“插入行或列”對話框。 2在“插入”選項組中選擇“行”，在“行數(shù)”文本框中輸入數(shù)值2，在“位置”選項組中選中“所選之上”。 3.單擊“確定”按鈕后就能在光標(biāo)所在的單元格之上插入2行。,插入行列,插入單列的步驟： 1.在要插入列的位置單擊鼠標(biāo)左鍵。 2.再單擊該列下方的 按鈕，從彈出的列表中選擇“左側(cè)插入列”或“右側(cè)插入列”項即可將列插入到對應(yīng)的位置。,插入多列與插入多行的方法基本類似,刪除行列,刪除表格行或列的方法有以下兩種: 1.選定要刪除的行或列，按delete鍵即可刪除。 2.選定要刪除的行或列，或?qū)⒐鈽?biāo)定位到表格中要刪除的行或列中，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格”“刪除行”或“刪除列”命令即可。,格式化表格,用命令格式化表格的步驟： 1.選擇表格，選擇菜單“命令”“格式化表格”命令，打開如下圖所示的“格式化表格”對話框。,用命令格式化表格的步驟： 2.從列表中選擇需要的設(shè)計方案，預(yù)覽框中顯示對應(yīng)的表格樣式。 3.“行顏色”欄用于設(shè)置兩種不同的顏色；“交錯”下拉列表框可選擇表格交錯的方式。 4在“第一行：對齊”下拉列表框中選擇表格第一行中文本的對齊方式。 5.在“文字樣式”下拉列表框中選擇第一行文本的字體格式。在“背景色”色塊中設(shè)置表格第一行單元格的背景顏色；在“文本顏色”色塊中設(shè)置文本的顏色。 6.單擊“確定”按鈕，則可得到按選定格式格式化的表格。,格式化表格, 演示,導(dǎo)入表格式數(shù)據(jù),可以直接將數(shù)據(jù)從文件中導(dǎo)入到表格。方法是選擇“插入” |“表格對象” |“導(dǎo)入表格式數(shù)據(jù)”。 選擇具有一定分界格式的數(shù)據(jù)文件。 設(shè)定定界符、表格寬度、邊距、邊框等參數(shù)后，單擊“確定”按鈕即可。, 演示,排序表格,1. 選擇表格 2. 選擇“命令” | “排序表格”菜單項 3. 設(shè)置排序項、排序方式，以及是否排序標(biāo)題行等參數(shù) 4. 單擊“確定”按鈕, 演示,5.5 表格屬性面板的使用,表格的屬性面板顯示了所插入的表格的所有屬性，通過修改屬性面板中的參數(shù)可調(diào)整表格的各種屬性。 設(shè)置表格格式 設(shè)置表格格式的步驟： 1.選定表格，打開窗口底部的“屬性”面板，如圖所示。,設(shè)置表格格式的步驟： 2. “表格id”輸入框用于輸入表格名，如輸入“table1”。 3“行”和“列”輸入框用于修改表格的行數(shù)和列數(shù)修改完后按enter鍵進行確認。 4“寬”和“高”輸入框用于修改表格的寬度和高度在其后的列表框中可選擇“像素”或“百分比”。 5.“填充”輸入框用于修改單元格中的內(nèi)容和單元格邊框之間的距離。,表格屬性面板的使用,設(shè)置表格格式的步驟： 6“間距”輸入框用于設(shè)置相鄰單元格之間的距離. 7.“對齊”下拉列表框中選擇表格與同一段落中的文本或圖像的對齊方式。 8“邊框”輸入框用于設(shè)置邊框線的粗細。 9“邊框顏色”顏色塊用于設(shè)置邊框的顏色。 10“背景顏色”色塊用于設(shè)置表格的背景色。 11“背景圖像”輸入框用于輸入背景圖像的路徑，或單擊輸入框右側(cè)的文件夾圖標(biāo)選擇背景圖像文件。,表格屬性面板的使用,設(shè)置表格格式的步驟： 12.“類”下拉列表框用于選擇設(shè)置的css樣式。 13單擊圖中a按鈕可清除表格的列寬，單擊b按鈕可清除行高。 14單擊c（d）按鈕可將表格寬度（高度）從瀏覽器窗口的百分比轉(zhuǎn)換為像素。單擊e（f）按鈕則從像素轉(zhuǎn)換為百分比。 15設(shè)置完成后，按enter鍵進行確認。,表格屬性面板的使用,設(shè)置單元格格式 設(shè)置行、列或單元格屬性的步驟： 1.選定要設(shè)置屬性的單元格、行或列，“屬性”面板顯示如圖所示的參數(shù)。,表格屬性面板的使用,設(shè)置行、列或單元格屬性的步驟： 2. “水平”下拉列表框用于設(shè)置單元格中文本在水平方向的對齊方式；“垂直”列表框用于設(shè)置單元格中的文本在垂直方向的對齊方式。 3“寬”和“高”輸入框用于分別設(shè)置單元格的寬度和高度。默認單位是像素，若用百分比則應(yīng)在數(shù)值后加上百分號(%)。 4“背景”輸入框用于指定單元格、行或列的背景圖像路徑，也可單擊文件夾圖標(biāo)選擇一幅圖像。 5“背景顏色”和“邊框”色塊用于設(shè)置單元格、列或行的背景顏色和邊框顏色。,表格屬性面板的使用,表格上機實戰(zhàn), 演示,5.6 使用框架,框架是目前網(wǎng)頁設(shè)計最為常用的技術(shù)之一?？蚣苁菫g覽器窗口中的一個區(qū)域，它可以顯示與瀏覽器窗口其余部分所顯示內(nèi)容無關(guān)的html文檔。框架集是html文件，它定義了一組框架的布局和屬性，包括框架的數(shù)目、大小和位置 ，以及在每個框架中初始顯示的頁面的url。,創(chuàng)建框架和框架集,可以使用預(yù)定義的框架集或者自己設(shè)計框架集。 使用預(yù)定義的框架集： 選擇“文件” “新建”，打開“新建文檔”對話框。 在“常規(guī)”選項卡中選擇“框架集”，從“框架集”列表中選擇想要創(chuàng)建的框架集類型，如下圖所示。,單擊“創(chuàng)建”按鈕，框架集出現(xiàn)在設(shè)計窗口中，如下圖所示。每個框架中都可以獨立顯示不同的html文檔。,創(chuàng)建框架和框架集,也可以使用以下兩種方法來選擇預(yù)定義的框架集： 從“插入” “html” “框架”子菜單中選擇預(yù)定義的框架集，如圖1； 在“插入”工具欄的“布局”類別中，單擊“框架”按鈕上的下拉箭頭，然后選擇預(yù)定義的框架集，如圖2。,創(chuàng)建框架和框架集,圖1,圖2,創(chuàng)建框架和框架集,設(shè)計框架集： 方法：選擇“修改” “框架頁”，從子菜單中選擇拆分項。 技巧： 要以垂直或水平方式拆分一個框架，可將框架邊框從設(shè)計視圖的邊緣拖入設(shè)計視圖的中間； 要將一個框架拆分成4個框架，可將框架邊框從設(shè)計視圖的一角拖入框架的中間； 要單獨拆分一個框架，可首先打開“框架”面板，在面板上選中待拆分的框架，再用光標(biāo)拖動相應(yīng)框架的邊緣； 要刪除一個框架，可直接將框架邊框拖離頁面或拖到父框架的邊框上。,選擇框架和框架集,可以在文檔窗口中或者通過“框架”面板選擇框架和框架集。 在文檔窗口中選擇： 方法： 選擇框架：按下alt鍵的同時單擊框架內(nèi)部，框架周圍顯示選擇輪廓； 選擇框架集：單擊框架集的某一內(nèi)部框架邊框，框架集周圍顯示選擇輪廓。 技巧：可通過按下alt鍵和不同的方向鍵來選擇不同的框架或框架集 alt+：選擇同級別的前一框架（框架集）； alt+：選擇同級別的后一框架（框架集）； alt+：選擇父框架集； alt+：選擇第一個子框架或子框架集。,選擇框架和框架集,通過“框架”面板選擇： 方法：選擇“窗口” “框架”，打開“框架”面板 選擇框架：在面板中單擊框架，框架周圍顯示選擇輪廓，如圖1所示； 選擇框架集：在面板中單擊環(huán)繞框架集的邊框，框架集周圍顯示選擇輪廓，如圖2所示。,圖1,圖2,保存框架和框架集,保存框架集文件和所有帶框架的文檔： 方法：選擇“文件” “保存全部”。 保存框架集文件： 方法：選中框架集，然后執(zhí)行下列操作之一： 選擇“文件” “保存框架頁”； 選擇“文件” “框架集另存為”。 保存帶框架的文檔： 方法：單擊要保存文檔所在的框架，然后執(zhí)行下列操作之一： 選擇“文件”“保存框架”； 選擇“文件”“框架另存為”。,保存框架和框架集,改變在框架中顯示的文檔： 方法：將光標(biāo)放置在要顯示新文檔的框架中，選擇“文件”“在框架中打開”，然后選擇要在該框架中顯示的新文檔，最后單擊“確定”按鈕。如下圖所示。 說明：如果要使該文檔成為在瀏覽器中打開框架集時在框架中顯示的默認文檔，則必須保存該框架集。,設(shè)置框架和框架集屬性,框架屬性是確定框架集內(nèi)各個框架的名稱、源文件、邊距、滾動、邊框和能否調(diào)整大小，可以使用屬性檢查器來設(shè)置框架和框架集的屬性。 框架屬性及其設(shè)置方法： 選擇框架； 選擇“窗口”“屬性”，打開屬性檢查器，如下圖所示；,設(shè)置框架和框架集屬性,在屬性檢查器內(nèi)設(shè)置框架的各項屬性值，如下圖所示。,設(shè)置框架和框架集屬性,框架集屬性及其設(shè)置方法： 選擇框架集； 打開屬性檢查器，如下圖所示；,框架集,設(shè)置框架和框架集屬性,在屬性檢查器內(nèi)設(shè)置框架集的各項屬性值，如下圖所示。,為框架設(shè)置鏈接,要在一個框架中使用鏈接來打開另一個框架中的文檔，必須設(shè)置鏈接目標(biāo)。鏈接的目標(biāo)屬性指定了在其中打開鏈接內(nèi)容的框架或窗口。 為框架設(shè)置鏈接的具體步驟： 選擇要設(shè)置為超鏈接的文本或?qū)ο螅?打開屬性檢查器，在“鏈接”域中設(shè)置要鏈接到的文件，如下圖所示；,為框架設(shè)置鏈接,在屬性檢查器的“目標(biāo)”下拉列表中，選擇鏈接的文檔應(yīng)在其中顯示的框架或窗口，如下圖所示。,處理不能顯示框架的瀏覽器,框架在ie3.0以下版本的