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

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

2、主體內(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è)計與制作實用教程（第3版）4深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室設(shè)計目標(biāo)網(wǎng)頁設(shè)計與制作實用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室預(yù)備知識1表格在網(wǎng)頁中的用途2表格的構(gòu)成：表格由行、列、單元格3部分組成。網(wǎng)頁設(shè)計與制作實用教程（第3版）6深圳職業(yè)技術(shù)學(xué)院計算

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

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

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

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

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