（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作教程5

1、YCF正版可修改PPT（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作教程5項(xiàng)目活動(dòng)五公司網(wǎng)站建設(shè):表格在頁(yè)面中的應(yīng)用任務(wù)一表格的基本操作任務(wù)二特殊表格的制作任務(wù)三公司網(wǎng)站建設(shè)返回任務(wù)一表格的基本操作一、插入表格在網(wǎng)頁(yè)中插入表格， 可以使用以下幾種方法。方法一: 在菜單欄上執(zhí)行“插入” “表格” 命令。方法二: 在“插入” 工具欄的“常用” 選項(xiàng)卡中單擊“表格” 圖標(biāo)。方法三: 在“插入” 工具欄的“布局” 選項(xiàng)卡中單擊“表格” 圖標(biāo)。利用以上幾種方法都可以彈出“表格” 對(duì)話框， 在該對(duì)話框中可以設(shè)置表格的屬性， 這些都是在設(shè)計(jì)面板中完成的， 參數(shù)設(shè)置完成后， 單擊“確定” 按鈕， 插入表格， 如圖 所示?！氨砀瘛?對(duì)

2、話框分為三個(gè)部分， 它們被灰色的線區(qū)分開。下一頁(yè)返回任務(wù)一表格的基本操作.表格大小在這一部分中可以對(duì)表格的基本數(shù)據(jù)進(jìn)行設(shè)置。 “行數(shù)” 選項(xiàng)和“列” 選項(xiàng)用來(lái)設(shè)置表格的行數(shù)和列數(shù)。 “表格寬度” 的設(shè)置有兩種， 一種是像素， 另一種是百分比。 以像素為單位來(lái)進(jìn)行寬度設(shè)置時(shí)， 可以精確地設(shè)置表格的寬度,以百分比為單位設(shè)置寬度時(shí)， 會(huì)按比例來(lái)顯示表格的寬度。 “邊框粗細(xì)” 選項(xiàng)用于以像素為單位來(lái)設(shè)置表格的邊框， 如果不希望表格的邊框在瀏覽器中顯示出來(lái)， 可以將它的值設(shè)置為。 “單元格邊距” 就是指在單元格中插入的對(duì)象與單元格邊框之間的距離。 “單元格間距” 是指單元格與單元格之間的距離。上一頁(yè)下一

3、頁(yè)返回任務(wù)一表格的基本操作.標(biāo)題用于對(duì)表格進(jìn)行頁(yè)眉的設(shè)置， 有四種標(biāo)題設(shè)置方式。 選擇“無(wú)” 可以將其設(shè)置為沒有標(biāo)題的表格,選擇“左” “頂部” “兩者” 這三種可以將標(biāo)題的位置設(shè)置為相應(yīng)的位置。凡被設(shè)置為頁(yè)眉欄的表格， 其內(nèi)部的文字就會(huì)自動(dòng)加粗處理、居中顯示。 如圖 所示為使用“頂部” 頁(yè)眉模式制作的一個(gè)簡(jiǎn)單的職稱表。在制作這個(gè)職稱表時(shí)， 設(shè)置好頂部頁(yè)眉后， 就可以直接在第一行中輸入“姓名” “性別” “職稱”。 由于頁(yè)眉的設(shè)置， 這些字樣會(huì)與其他單元格中的不一樣。 從圖 中可看出， 被設(shè)置為頁(yè)眉欄的單元格中的文字都被加粗處理、居中顯示了， 而沒有被設(shè)置為頁(yè)眉欄的單元格則依然保持原來(lái)的狀態(tài)。

4、上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作.輔助功能用戶在這里可以設(shè)置表格的標(biāo)題， 并可以通過“標(biāo)題” 選項(xiàng)對(duì)表格的標(biāo)題和顯示位置進(jìn)行設(shè)置。 “摘要” 部分是對(duì)這個(gè)表格的一些說(shuō)明， 使用屏幕閱讀器可以讀取摘要， 不過這個(gè)摘要不會(huì)顯示在用戶的瀏覽器中。 設(shè)置完畢后單擊“確定” 按鈕就可以將表格插入到文檔中。二、選擇表格在對(duì)這些插入好的表格進(jìn)行進(jìn)一步的編輯時(shí)， 要先選擇這個(gè)表格。 除了能夠選擇整個(gè)表格， 還需要能夠選擇表格的行、列及單元格。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作.選擇整個(gè)表格如果表格處于選中狀態(tài)， 那么表格周圍就會(huì)出現(xiàn)一個(gè)黑邊框， 這個(gè)邊框的右邊和下面附帶有黑色的控制點(diǎn)。 選擇整個(gè)表格的方

