CSS濾鏡功能的使用-張昕-教學(xué)設(shè)計(jì)

1、CSS濾鏡功能的使用教學(xué)設(shè)計(jì)信息技術(shù)組 張昕一、教材依據(jù)高等教育出版社出版的Dreamweaver CS3網(wǎng)頁(yè)設(shè)計(jì)與制作第五章HTML與CSS基礎(chǔ)第四節(jié)CSS濾鏡功能的使用。二、設(shè)計(jì)思路1. 指導(dǎo)思想以能力為本位是職業(yè)教育人才培養(yǎng)的指導(dǎo)思想。我校計(jì)算機(jī)專業(yè)教學(xué)一直以就業(yè)為導(dǎo)向，以能力為本位，以崗位需要和職業(yè)標(biāo)準(zhǔn)為依據(jù)，滿足學(xué)生職業(yè)生涯發(fā)展的需求。本課程采用案例式教學(xué)貼近學(xué)生實(shí)際，走近中職計(jì)算機(jī)學(xué)科，能更好地演繹案例教學(xué)任務(wù)驅(qū)動(dòng)的精神。2. 設(shè)計(jì)理念網(wǎng)頁(yè)設(shè)計(jì)與制作是一門理論與實(shí)踐高度融合的計(jì)算機(jī)專業(yè)課，在本課程的教學(xué)設(shè)計(jì)中，我們始終堅(jiān)持以能力培養(yǎng)為核心，淡化理論、強(qiáng)化實(shí)踐，堅(jiān)持以學(xué)會(huì)學(xué)用的原則，

2、注重學(xué)生專業(yè)整合能力和實(shí)際工作中團(tuán)隊(duì)協(xié)作技能的培養(yǎng)。3. 教材地位及作用本課程選用高等教育出版社出版的Dreamweaver CS3網(wǎng)頁(yè)設(shè)計(jì)與制作，旨在以案例講解的過(guò)程中貫穿介紹網(wǎng)頁(yè)制作軟件Dreamweaver CS3的使用方法。本節(jié)課主要講授如何在網(wǎng)頁(yè)完成CSS濾鏡的插入與使用以此來(lái)美化網(wǎng)頁(yè)的方法。本節(jié)課的學(xué)習(xí)使學(xué)生完成從“我會(huì)做”“做得好”的能力的提升，為后續(xù)整站的修飾美化打下良好的基礎(chǔ)，由此課程中得到的經(jīng)驗(yàn)更與其他計(jì)算機(jī)專業(yè)課結(jié)合，進(jìn)一步強(qiáng)化計(jì)算機(jī)專業(yè)各門課程的整合。4. 學(xué)情分析本課程面對(duì)的是計(jì)算機(jī)專業(yè)二年級(jí)學(xué)生，學(xué)生有了初步的審美能力和圖像處理軟件的應(yīng)用能力，渴望學(xué)習(xí)新的知識(shí)。更由

3、于是中職學(xué)生有在其年齡心理特點(diǎn)的特殊性，他們希望得到鼓勵(lì)，收獲成功；但由于本章節(jié)主要以代碼設(shè)計(jì)為主，學(xué)生容易感到枯燥、容易局限于只把課本案例按步驟完成，怠于更多的思考，同時(shí)也由于美術(shù)專業(yè)課程的不足，在完成作品時(shí)的美觀程度上還有待于提高。三、教學(xué)目標(biāo)1.知識(shí)與能力目標(biāo)a) CSS濾鏡的概念b) 建立CSS濾鏡（向?qū)Х绞剑ヽ) 使用代碼方式建立CSS濾鏡濾鏡的語(yǔ)法d) 在網(wǎng)頁(yè)中使用CSS濾鏡的設(shè)計(jì)完成圖片的美化；e) 培養(yǎng)學(xué)生對(duì)圖文混排作品的評(píng)價(jià)能力、實(shí)踐操作能力；f) 培養(yǎng)學(xué)生在練習(xí)中的分工合作能力、組織能力、統(tǒng)籌工作能力。2.方法與途徑遵循“學(xué)生是課堂的主體、教師是主導(dǎo)”的教學(xué)思想，教師引導(dǎo)教

