網(wǎng)頁橫幅廣告的制作教學(xué)設(shè)計(jì)

1、網(wǎng)頁橫幅廣告的制作科任：謝志濱一、教材與學(xué)情1【教材分析】本課是選自高等教育出版社photoshop cs4 網(wǎng)頁設(shè)計(jì)第四章第 5 節(jié)。 始終貫穿的一個(gè)理念就是“練中學(xué)，練中教”，本堂課也是基于此理念設(shè)計(jì)的。 本節(jié)以制作網(wǎng)頁的橫幅廣告為例安排主題任務(wù)活動(dòng)，要求學(xué)生綜合運(yùn)用 photoshop 的基本知識(shí)和技能，主動(dòng)探索完成橫幅廣告的制作。本節(jié)共 3 課時(shí)，這堂課是第 三課時(shí)，前面初步學(xué)習(xí)了文字工具、漸變色填充工具及摳圖的操作方法,簡單 logo 的制作；本堂課利用制作橫幅廣告的過程中，進(jìn)一步深入學(xué)習(xí)插入立體字、橫幅 廣告制作的要點(diǎn)的操作方法；提升學(xué)生對(duì)這些知識(shí)點(diǎn)的運(yùn)用能力。2【學(xué)情分析】教學(xué)對(duì)

2、象是 13 級(jí)計(jì)算機(jī)的學(xué)生，他們在本學(xué)期中已經(jīng)學(xué)習(xí)過了網(wǎng)頁制作的知 識(shí)以及 photoshop 的一些相關(guān)知識(shí)點(diǎn)。他們對(duì)動(dòng)手操作方面比較感興趣，而且對(duì)利 用 photoshop 制作網(wǎng)頁比較感興趣，學(xué)習(xí)網(wǎng)頁廣告的制作是對(duì)他們綜合運(yùn)用能力的 考察。因此，我通過小組合作與自主探究的方法來考察他們對(duì)之前知識(shí)點(diǎn)的掌握 情況，也培養(yǎng)他們團(tuán)隊(duì)合作的精神。3【教材處理】我對(duì)教材內(nèi)容進(jìn)行了一些處理，設(shè)計(jì)了幾個(gè)網(wǎng)頁中使用到橫幅廣告的展示， 激發(fā)學(xué)生的學(xué)習(xí)熱情，然后提出本堂課的學(xué)習(xí)任務(wù)，讓學(xué)生們能夠有效的利用 ps 軟件操作技能進(jìn)行設(shè)計(jì)。教學(xué)任務(wù)由淺入深，在教學(xué)中做到教、學(xué)、練、情四合 一，讓學(xué)生練有所思，學(xué)有所

3、悟。二、教學(xué)大綱1【教學(xué)目標(biāo)】知識(shí)與技能：1、 掌握立體字的制作方法，能夠使用多個(gè)圖層的方法制作出立體字。2、 理解魔術(shù)棒工具的作用，掌握摳圖的方法。3、 能運(yùn)用 ps 的相關(guān)知識(shí)獨(dú)立設(shè)計(jì)美觀大方的版面。1 / 4情感態(tài)度與價(jià)值觀：1養(yǎng)成勇于探究、團(tuán)結(jié)合作的習(xí)慣。2、 鍛煉學(xué)生的動(dòng)手操作能力和獨(dú)立思考問題的習(xí)慣。3、 培養(yǎng)學(xué)生發(fā)現(xiàn)美、感受美的藝術(shù)能力。2【教學(xué)重點(diǎn)與難點(diǎn)】重點(diǎn)：（1）制作橫幅廣告的注意要點(diǎn)（2） 魔術(shù)棒工具的使用,漸變工具的使用。（3） 立體字的制作。難點(diǎn)：（1）多個(gè)圖層制作出立體字。（2）運(yùn)用 ps 的相關(guān)知識(shí)獨(dú)立設(shè)計(jì)美觀大方的橫幅。3【課時(shí)】:1 課時(shí)三教法學(xué)法1【教法】:

4、通過觀察、提問、討論、上機(jī)探索、小組共學(xué)互教，掌握頁面設(shè)置、報(bào)頭制作、正文編輯的方法。在課堂導(dǎo)入環(huán)節(jié)，我采用情景教學(xué)法，課堂核心環(huán)節(jié)上，以任務(wù)驅(qū)動(dòng)法為 主，實(shí)現(xiàn)新舊課程的結(jié)合應(yīng)用，重在學(xué)以致用。并通過講解示范、自主探究、計(jì) 論交流等手段，突出重點(diǎn)，突破難點(diǎn)。2【學(xué)法】:自主探究法、分析協(xié)作法、總結(jié)歸納法四教學(xué)過程1【課前準(zhǔn)備】（1）學(xué)生分組課前給學(xué)生分好組，每組 5 人、共 5 組，每組安排一名平時(shí)動(dòng)手能力較 強(qiáng)、做得較快的學(xué)生當(dāng)小組長，在自主學(xué)習(xí)的過程當(dāng)中，在自己完成的前提下輔 助其他組員完成學(xué)習(xí)任務(wù)。設(shè)計(jì)意圖：期望以優(yōu)帶差，優(yōu)劣互補(bǔ)，團(tuán)結(jié)協(xié)作，互相激勵(lì)，共同進(jìn)步。 （2）材料分發(fā)課前幾分鐘

