信息技術教學《美化網頁》

信息技術教學《美化網頁》1

教學目標：

1、通過學習在網頁中插入圖片、設置圖片屬性、編輯圖片和添加背景，學會美化網頁的方法；

2、通過探究學習，小組合作，培養學生動腦、動手能力，合作交流能力；

3、通過學習提高學生的審美能力、自身藝術修養水平。

教學重難點：

重點：插入圖片、設置圖片屬性、編輯圖片和添加網頁背景

難點：合理美化網頁

教學準備：

相關教學課件、網站、圖片等

教學過程：

一、作品對比，導入新課

1、展示網頁，引發興趣：

引言：教師展示未美化的網頁和美化過的網頁，學生認真觀察。

揭題：通過美化的網頁，更吸引我們，那麼怎樣美化網頁？揭題（板書：8.美化網頁）

二、回顧舊知，打開網站

展示學習要領（板書：一、插入圖片）

三、回顧舊知，打開網站

1．教師演示講解

2、學生活動：

打開桌面上的網站

四、引導在網頁中插入圖片

1．回顧：如何在ppt中插入圖片。

2．師生互動交流。

在網頁中插入圖片和ppt中插入圖片的方法非常相似，教師提示插入圖片過程

3．佈置任務：活動一。

4．巡視全班，個別輔導。

5．學生代表演示，發現問題。

3．學生邊複述過程教師邊出示板書。

定位光標—插入—圖片—來自文件

五、設置圖片屬性

1．教師展示未排版過的網頁，討論交流，説明光插入網頁還不夠，還要對圖片進行設置。（板書：二、設置圖片）

2．教師演示設置圖片方法。

同學們邊複述操作方法教師邊出示板書

鼠標右擊圖片—圖片屬性—外觀

3．學生動手設置圖片。

做一做：活動二

4．巡視全班，個別輔導。

引導學生在探究過程中，要細心觀察圖片屬性對話框中各選項設置，如保持縱橫比。

六、編輯圖片

1．提問：只要圖片的文字或者畫的部分，可以做到嗎？那就要編輯圖片。（板書：三、編輯圖片）

2．教師演示編輯圖片步驟，出示板書。

鼠標右擊圖片—顯示圖片工具欄

3．學生動手編輯圖片。

4．巡視全班，個別輔導。

引導學生編輯圖片除了“裁剪”功能，還有其他編輯圖片的的功能，如調整圖片的明亮度等

七、添加網頁背景

1．展示美化過的網頁。

思考：除了有圖片的美化，還有什麼特別之處？

2．請學生參考書本P47，嘗試添加背景。（板書：四、添加背景）

3．學生演示添加背景方法，出示板書。

文件—屬性—格式

八、作品展示，教學評價。

1、學生互評：比一比,哪位同學的網頁更美觀。

2、教師鼓勵、評點。

九、提交作業

保存網頁，提交作業。

十、課堂總結

信息技術教學《美化網頁》2

（一）導入

師：同學們，前面我們已經學習瞭如何“建立網頁”，今天，老師藉助網頁的形式介紹下老師的愛好，大家請看，這是第1個網頁，這是第2個，你們更喜歡哪個網頁呀？

生：xxxx

師：嗯，這個，是的，這個網頁有了圖片的美化與修飾，使整個頁面更生動，而且更吸引我們的眼球，那麼美化網頁該怎麼做呢？今天我們走進第8課《美化網頁》的學習。

師：請同學們齊讀課題第8課開始。

生：齊讀課題。（板書課題）

過渡：那麼，要學會哪些本領，才能美化網頁呢？請同學們快速瀏覽。（展示“學習要領”）

（二）新授

1、回顧

過渡：好，讓我們看看如何在網頁中插入圖片（板書：插入圖片），那麼，我們還得先利用FrontPage這個軟件，建立或者打開已經建立好的網站，如何打開已經建立好的網站呢？

