第一篇：網頁中表格教案

第三課 在網頁中插入表格

一、教材分析

網頁制作中用表格來規劃整個網頁的布局，是我們設計制作網頁常用的手法。所以學會在網頁中插入表格是網頁制作中的一個重要的部分。本課的主要內容包括在網頁中插入表格，表格的編輯和修飾，在表格中插入文字、圖片等。通過對本課的學習，讓學生了解用表格來規劃網頁會使網頁結構顯得清晰明快。在網頁制作中，引導學生用表格來規劃網頁，為以后網頁的開發設計打下一個良好的基礎。

重點：學會使用多種方法在FrontPage中插入表格。難點： FrontPage表格的美化。

二、教學目標

知識與技能：學會在FrontPage中插入表格及美化表格的方法，培養學生運用表格設計來美化網頁的能力。

過程與方法：采用研究體驗式和協作式學習方法，培養學生對計算機知識的遷移能力和綜合運用知識的能力。

情感態度、價值觀：通過網頁制作，培養學生良好的審美情趣。使學生逐步形成用表格來規劃網頁布局的網頁制作習慣，為今后網頁的開發設計打下一個良好的基礎。

三、教學準備：

硬件環境：使用多媒體網絡教室，配備寬帶網絡。軟件環境：WinXP操作系統、FrontPage2000以上版本。素材資源：

1、在教師機或學生機上為學生建立相關的素材資源文件夾。

2、教師為學生準備上課演示用的教師制作的網頁1。

我打算出示一組關于學生作文的中學生作文網。

3、為學生準備上課演示用的教師制作的網頁2-----情感小屋網頁，通過在情感小屋的首頁內插入表格，通過進一步用表格規劃情感小屋首頁的網頁布局來學習網頁中表格的設計與制作。

五、教學流程

出示課前準備的含有表格的網頁1中學生作文網，（一）創設情境，確定問題，布置任務

師：當你漫步在環境優雅的校園時，是否考慮過校園里的林蔭道和綠化帶的作用？ 生：起著綠化與方便交通的作用

師：其實還有著非常重要的作用，將行政區、辦公區、生活區、活動區分成各自獨立的區域，使整個校園錯落有致，美麗如畫，同樣，如何將網頁布置的美觀整齊，結構清晰呢我們運用表格來布局與美化網頁？

任務一：在FrontPage中有幾種創建表格的方法？它們各有什么優點？

方法一：“常用”工具欄“插入表格”命令。

優點：操作速度快

方法二：“表格”菜單“插入”→“表格”命令。優點：能對表格預先進行設置。

方法三：“表格”菜單的“繪制表格”命令，手工繪制表格。優點：能做出特殊的表格，可以對表格進行修改。

任務二：

如何隱藏表格邊框？-----推出表格屬性的用法 任務三：

請同學們嘗試著在FrontPage中制作如下表格：

（二）學生自主探究學習我 就 是 我姓名 年齡 學校 家庭住址 特長

姓別 QQ1、在FrontPage插入簡單表格這一教學環節，考慮到學生已有Word知識的基礎，故在此可放手讓學生自主學習。通過讓同學演示示范，得出插入表格的幾種基本方法。并利用同Word相類似的編輯方法來體會FrontPage中表格的簡單編輯。完成表格的簡單制作。

2、為完成“表格的調整”這一教學任務，教師可提前演示制作好的表格，帶著如下問題以小組為單位，研究和嘗試對表格進一步美化：

（1）怎樣進行行高與列寬的調整（2）怎樣進行單元格的合并和拆分（3）怎樣進行插入或刪除表格中的行或列，（4）怎樣進行平均分布行和列等基本操作（5）怎樣進入表格屬性對話框？

（6）表格屬性對話框中相應選項的改變會給網頁的效果帶來哪些變化，起到什么修飾作用？

在此過程中，教師也可深入到各小組的研究討論中去，和同學們共同尋找答案。然后，請完成表格美化的同學演示示范，以此突破本課利用表格屬性來美化表格這一教學難點。

（四）創設任務，小組協作，鞏固新知

在學生已基本學會插入表格和美化表格的基礎上，再次創設學習任務，以小組為單位，打開站點“情感小屋”，并打開首頁文件index.htm,分別插入四個表格，依次為：2╳3、2╳2、1╳4、2╳

