第一篇：應用表格布局網頁教案設計與反思

應用表格布局網頁教案設計與反思

一、教學目標：

1、知識與技能：

（1）、了解表格在網頁設計中的作用。

（2）、掌握網頁中表格的制作方法、表格屬性的設置方法以及單元格的修飾與編輯方法，能夠在單元格中正確插入文字和圖片。

（3）、能夠根據(jù)網頁設計內容，正確布局表格的結構，掌握表格嵌套的設計方法。

2、過程與方法：

（1）、利用對比學習，培養(yǎng)學生知識遷移的能力。

（2）、通過用表格結構設計網頁，使學生進一步理解表格的作用、功能及網頁設計方法的多樣性，培養(yǎng)學生的發(fā)散思維能力。

（3）、通過自主探究，使學生掌握軟件的使用規(guī)則，培養(yǎng)學生自主學習的能力。

3、情感態(tài)度與價值觀：

（1）、通過對比學習使學生體驗軟件學習的一般方法及規(guī)律，提高學生自主學習的能力。

（2）、通過運用表格布局網頁對象活動，進一步掌握各種不同對象屬性的設置方法和規(guī)律，體驗創(chuàng)造的快樂。

（3）、通過“動物——人類的朋友”網站的設計與制作，激發(fā)學生關愛動物、保護動物的責任感，從而進一步樹立共同改善人類生存環(huán)境的意識。

二、教學重點難點：

1、教學重點：

（1）、了解表格在網頁設計中的重要作用。

（2）、掌握插入、編輯表格的方法及表格的屬性設置。（3）、掌握單元格的修飾與屬性的設置。

2、教學難點：

（1）、表格的嵌套在網頁設計中的應用。

三、教學過程：

1、創(chuàng)設情境、導入新課

（1）、展示兩個頁面并進行比較：一個使用表格布局，但表格邊框隱藏（看不出表格痕跡），其頁面工整，文本、圖片擺放對稱，具有一定的規(guī)律；另一個頁面凌亂，圖文混雜，擺放雜亂。

（2）、提問：你喜歡那個頁面的布局？學生回答。

（3）、提出問題：有什么方法可以達到第一個頁面的效果。觀察第三個頁面，內容與第一個頁面相同，顯現(xiàn)頁面中表格的邊框。

（4）、學生討論、交流，回顧Word中學習過的表格，領悟表格在FrontPage中的作用。

設計意圖：通過對比學習，培養(yǎng)學生知識遷移的能力。

2、任務驅動、自主學習

（1）、展示一些由表格布局的網頁，引導學生分析其表格結構，自然過渡到分析教材中的例子，得出表格的布局。

（2）出示任務一：規(guī)劃網頁表格的布局。分層完成該任務，基礎相對薄弱的學生僅要求讀懂教材中的網頁表格布局，知道規(guī)則，根據(jù)表格的行數(shù)與列數(shù)，調整至最終樣式；基礎扎實、操作能力較強的學生可以跳出教材，自行設計表格網頁布局，并將自己的表格設計繪制在教材上。

設計意圖：分層教學，學生可以根據(jù)自己的實際情況選擇任務難度，并動手分析和進行創(chuàng)意設計，培養(yǎng)學生的模仿以及創(chuàng)新能力。

（3）、出示任務二：新建一個頁面，用表格布局該網頁，并在該網頁中放入相應內容。FrontPage中表格的插入于編輯與Word中的表格操作類似，教師著重引導學生進行知識遷移。

（4）、學生操作，教師安排操作熟練的學生進行演示。設計意圖：培養(yǎng)學生知識遷移的能力和動手能力。

（5）、出示任務三：在表格中插入圖片、輸入文字。任務四：表格屬性以及單元格屬性的設置。

（6）、學生根據(jù)自己的實際情況選擇任務難度，可按教師的具體要求操作，也可根據(jù)自己的意圖進行設計。設計意圖：確保達到教學目標的同時，給學生一定的自主空間，鼓勵他們去創(chuàng)新，而不應讓學生一成不變地生硬模仿。

（7）、出示任務五（提高內容）：表格的嵌套。學生動手制作網頁。設計意圖：更好的發(fā)揮優(yōu)秀學生創(chuàng)作思維動手能力。

3、課堂小結、后續(xù)活動

（1）、教師引導學生回憶本節(jié)課學習的內容：在FrontPage中插入表格、編輯表格以及表格嵌套的基本方法等。

（2）、教師展示優(yōu)秀作品，表揚完成任務的學習，對未完成任務的學生，應鼓勵他們利用課余時間繼續(xù)完成。

四、教學反思： 略

第二篇：【張海燕】《應用表格布局網頁結構》教學設計及反思

“動畫補間”動畫的教學案例

南京武家嘴實驗學校 邢建華

一、教材分析

本課是江蘇省科教版初中信息技術（下冊）中第八單元《動畫制作》中第3節(jié)內容，學習的對象是初中二年級的學生。教材先給出了“動畫補間”動畫的定義，安排了兩個實例：“移動的太陽”和“旋轉的風車”。實例1中有對圖層的基本操作、導入外部圖片到舞臺……主要做出了位置移動的效果；實例2用到基本的繪圖功能繪制出漂亮的風車……主要做出了對象的旋轉動畫效果。這兩個例子的核心都是“元件”、“動畫補間”。教材最后小結了制作“動畫補間”動畫的主要步驟，這樣的小結有利于知識的遷移。