4、學(xué)步驟，以案例教學(xué)法、啟發(fā)式教學(xué)、演示教學(xué)法為主要教學(xué)方法，讓學(xué)生在任務(wù)分解的各個(gè)環(huán)節(jié)中創(chuàng)設(shè)環(huán)境、啟發(fā)思維、自主學(xué)習(xí)、自我評(píng)價(jià)、注重總結(jié)、提高實(shí)踐的能力。l 自主探究法：知識(shí)點(diǎn)的各個(gè)環(huán)節(jié)是呈上升式環(huán)環(huán)相扣，一步步展開的，讓學(xué)生在老師的引導(dǎo)下，在實(shí)踐過(guò)程中，自主學(xué)習(xí)、探究、理解、并進(jìn)一步提出疑問(wèn)，讓整個(gè)過(guò)程中學(xué)生是自主自動(dòng)積極參與的狀態(tài)。l 實(shí)踐練習(xí)法：多練多思，反復(fù)實(shí)踐。l 分組討論法：小組結(jié)合、協(xié)同合作、共同分析、完成任務(wù)。l 自我評(píng)價(jià)：自評(píng)發(fā)現(xiàn)問(wèn)題、查缺補(bǔ)漏?；ピu(píng)相互學(xué)習(xí)、參考借鑒、共同提高。3.情感與評(píng)價(jià)目標(biāo)通過(guò)師生的相互交流和團(tuán)隊(duì)的協(xié)作學(xué)習(xí)，培養(yǎng)學(xué)生養(yǎng)成嚴(yán)謹(jǐn)?shù)膶W(xué)習(xí)態(tài)度和團(tuán)結(jié)協(xié)作的精神，

5、體驗(yàn)探究問(wèn)題和學(xué)習(xí)的樂(lè)趣，并通過(guò)自評(píng)與互評(píng)，相互學(xué)習(xí)，共同提高。4.現(xiàn)代教學(xué)手段本節(jié)課在多媒體機(jī)房上課，全程使用多媒體教學(xué)課件和DW CS3軟件貫穿教學(xué)活動(dòng)，最終通過(guò)多媒體教學(xué)控制軟件分發(fā)作業(yè)，提交作業(yè)。四、教學(xué)重點(diǎn)教學(xué)重點(diǎn)是CSS濾鏡的概念，這也是本節(jié)課的基礎(chǔ)。圍繞這個(gè)重點(diǎn)，以CSS濾鏡的建立和編輯進(jìn)行展開，將重點(diǎn)化解在演示、實(shí)踐操作、體會(huì)、分析、評(píng)價(jià)的各個(gè)環(huán)節(jié)中。五、教學(xué)難點(diǎn)教學(xué)難點(diǎn)是CSS濾鏡的語(yǔ)法。在任務(wù)引領(lǐng)環(huán)節(jié)中，以啟發(fā)思維，討論分析、具體體驗(yàn)為主體，在講練結(jié)合中，使學(xué)生將理性認(rèn)識(shí)轉(zhuǎn)化為感性認(rèn)識(shí)，進(jìn)而再進(jìn)化為更高層次的領(lǐng)會(huì)貫通。六、教學(xué)準(zhǔn)備多媒體機(jī)房教師機(jī)1臺(tái)，學(xué)生機(jī)40臺(tái)，多媒體機(jī)