1、寬度為780像素，水平居中。

最后展示各小組學生的作品，展開自評與互評。

六、評價建議：

本課的評價環節貫穿在學生學習活動的全過程，在學生每完成一個學習任務之后教師都要予以充分肯定，尤其在小組的作品展示階段，教師要注意引導學生從多方面、多角度評

價每個小組的作品，如對各小組的網頁作品，可在網頁內容、網頁規劃及網頁美化等方面進行自評和互評。注意培養學生良好的審美情趣。

第二篇：《網頁設計中的表格排版》教案

《網頁設計中的表格排版》教案

授課老師：陳清鋒

總1課時

本周第5課時

備課時間:2010年11月30日

授課班級:高一（2）班

授課時間:2010年12月9日

教學目標

知識與技能

1、掌握網頁設計中的格式化操作

2、掌握網頁設計中表格底紋設置

3、掌握表格的屬性設置

4、掌握網頁設計中表格的排版 過程與方法

1、培養學習、比較、歸納等思想方法和自覺學習的方法。

2、培養學生動手操作的動手能力，形成比學趕幫的學習氣氛。

3、培養學生基本的網頁制作流程，培養學生任務驅動方法。情感態度與價值觀

1、在操作過程中體會網頁編輯的整體美感，培養學生基本審美的觀點。

2、引導學生形成自主學習與合作學習等良好的學習方式。

3、培養學生正確的人生觀和道德情感。教學重點

1、表格中單元格的美感排版

2、掌握表格中的底紋操作 教學難點

1、網頁設計中的表格美感排版

2、網頁設計中表格嵌套操作 教學用時 1課時 教學地點 三樓機房 教學過程

一、課堂準備及引入（2分鐘）

師生問好。清點人數。安全教育：大家剛才來到機房是怎么來的？蹦過來的？！不要急沖沖地來，要做一個文明學生，有一個大將風范，從容地走進機房，如果你是跑來，容易撞到別人，自己也容易摔倒。

大家都知道，現在每個公司，每個學校，每個企業都有了自己的網站，他們的網站都是很漂亮，而且都是非常容易吸引人的，其實，你們也是有能力達到那種水平的，關鍵是看你要不要學的問題，如果你要學，你們完全有可能超越他們。那么，在制作網頁之前我們應該做一個什么重要的步驟呢？建立網站站點，下面，讓一個同學來建立一個網站。由學生上臺操作完成。網站建好以后，我們就可以制作網頁了。今天我們的主要內容是如何利用網頁設計中的表格對網頁進行排版。（展示課題和重難點）

接著，展示本次訓練的網頁效果。要求學生按要求完成本次作業效果。（發素材到學生機）

二、提出自學訓練題目（5分鐘）

學生自己建立一個以自己名字命名的站點，新建一個主頁頁面，同時再建3個頁面作子頁面。

1、建立主頁，同時建立三個子頁面，制作主頁網頁背景，字體大小和網頁標題。

2、制作LOGO欄（一行3列）。

3、制作導航條（首頁、湄州之旅、三字公約等8個導航）

4、制作主頁面的排版。（注意各排版的關系和位置）。

5、制作頁面底部的版權和與子頁面的鏈接部分。

三、學生操作，教師巡視（5分鐘）

四、學生演示操作結果，檢查學生的自學效果（5分鐘）學生操作結果。（分別由學生來完成題目）

五、教師講解，指出學生的不足（板書）（8分鐘）

1、建立主頁，“文件”→“新建”→“基本頁”→“HTML” →“確定”。保存存“index.html”，用同樣的方法建立三個子頁面，分別保存。a“屬性”→“頁面屬性”→點擊“背景圖像”右邊的“瀏覽”按鈕，選擇“pic/bggreen.gif”這個圖像文件，作為網頁的背景。

b在標題右邊輸入：歡迎進入充滿朝氣蓬勃的高一（2）班級網站。

2、制作LOGO：制作一行三列的表格，分別插入各自的圖像和文件。

