網(wǎng)頁(yè)中的圖像信息加工

1、網(wǎng)頁(yè)中的圖像信息加工一、設(shè)計(jì)背景1.模塊：初中信息技術(shù)下冊(cè)第11單元2.年級(jí)：八年級(jí)3.學(xué)時(shí)數(shù)：3二、教材分析信息技術(shù)必修模塊是按照信息獲取、信息加工、信息集成和交流的主線來安排的。在教學(xué)實(shí)踐中，我們要求學(xué)生圍繞研究性學(xué)習(xí)的課題，體驗(yàn)信息獲取、加工、集成和交流的整個(gè)過程。在“信息獲取”單元中，學(xué)生已經(jīng)收集好與課題相關(guān)的所有信息（如文字、圖片、音視頻等）。而在下一個(gè)“信息集成和交流”單元，我們將要求學(xué)生完成課題匯報(bào)網(wǎng)站的制作。因此，在信息加工階段的圖像加工部分，教學(xué)目標(biāo)就集中在網(wǎng)頁(yè)圖片的設(shè)計(jì)制作上，起到一個(gè)承前啟后的作用。三、學(xué)生情況分析在信息獲取單元，學(xué)生已經(jīng)根據(jù)自選的主題收集好了網(wǎng)站素材。通

2、過本單元第一節(jié)網(wǎng)站規(guī)劃的學(xué)習(xí)后，學(xué)生完成了“個(gè)人網(wǎng)站規(guī)劃表”，明確了本單元的學(xué)習(xí)目標(biāo)就是建設(shè)一個(gè)主題網(wǎng)站。學(xué)習(xí)第二節(jié)制作網(wǎng)站時(shí)，教師就引導(dǎo)學(xué)生對(duì)收集的圖片素材進(jìn)行加工，打造有個(gè)性特色的網(wǎng)站圖片，學(xué)生的學(xué)習(xí)積極性是相當(dāng)高的。八年級(jí)學(xué)生對(duì)畫圖軟件很熟悉，對(duì)office中的剪貼畫也是耳熟能詳，對(duì)圖片的分類和特點(diǎn)也有一定的知識(shí)基礎(chǔ)。而ACDSee作為一款常用的看圖軟件，也早已為學(xué)生所熟練掌握。通過入學(xué)時(shí)的學(xué)生調(diào)查，我們也發(fā)現(xiàn)學(xué)生對(duì)hotoShop、Flash等平面設(shè)計(jì)軟件具有濃厚的興趣。我校學(xué)生的學(xué)習(xí)通過學(xué)習(xí)網(wǎng)站進(jìn)行。網(wǎng)站上有相關(guān)的軟件使用教程、操作動(dòng)畫演示。除了學(xué)習(xí)網(wǎng)站，大部分同學(xué)還可以跟隨老師的同

3、步講解和示范進(jìn)行學(xué)習(xí)。學(xué)習(xí)進(jìn)度較快或較慢的學(xué)生，可以借助網(wǎng)站進(jìn)行自主學(xué)習(xí)。四、教學(xué)目標(biāo)知識(shí)與技能：1.了解圖形圖像的兩種基本類型，并能列舉兩類圖片的特點(diǎn)、常見類型和常用編輯軟件； 2.初步了解網(wǎng)頁(yè)圖片的色彩、構(gòu)圖等基本原則；3.學(xué)會(huì)使用圖片編輯軟件對(duì)圖片進(jìn)行旋轉(zhuǎn)、縮放、裁切、格式轉(zhuǎn)換等簡(jiǎn)單加工。過程與方法：1.能夠結(jié)合自身的興趣、愛好和特長(zhǎng)，搜索、選擇適應(yīng)主題表達(dá)需求的圖片素材；2.學(xué)會(huì)應(yīng)用簡(jiǎn)單的網(wǎng)頁(yè)圖片設(shè)計(jì)原則，對(duì)圖片素材進(jìn)行加工處理；3.能夠根據(jù)表達(dá)的主題，合理應(yīng)用所學(xué)的技術(shù)，設(shè)計(jì)個(gè)性化的網(wǎng)頁(yè)圖片。情感態(tài)度與價(jià)值觀：1.學(xué)會(huì)欣賞和評(píng)價(jià)優(yōu)秀的網(wǎng)頁(yè)圖片作品，由此激發(fā)創(chuàng)作欲望和學(xué)習(xí)興趣；2.通過