二、學情分析

上節(jié)課學習主題為初識Flash，安排了“冉冉升起的小太陽”動畫制作，分為亮麗登場和冉冉升起兩個環(huán)節(jié)：第一環(huán)節(jié)中分組完成元件小太陽的制作(自己繪制和導入外部圖片，其中導入的圖片要轉換為矢量圖，做去除背景色的效果處理)；第二環(huán)節(jié)從逐幀制作的“增加制作負擔而且最終輸出的文件量也會比較大”談到flash動畫的巧妙表現(xiàn)：動畫補間，“只要建立好開始幀和結束幀，中間部分軟件會幫我們填補進去，非常方便好用”。讓學生初步感受了“動畫補間”動畫。學生對進一步學習“動畫補間”動畫感興趣，有較高的探究欲。

三、設計思想

“動畫補間”動畫是Flash中非常重要的表現(xiàn)手段之一?！白屝游镌诰G色家園盡情表演”的主題，既有童趣，又能較好的將“動畫補間”動畫的各種效果表現(xiàn)出來，“將技術的文化特性與個性表達融為一體”。在學生掌握了“將所有元素放進元件庫中再調用”的思想的基礎上，本節(jié)課給出源程序，在庫面板里預備了元件，即學生喜愛的小動物；在學生初步掌握的最簡單易理解的移動效果入手，循序漸進，探究學習旋轉、速度變化等效果；跟著老師體驗元件實例的變化，如透明度、大小、角度等的調整，巧妙運用到動畫中來，力求技術的創(chuàng)新利用。

四、教學目標、重點難點 知識與技能：

1．進一步理解關鍵幀、過渡幀、元件、庫等基本概念。

2．進一步認識“動畫補間”動畫：動畫的對象是元件，兩個關鍵幀，中間過渡幀的表現(xiàn)。3．認識“動畫補間”動畫的屬性面板，學會設置“緩動”選項、“旋轉”選項，做出各種動畫效果。

4．進一步認識元件的好處：多次調用。對元件的實例進行“顏色”選項的設置、調整其大小、角度，應用于“動畫補間”動畫，做出各種動畫效果。

5．給自己的小動畫加上背景層，初步認識圖層的作用。過程與方法：

實例制作，學會“動畫補間”動畫的制作方法。情感態(tài)度價值觀： 1．“動畫補間”動畫是Flash中非常重要的表現(xiàn)手段之一。

2．運用“動畫補間”動畫，可以設置元件的大小、位置、顏色、透明度、旋轉等種種屬性，做出各種動畫效果，表達自己的想法。

行為與創(chuàng)新：

利用“動畫補間”動畫，讓可愛的小動物在綠色家園里盡情表演。重點：“動畫補間”動畫的制作方法。

難點：理解“動畫補間”動畫制作的規(guī)律，領悟“動畫補間”動畫制作的實質，并能夠舉一反三，觸類旁通。

五、教學過程(一)導入新課

上節(jié)課我們嘗試制作了冉冉升起的小太陽動畫，初步感受了“動畫補間”動畫的魅力。這個小動畫的特色在于：

(1)動畫的對象是圖形元件。我們自己繪制了小太陽，這個是我們電影中的主角，它會經常在舞臺亮相，為了方便多次調用，利用“修改”菜單下的“轉換為元件”命令，將它轉換為常用的圖形元件。

(2)動畫的關鍵幀有兩個。這個動畫體現(xiàn)的是位置的移動，起點和終點是兩個關鍵狀態(tài)。(3)中間的過渡幀自動生成，體現(xiàn)了位置的移動過程。這是利用幀屬性面板中的動畫補間來實現(xiàn)的。動畫補間是flash常用的動畫表現(xiàn)手法之一，是基本動畫，每個同學都要把這個小動畫好好的做一做，認真的想一想。

下面請大家動手再來試一試。有三個準備工作：

(1)下載今天的素材：繽紛的世界.fla，請打開庫面板，可以看到，后臺有很多可愛的演員，這是老師精心準備的，希望在同學們的努力下，每個小演員都有機會在喜愛的舞臺上盡情表演。

(2)遇到問題可以小聲的問旁邊的同學，也可以舉手問老師，老師還給大家提供了一個簡單的幫助動畫。

(3)大家可以先看看老師的樣例，你觀察到還有哪些效果？這些都可以在幀的屬性面板里去設置。請大家試試看。

設計意圖：從最簡單的移動效果入手，為進一步學習動畫補間動畫打基礎。將專用名詞貫穿于“動畫補間”動畫的制作過程，細致地講解，讓學生加深理解，這對以后的學習大有好處。

(二)認識動畫補間動畫的屬性面板

我們請一個同學在動畫中選擇第一幀，在“屬性”面板的“緩動”文本框中分別輸入“-100”和“100”，重新測試，觀察運動有什么變化。

(屏幕廣播

2、學生代表演示發(fā)言、教師補充)1．“緩動”選項

(1)在-1到-100的負值之間，動畫運動的速度從慢到快，朝運動結束的方向加速補間。(2)在1到100的正值之間，動畫運動的速度從快到慢，朝運動結束的方向減慢補間。(3)默認情況下，補間幀之間的變化速率是不變的。2．“旋轉”選項

選擇“順時針”或“逆時針”，在后面輸入數(shù)字，可使元件在運動時順時針或逆時針旋轉相應的圈數(shù)。

