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

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