網(wǎng)頁設(shè)計與制作 教案全套（第1-16周） 王紅蕾 項目1-11 了解網(wǎng)頁的組成、布局和色彩-使用 CSS 美化和布局網(wǎng)頁_第1頁
網(wǎng)頁設(shè)計與制作 教案全套（第1-16周） 王紅蕾 項目1-11 了解網(wǎng)頁的組成、布局和色彩-使用 CSS 美化和布局網(wǎng)頁_第2頁
網(wǎng)頁設(shè)計與制作 教案全套（第1-16周） 王紅蕾 項目1-11 了解網(wǎng)頁的組成、布局和色彩-使用 CSS 美化和布局網(wǎng)頁_第3頁
網(wǎng)頁設(shè)計與制作 教案全套（第1-16周） 王紅蕾 項目1-11 了解網(wǎng)頁的組成、布局和色彩-使用 CSS 美化和布局網(wǎng)頁_第4頁
網(wǎng)頁設(shè)計與制作 教案全套（第1-16周） 王紅蕾 項目1-11 了解網(wǎng)頁的組成、布局和色彩-使用 CSS 美化和布局網(wǎng)頁_第5頁
已閱讀5頁，還剩141頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

課程名稱：網(wǎng)頁設(shè)計與制作主備人：審核人：第9頁網(wǎng)頁設(shè)計與制作教案（第1周）專業(yè)課程學習任務(wù)項目1：了解網(wǎng)頁的組成、布局和色彩任務(wù)1了解網(wǎng)頁的基本概念任務(wù)2了解網(wǎng)頁設(shè)計的基礎(chǔ)知識任務(wù)3掌握網(wǎng)頁布局設(shè)計與色彩綜合實戰(zhàn)—繪制國字型網(wǎng)頁布局草圖綜合實戰(zhàn)—采集色彩課時6教學對象授課時間設(shè)計者一、學習任務(wù)分析1．通過學習了解網(wǎng)頁基本概念、基礎(chǔ)知識以及布局與色彩。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網(wǎng)頁設(shè)計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎(chǔ)外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習的方法，讓學生了解所學的內(nèi)容。三、學習目標知識目標：了解網(wǎng)頁設(shè)計的相關(guān)基礎(chǔ)。能力目標：學會網(wǎng)頁布局版式設(shè)計的有哪些、學會網(wǎng)頁設(shè)計的基礎(chǔ)有哪些、學會網(wǎng)頁設(shè)計中的色彩分類有哪些。素質(zhì)目標：從基礎(chǔ)學起，培養(yǎng)工匠精神，多學多練加強個人的網(wǎng)頁設(shè)計能力；培養(yǎng)自身的審美能力，增加網(wǎng)頁設(shè)計中的美感。四、教學策略重點難點：重點：掌握網(wǎng)頁設(shè)計的相關(guān)知識；難點：了解網(wǎng)頁的組成、布局和色彩教學方法：講授與案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓(xùn)室課前準備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認真設(shè)計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：工匠精神：古語云:"玉不琢，不成器"。精雕細琢，精益求精。李克強總理：要大力弘揚工匠精神，厚植工匠文化，恪盡職業(yè)操守，崇尚精益求精，培育眾多‘中國工匠’，打造更多享譽世界的‘中國品牌’，推動中國經(jīng)濟發(fā)展進入質(zhì)量時代。復(fù)習提問：一、生活中你都見過那些工作是與網(wǎng)頁有關(guān)的？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復(fù)習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導(dǎo)問題本章主要講解了解網(wǎng)頁的基本概念、了解網(wǎng)頁設(shè)計該用到的軟件、掌握網(wǎng)頁的布局和色彩。使讀者對網(wǎng)頁設(shè)計的一些基礎(chǔ)知識有一個初步了解，方便讀者后面的學習。引出本節(jié)重點內(nèi)容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學生分小組思考。相關(guān)知識介紹任務(wù)1了解網(wǎng)頁的基本概念要學習網(wǎng)頁設(shè)計，首先要了解一些基本概念，如網(wǎng)頁、URL等。本節(jié)將首先介紹這些網(wǎng)頁的基本概念，從而為后面設(shè)計更復(fù)雜的網(wǎng)頁打下良好的基礎(chǔ)?；顒?認識網(wǎng)頁網(wǎng)頁，是指網(wǎng)站中的任何一個頁面，通常是HTML格式。進入網(wǎng)站后第一眼看到的即是這個網(wǎng)站的首頁活動2認識統(tǒng)一資源定位符URLURL英文全稱是UniformResourceLocator，即統(tǒng)一資源定位符，它是一種通用的地址格式，指出了文件在Internet中的位置。一個完整的URL地址由協(xié)議名、服務(wù)器地址、在服務(wù)器中的路徑和文件名4部分組成，瀏覽器地址欄中顯示了完整的URL地址任務(wù)2了解網(wǎng)頁設(shè)計的基礎(chǔ)知識本次任務(wù)就帶領(lǐng)大家了解一下網(wǎng)頁設(shè)計的基礎(chǔ)知識，為以后的學習做好鋪墊?；顒?了解網(wǎng)頁設(shè)計軟件網(wǎng)頁設(shè)計的軟件有很多，對于初學者只要了解用于網(wǎng)頁的布局、圖像處理和動畫制作的相關(guān)軟件就可以了?；顒?了解網(wǎng)頁標記語言HTMLHTML的任何標記都由“<”和“>”括起來，如<HTML><I>。在起始標記的標記名前加上符號“/”便是其終止標記，如</I>，夾在起始標記和終止標記之間的內(nèi)容受標記的控制，例如<I>假期愉快</I>，夾在標記“I”之間的“假期愉快”將受標記“I”的控制。HTML文件的基本結(jié)構(gòu)也是如此活動3了解網(wǎng)頁組成網(wǎng)頁設(shè)計時頁面中的主要組成元素有文字、圖片及超級鏈接等項目，其中文字及圖片是用來表達頁面中的資料內(nèi)容。但是網(wǎng)站中當然不可能只有一個頁面，此時“超級鏈接”就負起了各個網(wǎng)頁之間鏈接的工作。文字、圖片與超級鏈接是網(wǎng)頁的主要組成組件。網(wǎng)頁效果的技術(shù)一日千里，單純的文字及圖片已經(jīng)無法滿足設(shè)計及瀏覽者的需求，背景音樂、Animate動畫等多媒體交互式特效是目前網(wǎng)頁設(shè)計的主流任務(wù)3掌握網(wǎng)頁布局設(shè)計與色彩掌握布局設(shè)計與色彩，可以讓網(wǎng)頁設(shè)計的過程更加的輕松、愉快，能讓設(shè)計者少走很多的彎路，在網(wǎng)頁設(shè)計中不是會用軟件做出來就可以了，每個網(wǎng)頁都要有符合主題的布局和色彩，這樣才能將最終結(jié)果做到統(tǒng)一并具有美感?；顒?掌握網(wǎng)頁布局設(shè)計設(shè)計網(wǎng)頁頁面時需要根據(jù)不同的網(wǎng)站性質(zhì)和頁面內(nèi)容選擇合適的布局形式，通過不同的頁面布局形式可以將常見的網(wǎng)頁分為以下幾種類型。1.“國”字型布局“國”字型：這種布局是網(wǎng)頁上使用最多的一種布局類型，是綜合性網(wǎng)站常用的版式，即最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列小條內(nèi)容，通常情況下左邊是主菜單，右面放友情鏈接等次要內(nèi)容，中間是主要內(nèi)容，與左右一起羅列到底，最底端是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種版面的優(yōu)點是頁面充滿、內(nèi)容豐富、信息量大；缺點是頁面擁擠、不夠靈活。2.拐角型布局拐角型，又稱T字型布局，這種結(jié)構(gòu)和上一種只是形式上的區(qū)別，其實是很相近的，就是網(wǎng)頁上邊和左右兩邊相結(jié)合的布局，通常右邊為主要內(nèi)容，比例較大。在實際運用中還可以改變T布局的形式，如左右兩欄式布局，一半是正文，另一半是形象的圖像或?qū)Ш綑?。這種版面的優(yōu)點是頁面結(jié)構(gòu)清晰、主次分明，易于使用；缺點是規(guī)矩呆板，如果細節(jié)色彩上不到位，很容易讓人“看之無味”。3．框架型布局框架型布局一般分成上下或左右布局，一欄是導(dǎo)航欄目，一欄是正文信息。復(fù)雜的框架結(jié)構(gòu)可以將頁面分成許多部分，常見的是三欄布局。左邊一欄顯示導(dǎo)航欄，右邊顯示正文信息。4.封面型布局這種類型的頁面設(shè)計一般很精美，通常出現(xiàn)在時尚類網(wǎng)站、企業(yè)網(wǎng)站或個人網(wǎng)站的首頁，優(yōu)點顯而易見、美觀吸引人；缺點是速度慢。5.Html5型布局Html5型是目前非常流行的一種頁面形式，由于Html5功能的強大，頁面所表達的信息更加豐富，且視覺效果出眾。6.標題正文型布局這種類型即上面是標題，下面是正文，一些文章頁面或注冊頁面多屬于此類型?；顒?掌握網(wǎng)頁色彩網(wǎng)頁色彩與人的心理感覺和情緒有一定的關(guān)系，利用這一點可以在設(shè)計時形成自己獨特的色彩效果，給瀏覽者留下深刻印象，加大產(chǎn)品的售出概率。不同的色系在網(wǎng)頁中也會擁有自己的獨特之處，網(wǎng)頁色彩分類主要有按照色相分類和按印象分類兩種。按照色相分類色彩常見的色彩搭配按照色相的順序歸類。每類都以該色相為主，配以其他色相或者同色相的，應(yīng)用對比和調(diào)和的方法，并按照從輕快到濃烈的順序排序。按印象分類色彩色彩搭配看似復(fù)雜，但并不神秘。既然每種色彩在印象空間中都有自己的位置，那么色彩搭配得到的印象可以用加減法來近似估算。如果每種色彩都是高亮度的，那么它們的疊加，自然會是柔和、明亮的；如果每種色彩都是濃烈的，那么它們疊加，就會是濃烈的。當然在實際設(shè)計過程中，設(shè)計師還要考慮到乘除法，例如同樣亮度和對比度的色彩，在色環(huán)上的角度不同，搭配起來就會得到千變?nèi)f化的感覺。因此，色彩除了按色相的搭配外，還可以將印象作為搭配分類的方法?；顒?掌握網(wǎng)頁中的色彩推移網(wǎng)頁頁面中采用色彩推移的方式組合色彩，這通常是構(gòu)成頁面統(tǒng)一色調(diào)的最好方法之一。色彩推移是將色彩按照一定規(guī)律有秩序地排列、組合的一種作品形式。種類有色相推移、明度推移、純度推移、互補推移和綜合推移等。設(shè)計師可以通過色彩推移的方法使頁面色彩看起來更加統(tǒng)一、和諧。色彩推移同樣可以運用到局部圖像上。課件設(shè)疑，引起注意，牢牢抓住和吸引學生探究新知識的心理。講練結(jié)合，突出實操能力培養(yǎng)。跟隨老師進入思考分析狀態(tài)。認真完成操作任務(wù)。通過課件引出問題，演示法和指導(dǎo)法，使學生掌握知識點。提高學生操作能力。分組討論組織學生分小組討論引導(dǎo)問題，保證人人有任務(wù)，人人有活干。評分項目評分指標標準分評分儀態(tài)舉止是否得體0.5準備準備是否充分0.5語言聲音是否洪亮、表達是否準確0.5小組配合組分工是否明確，配合是否默契0.5小計2分配小組長任務(wù)。通過引導(dǎo)問題，學生進行分析、思考。各個小組分配任務(wù)進行討論問題。達到培養(yǎng)學生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導(dǎo)問，由全班同學找出問題并由小組代表進行解答。展示并解答問題。學生展示討論成果，回答問題。鍛煉學生表達能力和儀表。鍛煉學生表達能力和儀表。全班查找問題。課堂總結(jié)找最優(yōu)秀小組講解設(shè)計中的注意事項，并由教師點評總結(jié)設(shè)計注意事項，并分組點評各組優(yōu)缺點?？偨Y(jié)點評設(shè)計情況，并歸納知識點。學生總結(jié)所學知識，積極回答問題。學生掌握知識。布置作業(yè)一、記住網(wǎng)頁設(shè)計與制作的基礎(chǔ)都有哪些布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學習。培養(yǎng)學生學習能力。便于下次課進行。七、教學評價設(shè)計通過小組自我評價、小組評價、教師評價完成對小組進行評價，教師和組長對成員進行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進行成績綜合評定。評價項目評價指標標準分自我評價小組評價教師評價學習態(tài)度學習主動，規(guī)范操作，紀律好2任務(wù)完成知識點掌握，實操完成效果好2小組討論表達清晰，任務(wù)方案科學合理2創(chuàng)新精神運用多種方法創(chuàng)意設(shè)計17S管理現(xiàn)場整理，保持工作環(huán)境整潔1團結(jié)協(xié)作小組成員是否團結(jié)協(xié)作2小計總評小組學習活動綜合評價表八、教學反思網(wǎng)頁設(shè)計與制作教案（第2周）專業(yè)課程學習任務(wù)項目2：掌握網(wǎng)頁中圖像的處理基礎(chǔ)任務(wù)1掌握剪裁與校正圖像任務(wù)2掌握添加水印保護圖像任務(wù)3掌握處理色調(diào)問題課時6教學對象授課時間設(shè)計者一、學習任務(wù)分析1．熟悉網(wǎng)頁圖像的處理基礎(chǔ)。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網(wǎng)頁設(shè)計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎(chǔ)外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習的方法，讓學生了解所學的內(nèi)容。三、學習目標知識目標：掌握在網(wǎng)頁設(shè)計前為圖像進行校正的方法。掌握為圖像添加水印保護的方法。掌握為圖像處理色調(diào)問題的方法。能力目標：學會為圖像剪裁與傾斜校正的處理。學會為圖像添加水印的處理。學會為圖像進行色調(diào)的處理。素質(zhì)目標：明確分工，充分了解團結(jié)協(xié)作在工作中的重要性。用知識武裝自己，提高自身動手操作的能力，增強學習的自信心。四、教學策略重點難點：重點：圖像的處理基礎(chǔ)；難點：對于水印、改色等操作的理解教學方法：演示案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓(xùn)室課前準備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認真設(shè)計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：本節(jié)課與同學們分享一句話:“你若盛開，蝴蝶自來，你若精彩，天自安排”你可以不優(yōu)秀，但不能不努力!。復(fù)習提問：一、了解網(wǎng)頁設(shè)計關(guān)于圖像部分都需要哪些基礎(chǔ)軟件？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復(fù)習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導(dǎo)問題網(wǎng)頁設(shè)計中只要涉及到圖像，幾乎就會需要對其進行相應(yīng)的處理，無論是為保護自己圖像不被盜用，還是用到的圖像中有一些瑕疵，這些都需要進行一下前期的加工，將其處理成在網(wǎng)頁中屬于自己風格的特色，圖像處理是網(wǎng)頁設(shè)計中不可缺少一項重要內(nèi)容。為此，小艾想使用比較專業(yè)的軟件對圖像進行處理，而同事凱程告訴她，Photoshop就是一個在圖像處理中非常專業(yè)、非常好用的軟件，在處理圖像方面可以將其分為剪裁與傾斜校正、修飾及保護自己的圖像、挽救及處理色調(diào)問題、瑕疵圖像處理等相關(guān)操作。接下來，大家可以跟隨小艾一起走進Photoshop的圖像處理環(huán)節(jié)。引出本節(jié)重點內(nèi)容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學生分小組思考。相關(guān)知識介紹任務(wù)1掌握剪裁與校正圖像案網(wǎng)頁中的圖像需要拍攝照片時，由于角度或姿勢等問題，拍攝出的照片會出現(xiàn)傾斜效果，如果對這張照片非常喜歡，又不能重新去拍的時候，可以通過Photoshop軟件來對其進行重新構(gòu)圖和修正活動1掌握裁剪圖像不同網(wǎng)頁中的圖像，可以根據(jù)布局對其進行精細的剪裁，例如淘寶網(wǎng)店頁面中有些圖像，在一些特定的區(qū)域中都是需要固定大小的，在插入圖像之前一定要先了解該區(qū)域圖像的大小，所謂磨刀不誤砍柴工，就是在前期將圖像按照固定大小進行創(chuàng)建或裁剪，在這個基礎(chǔ)之上再進行視覺方面的設(shè)計，只有這樣才能真正收到事半功倍的效果。這里以網(wǎng)店頁面中的標準店招作為裁剪對象，標準店招的尺寸是寬度為950像素，高度為120像素。打開一張圖像后，選擇裁剪工具，在屬性欄中設(shè)置“寬度”為“950像素”、“高度”為“120像素”、“分辨率”設(shè)置為“72像素/英寸”，之后使用裁剪工具在圖像中找到自己喜歡的區(qū)域創(chuàng)建一個裁剪框，按”Enter”鍵即可完成裁剪，如圖所示?；顒?掌握校正圖像當找到網(wǎng)頁中需要應(yīng)用的圖像時，難免會發(fā)現(xiàn)有一些圖像會傾斜的情況出現(xiàn)，這種情況多出現(xiàn)在拍攝照片時由于角度或姿勢等問題，會把相片拍歪，如果不想進行重新拍攝，但是，還想繼續(xù)使用這張照片，就需要對其進行相應(yīng)的校正，將其符合網(wǎng)頁的需要。處理前后的對比如圖?；顒?掌握旋轉(zhuǎn)圖像當我們使用數(shù)碼相機拍攝照片時，由于相機沒有自動轉(zhuǎn)正功能，會使輸入到計算機中的照片由直幅變?yōu)闄M躺效果，此時將其直接上傳到網(wǎng)店中會使圖像看起來很不舒服，這會使整個網(wǎng)頁的美感會大大下降。此時即可利用Photoshop即可快速將橫幅的照片轉(zhuǎn)換成直幅效果，旋轉(zhuǎn)前后的對比如圖所示。任務(wù)2掌握添加水印保護圖像如果網(wǎng)頁中出現(xiàn)的照片是自己拍攝的，此時一定會考慮兩個問題一個是如何讓瀏覽者更喜歡網(wǎng)頁中的照片；一個是不想自己辛苦拍攝并處理的照片被別人稍加篡改就可以應(yīng)用到其他網(wǎng)頁中。此時就得從版權(quán)方面考慮，一定要為圖像添加相應(yīng)的版權(quán)保護，例如加一些浮在表面的水印或者是一些圖像圖形等?；顒?掌握添加文字水印為照片添加文字水印，除了能增加其專業(yè)性和整體感外，還能保護自己的照片防止被外人盜用，添加的文字水印一般都比較淡不會影響圖像本身的觀賞性?；顒?掌握添加圖像水印為圖像添加水印，不但可以直接輸入文本，還可以將具有相應(yīng)特征的圖像直接添加到圖像中。圖像性質(zhì)的水印可以是商標，也可以是文字與圖形相結(jié)合的圖像，這樣做也可以防止自己辛苦得到的圖像被盜用任務(wù)3掌握處理色調(diào)問題拍攝照片時并不是所有的圖像都能達到理想效果，有時會因為環(huán)境的問題，拍出的照片會出現(xiàn)發(fā)暗、曝光不足、顏色不正等瑕疵，本次任務(wù)就通過課堂實操的方式為大家講解通過Photoshop校正此類問題的方法?；顒?掌握處理偏暗曝光不足的圖像在太陽下或光線不足的環(huán)境中拍攝相片時，如果沒有控制好相機的設(shè)定，就會拍出太亮或太暗的照片。如果是曝光不足的照片，畫面會出現(xiàn)發(fā)灰或發(fā)黑的效果，從而影響照片的質(zhì)量，要想將照片以最佳的狀態(tài)進行儲存，一是在拍照時調(diào)整好光圈、角度和位置，來得到最佳效果；二是將照片拍壞后，使用Photoshop對其進行修改，得到最佳效果?；顒?掌握處理偏色圖像在日常生活中大家拍攝的照片在顏色方面與現(xiàn)實見到的不太一樣，常常會出現(xiàn)偏色問題，以及顏色鮮艷度等問題，如果不想重拍就得對其進行色偏的調(diào)整?；顒?掌握改變圖像的色調(diào)當前網(wǎng)頁中的圖像尤其是電商網(wǎng)頁的商品琳瑯滿目五顏六色，要想得到此類的效果，在網(wǎng)拍商品時，由于顏色不全而會造成有的顏色產(chǎn)品沒有被拍照，這樣就無法上傳，等到商品到貨后，再拍會浪費很多的時間，這時只要使用Photoshop中的“色相/飽和度”調(diào)整功能，就可以輕松將一種顏色變?yōu)槎喾N顏色，可以是整體調(diào)整也可以是局部調(diào)整，如圖所示。課件設(shè)疑，引起注意，牢牢抓住和吸引學生探究新知識的心理。講練結(jié)合，突出實操能力培養(yǎng)。跟隨老師進入思考分析狀態(tài)。認真完成操作任務(wù)。通過課件引出問題，演示法和指導(dǎo)法，使學生掌握知識點。提高學生操作能力。分組討論組織學生分小組討論引導(dǎo)問題，保證人人有任務(wù)，人人有活干。評分項目評分指標標準分評分儀態(tài)舉止是否得體0.5準備準備是否充分0.5語言聲音是否洪亮、表達是否準確0.5小組配合組分工是否明確，配合是否默契0.5小計2分配小組長任務(wù)。通過引導(dǎo)問題，學生進行分析、思考。各個小組分配任務(wù)進行討論問題。達到培養(yǎng)學生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導(dǎo)問，由全班同學找出問題并由小組代表進行解答。展示并解答問題。學生展示討論成果，回答問題。鍛煉學生表達能力和儀表。鍛煉學生表達能力和儀表。全班查找問題。課堂總結(jié)找最優(yōu)秀小組講解設(shè)計中的注意事項，并由教師點評總結(jié)設(shè)計注意事項，并分組點評各組優(yōu)缺點?？偨Y(jié)點評設(shè)計情況，并歸納知識點。學生總結(jié)所學知識，積極回答問題。學生掌握知識。布置作業(yè)一、對拍攝的圖片進行逐個改色練習布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學習。培養(yǎng)學生學習能力。便于下次課進行。七、教學評價設(shè)計通過小組自我評價、小組評價、教師評價完成對小組進行評價，教師和組長對成員進行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進行成績綜合評定。評價項目評價指標標準分自我評價小組評價教師評價學習態(tài)度學習主動，規(guī)范操作，紀律好2任務(wù)完成知識點掌握，實操完成效果好2小組討論表達清晰，任務(wù)方案科學合理2創(chuàng)新精神運用多種方法創(chuàng)意設(shè)計17S管理現(xiàn)場整理，保持工作環(huán)境整潔1團結(jié)協(xié)作小組成員是否團結(jié)協(xié)作2小計總評小組學習活動綜合評價表八、教學反思網(wǎng)頁設(shè)計與制作教案（第3周）專業(yè)課程學習任務(wù)項目2：掌握網(wǎng)頁中圖像的處理基礎(chǔ)任務(wù)4掌握處理瑕疵圖像綜合實戰(zhàn)—制作網(wǎng)頁中的老照片效果課時6教學對象授課時間設(shè)計者一、學習任務(wù)分析1．熟悉網(wǎng)頁圖像的處理基礎(chǔ)。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網(wǎng)頁設(shè)計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎(chǔ)外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習的方法，讓學生了解所學的內(nèi)容。三、學習目標知識目標：掌握為瑕疵圖像進行處理的方法。能力目標：學會為圖像去掉瑕疵的處理。素質(zhì)目標：明確分工，充分了解團結(jié)協(xié)作在工作中的重要性。用知識武裝自己，提高自身動手操作的能力，增強學習的自信心。四、教學策略重點難點：重點：圖像的處理基礎(chǔ)；難點：對于瑕疵等操作的理解教學方法：演示案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓(xùn)室課前準備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認真設(shè)計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：相信自己，我能行；自律自強，我真行！。展示你們的特色之美，課堂迎來姹紫嫣紅的春天。復(fù)習提問：一、了解網(wǎng)頁設(shè)計關(guān)于圖像部分都需要哪些基礎(chǔ)軟件？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復(fù)習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導(dǎo)問題網(wǎng)頁設(shè)計中只要涉及到圖像，幾乎就會需要對其進行相應(yīng)的處理，無論是為保護自己圖像不被盜用，還是用到的圖像中有一些瑕疵，這些都需要進行一下前期的加工，將其處理成在網(wǎng)頁中屬于自己風格的特色，圖像處理是網(wǎng)頁設(shè)計中不可缺少一項重要內(nèi)容。為此，小艾想使用比較專業(yè)的軟件對圖像進行處理，而同事凱程告訴她，Photoshop就是一個在圖像處理中非常專業(yè)、非常好用的軟件，在處理圖像方面可以將其分為剪裁與傾斜校正、修飾及保護自己的圖像、挽救及處理色調(diào)問題、瑕疵圖像處理等相關(guān)操作。接下來，大家可以跟隨小艾一起走進Photoshop的圖像處理環(huán)節(jié)。引出本節(jié)重點內(nèi)容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學生分小組思考。相關(guān)知識介紹任務(wù)4掌握處理瑕疵圖像在網(wǎng)頁中通常離不開圖像的，如果單獨以文字描述作為網(wǎng)頁，會大大降低瀏覽者對該網(wǎng)頁的興趣，一張好的圖像不但可以直觀地展示該產(chǎn)品所具有的圖形信息還能從中看到其主要的特色，從而加大瀏覽者對該網(wǎng)頁的興趣，在網(wǎng)頁中拍好一張照片并不是一件容易的事情，由于環(huán)境光線、擺放角度、沒有移走的其他物品或相機中自動添加日期都會對當前照片起到一定的副作用，本次任務(wù)講解去掉雜質(zhì)、增強圖像的清晰度和為模特磨皮等相關(guān)知識。活動1掌握去掉圖像中的多余雜質(zhì)本次課上活動講解拍攝照片后，圖像中出現(xiàn)的污點、水印、日期等雜質(zhì)的去除方法。活動2掌握增加圖像的清晰度使用相機進行網(wǎng)拍時，受外界環(huán)境的影響，常常會使照片效果有一種朦朧模糊的感覺，或者是拍攝照片時由于技術(shù)原因，很多照片都會變得有些模糊，看著比較模糊的圖像直接上傳到網(wǎng)頁，會大大降低網(wǎng)頁的整體觀賞度，要想改變就得對其進行模糊變清晰的調(diào)整?；顒?掌握美化模特的皮膚在為服裝拍攝照片時，往往會找到適合當前服裝的模特作為拍攝的載體，但是有時會因為光線或?qū)ο鄼C的不熟悉而造成模特肌膚不夠美白，從而會間接影響服裝的魅力程度，在美的服裝也要模特來襯托，漂亮的模特會大大提升服裝本身的價值，一張漂亮的模特照片可以讓網(wǎng)頁此區(qū)域的美感大大增強。課件設(shè)疑，引起注意，牢牢抓住和吸引學生探究新知識的心理。講練結(jié)合，突出實操能力培養(yǎng)。跟隨老師進入思考分析狀態(tài)。認真完成操作任務(wù)。通過課件引出問題，演示法和指導(dǎo)法，使學生掌握知識點。提高學生操作能力。分組討論組織學生分小組討論引導(dǎo)問題，保證人人有任務(wù)，人人有活干。評分項目評分指標標準分評分儀態(tài)舉止是否得體0.5準備準備是否充分0.5語言聲音是否洪亮、表達是否準確0.5小組配合組分工是否明確，配合是否默契0.5小計2分配小組長任務(wù)。通過引導(dǎo)問題，學生進行分析、思考。各個小組分配任務(wù)進行討論問題。達到培養(yǎng)學生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導(dǎo)問，由全班同學找出問題并由小組代表進行解答。展示并解答問題。學生展示討論成果，回答問題。鍛煉學生表達能力和儀表。鍛煉學生表達能力和儀表。全班查找問題。課堂總結(jié)找最優(yōu)秀小組講解設(shè)計中的注意事項，并由教師點評總結(jié)設(shè)計注意事項，并分組點評各組優(yōu)缺點?？偨Y(jié)點評設(shè)計情況，并歸納知識點。學生總結(jié)所學知識，積極回答問題。學生掌握知識。布置作業(yè)一、練習修復(fù)瑕疵照片布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學習。培養(yǎng)學生學習能力。便于下次課進行。七、教學評價設(shè)計通過小組自我評價、小組評價、教師評價完成對小組進行評價，教師和組長對成員進行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進行成績綜合評定。評價項目評價指標標準分自我評價小組評價教師評價學習態(tài)度學習主動，規(guī)范操作，紀律好2任務(wù)完成知識點掌握，實操完成效果好2小組討論表達清晰，任務(wù)方案科學合理2創(chuàng)新精神運用多種方法創(chuàng)意設(shè)計17S管理現(xiàn)場整理，保持工作環(huán)境整潔1團結(jié)協(xié)作小組成員是否團結(jié)協(xié)作2小計總評小組學習活動綜合評價表八、教學反思網(wǎng)頁設(shè)計與制作教案（第4周）專業(yè)課程學習任務(wù)項目3：掌握網(wǎng)頁中處理圖像時的摳圖技巧任務(wù)1掌握規(guī)則形狀摳圖任務(wù)2掌握簡單背景摳圖任務(wù)3掌握復(fù)雜圖形摳圖課時6教學對象授課時間設(shè)計者一、學習任務(wù)分析1．掌握網(wǎng)頁中對圖像的摳圖方法。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網(wǎng)頁設(shè)計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎(chǔ)外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習的方法，讓學生了解所學的內(nèi)容。三、學習目標知識目標：掌握在制作網(wǎng)頁前為圖像摳圖的方法。能力目標：學會為規(guī)則圖像進行摳圖。學會為簡單背景進行摳圖。學會為復(fù)雜圖形進行摳圖。素質(zhì)目標：不忘初心，堅持使命。在為圖像進行摳圖學習中，充分了解動手操作的重要性。四、教學策略重點難點：重點：快速對圖像進行摳圖；難點：掌握復(fù)雜圖像的摳圖方法。教學方法：演示與案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓(xùn)室課前準備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認真設(shè)計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：你們是真正的女漢子，你們的辛勞和智慧，證明了巾幗可勝須眉。男兒當自強，相信男孩子都不甘在學習上示弱。復(fù)習提問：一、對于上節(jié)課中瑕疵圖像修復(fù)都有哪些方法？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復(fù)習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導(dǎo)問題網(wǎng)頁設(shè)計中的圖像處理環(huán)節(jié)，摳圖是一項不可避免的操作，無論是為單一的圖像替換背景，還是為一系列的圖像統(tǒng)一背景，這些都需要對圖像本身進行摳圖來完成。如果是制作網(wǎng)頁中圖像的合成廣告就更少不了摳圖了。為此，小艾想使用比較專業(yè)的軟件對處理中的摳圖進行處理，而同事凱程告訴她，Photoshop就是一個在摳圖方面具有非常專業(yè)的摳圖功能，在摳圖方面可以將其分為規(guī)則形狀摳圖、簡單背景摳圖、復(fù)雜圖形摳圖、毛發(fā)摳圖和半透明圖像摳圖等操作。接下來，大家可以跟隨小艾一起走進Photoshop的摳圖環(huán)節(jié)。大家可以在本節(jié)中了解各種摳圖方法將拍攝的圖像進行背景替換，使圖像本身更加凸顯，在網(wǎng)頁視覺中引起買家的注意力，從而間接的增加銷量。引出本節(jié)重點內(nèi)容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學生分小組思考。相關(guān)知識介紹任務(wù)1掌握規(guī)則形狀摳圖拍照后想將局部區(qū)域整體移動到自己喜歡的背景中，就要掌握控圖的操作。為圖片進行規(guī)則幾何摳圖可分為圓形與矩形。對于規(guī)則現(xiàn)狀進行摳圖時，常用的工具就是選區(qū)工具中的矩形選框工具和橢圓選框工具活動1掌握矩形摳圖矩形摳圖首先要進行選區(qū)的創(chuàng)建，在Photoshop中常用來創(chuàng)建矩形選區(qū)的工具有矩形選框工具，矩形選框工具使用方法是在圖像中按住鼠標向?qū)峭蟿铀砷_鼠標即可創(chuàng)建選區(qū)，如圖所示，主要應(yīng)用在對圖像選區(qū)要求不太嚴格的圖像中?；顒?掌握正圓摳圖正圓摳圖首先要進行選區(qū)的創(chuàng)建，在Photoshop中常用來創(chuàng)建正圓選區(qū)的工具有橢圓選框工具，使用方法與矩形選框工具類似，如圖所示。選區(qū)創(chuàng)建完畢后，將選區(qū)內(nèi)的圖像拖曳到新文檔中即可完成摳圖。任務(wù)2掌握簡單背景摳圖對于拍攝的照片進行摳圖時，如果背景色是單色時，摳圖時可以使用魔術(shù)橡皮擦，快速選擇工具、對象選擇工具和魔棒工具，以上的四種工具可以通過智能運算的方式進行圖像的選取?；顒?掌握魔術(shù)橡皮擦摳圖使用魔術(shù)橡皮擦工具可以快速去掉圖片的背景。該工具的使用方法非常簡單，只要選擇要清除的顏色范圍，單擊即可將其清除，刪除背景色后的圖片可以直接拖曳到新背景圖片中，如圖所示?；顒?掌握快速選擇工具摳圖使用快速選擇工具可以快速在圖像中對需要選取的部分建立選區(qū)，使用方法非常簡單，只要選擇該工具后，使用指針在圖像中拖動即可將鼠標經(jīng)過的地方創(chuàng)建選區(qū)，選區(qū)創(chuàng)建完畢后，將選區(qū)內(nèi)的圖像拖曳到新文檔中完成摳圖，如圖所示?；顒?掌握對象選擇工具摳圖使用對象選擇工具創(chuàng)建選區(qū)時，是非常方便的一個工具，在在需要選取的范圍上大致創(chuàng)建一個選取范圍，可以是矩形選區(qū)，也可以是不規(guī)則選區(qū)，松開鼠標后即可將需要的內(nèi)容進行選擇，選區(qū)創(chuàng)建完畢后可以將其進行色相的調(diào)整以此來改變色調(diào)，如圖所示?；顒?掌握魔術(shù)棒工具摳圖使用魔棒工具能選取圖像中顏色相同或相近的像素，像素之間可以是相連的也可以是不連續(xù)的。通常情況下使用魔棒工具可以快速創(chuàng)建圖像顏色相近像素的選區(qū)，創(chuàng)建選區(qū)的方法非常簡單，只要在圖像中某個顏色像素上單擊，系統(tǒng)便會自動以該選取點為樣本創(chuàng)建選區(qū)，反選選區(qū)后可以移動圖像到新背景中，如圖所示。任務(wù)3掌握復(fù)雜圖形摳圖拍攝對象的類型不同形狀也會有所不同，對于不規(guī)整形狀的寶貝進行摳圖時，就需要使用一些操作比較復(fù)雜的工具來完成，本小節(jié)為大家介紹一下磁性套索工具、多邊形套索工具和鋼筆工具在摳圖時的使用方法。活動1掌握多邊形套索工具摳圖多邊形套索工具通常用來創(chuàng)建較為精確的選區(qū)。創(chuàng)建選區(qū)的方法也非常簡單，在不同位置上單擊鼠標，即可將兩點以直線的形式連接，起點與終點相交時單擊即可得到選區(qū)，如圖所示?；顒?掌握磁性套索工具摳圖磁性套索工具可以在圖像中自動捕捉具有反差顏色的圖像邊緣，并以此來創(chuàng)建選區(qū)，此工具常用在背景復(fù)雜但邊緣對比度較強烈的圖像中。創(chuàng)建選區(qū)的方法也非常簡單，在圖像中選擇起點后沿邊緣拖動即可自動創(chuàng)建選區(qū)，如圖所示?；顒?掌握鋼筆工具摳圖使用鋼筆工具可以精確地繪制出直線或光滑的曲線，還可以創(chuàng)建形狀圖層。該工具的使用方法也非常簡單。只要在頁面中選擇一個點單擊，再移動到下一點單擊，就會創(chuàng)建直線路徑；在下一點按下鼠標并拖動會創(chuàng)建曲線路徑，按”Enter”鍵繪制的路徑會形成不封閉的路徑；在繪制路徑的過程中，當起始點的錨點與終點的錨點相交時，鼠標指針會變成形狀，此時單擊鼠標，系統(tǒng)會將該路徑創(chuàng)建成封閉路徑。1創(chuàng)建路徑使用鋼筆工具可以繪制直線路徑、曲線路徑和封閉路徑，在文檔中選擇鋼筆工具后，在頁面中選擇起點單擊移動到另一點后再單擊，會得到如圖3-28所示的直線路徑；選擇鋼筆工具后，在頁面中選擇起點單擊移動到另一點后按下鼠標拖動，會得到如圖3-29所示曲線路徑；在頁面中選擇起點單擊移動到另一點后按下鼠標拖動，松開鼠標后拖動到起始點單擊會得到如圖所示封閉路徑。2路徑轉(zhuǎn)換為選區(qū)通過鋼筆工具創(chuàng)建的路徑是不能直接進行摳圖的，此時我們只要將創(chuàng)建的路徑轉(zhuǎn)換為選區(qū)，就可以應(yīng)用移動工具將選區(qū)內(nèi)的圖像移動到新背景中完成摳圖，在Photoshop中將路徑轉(zhuǎn)換為選區(qū)的方法很簡單，可以是直接通過按Ctrl+Enter鍵將路徑轉(zhuǎn)換為選區(qū)；還可以通過“路徑”面板中的“將路徑作為選區(qū)載入”按鈕將路徑轉(zhuǎn)換為選區(qū)；如果在Photoshop2022中可以直接在“屬性欄”中單擊“建立選區(qū)”按鈕將路徑轉(zhuǎn)換為選區(qū)；或者在“彈出”菜單中執(zhí)行“建立選區(qū)”命令，將路徑轉(zhuǎn)換為選區(qū)，如圖所示。課件設(shè)疑，引起注意，牢牢抓住和吸引學生探究新知識的心理。講練結(jié)合，突出實操能力培養(yǎng)。跟隨老師進入思考分析狀態(tài)。認真完成操作任務(wù)。通過課件引出問題，演示法和指導(dǎo)法，使學生掌握知識點。提高學生操作能力。分組討論組織學生分小組討論引導(dǎo)問題，保證人人有任務(wù)，人人有活干。評分項目評分指標標準分評分儀態(tài)舉止是否得體0.5準備準備是否充分0.5語言聲音是否洪亮、表達是否準確0.5小組配合組分工是否明確，配合是否默契0.5小計2分配小組長任務(wù)。通過引導(dǎo)問題，學生進行分析、思考。各個小組分配任務(wù)進行討論問題。達到培養(yǎng)學生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導(dǎo)問，由全班同學找出問題并由小組代表進行解答。展示并解答問題。學生展示討論成果，回答問題。鍛煉學生表達能力和儀表。鍛煉學生表達能力和儀表。全班查找問題。課堂總結(jié)找最優(yōu)秀小組講解設(shè)計中的注意事項，并由教師點評總結(jié)設(shè)計注意事項，并分組點評各組優(yōu)缺點?？偨Y(jié)點評設(shè)計情況，并歸納知識點。學生總結(jié)所學知識，積極回答問題。學生掌握知識。布置作業(yè)一、練習鋼筆工具為帽子進行摳圖布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學習。培養(yǎng)學生學習能力。便于下次課進行。七、教學評價設(shè)計通過小組自我評價、小組評價、教師評價完成對小組進行評價，教師和組長對成員進行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進行成績綜合評定。評價項目評價指標標準分自我評價小組評價教師評價學習態(tài)度學習主動，規(guī)范操作，紀律好2任務(wù)完成知識點掌握，實操完成效果好2小組討論表達清晰，任務(wù)方案科學合理2創(chuàng)新精神運用多種方法創(chuàng)意設(shè)計17S管理現(xiàn)場整理，保持工作環(huán)境整潔1團結(jié)協(xié)作小組成員是否團結(jié)協(xié)作2小計總評小組學習活動綜合評價表八、教學反思網(wǎng)頁設(shè)計與制作教案（第5周）專業(yè)課程學習任務(wù)項目3：掌握網(wǎng)頁中處理圖像時的摳圖技巧任務(wù)4掌握毛發(fā)摳圖技巧任務(wù)5掌握半透明圖像摳圖技巧綜合實戰(zhàn)—設(shè)計與制作運動網(wǎng)頁課時6教學對象授課時間設(shè)計者一、學習任務(wù)分析1．掌握網(wǎng)頁中對毛發(fā)圖像和半透明圖像的摳圖方法。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網(wǎng)頁設(shè)計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎(chǔ)外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習的方法，讓學生了解所學的內(nèi)容。三、學習目標知識目標：掌握為人物毛發(fā)進行摳圖的方法。掌握為半透明圖像進行摳圖的方法。能力目標：學會為毛發(fā)區(qū)域進行摳圖。學會為半透明玻璃杯進行摳圖。素質(zhì)目標：不忘初心，堅持使命。在為圖像進行摳圖學習中，充分了解動手操作的重要性。四、教學策略重點難點：重點：快速對毛發(fā)圖像進行摳圖；難點：掌握半透明圖像的摳圖方法。教學方法：演示與案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓(xùn)室課前準備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認真設(shè)計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：他雖然是基礎(chǔ)較差的，但他是課堂上最努力的你有一個和偉人相近的名字，只要盡心盡力，你在我們眼里和偉人一樣偉大。復(fù)習提問：一、對于上節(jié)課中有哪些摳圖方法？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復(fù)習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導(dǎo)問題網(wǎng)頁設(shè)計中的圖像處理環(huán)節(jié)，摳圖是一項不可避免的操作，無論是為單一的圖像替換背景，還是為一系列的圖像統(tǒng)一背景，這些都需要對圖像本身進行摳圖來完成。如果是制作網(wǎng)頁中圖像的合成廣告就更少不了摳圖了。為此，小艾想使用比較專業(yè)的軟件對處理中的摳圖進行處理，而同事凱程告訴她，Photoshop就是一個在摳圖方面具有非常專業(yè)的摳圖功能，在摳圖方面可以將其分為規(guī)則形狀摳圖、簡單背景摳圖、復(fù)雜圖形摳圖、毛發(fā)摳圖和半透明圖像摳圖等操作。接下來，大家可以跟隨小艾一起走進Photoshop的摳圖環(huán)節(jié)。大家可以在本節(jié)中了解各種摳圖方法將拍攝的圖像進行背景替換，使圖像本身更加凸顯，在網(wǎng)頁視覺中引起買家的注意力，從而間接的增加銷量。引出本節(jié)重點內(nèi)容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學生分小組思考。相關(guān)知識介紹任務(wù)4掌握毛發(fā)摳圖技巧拍攝有模特或動物參與的圖片時，摳圖時會遇到人物的發(fā)絲或動物的毛發(fā)區(qū)域，如果使用多邊形套索工具或鋼筆工具進行摳圖時，會發(fā)現(xiàn)頭發(fā)區(qū)域會出現(xiàn)背景摳不干凈的效果，如圖所示。任務(wù)5掌握半透明圖像摳圖技巧在Photoshop中，對半透明對象進行摳圖，可以在“通道”面板中完成。使用“通道”進行摳圖時，通常需要應(yīng)用一些工具結(jié)合“通道”面板進行操作。在操作完畢之后，必須要把編輯的通道轉(zhuǎn)換為選區(qū)，再通過移動工具將選區(qū)內(nèi)的圖片拖動到新背景中完成摳圖，對通道進行編輯時主要使用畫筆工具，通道中黑色部分為保護區(qū)域，白色區(qū)域為可編輯的位置，灰色區(qū)域?qū)?chuàng)建半透明效果，如圖所示。課件設(shè)疑，引起注意，牢牢抓住和吸引學生探究新知識的心理。講練結(jié)合，突出實操能力培養(yǎng)。跟隨老師進入思考分析狀態(tài)。認真完成操作任務(wù)。通過課件引出問題，演示法和指導(dǎo)法，使學生掌握知識點。提高學生操作能力。分組討論組織學生分小組討論引導(dǎo)問題，保證人人有任務(wù)，人人有活干。評分項目評分指標標準分評分儀態(tài)舉止是否得體0.5準備準備是否充分0.5語言聲音是否洪亮、表達是否準確0.5小組配合組分工是否明確，配合是否默契0.5小計2分配小組長任務(wù)。通過引導(dǎo)問題，學生進行分析、思考。各個小組分配任務(wù)進行討論問題。達到培養(yǎng)學生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導(dǎo)問，由全班同學找出問題并由小組代表進行解答。展示并解答問題。學生展示討論成果，回答問題。鍛煉學生表達能力和儀表。鍛煉學生表達能力和儀表。全班查找問題。課堂總結(jié)找最優(yōu)秀小組講解設(shè)計中的注意事項，并由教師點評總結(jié)設(shè)計注意事項，并分組點評各組優(yōu)缺點。總結(jié)點評設(shè)計情況，并歸納知識點。學生總結(jié)所學知識，積極回答問題。學生掌握知識。布置作業(yè)一、練習對半透明婚紗進行摳圖布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學習。培養(yǎng)學生學習能力。便于下次課進行。七、教學評價設(shè)計通過小組自我評價、小組評價、教師評價完成對小組進行評價，教師和組長對成員進行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進行成績綜合評定。評價項目評價指標標準分自我評價小組評價教師評價學習態(tài)度學習主動，規(guī)范操作，紀律好2任務(wù)完成知識點掌握，實操完成效果好2小組討論表達清晰，任務(wù)方案科學合理2創(chuàng)新精神運用多種方法創(chuàng)意設(shè)計17S管理現(xiàn)場整理，保持工作環(huán)境整潔1團結(jié)協(xié)作小組成員是否團結(jié)協(xié)作2小計總評小組學習活動綜合評價表八、教學反思網(wǎng)頁設(shè)計與制作教案（第6周）專業(yè)課程學習任務(wù)項目4：了解文字與圖層任務(wù)1了解創(chuàng)建文字的工具任務(wù)2掌握文字的編輯任務(wù)3掌握段落文字任務(wù)4認識圖層任務(wù)5掌握智能對象任務(wù)6掌握圖層蒙版課時6教學對象授課時間設(shè)計者一、學習任務(wù)分析1．掌握文字編輯、圖層相關(guān)編輯的使用。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網(wǎng)頁設(shè)計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎(chǔ)外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習的方法，讓學生了解所學的內(nèi)容。三、學習目標知識目標：掌握在Photoshop中文字的創(chuàng)建與編輯的方法。掌握在Photoshop中認識圖層與編輯圖層的方法。掌握智能對象與圖層樣式的編輯方法。能力目標：學會文字的鍵入。學會編輯文本。學會圖層的運用。學會圖層蒙版的編輯。素質(zhì)目標：充分運用文字，展現(xiàn)正能量對人生觀的引導(dǎo)。在學習實踐中培養(yǎng)邊學邊練的習慣，提升動手操作能力。四、教學策略重點難點：重點：文字的使用與編輯應(yīng)用；難點：掌握圖層的編輯與的使用。教學方法：演示案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓(xùn)室課前準備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認真設(shè)計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：能給四十幾位未來的圣賢上課，是老師莫大的快樂。見證同學們成長的足跡，是老師最欣慰的事情之一。復(fù)習提問：一、對于半透明圖像摳圖還有哪些不懂得？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復(fù)習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導(dǎo)問題網(wǎng)頁設(shè)計中離不開文字和圖像，在Photoshop中只要應(yīng)用這兩項內(nèi)容就會用到圖層，通過圖層可以對文本和圖像有一個更好的管理和編輯，這兩項內(nèi)容也是要認真學習的。為此，小艾想對圖層和文字有個更好的學習方向，而同事凱程則告訴她，Photoshop這個軟件就可以對她的要求做出全面的解決，只要認真的對軟件中的文字和圖層進行了解，就能對她的工作和學習起到非常大幫助，Photoshop不但能鍵入文字，還能對文字進行非常專業(yè)編輯和排版，結(jié)合圖層的運用能夠更好的在網(wǎng)頁中發(fā)揮作用。接下來，大家可以跟隨小艾一起走進Photoshop的文字與圖層環(huán)節(jié)。大家可以在本節(jié)中了解各種文字與圖層的使用和編輯方法，做好網(wǎng)頁設(shè)計的基礎(chǔ)工作部分，處理好的圖像加上文字的點綴和說明，能讓網(wǎng)頁更加具有視覺沖擊力，更能發(fā)揮網(wǎng)頁的功能。引出本節(jié)重點內(nèi)容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學生分小組思考。相關(guān)知識介紹任務(wù)1了解創(chuàng)建文字的工具文字的主要功能是在視覺傳達中向大眾傳達作者的意圖和各種信息，要達到這一目的必須考慮文字的整體訴求效果，給人以清晰的視覺印象。因此，設(shè)計中的文字應(yīng)避免繁雜零亂，使人易認，易懂，切忌為了設(shè)計而設(shè)計，忘記了文字設(shè)計的根本目的是為了更好，更有效的傳達作者的意圖，表達設(shè)計的主題和構(gòu)想意念，在Photoshop中能夠直接創(chuàng)建文字工具只有橫排文字工具和直排文字工具。在文檔中輸入文字后，系統(tǒng)會自動在“圖層”面板中創(chuàng)建一個文字圖層?；顒?了解橫排文字工具在Photoshop中使用橫排文字工具可以在水平方向上鍵入橫排文字，該工具也是文字工具組中最基本的文字輸入工具同時也是使用最頻繁的一個工具。橫排文字工具的使用方法非常簡單，只要在“工具箱”中選擇橫排文字工具，之后再拖動光標到到畫面中找到要輸入文字的地方，單擊鼠標會出現(xiàn)圖標，此時輸入所需要的文字即可，輸入方法如圖所示?；顒?了解直排文字的鍵入在Photoshop中使用直排文字工具可以在垂直方向上鍵入豎排文字，該工具的使用方法與橫排文字工具相同，就是屬性欄也是一模一樣的，具體輸入方法如圖4-11所示。任務(wù)2掌握文字的編輯在Photoshop中編輯文字指的是對已經(jīng)創(chuàng)建的文字，通過“屬性欄”、“字符”面板、“段落”面板或“文字”菜單進行重新的設(shè)置，例如設(shè)置文字行距、文字縮放、基線偏移以及對文字的變形等等，活動1掌握對已建文本的基礎(chǔ)編輯屬性欄中針對文字的設(shè)置，已經(jīng)講過了，本次任務(wù)主要講解在“字符”面板中關(guān)于文字的一些基本編輯?；顒?掌握文字變形在Photoshop中通過“文字變形”命令可以對輸入的文字進行更加藝術(shù)化的變形，使文字更加具有觀賞感，變形后的文字仍然具有文字所具有的共性?！拔淖肿冃巍泵羁梢酝ㄟ^在鍵入文字后直接單擊“文字變形”按鈕來執(zhí)行，或者執(zhí)行菜單欄中的“圖層/文字/文字變形”命令來打開“變形文字”對話框，如圖所示。任務(wù)3掌握段落文字在Photoshop中使用文字工具不但可以創(chuàng)建點文字，還可以創(chuàng)建大段的段落文本，在創(chuàng)建段落文字時，文字基于定界框的尺寸自動換行。任務(wù)4認識圖層對圖層進行操作可以說是Photoshop中使用最為頻繁的一項工作。通過建立圖層，然后在各個圖層中分別編輯圖像中的各個元素，可以產(chǎn)生既富有層次，又彼此關(guān)聯(lián)的整體圖像效果。所以在編輯圖像的同時圖層是必不可缺的?；顒?認識圖層的原理圖層與圖層之間并不等于完全的白紙與白紙的重合，圖層的工作原理類似于在印刷上使用的一張張重疊在一起的醋酸纖紙，透過圖層中透明或半透明區(qū)域，可以看到下一圖層相應(yīng)區(qū)域的內(nèi)容，如圖所示?；顒?認識圖層面板每一個圖層都是由許多像素組成的，而圖層又通過上下疊加的方式來組成整個圖像。打個比喻，每一個圖層就好似是一個透明的“玻璃”，而圖層內(nèi)容就畫在這些“玻璃”上，如果“玻璃”什么都沒有，這就是個完全透明的空圖層，當各“玻璃”都有圖像時，自上而下俯視所有圖層，從而形成圖像顯示效果，對圖層的編輯可以通過菜單或面板來完成?！皥D層”被存放在“圖層”面板中，其中包含當前圖層、文字圖層、背景圖層、智能對象圖層等。執(zhí)行菜單欄中的“窗口/圖層”命令，即可打開“圖層”面板，“圖層”面板中所包含的內(nèi)容如圖所示。任務(wù)5掌握智能對象將圖像轉(zhuǎn)換成智能對象后，將圖像縮小，再復(fù)原到原來大小后，圖像的像素不會丟失，智能對象還支持多層嵌套功能和應(yīng)用濾鏡并將應(yīng)用的濾鏡顯示在智能對象圖層的下方。任務(wù)6掌握圖層蒙版圖層蒙版可以理解為在當前圖層上面覆蓋一層玻璃片，這種玻璃片有：透明和黑色不透明兩種，前者顯示全部，后者隱藏部分。然后用各種繪圖工具在蒙版上（既玻璃片上）涂色（只能涂黑、白、灰色），涂黑色的地方蒙版變?yōu)椴煌该?，看不見當前圖層的圖像，涂白色則使涂色部分變?yōu)橥该骺煽吹疆斍皥D層上的圖像，涂灰色使蒙版變?yōu)榘胪该鳎该鞯某潭扔赏可纳顪\決定。圖層蒙版可以用來在圖層與圖層之間創(chuàng)建無縫的合成圖像，并且對圖層中的圖像不造成破壞。課件設(shè)疑，引起注意，牢牢抓住和吸引學生探究新知識的心理。講練結(jié)合，突出實操能力培養(yǎng)。跟隨老師進入思考分析狀態(tài)。認真完成操作任務(wù)。通過課件引出問題，演示法和指導(dǎo)法，使學生掌握知識點。提高學生操作能力。分組討論組織學生分小組討論引導(dǎo)問題，保證人人有任務(wù)，人人有活干。評分項目評分指標標準分評分儀態(tài)舉止是否得體0.5準備準備是否充分0.5語言聲音是否洪亮、表達是否準確0.5小組配合組分工是否明確，配合是否默契0.5小計2分配小組長任務(wù)。通過引導(dǎo)問題，學生進行分析、思考。各個小組分配任務(wù)進行討論問題。達到培養(yǎng)學生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導(dǎo)問，由全班同學找出問題并由小組代表進行解答。展示并解答問題。學生展示討論成果，回答問題。鍛煉學生表達能力和儀表。鍛煉學生表達能力和儀表。全班查找問題。課堂總結(jié)找最優(yōu)秀小組講解設(shè)計中的注意事項，并由教師點評總結(jié)設(shè)計注意事項，并分組點評各組優(yōu)缺點?？偨Y(jié)點評設(shè)計情況，并歸納知識點。學生總結(jié)所學知識，積極回答問題。學生掌握知識。布置作業(yè)一、通過文字變形制作立體變形字布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學習。培養(yǎng)學生學習能力。便于下次課進行。七、教學評價設(shè)計通過小組自我評價、小組評價、教師評價完成對小組進行評價，教師和組長對成員進行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進行成績綜合評定。評價項目評價指標標準分自我評價小組評價教師評價學習態(tài)度學習主動，規(guī)范操作，紀律好2任務(wù)完成知識點掌握，實操完成效果好2小組討論表達清晰，任務(wù)方案科學合理2創(chuàng)新精神運用多種方法創(chuàng)意設(shè)計17S管理現(xiàn)場整理，保持工作環(huán)境整潔1團結(jié)協(xié)作小組成員是否團結(jié)協(xié)作2小計總評小組學習活動綜合評價表八、教學反思網(wǎng)頁設(shè)計與制作教案（第7周）專業(yè)課程學習任務(wù)項目4：了解文字與圖層任務(wù)7掌握操控變形綜合實戰(zhàn)—設(shè)計與制作加濕器宣傳網(wǎng)頁項目5：掌握切片與網(wǎng)頁圖像任務(wù)1了解網(wǎng)頁切片任務(wù)2掌握網(wǎng)頁圖像課時6教學對象授課時間設(shè)計者一、學習任務(wù)分析1．掌握網(wǎng)頁切片的使用。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網(wǎng)頁設(shè)計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎(chǔ)外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習的方法，讓學生了解所學的內(nèi)容。三、學習目標知識目標：掌握網(wǎng)頁切片輸出的方法。掌握網(wǎng)頁圖像的優(yōu)化與輸出的方法。能力目標：學會為制作的網(wǎng)頁創(chuàng)建切片。學會為制作的切片進行輸出。學會為網(wǎng)頁圖像進行優(yōu)化。學會為網(wǎng)頁圖像進行輸出。素質(zhì)目標：積極積累網(wǎng)頁各個方面知識點并將其在工作中進行運用。四、教學策略重點難點：重點：了解操控變形的應(yīng)用；難點：掌握切片的編輯與的使用。教學方法：演示案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓(xùn)室課前準備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認真設(shè)計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：一個在家能主動幫助父母，在學校主動幫助老師同學的人，一定是一個優(yōu)秀的人。送人玫瑰，手留余香。助人者，收獲的是能力的提高和心靈的愉悅。復(fù)習提問：一、對于圖層有哪些不懂得？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復(fù)習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導(dǎo)問題如果網(wǎng)頁上的圖像較大，瀏覽器下載整個圖像需要花很長的時間。切片就是將一幅大圖像分割為一些小的圖像切片，然后在網(wǎng)頁中通過沒有間距和寬度的表格重新將這些小的圖像沒有縫隙的拼接起來，成為一幅完整的圖像。這樣做可以減小圖像的大小，減少網(wǎng)頁的下載時間，還能將圖像的一些區(qū)域用HTML來代替。為此，小艾想使用比較專業(yè)的軟件對處理中的網(wǎng)頁進行輸出優(yōu)化，而同事凱程告訴她，Photoshop就可以完成對一個設(shè)計的網(wǎng)頁進行切片制作并輸出的功能。在此方面只要了解網(wǎng)頁切片輸出和網(wǎng)頁圖像的優(yōu)化與輸出即可。引出本節(jié)重點內(nèi)容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學生分小組思考。相關(guān)知識介紹任務(wù)7掌握操控變形該功能能夠通過添加的顯示網(wǎng)格和圖釘對圖層中的圖像進行變形，從而使僵化的變換變得更加具有柔性，使變換后的圖像更符合創(chuàng)作者的要求，變換后的效果如圖所示。任務(wù)1了解網(wǎng)頁切片“切片工具”是Photoshop軟件自帶的一個平面圖片切割工具。使用“切片”工具可以將一個完整的網(wǎng)頁切割成許多小圖片，以便于從網(wǎng)絡(luò)上下載?；顒?了解創(chuàng)建切片Photoshop中的切片工具主要用于在制作網(wǎng)頁時候?qū)D片進行“瘦身”，它可以在不損失圖像效果的前提下，減小文件的容量。在打開的圖片上，使用切片工具，將光標置于要創(chuàng)建切片的位置，按住鼠標左鍵拖動，拖動到合適的切片大小繪制切片，具體的創(chuàng)建過程與矩形選框工具相同，如圖所示?；顒?了解編輯切片如果切片大小不合適，還可以調(diào)整和編輯切片，在圖片中創(chuàng)建切片后，單擊鼠標右鍵，在彈出的快捷菜單中選擇“劃分切片”命令，在彈出的“劃分切片”對話框中，將劃分切片的“垂直劃分為”設(shè)置為3，設(shè)置完畢單擊“確定”按鈕，完成切片的劃分，如圖所示。任務(wù)2掌握網(wǎng)頁圖像優(yōu)化網(wǎng)頁使之能快速下載是頁面制作中很重要的考慮因素。網(wǎng)頁優(yōu)化涉及方方面面，圖片優(yōu)化則是其中重要手段之一，本此任務(wù)就講述如何進行網(wǎng)頁圖像的優(yōu)化?；顒?掌握圖像的優(yōu)化及應(yīng)用顏色表圖像的優(yōu)化應(yīng)用顏色表活動2掌握圖像大小及保存圖像圖像大小保存圖像課件設(shè)疑，引起注意，牢牢抓住和吸引學生探究新知識的心理。講練結(jié)合，突出實操能力培養(yǎng)。跟隨老師進入思考分析狀態(tài)。認真完成操作任務(wù)。通過課件引出問題，演示法和指導(dǎo)法，使學生掌握知識點。提高學生操作能力。分組討論組織學生分小組討論引導(dǎo)問題，保證人人有任務(wù)，人人有活干。評分項目評分指標標準分評分儀態(tài)舉止是否得體0.5準備準備是否充分0.5語言聲音是否洪亮、表達是否準確0.5小組配合組分工是否明確，配合是否默契0.5小計2分配小組長任務(wù)。通過引導(dǎo)問題，學生進行分析、思考。各個小組分配任務(wù)進行討論問題。達到培養(yǎng)學生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導(dǎo)問，由全班同學找出問題并由小組代表進行解答。展示并解答問題。學生展示討論成果，回答問題。鍛煉學生表達能力和儀表。鍛煉學生表達能力和儀表。全班查找問題。課堂總結(jié)找最優(yōu)秀小組講解設(shè)計中的注意事項，并由教師點評總結(jié)設(shè)計注意事項，并分組點評各組優(yōu)缺點?？偨Y(jié)點評設(shè)計情況，并歸納知識點。學生總結(jié)所學知識，積極回答問題。學生掌握知識。布置作業(yè)一、為圖像創(chuàng)建切片并設(shè)置鏈接布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學習。培養(yǎng)學生學習能力。便于下次課進行。七、教學評價設(shè)計通過小組自我評價、小組評價、教師評價完成對小組進行評價，教師和組長對成員進行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進行成績綜合評定。評價項目評價指標標準分自我評價小組評價教師評價學習態(tài)度學習主動，規(guī)范操作，紀律好2任務(wù)完成知識點掌握，實操完成效果好2小組討論表達清晰，任務(wù)方案科學合理2創(chuàng)新精神運用多種方法創(chuàng)意設(shè)計17S管理現(xiàn)場整理，保持工作環(huán)境整潔1團結(jié)協(xié)作小組成員是否團結(jié)協(xié)作2小計總評小組學習活動綜合評價表八、教學反思網(wǎng)頁設(shè)計與制作教案（第8周）專業(yè)課程學習任務(wù)項目5：掌握切片與網(wǎng)頁圖像綜合實戰(zhàn)—網(wǎng)頁頁面的切割與優(yōu)化綜合實戰(zhàn)—設(shè)計網(wǎng)頁Logo綜合實戰(zhàn)—設(shè)計網(wǎng)頁導(dǎo)航條課時6教學對象授課時間設(shè)計者一、學習任務(wù)分析1．掌握網(wǎng)頁切片及制作網(wǎng)頁圖像的使用。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網(wǎng)頁設(shè)計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎(chǔ)外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習的方法，讓學生了解所學的內(nèi)容。三、學習目標知識目標：學習網(wǎng)頁圖像制作方法方法。能力目標：學會對圖像的切割與優(yōu)化。素質(zhì)目標：積極積累網(wǎng)頁各個方面知識點并將其在工作中進行運用。四、教學策略重點難點：重點：學習網(wǎng)頁圖像制作方法；難點：利用所學知識制作導(dǎo)航條。教學方法：演示案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓(xùn)室課前準備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認真設(shè)計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：學會幫助他人、服務(wù)社會，是每個人成長的第一要義。每個人都有一個遼闊的內(nèi)心世界。一個摒棄了自私自利之心的人，才能真正擁有它。復(fù)習提問：一、對于切片的使用哪里不太懂？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復(fù)習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導(dǎo)問題如果網(wǎng)頁上的圖像較大，瀏覽器下載整個圖像需要花很長的時間。切片就是將一幅大圖像分割為一些小的圖像切片，然后在網(wǎng)頁中通過沒有間距和寬度的表格重新將這些小的圖像沒有縫隙的拼接起來，成為一幅完整的圖像。這樣做可以減小圖像的大小，減少網(wǎng)頁的下載時間，還能將圖像的一些區(qū)域用HTML來代替。為此，小艾想使用比較專業(yè)的軟件對處理中的網(wǎng)頁進行輸出優(yōu)化，而同事凱程告訴她，Photoshop就可以完成對一個設(shè)計的網(wǎng)頁進行切片制作并輸出的功能。在此方面只要了解網(wǎng)頁切片輸出和網(wǎng)頁圖像的優(yōu)化與輸出即可。引出本節(jié)重點內(nèi)容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學生分小組思考。相關(guān)知識介紹課件設(shè)疑，引起注意，牢牢抓住和吸引學生探究新知識的心理。講練結(jié)合，突出實操能力培養(yǎng)。跟隨老師進入思考分析狀態(tài)。認真完成操作任務(wù)。通過課件引出問題，演示法和指導(dǎo)法，使學生掌握知識點。提高學生操作能力。分組討論組織學生分小組討論引導(dǎo)問題，保證人人有任務(wù)，人人有活干。評分項目評分指標標準分評分儀態(tài)舉止是否得體0.5準備準備是否充分0.5語言聲音是否洪亮、表達是否準確0.5小組配合組分工是否明確，配合是否默契0.5小計2分配小組長任務(wù)。通過引導(dǎo)問題，學生進行分析、思考。各個小組分配任務(wù)進行討論問題。達到培養(yǎng)學生分工合作和查找資料能力。小組展示各小組派代表上黑板前展示自己小組引導(dǎo)問，由全班同學找出問題并由小組代表進行解答。展示并解答問題。學生展示討論成果，回答問題。鍛煉學生表達能力和儀表。鍛煉學生表達能力和儀表。全班查找問題。課堂總結(jié)找最優(yōu)秀小組講解設(shè)計中的注意事項，并由教師點評總結(jié)設(shè)計注意事項，并分組點評各組優(yōu)缺點?？偨Y(jié)點評設(shè)計情況，并歸納知識點。學生總結(jié)所學知識，積極回答問題。學生掌握知識。布置作業(yè)為圖像創(chuàng)建切片并設(shè)置鏈接設(shè)計一個玩具logo布置作業(yè)，并講解具體要求。記錄并在課下思考問題，主動學習。培養(yǎng)學生學習能力。便于下次課進行。七、教學評價設(shè)計通過小組自我評價、小組評價、教師評價完成對小組進行評價，教師和組長對成員進行評價，回答問題加1分；演示操作加2分，第一名小組的成員每人加1分。記入平面成績，期末進行成績綜合評定。評價項目評價指標標準分自我評價小組評價教師評價學習態(tài)度學習主動，規(guī)范操作，紀律好2任務(wù)完成知識點掌握，實操完成效果好2小組討論表達清晰，任務(wù)方案科學合理2創(chuàng)新精神運用多種方法創(chuàng)意設(shè)計17S管理現(xiàn)場整理，保持工作環(huán)境整潔1團結(jié)協(xié)作小組成員是否團結(jié)協(xié)作2小計總評小組學習活動綜合評價表八、教學反思網(wǎng)頁設(shè)計與制作教案（第9周）專業(yè)課程學習任務(wù)項目6：創(chuàng)建本地站點和基本文本網(wǎng)頁任務(wù)1了解Dreamweaver的工作環(huán)境任務(wù)2掌握創(chuàng)建與管理站點任務(wù)3掌握網(wǎng)頁中插入文本任務(wù)4掌握插入其他文本元素綜合實戰(zhàn)—創(chuàng)建基本文本網(wǎng)頁課時6教學對象授課時間設(shè)計者一、學習任務(wù)分析1．掌對創(chuàng)建站點及基本文本網(wǎng)頁的制作。2．教材中的知識與案例均是從實際工作中精選而來，具有很強的應(yīng)用性和示范作用。同時教材結(jié)構(gòu)清晰、內(nèi)容翔實、語言淺顯易懂，并配以精美的素材圖片。二、學情分析對于剛剛接觸網(wǎng)頁設(shè)計的學生，思想活躍，有探索新知識的強烈心理，專業(yè)課的學習，除需要一定專業(yè)基礎(chǔ)外，還需要學生具有很強的技能操作能力，所以在本次課的講授中，采用演示、引導(dǎo)、任務(wù)練習的方法，讓學生了解所學的內(nèi)容。三、學習目標知識目標：掌握Dreamweaver軟件的環(huán)境及各個功能掌握在創(chuàng)建站點方面的方法。掌握在管理站點方面的方法。掌握在軟件中插入文本的方法。掌握在軟件中插入其他文本元素的方法。能力目標：學會創(chuàng)建和管理站點。學會插入文本。學會插入其他文本元素。素質(zhì)目標：不忘初心，牢記使命，了解萬丈高樓平地起，做事要一步一步的來的原則。四、教學策略重點難點：重點：創(chuàng)建本地站點；難點：學會插入其他文本元素。教學方法：演示案例教學法。教學模式：分組討論，集中點評，共同提高。五、教學環(huán)境及資源準備教學環(huán)境：多媒體實訓(xùn)室課前準備：1.對應(yīng)本節(jié)課制作了相應(yīng)的備課。2.認真設(shè)計教案、課件和教學過程。六、教學過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖情景描述上課，同學們好?。ㄏ嗷柡茫。?S管理組織教學。課前3分鐘：你的視野的高度和廣度，決定了你內(nèi)心世界遼闊的程度。做學習的主人，積極主動的參與閱讀思考演練中，收獲的是快樂；被動的學習，學習效率自然低下，學習的快樂也會消失殆盡。復(fù)習提問：一、上節(jié)課對圖像的切割和優(yōu)化哪里不太明白？7S管理組織教學、統(tǒng)計出勤；課前3分鐘教育；進行復(fù)習提問，讓學生進入思考狀態(tài)。以小組為團體回答，并加分。使學生注意力集中積極思考，積極回答問題。7S管理形成習慣，鞏固知識，增強團隊意識。引導(dǎo)問題網(wǎng)頁設(shè)計中關(guān)于圖像的部分學習完成后，如何創(chuàng)建一個屬于自己的站點，并創(chuàng)建一個真正的網(wǎng)頁呢，這時單純的學習Photoshop已經(jīng)不能完成此項工作了，此時的小艾非?？鄲?！她非常迫切想要知道那個軟件在創(chuàng)建網(wǎng)頁方面既簡單又方便。她的同事凱程知道他的苦惱后，告訴她，Dreamweaver就是一個及設(shè)計和代碼共存的一個軟件，對于初次接觸網(wǎng)頁設(shè)計的人，使用Dreamweaver是非常便捷的，用戶無論使用設(shè)計視圖還是代碼視圖都可以方便地創(chuàng)建網(wǎng)頁。本項目主要講述Dreamweaver界面，如何創(chuàng)建本地站點并管理站點，如何在網(wǎng)頁中輸入文本以及插入其他網(wǎng)頁文本元素。接下來，大家就跟隨小艾一同走進Dreamweaver吧，和小艾一起進行相關(guān)內(nèi)容的學習，在網(wǎng)頁設(shè)計的道路上展現(xiàn)自己的才華，好了，下面我們就一起打開Dreamweaver來進行學習吧！。引出本節(jié)重點內(nèi)容，注意培養(yǎng)學生的觀察力和注意力。學生跟隨老師的講解和啟發(fā)進入內(nèi)容，積極思考。通過導(dǎo)入問題,讓學生分小組思考。相關(guān)知識介紹任務(wù)1了解Dreamweaver的工作環(huán)境Dreamweaver2021是集網(wǎng)頁制作和網(wǎng)站管理于一身的“所見即所得”的網(wǎng)頁編輯軟件，它以強大的功能和友好的操作界面?zhèn)涫軓V大網(wǎng)頁設(shè)計者的歡迎，已經(jīng)成為網(wǎng)頁制作的首選軟件，如圖所示為Dreamweaver2021的工作界面。任務(wù)2掌握創(chuàng)建與管理站點建立本地站點就是在本地計算機硬盤上建立一個文件夾并用這個文件夾作為站點的根目錄，然后將網(wǎng)頁及其他相關(guān)的文件，如圖片、視頻、Html文件存放在該文件夾中。當準備發(fā)布站點時，將文件夾中的文件上傳到Web服務(wù)器即可。活動1掌握創(chuàng)建本地站點在制作網(wǎng)頁之前首先要在本地計算機中創(chuàng)建一個本地站點，以方便將來的上傳和管理。啟動Dreamweaver軟件，執(zhí)行菜單欄中的“站點/新建站點”命令，彈出“站點設(shè)置對象未命名站點2”對話框，在對話框中“站點”選項卡的“站點名稱”文本框中輸入名稱，如圖6-5所示。單擊“本地站點文件夾”文本框右邊的文件夾按鈕，彈出“選擇根文件夾”對話框，在對話框中選擇相應(yīng)的位置，如圖所示。單擊“選擇文件夾”按鈕后，“本地站點文件夾”的位置會被選取，如圖所示。單擊“保存”按鈕，在“文件”面板中可以看到創(chuàng)建的站點，如圖所示。在Dreamweaver中，可以對本地站點進行管理，如打開、編輯、刪除和復(fù)制站點等。當運行Dreamweaver后，系統(tǒng)會自動打開上次退出Dreamweaver時編輯的站點。如果想打開另外一個站點，在“文件”面板的文件下拉列表框中將會顯示已定義的所有站點，如圖所示。在下拉列表框中選擇需要打開的站點，即可打開已定義的站點。創(chuàng)建站點后，可以對站點進行編輯，執(zhí)行菜單欄中的“站點/管理站點”命令，彈出“管理站點”對話框，在對話框中單擊“編輯當前選定的站點”按鈕，如圖所示。單擊“編輯當前選定的站點”按鈕,即可彈出“站點設(shè)置對象”對話框，在“高級設(shè)置”選項卡中選擇“本地信息”，在右側(cè)編輯站點的相關(guān)信息，單擊“默認圖像文件夾”文本框右邊的文件夾按鈕，在彈出的“選擇圖像文件夾”對話框中，設(shè)置圖像文件夾為images，如圖所示。編輯完畢后，單擊“保存”按鈕，返回到“管理站點”對話框，單擊“完成”按鈕，即可完成站點的編輯。如果不再需要站點，可以將其從站點列表中刪除，執(zhí)行菜單欄中的“站點/管理站點”命令，彈出“管理站點”對話框，在對話框中選中要刪除的站點，單擊“刪除當前選定的站點”按鈕，如圖所示。彈出Dreamweaver提示對話框，詢問用戶是否要刪除本地站點，如圖所示。單擊“是”按鈕，即可將本地站點刪除。執(zhí)行菜單欄中的“站點/管理站點”命令，彈出“管理站點”對話框，在對話框中選中要復(fù)制的站點，單擊“復(fù)制當前選定的站點”按鈕，如圖所示，即可將該站點復(fù)制，新復(fù)制出的站點名稱會出現(xiàn)在“管理站點”對話框的站點列表中，如圖所示。單擊“完成”按鈕，完成對站點的復(fù)制。任務(wù)3掌握網(wǎng)頁中插入文本在Dreamweaver中可以通過直接輸入、復(fù)制和粘貼的方法將文本插入到文檔中?；顒?掌握插入普通文本文本是基本的信息載體，是網(wǎng)頁中的基本元素，瀏覽網(wǎng)頁時，獲取信息最直接、最直觀的方式就是通過文本。在Dreamweaver中添加文本的方法非常簡單，打開一個網(wǎng)頁文檔，如圖所示。將光標置于要輸入文本的位置，輸入文本，如圖所示。保存文檔后，按F12鍵在瀏覽器中預(yù)覽，效果如圖所示?；顒?掌握設(shè)置文本屬性如果網(wǎng)頁中的文本樣式太單調(diào)，會大大降低網(wǎng)頁的外觀效果，通過對文本格式的設(shè)置可使文本變得美觀，讓網(wǎng)頁更具魅力。選中需設(shè)置格式的文本，然后在“屬性”面板中可以設(shè)置文本的具體屬性。選中文字，執(zhí)行菜單欄中的“窗口/屬性”命令，打開“屬性”面板，單擊“大小”文本框右邊的按鈕，在彈出的菜單中選擇字體“大小”為12像素，如圖所示。在“屬性”面板中的“字體”下拉列表中選擇“管理字體”選項，如圖所示。在彈出的對話框中選擇“自定義字體堆?！边x項卡，在“可用字體：”選項中選擇要添加的字體，單擊按鈕添加到左側(cè)的“選擇的字體：”列表框中，在“字體列表：”框中也會顯示新添加的字體，如圖所示。重復(fù)以上操作即可添加多種字體，若要取消已添加的字體，可以選中該字體單擊按鈕。完成一個字體樣式的編輯后，單擊按鈕可進行下一個樣式的編輯。若要刪除某個已經(jīng)編輯的字體樣式，可選中該樣式單擊按鈕。完成字體樣式的編輯后，單擊“

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論