解決典型問題：

“動畫補間”動畫建立后，時間幀面板的背景色為淡紫色，在起始幀和結束幀之間有一個長長的箭頭。有時候，創(chuàng)建補間會失敗，這時圖層就變成虛線了。這是怎么回事呢，首先檢查兩個關鍵幀。按照老師的經驗，先刪除補間，再創(chuàng)建動畫補間，也是一種檢查的方法。

設計意圖：學習常見動畫效果的制作。(三)元件的實例

(屏幕廣播3)我們曾經講過：元件自動入庫，即演員在后臺，有一個好處，可以多次調用，我們來試試，在草地上種上朵朵小花。一花獨放不是春，百花齊放春滿園。下面老師來做些設置，讓小花變變樣。同學們注意觀察，想想，對你做動畫補間動畫有沒有啟發(fā)。

選中場景中的朵朵花(實例：小花)(1)分別設置“顏色”選項：亮度、色調、透明度、高級。

(2)利用工具面板上的任意變形工具調整小花的大小，設置不同的旋轉點，示范旋轉。讓我們做得更好：嘗試給動畫加上漂亮的背景層吧。

對于圖層知識，我們以后還會專門學習到。簡單一點的說，圖層之間相互獨立，一般一個元件的動畫放一個層。背景層當然放在最底層嘍。

設計意圖：創(chuàng)意實踐。讓學生體會到“動畫補間”動畫的制作有較強的靈活性與創(chuàng)造性，同時又有一定的規(guī)律可循，學習動畫制作不僅僅是學習，更是一種創(chuàng)造活動。

(四)作品展示、課堂小結

剛才我們欣賞了幾個同學的作品，各具特色，巧妙地運用了動畫補間動畫的各種效果，來表達小動物們俏皮可愛、運動陽光的一面。我相信通過本節(jié)課的學習，每個同學都有一份收獲感、一份喜悅感?，F(xiàn)在靜下心來看看課本11頁，13頁。我們把這幾句話讀一讀，是不是今天的收獲呢。

(1)“動畫補間”動畫是制作Flash動畫最常用的一種動畫類型。它是在兩個關鍵幀上分別設置同一運動對象不同的屬性，如位置、角度、大小等，從而創(chuàng)建這兩個關鍵幀之間變化的動畫效果。

(2)利用元件既能使動畫的對象豐富多彩，又能大大提高動畫制作的效率。

設計意圖：學生代表介紹自己作品的亮點。交流、分享。帶著學生看課本，體會、小結。

六、教學反思

總的來說，這節(jié)課有成功的地方，也有失敗的地方。

成功的是，本節(jié)課學生們基本上都能完成課堂任務，總體上也達到了預期的效果?！皽毓识隆杯h(huán)節(jié)，預設的是分析“冉冉升起的小太陽”源文件動畫，講解動畫補間動畫的對象，兩個關鍵幀，補間的生成。再看樣例，除了位置移動效果外，還有旋轉效果，速度變化的效果。學生動手去做的過程中，多少多少出現(xiàn)了一些小問題。

大部分原因是，第一幀中出現(xiàn)好多的“小動物”和背景圖等混亂的場面。如果單獨把小動物移動的動畫獨立出來，等完成單個任務后，再去完成場景任務，這樣出現(xiàn)的問題就少很多了。當然這不是解決問題的關鍵。學生“急于求成”的心理，想讓小動物們一起“出來”在漂亮的綠色家園表演。由于多數(shù)學生基礎不算好，所以很難一次性完成。

對元件理解的混亂：

這個環(huán)節(jié)沒有處理好，影響了下面的操作。

教師通過電腦演示分析典型問題，多個小動物運動或者加上背景的話，就必須要用到FLASH中的圖層了。學生通過書本例子，“旋轉的風車”共有三層：背景、桿子、葉片。教師演示了添加圖層的方法。布置學生添加背景任務。

本節(jié)課重點一應放在認識幀屬性面板中的動畫補間動畫屬性面板的“緩動”選項和“旋轉”選項的運用，并非是圖層。重點二是對元件實例的使用。對于元件的使用，我還是高估了整體學生的水平。大多數(shù)學生沒有把元件運用到自己的小動畫中，一，有些停留在修改元件狀態(tài)。

二、學生不知道什么時候去用?，F(xiàn)在想想，我干脆直接給他們看幾個效果，不好嗎。這一點沒有“亮”起來。如果我打開一個源動畫，強調一下，我們改變的是關鍵幀上的元件實例，其它的中間的狀態(tài)自動生成。學生不就明白了嗎。哎，不能太估高學生的想象力，主要還是他們沒有扎扎實實的理解動畫補間動畫的實質。也就是說，我的引入太快了，應該慢慢講的。

