《網(wǎng)頁設(shè)計(jì)與制作》相關(guān)資源教學(xué)設(shè)計(jì)職業(yè)活動(dòng)教學(xué)設(shè)計(jì)(第3章)

1、職業(yè)活動(dòng)教學(xué)設(shè)計(jì)單元 名稱第三章網(wǎng)頁效果圖制作學(xué)時(shí)8單元 簡介在商務(wù)網(wǎng)站用戶需求分析的根底上，前面已經(jīng)規(guī)劃了網(wǎng)站的欄目結(jié)構(gòu)，繪制了網(wǎng)頁的草圖，確定了要設(shè)計(jì)制作的網(wǎng)貝根本風(fēng)格及貝囿內(nèi)容布局結(jié)構(gòu)。本章接卜來要介紹的，就是如何制作與真實(shí)網(wǎng)頁相一致的效果圖，并對(duì)效果圖進(jìn)行切片處理，以獲得制作最終頁面所需要的所有圖片素材及頁面布局結(jié)構(gòu)尺寸。能力 目標(biāo)熟悉使用PhotoShop制作網(wǎng)貝效果圖的流程；掌握PhotoShop中圖層組的設(shè)置；掌握利用PhotoShop制作網(wǎng)頁效果圖的方法；掌握PhotoShop中對(duì)效果圖進(jìn)行切片處理的方法。實(shí)訓(xùn) 內(nèi)容1、單元綜合實(shí)訓(xùn)：企業(yè)網(wǎng)站首頁效果圖制作實(shí)訓(xùn)背景同實(shí)訓(xùn)二在實(shí)訓(xùn)

2、二完成的根底上，為該網(wǎng)站首頁制作效果圖。2、技能訓(xùn)練技能訓(xùn)練3-1:圖片素材收集與處理在效果圖圖3-3左側(cè)“聯(lián)系我們處，要用到“機(jī)的小圖片。請(qǐng)上網(wǎng)選取該圖片，并適當(dāng)調(diào)整大小，填寫一表見教材表3-2:國片素材的選取及格式轉(zhuǎn)換技能訓(xùn)練3-2:字體下載與安裝請(qǐng)給出三個(gè)可以下載字體的網(wǎng)址，比擬它們的特點(diǎn)，并下載“微軟雅黑字體 到系統(tǒng)字體庫中，填寫卜表。見教材表3-3:特殊字體的下載與安裝技能訓(xùn)練3-3:圖層結(jié)構(gòu)規(guī)劃請(qǐng)依據(jù)第二章中提供的“某牙齒保健產(chǎn)品公司的網(wǎng)站首頁草圖圖片：WYT030201網(wǎng)站首頁草圖案例,規(guī)劃其效果圖圖層結(jié)構(gòu)，并在Photoshop中實(shí)現(xiàn)。技能訓(xùn)練3-4: LOGO設(shè)計(jì)與制作請(qǐng)為你

3、所在學(xué)校網(wǎng)站重新設(shè)一個(gè)LOGO ,并將操作的結(jié)果填入下表見教材表3-5:國片素材的選取及格式轉(zhuǎn)換技能訓(xùn)練3-5: Banner圖片制作請(qǐng)為以上苗木基地網(wǎng)站首頁設(shè)計(jì)制作第二張Banner輪顯圖片，該輪顯圖片重點(diǎn)展示基地的榮譽(yù)資質(zhì)或特色苗木， 相關(guān)素材可在網(wǎng)上搜集， 并將操作結(jié)果填入下 表：見教材表3-6: Banner圖片的設(shè)計(jì)與制作技能訓(xùn)練3-6:效果圖編輯對(duì)給定效果圖主體內(nèi)容區(qū)僅完成局部進(jìn)行操作，參照教材圖3-93中尺寸要求，完成“基地簡介、資質(zhì)榮譽(yù)、基地展示、經(jīng)典工程四個(gè)主體內(nèi)容模塊的制 作，以形成完整的效果圖。技能訓(xùn)練3-7:效果圖切片與管理請(qǐng)自己動(dòng)手完成效果圖的切片。注意養(yǎng)成一個(gè)好的習(xí)

