dreamweaver第八章 表格.doc

使用表格可以清晰地顯示列成表的數(shù)據(jù)，例如股票行情的數(shù)據(jù)列表。實際上表格的作用不只是顯示數(shù)據(jù)，它還在網(wǎng)頁定位上起著重要的作用。8.1使用HTML建立表格表格的建立將利用3個最基本的HTML標簽來完成，它們分別是標簽、標簽和標簽。建立一個最基本的表格，必須包含一組標簽、一組標簽以及一組標簽，這也是最簡單的單元格表格。標簽的作用是定義一個表格， 標簽的作用是定義一行，而標簽的作用是定義一個單元格。8.1.1一個最簡單的表格觀察下面的代碼。單元格單元格1單元格2單元格3單元格4單元格5單元格6注意代碼中以粗體顯示的語句。這就是一個最基本的表格，它只有3行2列，下面就詳細講解一下這3個標簽。標簽：它用于標識一個表格，就如同標簽一樣，告訴瀏覽器這是一個表格。標簽：它用于標識表格的一行，也就是建立一行表格，代碼中有多少個標簽，就表示有多少行的表格。標簽：它用于標識表格的一列，也就是建立一個單元格，它必須放在標簽里使用，一個標簽內(nèi)有多少個就表示這行里有多少列或是說有多少個單元格。8.1.2各種表格樣式在上一節(jié)中介紹了表格的建立方法，但這樣一個表格樣式比較單一，在實際應用中還可以利用相關(guān)的HTML標簽來設置表格的各種樣式。下面就一一進行介紹。1. 表格邊框的設置現(xiàn)在來了解一下標簽中各屬性的用法，首先是設置表格邊框的樣式。表格的邊框?qū)傩詥卧?單元格2注意代碼中以粗體顯示的語句?？刂票砀竦倪吙蚬灿?個屬性，分別是border、cellspacing和cellpadding屬性。2. 表格高寬的控制對于表格的高、寬度也是通過height和width兩個屬性來控制的。表格的長寬課程教室語文東樓1-1注意代碼中以粗體顯示的語句。兩者的語法結(jié)構(gòu)為、，n代表一個數(shù)值，單位為像素（px），m代表0到100的數(shù)，即0%到100%，表格將相對于當前窗口大小的百分比來顯示。注意，這里的高寬設置是整個表格的高寬設置。3. 表格相關(guān)顏色的設置下面介紹表格的邊框和背景顏色的設置。表格的顏色設置課程教室語文東樓1-1英語西樓1-1注意代碼中以粗體顯示的語句。表格的邊框顏色是通過bordercolor屬性來設置的，表格的邊框顏色包括了表格的外框顏色和單元格的外框顏色。而表格的背景顏色是通過bgcolor屬性來設置的，。8.2在Dreamweaver中創(chuàng)建和操縱表格有了上面的基礎(chǔ)，再學習使用Dreamweaver制作表格就很容易了。選擇“插入”菜單的“表格”命令，在出現(xiàn)的對話框中指定表格的行數(shù)、列數(shù)、列寬和邊線寬度，這時文檔窗口的文本光標處會出現(xiàn)一個空白表格。如果開始時不能確定這些參數(shù)，那么也可以使用默認值，后面還可以用屬性面板來修改表格的外觀。8.2.1在屬性面板中控制表格Dreamweaver對表格的控制非常靈活。屬性面板可以分別控制整個表格、表格的一行、表格的一列或一個單元格。屬性面板的控制對象由選中的對象決定。當把鼠標移到表格的四周時，鼠標指針的形狀變?yōu)槭中?，這時單擊鼠標左鍵，表格四周出現(xiàn)一個框，表示選中整個表格。這時控制面板各項參數(shù)的作用如下。 行和列：設定表格的行數(shù)和列數(shù)。 寬和高：設定表格寬度和高度?？梢酝ㄟ^瀏覽器窗口百分比或使用絕對像素數(shù)來定義。例如設定寬度為60%，即表格的寬度為瀏覽器窗口寬度的60%，如果訪問者使用640像素寬的瀏覽器窗口，則表格寬度為384像素。當瀏覽器窗口大小變化時，表格的寬度也隨之變化。如果設置表格寬度為400像素，那么無論瀏覽器窗口的大小為多少，表格的寬度都不會變。 填充：設定單元格中的內(nèi)容與單元格邊線之間的距離，缺省值為1。 間距：設定單元格之間的距離，缺省值為2。 對齊：設定表格的對齊方式，居左、居中或居右。 和 ：清除行高和 列寬。 ：根據(jù)當前值，把列寬轉(zhuǎn)換為絕對像素數(shù)。 ：根據(jù)當前值，把列寬轉(zhuǎn)換為窗口寬度的百分比。 ：根據(jù)當前值，把行高轉(zhuǎn)換為絕對像素數(shù)。 ：根據(jù)當前值，把行高轉(zhuǎn)換為窗口高度的百分比。 邊框：設定表格外框的寬度。如果設置為0，就可以選擇菜單“查看/可視化助理表格邊框”命令觀察表格的外框。 背景顏色：設定表格的背景色。 邊框顏色：設定表格框線的顏色。 背景圖像：設定表格的背景圖片。選取整個表格最方便的方法是把鼠標移到表格右邊界的外側(cè)，按下鼠標并向左拖拽，可以快速地選中整個表格。當把鼠標移到上邊框附近，鼠標指針的形狀變?yōu)橄蛳碌募^時，單擊鼠標左鍵，可以選中表格的一列。當把鼠標移到左邊框附近，鼠標指針的形狀變?yōu)橄蛴业募^時，單擊鼠標左鍵，可以選中表格的一行，這時的屬性面板與列屬性面板基本相同。這里介紹一個很有用的按鈕 ，它可以把一列或一行單元格合并成一個。實際上，只要按住鼠標，劃過幾個相連的單元格，再釋放鼠標，就可以選中這幾個單元格，然后單擊 按鈕，就可以把選中的單元格合并成一個單元格。當選中一個單元格時，可以拆分單元格。單擊 按鈕，在出現(xiàn)的對話框中選擇是沿橫向還是沿縱向拆分單元格，并輸入拆分出的單元格數(shù)。經(jīng)過調(diào)整各個屬性，把表格調(diào)整為我們需要的樣子。在單元格中可以放置文字或圖片，并且可以設置文本和圖片的格式。8.2.2實踐與練習：制作“成績單”表格本例著重練習在Dreamweaver中創(chuàng)建一個基本表格，其中會講解創(chuàng)建表格時對行數(shù)、列數(shù)以及寬度等表格屬性的設置，以及向表格里添加文本內(nèi)容。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）創(chuàng)建好新文檔之后，在文檔窗口內(nèi)輸入表格的標題，這里輸入“成績單”，在屬性面板中將其字體設為粗體并居中對齊，然后在文本的后面按鍵盤上“Enter”鍵以便插入表格。提示：在新建的文檔中輸入文字后，在屬性面板中將文本設為居中對齊時，文本行會出現(xiàn)虛線，這些虛線是DIV標簽。如果多輸入一些段落文本后再進行居中對齊，就不會出現(xiàn)DIV標簽。（3）選擇菜單欄“插入表格”命令，彈出“表格”對話框。（4）在“表格大小”里設置行數(shù)和列數(shù)及表格寬度。這里設置為“行數(shù)”5，“列數(shù)”6，“表格寬度”為300，單位設為“像素”。單擊“確定”接鈕，一個5行6列的表格就生成了。（5）表格創(chuàng)建好以后，開始對這表格輸出數(shù)據(jù)。在第一行的第一個單元格內(nèi)單擊鼠標左鍵，確認文本光標在單元格內(nèi)閃爍，從鍵盤輸入“姓名”。在第一行的第二個單元格內(nèi)單擊鼠標左鍵或直接按鍵盤上的“”鍵，在第二個單元格內(nèi)輸入“數(shù)學”。（6）依次在各個單元格里輸入數(shù)據(jù)。輸入時，按鍵盤上“”鍵文本光標會下移到下一行的同一列單元格，按“”鍵文本光標會左移一個單元格，按“”鍵會上移到上一行的同一列單元格。（7）輸入完成后，可以根據(jù)需要對在屬性面板中對單元格進行排列，在“水平”后面的下拉菜單中設置為“居中對齊”，然后按“Ctrl+S”保存文檔，預覽網(wǎng)頁效果。8.2.3實踐與練習：制作“旅游行程表”立體表格本例著重練習在Dreamweaver中創(chuàng)建一個“旅游行程表”，通過對表格邊框的屬性設置來創(chuàng)建一個有立體感的表格。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）創(chuàng)建好新文檔之后，在文檔窗口輸入表格標題，這里輸入“旅游行程表”，在屬性面板中將文本的字體設為粗體并居中對齊。提示：在新建的文檔中輸入文字后，在屬性面板中將文設為居中對齊時，文本行會出現(xiàn)顯線，如圖8.17所示，這虛線是DIV標簽。如果多輸入些段落文后再進行居中對齊，就不會出現(xiàn)DIV標簽。（3）選擇菜單欄“插入表格”命令，或按鍵盤組合鍵“Ctrl+Alt+T”，或單擊“常規(guī)”工具面板上的“表格”按鈕，彈出“表格”對話框。（4）在“表格”對話框的“表格大小”里設置行數(shù)和列數(shù)及表格寬度。這里設置“行數(shù)為”4，“列數(shù)”為3，“表格寬度”為300，單位設為“像素”，“邊框粗細”1。單擊“確定”接鈕，一個4行3列的有立體感表格就生成了。（5）鼠標在表格左邊單擊，并按住鼠標左鍵向右拖動，選中表格。此時屬性面板就顯示出該表格的屬性。（6）修改屬性面板上的“填充”、“間距”、“邊框”的數(shù)值，就可以改變表格的立體程度效果，如將“填充”、“間距”、“邊框”的數(shù)值都設為8。（7）通過第（6）步的操作修改表格屬性后立體效果過于強烈，需要再次修改相關(guān)數(shù)值，得到適當?shù)牧Ⅲw效果后，開始對這表格輸出數(shù)據(jù)。（8）在第一行的第一個單元格內(nèi)單擊鼠標左鍵，確認文本光標在單元格內(nèi)閃爍，從鍵盤輸入“日期”。按鍵盤上的“”鍵，在第二個單元格內(nèi)輸入“上午”，第三單元格輸入“下午”。（9）輸入完后，可以根據(jù)需要對文本進行一些編輯，如顏色設置、居中等。然后按菜單“文件保存”命令，保存文檔，預覽網(wǎng)頁效果。8.2.4實踐與練習：制作“旅游行程表”雙線表格本例著重練習在Dreamweaver中創(chuàng)建一個“旅游行程表”，通過對表格的邊框及邊框顏色的設置來創(chuàng)建雙線表格。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）創(chuàng)建好新文檔之后，在文檔窗口內(nèi)單擊鼠標左鍵，確認文本光標在文檔區(qū)域內(nèi)閃爍。接著就可以直接在文檔區(qū)域內(nèi)輸入相關(guān)的文字信息。這里輸入“旅游行程表”作為表頭，設字體為粗體、顏色為紅色。（3）選擇菜單欄“插入表格”命令，插入一個“行數(shù)”為4、“列數(shù)”為3、“表格寬度”為300，單位設為“像素”、“邊框粗細”為1，單擊“確定”接鈕。（4）此時鼠標在表格右邊閃爍，按鼠標向左拖動，選中表格。此時屬性面板顯示出該表格的屬性。（5）單擊屬性面板中“間距”后的小方框，輸入數(shù)字“2”，“邊框”保持默認的“1”，此時“邊框顏色”未設置。（6）單擊屬性面板中“邊框顏色”后的小色塊，彈出顏色編輯器，吸取邊框顏色，如圖8.30所示。吸取顏色后邊框背景色被設為桔黃色。（7）完成（5）（6）步操作后，表格效果就成了雙線表格效果。至此雙線表格制作完了。（8）在第一行的第一個單元格內(nèi)單擊鼠標左鍵，確認文本光標在單元格內(nèi)閃爍，輸入“日期”。按鍵盤上的“Tab”鍵，文本光標就會跳到下一個單元格，依次在各單元格中輸入數(shù)據(jù)。（9）輸入完后，可以根據(jù)需要對輸入文字的相關(guān)屬性進行一些編輯。然后選擇菜單“文件保存”命令，保存文檔，預覽網(wǎng)頁效果。8.2.5實踐與練習：制作“圖書信息表”單線表格本例著重練習在Dreamweaver中創(chuàng)建一個“圖書信息表”，通過對表格的間距、表格背景色及單元格背景色的設置來創(chuàng)建單線表格。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）創(chuàng)建好新文檔之后，輸入“圖書信息表”作為表頭，在屬性面板中設字體顏色為桔黃色并居中對齊，單擊鍵盤上的“Enter”鍵，以便插入表格。（3）選擇菜單欄“插入表格”命令，插入一個“行數(shù)”4、“列數(shù)”4、“表格寬度”為300，單位設為“像素”，單擊“確定”接鈕，創(chuàng)建一表格。（4）此時鼠標在表格右邊閃爍，按鼠標左鍵拖動，選中表格。單擊屬性面板中“間距”右邊的小方框，輸入數(shù)字“1”，“邊框”右邊的小方框內(nèi)輸入數(shù)字“0”。（5）單擊屬性面板中“背景顏色”右邊的小色塊，此時會彈出顏色編輯器，在顏色編輯器中選取顏色。（6）選取顏色后表格的背景色被設為桔黃色。（7）在第一行的第一個單元格內(nèi)單擊鼠標左鍵，確認文本光標在單元格內(nèi)閃爍，按住鼠標向表格的右下角拖動，直到所有的單元格被選中。（8）選中所有單元格后松開鼠標，在屬性面板上單擊“背景顏色”后的小方塊。在顏色編輯器中選取白色，將單元格的背景顏色設為白色。（9）單元格的背景顏色設為白色后，表格就成了單線表格了。單線的寬度由屬性面板中“間距”右邊的小方框內(nèi)輸入的數(shù)字決定。（10）在第一行的第一個單元格內(nèi)單擊鼠標左鍵，從鍵盤輸入“書名”。按鍵盤上的“Tab”鍵，在第二個單元格里輸入“編號”，依次輸入各單元格的數(shù)據(jù)。（11）輸入完后，可以根據(jù)需要對輸入文字進行一些編輯。然后按菜單“文件保存”命令，保存文檔，預覽網(wǎng)頁效果。8.2.6 實踐與練習：制作“會議議程表”無線表格本例著重練習在Dreamweaver中創(chuàng)建一個“會議議程表”，通過對表格的行列的選取、列的選取、單元格的選取，對單元格內(nèi)的文本進行屬性設置。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）創(chuàng)建好新文檔之后，輸入“會議議程表”作為表頭，在屬性面板中設字體顏色為紅色、粗體并居中對齊。（3）選擇菜單欄“插入表格”命令，插入一個“行數(shù)”3、“列數(shù)”5、“表格寬度”為580、單位設為“像素”，單擊“確定”接鈕，創(chuàng)建一表格。（4）此時鼠標在表格右邊閃爍，按住鼠標向左拖動選取整個表格，查看表格的屬性。此時屬性面板中“填充”、“間距”、“邊框”右邊的小方框內(nèi)都是空白無任何數(shù)字。如果有數(shù)字，選中后按鍵盤上的“Delete”鍵將其刪除，這樣的表格就是無線表格。（5）無線表格創(chuàng)建后，在第一行的第一個單元格內(nèi)單擊鼠標左鍵，輸入“時間”。按鍵盤上的“Tab”鍵，依次輸入各單元格的文本。（6）將鼠標移到表格第一行的左邊，使鼠標變成向右指示的箭頭形狀，并且第一行的所有單元格都變成紅線格。（7）然后單擊鼠標左鍵，整個表格的第一行就被選中了，這一行的所有單元格變成了黑線格。（8）選中第一行后，在屬性面板中設置字體為粗體、居中對齊、字體顏色為桔紅色，參考值是“#FF6600”。提示：對表格第一行設置字體屬性后，單元格帶虛線了，這是DIV標簽。（9）單擊第二行第二列的單元格，按住鼠標向表格的右下角拖動鼠標，選中表格的第二行第二列開始的所有單元格。（10）在屬性面板中設置居中對齊。然后按菜單“文件保存”命令，保存文檔，預覽網(wǎng)頁效果。8.2.7 實踐與練習：套用設計方案制作“會議議程表”本例著重練習在Dreamweaver中創(chuàng)建一個“會議議程表”，通過對表格執(zhí)行“格式化表格”命令，套用設計方案。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）創(chuàng)建好新文檔之后，輸入“會議議程表”作為表頭，在屬性面板中設字體顏色為深藍色并居中對齊。（3）選擇菜單欄“插入表格”命令，插入一個“行數(shù)”為4，“列數(shù)”為5，“表格寬度”為580，單位設為“像素”，單擊“確定”接鈕，創(chuàng)建一個表格。（4）在第一行的第一個單元格內(nèi)單擊鼠標左鍵，輸入“時間”。按鍵盤上的“Tab”鍵，依次輸入各單元格的文本。（5）將鼠標移到表格的外邊線上，鼠標箭頭變成向左向右指示形，表格外邊線變成紅線。此時單擊鼠標左鍵選中表格。（6）選擇菜單欄“命令格式化表格”命令，彈出格式化表格對話框。（7）在格式列表里選擇已存在的設計方案，點擊“確定”按鈕，套用設計方案，從而格式化被選中的表格。（8）如果對設計方案不滿意，可以在格式化對話框中進行修改。在這里修改“行顏色”，“第一種”設為桔黃色，第二種設為淺黃色；修改“第一行”，“對齊”為居中對齊，“文字樣式”為粗體，“背景色”設為深紫色；“最左列”的“對齊”設為居中對齊，點擊“確定”按鈕應用新設計的方案。（9）然后選擇菜單欄“文件保存”命令，保存文檔，預覽網(wǎng)頁效果。8.2.8實踐與練習：用表格制作“綠葉鄉(xiāng)舟”網(wǎng)頁頂部本例著重練習在Dreamweaver中創(chuàng)建復雜的表格。主要通過拆分單元格，合并單元格，插入行，插入列等操作，制作一個復雜的表格。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）選擇菜單欄“插入表格”命令，創(chuàng)建一個3行3列，表格寬度為775的表格。 （3）選中表格，在屬性面板上的“填充”、“間距”、“邊框”右邊方框內(nèi)都輸入“0”，“對齊”設為“居中對齊”。（4）先選中表格第一行的所有單元格，單擊屬性面板上的“行”下方的“合并所有單元格，使用跨度”按鈕，合并被選中的單元格。（5選中合并后的單元格，在屬性面面中將單元格背景色設為黃綠色。（6）在第二行第一列單元格中單擊鼠標左鍵，選擇菜單欄“插入圖像”命令，插入一張圖片，讀者可以打開光盤文件：CD-RomCH088.2.8logotran.gif。插入圖片后，第一列變得很寬了，此時將鼠標放到第一列的右邊線上，鼠標變成了雙向箭頭。按住鼠標向左拉邊線，直到拉不動為止。（7）單擊第二行的第三列單元格，在屬性面板中設“寬”為100、“背景色”為綠色。然后單擊屬性面板上的“拆分單元格為行或列”按鈕。（8）此時彈出“拆分單元格”對話框，點擊“行”前的小圓，“行數(shù)”為“5”，點擊“確定”按扭。（9）通過上一步的操作，就將該單元格拆成五行了，將拆分后的第1行和第5行的行高設為“5”，在中間三行中輸入文字，并設置CSS樣式。CSS樣式的具體設置方法在實例“在計算機發(fā)展史文檔中設置使用CSS”中詳細講解了，這里就不具體講解了。（10）選中“返回首頁”文本，在屬性面板中，單擊 “瀏覽文件”按鈕，在彈出的“選擇文件”對話框中選擇鏈接文件。同樣的方法為“聯(lián)系我們”、“加入收藏”文本創(chuàng)建鏈接。（11）單擊第二行的第二列單元格，選中該單元格，單擊屬性面板上“背景”右邊的“單元格背景URL”按鈕。 （12）此時彈出“選擇圖像源文件”對話框，在對話框的“查找范圍”列表里找到背景圖片，讀者可以打開光盤文件：CD-RomCH088.2.8bg.jpg。點擊“確定”按鈕。這就為單元格添加了背景圖。（13）添加背景圖后，在第二行的第二列單元格輸入文本“綠葉鄉(xiāng)舟”。分別對“綠葉鄉(xiāng)舟”和“”設置并應用CSS樣式。（14）現(xiàn)在感覺這個表格的第三行沒什么意義，選中第三行所有單元格，按鍵盤上“Delete”鍵，刪除該行。（15）然后選擇菜單欄文件保存命令，保存文檔，預覽網(wǎng)頁效果。8.2.9實踐與練習：制作自動伸縮表格頁面本例著重練習在Dreamweaver中創(chuàng)建自動伸縮表格，使表格能隨頁面窗口的拉大而放大，能隨頁面窗口的縮小而縮小，從而使頁面能適配窗口，并使用這個自動伸縮表格布局制作一個簡單的網(wǎng)頁。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）選擇菜單欄“插入表格”命令，創(chuàng)建一個3行3列、表格寬度為100%的表格。 （3）選中表格，在屬性面板的“間距”右邊方框內(nèi)輸入“0”。選中第一行第一列單元格，在屬性面板上“高”右邊的方框內(nèi)輸入“60”。（4）選中第二行，在屬性面板上“高”右邊的方框為輸入“400”。同樣的選中第三行，在屬性面板上“高”右邊的方框內(nèi)輸入“30”。（5）表格的行高都設置好了，為了查看效果，分別選中第一行和第三行，在屬性面板上“背景顏色”的后設背景色為“#996633”；選中，在屬性面板上“背景色”后設背景色“#996633”。（6）按菜單文件保存命令，保存文檔，預覽網(wǎng)頁效果，向左右拉動窗口就能看了表格的自動伸縮效果了。（7）再回到Dreamweaver 8的編輯環(huán)境中來，繼續(xù)對文檔的操作，制作一個簡單的網(wǎng)頁。選中第一行的所有單元格，單擊屬性面板上的“行”下方的“合并所有單元格，使用跨度”按鈕，合并被選中的單元格。（8）單擊第一行合并后的單元格，在屬性面板上單擊“垂直”右邊的下拉菜單，在垂直列表中選“居中”。使單元格中的內(nèi)容在垂直方向居中。（9）從鍵盤上輸入文字作為網(wǎng)頁頭，這里輸入“京劇名角”，選中輸入的文本，在屬性面板上設置“字體”、“大小”、“文本顏色”、“文本縮進”等，這些都根據(jù)需要來設定。（10）單擊第二行第二列的單元格，選擇菜單欄“插入圖像”命令，插入一張圖片，讀者可以打開光盤文件：CD-RomCH088.2.9ibbdd.jpg，插入一張“京劇名角”的圖片。選中該圖片，將鼠標放到圖片的右下角按住鼠標不松開，并同時按住鍵盤上的“Shift”功能鍵，對圖片的大小進行適當?shù)目s放，使其適合頁面的需要。（11）選中第三行的所有單元格，單擊屬性面板上的“行”下方的“合并所有單元格，使用跨度”按鈕，合并單元格。單擊合并后的單元格，在屬性面板中設“水平”為“居中對齊”、“垂直”為“居中”。然后輸入文本，作為網(wǎng)頁的底部，這里輸入“京劇名角網(wǎng)版權(quán)所有”，設“文本顏色”為“白色”。（12）選擇菜單欄文件保存命令，保存文檔。一個用伸縮表格布局的簡單網(wǎng)頁就做好了，預覽網(wǎng)頁效果。8.2.10實踐與練習：嵌套表格制作一個簡單的網(wǎng)頁本例著重練習在Dreamweaver中創(chuàng)建表格，并通過嵌套表格來實現(xiàn)對網(wǎng)頁的布局，制作一個有導航欄的簡單的網(wǎng)頁，并使代碼高度和可視高度一致。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）選擇菜單欄“插入表格”命令，插入一個1行1列寬度為100%的表格，選中表格，在屬性面板中設該表格的“高”為“100%”，“間距”為“0”、“邊框”為“0”。（3）在表格的單元格內(nèi)單擊，在屬性面板中，設單元格的“水平”為“居中對齊”、“垂直”為“居中”。此時光標就在單元格的正中閃爍。（4）選擇菜單欄“插入表格”命令，插入一個3行3列的表格，選中表格，在屬性面板中設該表格的“寬”為600 像素，“高”為360像素，“填充”為0，“間距”為0，“邊框”為0。插入表格后，就在第一個表格中嵌套了一個表格，嵌套進來的表格居于第一個表格的中心。（5）第一個表格就是幫助網(wǎng)頁定位的，嵌套進來的表格是網(wǎng)頁部分，接下來就在嵌套表格里進行操作。分別選中第一行的各個單元格，然后單擊屬性面板上“背景”右邊的“單元格背景URL”按鈕，準備為各個單元格添加背景。 （6）單擊“單元格背景URL”按鈕后，會彈出“選擇圖像源文件”對話框，在對話框的“查找范圍”列表里找到背景圖片，讀者可以打開光盤文件：CD-RomCH088.2.10bg.jpg，點擊“確定”按鈕。這就為第一行各個單元格添加了背景圖。（7）為第一行添加背景圖后可以看到，背景圖片超出了第一行的單元格，所以需要設置單元格的相關(guān)屬性。單擊第一行第一列單元格，在屬性面板中設置單元格的屬性，“寬”為240，“高”為59，如圖8.94所示。然后在該單元格中輸入網(wǎng)頁名字，這里輸入“名香藝館”，設置CSS樣式并應用于字體。（8）在第一行第二列單元格內(nèi)單擊，在屬性面板中設置“水平”為居中對齊，“垂直”為底部，“寬”為260。輸入文本“名香 香藝”，設置CSS樣式時將字體顏色設為“#999900”。這樣網(wǎng)頁的頂部就制作完成了。（9）選取第三行的所有單元格，單擊屬性面板上的“行”下方的“合并所有單元格，使用跨度”按鈕，合并這一行。在這一行的單元格內(nèi)單擊，在屬性面板上設“高”為40、“背景色”為黑色。在單元格中輸入文本“前沿工作室 電話，然后在屬性面板中設置文本在單元格中“居中對齊”。設置CSS樣式，將大小設為“12”，顏色為白色。這樣網(wǎng)頁的底部就制作完成了。（10）選取第二行的所有單元格，合并單元格。單擊合并后的單元格，選擇菜單欄“插入表格”命令，在第二行的單元格中插入一個1行2列的表格。選中該表格，在屬性面板中設“寬”、“高”都為100%，“間距”為0。這是網(wǎng)頁的中間主體部分。（11）單擊在第10步中插入的表格左列的單元格，在屬性面板中輸入“寬”為“20%”、“背景色”為淺灰色，設置“垂直”為“頂端”。然后選擇菜單欄“插入表格”命令插入一個8行1列，寬度為100%的表格作為導航欄。（12）選中導航欄表格，“間距”設為0，各行的“高”分別交替地設為6、20。行高為“20”的單元格的背景色設為桔黃色。（13）此時發(fā)現(xiàn)行高為“6”的單元格的高度與可視高度不一致。此時單擊行高為“6”的單元格，然后點擊“代碼”按鈕，進入代碼視圖。（14）在光標閃爍處有“ ”代碼，刪除此代碼。同樣的方法把其他行高為“6”的單元格在代碼視圖中刪除“ ”代碼。這樣，行高的代碼高度就和可視高度就一致了。（15）在行高為“20”的單元格中輸入文本，設置并應用CSS樣式，導航欄就制作完成了。（16）單擊第（10）步操作中嵌入的表格的右列單元格，選擇菜單欄“插入圖像”命令，插入一張圖片，讀者可以打開光盤文件：CD-RomCH0.10.jpg，按住鍵盤上的“Shift”鍵調(diào)整圖片的大小。（17）選中圖片，在屬性面板中設“對齊”為“左對齊”，使圖片與文本左對齊。然后輸入文本，并設計文本的CSS樣式。（18）按菜單欄“文件保存”命令，保存文檔，預覽網(wǎng)頁效果。8.2.11實踐與練習：對“成績單”表格排序本例著重練習在Dreamweaver中創(chuàng)建表格，通過菜單“命令排序表格”命令，以表格的某一列為基礎(chǔ)對表格進行升序或降序排列。（1）首先運行程序Dreamweaver 8，選擇菜單欄“文件新建”命令，創(chuàng)建新文檔。（2）創(chuàng)建好新文檔之后，輸入標題文本“成績單”，