項(xiàng)目四任課老師：XXX應(yīng)用和美化表格PRESENTATION//SLIDE1制作“熱銷排行榜”2美化“熱銷排行榜”表格PRESENTATION//SLIDE任務(wù)一制作“熱銷排行榜”一、任務(wù)引入在早期的網(wǎng)頁設(shè)計(jì)中，表格因其極具結(jié)構(gòu)化的表現(xiàn)形式，主要用于整合頁面中的元素進(jìn)行排版。但隨著網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)化，HTML5中增加了許多格式化標(biāo)簽，不再使用表格標(biāo)簽作為頁面元素的容器，所以在如今的網(wǎng)頁設(shè)計(jì)中，表格主要用來顯示數(shù)據(jù)。本任務(wù)通過為“網(wǎng)上書店”頁面制作“熱銷排行榜”區(qū)域，練習(xí)表格的使用方法13.1創(chuàng)建表格表格是由行和列組成的二維表。每個(gè)表格均有若干行，每行有若干列，行和列圍成的區(qū)域是單元格。單元格的內(nèi)容是數(shù)據(jù)，也稱數(shù)據(jù)單元格，數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線或表格等元素。二、相關(guān)知識(shí)二、相關(guān)知識(shí)13.2表頭與標(biāo)題標(biāo)題表頭1213.3表格分組13.3.1按行分組13.3.2按列分組二、相關(guān)知識(shí)13.4表格標(biāo)簽的屬性13.4.1<table>標(biāo)簽的屬性1.border屬性2.cellspacing屬性3.cellpadding屬性4.width屬性和height屬性5.align屬性6.bgcolor屬性7.background屬性二、相關(guān)知識(shí)（1）<tr>標(biāo)簽無寬度屬性width，其寬度取決于表格標(biāo)簽<table>二、相關(guān)知識(shí)13.4.2<tr>標(biāo)簽的屬性（2（先指明最高級(jí)的層次，然后依次向下說明表格標(biāo)簽的屬性123跨行跨行、跨列跨列二、相關(guān)知識(shí)1、教學(xué)設(shè)備與工具（1）電腦/每人一臺(tái)；（2）U盤、相關(guān)的軟件（AdobeDreamweaverCS6或HBuilder）。三、資源準(zhǔn)備2、職位分工（如表13-4所示）三、資源準(zhǔn)備表13-4職位分工表職位小組成員（姓名）工作分工備注組長A

小組角色由組長進(jìn)行統(tǒng)一安排，下一個(gè)項(xiàng)目角色職位互換，提升綜合職業(yè)能力。組員B

組員C

組員D

組員E

四、實(shí)踐操作使用表格制作“網(wǎng)上書店”頁面的“熱銷排行榜”步驟1：任務(wù)引入、效果圖展示本任務(wù)實(shí)施通過制作“網(wǎng)上書店”頁面中的“熱銷排行榜”區(qū)域，練習(xí)表格的實(shí)際應(yīng)用，最終頁面效果圖步驟2：任務(wù)分析分析“網(wǎng)上書店”頁面中的“熱銷排行榜”區(qū)域的構(gòu)成元素，將其拆解為幾個(gè)部分，分析各部分使用了哪些HTML5標(biāo)記及屬性。本頁面首先使用thead、tfoot、tbody標(biāo)記將表格內(nèi)容分組，通過tr和td標(biāo)記表格的行與單元格內(nèi)容。在表格的最后一行“完整榜單……”所在td中，加入colspan屬性，實(shí)現(xiàn)表格的列合并。為了設(shè)置表格各列的寬度，在<thead>標(biāo)記前加入col標(biāo)記并使用width屬性。四、實(shí)踐操作四、相關(guān)知識(shí)步驟3：任務(wù)實(shí)現(xiàn)1234設(shè)置表格各列的寬度制作“熱銷排行版”區(qū)域中表格的一部分打開配套素材html文檔添加其余行五、總結(jié)評(píng)價(jià)1、小組互評(píng)（如表13-5所示）表14-3實(shí)訓(xùn)過程性評(píng)價(jià)表（小組互評(píng)）組別：

組員：

任務(wù)名稱：

制作“熱銷排行榜”

教學(xué)環(huán)節(jié)

被評(píng)組別評(píng)分細(xì)則第

組課前預(yù)習(xí)基礎(chǔ)知識(shí)完整、正確（10分）得分：

實(shí)施作業(yè)1、操作過程正確（15分）2、基本掌握操作要領(lǐng)（20分）3、操作結(jié)果正確（25分）4、小組分工協(xié)作完成（10分）各環(huán)節(jié)得分：1：

2：

3：

4：

質(zhì)量檢驗(yàn)1、學(xué)習(xí)態(tài)度（5分）1：

2：

3：