3、制作導航：a新建一個頁面文件，然后在編輯區域中插入一個 2 × 1 的表格，并設置表格的基本屬性參數。b將光標置于第一行的單元格中，再將單元格的背景顏色設置為 # 69A 538，并應用同樣的方法將第二行單元格的背景顏色設置為 #8FCB 5A。設置完成后將光標至于第一行的單元格中，然后在此單元格中插入一個 1 × 8 的表格，并設置表格的基本屬性參數.。c錄入文字并設置單元格。在新插入的表格的所有單元格中輸入文字，然后選中所有單元格，設置單元格的相關屬性。d改變其中一個單元格的文字顏色和背景顏色，使其突出顯示。e此時即可得到帶有層次感的表格效果。

4、主頁面的排版：（重點講解，讓學生明白為什么要這樣操作）

a插入一個一行三列的表格（重點說明：大的外表格起到排版布局作用）b左邊的一列：插入三行一列的表格，并輸入必要的圖像和文字。c中間的一列：插入三行一列的表格，并輸入必要的圖像和文字。d右邊的一列：插入三行一列的表格，并輸入必要的圖像和文字。（查看結果與教師的效果有何不一樣）

e左邊的一列：插入三行三列的表格，并輸入必要的圖像和文字。f中間的一列：插入三行一列的表格，并輸入必要的圖像和文字。g右邊的一列：插入三行三列的表格，并輸入必要的圖像和文字。

（整調排版使用網頁整潔美觀，關鍵利用網頁設計中的空表格作用進行排版）

5、制作版權和子頁面：一行一列表格，輸入版權。制作部分超鏈接。

六、學生當堂訓練（8分鐘）

學生繼續完善網頁主頁和子頁面的設計及超鏈接制作。

七、學生提交作業（2分鐘）

讓學生把作業提交上來，檢查學生的作業。

八、作業講評，比較，推優（1分鐘）

把學生作業進行講評，學生之間對比在學習中形成一個比學趕幫的氣氛。（做好學生作業情況記錄）

九、小結（1分鐘）

1、網頁中的表格排版一定少用空格。

2、頁面要整齊美觀。

3、網頁中排版要注意空隙的使用。

4、使用擴展布局。

5、只設寬度，不設高度。

十、作業（10秒）

制作一個關于個人的網站。

十一、思考題，指導下一節講課內容（30秒）

1、網頁設計中有否其他的頁面排版？

2、預習層的使用？它與網頁有什么不一樣的地方？

十二、檢查計算機硬件配件，師生問好，有秩序下課。（5秒）

十三、教學反思

第三篇：表格基礎和DIV+CSS網頁布局基礎教案（模版）

? 本部分任務

制作“寶貝分類”頁面 制作“公告欄”頁面

? 為什么使用表格

? 表格應用場合 具體內容見ppt ? 表格的基本結構

具體內容見ppt

? 表格的基本語法

? Table標簽 ? Tr標簽 ? Td標簽 具體內容見ppt 注：表格標簽中沒有列標簽。

? 如何創建表格

具體內容見ppt

? 跨行跨列的表格

? 什么是跨行跨列的表格 ? 跨多行的表格

? 跨多列的表格 具體內容見ppt

? 表格的美化修飾

? ? 什么是表格的美化修飾 如何設置表格的尺寸和邊框 width用來設置表格的寬度 height用來設置表格的高度

border用來設置表格邊框尺寸大小 bordercolor用來設置表格邊框顏色 如何設置背景

background屬性用來設置表格的背景圖片

bgcolor屬性用來設置表格、行、列的背景色。HTML中顏色的表示方式：“#EBEFFF”是用RGB表示的一種顏色值，RGB指的是紅綠藍。

如何設置對其方式

align屬性用來設置表格、行、列的對齊方式 為什么要使用填充屬性 具體內容見ppt 什么是填充屬性和間距屬性 ?

?

? ? border(邊框的厚度)cellpadding(單元格填充)cellspacing(單元格間距)如何使用填充、間距屬性 border(邊框的厚度)cellpadding(單元格填充)cellspacing(單元格間距)

? 表格的布局

? ? ? 什么是表格布局 使用表格進行布局

用表格對網頁的內容進行整體控制

? DIV+CSS規劃頁面

? ? ? ? 什么是CSS？

為什么要使用CSS？ 如何使用CSS？

DIV+CSS如何規劃頁面？

? 什么是CSS？

CSS（Cascading Style Sheet）可譯為“層疊樣式表”或“級聯樣式表”，它定義如何顯示 HTML 元素，用于控制Web頁面的外觀。

? 為什么要使用CSS？

? CSS的特點

