《網站主頁的設計》教學設計

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

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

3、構清晰、界面友好美觀”五個角度，給網站做個評價，認為都滿意就趕快伸出 五個手指頭。學生們高舉手臂，伸出五個手指。師：謝謝大家的支持，你們的認可是我創(chuàng)作的動力。師：通過前段時間的學習，我們已經較好地掌握了素材收集與整理的方法；掌握了一些利用FrontPage軟件做網頁的基本操作； 在欣賞優(yōu)秀網站的基礎上，對網站的策劃與構思有了一定了解。這節(jié)課，我們將跟隨著學習網站的導航欄，一起揭開創(chuàng)建個人網站的第一頁一一設計制作網站主頁。師：先來玩一個拼圖游戲吧。圖1學習網站首頁圖2學習參考頁設計意圖：用學習網站吸引學生的注意力,使其迅速進入課堂學習狀態(tài)。通過學生評價老師的網站設計，使學生對網站策劃構思中要考慮

4、的因素有進一步認識。2 .以趣激學，化解難點學生瀏覽學習網站中“拼圖游戲”活動要求?；顒觾热荩簩⒎指畛尚K的圖片素材插入到教師預先設計好的網頁中，完成拼圖。威尼斯的闈圖3 "威尼斯的淚”網站主頁圖4 "威尼斯的淚”表格框架師：老師這里有個完工的網站主頁（如圖3）,網站主題是關于拯救水城威尼斯的，網站名稱是“威尼斯的淚”，頁面十分簡潔，用一張圖片吸引觀眾目光，導航欄設置在右下處，四個超鏈接對應網站的四塊內容，這種網頁布局可歸為封面型的布局類型，在個人主頁和企業(yè)網站設計中較常用 （具體可參考學習網站）。請大家仔細看這個網頁，接著我們將用它的 半成品來玩拼圖（如圖 4）。教師用F

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

6、距值都設置為0。師：已經有同學完成拼圖提交了，某某同學是最快完成的，讓我們一起來看一下他們的拼圖吧。教師根據(jù)學生完成情況， 選擇不同的教學，如果已經有學生很好地完成了拼圖，就請學生來講解、演示；如學生都沒有很好地解決問題，教師可以通過提問“五張表格中最外一張用虛線顯示的表格在預覽中是否能看到它？”“表格邊框隱藏是怎么實現(xiàn)的？”“表格屬性中還能設置什么？”等問題，引導學生找到答案。師：只有想不到，沒有做不到，網頁布局，表格幫你輕松搞定。設計意圖：以一個熟悉的游戲任務引導學生探究、學習、掌握表格布局的知識。同時， 任務素材又是后續(xù)學習任務“主頁設計”的一個范例，幫助化解學習難點。3 .創(chuàng)設情景，引

7、起思考師：再次欣賞這幅拼圖作品， 不知道攝影師有沒給它取過名，就讓我們來給它設計個名稱吧。生：“大海，大?！?，“港灣”，就用“威尼斯的淚”師：請大家分別用“大海，大?！焙汀巴崴沟臏I”做名稱來看這幅作品，不知道你的腦海里會浮現(xiàn)些什么？生：很不一樣。師：作品的名稱十分重要， 它能夠引導觀眾欣賞的視角，我們在進行網站策劃構思的時候，一定要給自己的網站設計好名稱。師：拼圖照片源自一則反映威尼斯遭受水淹的新聞報道，由于氣候變化，威尼斯經常遭受水災，人們用葬禮的形式倡議拯救威尼斯。 在學習網站還有“ 2012'離人類還有多遠？” 和“哥本哈根氣候大會” 等背景資料，提供這些材料是為了引起大家對

8、“氣候變化對人類社 會的影響”這一社會議題的思考，同時我們將借助網頁技術來發(fā)出自己的聲音。師：讓我們一起進入主頁設計活動環(huán)節(jié)。設計意圖：通過名稱設計，揭示網頁作為一種信息表達技術的價值，培養(yǎng)學生的創(chuàng)作意識。用熱門新聞和議題創(chuàng)設情景，激發(fā)學生創(chuàng)作欲望和增強社會責任感。4 .任務驅動，合作探究活動內容：根據(jù)背景資料，以同桌同學為小組，進行網站創(chuàng)建的策劃與構思，形成網站主頁的初步框架，以完成主頁表格框架或繪制草圖等形式呈現(xiàn)結果。師：主頁設計是網站設計制作的一個重心，設計的完成如同寫文章列好了提綱，將對整個網站的制作過程和完成質量起重要影響。接下來，小組同學要發(fā)揚團隊協(xié)作精神，一起來完成學習任務。這可

