任務(wù)9 制作學(xué)院風(fēng)景墻

教案名稱任務(wù)九制作學(xué)院風(fēng)景墻計劃學(xué)時4學(xué)時知識目標(biāo)掌握通過transition屬性生成過渡動畫的方法掌握通過transform屬性生成2D變形的方法能力目標(biāo)能夠控制過渡時間、動畫快慢等常見過渡效果掌握CSS3中的變形屬性，能夠制作2D轉(zhuǎn)換效果素質(zhì)目標(biāo)培養(yǎng)學(xué)生的團(tuán)隊協(xié)作能力引導(dǎo)學(xué)生積極探索未知培養(yǎng)學(xué)生不畏困難，勇往直前的精神，做社會和國家合格接班人教學(xué)重點過渡、2D轉(zhuǎn)換教學(xué)難點2D轉(zhuǎn)換教學(xué)模式教學(xué)做一體化線上+線下混合教學(xué)教學(xué)活動及主要環(huán)節(jié)思政元素切入點第1學(xué)時（過渡屬性）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（5分鐘）傳統(tǒng)的Web設(shè)計中，當(dāng)網(wǎng)頁中需要顯示動畫或特效時，需要使用JavaScript腳本或者Flash來實現(xiàn)。CSS3提供了強(qiáng)大的過渡屬性，它可以在不使用Flash動畫或者JavaScript腳本的情況下，為元素從一種樣式轉(zhuǎn)變?yōu)榱硪环N樣式時添加效果，例如漸顯、漸弱、動畫快慢等。那么，在CSS3中，過渡屬性主要包括哪些呢？（學(xué)生回答，教師對問題進(jìn)行講解）CSS3中，過渡屬性主要包括transition-property、transition-duration、transition-timing-function、transition-delay四種。transition-property屬性用于指定應(yīng)用過渡效果的CSS屬性的名稱，其過渡效果通常在用戶將指針移動到元素上時發(fā)生。\o"CSS3transition-duration屬性"transition-duration屬性用于定義過渡效果花費的時間。transition-timing-function屬性規(guī)定過渡效果的速度曲線。transition-delay屬性規(guī)定過渡效果何時開始，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）。=2\*ROMANII.重難點內(nèi)容講授：（40分鐘）transition-property屬性（1）教師通過PPT對transition-property屬性的概念及作用進(jìn)行講解，指出transition-property屬性用于指定應(yīng)用過渡效果的CSS屬性的名稱。（2）教師transition-property屬性的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對transition-property屬性的三個常用屬性值進(jìn)行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。transition-property:none|all|property;（4）教師指出應(yīng)用transition-property屬性時需要注意的問題，并給予解答。二、transition-duration屬性（1）教師通過PPT對transition-duration屬性的概念及作用進(jìn)行講解，指出transition-duration屬性用于定義過渡效果花費的時間。（2）教師對transition-duration屬性的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師指出在設(shè)置過渡效果時，必須使用transition-duration屬性設(shè)置過渡時間，否則不會產(chǎn)生過渡效果。三、transition-timing-function屬性（1）教師通過PPT對transition-timing-function屬性的概念及作用進(jìn)行講解，指出transition-timing-function屬性規(guī)定過渡效果的速度曲線。（2）教師對transition-timing-function屬性的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對transition-timing-function屬性的常用屬性值進(jìn)行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）教師對比transition-timing-function屬性不同屬性值的產(chǎn)生過渡效果的速度曲線，并分析其異同。四、transition-delay屬性（1）教師通過PPT對transition-delay屬性的概念及作用進(jìn)行講解，指出transition-delay屬性規(guī)定過渡效果何時開始。（2）教師對transition-delay屬性的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對比transition-delay屬性設(shè)置的過渡效果，并分析說明。五、transition屬性（1）教師對transition屬性的概念進(jìn)行講解，指出transition屬性是一個復(fù)合屬性，用于在一個屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性。（2）教師對transition屬性的基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）教師對使用transition屬性設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性進(jìn)行講解，并對比分析其優(yōu)缺點。（4）教師指出應(yīng)用transition屬性時需要注意的問題，并給予解答。學(xué)生一起操作，實現(xiàn)教學(xué)做一體化，加強(qiáng)學(xué)生對知識難點的理解。例9-1使用transition的子屬性設(shè)置過渡效果主要代碼：transition-property:background; /*設(shè)置應(yīng)用過渡效果的屬性*/transition-duration:0.5s; /*過渡效果花費的時間*/transition-timing-function:ease-in-out; /*過渡效果*/transition-delay:0s; /*過渡效果的延遲時間*/也可以綜合設(shè)置：transition:background0.5sease-in-out;/*綜合設(shè)置過渡效果，最后一個值為0，可以省略*/例9-2在項目chapter09中新建一個網(wǎng)頁文件，使用transition屬性設(shè)置塊元素的多種過渡效果主要代碼：transition:all1sease-in;/*設(shè)置應(yīng)用過渡效果的是所有屬性，花費的時間為1s，過渡效果是慢速開始、逐漸加快的*/例9-3在項目chapter9中新建一個網(wǎng)頁文件，使用transition屬性設(shè)置圖像的過渡效果。（源碼參考教材）例9-4在項目chapter9中再新建一個網(wǎng)頁文件，使用transition屬性定義圖片遮罩效果。（源碼參考教材）第2學(xué)時（變形屬性）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（5分鐘）在CSS3之前，如果需要為頁面設(shè)置變形效果，需要依賴于圖片、Flash或JavaScript才能完成。CSS3出現(xiàn)后，通過transform屬性就可以實現(xiàn)變形效果。那么，請同學(xué)們討論：使用transform屬性可以實現(xiàn)哪幾種變形效果？（學(xué)生回答，教師對問題進(jìn)行講解）答案：在CSS3中，使用transform屬性可以實現(xiàn)變形效果，主要包括4種變形效果，分別是：平移、縮放、傾斜和旋轉(zhuǎn)。使用translate()方法能夠重新定義元素的坐標(biāo)，實現(xiàn)平移的效果。使用scale()方法用于縮放元素大小。使用skew()方法能夠讓元素傾斜顯示。使用rotate()方法能夠旋轉(zhuǎn)指定的元素對象，主要在二維空間內(nèi)進(jìn)行操作。=2\*ROMANII.重難點內(nèi)容講授：（35分鐘）一、認(rèn)識transform（1）translate(x,y)——平移translate(x,y)函數(shù)用于重新定義元素的坐標(biāo)。例9-5使用translate(x,y)函數(shù)定義平移效果。transform:translate(100px,30px);/*設(shè)置水平向右移動100px，垂直向下移動30px*/學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。（2）scale(x,y)——縮放scale(x,y)函數(shù)用于設(shè)置元素的縮放效果。transform:scale(2,1.2); /*設(shè)置寬度放大2倍，高度放大1.2倍*/transform:scale(0.5); /*寬度和高度均縮小為原來的一半*/（3）skew(x,y)——傾斜skew(x,y)函數(shù)用于設(shè)置元素的傾斜效果。（4）rotate(angle)——旋轉(zhuǎn)rotate(angle)函數(shù)用于設(shè)置元素的旋轉(zhuǎn)效果。例9-7使用rotate(angle)函數(shù)定義旋轉(zhuǎn)效果。transform:rotate(45deg); /*順時針旋轉(zhuǎn)45°*/二、2D轉(zhuǎn)換（1）教師指出使用transform屬性可以實現(xiàn)2D轉(zhuǎn)換，主要包括：平移、縮放、傾斜和旋轉(zhuǎn)。（2）教師分別對translate()方法、scale()方法、skew()方法、rotate()方法的實現(xiàn)效果及基本語法格式進(jìn)行講解，并畫出變形效果示意圖。（3）教師分別對ranslate()方法、scale()方法、skew()方法、rotate()方法進(jìn)行講解，通過案例演示其具體用法和效果，并對比分析其變形效果的異同。（4）教師指出應(yīng)用transform屬性實現(xiàn)平移、縮放、傾斜和旋轉(zhuǎn)時需要注意的問題，并給予解答。（5）學(xué)生一起操作，實現(xiàn)教學(xué)做一體化，加強(qiáng)學(xué)生對知識難點的理解。例9-8在項目chapter9中新建一個網(wǎng)頁文件，使用transition屬性和transform屬性來實現(xiàn)淘寶衣服圖片放大效果。（源碼參考教材）=3\*ROMANIII.課堂小結(jié)：（5分鐘）教師帶領(lǐng)學(xué)生對本課時所學(xué)知識點進(jìn)行回顧，使學(xué)生更熟練地掌握如何使用transition-property、transition-duration、transition-timing-function、transition-delay屬性設(shè)置元素的過渡效果。對本課時所學(xué)知識點進(jìn)行回顧，使學(xué)生更熟練地掌握通過transform屬性實現(xiàn)元素的移動、傾斜、縮放、翻轉(zhuǎn)等變形效果。重點是2D轉(zhuǎn)換。課后作業(yè)1：超星學(xué)習(xí)通平臺作業(yè)課后作業(yè)2：使用學(xué)習(xí)通平臺的教學(xué)視頻自學(xué)任務(wù)10中的任務(wù)實現(xiàn)。第3、4學(xué)時（任務(wù)實現(xiàn)：制作學(xué)院風(fēng)景墻）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.重難點內(nèi)容講授：（85分鐘）【任務(wù)實現(xiàn)】：制作照片墻頁面在項目chapter9中再新建一個網(wǎng)頁文件，利用過渡和變形等屬性實現(xiàn)照片墻效果，文件名為photos.html，在文件中首先添加照片，即搭建頁面結(jié)構(gòu)，然后給每張照片添加不一樣的動畫樣式。一、搭建照片墻頁面結(jié)構(gòu)在頁面中有6張圖片，可以使用無序列表<ul>來定義，每張圖片放入一個列表項<li>中。打開新創(chuàng)建的文件photos.html，添加照片墻頁面結(jié)構(gòu)代碼如下。（學(xué)生一起操作，實現(xiàn)教學(xué)做一體化，加強(qiáng)學(xué)生對知識難點的理解。）此時瀏覽網(wǎng)頁效果，如下圖。二、定義照片墻頁面CSS樣式搭建照片墻頁面結(jié)構(gòu)后，使用CSS內(nèi)部樣式表設(shè)置各元素樣式，將該部分代碼放入<head>和</head>標(biāo)記之間，代碼如下。瀏覽網(wǎng)頁，當(dāng)鼠標(biāo)指針移動到照片上時，呈現(xiàn)相應(yīng)的動畫效果。任務(wù)完成。說明：在操作演示時教師可適時停下來，讓學(xué)生自行嘗試。小組成員之間協(xié)作討論，教師巡視，對疑難問題進(jìn)行解答。=2\*ROMANII.課堂小結(jié)：（5分鐘）照片墻頁面，重點在利用過渡屬性、變形屬性制作過渡、變形等動畫效果，掌握transition屬性、transform屬性的使用方法，是完成本任務(wù)的關(guān)鍵。課后作業(yè)1：超星學(xué)習(xí)通平臺作業(yè)課后作業(yè)2：借助超星學(xué)習(xí)平臺的教學(xué)視頻進(jìn)行線下自學(xué)。分小組討論過程中，培養(yǎng)學(xué)生團(tuán)隊合作，共同探討的協(xié)作意識，培養(yǎng)同學(xué)們良好的溝通能力，為以后進(jìn)入工作崗位打下良好的基礎(chǔ)。過渡屬性的應(yīng)用比較繁瑣有一點難度，引導(dǎo)學(xué)生面對困難和瑣碎的知識點，要更有耐心去學(xué)習(xí)，要有踏實勤奮的鉆研精神。通過案例實現(xiàn)，引導(dǎo)學(xué)生在“學(xué)中做”、“做中學(xué)”，把基礎(chǔ)知識的學(xué)習(xí)和基本技能的掌握有機(jī)地結(jié)合在一起，從具體操作中培養(yǎng)應(yīng)用能力。分組討論培養(yǎng)同學(xué)們的團(tuán)隊協(xié)作意識，良好的溝通能力。對于難度稍高的任務(wù)，學(xué)生在實訓(xùn)過程中一定會碰到困難，鼓勵引導(dǎo)學(xué)生不要氣餒，面對困難更要迎難而上。學(xué)習(xí)的過程并不是照著老師的操作照貓