5、法如下:方法一: 將光標(biāo)移動(dòng)到表格的左上角、上邊框或下邊框外的附近區(qū)域， 在光標(biāo)的右下角出現(xiàn)一表格的縮略圖時(shí)， 單擊鼠標(biāo)左鍵就可以將這個(gè)表格選中。方法二: 將光標(biāo)定位到表格的任一單元格中， 然后單擊該表格對(duì)應(yīng)的 標(biāo)簽，就可以將這個(gè)表格選中。方法三: 將光標(biāo)定位到表格的任一單元格中， 然后按下“ ” 組合鍵兩次就可以選中表格。方法四: 將光標(biāo)定位到表格的任一單元格中， 執(zhí)行菜單“修改” “表格” “選擇表格” 命令即可選中表格。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作.選擇表格的行為了使選中的部分能夠和沒有選中的部分區(qū)分開， 當(dāng)用戶選擇了某行時(shí)， 行的周圍都帶有黑色的邊框， 將光標(biāo)指向當(dāng)前選中的行，

6、 所有單元格的周圍都帶有紅色邊框。 選擇表格行的方法如下:方法一: 將光標(biāo)定位到要選擇行的任一單元格中， 然后在選擇器上單擊相對(duì)應(yīng)行的 標(biāo)記， 即可選擇行。方法二: 將光標(biāo)移動(dòng)到要選擇行的左邊框附近位置， 當(dāng)鼠標(biāo)指針變?yōu)橐粋€(gè)指向右的黑色箭頭形狀時(shí)， 單擊鼠標(biāo)即可選擇行。方法三: 將光標(biāo)定位到要選擇行的第一個(gè)單元格中， 按住鼠標(biāo)左鍵拖動(dòng)至該行的最后一個(gè)單元格， 即可選擇行。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作.選擇表格的列當(dāng)用戶選擇了列以后， 它的顯示狀態(tài)和行的狀態(tài)一樣， 不同的是它們的選擇方式。 選擇表格列的方法如下:方法一: 將光標(biāo)移動(dòng)到要選擇列的上邊框附近位置， 當(dāng)鼠標(biāo)指針變?yōu)橐粋€(gè)指向下的

7、黑色箭頭形狀時(shí)， 單擊鼠標(biāo)即可選擇列。方法二: 將光標(biāo)定位到要選擇列的第一個(gè)單元格中， 按住鼠標(biāo)左鍵拖動(dòng)至該列的最后一個(gè)單元格， 即可選擇列。.選擇表格的單元格對(duì)表格的行和列的選擇已經(jīng)非常熟悉時(shí)， 單元格的選擇就已經(jīng)不再困難了。 用戶可以在表格中的某個(gè)單元格內(nèi)單擊， 然后按住鼠標(biāo)向相鄰單元格方向拖動(dòng)鼠標(biāo)就可以選中這個(gè)單元格。 使用快捷鍵進(jìn)行選擇時(shí)要先在某個(gè)單元格內(nèi)單擊一下， 然后按“ ” 組合鍵即可將這個(gè)單元格選中。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作如果要選擇連續(xù)單元格， 按住鼠標(biāo)左鍵拖動(dòng)， 即可選擇連續(xù)單元格,如果要選擇不連續(xù)單元格， 將光標(biāo)定位到單元格中， 按 鍵并單擊就可以選擇任意不相

8、鄰的單元格。三、表格屬性的設(shè)置表格屬性的設(shè)置主要通過“表格” 屬性面板來(lái)進(jìn)行。 選中表格， 屬性面板就會(huì)變成“表格” 屬性， 如圖 所示。主要選項(xiàng)介紹如下:“行” 和“列”: 可以直接在“行” 和“列” 后的文本框中輸入行數(shù)和列數(shù)， 以調(diào)整原來(lái)表格的結(jié)構(gòu)。“寬度”: 用來(lái)設(shè)置表格的寬度， 默認(rèn)單位為像素， 也可以為百分比“填充”: 用來(lái)設(shè)置單元格內(nèi)部空白的大小， 單位為像素?！伴g距”: 用來(lái)設(shè)置單元格之間的距離， 單位為像素。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作“邊框”: 用來(lái)設(shè)置表格邊框的寬度， 單位為像素。“對(duì)齊”: 用來(lái)設(shè)置表格的對(duì)齊方式， 對(duì)齊方式有“默認(rèn)” “左對(duì)齊” “居中對(duì)齊”