6、房控制軟件，教師演示范例、所需網(wǎng)頁(yè)素材、多媒體教學(xué)課件，學(xué)生4人1組分組。七、教學(xué)過(guò)程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容與過(guò)程師生活動(dòng)教法學(xué)法設(shè)計(jì)意圖導(dǎo)入新課（5分鐘） CSS樣式菜單能做什么？ 比對(duì)左右兩幅效果圖，有什么區(qū)別？ 大家在做網(wǎng)頁(yè)時(shí)，對(duì)圖像處理多數(shù)都是用Photoshop等圖形處理軟件，其實(shí)在CSS中自帶了許多濾鏡，合理應(yīng)用這些濾鏡同樣可以做出以上軟件所做出的效果。教師提出案例，學(xué)生思考、討論回答案例教學(xué)法、任務(wù)驅(qū)動(dòng)法通過(guò)實(shí)例，引發(fā)中職學(xué)生實(shí)踐興趣。教學(xué)環(huán)節(jié)教學(xué)內(nèi)容與過(guò)程師生活動(dòng)教法學(xué)法設(shè)計(jì)意圖教學(xué)知識(shí)目標(biāo)（40分鐘）提出任務(wù)【案例教學(xué)法任務(wù)驅(qū)動(dòng)】如果讓你完成這幅網(wǎng)頁(yè)的效果圖，你可以采用哪些方式來(lái)做

7、？一、認(rèn)識(shí)CSS濾鏡濾鏡(filter)屬性是CSS的一個(gè)擴(kuò)展部分，它能夠渲染對(duì)象元素，創(chuàng)建出藝術(shù)效果。Dreamweaver的CSS樣式提供了豐富的濾鏡效果，使用這些濾鏡能夠創(chuàng)建出文本和圖像的3D、陰影和淡入淡出等效果，應(yīng)用在頁(yè)面中，在一定程度上美化了頁(yè)面。小游戲：找不同拿出兩個(gè)網(wǎng)頁(yè)，一張是PS處理的圖像，一張是CSS濾鏡處理的圖像，讓學(xué)生比對(duì)瀏覽器顯示的效果，之后打開網(wǎng)頁(yè)的IMAGES文件，讓學(xué)生從圖像的源文件發(fā)現(xiàn)不同。CSS濾鏡只是加效果不改動(dòng)原圖。教師提出任務(wù)學(xué)生思考動(dòng)手實(shí)踐教師講解學(xué)生討論思考分析案例教學(xué)法、自主探究法、實(shí)踐練習(xí)法、分組討論法概念性的知識(shí)引入游戲加深學(xué)生印象引發(fā)學(xué)生興

8、趣教學(xué)環(huán)節(jié)教學(xué)內(nèi)容與過(guò)程師生活動(dòng)教法學(xué)法設(shè)計(jì)意圖教學(xué)知識(shí)目標(biāo)（40分鐘）二、濾鏡的分類【課件講授】在Dreamweaver CS3中，濾鏡分為有參濾鏡和無(wú)參濾鏡兩種。在CSS“擴(kuò)展”屬性對(duì)話框中，單擊過(guò)濾器下拉按鈕，就可以看到所有濾鏡，如下圖所示。Alpha設(shè)置透明層次.blur創(chuàng)建高速度移動(dòng)效果，即模糊效果.Chroma制作專用顏色透明DropShadow創(chuàng)建對(duì)象的固定影子FlipH創(chuàng)建水平鏡像圖片F(xiàn)lipV創(chuàng)建垂直鏡像圖片glow加光輝在附近對(duì)象的邊外.gray把圖片灰度化.light創(chuàng)建光源在對(duì)象上.mask創(chuàng)建透明掩膜在對(duì)象上.wave波紋效果Xray使對(duì)象變的像被x光照射一樣.inv

