PS網(wǎng)頁設(shè)計與制作

1、PS網(wǎng)頁設(shè)計與制作（主頁）一、教材分析設(shè)計制作網(wǎng)頁的方法有很多，所用軟件也各不相同，在本次拓展課程教學(xué)中，采用Photoshop 設(shè)計網(wǎng)頁。本課是第四課時，在之前的課中，教師介紹了網(wǎng)頁大小、圖片素材的 保存及處理方法，學(xué)生已了解有關(guān)網(wǎng)頁的相關(guān)知識點，本節(jié)課在此基礎(chǔ)上，開始學(xué)習(xí)PS 網(wǎng)頁設(shè)計，通過新建文檔，完善網(wǎng)頁中的其它要素，如：文本、頁頭、頁腳、圖片等要素。二、學(xué)情分析認知水平：本班學(xué)生為八年級學(xué)生，善于接受新鮮事物，欠缺專注力、知識遷移能力。知識技能水平：在前幾課時的學(xué)習(xí)中學(xué)生了解了網(wǎng)頁的常見大小， 主頁包含的各項要素， 七年級下已學(xué)習(xí)過PS的相關(guān)知識與技能，有一定的基礎(chǔ)。本節(jié)課，學(xué)生需要

2、靈活運用以前的所學(xué)，制作 出有個人特色的主頁。 學(xué)生在自主實踐環(huán)節(jié)是遇到的問題， 通過同伴互助、 范例展示等方式， 更好地理解為何這么做，以及怎么做。三、教學(xué)目標（一）、知識與技能1. 了解主頁大小，掌握設(shè)置主頁大小的方法。2. 掌握文本設(shè)置的方法，嘗試通過更改大小、字體、 變形、混合選項呈現(xiàn)出有個人特色的文本。3. 了解導(dǎo)航欄的樣式及位置，掌握矩形的繪制調(diào)整方法。（二）、過程與方法1. 通過課堂任務(wù)的設(shè)計，強化學(xué)生個人自主探究能力及小組協(xié)作學(xué)習(xí)能力。2. 培養(yǎng)學(xué)生對問題的分析和解決能力，更好地理解PS制作主頁的方法與策略，提高學(xué)生對PS的理解與認識。（三）、情感態(tài)度與價值觀提倡學(xué)生多觀察、多

3、動手實踐，不怕失敗，只怕不動。在信息技術(shù)課堂上勇于探索實踐, 通過作品展示自己。四、教學(xué)重點主頁大小設(shè)定、標題和圖片的大小及位置、導(dǎo)航欄制作五、教學(xué)難點主頁中各對象的大小及位置六、教學(xué)方法任務(wù)驅(qū)動、分層教學(xué)、同伴互助七、教學(xué)準備極域多媒體網(wǎng)絡(luò)教室、Photoshop cs5、學(xué)案 八、教學(xué)過程教學(xué)階段教學(xué)活動學(xué)生活動設(shè)計意圖1.展示范例，吸引學(xué)生的注意力，觀看放映展示冋個年齡段冋調(diào)動學(xué)習(xí)的積極性聆聽老師學(xué)的作品，可以吸引學(xué)生的注意力，也更貼近學(xué)生的生創(chuàng)2.師：岡財大家看到的是我們八年級rlrt丄丄/rL.活，弓1起更多的共設(shè)觀察素材文件情 境一些同學(xué)的網(wǎng)頁設(shè)計作品，在這些作鳴，盡快進入學(xué)習(xí)品當

4、中，有關(guān)于美食的，有關(guān)于旅游并進入創(chuàng)設(shè)情境氛圍。的，還有關(guān)于漫畫的，還有關(guān)于科技選擇PS制作網(wǎng)頁,的，等等。那么，你知道這些作品是拓寬學(xué)生的知識怎么完成的？面，提升PS的操作3.教師小結(jié)：這些網(wǎng)頁，我們般稱之為主頁，都是在PHOTOSHOP完成。思考并發(fā)表自己的看法技能。1.啟動PHOTOSHOP學(xué)生展示2. 對比說明，網(wǎng)頁設(shè)計時使用到哪些功能3. 小結(jié)：觀看放映參與互動思考并回答復(fù)習(xí)舊知圖片一一拖動至新建文檔文字文本工具導(dǎo)航一一形狀構(gòu)建新知圖片在復(fù)習(xí)了 PHOTOSHOP一些基本操作 后，接下來，我們要開始正式設(shè)計主 頁了。在前一次課中，大家已選好圖 片素材，并初步加工，怎么用在網(wǎng)頁 中呢？