便于頁面的修改。便于頁面風格的統一。減少網頁的體積。為什么要使用CSS？ 使用CSS布局的優點 表現和內容相分離 提高頁面瀏覽速度 易于維護和改版

CSS樣式表極大地提高了工作效率

樣式通常保存在外部的.css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。

由于允許同時控制多重頁面的樣式和布局。作為網站開發者，你能夠為每個 HTML 元素定義樣式，并將之應用于你希望的任意多的頁面中。如需進行全局的更新，只需簡單地改變樣式，然后網站中的所有元素均會自動地更新。內聯定義

內聯定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。?

? 如何使用CSS？

? 只針對標簽內的元素有效，因其沒有和內容相分離，所以不建議使用。? 定義內部樣式塊對象

你可以在你的HTML文檔的和標記之間插入一個塊對象。定義方式請參閱樣式表語法。

這樣的樣式表只能針對本頁有效。不能作用于其它頁面。? 導入樣式——Style導入

與鏈入外部樣式的功能基本相同，只是語法和實現方式上有差別。

它一般常用在另一個樣式表內部。如layout.css為主頁所用樣式，那么我們可以把全局都需要用的公共樣式放到一個global.css的文件中，然后在layout.css中以@import url(“/css/global.css”)的形式鏈接全局樣式，這樣就使代碼達到很好的重用性。? 導入樣式——Link標簽導入

使用Link標簽代替Style標簽來導入CSS文件。

它的好處是不但本頁可以調用，其它頁面也可以調用，是最常用的一種形式。

除了內聯定義是直接作用于標簽本身以外，其他CSS使用方式都需要建立標簽和樣式之間的映射關系。主要的映射關系有： id映射 class映射 標簽映射 混合映射 ? CSS樣式和頁面標簽元素的對應方式

? ? ? ?

? 幾種樣式的優先級

? id優先級高于class ? 后面的樣式覆蓋前面的 ? 指定的高于繼承 ? 行內樣式高于內部或外部樣式

總結原則：單一的(id)高于共用的(class)，有指定的用指定的，無指定則繼承離它最近的。

? DIV+CSS如何規劃頁面？

請關注上機實驗3

By---QQ69848627

第四篇：在網頁中使用表格、文字和圖片實訓教案

在網頁中使用表格、文本和圖片

本節課案例效果圖：

一、新建站點

在Dreamweaver中新建站點，站點名自定，在站點文件夾中新建文件夾images，用來存放網頁需要的圖片素材，新建文件index.html作為網站的首頁，并開始編輯網頁。（該步驟不熟悉這參考第一周實訓教案）

二、index.html網頁的編輯

1、添加網頁的背景圖片

單擊【屬性檢查器】中的【頁面屬性】

在打開的窗口中，通過【瀏覽】設置網頁的背景圖像為images文件夾中的background.gif圖片。如下圖所示：

2、使用表格對網頁進行布局 1）插入4行1列的表格

（1）在菜單【插入】中選擇【表格】按鈕，如下圖所示：

（2）在下邊的窗口上進行相應的設置，如下圖：

注意：該表格是用來布局頁面的，是控制頁面中的內容在適當的位置顯示的，不是我們用來填數據的表格，所以這里表格的邊框粗細設置為0，這樣的話表格看上去是隱藏的，不會影響頁面的美觀性。在這里我們為了編輯的方便可以先設置為1像素的邊，最后完成網頁后再修改為0。

運行瀏覽效果為：

我們會發現表格式默認居左的，接下來我們設置表格在整個網頁中居中，將光標放在表格的邊上單擊一下選中整個表格，然后在【屬性檢查器】中將【對齊】方式設置為【居中對齊】方式。如下圖所示：

接下來我們運行查看結果如下圖：

2）增加單元格列的劃分

（3）在第一行單元格中，再插入一個表格為1行2列，將光標定位在第一個單元格中，點擊【插入】菜單，選擇【表格】，并進行行列的設置，如下圖：

運行效果如下圖：

（4）使用同樣的方法，在第3行的單元格中插入一個表格為1行3列，設置如下圖所示：

運行效果如下：

接下來我們為了編輯過程中視覺比較清晰，我們通過拖拽的方式來拉高行高，如果是嵌套了表格的單元格，可以直接拖拉內部表格來進行高度的調整，結果如下圖：

