《網(wǎng)站主頁(yè)的設(shè)計(jì)》教學(xué)設(shè)計(jì)

1、網(wǎng)站主頁(yè)的設(shè)計(jì)教學(xué)設(shè)計(jì)一、教材分析 本節(jié)課講授浙江教育出版社信息技術(shù)基礎(chǔ)第六章“網(wǎng)頁(yè)的設(shè)計(jì)與制作”的相關(guān)，并根據(jù)浙江省普通高中新課程實(shí)驗(yàn)信息技術(shù)學(xué)科教學(xué)指導(dǎo)意見(jiàn)進(jìn)行了適當(dāng)設(shè)計(jì)，教學(xué)側(cè)重于讓學(xué)生掌握網(wǎng)站的策劃與構(gòu)思和熟練掌握簡(jiǎn)單網(wǎng)頁(yè)的設(shè)計(jì)與制作。 二、學(xué)情分析 學(xué)生已經(jīng)會(huì)收集和整理素材，掌握了用FrontPage制作網(wǎng)頁(yè)的基本操作，對(duì)網(wǎng)站的策劃與構(gòu)思有了一定的了解，但網(wǎng)站創(chuàng)建的知識(shí)以及網(wǎng)站策劃構(gòu)思的實(shí)踐比較欠缺，另外學(xué)生現(xiàn)有知識(shí)水平存在一定差異。 三、教學(xué)目標(biāo) 知識(shí)與技能：能較熟練地運(yùn)用表格實(shí)現(xiàn)網(wǎng)頁(yè)布局；知道創(chuàng)建網(wǎng)站的一般過(guò)程，了解一些主頁(yè)設(shè)計(jì)的

2、知識(shí)；初步掌握網(wǎng)站的策劃與構(gòu)思。 過(guò)程與方法：通過(guò)自主探究和小組合作完成學(xué)習(xí)任務(wù)，掌握一些探究學(xué)習(xí)的方法，培養(yǎng)與他人協(xié)作、交流的意識(shí)和能力。 情感、態(tài)度與價(jià)值觀：通過(guò)網(wǎng)站主頁(yè)設(shè)計(jì)，激發(fā)學(xué)生的創(chuàng)作欲望，提高學(xué)習(xí)信息技術(shù)的興趣和愿望；通過(guò)教師提供的創(chuàng)作背景信息，使學(xué)生更關(guān)注氣候變化對(duì)人類發(fā)展的影響，增強(qiáng)社會(huì)責(zé)任感。 四、教學(xué)重難點(diǎn) 重點(diǎn)：學(xué)會(huì)運(yùn)用表格實(shí)現(xiàn)網(wǎng)頁(yè)布局，初步掌握網(wǎng)站的策劃與構(gòu)思。 難點(diǎn)：如何在主頁(yè)制作中實(shí)現(xiàn)自己的網(wǎng)站設(shè)計(jì)構(gòu)思。 五、教學(xué)過(guò)程 1教學(xué)引入，學(xué)習(xí)準(zhǔn)備 教師指導(dǎo)學(xué)生訪問(wèn)課堂學(xué)習(xí)網(wǎng)站（如圖1），然后介

3、紹網(wǎng)站的創(chuàng)作構(gòu)思與特點(diǎn)。 師：這是老師為課堂學(xué)習(xí)專門(mén)設(shè)計(jì)制作的一個(gè)網(wǎng)站，請(qǐng)同學(xué)們從“名稱貼切、主題鮮明、內(nèi)容豐富、結(jié)構(gòu)清晰、界面友好美觀”五個(gè)角度，給網(wǎng)站做個(gè)評(píng)價(jià)，認(rèn)為都滿意就趕快伸出五個(gè)手指頭。 學(xué)生們高舉手臂，伸出五個(gè)手指。 師：謝謝大家的支持，你們的認(rèn)可是我創(chuàng)作的動(dòng)力。 師：通過(guò)前段時(shí)間的學(xué)習(xí)，我們已經(jīng)較好地掌握了素材收集與整理的方法；掌握了一些利用FrontPage軟件做網(wǎng)頁(yè)的基本操作；在欣賞優(yōu)秀網(wǎng)站的基礎(chǔ)上，對(duì)網(wǎng)站的策劃與構(gòu)思有了一定了解。這節(jié)課，我們將跟隨著學(xué)習(xí)網(wǎng)站的導(dǎo)航欄，一起揭開(kāi)創(chuàng)建個(gè)人網(wǎng)站的第一頁(yè)設(shè)計(jì)制作網(wǎng)站主頁(yè)。 師：先來(lái)玩

