課程單元教學(xué)設(shè)計(jì)任課教師：科目：授課班級(jí)：單元標(biāo)題項(xiàng)目六任務(wù)3設(shè)置背景顏色授課時(shí)間2021年月日（第周，周，第節(jié)）授課地點(diǎn)教學(xué)學(xué)時(shí)2課時(shí)教學(xué)目標(biāo)能力目標(biāo)：能使用設(shè)置圖像圓角、背景顏色的屬性設(shè)置圖片的顯示效果；知識(shí)目標(biāo)：掌握設(shè)置圖像圓角、背景顏色的方法教學(xué)資源黑板板書、多媒體課件、電腦教學(xué)進(jìn)程一、復(fù)習(xí)提問1.如何圖片加入邊框？教師活動(dòng)：教師提問學(xué)生活動(dòng)：回答問題提問法5分鐘課堂案例——如何給圖像設(shè)置圓角教師活動(dòng)：1.發(fā)布任務(wù)并引導(dǎo)學(xué)生思考實(shí)習(xí)效果需要用到的工具、方法。學(xué)生活動(dòng)：1.通過教師講解，學(xué)生積極完成任務(wù)。講授法、演示法、練習(xí)法15分鐘1.定義圓角圖像。CSS3新增了border-radius屬性,使用它可以設(shè)計(jì)圓角樣式，該屬性用法如下。border-radius:屬性值;border-radius屬性值有四個(gè)寫法border-radius:設(shè)置一個(gè)值;例如：border-radius:10px;設(shè)置的四個(gè)圓角半徑都是10pxborder-radius:設(shè)置兩個(gè)值;例如:border-radius:10px20px;表示左上角、右下角為10px，右上角、左下角為20px；border-radius:設(shè)置三個(gè)值;例如:border-radius:10px20px30px;表示左上角、右上角和右下角、左下角的圓角半；（4）border-radius:設(shè)置四個(gè)值例如:border-radius:10px20px30px40px;表示左上角、右上角、右下角和左下角的圓角半徑依次是10px20px30px40px2.設(shè)置背景顏色。CSS的背景顏色是由background-color屬性來實(shí)現(xiàn)的，該屬性用法如下:background-color:屬性值;在CSS頁面的背景顏色通過設(shè)置body標(biāo)記的background-color屬性來實(shí)現(xiàn)。具體顏色值的設(shè)定方法與文字顏色的設(shè)定方法一樣，可以采用十六進(jìn)制、RGB各分量和顏色的英文單詞。教師活動(dòng)：1.講解知識(shí)要點(diǎn)；2.演示具體方法；3.巡堂指導(dǎo)學(xué)生操作學(xué)生活動(dòng)：1.認(rèn)真聽課做好筆記。2.完成練習(xí)任務(wù)講授法、演示法、練習(xí)法15分鐘課堂案例——完成練習(xí)教師活動(dòng)：1.演示重點(diǎn)難點(diǎn)；2.巡堂指導(dǎo)學(xué)生操作；3.發(fā)現(xiàn)共性問題并統(tǒng)一指導(dǎo)；4、指導(dǎo)個(gè)別學(xué)生解決問題學(xué)生活動(dòng)：1.獨(dú)立完成練習(xí)任務(wù)；2.遇到自己解決不了的問題向老師、同學(xué)提問，解決遇到的問題。講授法、演示法、練習(xí)法30分鐘教師活動(dòng)：1.展示優(yōu)秀作品2.點(diǎn)評(píng)學(xué)生作業(yè)，總結(jié)共性問題。學(xué)生活動(dòng)：1.學(xué)習(xí)其他同學(xué)的優(yōu)秀作品；2.總結(jié)自己完成的情況