《網(wǎng)站主頁的設(shè)計》教學設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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