4、慣，對(duì)各個(gè)重要切片設(shè)置一個(gè)后思義的名子，如教材圖3-109中第15號(hào)切片，可命名為 banner。最后，將整個(gè)效果圖另存為 web格式，觀察生成的images文件夾中的文件與教材圖3-115所示文件的區(qū)別。相關(guān)知識(shí)圖層、圖層組、選區(qū)、 LOGO、Banner相關(guān)知識(shí)【教學(xué)方法設(shè)計(jì)】1以“任務(wù)驅(qū)動(dòng)式為主要教學(xué)模式。教師通過任務(wù)把各教學(xué)目標(biāo)和內(nèi)容有機(jī) 地結(jié)合在一起，使學(xué)生置身于提出問題、思考問題、解決問題的動(dòng)態(tài)學(xué)習(xí)過程中。學(xué)生 完成任務(wù)的同時(shí)，也完成了需要到達(dá)的學(xué)習(xí)目標(biāo)的學(xué)習(xí)。2采用協(xié)作學(xué)習(xí)的教學(xué)模式。學(xué)生在與他人進(jìn)行交流與溝通的同時(shí)，互相取長 補(bǔ)短，共同進(jìn)步。3創(chuàng)設(shè)學(xué)習(xí)情境，激發(fā)學(xué)生的學(xué)習(xí)興趣。

5、教師在導(dǎo)入新課時(shí)可演示不同層次的 優(yōu)秀網(wǎng)頁效果圖作品，例如國內(nèi)外著名的網(wǎng)站首頁、優(yōu)秀個(gè)人網(wǎng)站、教師本人制作的網(wǎng) 站、往屆學(xué)生的作品。這些作品不但能提高學(xué)生的鑒賞能力，還可以提高學(xué)生的學(xué)習(xí)興 趣和求知欲望?！窘虒W(xué)設(shè)計(jì)思路】本次課主要偏重實(shí)踐，又有一定的理論知識(shí)。如果教師講解得太多就會(huì)顯得枯燥， 因此本次課的設(shè)計(jì)思路是從具體的目標(biāo)任務(wù)入手，引導(dǎo)學(xué)生進(jìn)行觀察、思考、分析、討 論，最后得出解決問題的方法，形成解決問題的方案，到達(dá)從理論到實(shí)踐應(yīng)用的目的。整個(gè)教學(xué)過程圍繞賞-析-演-練-評(píng)展開。我們注重的是學(xué)生實(shí)際操作技能的培養(yǎng)， 90分鐘課堂，學(xué)生參與實(shí)踐的時(shí)間比例為50%左右。這樣就讓我們的學(xué)生在實(shí)踐

6、中學(xué)到真知，同時(shí)也培養(yǎng)他們小組協(xié)作能力與合作精神。教師的主要任務(wù)是在于積極地引導(dǎo)與調(diào)動(dòng)學(xué)產(chǎn)生，鼓勵(lì)學(xué)生積極、主動(dòng)地實(shí)踐，從而完成任務(wù)?！窘虒W(xué)過程設(shè)計(jì)】本學(xué)習(xí)單元共8課時(shí)：任務(wù)一網(wǎng)頁素材的選取1課時(shí)任務(wù)二圖層組的管理任務(wù)三網(wǎng)頁兀素的編輯課時(shí)任務(wù)四效果圖切片1課時(shí)技能訓(xùn)練1課時(shí)教學(xué)具體時(shí)間安排及教學(xué)過程如下：設(shè)計(jì)一、引入20分鐘教師可以選擇素材庫中的十個(gè)精美網(wǎng)頁效果圖展示給學(xué)生看，然后請(qǐng)學(xué)生看十個(gè)高年級(jí)學(xué)生使用Photoshop制作的網(wǎng)頁效果圖。通過以上效果圖的瀏覽并介紹，每個(gè)學(xué)生 都已躍躍欲試了。此時(shí)教師做一個(gè)過渡：“剛剛大家看到的每一個(gè)圖片都是一個(gè)網(wǎng)頁效果圖，這些網(wǎng)頁有的美觀大方，有的豐富多彩

7、，有的個(gè)性鮮明，那么我們自己能不能制 作出具有自己風(fēng)格的網(wǎng)頁效果圖呢？ 學(xué)生一定會(huì)說“能。今天我們就一起來學(xué)習(xí)怎樣使用PHOTOSHOP在已有草圖的根底上制作網(wǎng)頁效果圖。教師導(dǎo)出本節(jié)課的教學(xué)目 標(biāo)?！咎釂枴浚涸谕瓿煽蛻粜枨蠓治觯⒗L制了草圖的根底上，后續(xù)的網(wǎng)頁制作過程有 哪些呢？二、圖片素材的獲取10分鐘教師分析比擬網(wǎng)頁中常用的圖片格式，如教材表3-1所示。教師翻開并演示網(wǎng)絡(luò)上比擬知名的圖片素材網(wǎng)站。引導(dǎo)學(xué)生習(xí)慣在網(wǎng)絡(luò)搜集圖片素材。播放視頻： WYS030101 QQ圖標(biāo)選取操作視頻。 三、圖片格式轉(zhuǎn)換10分鐘教師講解并演示常用的圖片轉(zhuǎn)換工具ACDSee、美圖秀秀等，演示圖片格式的轉(zhuǎn)換。四、特

