1、項目2 表格設計教學重點：熟練掌握表格、單元格的設計及相關屬性設置。教學難點：掌握表格單元格的設計及屬性設置，并能靈活應用表格及單元格設計網頁布局，的應用教學目標：專業(yè)能力：掌握表格單元格設計及其屬性設置，并學會應用表格單元格設置網頁布局社會能力：獨立思考、緊跟課堂教學培養(yǎng)服從意識方法能力：自學分析能力、及其創(chuàng)意意識教學內容：第1頁/共47頁任務1 表格屬性案例引入：第2頁/共47頁案例分析： 1、在dw8中打開頁面 2、整個頁面布局是由5個表格組成 3、設置表格屬性 4、設置單元格屬性 5、掌握表格單元格標簽應用：主要步驟： 第3頁/共47頁 上圖中的表格由四個獨立的表格組合而成，四個表格分

2、別如下圖中a、b、c、d所示。其中表a為一行八列，表b為兩行一列，表d為一行四列，這三個表格制作過程相對比較簡單，在此不再做具體講解，僅以表c為例講解具體制作過程。表a表b表c表d圖 分解后的各個表格第4頁/共47頁 表c的制作過程如下： （1）將光標放置在頁面需要創(chuàng)建表格的位置，選擇菜單“插入”“表格”。在插入表格對話框中輸入行數(shù)和列數(shù)分別為4和3，即創(chuàng)建了一個四行三列的表格。如圖1所示。 （2）將第四行選中，單擊右鍵，選擇快捷菜單中的“表格”“合并單元格”，即將第四行中的三列合并為一列。如圖2所示。圖1 （43）的表格圖2 合并單元格第5頁/共47頁 （3）通過屬性面板，分別設置各個單元格

3、的寬度和高度。設置完后如圖所示。圖 設置單元格的寬度和高度第6頁/共47頁 (4) 選中表格，將屬性面板中的間距和邊框都設置為0，即頁面中不顯示邊框。則該表格制作完畢，如圖所示。圖 設置完后的表格第7頁/共47頁創(chuàng)建表格1 插入表格 在網頁中插入表格，通常采用下幾種方法： （1）將光標放置在頁面需要創(chuàng)建表格的位置，選擇菜單“插入”“表格”。如圖1所示。圖1 插入表格相關知識點：第8頁/共47頁 （2）將光標放置在頁面需要創(chuàng)建表格的位置，然后單擊插入工具欄的普通面板上的表格按鈕。如圖2所示。 若普通面板被關閉，則選擇菜單“窗口”“插入”，即可出現(xiàn)普通面板。 （3）將表格按鈕從普通面板拖到頁面上所

4、需位置。圖2 插入表格第9頁/共47頁2 設置表格 完成插入表格的操作，即可出現(xiàn)對話框，提示你設置表格的格式，如圖3所示。圖3 插入表格對話框 行數(shù)：輸入要插入表格的行數(shù)。 列數(shù)：輸入要插入表格的列數(shù)。 單元格填充：輸入單元格中內容同單元格內部邊界之間的距離值。單元格上、下、左、右邊距都等同。第10頁/共47頁 單元格間距：輸入單元格與單元格之間的距離值。 寬度：輸入寬度值，在右側的下拉列表中，選擇寬度單位，可以選擇像素，以絕對的像素值來設置表格的寬度，則表格的大小不隨瀏覽器窗口大小改變而改變；選擇百分比，設置表格寬度同瀏覽器寬度的百分比，則表格的寬度將隨瀏覽器窗口寬度而改變。 邊框：輸入邊框

