《設計與制作網(wǎng)站首頁界面》項目教學設計

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

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

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

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

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

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

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