我還發(fā)現(xiàn)自己比較喜歡“講”，很多老師在教動畫制作時更關注學生的“做”吧？先不管什么“關鍵幀”，不管什么“形狀”補間，做一個出來看看。這是一種教學策略吧。學生能馬上體會到成功感，變得更有興趣了。可是，我上課時，喜歡細講，用“專業(yè)術語”講動畫制作。這樣好不好呢？我也比較不出來哪種方法效果好，因為大部分學生就是做得慢，等著我一個一個的去輔導。我比較累，也比較茫然。難道我是白講了？還是學生根本就聽不懂？其實我講的所謂專業(yè)術語跟書上的步驟描述是一樣的，我還加上了形象化的解釋。如果讓學生看書學習，那他們豈不更糟糕了？費解！我這樣講的目的，我來想想，應該是想讓學生學會基本動畫制作的思想，而不僅僅是模仿，我希望這樣。希望知識能夠遷移，學生能真正理解動畫制作。還有一個目的，不管是自己的教材還是外面的專業(yè)教程，哪怕是有樂趣的視頻教程，不都是左一個“關鍵幀”又一個“形狀補間”這樣來描述來讓人學習的嗎？我這樣“細講”，應該更好的架起了書本與學生之間理解學習的橋梁了吧？！

我比較得意于自己的“分析”“思想”等，不知道好不好。因為效果難以比較，長遠發(fā)展、眼前的成功率似乎是有點矛盾的。我也說不清楚。

我在預設一節(jié)課時似乎有點“固執(zhí)”，因為上節(jié)課已經初步接觸到動畫補間動畫的制作，這節(jié)課我安排了幾個環(huán)節(jié)：溫故而知新，實際上就是動畫補間動畫的制作；探究學習動畫補間幀屬性的“旋轉”“緩動”選項的作用；介紹元件的實例在舞臺上的種種表現(xiàn)，比如，大小的改變、角度的改變、透明度的改變，啟發(fā)學生用于動畫補間動畫的制作，做出更奇妙的效果出來。因為我在給學生的源文件中的庫面板里提供了很多素材，其中有背景圖，所以學生自然想到做背景，這里就涉及到圖層問題。我在預設教學時有“一帶而過”的想法。我把重點還是定在動畫補間的“效果”上。

總之，我覺得本節(jié)課還是應該建立在打好基礎的前提下，再實施教學這樣效果會更好。

第三篇：《應用表格布局網頁結構》教案

《應用表格布局網頁結構》教案

一、教學目標

1、知識與技能：

（1）了解表格網頁的作用；

（2）掌握網頁中表格的制作方法，表格屬性的屬性設置方法；（3）能根據(jù)網頁設計內容，正確布局表格的結構；（4）嘗試根據(jù)內容需要設計表格布局網頁頁面。

2、過程與方法：

（1）利用對比，加深學生對表格布局網頁的認識；

（2）通過用表格結構設計網頁，使學生進一步理解表格的作用、功能及網頁設計方法；（3）通過自主探究，使學生掌握軟件的使用規(guī)則，培養(yǎng)學生自主學習的能力。

3、情感態(tài)度與價值觀：

（1）通過實踐創(chuàng)作的過程，形成主動學習和利用信息技術、參與信息作品創(chuàng)作的態(tài)度；（2）培養(yǎng)學生注重吸取成功的經驗，提高本身的信息素養(yǎng)。

二、教學重點

1、表格的制作及設置方法；

2、根據(jù)實際情況設計并應用表格布局網頁。

三、教學難點

1、應用表格布局網頁頁面的意識；

2、合理制作表格，實現(xiàn)頁面布局。

四、教學方法

教師講解、演示、與學生任務驅動、合作學習相結合。

五、教學過程 教學過程

教師活動

學生活動

課前準備

將“學習素材”文件夾發(fā)送到學生機桌面；

打開并預習本課內容。

一、對比，引入新課

1、明確表格在網頁制作時的作用：頁面規(guī)劃

（1）展示兩個頁面（1.htm和2.htm）并進行比較： 提問：①這2個網頁，你喜歡哪個？為什么？ ②網頁中的文字、圖像對象如何插入？

③在Frontpage中打開2張網頁，觀察有什么不一樣。

總結：這些線就是表格線，在做網頁時，可以利用表格布局網頁結構。（2）引出本課內容：探索用表格來布局網頁的頁面。（3）明確本課的任務：使用表格制作網頁。

學生小組交流、討論，對比加深印象，感受表格布局網頁的作用 發(fā)現(xiàn)表格可以布局頁面 明確本課內容

二、小組合作，體會用表格布局網頁

2、模仿用表格布局網頁頁面結構（1）引導學生回憶Word中學過的表格內容，提示學生表格操作跟Word中具有很大的相通之處；

提問：還記得哪些表格的編輯方法？

（2）展示效果頁，引導學生分析頁面的結構，探索需要制作表格的結構；（3）講解演示表格的制作及調整；（4）布置學生完成任務一：“心憩空間”網頁

（5）展示成功學生的作品，引出表格屬性的設置；

如：行列的插入、刪除、單元格的合并、拆分、調整大小等。

根據(jù)網頁內容來規(guī)劃所需表格結構，了解網頁中表格制作及設置的方法。學生小組合作，完成網頁“chushi.htm”

三、小組合作，嘗試用表格布局網頁

3、小組交流并獨立制作表格布局網頁

（1）剛才我們一起體會用表格布局網頁的網面結構：先分析確定所需表格的結構，然后根據(jù)實際制作設置表格布局網頁頁面結構。接下來我們就來嘗試用表格布局我們的網頁了；引入用表格布局“多彩的生物”網頁；

（2）引導學生分析確定網頁的表格結構；

