(教學(xué)課件)chapter7利用表格設(shè)計(jì)與制作網(wǎng)頁

第7章利用表格設(shè)計(jì)與制作網(wǎng)頁

——制作“合作伙伴”頁面計(jì)算機(jī)工程學(xué)院計(jì)算機(jī)基礎(chǔ)教學(xué)部第7章利用表格設(shè)計(jì)與制作網(wǎng)頁

——制作“合作伙伴”頁面計(jì)算學(xué)習(xí)目標(biāo)了解表格在網(wǎng)頁制作中的用途掌握表格的基本操作方法掌握利用表格布局網(wǎng)頁的方法了解表格數(shù)據(jù)的導(dǎo)入和導(dǎo)出方法網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）2深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室學(xué)習(xí)目標(biāo)了解表格在網(wǎng)頁制作中的用途網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第實(shí)訓(xùn)項(xiàng)目深圳慧衡科技有限公司需要設(shè)計(jì)一個(gè)二級(jí)頁面“網(wǎng)站設(shè)計(jì)開發(fā)技術(shù)和網(wǎng)絡(luò)營銷推廣合作伙伴”，要求：頁面圖文并茂，能清晰、準(zhǔn)確地列出“技術(shù)”、“專業(yè)服務(wù)”及“網(wǎng)絡(luò)營銷”三類合作伙伴信息，并能靈活跳轉(zhuǎn)到相應(yīng)頁面。網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）3深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室實(shí)訓(xùn)項(xiàng)目深圳慧衡科技有限公司需要設(shè)計(jì)一個(gè)二級(jí)頁面“網(wǎng)站設(shè)計(jì)開項(xiàng)目分析設(shè)計(jì)思路：（1）頁面元素：網(wǎng)站banner、導(dǎo)航條、頁腳信息，主體內(nèi)容除了必要的文字元素外，還應(yīng)包含各類合作伙伴網(wǎng)站的logo圖像，以突出合作伙伴主題，吸引眼球。（2）版面布局：采取常用的“匡”字形結(jié)構(gòu)，頂部區(qū)域用于裝載網(wǎng)站的banner和導(dǎo)航條；左側(cè)區(qū)域用于裝載主要欄目列表；右側(cè)區(qū)域用于裝載主體內(nèi)容，底部區(qū)域裝載頁腳信息。（3）配色方案：和整體網(wǎng)站風(fēng)格保持一致，色彩搭配仍然以藍(lán)白色為基調(diào)。網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）4深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室項(xiàng)目分析設(shè)計(jì)思路：網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）4深圳職業(yè)設(shè)計(jì)目標(biāo)網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室設(shè)計(jì)目標(biāo)網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院計(jì)預(yù)備知識(shí)1．表格在網(wǎng)頁中的用途2．表格的構(gòu)成：表格由行、列、單元格3部分組成。網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）6深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室3．表格排版的基本思想預(yù)備知識(shí)1．表格在網(wǎng)頁中的用途網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版制作流程任務(wù)1：利用表格布局頁面任務(wù)3：設(shè)置表格屬性任務(wù)4：利用CSS美化表格任務(wù)2：在表格中插入元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）7深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室制作流程任務(wù)1：利用表格布局頁面任務(wù)3：設(shè)置表格屬性任務(wù)4：任務(wù)1——利用表格布局頁面1．插入表格2．合并與拆分單元格3．插入嵌套表格4．插入/刪除行或列網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）8深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室任務(wù)1——利用表格布局頁面1．插入表格2．合并與拆分單元格STEP1：插入表格深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）9自上而下依次插入3個(gè)表格：表格1（2行1列）、表格2（1行2列）和表格3（1行1列），要求表格的寬度均為1000像素，邊框粗細(xì)為1，單元格邊距及單元格間距均不作設(shè)置（取默認(rèn)值）。STEP1：插入表格深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)STEP2：拆分單元格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）10深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室將表格2右側(cè)的單元格拆分為4行。STEP2：拆分單元格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）10深STEP3：插入嵌套表格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）11深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室

在表格2的左側(cè)單元格中插入1個(gè)3行1列的表格，要求表格的寬度為212像素，邊框粗細(xì)、單元格邊距及單元格間距均為0，效果如下圖左側(cè)所示。在表格2右側(cè)的第3行中分別插入3個(gè)嵌套表格，效果如下圖右側(cè)所示。STEP3：插入嵌套表格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）11STEP4：插入/刪除行或列網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）12深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室在嵌套表格3中插入2行。