5、把本堂課的學(xué)習(xí)材料分發(fā)到每臺(tái)學(xué)生機(jī)的桌面上。設(shè)計(jì)意圖：便于學(xué)生課上進(jìn)行探究式學(xué)習(xí)。2【課堂環(huán)節(jié)】（1）創(chuàng)設(shè)情景，導(dǎo)入新課 1、橫幅廣告頁面欣賞2 / 4先讓學(xué)生們欣賞課本中介紹制作好的橫幅廣告頁面樣例，頭腦中有個(gè)橫幅廣告 的概念與框架。2、啟發(fā)學(xué)生回憶舊知通過欣賞橫幅廣告頁面，讓學(xué)生回憶之前學(xué)過的知識(shí)點(diǎn)，對(duì)橫幅廣告頁面有 個(gè)新的認(rèn)識(shí)。（2）講解知識(shí)，分析制作要點(diǎn)1.橫幅廣告簡介橫幅廣告，英文叫 banner,一個(gè)表現(xiàn)商家的廣告內(nèi)容，放置在網(wǎng)頁的頁面上，是互 聯(lián)網(wǎng)廣告中最基本的廣告形式，格式主要有 flash 動(dòng)畫和圖片。2橫幅廣告尺寸a、橫幅: 468*60 728*90 950*90 760

6、*90 760*60250*60 234*60 120*60 950*250 950*410b、 豎幅: 160*600 120*600 120*240c、 方幅: 336*280 300*250 250*300250*250 200*200 180*2503.制作橫幅廣告制作要點(diǎn)a、顧及網(wǎng)站內(nèi)容的定位因?yàn)榘瑑?nèi)容不同，門戶網(wǎng)站各個(gè)頻道有著不同的風(fēng)格，所以設(shè)計(jì)師們做設(shè)計(jì) 的時(shí)候也要考慮到如體育頻道的運(yùn)動(dòng)感，財(cái)經(jīng)頻道的國際和高端等。b、順應(yīng)用戶的瀏覽習(xí)慣我們知道大多數(shù)的用戶在瀏覽網(wǎng)頁的時(shí)候都是從上到下，從左到右的瀏覽。為了 使 banner 更容易被用戶瀏覽,我們應(yīng)該順應(yīng)用戶這樣的瀏覽習(xí)慣，糟糕

7、的設(shè)計(jì)會(huì) 讓用戶無所適從，焦點(diǎn)到處都是。c、明白文字在 banner 中占主導(dǎo)地位從構(gòu)成上講，一個(gè) banner 分為 2 個(gè)部分，一為文字，二為輔助圖。輔助圖雖然占 據(jù)大多數(shù)的面積，但是不加以文字的說明，很難讓用戶知道這個(gè) banner 要說明什 么。要讀一個(gè)人的喜怒哀樂，只要讀其五官即可。在一個(gè) banner 里面，標(biāo)題文字 起著五官一樣的作用，所以個(gè)人覺得文字才是整個(gè) banner 的主角。所以對(duì)于文字 的處理，顯得尤為重要。d、橫幅廣告中文字處理的兩個(gè)技巧技巧 1:如果主標(biāo)太長，需求方不舍得刪文字的情況下，對(duì)主標(biāo)中重要關(guān)鍵字進(jìn)行 權(quán)重，突出主要的信息，弱化的、之、和年第 x 屆這種信息

8、量不 大的詞。3 / 4技巧 2：如果需求方整體文字太短，畫面太空，可以用一些加入一些輔助信息豐富 畫面。如加點(diǎn)英文，域名，頻道名等。（3）布置任務(wù)，明確目標(biāo)實(shí)訓(xùn) 模仿小米網(wǎng)站上的促銷廣告完成效果圖要求：（1）制作一個(gè)以“hello 春天”為主題的促銷廣告。（2） 主題突出，內(nèi)容結(jié)構(gòu)合理，版面美觀，有創(chuàng)意。（3） 獨(dú)立完成，完成后保存，用姓名命名，提交作業(yè)。1、新建文件：大小 950*410 ,分辨率 72，背景白色。2. 選擇漸變工具：白色到天藍(lán)徑向漸變，填充背景。2. 制作”hello 春天！“立體字，字體為黑體，多個(gè)圖層實(shí)現(xiàn)。4制作“踏青必備配件特惠專場”文字及底色，可以考慮做倒影字，效果會(huì)更好。 5制作僅一周的文字。6.利用魔術(shù)棒工具摳出花草放在底部。（4）討論交流，評(píng)價(jià)反饋從整體效果、創(chuàng)意性、藝術(shù)性、完整性、技術(shù)性等方面進(jìn)行評(píng)價(jià)，同時(shí)讓學(xué) 生參與主動(dòng)的評(píng)價(jià)。最后引導(dǎo)學(xué)生提出一些改進(jìn)的意見，并互相學(xué)習(xí)與互相借鑒。 （5）課堂小結(jié)“學(xué)到了什么？”本堂課我們一起回顧一下知識(shí)點(diǎn)，介紹了什么是橫幅廣告，橫 幅廣告的尺寸，重點(diǎn)是制作橫幅廣告的四個(gè)要點(diǎn) ,最后完成模仿小米網(wǎng)站上商品促 銷廣告的實(shí)例，通過這個(gè)實(shí)例對(duì)前面知識(shí)點(diǎn)的映襯及加深理解。分析一下。 （6）擴(kuò)展技能1. 上網(wǎng)看看網(wǎng)頁中的橫幅廣告，想想自己能不能制作出來？1. 抓住春天尾巴，周末出去踏青。五、教學(xué)