（3）布置學生完成任務二：制作“多彩的生物”網頁；可以根據(jù)自己的設計對網頁進行適當?shù)恼{整；

掌握根據(jù)網頁確定所需表格的結構 能根據(jù)網頁規(guī)劃表格

小組合作討論，根據(jù)學案提供的參考表格確定“多彩的生物”網頁的表格結構，再獨立完成圖片、文字的插入。

四、作品展示交流與課堂總結

1、展示成功學生的作品并點評；

2、總結本課內容：為了制作的網頁內容工整、美觀，所以我們選擇使用表格布局。本課我們嘗試并使用了表格來規(guī)劃布局網頁，嘗試設計個人網站的首頁，自主設計版面，靈活使用表格進行網頁制作。

掌握表格布局網頁的常見技巧，加強表格布局網頁的意識。

第四篇：《應用表格布局網頁結構》教學設計

《應用表格布局網頁結構》教學設計

一、教學目標

知識與技能：

1、了解表格在網頁設計中的作用。

2、能夠根據(jù)網頁的內容，正確布局表格的結構。

3、掌握網頁中表格的制作方法，能夠在單元格中正確插入文字和圖片，掌握表格屬性的設置方法以及單元格的修飾與編輯方法。

過程與方法：通過觀看優(yōu)秀網站表格布局，動手設計表格等環(huán)節(jié)，幫助學生進一步了解表格的作用、功能以及網頁設計方法的多樣性，培養(yǎng)學生的發(fā)散思維能力；通過學生自主地編輯和修飾表格等環(huán)節(jié)，培養(yǎng)學生自主探究學習的能力。

情感、態(tài)度與價值觀：

1、提高學生自學和探究的能力，培養(yǎng)學生應用表格布局網頁結構的興趣。

2、提高學生語言表達能力，學會客觀的評價作品。

二、教學重點與難點

重點：了解表格在網頁設計中的重要作用

掌握插入、編輯表格以及表格，單元格的屬性設置方法。

難點：表格的嵌套 表格，單元格，網頁屬性的設置

三、教學方法

講解演示教學法，小組合作學習法，自主探究學習法

四、教學設計說明

本節(jié)課是初中信息技術（下冊）2007年7月第一版第11單元《設計主題網站》第二節(jié)的內容，教學面向的是初二年級的學生，該年齡段的學生已具備了一定的信息素養(yǎng)，掌握了基本的信息技術知識和技能。初中的學生喜歡新、奇、特的事物，接受能力和理解能力比較快。而直觀、醒目的網站示例圖片則可以培養(yǎng)學生對于本課題的興趣，但是學生對于如何應用表格布局網頁結構的操作是比較模糊的。因此本節(jié)課充分地發(fā)揮學生了的積極性，讓學生隨著學案所設置的環(huán)節(jié)，探究完成一個又一個的應用表格過程。而學案則是在尊重學生解決問題的思維過程方式的基礎上設置的，注重學生的學習體驗和情感的體驗。整節(jié)課以學生為主體、教師為主導的架構下，搭建以生為本的情景學習的平臺，幫助學生自學、交流討論、深入探究，以不斷的完成應用表格布局網頁結構的過程為手段，一步步完成學習任務。

五、教學過程

課前將素材和網站站點發(fā)送到桌面，指導學生解壓縮。并帶領學生熟悉本節(jié)課所要制作的網頁的素材。

（一）設置情境，引入課題

師：我們知道，地球是人類賴以生存的家園，然而，近幾年來，地球的環(huán)境卻越來越惡劣：全球性氣候變暖、暴雨、雪災等災難性天氣頻繁出現(xiàn)，給我們的生活帶來嚴重威脅。因此，我們每一位同學，都有責任去保護環(huán)境，那么我們應該如何去保護環(huán)境呢？我想首先是宣傳環(huán)保、倡導環(huán)保。那上一節(jié)課呢我們已經建立了以環(huán)保為主題的站點，學習制作了網站的歡迎頁。今天這節(jié)課，我們將一起學習制作網站的主頁面來宣傳環(huán)保，那如何來設計主頁面呢？首先我們先來欣賞幾個著名網站的主頁。（播放課件）

師：你們能看出這些是哪些網站的主頁嗎？ 生：網易，新浪，搜狐

師：很好，它們分別是網易、新浪、搜狐的主頁面。我們知道這些網站的主頁面包含的內容都相當豐富，但給我們的視覺感受卻是繁多而不雜亂，緊湊而不單調。這些頁面設計是如何做到這一點的呢？

師：我們以搜狐主頁面為例，（呈現(xiàn)搜狐主頁面的圖片），來探究一下如何設計網站的主頁面。首先這一頁面的左上角有一張的搜狐的LOGO圖片，使我們一眼能認出這是搜狐頁面。在圖片的右邊呢，是網站中的導航，通過導航鏈接到其它的頁面。下面的主體部分，分成了幾個區(qū)域，我把它標示出來，這樣我們不難看出，中間部分，是一些小信息的鏈接。上面這一部分以廣告信息為主，下半?yún)^(qū)域分成了四個部分，分別是新聞，娛樂，體育以及廣告圖片。通過標示，我們會發(fā)現(xiàn)這呈現(xiàn)出來的其實就是一張表格的摸樣（可啟發(fā)學生回答）。

師：因此，使用表格來布局網頁結構，是使頁面清晰緊湊，整潔大方的簡便有效的方法。那今天這節(jié)課，我們就一起來學習應用表格布局網頁結構，也做出這樣一張頁面出來。

