1、第7章利用表格設計與制作網頁制作“合作伙伴”頁面計算機工程學院計算機基礎教學部學習目標了解表格在網頁制作中的用途掌握表格的基本操作方法掌握利用表格布局網頁的方法了解表格數據的導入和導出方法網頁設計與制作實用教程（第3版）2深圳職業技術學院計算機基礎教研室實訓項目深圳慧衡科技有限公司需要設計一個二級頁面“網站設計開發技術和網絡營銷推廣合作伙伴”，要求： 頁面圖文并茂，能清晰、準確地列出“技術”、“專業服務”及“網絡營銷”三類合作伙伴信息，并能靈活跳轉到相應頁面。網頁設計與制作實用教程（第3版）3深圳職業技術學院計算機基礎教研室項目分析設計思路：（1）頁面元素：網站banner、導航條、頁腳信息，

2、主體內容除了必要的文字元素外，還應包含各類合作伙伴網站的logo圖像，以突出合作伙伴主題，吸引眼球。（2）版面布局：采取常用的“匡”字形結構，頂部區域用于裝載網站的banner和導航條；左側區域用于裝載主要欄目列表；右側區域用于裝載主體內容，底部區域裝載頁腳信息。（3）配色方案：和整體網站風格保持一致，色彩搭配仍然以藍白色為基調。網頁設計與制作實用教程（第3版）4深圳職業技術學院計算機基礎教研室設計目標網頁設計與制作實用教程（第3版）5深圳職業技術學院計算機基礎教研室預備知識1表格在網頁中的用途2表格的構成：表格由行、列、單元格3部分組成。網頁設計與制作實用教程（第3版）6深圳職業技術學院計算

3、機基礎教研室3表格排版的基本思想制作流程任務1：利用表格布局頁面任務3：設置表格屬性任務4：利用CSS美化表格任務2：在表格中插入元素網頁設計與制作實用教程（第3版）7深圳職業技術學院計算機基礎教研室任務1 利用表格布局頁面1插入表格2合并與拆分單元格3插入嵌套表格4插入/刪除行或列網頁設計與制作實用教程（第3版）8深圳職業技術學院計算機基礎教研室STEP1：插入表格深圳職業技術學院計算機基礎教研室網頁設計與制作實用教程（第3版）9自上而下依次插入3個表格：表格1（2行1列）、表格2（1行2列）和表格3（1行1列），要求表格的寬度均為1000像素，邊框粗細為1，單元格邊距及單元格間距均不作設置

4、（取默認值）。STEP2：拆分單元格網頁設計與制作實用教程（第3版）10深圳職業技術學院計算機基礎教研室將表格2右側的單元格拆分為4行。STEP3：插入嵌套表格網頁設計與制作實用教程（第3版）11深圳職業技術學院計算機基礎教研室在表格2的左側單元格中插入1個3行1列的表格，要求表格的寬度為212像素，邊框粗細、單元格邊距及單元格間距均為0，效果如下圖左側所示。在表格2右側的第3行中分別插入3個嵌套表格，效果如下圖右側所示。STEP4：插入/刪除行或列網頁設計與制作實用教程（第3版）12深圳職業技術學院計算機基礎教研室在嵌套表格3中插入2行。為便于以后增加欄目列表之間的行距，將左側嵌套表格修改為

5、5行。任務2 在表格中插入頁面元素1在表格1中插入頁面元素2在表格2中插入頁面元素3在表格3中插入頁面元素網頁設計與制作實用教程（第3版）13深圳職業技術學院計算機基礎教研室STEP1：在表格1中插入頁面元素網頁設計與制作實用教程（第3版）14深圳職業技術學院計算機基礎教研室STEP2：在表格2中插入頁面元素網頁設計與制作實用教程（第3版）15深圳職業技術學院計算機基礎教研室STEP3：在表格3中插入頁面元素網頁設計與制作實用教程（第3版）16深圳職業技術學院計算機基礎教研室任務3 設置表格屬性1設置整個的表格屬性2設置表格行、列及單元格屬性3制作圓角表格網頁設計與制作實用教程（第3版）17深

6、圳職業技術學院計算機基礎教研室STEP深圳職業技術學院計算機基礎教研室網頁設計與制作實用教程（第3版）181設置整個的表格屬性設置表格1、表格2和表格3的對齊方式為“居中對齊”，填充、間距和邊框設置為0。2設置表格行、列及單元格屬性將表格2左側單元格的寬度設置為230px，并將其嵌套表格置于單元格的左上方。用相同的方法將右側所有嵌套表格第1行的行高設置為60。利用1px透明“space.gif”圖像制作表格細線。3制作圓角表格將主體內容區域制作為圓角矩形任務4 利用CSS樣式美化表格1美化表格中的元素2美化表格背景3美化表格邊框網頁設計與制作實用教程（第3版）19深圳職業技術學院計算機基礎教研

7、室STEP1：美化表格中的元素深圳職業技術學院計算機基礎教研室網頁設計與制作實用教程（第3版）20美化標題3。修飾左側欄目的鏈接文本顏色。美化“網站技術和營銷專題”文字列表。美化“慧衡專業服務”文字列表。STEP2：美化表格背景網頁設計與制作實用教程（第3版）21深圳職業技術學院計算機基礎教研室修飾欄目列表中的標題2背景。利用CSS樣式美化左側欄目所在表格的單元格背景。STEP3：美化表格邊框網頁設計與制作實用教程（第3版）22深圳職業技術學院計算機基礎教研室將表格1與表格2的間距設置為10px。將表格3的上邊框設置為寬度為5px的橘紅色邊框。美化頁腳導航鏈接表。項目總結深圳職業技術學院計算機基礎教研室網頁設計與制作實用教程（第3版）23課后練習配套實訓利用配套實訓文件夾下提供的素材文件，根據所學的表格及前面的知識，自主設計與