網(wǎng)頁中圖片的使用教案

1、文檔編碼 : CF9X3B7I4F3 HJ10H9U2G6F9 ZA10W9Y8D3E3名師精編 精品教案網(wǎng)頁中圖片的使用教案上海市風(fēng)華初級中學(xué) 顧堅(jiān) 教學(xué)目標(biāo)：學(xué)問與技能目標(biāo)：明白圖片在網(wǎng)頁中的作用；把握網(wǎng)頁中圖片的插入與儲存；初步學(xué)會在網(wǎng)頁中合理布局 圖片；過程與方法目標(biāo)：通過觀看,嘗試,檢驗(yàn)的過程,知道舉一反三,歸納總結(jié)的學(xué)習(xí)方法；情感態(tài)度價值觀目標(biāo)：體驗(yàn)與同學(xué)共享學(xué)習(xí)方法體會的樂趣；養(yǎng)成合理分類存放文件的學(xué)習(xí)習(xí)慣；初步形成對網(wǎng)頁版面“ 形” 的美學(xué)追求；教學(xué)重點(diǎn)：網(wǎng)頁中圖片的插入的方法和必需留意的一些問題；教學(xué)難點(diǎn)：懂得網(wǎng)站中文件治理的思想和在網(wǎng)頁中圖片合理布局的熟識；教學(xué)方法：問題遷

2、移,自主探究,評判小結(jié)；現(xiàn)狀分析：這節(jié)課是華師大教材第五章學(xué)建網(wǎng)站的第四課時；同學(xué)已在前幾課中學(xué)習(xí)了網(wǎng)站設(shè)計思路,網(wǎng)站結(jié)構(gòu) 規(guī)劃和網(wǎng)站構(gòu)建,在后序課中仍將按小組設(shè)定的網(wǎng)站主題,搜尋整理和網(wǎng)站主題相關(guān)的素材,常用素材和 組件的插入,超鏈接設(shè)置,并分工完成主題網(wǎng)站的制作,最終在校內(nèi)網(wǎng)發(fā)布主題網(wǎng)站；預(yù)備班的同學(xué)在學(xué)校時大多都制作過版報,所以對圖片插入到Word 文檔中的操作比較熟識,而FrontPage 插入圖片的方法有相像之處,可以利用這一點(diǎn)完成學(xué)問與技能的遷移；有些同學(xué)仍沒養(yǎng)成做完作品準(zhǔn)時儲存的習(xí)慣在文件儲存過程,兩種軟件有較大的不同；第一,網(wǎng)頁中圖片的儲存對同學(xué)來說在懂得上有確定的難度；其次,

3、大多數(shù)同學(xué)沒有形成分類存放文件的意識和習(xí)慣；在圖片的布局時大多數(shù)同學(xué)由于年齡特點(diǎn),往往把關(guān)注點(diǎn)放在圖片的內(nèi)容中,而忽視了圖片與網(wǎng)頁主題的關(guān)系,對圖片在網(wǎng)頁中的作用考慮較少；教學(xué)過程：一、新課引入1、觀看下面三個網(wǎng)站的截圖,能知道分別是什么網(wǎng)站嗎？說說理由；分別是汽車,卡通動畫,蘋果網(wǎng)站；從文字和圖片中看出來；俗語說,“ 一幅圖畫賽過千言萬語”引力,使用圖形是一種很好的方法；2、圖片格式有幾種？；假如期望向網(wǎng)站拜望者快速傳達(dá)信息,或者只是期望網(wǎng)站更具吸可以有 BMP ,GIF,JPG,PSD 等；圖片可具有多種不同的文件格式；但GIF、JPG 和 PNG 三種格式的圖片文件,文件較小,從而最適合

4、在網(wǎng)絡(luò)上進(jìn)行快速傳遞；怎樣將它們放到網(wǎng)頁中呢？二、網(wǎng)頁中圖片的插入試一試： 以小組為單位,嘗試在網(wǎng)站主頁插入圖片的方法；（小組匯總）1、找找圖片在網(wǎng)站文件夾中的位置；2、依據(jù) Word 中插入圖片的方法,在主頁插入圖片；在網(wǎng)頁中插入圖片的方法方法一 方法二 方法三 方法四 我 組 覺 得 最 好 的方法組員 組員 組員 組員 組員理由表一板書：網(wǎng)頁中圖片插入的方法：1、“ 插入” “ 圖片” “ 來自文件 ”名師精編 精品教案2、常用工具欄“ 插入文件中的圖片” 按鈕 3、圖片工具欄“ 插入文件中的圖片” 按鈕 4、直接從文件夾列表拖曳圖片文件（課堂預(yù)見：由于在學(xué)校制作版報時,插入圖片用的是復(fù)

