《設(shè)計(jì)與制作網(wǎng)站首頁(yè)界面》項(xiàng)目教學(xué)設(shè)計(jì)

1、Photoshop CS6基礎(chǔ)與案例教程任務(wù)一 設(shè)計(jì)與制作網(wǎng)站首頁(yè)項(xiàng)目教學(xué)設(shè)計(jì)設(shè)計(jì)與制作網(wǎng)站首頁(yè)界面項(xiàng)目教學(xué)設(shè)計(jì)一、任務(wù)描述網(wǎng)站是眾多企業(yè)、團(tuán)體和個(gè)人宣傳產(chǎn)品、主張和樹立良好形象的主要途徑和重要手段。據(jù)不完全統(tǒng)計(jì)，當(dāng)前100%的大型企業(yè)、60%的中小企業(yè)都已經(jīng)或?qū)⒁诨ヂ?lián)網(wǎng)上建立的自己的網(wǎng)站，要使我們的網(wǎng)站在眾多網(wǎng)站中脫穎而出，其界面的設(shè)計(jì)就顯得十分重要。網(wǎng)頁(yè)界面設(shè)計(jì)其實(shí)是一個(gè)系統(tǒng)工程，它包括網(wǎng)站頁(yè)面布局、設(shè)計(jì)，顏色的搭配、尺寸的大小和風(fēng)格的定位等。網(wǎng)站首頁(yè)界面是整個(gè)網(wǎng)站的“面子”工程，首先突出的是功能，使用戶只要看一眼網(wǎng)站，就能夠知道該網(wǎng)站的類型。其次就是能夠給訪問者帶來一種視覺享受，特別是

2、展示、宣傳型的網(wǎng)站需要更加注重藝術(shù)設(shè)計(jì)。在本任務(wù)就是要求學(xué)生使用Photoshop CS6軟件設(shè)計(jì)、制作設(shè)計(jì)制作網(wǎng)站首頁(yè)界面。二、任務(wù)目標(biāo)學(xué)生通過完成本項(xiàng)目，達(dá)成以下目標(biāo)：知識(shí)與技能：能夠使用切片工具處理圖像；了解優(yōu)化圖像命令選項(xiàng)優(yōu)化Web圖像的使用方法；了解界面設(shè)計(jì)與制作；嘗試使用動(dòng)作處理圖像。方法與過程：能夠根據(jù)任務(wù)的要求，確定完成任務(wù)的所需要的技術(shù)，并較熟練的完成任務(wù)；能對(duì)自己和他人的活動(dòng)過程與結(jié)果進(jìn)行評(píng)價(jià)與交流，能歸納利用信息技術(shù)解決問題的基本思想與方法。情感、態(tài)度、價(jià)值觀：通過完成本任務(wù)，能夠感受到信息技術(shù)對(duì)社會(huì)發(fā)展、工作效率的影響。三、任務(wù)分析房地產(chǎn)宣傳展示型的網(wǎng)站內(nèi)容不多，架構(gòu)不

3、復(fù)雜，更注重的是形象和標(biāo)的（樓盤）的展示。因此，我們將“怡海新城”的實(shí)景圖處理成寬幅畫面作為主題放置在首頁(yè)中間的位置，占據(jù)一半以上的版面。網(wǎng)站分類欄目按鈕放置在主題圖下面，當(dāng)用戶需要進(jìn)一步了解詳細(xì)內(nèi)容時(shí)，單擊按鈕即可進(jìn)入二級(jí)頁(yè)面。同時(shí)將公司的名稱、樓盤名、經(jīng)營(yíng)理念和聯(lián)系方式分別放置在頁(yè)面的上下端，給用戶更多的信息。根據(jù)網(wǎng)站的特點(diǎn)，本首頁(yè)采用800像素×520像素大小，使用圖像自動(dòng)合并、色調(diào)調(diào)整等技術(shù)進(jìn)行整體設(shè)計(jì)，然后采取切片的方法分別保存文件，有利于網(wǎng)頁(yè)的編輯和瀏覽。四、活動(dòng)策略在本任務(wù)活動(dòng)的過程中，教師首先要引導(dǎo)學(xué)生認(rèn)識(shí)網(wǎng)站首頁(yè)，知道網(wǎng)站首面構(gòu)思、設(shè)計(jì)的一般方法。然后引導(dǎo)學(xué)生嘗試自

4、動(dòng)命令拼合圖像，使用切片工具切分圖像的操作。當(dāng)學(xué)生具備了設(shè)計(jì)與制作網(wǎng)站首頁(yè)界面的知識(shí)與技術(shù)后，即可引導(dǎo)其完成本項(xiàng)目網(wǎng)站首頁(yè)界面的設(shè)計(jì)與制作活動(dòng)。在本任務(wù)活動(dòng)過程中，學(xué)生技術(shù)方面的獲得，大部分內(nèi)容從閱讀教材、觀看操作錄屏、教師演示示范即可達(dá)到目標(biāo)，教師還需要引導(dǎo)學(xué)生了解網(wǎng)頁(yè)中圖像相關(guān)規(guī)則、顏色搭配、文件格式、設(shè)計(jì)創(chuàng)意等方面的知識(shí)。因此，教師可以結(jié)合本項(xiàng)目，引導(dǎo)學(xué)生收集、閱讀網(wǎng)頁(yè)設(shè)計(jì)方面的書籍或資料，觀看比較成功的網(wǎng)頁(yè)設(shè)計(jì)作品，從而啟發(fā)迪設(shè)計(jì)創(chuàng)作思維，提高其綜合設(shè)計(jì)的素養(yǎng)。完成本任務(wù)的過程中，需要較長(zhǎng)的時(shí)間。學(xué)生通過多次操作，更進(jìn)一步熟練使用已經(jīng)會(huì)使用的工具與技術(shù)，使學(xué)生達(dá)到自動(dòng)化的目的。因此，我