9、能是我們第一次進行網站主頁的設計，所以老師給大家的建議是“從模仿做起，善于吸收他人經驗”，在學習網站中有“網站創(chuàng)建流程”“網站主頁設計” “主頁模版欣賞”等內容可供參考。教師將“網站創(chuàng)建流程”（如圖 2）和“威尼斯的淚”表格框架網頁（如圖4）投影在屏幕上，作為重點提示；了解小組合作情況、操作進度，解決技術問題，并對技術相對薄弱 的小組重點幫助指導。小組同學合作協(xié)商，進行網站的策劃與構思，形成網站主頁的初步框 架。設計意圖：通過任務驅動、小組合作探究，讓學生在實踐中體會網站創(chuàng)建和主頁設計的知識，培養(yǎng)協(xié)作、交流的意識和能力。5 .交流評價，分析提高師：在剛才的學習活動中，大家表現(xiàn)很好，一些小組中，

10、同學們的討論很激烈，發(fā)揮了 各自特長，任務完成體現(xiàn)了 1+1>2的效果；下面我們一起圍繞以下三點來交流學習成果：網站名稱響亮有特點、欄目設置有趣且反映主題、頁面布局美觀可實現(xiàn)。老師會請幾組同學派 代表上臺來介紹自己的設計，其他同學隨時準備發(fā)表觀點。設計意圖：通過交流評價學習成果，有助于學習小組的思維與智慧被整個群體所共享，形成共享的、更高級的理解，同時在評價中獲得成就感。6 .課堂小結，延伸教學師：這節(jié)課我們圍繞設計網站主頁，實踐探討了網站的策劃構思和實現(xiàn)的過程，接下來的幾節(jié)課我們將進一步完善設計，學習新知識以至完成整個網站。網頁技術作為一種信息表達的技術，其真正價值的體現(xiàn)在如何更新穎合

11、理地表達一個有意義的主題或內容，希望同學們在日常學習過程中注重觀察，多積累一些網頁制作的知識，提升技術素養(yǎng)。六、教學反思在讓學生圍繞某個主題進行網站設計制作時， 會碰到這樣一些情況： （1）找不到頭緒， 無從下手；（2）想到一點做一點，結果做到一半再也做不下去；（ 3）網站最終完成了，但 卻暴露出欄目設置不合理， 內容無法體現(xiàn)主題等問題。 顯然，學生對網站策劃構思的知識掌握不夠，我在教學設計中融入了三種方法來加強引導：（1）作品欣賞，俗話說：“熟讀唐詩三百首，不會做詩也會吟”，模仿是創(chuàng)作入門的重要途徑；（2）開展構思協(xié)商，通過小組合作和全體交流討論， 有助于教師和每位學生的思維與智慧被整個群體

12、所共享，形成共享的、更高級的理解。（3）進行作品評價，在自評和互評中反思自己策劃構思的不足，發(fā)現(xiàn) 自己和他人設計的新穎之處，使學生獲得滿足感和成就感。遇到失意傷心事，多想有一個懂你的人來指點迷津，因他懂你，會以我心，換你心，站在你的位置上思慮，為你排優(yōu)解難。一個人，來這世間，必須懂得一些人情事理，才能不斷成長。就像躬耕于隴畝的農人，必須懂得土地與種子的情懷，才能有所收獲。一個女子，一生所求，莫過于找到一個懂她的人，執(zhí)手白頭，相伴終老。即使蘆花暖鞋，菊花枕頭，也覺溫暖；即使粗食布衣，陋室簡靜，也覺舒適，一句懂你”叫人無怨無悔，愿以自己的一生來交付。懂得是彼此的欣賞，是靈魂的輕喚，是惺惺相惜，是愛，是暖，是彼此的融化；是走一段很遠的路，驀然回首卻發(fā)現(xiàn)，我依然在你的視線里；是回眸相視一笑的無言；是一條偏僻幽靜