用表格為網頁布局教學設計

劉浩

摘 要 “用表格為網頁布局”教學設計通過巧妙設計，設置游戲、實驗等教學環節，化抽象為直觀，加強學生課堂的體驗，調動學生的參與意識。

關鍵詞 教學設計；網頁布局；信息技術

中圖分類號：G633.67 文獻標識碼：B

文章編號：1671-489X（2015）21-0108-03

1 設計思路

這節課是“建站計劃”“建立站點”之后知識的進一步延伸，是制作網站的前期重要知識，在本章中具有承前啟后的作用，要求學生熟練掌握。小游戲環節讓學生體驗網頁布局的重要性，調動學習的積極性，發揮學生的想象力。通過嘗試小實驗環節，體會表格的作用。通過回顧Word中表格操作，嘗試解決SharePoint2007中表格中的相關問題，使學生能進行知識遷移與內化，提高課堂的深度。通過設置挑戰任務，培養學生的自主學習能力。主要用到的教學方法包括講授法、實驗法、探究法、演示法、練習法。

2 教學分析

教材分析 本課選自浙教版初中八年級《信息技術》第三單元，教學對象為八年級學生。如何將文字、圖像和網頁其他元素合理恰當地安排在網頁中，使頁面易讀和美觀是初學者建設網站首要考慮的問題。表格作為一種素材排版定位工具，在建設網站過程中有著不可替代的地位，因此，本課對于網頁制作有著十分重要的作用。

學情分析 學生已經掌握使用Word、PowerPoint等軟件制作多媒體作品的方法，對于網頁制作有一定的借鑒作用。SharePoint Designer2007中的表格與Word和Power-Point有類似的操作，對于表格操作的方法沒有技術難點，表格的知識可以利用知識遷移來完成學習。

教學目標

1）通過設置制作以環保為主題的網頁的任務，培養學生的環保意識。

2）通過玩游戲環節，使學生體驗、了解網頁布局的作用是排版。

3）通過知識講解，使學生理解網頁布局的類型及方法。

4）通過設置對比實驗，讓學生了解表格在網頁制作中的作用是定位對象。

5）通過設置任務讓學生掌握SharePoint2007中表格的操作。

6）通過課堂拓展任務，學生自主創作、思考，掌握嵌套表格的作用及操作。

教學重點

1）掌握網頁布局的方法。

2）SharePoint2007中表格的操作。

教學難點

1）網頁布局的作用。

2）表格在網頁制作中的地位。

3 教學過程

游戲導入，布局的作用

教師：各位同學，我們先玩一個拼圖游戲。請雙擊打開桌面上的拼圖游戲.swf。這里有很多關于環境保護的圖片素材，你可以通過拖放鼠標的方式將這些圖片再次排列。請用兩分鐘完成拼圖。

【設計意圖】通過此游戲環節，讓學生在不知不覺中完成網頁布局的操作，既能實現可視化布局效果，還能通過開放式游戲使學生的作品多樣化，增強課堂的趣味性。

教師：我們一起來分享一下各位的作品。誰愿意分享你的作品？（展示2～3個不同類型效果）

【設計意圖】鼓勵學生展示、表達自己的想法與成果，培養學生的自信。

教師：你為什么要這樣設計？

學生：這樣設計比較好看，方便瀏覽，界面也簡潔。

教師：很好。這位同學剛分享了他的成果與設計思路，設計頁面的目的是美觀、簡潔、方便使用。這就是這節課要學習的內容——布局網頁。

【設計意圖】針對這個小活動，引導學生做總結，輕松突破網頁布局這一難點，充分體現了以學生為中心的教學思想。

教師：現在我們來一起學習一下常見的網頁布局的類型及其效果（以此主題為例，展示四種不同的布局類型，使學生對網頁布局有更加深刻的認識）。那是不是只有這四種類型呢？其實還有其他的類型，請看效果圖。

【活動小結】網頁布局的作用是排版。但是網頁沒有特定的布局，只要達到界面簡潔、美觀、方便使用的效果即是好的布局。

任務驅動，畫布局圖

任務一：在紙上畫出網頁布局圖。

要求：1）按照剛才拼出的效果在白紙上畫出布局草圖；2）將標題、導航欄、網頁等信息標注在布局圖的相應位置，效果如圖1所示。

學生動手畫草圖，教師選取幾種草圖拍照上傳到QQ展示并評價學生的布局，都能畫出自己的效果圖，并選取一個布局圖，將其畫在黑板上。

【設計意圖】教師通過手機拍照并上傳至QQ，體現了手機與QQ等生活工具在教學中的應用，還能引導學生學會將手機與QQ等生活工具用于學習。及時展現、反饋學生的作品，提高課堂資源的利用。