4、一個(gè)拼圖游戲吧。 圖1 學(xué)習(xí)網(wǎng)站首頁(yè)                        圖2 學(xué)習(xí)參考頁(yè)面 設(shè)計(jì)意圖：用學(xué)習(xí)網(wǎng)站吸引學(xué)生的注意力，使其迅速進(jìn)入課堂學(xué)習(xí)狀態(tài)。通過(guò)學(xué)生評(píng)價(jià)老師的網(wǎng)站設(shè)計(jì)，使學(xué)生對(duì)網(wǎng)站策劃構(gòu)思中要考慮的因素有進(jìn)一步認(rèn)識(shí)。 2以趣激學(xué)，化解難點(diǎn) 學(xué)生瀏覽學(xué)習(xí)網(wǎng)站中“拼圖游戲”活動(dòng)要求。 活動(dòng)內(nèi)容：

5、將分割成小塊的圖片素材插入到教師預(yù)先設(shè)計(jì)好的網(wǎng)頁(yè)中，完成拼圖。 圖3“威尼斯的淚”網(wǎng)站主頁(yè)          圖4 “威尼斯的淚”表格框架 師：老師這里有個(gè)完工的網(wǎng)站主頁(yè)（如圖3），網(wǎng)站主題是關(guān)于拯救水城威尼斯的，網(wǎng)站名稱是“威尼斯的淚”，頁(yè)面十分簡(jiǎn)潔，用一張圖片吸引觀眾目光，導(dǎo)航欄設(shè)置在右下處，四個(gè)超鏈接對(duì)應(yīng)網(wǎng)站的四塊內(nèi)容，這種網(wǎng)頁(yè)布局可歸為封面型的布局類型，在個(gè)人主頁(yè)和企業(yè)網(wǎng)站設(shè)計(jì)中較常用（具體可參考學(xué)習(xí)網(wǎng)站）。請(qǐng)大家仔細(xì)看這個(gè)網(wǎng)頁(yè)，接著我們將用它的半成品來(lái)玩拼圖（如圖4）。 教師

6、用FrontPage軟件打開(kāi)半成品網(wǎng)頁(yè)。 師：同學(xué)們看到網(wǎng)頁(yè)上都有些什么？ 生：哦，表格，原來(lái)剛才的網(wǎng)頁(yè)是用這樣的表格來(lái)實(shí)現(xiàn)布局的。 師：對(duì)了，那再仔細(xì)觀察一下，這里到底用了幾張表格。 生：兩張，三張 師：答案是五張表格，最外面一張?zhí)摼€顯示的表格將整體分為上下兩大塊，然后表格里面套表格，最終將所有網(wǎng)頁(yè)內(nèi)容，用一個(gè)個(gè)單元格定位。 師：現(xiàn)在網(wǎng)頁(yè)上半部分的九個(gè)單元格就是留給大家來(lái)完成拼圖的，加油，看誰(shuí)最快完成提交。 學(xué)生下載素材，嘗試著完成拼圖；教師巡視，了解學(xué)生的制作過(guò)程。學(xué)生在制作過(guò)程會(huì)碰到一個(gè)主要問(wèn)題“如何將圖片拼得天衣無(wú)縫