為便于以后增加欄目列表之間的行距，將左側(cè)嵌套表格修改為5行。STEP4：插入/刪除行或列網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）任務(wù)2——在表格中插入頁面元素1．在表格1中插入頁面元素2．在表格2中插入頁面元素3．在表格3中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）13深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室任務(wù)2——在表格中插入頁面元素1．在表格1中插入頁面元素2STEP1：在表格1中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）14深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP1：在表格1中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第STEP2：在表格2中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）15深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP2：在表格2中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第STEP3：在表格3中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）16深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP3：在表格3中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第任務(wù)3——設(shè)置表格屬性1．設(shè)置整個(gè)的表格屬性2．設(shè)置表格行、列及單元格屬性3．制作圓角表格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）17深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室任務(wù)3——設(shè)置表格屬性1．設(shè)置整個(gè)的表格屬性2．設(shè)置表格行STEP深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）181．設(shè)置整個(gè)的表格屬性設(shè)置表格1、表格2和表格3的對(duì)齊方式為“居中對(duì)齊”，填充、間距和邊框設(shè)置為0。2．設(shè)置表格行、列及單元格屬性將表格2左側(cè)單元格的寬度設(shè)置為230px，并將其嵌套表格置于單元格的左上方。用相同的方法將右側(cè)所有嵌套表格第1行的行高設(shè)置為60。利用1px透明“space.gif”圖像制作表格細(xì)線。3．制作圓角表格將主體內(nèi)容區(qū)域制作為圓角矩形STEP深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與制作實(shí)用教任務(wù)4——利用CSS樣式美化表格1．美化表格中的元素2．美化表格背景3．美化表格邊框網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）19深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室任務(wù)4——利用CSS樣式美化表格1．美化表格中的元素2．美STEP1：美化表格中的元素深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）20

美化標(biāo)題3。

修飾左側(cè)欄目的鏈接文本顏色。

美化“網(wǎng)站技術(shù)和營銷專題”文字列表。

美化“慧衡專業(yè)服務(wù)”文字列表。STEP1：美化表格中的元素深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP2：美化表格背景網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）21深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室修飾欄目列表中的標(biāo)題2背景。利用CSS樣式美化左側(cè)欄目所在表格的單元格背景。STEP2：美化表格背景網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）21STEP3：美化表格邊框網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）22深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室將表格1與表格2的間距設(shè)置為10px。將表格3的上邊框設(shè)置為寬度為5px的橘紅色邊框。美化頁腳導(dǎo)航鏈接表。STEP3：美化表格邊框網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）22項(xiàng)目總結(jié)深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）23項(xiàng)目總結(jié)深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與制作實(shí)用教課后練習(xí)配套實(shí)訓(xùn)

利用配套實(shí)訓(xùn)文件夾下提供的素材文件，根據(jù)所學(xué)的表格及前面的知識(shí)，自主設(shè)計(jì)與制作一個(gè)介紹八音琴的網(wǎng)頁，要求如下：利用表格設(shè)計(jì)與制作頁面。使用CSS樣式適當(dāng)美化頁面。同步測試

通過教材第7章“同步測試”檢驗(yàn)自己是否掌握了本章的相關(guān)知識(shí)點(diǎn)與技能點(diǎn)。網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）計(jì)算機(jī)工程學(xué)院計(jì)算機(jī)基礎(chǔ)教研室課后練習(xí)配套實(shí)訓(xùn)

利用配套實(shí)訓(xùn)文件夾下提供的素材文件，根據(jù)所第7章利用表格設(shè)計(jì)與制作網(wǎng)頁

——制作“合作伙伴”頁面計(jì)算機(jī)工程學(xué)院計(jì)算機(jī)基礎(chǔ)教學(xué)部第7章利用表格設(shè)計(jì)與制作網(wǎng)頁