5、的寬度。如果不需要顯示邊框，則輸入0。 如上圖設置完畢，單擊確定按鈕便可創(chuàng)建一個（34）的表格，如圖4所示。并且此時插入表格對話框中的值將保留作為下一次插入表格時的默認值。圖4 （34）的表格第11頁/共47頁編輯表格1 添加和刪除行和列1.添加行或列 在需要添加行的位置單擊，選擇菜單“修改” “表格”“插入行”命令。或者單擊右鍵，從快捷菜單中選擇“表格”“插入行”，則可以在光標當前所在行上面插入一行。 在需要添加列的位置單擊，選擇菜單“修改”“表格”“插入列”。或者單擊右鍵，從快捷菜單中選擇“表格”“插入列”，便可以在光標當前所在位置“年齡”左面插入一列。 【例1】在下圖5-5所示的表格中第

6、二行上插入一行，第二列后插入一列，具體步驟如下：圖5 （43）的表格第12頁/共47頁 單擊第二行第三列，即內容為“19”的單元格，將光標放置到此處。 選擇菜單“修改” “表格”“插入行”命令，即在第二行上插入一行，如下左圖6所示。 選擇菜單“修改”“表格”“插入列”命令，即在第三列前上插入一列，如下右圖7所示。圖5-6 插入行圖5-7 插入列第13頁/共47頁 可選擇使用快捷菜單來實現(xiàn)該操作。單擊插入單元行的下一行，在彈出的快捷菜單中選擇“表格”“插入行”，即可在該行上插入一行；選擇“表格”“插入列”，即可在該列左側插入一列。 行和列也可以同時添加。選擇菜單“修改”“表格”“插入行或列”。或

7、者單擊右鍵，從快捷菜單中選擇“表格”“插入行或列”，在出現(xiàn)的對話框中，輸入要添加的行數(shù)和列數(shù)。如圖8所示。圖8 插入行或列 插入：可選擇要插入行還是列。 行數(shù)：若選擇插入行，則輸入或選擇需要插入的行數(shù)；若選擇插入列，則輸入或選擇需要插入的列數(shù)。第14頁/共47頁位置：選擇要插入的位置。選擇插入行，則選擇在當前行之上或在當前行之下插入，然后【確定】就可插入一行或多行；選擇插入列，則選擇在當前列之前或在當前列之后插入，然后【確定】就可插入一列或多列。 注意，一次插入多行和多列，插入的位置可以自由選擇。如果在表格最后一行后再添加一行那么只能用“插入行或列”這種方法。 也可以在屬性面板中直接增加表格的

8、行數(shù)和列數(shù)。選中整個表格，在屬性面板中增加行或列的值就可以添加行或列了，不過添加的位置是固定的，行只能添加在表格底端，列只能添加在表格右端。屬性面板如圖9所示。圖9 添加行或列第15頁/共47頁 【例2】在上圖所示的表格中第四行下插入三行，第三列后插入兩列，具體步驟如下： （1）將光標放置到該表格第四行、第三列的單元格中。在插入行或列對話框中先選擇插入行，輸入插入行數(shù)“3”，位置在所選行之下。設置完畢，單擊確定，即可完成插入行的操作。 （2）在插入行或列對話框中先選擇插入列，輸入插入列數(shù)“2”，位置在當前列之后。設置完畢，單擊【確定】，即可完成插入列的操作。 （3）也可在如圖5-9的屬性面板中

9、輸入行：7，列：5，也可實現(xiàn)該操作。完成該操作后的表格如圖10所示。圖10 添加行或列第16頁/共47頁設置文檔的頁面屬性文檔的頁面屬性可以對頁面的背景、文檔的標題和頁面的邊界等進行設置。（1）頁面上單擊右鍵或者選擇“修改”菜單中“頁面屬性”選項都可以打開“頁面屬性”對話框，如圖所示。 （2）“頁面屬性”對話框中的“標題”就是對網頁的標題進行設置；“背景圖像”設置網頁背景圖像，單擊右側的“瀏覽”按鈕可以選擇背景圖像文件的地址，如圖所示；“背景”設置背景顏色，如果已設置背景圖片則不用設置。“文本”、“鏈接”、“訪問過的鏈接”和“活動鏈接”均是設置相應項目的顏色。 第17頁/共47頁左邊界：設置網