7、”，涉及到表格的屬性設(shè)置這一知識(shí)點(diǎn)，要能夠想到將表格邊框設(shè)置為隱藏，將表格單元格邊距和間距值都設(shè)置為0。 師：已經(jīng)有同學(xué)完成拼圖提交了，某某同學(xué)是最快完成的，讓我們一起來(lái)看一下他們的拼圖吧。 教師根據(jù)學(xué)生完成情況，選擇不同的教學(xué)，如果已經(jīng)有學(xué)生很好地完成了拼圖，就請(qǐng)學(xué)生來(lái)講解、演示；如學(xué)生都沒(méi)有很好地解決問(wèn)題，教師可以通過(guò)提問(wèn)“五張表格中最外一張用虛線顯示的表格在預(yù)覽中是否能看到它？”“表格邊框隱藏是怎么實(shí)現(xiàn)的？”“表格屬性中還能設(shè)置什么？”等問(wèn)題，引導(dǎo)學(xué)生找到答案。 師：只有想不到，沒(méi)有做不到，網(wǎng)頁(yè)布局，表格幫你輕松搞定。 設(shè)計(jì)意圖：以一個(gè)熟悉的游戲任

8、務(wù)引導(dǎo)學(xué)生探究、學(xué)習(xí)、掌握表格布局的知識(shí)。同時(shí)，任務(wù)素材又是后續(xù)學(xué)習(xí)任務(wù)“主頁(yè)設(shè)計(jì)”的一個(gè)范例，幫助化解學(xué)習(xí)難點(diǎn)。 3創(chuàng)設(shè)情景，引起思考 師：再次欣賞這幅拼圖作品，不知道攝影師有沒(méi)給它取過(guò)名，就讓我們來(lái)給它設(shè)計(jì)個(gè)名稱吧。 生：“大海，大?！?，“港灣”，就用“威尼斯的淚” 師：請(qǐng)大家分別用“大海，大?！焙汀巴崴沟臏I” 做名稱來(lái)看這幅作品，不知道你的腦海里會(huì)浮現(xiàn)些什么？ 生：很不一樣。 師：作品的名稱十分重要，它能夠引導(dǎo)觀眾欣賞的視角，我們?cè)谶M(jìn)行網(wǎng)站策劃構(gòu)思的時(shí)候，一定要給自己的網(wǎng)站設(shè)計(jì)好名稱。 師：拼圖照片源自一則反映威尼斯

9、遭受水淹的新聞報(bào)道，由于氣候變化，威尼斯經(jīng)常遭受水災(zāi)，人們用葬禮的形式倡議拯救威尼斯。在學(xué)習(xí)網(wǎng)站還有“2012離人類還有多遠(yuǎn)？”和“哥本哈根氣候大會(huì)”等背景資料，提供這些材料是為了引起大家對(duì)“氣候變化對(duì)人類社會(huì)的影響”這一社會(huì)議題的思考，同時(shí)我們將借助網(wǎng)頁(yè)技術(shù)來(lái)發(fā)出自己的聲音。 師：讓我們一起進(jìn)入主頁(yè)設(shè)計(jì)活動(dòng)環(huán)節(jié)。 設(shè)計(jì)意圖：通過(guò)名稱設(shè)計(jì)，揭示網(wǎng)頁(yè)作為一種信息表達(dá)技術(shù)的價(jià)值，培養(yǎng)學(xué)生的創(chuàng)作意識(shí)。用熱門(mén)新聞和議題創(chuàng)設(shè)情景，激發(fā)學(xué)生創(chuàng)作欲望和增強(qiáng)社會(huì)責(zé)任感。 4任務(wù)驅(qū)動(dòng)，合作探究 活動(dòng)內(nèi)容：根據(jù)背景資料，以同桌同學(xué)為小組，進(jìn)行網(wǎng)站創(chuàng)建的策劃與構(gòu)思，形成網(wǎng)站主