9、和“右對(duì)齊”。 和 按鈕: 分別用來(lái)清除表格的列寬和行高。 和 按鈕: 分別用來(lái)將表格的列寬轉(zhuǎn)換為像素和將表格的列寬轉(zhuǎn)換為百分比。四、單元格屬性的設(shè)置在網(wǎng)頁(yè)中既可以對(duì)表格進(jìn)行屬性設(shè)置， 也可以對(duì)單元格進(jìn)行屬性設(shè)置。 選擇單元格，屬性面板就會(huì)變成“單元格” 屬性， 如圖 所示。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作在“單元格” 屬性面板中可以對(duì)單元格進(jìn)行一些設(shè)置和修改， 主要選項(xiàng)介紹如下:“水平”: 用來(lái)設(shè)置單元格內(nèi)容的水平對(duì)齊方式， 水平對(duì)齊方式有“默認(rèn)” “左對(duì)齊”“居中對(duì)齊” 和“右對(duì)齊”。“垂直”: 用來(lái)設(shè)置單元格內(nèi)容的垂直對(duì)齊方式， 垂直對(duì)齊方式有“默認(rèn)” “頂端”“居中” “底部” 和

10、“基線”。“寬” 和“高”: 用來(lái)設(shè)置單元格的寬度和高度， 單位為像素或百分比?！安粨Q行”: 當(dāng)單元格中的文本超過它的寬度時(shí)， 該單元格的寬將會(huì)自動(dòng)發(fā)生改變以適應(yīng)過長(zhǎng)的文本。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作“標(biāo)題”: 用來(lái)設(shè)置單元格文字為標(biāo)題格式。 通常在使用表格時(shí)把表格的第一行或第一列單元格設(shè)置為標(biāo)題單元格， 也稱為表頭。 如果對(duì)“標(biāo)題” 復(fù)選框進(jìn)行選擇， 那么被選擇的單元格都將被設(shè)置為標(biāo)題單元格。 而被設(shè)置為標(biāo)題的單元格中的內(nèi)容將被加粗顯示出來(lái)， 以表明該單元格中的內(nèi)容已經(jīng)被設(shè)置為標(biāo)題?！氨尘邦伾? 用來(lái)設(shè)置單元格的背景顏色。 和 按鈕: 分別用來(lái)合并單元格和拆分單元格。五、表格的修

11、改.插入行和列() 如果要插入一行， 將光標(biāo)定位在最后一行的任一單元格中， 單擊鼠標(biāo)右鍵， 在彈出的快捷菜單中選擇“表格” “插入行或列” 命令， 彈出“插入行或列” 對(duì)話框， 如圖 所示。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作() 設(shè)置對(duì)話框“位置” 選項(xiàng)為“所選之下”， “行數(shù)” 為“”， 單擊“確定” 按鈕即可。 用同樣的方法也可以插入一列。.刪除行和列刪除行和列的方法很簡(jiǎn)單， 下面介紹三種方法。方法一: 選中要?jiǎng)h除的行或者列， 單擊鼠標(biāo)右鍵， 在彈出的快捷菜單中選擇“表格” “刪除行” 或者“表格” “刪除列” 命令即可。方法二: 選中要?jiǎng)h除的行或者列， 選擇菜單“修改” “表格” “刪

12、除行” 或“修改” “表格” “刪除列” 命令即可。方法三: 選中要?jiǎng)h除的行或列， 按 鍵即可。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作 合并和拆分單元格在使用表格進(jìn)行網(wǎng)頁(yè)的布局時(shí)， 表格并不是單獨(dú)地放在網(wǎng)頁(yè)里面的， 而是有層次地在表格里面再嵌套表格， 或?qū)⒁粋€(gè)單元格拆分為幾個(gè)單元格， 也可以把多個(gè)單元格合并在一起。 在 中， 一個(gè)單元格可以擴(kuò)展到多行或多列的大小。 而合并單元格可以將多個(gè)單元格合并為一個(gè)較大的單元格。 中可以使用以下三種方法來(lái)合并和拆分單元格。方法一: 利用“屬性” 面板中的“合并” 按鈕 和“拆分” 按鈕方法二: 選擇菜單“修改” “表格” “合并單元格” 或者“修改” “表格

