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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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