5、師：引導(dǎo)學(xué)生嘗試啟動軟件，開始新建文檔(1) .登錄FTP,下載前一課保存上交的圖片素材(2) .啟動 PHOTOSHOP參考學(xué)案，嘗試新建文 檔(3) .同伴互動，落實新 建文檔時的各項參數(shù)：800*600 背景色透明或其它師：主頁新建完成后，第二步要添加 背景圖片，那么，如何將上周保存過PS強大的圖片文 字與處理功能，學(xué) 生在七下學(xué)習(xí)過， 通過師生互動，幫 助學(xué)生復(fù)習(xí)一些跟 圖片文字相關(guān)的操 作。首先引出學(xué)生的疑 慮，啟發(fā)學(xué)生展開 思考。信息技術(shù)課堂更多 的希望學(xué)生通過嘗 試探索發(fā)現(xiàn)問題， 進一步嘗試探索尋 求解決問題的辦 法，從而提高解決問題的能力。的圖片添加進來呢？邀請學(xué)生上臺演示。師

6、：XX同學(xué)演示得非常好， 首先，打 開文件，使用移動工具，將圖片拖動 到文檔中。當然，我們可以根據(jù)自己 的構(gòu)想，調(diào)整圖片的大小及位置。(4) .學(xué)生使用教師機 面向全班展示操作過 程，并做相應(yīng)的講解。教師適當點評及補充說 明。(5) 課堂操作時間，學(xué) 生操作，同伴互助，教 師巡視。如果有困難， 先自行嘗試探究，再向 同伴尋求幫助，如果實 解決不了，可向老師尋 求幫助。通過學(xué)生演示 +講 解的方式，更加直 觀地讓全班同學(xué)了 解之前課上保存的 圖片如何運用到網(wǎng) 頁中。構(gòu)建新知標題師：現(xiàn)在我們需要給網(wǎng)頁添加標題，那么，你覺得網(wǎng)頁的標題有什么特點？師：教師小結(jié)標題特點：醒目，顏色、大小或者子體與網(wǎng)頁中

7、的其他文本不一致，位置根據(jù)整體頁面布局而疋(1) .學(xué)生觀看放映，對 照范例及個人經(jīng)驗，思 考(2) .學(xué)生回答問題，表 達個人的看法(2-3人)結(jié)合學(xué)生的個人經(jīng) 驗，鼓勵學(xué)生表達 個人看法。不僅僅 是通過教師給出的 幾張圖片得出一個 結(jié)論，更多是從學(xué) 生的生活和個人體師：有請一位同學(xué)給大豕演示如何制 作網(wǎng)頁的標題教師通過設(shè)問的方式引導(dǎo)學(xué)生講解有關(guān)文字的操作。教師板書：文本：字體：字體庫中的或自行下載形狀：變形立體：混合選項大小：大于普通文字教師鼓勵基礎(chǔ)較好的同學(xué)嘗試探究 任務(wù)一，自主上網(wǎng)搜索下載字體，并 安裝使用(3) .學(xué)生使用教師機 面向全班，演示如何在 文檔中添加文字，以及 更改文字的

8、形狀、大小、 顏色。通過修改圖層的 混合選項，使文字呈現(xiàn) 出更多豐富的樣式。(4) .課堂操作時間，學(xué) 生操作，同伴互助，教 師巡視。如果有困難，先自行嘗試探究，再向 同伴尋求幫助，如果實 解決不了，可向老師尋 求幫助。驗出發(fā)。大標題的制作也是 本課的一個重點， 設(shè)計的意圖是學(xué)生 通過對比嘗試，找 到更適合自己的網(wǎng) 頁，制作出更具個 人特色的作品。采 用分層教學(xué)，鼓勵 同學(xué)結(jié)合個人實際 情況，下載安裝新 的字體，對于另外 的基礎(chǔ)較弱的學(xué)生 的，則鼓勵通過開 關(guān)的改變，顏色調(diào) 整和混合選項的應(yīng) 用，制作出精彩的 標題。構(gòu)建新知導(dǎo)航師：導(dǎo)航是一個網(wǎng)頁的重要組成部 分，位于頁面頂端，或是側(cè)邊的區(qū)域，

