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

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

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

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

4、吸引學(xué)生的注意力，使其迅速進入課堂學(xué)習(xí)狀態(tài)。通過學(xué)生評價老師的網(wǎng)站設(shè)計，使學(xué)生對網(wǎng)站策劃構(gòu)思中要考慮的因素有進一步認(rèn)識。2 2 .以趣激學(xué)，化解難點學(xué)生瀏覽學(xué)習(xí)網(wǎng)站中“拼圖游戲”活動要求?；顒觾?nèi)容：將分割成小塊的圖片素材插入到教師預(yù)先設(shè)計好的網(wǎng)頁中，完成拼圖。 H rqi FT r * a 帀圖3 3 “威尼斯的淚”網(wǎng)站主頁圖4 4 “威尼斯的淚”表格框架師：老師這里有個完工的網(wǎng)站主頁（如圖3 3），網(wǎng)站主題是關(guān)于拯救水城威尼斯的，網(wǎng)站名稱是“威尼斯的淚”，頁面十分簡潔，用一張圖片吸引觀眾目光，導(dǎo)航欄設(shè)置在右下處，四個超鏈接對應(yīng)網(wǎng)站的四塊內(nèi)容，這種網(wǎng)頁布局可歸為封面型的布局類型，在個人主頁和企

5、業(yè)網(wǎng)站設(shè)計中較常用 （具體可參考學(xué)習(xí)網(wǎng)站）。請大家仔細(xì)看這個網(wǎng)頁，接著我們將用它的 半成品來玩拼圖（如圖 4 4）。教師用FrontPageFrontPage軟件打開半成品網(wǎng)頁。師：同學(xué)們看到網(wǎng)頁上都有些什么？生：哦，表格，原來剛才的網(wǎng)頁是用這樣的表格來實現(xiàn)布局的。師：對了，那再仔細(xì)觀察一下，這里到底用了幾張表格。生：兩張，三張 .師：答案是五張表格，最外面一張?zhí)摼€顯示的表格將整體分為上下兩大塊，然后表格里面套表格，最終將所有網(wǎng)頁內(nèi)容，用一個個單元格定位。師：現(xiàn)在網(wǎng)頁上半部分的九個單元格就是留給大家來完成拼圖的，加油，看誰最快完成提交。學(xué)生下載素材，嘗試著完成拼圖；教師巡視，了解學(xué)生的制作過程

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

7、松搞定。設(shè)計意圖：以一個熟悉的游戲任務(wù)引導(dǎo)學(xué)生探究、學(xué)習(xí)、掌握表格布局的知識。同時， 任務(wù)素材又是后續(xù)學(xué)習(xí)任務(wù)“主頁設(shè)計”的一個范例，幫助化解學(xué)習(xí)難點。3 3創(chuàng)設(shè)情景，引起思考師：再次欣賞這幅拼圖作品， 不知道攝影師有沒給它取過名， 就讓我們來給它設(shè)計個名 稱吧。生：“大海，大?！保案蹫场?，就用“威尼斯的淚”師：請大家分別用“大海，大海”和“威尼斯的淚”做名稱來看這幅作品，不知道你的腦海里會浮現(xiàn)些什么？生：很不一樣。師：作品的名稱十分重要， 它能夠引導(dǎo)觀眾欣賞的視角， 我們在進行網(wǎng)站策劃構(gòu)思的時 候，一定要給自己的網(wǎng)站設(shè)計好名稱。師：拼圖照片源自一則反映威尼斯遭受水淹的新聞報道， 由于氣候變

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

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

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

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