8、效字體選取5分鐘教師講解并演示特效字體的下載及安裝。五、課后實(shí)訓(xùn)“技能訓(xùn)練3-1圖片素材收集與處理WYD030101 可安排為課后實(shí)訓(xùn)，并在 下次課點(diǎn)評(píng)。要求學(xué)生瀏覽效果圖教材圖3-3左側(cè)“聯(lián)系我們處，針對(duì)要用到“機(jī)的小圖片，上網(wǎng)選取該圖片，并適當(dāng)調(diào)整大小，填寫下表 教材表3-2國片素材的選取及格式轉(zhuǎn)換：“技能訓(xùn)練3-2字體下載與安裝WYD030102可安排為課后實(shí)訓(xùn)，并在下次 課點(diǎn)評(píng)。要求學(xué)生找出三個(gè)可以下載字體的網(wǎng)址，比擬它們的特點(diǎn)，并下載“微軟雅黑字體到系統(tǒng)字體庫中，填寫下表教材表3-3特殊字體的下載與安裝。六、圖層組結(jié)構(gòu)規(guī)劃25分鐘教師演示并講解Photoshop的工作界面。教師演示并

9、講解新建首頁效果圖文件。注意簡要講解 Photoshop中圖像的顏色模式教師演示并講解 Photoshop各種圖層使用教材表 3-4及教材圖3-12。教師演示并講解保存首頁效果圖文件。注意調(diào)出圖層面板，引導(dǎo)學(xué)生討論P(yáng)SD格式文件與JPG格式文件的差異。教師使用教材圖3-14,分析網(wǎng)站首頁效果圖的圖層組劃分。教師演示并講解圖層組的創(chuàng)立，播放視頻WYS030201圖層組創(chuàng)立操作視頻。七、課后實(shí)訓(xùn)“技能訓(xùn)練3-3圖層結(jié)構(gòu)規(guī)劃可安排為課后實(shí)訓(xùn)， 并在下次課點(diǎn)評(píng)。要求學(xué)生請(qǐng) 依據(jù)第二章中提供的“某牙齒保健產(chǎn)品公司的網(wǎng)站首頁草圖圖片：WYT030201網(wǎng)站首頁草圖案例,規(guī)劃其效果圖圖層結(jié)構(gòu)，并在 Phot

10、oshop中實(shí)現(xiàn)。 八、網(wǎng)站Logo制作45分鐘教師講解常用的網(wǎng)站 LOGO的設(shè)計(jì)手法。使用圖片：WYT030301Logo設(shè)計(jì)方法- 標(biāo)識(shí)手法 卜圖片：WYT030302Logo 設(shè)計(jì)方法-卡通手法、圖片：WYT030303Logo 設(shè)計(jì)方法-幾何構(gòu)成法卜圖片：WYT030304Logo設(shè)計(jì)方法-其它方法采用資源庫中 提供的網(wǎng)頁效果圖案例，引導(dǎo)學(xué)生分析各LOGO的設(shè)計(jì)手法教師講解Logo的設(shè)計(jì)技巧。教師講解網(wǎng)站Logo的一般尺寸。教師演示并講解AAALOGO軟件的使用。教師演示并講解頭部區(qū)域的制作。九、課后實(shí)訓(xùn)“技能訓(xùn)練3-4 LOGO設(shè)計(jì)與制作可安排為課后實(shí)訓(xùn)，并在下次課點(diǎn)評(píng)。要求學(xué) 生為

11、所在學(xué)校網(wǎng)站重新設(shè)計(jì)一個(gè) LOGO,并將操作的結(jié)果填入下表教材表3-5: LOGO 設(shè)計(jì)與制作。十、Banner制作45分鐘教師講解網(wǎng)頁 Banner的設(shè)計(jì)原那么， 使用案例圖片：WYT030305Banner的設(shè)計(jì)樣 例。教師演示并講解 Banner的制作過程。使用圖片：WYT030306Banner制作案例素材 -苗木基地全景圖?？煽紤]播放視頻 視頻：WYS030302BNNER 制作操作視頻。教師翻開并講解常用的網(wǎng)頁Banner制作網(wǎng)站。十一、課后實(shí)訓(xùn)“技能訓(xùn)練3-5 Banner圖片制作可安排為課后實(shí)訓(xùn)，并在下次課點(diǎn)評(píng)。要求學(xué) 生為“碧雅園花卉苗木基地網(wǎng)站首頁設(shè)計(jì)制作第二張Banner