9、 一般由一排水平或垂直的按鈕組成， 起著網(wǎng)站內(nèi)部頁面鏈接的作用。在你的網(wǎng)頁中，打算如何設(shè)計呢？(1) .學(xué)生觀看放映，觀 看范例中的導(dǎo)航制作(2) .學(xué)生結(jié)合自己的 網(wǎng)頁，發(fā)表看法。導(dǎo)航是本課的分層 教學(xué)內(nèi)容之一，學(xué) 習(xí)效率較高的同 學(xué)，可以自助嘗試 制作導(dǎo)航。課上結(jié)合其余同學(xué)教師小結(jié)導(dǎo)航欄的制作:位置：上邊或側(cè)邊形狀：矩形較適合大?。阂勒w頁面及個人喜好而定形狀與文字分開操作師：哪位同學(xué)能夠演示下呢？(3)學(xué)生使用教師機面 向全班展示操作過程， 并做相應(yīng)的講解。教師 適當點評及補充說明。(4)課堂操作時間，學(xué) 生操作，同伴互助，教 師巡視。的作品，引導(dǎo)學(xué)生觀察導(dǎo)航欄的特點，分析制作時的 使用

10、到的工具，及 可能會用到的一些 操作小技巧。教師 重在引導(dǎo)。歸納總結(jié)保存作業(yè)至桌面，格式為“學(xué)號姓名.psd ”，上傳至教師機，以供教師 查看操作情況。教師課后查看作業(yè)，登錄匯總，針對 作業(yè)中出現(xiàn)的小問題，下一課時，展 開分析與講解。(1).學(xué)生按要求保存并 上交作業(yè)。(2).學(xué)生跟隨教師的板 書，對本堂課的所學(xué)進行小結(jié)。本課的基礎(chǔ)任務(wù)是 新建文檔，制作網(wǎng) 頁背景和大標題。拓展提升任務(wù)是下 載安裝字體制作新 穎的標題及導(dǎo)航欄 的制作。教師根據(jù) 學(xué)生上交的作業(yè)，做好記錄，以便下 一堂課開展教學(xué)。、新建文檔PS網(wǎng)頁設(shè)計與制作、標題三、導(dǎo)航大?。?00*600像素網(wǎng)頁標題：醒目形狀：可選矩形背景色：

11、透明字體：字體庫或下載大?。鹤远ㄐ螤睿鹤冃挝恢茫荷线吇騻?cè)邊立體：混合選項九、教學(xué)反思本課是一節(jié)常態(tài)課，通過前期的課上接觸結(jié)合上交的作業(yè)，發(fā)現(xiàn)本班學(xué)生的認知能力和操作水平存在不小的差異，大部分學(xué)生的學(xué)習(xí)的積極性有，但持續(xù)時間不長，在學(xué)習(xí)中遇到問題時，大部分學(xué)生愿意主動探究，探究成功后積極性倍增， 探究失敗后有挫敗感，積極性大幅下降。在開展網(wǎng)頁設(shè)計制作教學(xué)時，采用PS網(wǎng)頁設(shè)計與制作。本課設(shè)計時考慮到了不同能力學(xué)生的學(xué)習(xí)情況，采用“分層教學(xué)”。課上通過展示作品，激起學(xué)生的學(xué)習(xí)興趣，拋出問題，引出答案，進入本課的學(xué)習(xí)主題。課堂中任務(wù)驅(qū)動與分層教學(xué)相結(jié)合，很好地照顧 到不同層次的學(xué)生。 演示環(huán)節(jié)，由學(xué)生自愿和教師抽查相結(jié)合，整個課堂教學(xué)進展有序。課 前預(yù)設(shè)的學(xué)習(xí)目標也較