5、制粘帖的方法,在這兒可能也用這種方法；假如顯現(xiàn)這種情形,老師應(yīng)先鼓勵同學(xué),同時可有針對地提出：不是全部版本的網(wǎng)頁編輯器都支持這種插入圖片的方法；不是全部媒體都能用這種方法插入；假如復(fù)制下來的圖片只是引用了網(wǎng)上的地址,會顯現(xiàn)什么情形； ）想一想： 利用網(wǎng)頁編輯器,同學(xué)們已經(jīng)在網(wǎng)頁中插入了圖片,在預(yù)覽窗口也能正常顯示；為什么在瀏 覽器窗口中網(wǎng)頁中的圖片不見了？（課堂預(yù)見：網(wǎng)頁制作中,假如不對修改的網(wǎng)頁進(jìn)行儲存的話,是無法在瀏覽器窗口看到修改結(jié)果的；有些同學(xué)可能在平常操作時沒有養(yǎng)成準(zhǔn)時對修改的作品進(jìn)行存盤操作的習(xí)慣,也就無法看到修改的結(jié) 果；老師在此讓同學(xué)操作后,發(fā)覺問題引起摸索,發(fā)覺準(zhǔn)時儲存文件的

6、重要性,使同學(xué)養(yǎng)成準(zhǔn)時存盤 的好習(xí)慣；同時也指出預(yù)覽和瀏覽器窗口所看到的,有時不愿定一樣；）板書：網(wǎng)頁修改后要儲存 網(wǎng)頁和圖片的儲存 三、網(wǎng)頁和圖片的儲存 試一試： 當(dāng)圖片來源在站點(diǎn)文件夾內(nèi)和不在站點(diǎn)文件夾內(nèi),儲存網(wǎng)頁時有什么不同？要求：1、以個人為單位,嘗試在web 站點(diǎn)文件夾的h1.htm 中合適位置,插入恰當(dāng)?shù)膱D片,并儲存；（圖片在E 盤的 pic 文件夾中）2、請依據(jù)其次步觀看到的現(xiàn)象,完成網(wǎng)頁和圖片的儲存在線反饋練習(xí)；顯現(xiàn)情形 現(xiàn)象 圖片在網(wǎng)站文件夾內(nèi) 直接儲存網(wǎng)頁,不詢問是否要儲存圖片；圖片不在網(wǎng)站文件夾內(nèi)A、取消圖片文件的儲存 圖片不在網(wǎng)站文件夾內(nèi) B、 儲存圖片文件,但不更換文

7、件夾 時,我選擇 C、儲存圖片文件時,更換其所在文件夾結(jié)論： 1、網(wǎng)頁和圖片（確定,不愿定）要儲存在網(wǎng)站 文件夾 內(nèi)；2、圖片應(yīng)當(dāng)儲存在 文件夾中；表二 想一想： 上傳網(wǎng)頁和上傳網(wǎng)站至個人檔案袋,在瀏覽器中瀏覽網(wǎng)頁的結(jié)果一樣嗎？為什么？（課堂預(yù)見：同學(xué)在儲存時會發(fā)覺與其他office 軟件的儲存過程有不同的地方,有些同學(xué)不知所措,有些同學(xué)知道要將圖片儲存到站點(diǎn)中,但很少有同學(xué)會將圖片儲存在網(wǎng)站的 images 分類文件夾中；讓 同學(xué)自主探究看看不同的處理方法得到的結(jié)果會是一樣的嗎？讓同學(xué)悟出“ 圖片” 和“ 網(wǎng)頁” 跟著一 起走的道理； ）板書： 1、網(wǎng)頁和圖片都要儲存在網(wǎng)站文件夾內(nèi) 2、圖片