3、第1行內容的插入（1）在第1行內表格的單元格中分別輸入Fashion時尚生活和服飾搭配和禮儀，結果如下圖：

（2）文字內容的美化

首先，選中Fashion，如下圖：

然后，在屬性檢查器中選中CSS，如下圖：

接下來我們單擊顏色選擇器右下角的黑色小三角，在展開的顏色面板上選擇一種橙色，選擇是只要單擊一下即可，如下圖：

在單擊的同時彈出CSS設置窗口，如下圖：

在【選擇器類型】中選擇“類（可應用于任何HTML元素）”，然后給出類名為.fashion，注意前邊必須有點，名稱開始的符號必須為字母。然后確定即可。

接下來，還是保持選中該部分文字，在【屬性檢查器】中修改文字的大小為36，字體為Tahoma，并且加粗，這時就不會彈出CSS的命名窗口，因為該修改仍然是在.fashion類上進行的，如下圖：

在此，如果想給dreamweaver添加新的字體，可以單擊【編輯字體列表】進行添加，如下圖：

譬如，將黑體添加進來，就可以在右邊的【可用字體】中選擇黑色，然后單擊中間的箭頭，則字體就添加到【選擇的字體】部分，然后確定即可。

用同樣的方法，將時尚生活設置為紅色、大小16號、默認字體、加粗。（3）將“服飾搭配與禮儀”在單元格中居右

首先選中“服飾搭配與禮儀”，然后選擇【屬性檢查器】的對齊方式為右對齊，如下圖：

單擊之后彈出如下窗口：

在【選擇器類型】中選擇“類（可應用于任何HTML元素）”，然后給出類名為.fsdp，注意前邊必須有點，名稱開始的符號必須為字母。然后單擊確定即可。

運行結果如下：

4、第2行水平線的插入

將光標定位在外層表格的第2行，然后單擊菜單【插入】，選擇【HTML】-【水平線】，即可插入水平線。運行效果如下：

接下來將水平線的顏色修改為紅色，單擊選中水平線，將會在【屬性檢查器】中顯示水平線的屬性： 我們前邊在修改“時尚生活”的顏色為紅色的時候，曾經創建過一個.ssh的CSS類，現在我們只需要將該CSS類應用到水平線上就可以了，我們在屬性“類”中單擊下拉列表選擇ssh即可將水平線設置為紅色。如下圖所示：

運行結果如下：

5、第3行第1個單元格內容插入

將光標定位在該單元格內，拷貝文字素材.doc文件中的第一段，粘貼過來即可。單擊右鍵-粘貼。適當的調整該單元格中表格的列寬，運行結果如下：

接下來，在文字底部插入圖片，注意這是需要另起一段或者換行，注意直接按Enter回車鍵是另起一段，按shift+Enter是另起一段，這兩種方式都可以，只不過使用分段的方式圖片和文字距離遠一些，這里我們直接回車，然后在【插入】面板中選擇【圖像】進行插入。

在彈出的圖片選擇對話框中單擊圖片排列方式按鈕，如下圖所示，選擇縮略圖，就可以很直觀的看到你要選擇的圖片了。

單擊選擇圖片后確認即可。通過拖拉方式修改圖片的大小和單元格的寬度進行適當調整后，運行效果如下：

接下來我們通過創建CSS的方式來美化該單元格中的文字，在CSS面板中，單擊新建CSS規則按鈕，打開新建CSS窗口，如下圖：

在彈出的窗口中，輸入CSS的類名，然后單擊【確定】，如下圖：

確定后，在彈出的窗口中，【分類】中選擇【類型】，字體設置為“Tahoma”，字號設置為“14”。如下圖：

然后在【分類】中選擇【區塊】，將首行縮進test-indent設置為25pixels像素，如下圖：

最后按【確定】，我們可以在CSS面板中看到剛剛創建的CSS.zgwz。如下圖：

但是這個時候，該CSS并沒有起作用，我們必須把它應用到文字段落上才可以，現在我們選中整個文字，然后切換到代碼視圖，我們會看到如下圖片：

我們看以看出來整段文字被嵌套在標簽中，那么該標簽就是表示一個段落的標簽，我們只要將剛剛創建的CSS應用到該標簽就可以對文字起作用，接下來我們將光標定位到