設計意圖：所選的網頁學生都比較熟悉，師分析頁面，呈現(xiàn)本節(jié)課的課題，激發(fā)學生的學習興趣。

（二）新課學習

環(huán)節(jié)一：根據(jù)素材，小組合作設計表格。

師：課前同學們已經熟悉了素材。既然我們要應用表格布局網頁結構，那就要先進行設計。

師：剛才同學們也欣賞了搜狐等網站的主頁面的表格布局。

師：下面呢，請同學們拿起筆在老師提供的紙上來設計表格。以相鄰的四個同學為一個小組，對照素材，討論交流，在紙上畫出你們將要制作的頁面的表格布局，并對表格中將要添加的內容進行標示。

學生以小組為單位，設計表格。

師：很多小組已經完成了，下面我們挑選一些小組的同學到前面來展示一下你們的設計，并簡要說明你們的頁面布局。其他同學注意看，注意聽，看看有沒有值得借鑒的地方應用到自己小組設計的表格中去。

展示幾個小組所設計的表格

設計意圖：以小組為單位動手設計表格可以培養(yǎng)學生的合作探究能力。讓學生通過交流討論后設計表格，可以集結多人的智慧，讓輕松的氛圍中設計出表格。

環(huán)節(jié)二：動手實踐，編輯表格

師：同學們都已經將表格設計好了，下面我們就來動手實踐，將表格在網頁中繪制出來。

師：首先，請同學們打開FrontPage，從文件菜單中打開站點“huanbao”，并新建一個頁面。師：那如何來繪制表格呢？請同學們參照學案，先嘗試看看如何插入表格？（學生探究）

生根據(jù)學案，自己先探究完成表格的插入

師：哦，這里提供了一個專門供表格使用的菜單。我們這邊可以使用表格菜單，打開表格對話框，就涉及到添加的表格是幾行幾列的了。這里呢，老師有一個建議：暫且以最多行，最多列來計算表格的行列數(shù)。舉個例子，請同學們注意看老師這里的一張表格樣例。同學們數(shù)數(shù)看，這里的表格是幾行幾列。

生：9行5列（學生思考）

師：同學們可以很清楚地看出，9行，那列數(shù)呢？我們這里暫且以最多列計算。

生：5列

師：同學們的表格也是這樣的。請同學們根據(jù)你所設計的表格的行列數(shù)插入表格。

師：表格插入好了以后，同學們，我們一起來看一下，這個插入的表格跟我們在圖紙上設計的表格一樣嗎？

生：不一樣 師：哪里不一樣？

生：插入的表格是分成若干個等分的小單元格，而我們在圖紙上設計的表格中有很多不等分的小格子。

師：那這里呢，就要對表格進行編輯了。因為剛剛我們是按照最多行，最多列來計算的，那這里只需要對多余的單元格進行合并。

師：那如何對單元格進行合并呢？同學們有沒有學過在word里編輯表格（如果有，可實現(xiàn)知識的遷移；如果沒有的話，老師送一把萬能鑰匙——右擊法），請同學們編輯表格。（與學生互動，嘗試讓學生講解操作）

師：每一個小組的同學要互相幫助，幫助沒有完成的同學對表格進行編輯。師總結：我們剛剛通過表格菜單欄，打開表格對話框，插入表格。在對表格進行編輯時，是按照最多行，最多列計算的。還可以采用其他的計數(shù)方法，同學們可以根據(jù)個人情況靈活運用。設計意圖：讓學生根據(jù)本小組設計的表格布局，插入表格，再對表格進行編輯，注重了學生在課堂中主體性的體現(xiàn)。在編輯表格時，可以通過以前所學的WORD中表格的編輯方法，從而實現(xiàn)知識的遷移。

環(huán)節(jié)三：根據(jù)設計，填充表格內容

師：表格編輯好了以后，一張空表就完成了。下面就要開始填充表格內容（展示我的表格填充完成的效果）。我們這里的內容，跟據(jù)素材，主要是圖片和文字。那上一節(jié)課呢，我們已經學會了在首頁中添加文字和圖片了，那這里的添加方法和前面是一樣的，不同的是，這里需要將圖片和文字添加到對應的單元格中，所以在插入之前，一定要先定好位。下面請同學們根據(jù)素材和自己的設計添加表格內容，可參考學案。學案中，也提供了文字和圖片填充到表格中的方法。

學生動手填充表格內容，使網頁更立體豐富。教師觀察學生操作，講解表格的嵌套

師：在老師剛剛巡視過程中，發(fā)現(xiàn)有些同學采用了這樣的表格布局，將按鈕圖片放在LOGO圖片的右邊，這里的按鈕圖片有五張，我們怎么實現(xiàn)它們的放置呢？

學生思考

師：這里呢，老師教給大家一個方法，可以在這個單元格中再插入一個表格，5行1列，這樣就可以將5按鈕圖片均勻地相對固定地放在這個單元格中。這就是表格的嵌套。感興趣的同學可以根據(jù)需要嘗試添加。

設計意圖：學生配合學案填充表格內容，體會在表格在FrontPage中的作用：定位對象

環(huán)節(jié)四：最后修飾，美化表格和單元格

師：同學們已經學會應用自己的設計的表格布局網頁結構，那同學們想不想你們的頁面更漂亮呢？

生：想。（躍躍欲試）

師：哦，下面我們就來美化我們的網頁。請同學們說說看，我們可以從哪些方面對頁面進行美化呢？（拋出問題）