4、自行設(shè)計(jì)網(wǎng)頁(yè)圖片，體驗(yàn)創(chuàng)造的樂趣和成功的喜悅。五、教學(xué)重點(diǎn)、難點(diǎn)重點(diǎn)：1掌握常用的圖片加工方法；2體驗(yàn)圖片設(shè)計(jì)的基本過程。難點(diǎn)：1.根據(jù)主題需要，合理選擇圖片及加工方式；2在圖片設(shè)計(jì)中體現(xiàn)一定的創(chuàng)新性、觀賞性和藝術(shù)性。六、教學(xué)策略網(wǎng)頁(yè)中的圖片主要有Logo、Banner、歡迎頁(yè)圖片等。每個(gè)課時(shí)分別完成一張圖片的設(shè)計(jì)制作。第一課時(shí)，從簡(jiǎn)單模仿開始。以百度網(wǎng)站的Logo圖片為例，主要講解圖形、文字工具的簡(jiǎn)單使用。學(xué)生只要選擇不同的圖形和文字，就能初步設(shè)計(jì)出自己的網(wǎng)站Logo。第二課時(shí)，鞏固已有技能，嘗試獨(dú)立操作。學(xué)生自行選擇圖片素材，進(jìn)行裁切、縮放，添加文字和特效。教師提供了其他加工技巧供學(xué)生選用

5、。第三課時(shí)，感受設(shè)計(jì)的樂趣。簡(jiǎn)單介紹構(gòu)圖原則和圖像合成技巧，給學(xué)生留有更多的創(chuàng)作空間和時(shí)間，親歷平面設(shè)計(jì)的過程，品嘗創(chuàng)造的喜悅。七、教學(xué)過程第二課時(shí) “網(wǎng)站橫幅（Banner）設(shè)計(jì)”一、引入教師：上節(jié)課，我們學(xué)習(xí)了圖形圖像的基本知識(shí)，初步學(xué)會(huì)了使用PhotoShop設(shè)計(jì)網(wǎng)站Logo圖片的方法。我們先來欣賞一下同學(xué)們的作品，大家可以發(fā)表一些評(píng)論和建議。（教師展示一些優(yōu)秀作品）。學(xué)生交流評(píng)價(jià)，教師參與。教師：那么Logo圖片在網(wǎng)頁(yè)中一般放在哪些位置呢？下面，我們來看幾個(gè)網(wǎng)站實(shí)例，請(qǐng)同學(xué)們仔細(xì)觀察Logo圖片的大小和位置。學(xué)生：Logo圖片一般放在網(wǎng)頁(yè)左上角或網(wǎng)頁(yè)頂部中央，經(jīng)常跟導(dǎo)航欄放在一起。圖片

6、大小與導(dǎo)航欄的高度或橫幅的高度有關(guān)。教師：網(wǎng)頁(yè)上除了Logo圖片外，比較醒目還有橫幅，一般稱為Banner。今天，我們就要著手來設(shè)計(jì)自己的網(wǎng)站橫幅了。二、欣賞與構(gòu)思教師：仔細(xì)觀察以上兩個(gè)網(wǎng)站的橫幅，大家認(rèn)為橫幅的作用有哪些呢？學(xué)生：我認(rèn)為橫幅圖片和Logo圖片一樣，能夠代表網(wǎng)站的形象。學(xué)生：很多橫幅上都是些廣告。教師：你們說得很對(duì)，橫幅能夠代表網(wǎng)站的形象，而且經(jīng)常有廣告，由于要吸引瀏覽者的眼球，它就必須設(shè)計(jì)得色彩和諧、文字醒目。下面，請(qǐng)大家欣賞兩個(gè)優(yōu)秀作品，我們討論一下它們的特色。學(xué)生：第一幅圖片以綠色為主，感覺色彩和諧統(tǒng)一，意境深遠(yuǎn)。文字配以白色背景，大小錯(cuò)落有致。學(xué)生：第二幅圖片以藍(lán)色為主

7、，兩幅傾斜的風(fēng)景圖片特別醒目，給畫面帶來了靈動(dòng)的感覺。文字的字體優(yōu)美，色彩過渡和諧清新。右邊的小圖案更使圖片富于變化。教師：大家還能在本地機(jī)上“圖片收藏”中找到很多Banner的例子，從中或許可以得到些啟發(fā)，設(shè)計(jì)出各自的網(wǎng)站橫幅。（請(qǐng)注意查看這些橫幅的寬度和高度，大致確定自己的橫幅寬度和高度。）三、橫幅的設(shè)計(jì)原則教師：看了這么多例子，我們可以總結(jié)出一些橫幅設(shè)計(jì)的原則。例如，如果橫幅的底色較深，那么文字的顏色就要淺些；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容。請(qǐng)大家打開本地計(jì)算機(jī)上的“我的文檔-My ebooks”文件夾，運(yùn)行名為Banner的電子書，學(xué)習(xí)其中的設(shè)計(jì)技巧。學(xué)