——制作“合作伙伴”頁面計(jì)算學(xué)習(xí)目標(biāo)了解表格在網(wǎng)頁制作中的用途掌握表格的基本操作方法掌握利用表格布局網(wǎng)頁的方法了解表格數(shù)據(jù)的導(dǎo)入和導(dǎo)出方法網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）26深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室學(xué)習(xí)目標(biāo)了解表格在網(wǎng)頁制作中的用途網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第實(shí)訓(xùn)項(xiàng)目深圳慧衡科技有限公司需要設(shè)計(jì)一個(gè)二級(jí)頁面“網(wǎng)站設(shè)計(jì)開發(fā)技術(shù)和網(wǎng)絡(luò)營銷推廣合作伙伴”，要求：頁面圖文并茂，能清晰、準(zhǔn)確地列出“技術(shù)”、“專業(yè)服務(wù)”及“網(wǎng)絡(luò)營銷”三類合作伙伴信息，并能靈活跳轉(zhuǎn)到相應(yīng)頁面。網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）27深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室實(shí)訓(xùn)項(xiàng)目深圳慧衡科技有限公司需要設(shè)計(jì)一個(gè)二級(jí)頁面“網(wǎng)站設(shè)計(jì)開項(xiàng)目分析設(shè)計(jì)思路：（1）頁面元素：網(wǎng)站banner、導(dǎo)航條、頁腳信息，主體內(nèi)容除了必要的文字元素外，還應(yīng)包含各類合作伙伴網(wǎng)站的logo圖像，以突出合作伙伴主題，吸引眼球。（2）版面布局：采取常用的“匡”字形結(jié)構(gòu)，頂部區(qū)域用于裝載網(wǎng)站的banner和導(dǎo)航條；左側(cè)區(qū)域用于裝載主要欄目列表；右側(cè)區(qū)域用于裝載主體內(nèi)容，底部區(qū)域裝載頁腳信息。（3）配色方案：和整體網(wǎng)站風(fēng)格保持一致，色彩搭配仍然以藍(lán)白色為基調(diào)。網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）28深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室項(xiàng)目分析設(shè)計(jì)思路：網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）4深圳職業(yè)設(shè)計(jì)目標(biāo)網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）29深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室設(shè)計(jì)目標(biāo)網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院計(jì)預(yù)備知識(shí)1．表格在網(wǎng)頁中的用途2．表格的構(gòu)成：表格由行、列、單元格3部分組成。網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）30深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室3．表格排版的基本思想預(yù)備知識(shí)1．表格在網(wǎng)頁中的用途網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版制作流程任務(wù)1：利用表格布局頁面任務(wù)3：設(shè)置表格屬性任務(wù)4：利用CSS美化表格任務(wù)2：在表格中插入元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）31深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室制作流程任務(wù)1：利用表格布局頁面任務(wù)3：設(shè)置表格屬性任務(wù)4：任務(wù)1——利用表格布局頁面1．插入表格2．合并與拆分單元格3．插入嵌套表格4．插入/刪除行或列網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）32深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室任務(wù)1——利用表格布局頁面1．插入表格2．合并與拆分單元格STEP1：插入表格深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）33自上而下依次插入3個(gè)表格：表格1（2行1列）、表格2（1行2列）和表格3（1行1列），要求表格的寬度均為1000像素，邊框粗細(xì)為1，單元格邊距及單元格間距均不作設(shè)置（取默認(rèn)值）。STEP1：插入表格深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)STEP2：拆分單元格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）34深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室將表格2右側(cè)的單元格拆分為4行。STEP2：拆分單元格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）10深STEP3：插入嵌套表格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）35深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室

在表格2的左側(cè)單元格中插入1個(gè)3行1列的表格，要求表格的寬度為212像素，邊框粗細(xì)、單元格邊距及單元格間距均為0，效果如下圖左側(cè)所示。在表格2右側(cè)的第3行中分別插入3個(gè)嵌套表格，效果如下圖右側(cè)所示。STEP3：插入嵌套表格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）11STEP4：插入/刪除行或列網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）36深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室在嵌套表格3中插入2行。

為便于以后增加欄目列表之間的行距，將左側(cè)嵌套表格修改為5行。STEP4：插入/刪除行或列網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）任務(wù)2——在表格中插入頁面元素1．在表格1中插入頁面元素2．在表格2中插入頁面元素3．在表格3中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）37深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室任務(wù)2——在表格中插入頁面元素1．在表格1中插入頁面元素2STEP1：在表格1中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）38深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP1：在表格1中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第STEP2：在表格2中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）39深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP2：在表格2中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第STEP3：在表格3中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）40深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室STEP3：在表格3中插入頁面元素網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第任務(wù)3——設(shè)置表格屬性1．設(shè)置整個(gè)的表格屬性2．設(shè)置表格行、列及單元格屬性3．制作圓角表格網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）41深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室任務(wù)3——設(shè)置表格屬性1．設(shè)置整個(gè)的表格屬性2．設(shè)置表格行STEP深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）421．設(shè)置整個(gè)的表格屬性設(shè)置表格1、表格2和表格3的對(duì)齊方式為“居中對(duì)齊”，填充、間距和邊框設(shè)置為0。2．設(shè)置表格行、列及單元格屬性將表格2左側(cè)單元格的寬度設(shè)置為230px，并將其嵌套表格置于單元格的左上方。用相同的方法將右側(cè)所有嵌套表格第1行的行高設(shè)置為60。利用1px透明“space.gif”圖像制作表格細(xì)線。3．制作圓角表格將主體內(nèi)容區(qū)域制作為圓角矩形STEP深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與制作實(shí)用教任務(wù)4——利用CSS樣式美化表格1．美化表格中的元素2．美化表格背景3．美化表格邊框網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第3版）43深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室任務(wù)4——利用CSS樣式美化表格1．美化表格中的元素2．美STEP1：美化表格中的元素深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計(jì)與