師：老師這兒，給大家一些温馨提示，請看。（展示“回顧”）

師：老師，已經在同學們的桌面上建立好了一個名為“班級姓名美化網頁”的網站，而且裏邊有兩個網頁：“wodeaihao.htm”、“aizhuochongdewo.htm”和一些圖片。

師：誰願意幫老師利用FrontPage軟件打開這個網站？

生：xxxx

師：非常感謝你的幫忙。

2、插入圖片

過渡：接下來，請同學們修改你們自己桌面上的網站名稱，把“班級+姓名”替換了，在打開網站之後，以同桌為一小組，學習44~45頁，給“wodeaihao.htm”網頁插入合理的圖片（活動一）。

生：xxxx

師：巡視，收集問題。

【同學們，在網頁中插入圖片，和上學期學過的在ppt中插入圖片是不是很類似呀？邊做邊保存網頁，按F12瀏覽網頁】

過渡：好，同學們請停下來，不要緊，沒做完的待會還有機會再操作。

師：誰願意和我們分享下你的操作方法？

生：xxxx

師：直接就單擊“插入”嗎？把圖片添加到網頁哪個位置，要不要先確定？

生：xxxx

師：然後呢？老師把你説的步驟展示出來。（特別提醒：①定位光標）

過渡：好了，同學們，你們看這圖片和文字的位置能不能更合理些，網頁更美觀些呢？

生：xxxx

師：那麼我們就要對圖片的屬性進行設置（板書：設置圖片屬性），現在，請同學們認真看老師的演示哦！

師：（演示+講解）“雙擊圖片”——>“圖片屬性”——>“外觀”

師：誰看清了老師的操作過程，和我們説一説。

生：xxxx（邊説邊出示“設置圖片屬性”步驟）

師：好，請坐。

師：接下來，考一考大家（活動二），請按照自己喜歡的`排版方式，對圖片的屬性進行設置。開始吧！（往下展示“設置圖片屬性”步驟頁面）

師：巡視。

【設置好的同學，可以參照書本46~47頁的第⑥點和第⑦點，試試，你發現了什麼？】（活動三）

展示學生作品

師：都停下來，請往上看，我們看看這位同學的作品。（控制學生機）

師：（生生評價和師生評價）整個頁面圖片佈局合理，文字與文字的距離恰好，看上去很舒服。咱們再看這位同學，整體還行，但是如果能xxx就更好了。

3、以上設置圖片屬性（拓展：設置圖片屬性的“常規”選項，即活動三。）

4、編輯圖片

過渡：同學們，咱們已經學會了添加圖片，設置圖片屬性，那如果老師只要張圖片這一區域，我們應該怎麼辦呢？

師：對了，對圖片進行編輯（板書：編輯圖片）。

師：（邊演示+講解）比如，對這張圖片進行裁剪，首先“選中圖片”——>單擊鼠標右鍵——>“顯示圖片工具欄”——>“裁剪”——>調整裁剪範圍，除了裁剪，還有很多對圖片進行編輯的功能。

師：現在，請同學們按照老師給出的提示（課件展示“編輯插入的圖片”），自己試一試。

4、以上編輯圖片

5、設置網頁背景

過渡：同學們，請看大屏幕，編輯圖片還有很多值得我們探索，課後同學們再繼續，大家再看老師的這張網頁，除了圖片，還有什麼特別之處呢？

生：xxxx

師：是啊，還有背景呢！

師：那請同學們參考47頁，按照書本介紹的方法，為自己的網頁添加個背景吧。ppt展示設置背景步驟。（板書：設置背景）

師：設置完背景的同學，嘗試以上兩個操作。（展示“創新活動”）

5、以上設置網頁背景

（三）總結

師：這節課，大家都學會了哪些美化網頁的本領呀？

生：xxxx貼板書步驟。

師：美化網頁除了添加圖片，還有很多很多其他的方式，下節課我們再繼續探索。