13、” “拆分單元格” 命令。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作方法三: 單擊鼠標(biāo)右鍵， 在彈出的快捷菜單中選擇“表格” “合并單元格” 或者“表格” “拆分單元格” 命令進(jìn)行操作。合并單元格時(shí)， 選擇的幾個(gè)單元格必須都是相鄰的， 并且還要在一個(gè)矩形的范圍內(nèi)才能被合并。 如果選擇的單元格不相鄰或沒有形成一個(gè)矩形的范圍， 那么它們就無(wú)法合并為一個(gè)單元格。 拆分單元格就比較簡(jiǎn)單了， 不過它要求只能選擇一個(gè)單元格來(lái)進(jìn)行拆分。六、表格排序 中的表格有一個(gè)排列表格內(nèi)容的功能， 這個(gè)功能對(duì)于數(shù)據(jù)表格來(lái)說(shuō)非常有用。 用戶能夠通過該功能輕松地實(shí)現(xiàn)按姓名或數(shù)字排列表格中的內(nèi)容。 表格排序命令可以重新排列任何大小的

14、表格， 并能夠保持表格的格式不發(fā)生變化。 不需要使用數(shù)據(jù)庫(kù)， 表格排序命令就可以將同樣的數(shù)據(jù)以不同的形式顯示出來(lái)。上一頁(yè)下一頁(yè)返回任務(wù)一表格的基本操作表格排序方法如下:) 執(zhí)行菜單“命令” “排序表格” 命令， 打開“排序表格” 對(duì)話框。) 在“排序按” 下拉菜單中， 選擇“列”， 在“順序” 下拉菜單中選擇“按數(shù)字順序”， 并且“升序” 排列， 如圖 所示。) 設(shè)置完成， 單擊“確定” 按鈕即可。上一頁(yè)返回任務(wù)二特殊表格的制作一、細(xì)線表格的制作在設(shè)置表格邊框時(shí)， 即使將表格的邊框設(shè)置為“”， 其邊框還是有些粗的。 那么如何制作出更細(xì)表格線的表格呢? 下面將介紹制作細(xì)線表格的方法。) 在網(wǎng)頁(yè)中

15、， 選擇如圖 所示表格。) 在“屬性” 面板的“表格” 框中輸入“”， 在“填充” 和“邊框” 文本框中輸入“”， 在“間距” 文本框中輸入“”， 如圖 所示。) 選擇表格， 執(zhí)行菜單“窗口” “ 樣式” 命令， 打開“ 樣式” 面板，單擊面板下方的 按鈕， 出現(xiàn)如圖 所示的“新建 規(guī)則” 對(duì)話框， 單擊“確定” 按鈕。下一頁(yè)返回任務(wù)二特殊表格的制作) 彈出如圖 所示的“ 的 規(guī)則定義” 對(duì)話框， 在“分類” 欄中的“背景” 選項(xiàng)卡中設(shè)置“ ” 為“”， 設(shè)置完成， 單擊“確定” 按鈕。) 選擇表格中的所有單元格， 在單元格屬性面板的“背景顏色” 選項(xiàng)卡中輸入“”， 將單元格背景色設(shè)置為白色，

16、 保存， 按 鍵瀏覽頁(yè)面， 效果如圖 所示。二、外框線表格的制作) 在網(wǎng)頁(yè)中， 選擇如圖 所示的表格。) 在屬性面板中“表格” 名稱框中輸入“”， 在“填充” “邊框” 和“間距” 文本框中輸入“”。上一頁(yè)下一頁(yè)返回任務(wù)二特殊表格的制作) 選擇表格， 執(zhí)行菜單“窗口” “ 樣式” 命令， 打開“ 樣式” 面板， 單擊面板下方的 按鈕， 出現(xiàn)如圖 所示的“新建 規(guī)則” 對(duì)話框， 單擊“確定”按鈕。) 彈出“ 的 規(guī)則定義” 對(duì)話框， 在“分類” 欄的“邊框” 選項(xiàng)卡中設(shè)置“” “” 和“”， 如圖 所示， 設(shè)置完成后， 單擊“確定” 按鈕。) 保存網(wǎng)頁(yè)， 按 鍵瀏覽頁(yè)面， 效果如圖 所示。上一頁(yè)