12、輪顯圖片，該輪顯圖片重點(diǎn)展示基地的榮譽(yù)資質(zhì)或特色苗木，相關(guān)素材可在網(wǎng)上搜集，并將操作結(jié)果填入下表教材表3-6: Banner圖片的設(shè)計(jì)與制作。 十二、導(dǎo)航制作45分鐘教師選區(qū)資源庫中提供的網(wǎng)頁效果圖，引導(dǎo)學(xué)生賞析網(wǎng)頁導(dǎo)航。提高學(xué)生審美水平。教師演示并講解導(dǎo)航的制作。著重講解圖層樣式及選區(qū)的各種操作。教師演示并講解制作其它效果的導(dǎo)航欄?？煽紤]播放視頻WYS030303導(dǎo)航制作操作視頻。十三、主體內(nèi)容制作45分鐘教師演示并講解主體內(nèi)容的制作過程，使用素材圖片：WYT030308-WYT030317主體內(nèi)容區(qū)制作案例素材-基地及工程案例圖教師演示并講解圖片素材的調(diào)整。使用素材圖片：WYT030318

13、圖像調(diào)整案例用圖可考慮播放視頻WYS030304頁面主體內(nèi)容制作操作視頻 十四、課后實(shí)訓(xùn)“技能訓(xùn)練3-6效果圖編輯可安排為課后實(shí)訓(xùn)，并在下次課點(diǎn)評(píng)。要求學(xué)生對(duì) 給定效果圖主體內(nèi)容區(qū)僅完成局部進(jìn)行操作，參照教材圖3-93中尺寸要求，完成“基地簡介、資質(zhì)榮譽(yù)、基地展示、經(jīng)典工程四個(gè)主體內(nèi)容模塊的制作，以形成完整 的效果圖。十五、圖片修整20分鐘教師演示并講解效果圖大小調(diào)整、色相/飽和度調(diào)整、擴(kuò)展畫布?？煽紤]播放視頻WYS030305圖片修整操作視頻 十六、切片工具的使用25分鐘教師演示并講解效果圖的切片及切片原那么?？煽紤]播放視頻WYS 030401效果圖切片操作視頻。 十七、編輯切片20分鐘教師

14、演示并講解效果圖的切片的編輯以及生成切片。 十四、課內(nèi)實(shí)訓(xùn)45分鐘如果時(shí)間充足，“技能訓(xùn)練3-6效果圖編輯可安排為課內(nèi)實(shí)訓(xùn)，并在下次課點(diǎn)評(píng)。 選區(qū)資源庫中的網(wǎng)頁效果圖， 邀請(qǐng)學(xué)生動(dòng)手完成效果圖的切片。 引導(dǎo)養(yǎng)成一個(gè)好的習(xí)慣， 對(duì)各個(gè)重要切片設(shè)置一個(gè)有意義的名字，如教材圖3-109中第15號(hào)切片，可命名為banner。最后，將整個(gè)效果圖另存為 web格式，引導(dǎo)觀察生成的images文件夾中的文件 與教材圖3-115所示文件的區(qū)別。注:案例素材（WYA030401 -WYA030430效果圖案例），要提供應(yīng)學(xué)生作為課后拓 展訓(xùn)練模版。十五、單元實(shí)訓(xùn)8課時(shí)動(dòng)畫：WYD030000 企業(yè)網(wǎng)站首頁效果圖

15、制作實(shí)訓(xùn)本單元實(shí)訓(xùn)內(nèi)容為企業(yè)網(wǎng)站首頁制作效果圖。采用動(dòng)畫的形式實(shí)現(xiàn)。實(shí)訓(xùn)的完成需有上網(wǎng)條件，在實(shí)訓(xùn)過程中涉及上網(wǎng)瀏覽等操作。本實(shí)訓(xùn)內(nèi)容的設(shè)計(jì)強(qiáng)調(diào)是網(wǎng)頁效果圖實(shí)現(xiàn)問題，即Photoshop制作網(wǎng)頁效果圖的問題。十六、自主學(xué)習(xí)學(xué)生課后可使用資源 “WYS030001-WYS030049Photoshop操作和使用系列視頻 自主學(xué)習(xí)Photoshop這一工具軟件的操作和根本使用。課外技能訓(xùn)練：WYD030001、WYD030002教學(xué) 資源WYT030101、WYT030102、WYT030103、WYS030101、WYD030101、WYD030102、WYS030102、WYS030201、WYT030201、WYS030301、WYT030301、WYT030302、WYT030303、WYT030304、WYS030302、WYT030305、WYT