生：字體…… 生：單元格里的顏色等

師：那這里呢，老師提供一個操作，右擊我們看到有三個屬性，分別是網頁屬性、單元格屬性以及表格屬性。同學們可以選擇不同的屬性，打開相應的對話框，美化頁面。

學生調整表格屬性，美化頁面

組中完成得較快的同學幫助本組其他同學完成表格的編輯。

設計意圖：讓學們動手美化頁面，使學生掌握表格屬性的設置方法以及單元格的修飾方法與編輯方法。

環(huán)節(jié)五：探究實踐

師：下面請同學們預覽你們的網頁，有沒有發(fā)現(xiàn)頁面上有表格邊框，那同學們剛才看我們搜狐等網站的主頁面的時有沒有邊框??？

生：沒有

師：如何將邊框去掉呢？請同學們探究看看。（可配合學案）師提示：可選擇右擊，打開表格屬性對話框，對邊框的粗細進行設置 師讓探究出來的同學上前演示并講解制作方法。

師：請同學們繼續(xù)完成你們主頁面的制作，并注意保存。學生進一步練習，師巡視指導。

設計意圖：應用表格布局網頁結構的基本操作已經掌握了，因此師讓學生做進一步的探究，如如何去除表格的邊框使頁面更自然美觀，培養(yǎng)學生的探究精神。對于表格的嵌套，可以讓學生根據(jù)需要自主探究實現(xiàn)。

環(huán)節(jié)六：作品展示，進行評價

師：通過對表格進行設計，編輯，填充，修飾等操作，同學們都已經制作完成了一張用表格布局的保護環(huán)境的主頁面。下面呢，我們一起來看看同學們的作品。請制作者呢，談談你的設計特點以及制作流程。其他同學們也可以提出自己的建議和意見。

師總結。

設計意圖：展示部分同學的作品，首先自身先說說特點，其他同學做點評?？梢耘囵B(yǎng)學生客觀的評價作品的能力。

（三）總結 本節(jié)課我們應用表格制作完成了保護環(huán)境的主頁面。通過實踐操作，我們發(fā)現(xiàn)布局網頁結構其實并不難。正如“耳聞不如目見，目見不如足踐”。正如保護環(huán)境其實離我們也不遙遠。從不亂扔紙屑，保持機房整潔，節(jié)約每一滴水，每一度電這樣的小事做起，我們就能為保護環(huán)境做出一份貢獻，成為保護地球的小衛(wèi)士。

教學反思

課堂教學展評活動結束了，我在響水中學開設的課題為初中信息技術下冊第11章第二節(jié)《應用表格布局網頁結構》，現(xiàn)將本課教育教學實踐中的再認識和再思考反思如下：

一、選取課題，自主探究

接到課題時，考慮到最近環(huán)境問題造成的災難頻發(fā)，將網站的主題確定為環(huán)境保護。通過“環(huán)境保護”網站的制作，培養(yǎng)學生宣傳環(huán)保，倡導環(huán)保的意識，并將這種意識在日常的行為中體現(xiàn)出來。在教學流程的設置上，從設計表格——制作表格（插入和編輯）——填充表格內容——修飾應用表格制作的網頁著手，真正做到學生為主體，教師為主導的教學模式。同時，給學生提供了學案，方便學生更好地發(fā)揮小組合作能力和自主探究能力。在教學內容得選擇上，因為本節(jié)內容需要2-3節(jié)課的課時。所以在教學內容的選擇上將Flash等動態(tài)對象的制作放到下一節(jié)課講解。本節(jié)課的重點側重于讓學生通過本節(jié)課的學習能夠學會使用表格完成一張網頁的制作。

二、表格示例的講解（不足之處）

在本節(jié)課的講解過程中，表格的設計部分花的時間比我想象的多。學生一開始不知道從何入手。我分析了兩個原因：一是學生對于信息技術課可能更習慣于模仿學習，讓他們動手自己設計有一定的難度。二是我在課前沒有考慮到將一個表格示例放在屏幕上供學生參考，之前考慮到更多地是希望學生自己設計，有自己的創(chuàng)意想法。我在講解時應該帶著學生將示例分析一下，并在提供給學生的學案上添加一個設計的簡單的表格示例。

三、表格嵌套的講解

在講解表格嵌套時，本想用自己設計的一個示例講解。在課堂教學中，巡視過程中有一個同學就遇到了需要通過表格嵌套才能解決的問題。這樣對于這部分的講解，形成了發(fā)現(xiàn)問題，分析問題，解決問題的流程，對于學生來講，這樣的方式更有利于他們的理解和應用。

四、學生情況分析

對于本節(jié)課來說，學生是初學者。而且從本節(jié)課的課堂完成效果來說，學生基本的素養(yǎng)都具備，他們都能參與到課堂教學中，共同解決自主探究中發(fā)現(xiàn)的問題。但對于學生來講，還是更習慣于教師講解，學生模仿的模式。這也是最后課堂作品沒能達到的理想化的其中一個原因。

五、同行聽課的借鑒

由于客觀原因，25日上午只聽了鹽都的一位老師上的最后一節(jié)與我同課題的課的教學。她在教學過程中，用了幾個簡單的主題，將學生分成三個小組，完成作品。對于我這節(jié)課，我可以將環(huán)境保護這樣的主題網站進一步細分為幾個部分，分小組完成其中的一個網頁，這樣組成一個網站，我相信效果會更好。