10、頁內容顯示時距離左邊界的起始位置邊界寬度：設置網頁內容顯示的邊界寬度頂部邊界：設置網頁內容顯示時距離頂部邊界的起始位置邊界高度：設置網頁內容顯示的邊界高度文檔編碼：設置網頁文檔的編碼方式，默認值是簡體中文，根據(jù)地區(qū)不同，可以選擇其他文檔編碼方式重新載入：如果設置不理想，可以通過“重新載入”按鈕，恢復到這之前設置保存過的狀態(tài)。跟蹤圖象：通過“跟蹤圖象”旁邊的“瀏覽”按鈕，可以選擇一個已經設計好的點陣圖形圖象透明度：拖動“圖象透明度”旁的滑塊，可以設置“跟蹤圖象”的透明度，數(shù)值越小越透明。第18頁/共47頁任務2 單元格屬性案例引入：第19頁/共47頁案例分析：該網頁布局是通過表格及表格平鋪實現(xiàn)的

11、，單元格屬性的設置，在表格中插入表格可以設置單元格中內容的布局，插入水平線，電子郵件地址的鏈接主要步驟：1 插入一個1行10列的表格，居中對齊，設置單元格背景顏色2 插入一個1行4列的表格，居中對齊，寬度同上，設置單元格背景顏色3 插入一個表格（1行1列），輸入文本，設置文本屬性4 插入1行3列表格，寬度同上，第一列插入一個圖像，第二列插入一個3行1列的表格，輸入文本，設置文本顏色與對齊方式第20頁/共47頁5 在第三個單元格中插入一個10行1列表格，輸入文本，插入水平線6 插入一個1行1列表格，輸入文本，設置文本屬性，并設置電子郵件地址鏈接相關知識點：第21頁/共47頁格式化表格1 設置表格

12、格式 對表格的格式化操作，可以通過屬性面板完成。選中整張表格，屬性面板如圖（A、B）所示。Dreamweaver 中的屬性面板可以收放，點擊右下角的按鈕或可以收放面板。圖 A 選中整張表格時的屬性面板A（折疊時）圖 B 選中整張表格時的屬性面板B（展開時）第22頁/共47頁2 設置表格名稱 在屬性面板左方的第一個文本框，即表格 Id（表格名稱）文本框中，可以輸入表格的名稱。例如果該表格為一個課程表，則Id中輸入“課程表”。3 設置表格整體格式 行、列：設置表格的行數(shù)和列數(shù)。 寬、高：設置表格的寬度值和高度值。右側的下拉列表框中，可以選擇數(shù)值的單位。采用像素設置表格的寬度值和高度值，則表格的大小

13、不隨瀏覽器窗口的變化而變化。選擇“%”（表示表格寬度或高度同瀏覽器窗口的寬度或高度成百分比），則表格大小隨瀏覽器窗口變化而變化。通過選中表格，拖動表格邊框上出現(xiàn)的控點，也可以改變表格的寬度和高度。且按住Shift鍵，拖動表格邊框上的控點則可以保持表格的長寬比。 對齊：設置表格在瀏覽器窗口水平方向上的對齊方式。 第23頁/共47頁4 設置表格中單元格格式 填充：設置單元格中內容同單元格內部邊界之間的距離，單位為像素。 間距：設置單元格與單元格之間的距離，單位為像素。 如果這兩項都未設置，則瀏覽器將單元格內部邊距設置為1，而將單元格間距設置為2。圖 顯示表格虛擬邊框5 設置表格的邊框格式 邊框：設