5、們采取“創(chuàng)設(shè)情境任務(wù)分析找出問題（知識(shí)儲(chǔ)備）解決問題任務(wù)實(shí)施活動(dòng)評(píng)價(jià)拓展提高”的流程，達(dá)到完成任務(wù)的目標(biāo)。五、活動(dòng)過程任務(wù)名稱設(shè)計(jì)與制作網(wǎng)站首頁(yè)界面建議課時(shí)4課時(shí)預(yù)設(shè)環(huán)節(jié)學(xué)生活動(dòng)教師活動(dòng)創(chuàng)設(shè)情境激發(fā)興趣（5） 融入情境，產(chǎn)生完成本項(xiàng)目的欲望。創(chuàng)設(shè)一個(gè)真實(shí)的任務(wù)情境，激發(fā)學(xué)生完成本項(xiàng)目的興趣。情境既可使用本教材中“任務(wù)描述”，也可在本“任務(wù)描述”的基礎(chǔ)上，使用圖像、音視頻，精選一些該軟件制作的作品，引導(dǎo)學(xué)生欣賞，以激發(fā)其興趣。分析任務(wù)找出問題（10）學(xué)生小組討論，可能會(huì)提出以下問題： 如何合成全景照片？ 如何根據(jù)網(wǎng)頁(yè)布局，切分圖片？ 網(wǎng)頁(yè)用圖有什么特殊要求？ 在學(xué)生討論的基礎(chǔ)，教師有針對(duì)性地引導(dǎo)

6、學(xué)生，將需要解決的問題收集、整理出來（針對(duì)性也就是圍繞本任務(wù)目標(biāo)進(jìn)行梳理，取其精要。）典型引導(dǎo)解決問題(20)閱讀文本，嘗試操作，掌握新知。引導(dǎo)學(xué)生參照教材的“任務(wù)準(zhǔn)備”，了解切片工具和圖片拼合命令。當(dāng)學(xué)生操作有難度時(shí)，教師需要適時(shí)示范、指導(dǎo)。嘗試操作任務(wù)實(shí)施（60）參照教材中“任務(wù)實(shí)施”，嘗試操作，完成任務(wù)。當(dāng)遇到困難時(shí)，可以觀看課程教學(xué)資源網(wǎng)“錄屏”文件。學(xué)生在操作的過程中，教師要適時(shí)巡查，發(fā)現(xiàn)問題，引導(dǎo)學(xué)生解決。同時(shí)，鼓勵(lì)小組同學(xué)之間相互幫助，積極交流，解決問題。展示作品活動(dòng)評(píng)價(jià)（15）參照教材中“活動(dòng)評(píng)價(jià)”表中的項(xiàng)目進(jìn)行。教師鼓勵(lì)學(xué)生在小組內(nèi)積極展示、交流作品，并交流創(chuàng)作的體會(huì)。同時(shí)，

7、教師適時(shí)參與到部分小組，有針對(duì)的進(jìn)行點(diǎn)評(píng)，提出進(jìn)一步完善意見和建議。再次修正完善作品（20）根據(jù)學(xué)習(xí)情況，尋找不足。有針對(duì)性的輔優(yōu)補(bǔ)差。綜合練習(xí)拓展提高（45） 參照教材中“拓展提高”，引導(dǎo)學(xué)生更進(jìn)一步認(rèn)識(shí)切片工具、裁剪工具、透視裁剪工具、切片選擇工具和合并照片命令、像素尺寸、畫布大小、Web安全顏色、顏色匹配命令、曲線命令、優(yōu)化圖像、動(dòng)作面板處理圖像。 完成教材中的“思考練習(xí)”，將本次項(xiàng)目成果通過網(wǎng)絡(luò)或其他途徑提交給教師。 根據(jù)教師評(píng)價(jià)結(jié)果，反思學(xué)習(xí)行為，提高能力?！巴卣固岣摺痹诩夹g(shù)上有一定拔高，教師根據(jù)實(shí)際情況，有針對(duì)性示范操作。評(píng)價(jià)作品，將評(píng)價(jià)結(jié)果反饋學(xué)生。六、設(shè)計(jì)反思根據(jù)教材安排來看，本項(xiàng)目作品需要處理過程比較繁瑣，需要綜合已有知識(shí)（比如文字工具、參考線、圖層樣式等）等都是前些項(xiàng)目中經(jīng)常用到知識(shí)與技術(shù)），結(jié)合新知識(shí)與技術(shù)完成項(xiàng)目元素的處理。在操作的過程中，一些相同項(xiàng)目需要重復(fù)處理，將花費(fèi)較長(zhǎng)的時(shí)間，教師適時(shí)引導(dǎo)學(xué)生，使其他通過反復(fù)練習(xí)，掌握技術(shù)，形成能力。