教師：這是我們某位同學的大作，這個草圖是一個不規則的圖形，看我怎么用魔法將其變成我們常見的圖形。

教師通過將學生的布局圖添加幾條輔助線，使其轉變成常見的、規則的幾行幾列表格。

教師：當我將這個布局圖添加幾條線，不規則的圖形變成了什么？如圖2表格布局圖所示。

學生：表格。

教師：對，就是表格。那你的布局圖能夠轉換成幾行幾列呢？請同學們在布局圖上畫一畫。

【設計意圖】像數學題一樣，通過添加輔助線的形式將不規則圖形轉變成規則圖形，激發學生的創造性思維，讓學生懂得學科之間是有關聯的。將學生的作品當成課堂教學資源，更加有說服力。

實驗教學：表格的作用

學生：老師，我們在Word、PowerPoint多媒體作品設計過程中沒有用到表格，那網站能不能不用表格？

教師：李彥，你真棒，很會思考，我們為他鼓掌。為了驗證你的猜想，我提供了一個實驗，請你來驗證一下。endprint

教師：（打開實驗鏈接，將網頁bg1.htm打開）請你將這個頁面中的文字和圖片排列整齊（文字、圖片無法排列整齊，再打開bg2.htm）。現在請你將圖片和文字分別放到表格中，看看效果。

教師：通過這個實驗，你得出了什么結論？

學生：用表格可以很方便地將文字與圖片排列整齊。

教師：說得很好，表格的作用就是將網頁中的文字、圖片等素材對象進行定位。網頁都是用表格來進行布局的，請看兩個范例（展示網頁的表格）。

【設計意圖】事先預設此環節，安排學生李彥在適當的時候提出問題，引出課堂知識沖突，為下一環節做好鋪

墊；同時吸引學生的注意力，及時調整學生的學習狀態。通過設計一個對比實驗，用實驗驗證學生的猜想，讓學生總結實驗結論——表格在網頁布局的作用，培養學生的鉆研、思考、解決問題的能力。

插入表格

教師：插入表格之前，為了編輯的方便，我們通常要先設置網頁大小。在通常情況下，我們一般將網頁大小設置成默認狀態的“當前網頁大小”。

教師：接著請各位設計師在此頁面中按照你的布局草圖的行列數插入表格，最后將相應的文字信息填寫到表格中，效果請參照大屏幕。

【設計意圖】通過演示法講解、回顧打開網站站點的技巧與方法、網頁大小設置方法，快速進入任務二的學習中。

調整表格

教師：各位設計師，表格插入好的請舉手。（環顧學生）若有不會的，請一個設計師演示。請各位結合Word中表格的相關操作，還可以結合教材中的步驟，完成單元格的合并與拆分的操作，使網頁布局更加合理。

【設計意圖】關于表格的插入、拆分、合并單元格等操作已經在Word、PowerPoint設計多媒體作品時學過，學生可以憑已有的知識完成，也可以參照教材的步驟完成，培養學生的自學能力與意識。

作品的保存與評價 要求所有設計師保存提交作品，展示1～2個設計師作品，并做好評價。

【設計意圖】及時評價與反饋學生的作品，能夠鼓勵和督促學生認真完成作品的設計。

課堂拓展練習 如圖3所示課堂提高練習，在第二行調整導航欄這一行單元格列寬，使他們平均分布時不影響第三列圖片這一行，該如何實現？請參照教材的閱讀材料一提供的方法試一試。

【設計意圖】結合教材閱讀材料，通過設計課堂拓展練習，能使學習有余力的學生在課堂上有充分發揮，培養其自學能力。

4 課堂總結

師生一起回顧所學知識，課堂小結內容如圖4所示。

設計意圖 通過使用流程圖式的課堂總結，展現知識結構圖，有利于學生掌握本節課的知識點，有利于學生理解本節課的知識網絡，有利于學生重建知識體系。

教學反思 本節課先通過設置小游戲使得課堂氛圍更加輕松、活潑而不失寓教于樂。仿照解數學題一樣添加輔助延長線，將不規則的布局圖輕松轉化為幾行幾列的常見的規則的表格，輕松突破難點。通過設置對比實驗，激起學生的好奇心與思考，通過學生做實驗得出表格的作用是定位對象這一重要結論，避免了說教式的教學，使課堂教學形式更加多樣、有效。結合教材閱讀材料，通過設計課堂拓展練習，能使學有余力的學生在課堂上有充分發揮，培養其自學能力。采用流程式的課堂總結，將一節課的內容一一呈現，升華了課堂內涵。endprint