8、儲存在 images 文件夾中 3、“ 圖片” 和“ 網(wǎng)頁” 跟著一起走 四、網(wǎng)頁中圖片的應(yīng)用 呈現(xiàn)同學(xué)的作品,讓同學(xué)相互評論,發(fā)覺問題,爭辯得出正確準(zhǔn)備；（課前預(yù)見：同學(xué)由于心理年齡特點(diǎn),可能對圖片的插入特殊感愛好,往往在一個網(wǎng)頁中大量地放入 了各種圖片, 有與主題相關(guān)的, 也有無關(guān)主題的； 這時需要老師指出需要他們在插入圖片時要考慮的問題：圖片不能太大,網(wǎng)絡(luò)這種特殊狀態(tài)下,受帶寬的限制,人們是很難忍耐等待之苦的,這就要求把圖片的 體積縮小,同時又要使圖片盡量清楚,直觀,最大限度的發(fā)揮它的作用,把握這個度是很關(guān)鍵的；另外 圖片的排布也很講究,特殊是多圖的情形,就要是圖片與圖片之間的聯(lián)系凸現(xiàn),

9、同時又要融為一個整體,）使看起來有條理；圖片的插入應(yīng)與網(wǎng)頁主題呼應(yīng)；名師精編 精品教案板書：網(wǎng)頁中圖片的應(yīng)用圖片大小適當(dāng),圖片布局合理,圖文環(huán)繞,烘托主題, 五、小結(jié) 網(wǎng)頁制作中要留意的問題 學(xué)到的技術(shù)及所解決的問題 學(xué)習(xí)過程中,所實(shí)行解決問題的方法 解決問題過程中獲得體會 表三 六、拓展練習(xí) 練一練：（圖片在 pic 文件夾中選擇）1、在 web 站點(diǎn)文件夾的h2.htm 中,選擇圖片插入；2、調(diào)整網(wǎng)頁中的圖片,并合理布局；3、給網(wǎng)頁加上適當(dāng)?shù)木W(wǎng)頁背景圖片或表格背景圖片；（選做）4、儲存好文件,將web 站點(diǎn)上傳至過程性評判平臺的個人檔案袋中；名師精編 精品教案預(yù)期成效 落實(shí)的學(xué)問技能：一是

10、通過讓同學(xué)觀看截圖,明白圖片在網(wǎng)頁中的作用；二是利用遷移教學(xué)法,讓學(xué)生找到網(wǎng)頁中插入圖片的方法；通過同學(xué)的觀看和檢驗(yàn),讓同學(xué)知道瀏覽器窗口和網(wǎng)頁編輯器軟件中的預(yù) 覽成效在沒儲存之前是不一樣的；三是要同學(xué)把握網(wǎng)頁和圖片的儲存；在學(xué)業(yè)水平考試中發(fā)覺有很多同學(xué) 在上傳了網(wǎng)頁后,圖片無法顯示；后來發(fā)覺是同學(xué)不能懂得網(wǎng)頁和圖片要跟著一起走的道理；所以設(shè)想在課中先讓同學(xué)自己去體驗(yàn)二種情形：1、圖片不在站點(diǎn)文件夾內(nèi)的話,是否要把圖片儲存到站點(diǎn)文件夾中；2、假如把圖片儲存到網(wǎng)站里了,讓同學(xué)嘗試不同的上傳方法,得到的結(jié)果是不同的；從而感悟到圖片與 網(wǎng)頁一起走； 四是要同學(xué)初步學(xué)會在網(wǎng)頁中合理布局圖片；初預(yù)的同學(xué)把握插入圖片的技能沒多大的問題,但是他們的關(guān)注點(diǎn)放在圖片插入上,而忽視圖片大小,圖片內(nèi)容,圖片布局和圖文環(huán)繞對網(wǎng)頁整體成效的 作用；培養(yǎng)的才能素養(yǎng)：通過觀看,嘗試,檢驗(yàn)的過程,知道舉一反三,歸納總結(jié)的學(xué)習(xí)方法；養(yǎng)成的意識習(xí)慣：一是培養(yǎng)同學(xué)準(zhǔn)時存盤的習(xí)慣；有些同學(xué)可能在平常操作時沒有養(yǎng)成準(zhǔn)時對修改 的作品進(jìn)行存盤操作的習(xí)慣,就無法看到修改的結(jié)果；我設(shè)想讓同學(xué)操作后,發(fā)覺問題引起摸索,發(fā)覺及 時儲存文件的重要性,使同學(xué)養(yǎng)成準(zhǔn)時存盤