9、ert反色shadow創(chuàng)建偏移固定影子.【學(xué)生活動(dòng)】觀看有參濾鏡和無(wú)參濾鏡的效果圖，討論分析獲得直觀認(rèn)識(shí)。教師演示講解學(xué)生觀察得出直觀認(rèn)識(shí)，演示法自主探究法、觀察法以課件的直觀展示引發(fā)學(xué)生學(xué)習(xí)興趣教學(xué)環(huán)節(jié)教學(xué)內(nèi)容與過(guò)程師生活動(dòng)教法學(xué)法設(shè)計(jì)意圖教學(xué)知識(shí)目標(biāo)（40分鐘）三、濾鏡的語(yǔ)法【難點(diǎn)講解】濾鏡的使用和其它CSS樣式的定義方法相似，分為外部引用、內(nèi)部引用和局部引用三種，語(yǔ)法格式為：filter: filtername(parameters)其中filter是濾鏡屬性標(biāo)識(shí)符，filtername是濾鏡屬性名稱，parameters是濾鏡屬性自帶的若干參數(shù)。例如：四、濾鏡的創(chuàng)建【以Alpha濾鏡為

10、例】【前期準(zhǔn)備】利用已有素材在DWCS3中建立站點(diǎn)，打開文件“濾鏡實(shí)例index.html”1、向?qū)Х绞健窘處熝菔尽窟x中圖像文件 “images/Photo1.jpg”在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕在彈出的“新建CSS規(guī)則”對(duì)話框中，在名稱編輯框中輸入“.lvjing”,選擇器類型為類（可應(yīng)用于任何標(biāo)簽），定義在“Template018.css（默認(rèn)）”，然后單擊“確定”。在彈出的對(duì)話框中，選擇“分類”中的“擴(kuò)展”，其對(duì)應(yīng)“過(guò)濾器”下拉列表框中選擇“Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,Finish

11、X=?,FinishY=?)”。編輯參數(shù)，更改為“Alpha(Opacity=100,FinishOpacity=0,Style=2)”，單擊“確定”后完成“.lvjing”的樣式定義。選中圖像文件 “images/Photo1.jpg”在“屬性”面板中，在“類”下拉列表框中選擇“.lvjing”。完成后保存預(yù)覽。【學(xué)生活動(dòng)】1.按步驟完成練習(xí)。2.學(xué)生觀看代碼提出疑問(wèn)，為什么圖片代碼部分上沒(méi)有顯示用到的CSS濾鏡的語(yǔ)法？ 3.如果參照濾鏡語(yǔ)法完成濾鏡的設(shè)置，代碼部分有何不同？【回顧難點(diǎn)】教師演示示范，學(xué)生觀察分析討論教師演示示范，學(xué)生分組觀察思考分析討論演示法、觀察法案例教學(xué)法演示法、觀察法

12、案例教學(xué)法通過(guò)直觀演示讓學(xué)生認(rèn)識(shí)理解，為案例打下基礎(chǔ)。案例教學(xué)復(fù)習(xí)前學(xué)，鞏固本節(jié)課知識(shí)要點(diǎn)，啟發(fā)學(xué)生思維，以學(xué)生的自主探究引出新的問(wèn)題，得到更多的思考與應(yīng)用。教學(xué)環(huán)節(jié)教學(xué)內(nèi)容與過(guò)程師生活動(dòng)教法學(xué)法設(shè)計(jì)意圖教學(xué)知識(shí)目標(biāo)（40分鐘）2. 使用代碼來(lái)添加【難點(diǎn)強(qiáng)化】方法：選中圖片切換到代碼視圖然后修改代碼為：參數(shù)名稱功能參數(shù)值Opacity圖片不透明程度，單位為百分比0100，0為透明，100為不透明FinishOpacity與Opacity同時(shí)使用時(shí)，可以制作出透明漸進(jìn)的效果0100，0為透明，100為不透明Style制定上面設(shè)置的透明漸進(jìn)顯示形狀0：沒(méi)有漸進(jìn)；1：直線漸進(jìn)；2：圓形漸進(jìn)；3：矩形

