（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目九-2電子教案

1、（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目九-2電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目九-2電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目九-2電子教案教學(xué)課題項(xiàng)目9 CSS 3修飾表格表單9.2知識準(zhǔn)備授課班級授課時(shí)間教學(xué)目標(biāo)知識目標(biāo)1.掌握CSS設(shè)置圓角邊框；2.掌握CSS設(shè)置邊框陰影；3.掌握CSS設(shè)置圖片邊框；4.掌握CSS修飾表格。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問題和解決問題的能力；2.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識的能力。德育目標(biāo)1.鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(yè)素質(zhì)；2.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析通過前面知識的學(xué)習(xí)，已經(jīng)掌握了CSS 3的各類選擇器的應(yīng)用，掌握了CSS 3美

2、化文本、段落和圖片的方法以及 CSS 3美化超鏈接和項(xiàng)目列表，掌握了。任何一個(gè)頁面都有不同的背景和基調(diào)，而對于單個(gè)元素，邊框效果隨處可見，表格和表單也是網(wǎng)頁中最常見的元素，想要使網(wǎng)頁頁面達(dá)到整齊美觀的視覺效果，就需要用CSS來進(jìn)行美化。本項(xiàng)目學(xué)習(xí)使用CSS修飾表格表單，并掌握CSS美化邊框、美化背景的方法。教學(xué)重點(diǎn)1.CSS設(shè)置圓角邊框；2.CSS設(shè)置邊框陰影；3.CSS設(shè)置圖片邊框；4.CSS修飾表格。教學(xué)難點(diǎn)1.CSS設(shè)置圖片邊框；2.CSS修飾表格。教學(xué)方法項(xiàng)目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示一個(gè)網(wǎng)頁頁面，通過網(wǎng)頁中圓角邊框、邊框陰影

3、等的效果，導(dǎo)入本節(jié)課的內(nèi)容。教師提出問題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)單元格列行單元格列行單元格列行一、使用CSS設(shè)置圓角邊框單元格列行單元格列行單元格列行CSS 3的border-radius屬性可用來定義邊框的圓角效果，格式如下：border-radius:none | 1,4 / 1,4;二、使用CSS設(shè)置邊框陰影在CSS 3中，使用box-shadow屬性來設(shè)置邊框陰影，格式如下：box-shadow: h-shadow v-shadow blur spread color inset;三、使用CSS設(shè)置圖片邊框在CSS 3中，可以用border-image屬性設(shè)置對象的圖像邊框

4、，格式如下：border-image:border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;【例9-4】制作不同樣式的邊框?qū)嵗a如下所示。1 2 3 4 5 邊框樣式6 7 body8 margin:30px;9 background-color:#E9E9E9;10 11 .pic12 width:300px;13 padding:10px 10px 20px 10px;14 background-color:white;15 box-shadow

5、: 10px 10px 5px #888888;16 border:15px solid transparent;17 border-image:url(images/border4.jpg) 30 30 round;18 19 img20 border-top-left-radius: 20px;21 border-top-right-radius: 20px;22 border-bottom-left-radius: 10px;23 border-bottom-right-radius: 10px;24 25 26 27 28 29 30 大唐芙蓉園燈會(huì)31 32 33 在Chrome瀏覽

6、器中預(yù)覽，效果如圖所示。四、使用CSS修飾表格1border-collapse屬性2border-spacing屬性border-spacing屬性用于設(shè)置分隔單元格邊框的距離，格式如下：border-spacing:lengthlength;3caption-side屬性4empty-cells屬性5table-layout屬性【例9-5】用CSS修飾表格實(shí)例，代碼如下所示。1 2 3 4 5 CSS對表格的修飾6 7 table8 9 border-collapse:separate;10 border-spacing:10px;11 caption-side:top;12 empty-c

7、ells:show;13 table-layout:auto;14 15 16 17 18 19 標(biāo)題20 21 第一季度22 收益100000元23 24 25 第二季度26 27 28 29 30 在Chrome瀏覽器中預(yù)覽，效果如圖所示。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。知識歸納本節(jié)課學(xué)習(xí)了使用C

8、SS3設(shè)置圓角邊框、設(shè)置邊框陰影、設(shè)置圖片邊框和修飾表格的美化方法。屬性屬性值說明border-radiusnone | 1,4 / 1,4;邊框圓角box-shadowh-shadow| v-shadow| blur| spread| color| inset邊框陰影border-imageborder-image-source圖片邊框border-image-sliceborder-image-widthborder-image-outsetborder-image-repeatborder-collapseseparate| collapse| inherit表格邊框是否折疊border

9、-spacinglengthlength單元格邊框的距離caption-sidetop| bottom| inherit表格標(biāo)題的位置empty-cellshide| show | inherit是否顯示空白單元格table-layoutautomatic| fixed | inherit單元格是否自動(dòng)適應(yīng)內(nèi)容教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、選擇題1.下列_是定義邊框的圓角效果的屬性。A border-style B border-width C border-radius D border-color2.下列_是用來設(shè)置邊框陰影的屬性。A border-style B box-shadow C border-radius D border-color3.下列_屬性用于設(shè)置