14、置表格的邊框寬度，單位為像素。 如果將邊框寬度設置為0，則不顯示邊框。為了操作方便，默認狀態(tài)下，在編輯窗口中表格邊框用虛線顯示，如圖所示。 也可以自行設置是否顯示表格虛擬邊框，選擇菜單“查看”“可視化助理”“表格邊框”。 邊框顏色：設置整個邊框的顏色。第24頁/共47頁6 設置表格的背景 背景圖像：設置表格的背景圖像。輸入背景圖像的URL地址，或者點擊后面的文件夾圖標，打開選擇圖像源對話框，如圖，選擇背景圖像。圖 選擇圖像源第25頁/共47頁 背景顏色：在該顏色井中，可以設置表格的背景顏色，如圖所示。圖 顏色井第26頁/共47頁 7 清除表格的行高和列寬 在屬性面板右下角有如下圖所示的按鈕，利

15、用“清除行高”和“清除列寬”按鈕，可以清除表格中的行高和列寬數(shù)值，從而使表格恢復為最原始的狀態(tài)。圖 清除行高和列寬按鈕第27頁/共47頁 單擊“清除行高”按鈕，可以清除表格中所有的行高值，包括為表格設置的行高值，為單元格設置的行高值等。 單擊“清除列寬”按鈕，可以清除表格中所有的列寬值，包括為表格設置的列寬值，為單元格設置的列寬值等。 圖 清除行高和列寬如果表格中有內容，則表格的寬度和高度將調整為正好能夠容納其中的內容的大小。下圖顯示了清除行高和清除列寬的情形。 還有一種方法完成清除表格的行高和列寬，選中表格，選擇菜單“修改”“表格”“清除單元格高度”或者“清楚單元格寬度”命令即可。第28頁/

16、共47頁8 轉換表格的寬度和高度 表格的寬度和高度都有兩種設置方式，一種是設置絕對的像素值，這時表格的寬度或高度不隨瀏覽器窗口的變化而變化；另一種是設置百分比數(shù)值，這時表格的寬度或高度與瀏覽器窗口大小成百分比，將隨瀏覽器窗口大小變化而變化。這兩種方法各有優(yōu)缺點，使用表格的絕對寬度或高度， 能夠準確地保持單元格中數(shù)據(jù)的格式和位置，但是如果瀏覽器的窗口過小，則需要拖動瀏覽器的滾動條瀏覽表格，這不便于對表格的整體觀察；而使用表格的相對寬度和高度，則能夠保持在瀏覽器窗口中看到整個表格，但是隨著瀏覽器窗口的變化，可能表格中內容的格式和位置也會發(fā)生變化，這在很多時候不利于對數(shù)據(jù)的查看。第29頁/共47頁【

17、例3】設置一個如圖1所示的課程表。則屬性面板設置如圖2所示。圖1 （56）的表格圖2 屬性面板的設置第30頁/共47頁9 設置行、列和單元格的格式 對表格行、列和單元格的格式，也通過首先選中相應的表格元素，然后在屬性面板上設置數(shù)據(jù)來完成。圖 設置表格行、列和單元格格式時的屬性面板選中表格中所需要設置的行、列或單元格后，屬性面板如下圖所示。屬性面板的上半部分，會根據(jù)表格單元格中包含對象的不同而不同，而下半部分卻是對表格行、列和單元格的設置區(qū)第31頁/共47頁設置行、列或單元格中內容的對齊方式： 水平：設置單元格內容在水平方向上相對單元格的對齊方式。可以從下拉列表中選擇默認（通常是普通單元格左對齊

18、，標題單元格居中對齊）、左對齊、居中對齊、右對齊。 垂直：設置單元格內容在垂直方向上相對單元格的對齊方式。可以從下拉列表中選擇默認（通常為中間對齊）、頂端、中間、底部、基線。設置行、列或單元格的寬度和高度： 寬：在該文本框中，輸入單元格的寬度值，可以是具體數(shù)字，表示為像素值；也可以輸入百分數(shù)，如50%，表示單元格寬度為表格寬度的50%。 高：在該文本框中，輸入單元格的高度值，可以是具體數(shù)字，表示為像素值；也可以輸入百分數(shù)，如30%，表示單元格高度為整個表格高度的30%。第32頁/共47頁 另外還可以通過鼠標拖動邊框來改變表格的行高和列寬。要改變行高，將鼠標移動到該行下方的邊框上，當鼠標變?yōu)殡p箭

