1、第5課 用表格規(guī)范網(wǎng)頁 本課要點具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點點表格的創(chuàng)創(chuàng)建及基基本編輯輯表格屬性性設(shè)置具體要求求掌握普通通表格及及嵌套表表格的創(chuàng)創(chuàng)建方法法熟悉表格格和單元元格的選選擇方法法熟悉單元元格的合合并、拆拆分及刪刪除方法法熟悉表格格及單元元格屬性性的設(shè)置置方法熟悉表格格內(nèi)容的的添加方方法本課導(dǎo)讀讀表格在日日常辦公公中很常常見，它它能使數(shù)數(shù)據(jù)的顯顯示更清清晰明了了，網(wǎng)頁頁中的表表格還有有更重要要的作用用進(jìn)行頁面面布局。表格可可以將網(wǎng)網(wǎng)頁分割割為很多多組合在在一起的的小塊，既加快快了網(wǎng)頁頁的加載載速度，又使網(wǎng)網(wǎng)頁整齊齊而美觀觀。5.1創(chuàng)建及編編輯表格格頁面布局局是網(wǎng)頁頁制作的的宏觀設(shè)設(shè)

2、置，使使用表格格進(jìn)行頁頁面布局局是其中中最常用用的手段段。5.1創(chuàng)建及編編輯表格格5.1.1知識講解解5.1.2典型案例例制作“我我的課程程表”表表格5.1.1知識講解解表格是進(jìn)進(jìn)行頁面面布局時時非常有有用的工工具。利利用表格格進(jìn)行頁頁面布局局，可以以將圖像像或文本本放置在在表格的的各個單單元格中中，從而而精確控控制其位位置。5.1.1知識講解解1.創(chuàng)建表格格2.編輯表格格1.創(chuàng)建表格格在DreamweaverCS3中，表格格分為普普通表格格和嵌套套表格。普通表表格即是是傳統(tǒng)意意義上的的表格，嵌套表表格是在在表格的的某個單單元格內(nèi)內(nèi)插入的的表格，即表格格之中再再嵌套表表格。1）創(chuàng)建普普通表格格

3、2）創(chuàng)建嵌嵌套表格格2.編輯表格格表格創(chuàng)建建好后，可以對對表格進(jìn)進(jìn)行合并并或拆分分單元格格、刪除除或添加加行（或或列）等等編輯操操作。在在表格中中添加圖圖像和文文本等內(nèi)內(nèi)容后，根據(jù)實實際需要要，也可可對表格格的大小小等進(jìn)行行調(diào)整。1）選擇整整個表格格2）選擇行行或列3）選擇單單元格4）拆分單單元格5）合并單單元格6）添加行行或列7）刪除行行或列5.1.2典型案例例制作“我我的課程程表”表表格案例目標(biāo)標(biāo)本案例主主要練習(xí)習(xí)創(chuàng)建表表格和添添加簡單單的內(nèi)容容。5.1.2典型案例例制作“我我的課程程表”表表格操作思路路（1）創(chuàng)建一一個5行6列的表格格。（2）將第1列的前兩兩個單元元格合并并，將第第1行的

4、后5個單元格格合并。（3）在第3行的后5個單元格格中各插插入一個個4行1列的嵌套套表格，在第4行的后5個單元格格中各插插入一個個2行1列的嵌套套表格。（4）在相應(yīng)應(yīng)單元格格中添加加文本或或圖像。5.1.2典型案例例制作“我我的課程程表”表表格操作步驟驟具體操作作步驟請請教師參參照軟件件和書中中內(nèi)容進(jìn)進(jìn)行講解解。5.1.2典型案例例制作“我我的課程程表”表表格案例小結(jié)結(jié)本案例利利用表格格創(chuàng)建了了一個“我的課課程表”網(wǎng)頁，運用了了創(chuàng)建表表格、合合并單元元格、輸輸入文本本以及插插入圖像像等知識識。在DreamweaverCS3中，表格格內(nèi)容的的對齊方方式默認(rèn)認(rèn)為“左左對齊”，而在在IE瀏覽器中中則為

5、“居中對對齊”，所以在在Dreamweaver和IE瀏覽器中中的效果果有一定定差別，為了避避免因表表格內(nèi)容容的默認(rèn)認(rèn)對齊方方式不同同而引起起瀏覽效效果與預(yù)預(yù)期效果果的不同同，需要要在設(shè)計計網(wǎng)頁時時為表格格設(shè)置屬屬性，下下面我們們就來學(xué)學(xué)習(xí)怎樣樣設(shè)置表表格屬性性。5.2表格屬性性設(shè)置要使表格格美觀，需要對對表格及及單元格格的屬性性進(jìn)行設(shè)設(shè)置，如如設(shè)置邊邊框線顏顏色和單單元格的的對齊方方式等。5.2表格屬性性設(shè)置5.2.1知識講解解5.2.2典型案例例美化“我我的課程程表”表表格5.2.1知識講解解表格的屬屬性很多多，包括括表格的的寬度、高度，表格包包含的行行數(shù)、列列數(shù)，表表格中各各單元格格間的距