13、輻射StartX漸進(jìn)開始的X坐標(biāo)值StartY漸進(jìn)開始的Y坐標(biāo)值FinishX漸進(jìn)結(jié)束的X坐標(biāo)值FinishY漸進(jìn)結(jié)束的Y坐標(biāo)值預(yù)覽后觀察結(jié)果?！緦W(xué)生實(shí)踐】1.完成第二張圖片的濾鏡設(shè)置。2.比對(duì)第二次濾鏡設(shè)置后的代碼，和第一次有何不同？【分組討論】【師生探究】使用樣式面板完成濾鏡的添加，主要用到了“類”的方式，適合于多個(gè)圖片用同一種濾鏡效果，具有批量性。第二種方式在制作時(shí)需要對(duì)代碼部分非常熟悉，適合不同圖片選用不同濾鏡的方式完成。不管采用哪種方式完成CSS濾鏡，實(shí)際的原圖都沒(méi)有經(jīng)過(guò)任何的改變，只是通過(guò)設(shè)置在IE瀏覽器中給我們了不同的視覺(jué)印象?！局攸c(diǎn)回顧】教師演示、講解、學(xué)生觀察思考分組討論自主

14、實(shí)踐探究任務(wù)驅(qū)動(dòng)、演示、觀察、自主探究、分組討論以案例教學(xué)為主線，在邊講邊練中將代碼問(wèn)題通過(guò)學(xué)生的觀察設(shè)問(wèn)引出，激發(fā)學(xué)生興趣同時(shí)，以師生的分析討論獲得知識(shí)的傳承教學(xué)環(huán)節(jié)教學(xué)內(nèi)容與過(guò)程師生活動(dòng)教法學(xué)法設(shè)計(jì)意圖教學(xué)知識(shí)目標(biāo)（40分鐘）五、濾鏡的編輯【分組練習(xí)】1. 在CSS面板中雙擊創(chuàng)建的樣式文件，在對(duì)話框中進(jìn)行修改2. 在代碼視圖中，對(duì)濾鏡語(yǔ)句進(jìn)行修改六、上機(jī)作業(yè)【分組練習(xí)】1. 完善實(shí)例中的圖片CSS濾鏡美化效果。2. 根據(jù)課本P118所提供的其它濾鏡參數(shù)和教學(xué)課件，小組結(jié)合創(chuàng)建一個(gè)產(chǎn)品說(shuō)明頁(yè)面，給所有產(chǎn)品圖片選用不同的濾鏡，展示效果，自我評(píng)價(jià)、相互評(píng)價(jià)。七、教學(xué)小結(jié)通過(guò)運(yùn)用CSS濾鏡，我們?cè)?/p>

15、制作網(wǎng)頁(yè)中省略了運(yùn)用其它軟件處理圖片的步驟，而且CSS濾鏡對(duì)原圖片沒(méi)有絲毫的影響，我們一旦不需要這種圖片效果，刪除相應(yīng)的CSS樣式文件或語(yǔ)句代碼即可，而如何結(jié)合網(wǎng)頁(yè)的主題含義選擇和修飾我們的素材是我們網(wǎng)頁(yè)設(shè)計(jì)自始至終的要求。八、思維拓展 CSS濾鏡除了能對(duì)圖片進(jìn)行修改之外還能應(yīng)用于網(wǎng)頁(yè)中哪些元素？【補(bǔ)充閱讀】CSS濾鏡屬性只能用在HTML控件元素上。所謂的HTML控件元素就是它們?cè)陧?yè)面上定義了一個(gè)矩形空間，瀏覽器窗口可以顯示這些空間。HTML控件元素包括、和。學(xué)生分組練習(xí)教師巡回指導(dǎo)分組討論法、評(píng)價(jià)法養(yǎng)成學(xué)生團(tuán)隊(duì)協(xié)作意識(shí)，培養(yǎng)學(xué)生分工合作能力八、教學(xué)反思本節(jié)課內(nèi)容比較簡(jiǎn)單，按照書上的步驟，所有學(xué)生能夠完成C