dreamweaver第八章 表格.doc

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