17、下一頁(yè)返回任務(wù)二特殊表格的制作三、利用表格制作水平線/ 垂直線有時(shí)為了頁(yè)面的美觀， 需要在頁(yè)面的適當(dāng)位置設(shè)置一些水平線或垂直線， 但系統(tǒng)里提供的水平線往往達(dá)不到頁(yè)面的具體需求， 且系統(tǒng)沒有提供垂直線， 這時(shí)就可以利用表格的功能來(lái)制作它們。利用表格制作水平線的方法如下:) 在網(wǎng)頁(yè)文檔的適當(dāng)位置插入一個(gè) 行 列的表格， 寬度為 像素， 在“表格”屬性面板的“表格” 名稱框中輸入“”， 在“填充” “邊框” 和“間距” 文本框中輸入“”。) 應(yīng)用上面制作細(xì)線表格的方法， 將表格背景色“ ” 設(shè)置為黑色。上一頁(yè)下一頁(yè)返回任務(wù)二特殊表格的制作) 在代碼視圖中， 將光標(biāo)定位到 標(biāo)簽中， 設(shè)置高度“” 為，

18、 代碼如下:) 選中表格， 在代碼視圖中， 將代碼“ , ” 中的空格“” 去掉。) 保存， 按 鍵瀏覽該網(wǎng)頁(yè)， 效果如圖 所示。同理， 制作垂直線只需要將表格寬度設(shè)置為 像素， 高度設(shè)置為 像素即可。上一頁(yè)下一頁(yè)返回任務(wù)二特殊表格的制作四、立體導(dǎo)航欄的制作在網(wǎng)頁(yè)設(shè)計(jì)中為了使頁(yè)面生動(dòng)美觀， 許多設(shè)計(jì)者喜歡把導(dǎo)航欄制作成立體效果。 利用表格顏色的設(shè)置同樣可以制作出導(dǎo)航欄的立體感， 也就是立體導(dǎo)航欄。制作立體導(dǎo)航欄的方法如下:) 新建一個(gè)空白網(wǎng)頁(yè)， 將光標(biāo)定位在需要插入表格的位置， 插入一個(gè) 行 列、寬為 像素的表格。 選中單元格， 在屬性面板中將“水平” 文本框設(shè)置為“居中對(duì)齊”，添加如圖 所示

19、的文本。) 在“表格” 屬性面板的“表格” 名稱框中輸入“”， 在“邊框” 文本中輸入“”， 在“填充” 和“間距” 文本框中輸入“”。上一頁(yè)下一頁(yè)返回任務(wù)二特殊表格的制作) 選擇該表格， 執(zhí)行菜單“窗口” “ 樣式” 命令， 打開“ 樣式” 面板，單擊面板下方的 按鈕， 出現(xiàn)如圖 所示的“新建 規(guī)則” 對(duì)話框， 單擊“確定” 按鈕。) 在“分類” 欄的“背景” 選項(xiàng)卡中設(shè)置“ ” 為“”， 如圖 所示。) 同理， 設(shè)置“分類” 欄中的“邊框” 選項(xiàng)卡， 設(shè)置參數(shù)如圖 所示， 設(shè)置完成， 單擊“確定” 按鈕。) 在代碼視圖中， 將光標(biāo)定位到 標(biāo)簽中， 設(shè)置“” 為“”， 代碼如下:) 保存，

20、按 鍵瀏覽該網(wǎng)頁(yè)， 效果如圖 所示。上一頁(yè)返回任務(wù)三公司網(wǎng)站建設(shè)一、頂部頁(yè)面的制作) 創(chuàng)建本地站點(diǎn)， 將 中公司網(wǎng)站建設(shè)中的 文件夾， 復(fù)制到本地根文件夾下。) 新建頁(yè)面， 保存名稱為.。 打開該頁(yè)面， 在“插入” 工具欄的“常用”選項(xiàng)卡中， 單擊 按鈕， 插入一個(gè) 行 列、寬度為 像素的表格。 在“表格” 屬性面板的“填充” “間距” 和“邊框” 文本框中分別輸入“”， 并且設(shè)置“對(duì)齊” 方式為“居中對(duì)齊”。) 將光標(biāo)定位到第一個(gè)單元格中， 執(zhí)行菜單“插入” “圖像” 命令， 插入文件夾下的. 圖像。) 同理， 將光標(biāo)定位到第二個(gè)單元格中， 插入圖像.、.、.、.、.、.、.、.、.、.。下一頁(yè)返回任務(wù)三公司網(wǎng)站建設(shè)) 將光標(biāo)定位到第三個(gè)單元格中， 插入圖片.。二、中部和底部頁(yè)面的制作下面布局公司網(wǎng)站的中部頁(yè)面， 效果如圖 所示。) 將光標(biāo)定位到表格的后面， 執(zhí)行菜單“插入” “表格” 命令， 插入一個(gè) 行列、寬度為 像素的表格， 居中對(duì)齊。) 將光標(biāo)定位到 行 列表格的第一個(gè)單元格中， 在“屬性” 面板中設(shè)置單元格的寬