19、頭形狀時拖動鼠標，將邊框拖到需要的位置，釋放鼠標，表格行高即被改變。要改變列寬，將鼠標移動到該列右方的邊框上，當鼠標變?yōu)殡p箭頭形狀時拖動鼠標，將邊框拖到需要的位置，釋放鼠標，表格列寬即被改變。設置行、列或單元格的邊框格式： 邊框：設置被選中的行、列或單元格的邊框顏色。設置行、列或單元格的背景： 背景：在該本框中輸入單元格的背景圖像文件的URL地址。或者打開后面的文件夾，選擇背景圖像。 背景顏色：在顏色井中選擇單元格的背景顏色。第33頁/共47頁控制單元格中內容的換行方式： 不換行：如果選中該復選框，在單元格中輸入文本時，如果文本長度超過了單元格的寬度，則文本會自動換行，并且單元格的寬度保持不變

20、。 清除該復選框，在單元格中輸入文本時，如果文本長度超過了單元格的寬度，則文本不自動換行，單元格的寬度將隨之變寬。下圖顯示了單元格中輸入文字過長時，不自動換行和自動換行的兩種效果。不自動換行自動換行圖 文字的不自動換行和自動換行第34頁/共47頁10 設置標題單元格 標題：選中該復選框，則將所有選中的單元格設置為標題單元格；取消該復選框，則將所有選中的單元格設置為數(shù)據(jù)單元格。通常將表格的第一行和第一列中的單元格設置為標題單元格。如圖所示，一般對于標題單元格，其內容都被加粗居中顯示。選中第一行和第一列設置標題單元格圖 設置標題單元格第35頁/共47頁11 套用現(xiàn)有單元格的格式 除了上述介紹的手動

21、設置表格和表格中各元素的格式外，Dreamweaver也提供了十幾種表格設計風格，使用這些預置設計風格格式化表格，可以大大提高表格的設計效率。具體步驟如下： 圖 格式化表格對話框 （ 1）選中需要格式化的表格，然后選擇菜單“命令”“格式化表格”。 （2）在彈出的格式化表格對話框中，左上角的列表中顯示各種設計方案，選擇一種，右邊就顯示設計示例。如右圖所示。第36頁/共47頁行顏色： 第一種：設定第一種顏色。 第二種：設定第二種顏色。交錯：設置表格行與行的顏色是否變化。 ：每行的背景顏色不改變每一行：每隔一行顏色發(fā)生變化每兩行：每隔兩行顏色發(fā)生變化每三行：每隔三行顏色發(fā)生變化每四行：每隔四行顏色發(fā)

22、生變化第一行：設置第一行的參數(shù)。對齊方式：無、左對齊、居中、右對齊。文字樣式：常規(guī)、粗體、斜體、加粗斜體。背景色：輸入十六進制顏色代碼。文本顏色：輸入十六進制顏色代碼。最左列：對齊方式和文字樣式與第一行的設置一樣。第37頁/共47頁表格： 邊框：修改邊框寬度，在邊框域中輸入一個值，如果不需要顯示表格邊框，則輸入0即可。 將所有屬性套用至TD標注而不是TR標簽選項：要將設計應用于表格單元（TD）標記而不是表格行（TR）標記，雖然應用于表格單元的格式優(yōu)先于應用于表格行的格式，但是應用于表格行的格式將產生更清晰、更簡潔的HTML源代碼。 單擊【應用】或【確定】按鈕即可對表格應用選定的設置。如下圖所示。（選項設置見上圖所示）。圖 套用格式第38頁/共47頁任務3 表格單元格屬性 案例引入：第39頁/共47頁用表格設計網頁布局，表格、單元格的屬性設置，表格中嵌套表格的操作、圖像的屬性設置主要步驟：1 插入2行1列表格，輸入文本，插入圖像2 插入3行2列的表格，合并第一列，在第一列中插入一個8行2列的表格