8、生瀏覽教學(xué)資源。教師：大家從這本電子書中學(xué)到了哪些技巧呢？師生共同歸納：原則有三條：1.選擇合適的字體，文字旁邊要保留足夠的空間，使它們更醒目。2.如有特別需要引起注意的內(nèi)容，一定要放在畫面的突出位置（如左邊）。3.文字內(nèi)容最好簡(jiǎn)潔而富有樂趣，引起瀏覽者的興趣。教師：橫幅中的文字是體現(xiàn)網(wǎng)站形象的重要元素。這就是網(wǎng)站的宣傳標(biāo)語(yǔ)，也可以說是網(wǎng)站的精神，網(wǎng)站的目標(biāo)。用一句話甚至一個(gè)詞來高度概括。類似實(shí)際生活中的廣告金句。例如：雀巢的“味道好極了”； Intel的“給你一個(gè)奔騰的心”。大家有沒有想好你們的網(wǎng)站宣傳語(yǔ)呢？學(xué)生：環(huán)保標(biāo)語(yǔ)：“保護(hù)環(huán)境，從身邊做起”學(xué)生：2008奧運(yùn)會(huì)：“同一個(gè)世界，同一個(gè)夢(mèng)

9、想”學(xué)生：四、制作與交流教師：下面，老師將使用PHOTOSHOP和大家一起設(shè)計(jì)網(wǎng)站的橫幅Banner圖片。在我開始操作前，我先等兩分鐘。請(qǐng)大家從自己搜集的素材圖片中挑選一張，作為橫幅圖片的原始素材，再用PhotoShop打開。學(xué)生挑選圖片并打開教師：我以下面的Banner為例，講解制作過程。教師演示操作過程，學(xué)生邊觀察邊設(shè)計(jì)自己的圖片：1.裁切圖片：打開原始圖片，使用矩形選擇工具選取相應(yīng)部分，注意縱橫比例，執(zhí)行【圖像-裁切】。 2.改變圖像大?。喝缬行枰梢詧?zhí)行【圖像-圖像大小】，改變圖像的寬度和高度。（啟發(fā)學(xué)生：橫幅的寬度應(yīng)該等于網(wǎng)頁(yè)的寬度，在760-950像素左右，如果要和Logo并排放，

10、則應(yīng)減去Logo的寬度）3.文字工具：添加綠色文字，右擊該文字圖層，設(shè)置“混合選項(xiàng)”，效果“描邊”；在遠(yuǎn)離綠色文字的地方添加突出文字，設(shè)置“混合選項(xiàng)”，效果“投影、內(nèi)陰影、外發(fā)光”，再移動(dòng)到合適的位置（啟發(fā)學(xué)生：在“混合選項(xiàng)”中有許多效果，可以多試幾次，選擇滿意的效果。另外，要注意選擇相應(yīng)的文字圖層調(diào)整文字的位置）。4.保存文件：執(zhí)行【文件-存儲(chǔ)為web所用格式】命令，將圖片存儲(chǔ)成gif或jpeg等文件格式。教師：如果有同學(xué)對(duì)橫幅二和教材范例中的技術(shù)感興趣，可以參考學(xué)習(xí)網(wǎng)頁(yè)上“拓展資源”，完成相應(yīng)操作：1.畫筆工具（星星的畫法）：可以使用畫筆工具，選擇相應(yīng)的畫筆形狀，在背景圖層上繪制（提醒學(xué)生

11、注意切換到背景圖層）。2.圖片疊加：使用PhotoShop打開需疊加的圖片文件，先改變圖像大小，再【全選】、【拷貝】、【粘貼】到當(dāng)前文件中，執(zhí)行【編輯-變換-旋轉(zhuǎn)】。3.繪制直線：使用“單行（列）選框”工具繪制線條，執(zhí)行【編輯-填充】，改變線條顏色。4.繪制橢圓：使用“橢圓選框工具”，制作選區(qū)，執(zhí)行“編輯/描邊”，寬度1像素，選擇顏色填充。5.使用濾鏡：執(zhí)行【濾鏡】中的相應(yīng)效果，修改其中的選項(xiàng)，達(dá)到自己想要的畫面效果。 學(xué)生自行設(shè)計(jì)網(wǎng)站橫幅圖片，上傳到服務(wù)器上互相交流。教學(xué)反思成功之處：1.先從網(wǎng)頁(yè)中觀察Logo和Banner，讓學(xué)生了解兩種圖片在網(wǎng)頁(yè)中的作用，從而引入主題。學(xué)生觀察圖片的大小也在為后續(xù)的設(shè)計(jì)做準(zhǔn)備。2.通過作品欣賞激發(fā)學(xué)生靈感，同時(shí)總結(jié)設(shè)計(jì)原則，再通過學(xué)習(xí)電子書加深印象。3.教師制作的Banner比較簡(jiǎn)單，目的使初嘗設(shè)