六、反思再教設想

如果我再教這一節(jié)課，我會更多地分析學生情況。在組織教學中，讓小組合作貫徹其中。在讓學生設計表格之前，對表格的分析這塊講得更細，解釋得更清楚，并提供示例。在教學中，嘗試讓學生分小組應用表格制作網站中的不同頁面，根據(jù)提供的內容完成不同的網頁的制作。但這樣的設置可能要考慮到因素會更多，會根據(jù)主題和素材的內容而定。

第五篇：教學設計(利用表格布局網頁)[推薦]

利用表格布局網頁

教學設計

授課教師：劉春霞

授課班級：計算機應用1202班

一、課題名稱：利用表格布局網頁

二、授課課時：1個課時

三、教學內容分析

本節(jié)課以利用表格制作一個簡單主頁為例，要求學生掌握并靈活運用表格及單元格的一些基本屬性設置，從而設計出一個“匡”字型的主頁。本次課要求學生具有創(chuàng)建站點的知識，以及Dreamweaver CS3的一些基本操作。

四、學生特征分析

授課對象是職高高二學生，學生已具有熟練操作一些常用軟件的能力，已掌握Dreamweaver CS3的一些基本操作。

五、教學目標（知識與技能、過程與方法、情感態(tài)度與價值觀）

1、知識與技能目標

掌握插入表格、表格基本屬性的理解與設置、單元格或行的基本屬性的理解與設置，掌握利用表格布局網頁的方法。

2、過程與方法目標

引導學生分析項目，自主獨立思考及操作，指導與修正，掌握插入表格、表格基本屬性的理解與設置、單元格或行的基本屬性的理解與設置，掌握利用表格布局網頁的方法。

3、情感態(tài)度與價值觀目標

提高學生的觀察能力及分析能力，調動學生自主能動性，培養(yǎng)學生較濃的學習興趣，使學生建立正確的人生觀與價值觀。

六、教學重點難點

掌握插入表格的方法 掌握表格屬性設置的基本方法 掌握單元格或行屬性設置的基本方法 掌握使用表格進行頁面布局的基本方法

七、教學方法

1、講授法

2、演示法

3、任務驅動法

八、教學環(huán)境與資源

教師機，教學廣播軟件，學生機（60臺）

九、教學過程

1、創(chuàng)設情境，導入新課

欣賞網頁，分析網頁結構，引入本次課學習的項目：利用表格制作一個簡單的“匡”字型網頁。

2、講解知識，演示操作 講解插入表格的方法，表格屬性設置的基本方法及單元格屬性設置的基本方法，（1）插入表格的方法

將光標置于頁面中，然后在主菜單中選擇【插入記錄】／【表格】命令或在【插入】／【常用】面板中單擊（表格）按鈕打開【表格】對話框進行參數(shù)設置，最后單擊【確定】按鈕插入表格。（2）表格屬性設置

首先選中表格，然后通過表格【屬性】面板設置表格的行數(shù)、列數(shù)、寬度、高度、填充、間距、邊框、對齊方式、背景顏色、背景圖像、邊框顏色等屬性。

▲寬度中的百分比單位一般在制作表格嵌套的時候用。（3）設置單元格或行【屬性】的方法

首先選擇單元格或行，然后通過單元格或行【屬性】面板可以設置單元格的寬度和高度、水平和垂直對齊方式、背景顏色和背景圖像以及邊框顏色等。

（4）展示網頁的最終結果并引導學生分析其結構，提示并演示操作的關鍵步驟，讓學生獨立思考完成，培養(yǎng)學生知識的遷移能力，效果圖如下：

主要操作步驟：

a、新建一個站點，站點根目錄為自己的文件夾（含有素材），在站點里新建一個文件index,html。

b、在頁面屬性里設置字體為“12像素”，頁邊距為“0”

c、制作頁眉部分，插入一個1行1列的表格，寬度為770像素，其它屬性參考效果圖設置，然后插入Logo圖片，d、制作主體部分，I、插入一個1行2列，寬度為770像素的表格，左側單元格為200像素，設置間距為2，其它屬性參考效果圖設置。II、III、在左側單元格中插入一個5行1列，寬度為70%的表格，設置間距為5，其它屬性參考效果圖設置。（表格嵌套）

在右側單元格中插入一個4行2列，寬度為96%的表格，設置間距為5，表格標題為“參考咨詢”，第一列單元格寬度為160像素，其它屬性參考效果圖設置。（表格嵌套）

e、制作頁腳部分，插入一個1行1列，寬度為770像素的表格，插入圖像“foot,.jpg”。

3、學生練習，巡堂指導

（1）、學生參考最終效果圖，根據(jù)教師提示的主要步驟，獨立思考分析，完成主頁。（2）、教師巡堂指導，留意學生在操作時出現(xiàn)的細節(jié)問題，做好作業(yè)點評。

4、上交作業(yè)，點評作業(yè)

（1）、要求學生把主頁及素材（自己的文件夾）一起交到教師機“1202班”文件夾中。（2）、抽出兩個學生的作業(yè)點評，修正錯誤，完善主頁。

5、課堂小結，宣布下課

本次課主要學習插入表格、表格基本屬性的設置、單元格或行的基本屬性的設置，利用表格布局網頁的方法。

十、教學反思（歡迎名位聽課老師提出您寶貴的教學建議）