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

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

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

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

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

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

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

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

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

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

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

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