2、工作效率（5分）3、代碼編寫規(guī)范（10分）總分（100分）PRESENTATION//SLIDE任務(wù)二美化“熱銷排行榜”表格一、任務(wù)引入在網(wǎng)頁中使用表格可以清晰直觀地顯示數(shù)據(jù)。本任務(wù)首先介紹CSS3中表格的相關(guān)樣式，然后通過美化“網(wǎng)上書店”頁面“熱銷排行榜”區(qū)域的表格，練習(xí)使用CSS3美化表格的方法。14.1.1border和border-collapse屬性（1）當(dāng)表格的border-collapse屬性設(shè)置為collapse時(shí)，則HTML中設(shè)置的cellspacing屬性值無效；（2）行標(biāo)簽<tr>無border樣式屬性。二、相關(guān)知識(shí)表14-1常用的表格CSS屬性二、相關(guān)知識(shí)屬性描述border簡寫屬性。在一條聲明中設(shè)置所有邊框?qū)傩?。border-collapse規(guī)定是否應(yīng)折疊表格邊框。border-spacing規(guī)定相鄰單元格之間的邊框的距離。caption-side規(guī)定表格標(biāo)題的位置。empty-cells規(guī)定是否在表格中的空白單元格上顯示邊框和背景。table-layout設(shè)置用于表格的布局算法。14.1.2border-spacing屬性border-spacing屬性設(shè)置相鄰單元格的邊框間的距離（僅用于“邊框分離”模式），該屬性指定分隔邊框模型中單元格邊界之間的距離。在指定的兩個(gè)長度值中，第一個(gè)是水平間隔，第二個(gè)是垂直間隔。二、相關(guān)知識(shí)屬性123

caption-side屬性table-layout屬性empty-cells屬性二、相關(guān)知識(shí)1.border和border-collapse屬性1圓角表格是表格常用的表現(xiàn)形式2CSS中常使用border-radius屬性設(shè)置表格的圓角二、相關(guān)知識(shí)14.2制作圓角表格GIF格式最自適應(yīng)表格是指當(dāng)瀏覽器窗口寬度變化時(shí)能夠自動(dòng)調(diào)節(jié)顯示方式的表格，制作這類表格需要用到響應(yīng)式布局的媒體查詢功能“@media”，它可以查詢?cè)O(shè)備的屏幕寬度、高度等，在其基礎(chǔ)上設(shè)置表格樣式就實(shí)現(xiàn)了自適應(yīng)表格。二、相關(guān)知識(shí)14.3制作自適應(yīng)表格1、教學(xué)設(shè)備與工具（1）電腦/每人一臺(tái)；（2）U盤、相關(guān)的軟件（Dreamweaver/HBuilderX）。三、資源準(zhǔn)備2、職位分工（如表14-1所示）三、資源準(zhǔn)備表15-13職位分工表職位小組成員（姓名）工作分工備注組長A

小組角色由組長進(jìn)行統(tǒng)一安排，下一個(gè)項(xiàng)目角色職位互換，提升綜合職業(yè)能力。組員B

組員C

組員D

組員E

四、實(shí)踐操作美化“網(wǎng)上書店”頁面“熱銷排行榜”區(qū)域的表格步驟1：任務(wù)引入、效果圖展示本任務(wù)實(shí)施通過美化“網(wǎng)上書店”頁面“熱銷排行榜”區(qū)域的表格，練習(xí)使用CSS3設(shè)置表格樣式的方法，頁面效果步驟2：任務(wù)分析（1）首先通過對(duì)table設(shè)置整體樣式，設(shè)置表格的寬度、外邊距、文本顏色等屬性。（2）設(shè)置普通單元格td的高度、內(nèi)外邊距與邊框等屬性；（3）設(shè)置表頭th的高度、字號(hào)、文本顏色等屬性；（4）設(shè)置表格中a標(biāo)記的樣式，去除下劃線效果，設(shè)置文本顏色、第五列單元格的文本顏色等效果；（5）使用設(shè)置隔行換色的結(jié)構(gòu)選擇器“:nth-child()”為表格設(shè)置隔行換色效果。四、實(shí)踐操作四、相關(guān)知識(shí)步驟3：任務(wù)實(shí)現(xiàn)1234設(shè)置按鈕樣式的超鏈接設(shè)置表格整體樣式打開配套素材html文檔設(shè)置超鏈接與單元格樣式五、總結(jié)評(píng)價(jià)1、小組互評(píng)（如表14-3所示）表14-3實(shí)訓(xùn)過程性評(píng)價(jià)表（小組互評(píng)）組別：

組員：

任務(wù)名稱：

美化“熱銷排行榜”表格教學(xué)環(huán)節(jié)

被評(píng)組別評(píng)分細(xì)則第

組課前預(yù)習(xí)基礎(chǔ)知識(shí)完整、正確（10分）得分：

實(shí)施作業(yè)1、操作過程正確（15分）2、基本掌握操作要領(lǐng)（20分）3、操作結(jié)果正確（25分）4、小組分工協(xié)作完成（10分）各環(huán)節(jié)得分：1：

2：

3：

4：

質(zhì)量檢驗(yàn)1、學(xué)習(xí)態(tài)度（5分）1：

2：

3：