中的p后邊，然后敲空格鍵，在彈出的下拉菜單中雙擊選擇“class”即可，如下圖：

雙擊選擇class后，又彈出一個下拉列表，讓你選擇你使用哪個類來美化該段落，我們當然要選擇我們剛剛創建的.zgwz這個類，只要雙擊該處即可。如下圖：

這時，我們去運行網頁，則效果如下：

其實，我們發現好像縮進的不夠兩個字符，那么我們可以繼續在CSS面板中，雙擊.zgwz這個類，打開CSS設置窗口，在【區塊】中去調整text-indent的的像素的多少，直到合適為止。

6、第3行第2個單元格中插入鼠標經過時圖像

該效果是當我們的鼠標指針放到這個圖片上的時候，這個圖片就會變成另一幅圖片，從而實現一種美輪美奐的效果。

首先把光標定位在第3行的第2個單元格中，然后單擊【插入】面板的【圖像】處的黑三角，選擇彈出的列表中的【鼠標經過圖像】，如下圖：

在彈出的窗口中，選擇【原始圖像】為shishang_r3_c4.jpg，【鼠標經過圖像】為shishang_r3_cquse.jpg，然后確定即可，如下圖：

調整單元格和圖片大小到適合程度后，運行網頁后，將鼠標放在圖片上，可以觀察到圖片的切換效果。

7、第3行第3個單元格中插入列表文字和圖片

單擊【插入】面板【常用】旁邊的黑色箭頭，展開列表后，選擇【文本】，如圖所示：

在【文本】面板中，選擇編號列表，則插入點處就自動插入1.，如下圖：

在插入點出插入文字素材中的“文明大方”后回車，則編號2會自動出現，依次按照文字素材將三個標題拷貝上去，如下圖：

接下來我們，將光標定位在“文明大方”后邊，敲擊回車，如下圖：

將光標定位在2.后邊，選擇【屬性檢查器】中的【HTML】，如下圖：

單擊上圖紅框處的向右縮進按鈕，則2.變成1.的下一級列表，如下圖：

然后我們再單擊【屬性檢查器】中的項目符號按鈕，則數字列表又可以轉換成項目列表，如下圖：

然后我們將文字素材中的文明大方的內容拷貝到該項目符號處，如下圖：

用同樣的方法，添加搭配得體和個性特征的內容，結果如下：

接下來，我們來進行列表項的美化，用圖片來修飾，首先單擊CSS面板的新建CSS規則的按鈕，新建CSS規則.liebiao，如下圖：

確定后，在彈出的窗口中【分類】中選列表，然后再list-style-image中選擇圖片point01.gif為列表用圖片，單擊【確定】。

然后切換到代碼視圖，如下：

在標簽

ol的后邊敲空格，選擇class，然后選擇我們剛才創建的.liebiaoCSS類，這樣我們就把.liebiao樣式應用到了列表中，結果如下：

在文字的下方插入兩幅圖片，并適當調整大小，如下圖：

8、在最后一行輸入內容“Copyright ? 2008 by Choice.Lee All Rights Reserved” 我們會發現? 在鍵盤上是無法直接輸入的，需要打開【插入】面板的【文本】，選擇特殊的版權字符?即可插入。如下圖：

然后我們選中文字內容，并且在【屬性檢查器】的CSS中選擇【居中】按鈕，如下圖：

在彈出的窗口中，輸入類名.footer后確定，如下圖：

預覽效果如下：

9.去掉布局表格的邊框

單擊布局用的表格，在【屬性檢查器】中將【邊框】設置為0，敲回車或tab鍵確認即可。如下圖：

注意布局時用了三個表格，全部修改過來，網頁會更美觀。最終效果如下：

第五篇：表格網頁制作及反思

表格網頁的制作

三明市實驗小學 黃躍

一、教學目標：

⒈了解用表格進行網頁版面布局草圖的設計方法； ⒉學會運用表格制作網頁；

⒊激發學生學習興趣，創作欲、創新意念及實踐能力 ⒋培養學生學習他人并與他人合作精神。

二、教學重點、難點：

重點：表格網頁的制作 難點：合理布局、設計網頁

三、教學準備：

⒈學生學習、生活素材 ⒉簡單相關教學課件范例

四、教學過程：

㈠檢查分組及集收素材的情況。（3’）