6、距離，單單元格中中內(nèi)容與與單元格格邊框線線間的距距離以及及是否有有邊框、邊框線線粗細(xì)和和表格背背景顏色色等，下下面分別別進(jìn)行講講解。5.2.1知識講解解1.設(shè)置表格格屬性2.設(shè)置單元元格屬性性1.設(shè)置表格格屬性要進(jìn)行表表格屬性性設(shè)置，需先選選中表格格。選中中表格后后，在【屬性】面板可進(jìn)進(jìn)行表格格的屬性性設(shè)置。2.設(shè)置單元元格屬性性除了可以以設(shè)置整整個表格格的屬性性外，還還可對表表格的單單元格、行或列列的屬性性進(jìn)行設(shè)設(shè)置。選選擇要設(shè)設(shè)置屬性性的單元元格、行行或列后后，其【屬性】面板如圖圖所示。在單元格格的【屬性】面板中，可以對對單元格格中的文文本進(jìn)行行屬性設(shè)設(shè)置，其其設(shè)置方方法與普普通文本本相同

7、。另外，還可以以對單元元格的對對齊方式式、寬和和高及是是否換行行等進(jìn)行行設(shè)置。5.2.2典型案例例美化“我我的課程程表”表表格案例目標(biāo)標(biāo)本案例主主要練習(xí)習(xí)表格屬屬性及單單元格屬屬性的設(shè)設(shè)置。5.2.2典型案例例美化“我我的課程程表”表表格操作思路路（1）設(shè)置第第1層（外層層）表格格的屬性性。（2）設(shè)置第第1層表格的的單元格格屬性。（3）設(shè)置第第2層（嵌套套）表格格的屬性性。（4）設(shè)置第第2層表格的的單元格格屬性。5.2.2典型案例例美化“我我的課程程表”表表格操作步驟驟具體操作作步驟請請教師參參照軟件件和書中中內(nèi)容進(jìn)進(jìn)行講解解。5.2.2典型案例例美化“我我的課程程表”表表格案例小結(jié)結(jié)本案例練

8、練習(xí)美化化表格，包括對對表格屬屬性（如如表格邊邊框粗細(xì)細(xì)、邊框框顏色、間距、填充、對齊方方式和高高度等）及單元元格屬性性（如單單元格的的對齊方方式和單單元格高高度等）進(jìn)行設(shè)設(shè)置。通通過這些些設(shè)置，可以使使創(chuàng)建的的表格及及其內(nèi)容容的顯示示效果更更好。5.3上機(jī)練習(xí)習(xí)5.3.1“個人簡簡歷”網(wǎng)網(wǎng)頁的制制作5.3.2“個人簡簡歷”網(wǎng)網(wǎng)頁的美美化5.3.1“個人簡簡歷”網(wǎng)網(wǎng)頁的制制作本練習(xí)將將利用表表格進(jìn)行行頁面布布局。5.3.1“個人簡簡歷”網(wǎng)網(wǎng)頁的制制作操作思路路在DreamweaverCS3中創(chuàng)建一一個9行1列、寬度度為605像素、邊邊框為1像素、其其余值保保持默認(rèn)認(rèn)設(shè)置的的表格。將素材圖圖像“

9、1px.gif”復(fù)制到保保存網(wǎng)頁頁文檔的的位置。在第3行中插入入圖像“1px.gif”。在第48行中分別別插入寬寬度為90%的嵌套表表格。將各嵌套套表格的的第2行中的單單元格合合并，在在合并后后的單元元格中分分別插入入寬度為為80%的嵌套表表格。輸入文本本，然后后對文本本的屬性性進(jìn)行設(shè)設(shè)置。5.3.2“個人簡簡歷”網(wǎng)網(wǎng)頁的美美化本練習(xí)將將對5.3.1節(jié)中制作作的“個個人簡歷歷”網(wǎng)頁頁進(jìn)行美美化。5.3.2“個人簡簡歷”網(wǎng)網(wǎng)頁的美美化操作思路路將“個人人簡歷.html”網(wǎng)頁另存存為“個個人簡歷歷2.html”。選中最外外層表格格，設(shè)置置填充、間距和和邊框值值分別為為“0”、“2”和“0”，背景顏顏色和邊邊框顏色色均為“#FFFFFF”。設(shè)置最外外層表格格9行單元格格的水平平對齊方方式均為為“居中中對齊”、第1行的垂直直對齊方方式為“頂端對對齊”、第26行的垂直直對齊方方式為“居中對對齊”。設(shè)置第1，2，3，9行單元格格的背景景顏色。5.3.2“個人