10、頁(yè)的初步框架，以完成主頁(yè)表格框架或繪制草圖等形式呈現(xiàn)結(jié)果。 師：主頁(yè)設(shè)計(jì)是網(wǎng)站設(shè)計(jì)制作的一個(gè)重心，設(shè)計(jì)的完成如同寫(xiě)文章列好了提綱，將對(duì)整個(gè)網(wǎng)站的制作過(guò)程和完成質(zhì)量起重要影響。接下來(lái)，小組同學(xué)要發(fā)揚(yáng)團(tuán)隊(duì)協(xié)作精神，一起來(lái)完成學(xué)習(xí)任務(wù)。這可能是我們第一次進(jìn)行網(wǎng)站主頁(yè)的設(shè)計(jì)，所以老師給大家的建議是“從模仿做起，善于吸收他人經(jīng)驗(yàn)”，在學(xué)習(xí)網(wǎng)站中有“網(wǎng)站創(chuàng)建流程”“網(wǎng)站主頁(yè)設(shè)計(jì)”“主頁(yè)模版欣賞”等內(nèi)容可供參考。 教師將“網(wǎng)站創(chuàng)建流程”（如圖2）和“威尼斯的淚”表格框架網(wǎng)頁(yè)（如圖4）投影在屏幕上，作為重點(diǎn)提示；了解小組合作情況、操作進(jìn)度，解決技術(shù)問(wèn)題，并對(duì)技術(shù)相對(duì)薄弱的小組重點(diǎn)幫助指導(dǎo)。

11、小組同學(xué)合作協(xié)商，進(jìn)行網(wǎng)站的策劃與構(gòu)思，形成網(wǎng)站主頁(yè)的初步框架。 設(shè)計(jì)意圖：通過(guò)任務(wù)驅(qū)動(dòng)、小組合作探究，讓學(xué)生在實(shí)踐中體會(huì)網(wǎng)站創(chuàng)建和主頁(yè)設(shè)計(jì)的知識(shí)，培養(yǎng)協(xié)作、交流的意識(shí)和能力。 5交流評(píng)價(jià)，分析提高 師：在剛才的學(xué)習(xí)活動(dòng)中，大家表現(xiàn)很好，一些小組中，同學(xué)們的討論很激烈，發(fā)揮了各自特長(zhǎng)，任務(wù)完成體現(xiàn)了1+1>2的效果；下面我們一起圍繞以下三點(diǎn)來(lái)交流學(xué)習(xí)成果：網(wǎng)站名稱響亮有特點(diǎn)、欄目設(shè)置有趣且反映主題、頁(yè)面布局美觀可實(shí)現(xiàn)。老師會(huì)請(qǐng)幾組同學(xué)派代表上臺(tái)來(lái)介紹自己的設(shè)計(jì)，其他同學(xué)隨時(shí)準(zhǔn)備發(fā)表觀點(diǎn)。 設(shè)計(jì)意圖：通過(guò)交流評(píng)價(jià)學(xué)習(xí)成果，有助于學(xué)習(xí)小組的思維與智慧被

12、整個(gè)群體所共享，形成共享的、更高級(jí)的理解，同時(shí)在評(píng)價(jià)中獲得成就感。 6課堂小結(jié)，延伸教學(xué) 師：這節(jié)課我們圍繞設(shè)計(jì)網(wǎng)站主頁(yè)，實(shí)踐探討了網(wǎng)站的策劃構(gòu)思和實(shí)現(xiàn)的過(guò)程，接下來(lái)的幾節(jié)課我們將進(jìn)一步完善設(shè)計(jì)，學(xué)習(xí)新知識(shí)以至完成整個(gè)網(wǎng)站。網(wǎng)頁(yè)技術(shù)作為一種信息表達(dá)的技術(shù)，其真正價(jià)值的體現(xiàn)在如何更新穎合理地表達(dá)一個(gè)有意義的主題或內(nèi)容，希望同學(xué)們?cè)谌粘W(xué)習(xí)過(guò)程中注重觀察，多積累一些網(wǎng)頁(yè)制作的知識(shí)，提升技術(shù)素養(yǎng)。 六、教學(xué)反思 在讓學(xué)生圍繞某個(gè)主題進(jìn)行網(wǎng)站設(shè)計(jì)制作時(shí)，會(huì)碰到這樣一些情況：（1）找不到頭緒，無(wú)從下手；（2）想到一點(diǎn)做一點(diǎn)，結(jié)果做到一半再也做不下去；（3）網(wǎng)站最終完成了，但卻暴露出欄目設(shè)置不合理，內(nèi)容無(wú)法體現(xiàn)主題等問(wèn)題。顯然，學(xué)生對(duì)網(wǎng)站策劃構(gòu)