⒈請班級網站管理員上臺介紹分工情況，及班級網站名稱和主要網頁標題 師：同學們，我們學校更名為三明市實驗小學后，學校的網站也以新的面貌發布在網絡上，學校網站為每個班級開辟了網頁空間。上節課，老師布置大家共同為制作班級網頁收集平時學習、生活中的素材，同學們都準備好了嗎？（生答：準備好了?。┖芎茫∩瞎澱n，同學們還選出了二位同學擔任班上的網頁管理員，據老師了解，他們還把同學討論的結果做了一個小小的演講稿，下面請他們上臺匯報一下。（請管理員站起來，并請其中一位上臺匯報）

⒉個別小組展示素材：

下面，老師想請一些小組展示的你們收集的素材。（請書法組、班級之星組）㈡導入課題：（3’）

談話導入：看來，同學們收集的素材很豐富！隨著學習的深入，網頁的內容 也越來越豐富了。怎樣把這些內容合理地布局，使它們顯得緊湊而不凌亂呢？這就需要用到表格！今天我們就共同學習表格網頁的制作。（出示：課題）㈢展示表格網頁作品，激發學生學習興趣和創作欲

網絡廣播：網頁作品一、二個。㈣學習表格網頁的制作步驟：

⒈提問：剛才同學看到網頁的布局都是錯落有致、美觀大方，其實它們都是通過利用表格來實現網頁的布局。那么，怎樣進行表格網頁的制作呢？首先請同學回顧一下制作普通網頁的步驟做什么？

⒉學生回顧普通網頁的制作步驟：（師板書：步驟）建文件夾→選定、復制素材→設計表格→輸入素材 ㈤引導學生學習表格的編輯：（5’）

⒈展示作品和草圖學生觀察對比設計。

小結：網頁的內容相同，但表格設計的樣式不同，網頁的效果也不一樣。接下來我們就學習表格的編輯。

師：提到表格制作同學并不陌生，因為我們在WORD中學習過表格的制作。⒉通過網絡廣播：表１這是一個編輯后的表格。⒊師畫一個規則表，讓學生上臺演操作： 操作：選定→插入→拆分→合并

⒋引導學生運用在WORD中學習的知識，自主探索表格按鈕、表格菜單的使用，并試著做出表1一樣的表格。

⒊提示：編輯表格時，關鍵的一步是：選中（即操作難點的突破）。⒋學生動手編輯表格。

⒌對有困難的學生小組幫助，再則老師幫助。㈥學生動手設計表格網頁：（16—18’）

⒈布置設計：同桌相互討論，并設計出本小組的網頁。需要畫版面草圖的請用準備好的紙張。

⒉操作提示：

文件夾、文件名應用小寫字母；文件名和圖片應存放在同一個文件夾中。⒊學生動手制作網頁。㈦展示交流：（5’）

學生以小組為單位代表展示作品，學生欣賞互評。㈧課堂小結：（2’）

同學們，今天我們發揮集體的智慧為班級設計了豐富多彩的網頁，其實制作一個優秀的網頁光靠一節課是不夠的，所以今天在課堂上沒完成的同學課后可繼續完成。

教學反思：

表格網頁的制作這節課，是在學生學會了普通網頁制作的基礎上進行教學，因為FrontPage2000中的表格應用與舊知識的Word2000中的表格應用操作相似。因此，課的特點是操作性強，要考慮到：既要傳授新的知識上，即表格網頁的設計步驟、表格的設計，又要留給學生大量的時間操作，所以我選擇了主要以學生自主學習，探索操作的教學方法，難點的之處給以詳細講解，實踐證明，大部分學生能夠接受這樣的教學方式，讓學生聯想已學的知識，用已掌握的知識方法來探索新知，達到新舊知識融會貫通之目的，收到良好的效果。

在課程的設計中，我以我們學校更名為三明市實驗小學后，學校的網站也以新的面貌發布在網絡上，學校網站為每個班級開辟了網頁空間。讓學生共同為班級設計制作網頁引課導入，讓學生收集平時學習、生活中的素材，并上網搜集相關資料，激發了學生學習興趣，拓展了學生視野，擴大了知識面。在實際的操作中，學生收集、處理、應用信息的能力及自主探索、操作實踐的能力得到了很好的培養，在激發學生學習興趣，創作欲、創新意念的同時，也培養了學生學習他人并與他人合作精神。