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

利用表格布局網頁

教學設計

授課教師：劉春霞

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

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

二、授課課時：1個課時

三、教學內容分析

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

四、學生特征分析

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

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

1、知識與技能目標

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

2、過程與方法目標

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

3、情感態度與價值觀目標

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

六、教學重點難點

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

七、教學方法

1、講授法

2、演示法

3、任務驅動法

八、教學環境與資源

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

九、教學過程

1、創設情境，導入新課

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

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

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

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

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

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

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

主要操作步驟：

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）、學生參考最終效果圖，根據教師提示的主要步驟，獨立思考分析，完成主頁。（2）、教師巡堂指導，留意學生在操作時出現的細節問題，做好作業點評。

4、上交作業，點評作業

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

5、課堂小結，宣布下課

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

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

第二篇：實驗15 利用表格和框架技術進行網頁布局設計

實驗15 利用表格和框架技術進行網頁布局設計

1.1 15.1 實驗目的

1．掌握利用Adobe Dreamweaver CS6的表格進行網頁布局設計的方法。2．掌握利用Adobe Dreamweaver CS6的框架技術進行網頁布局設計的方法。1.2 15.2 實驗內容

1．利用框架對個人站點網站重新進行設計。2．利用表格對個人站點網站重新進行設計。1.3 15.3 實驗操作步驟

15.3.1 利用框架設計網頁布局

利用框架設計網頁布局就是利用框架技術重新設計實驗14中的“我的小站”，將主頁拆分為上中下部分，分別為top.html、middle.html和bottom.html。使得瀏覽“個人簡介”和“我的學校”等頁面時都能看到導航欄和底部版權聯系信息。具體操作步驟如下：

1.新建站點：啟動Adobe Dreamweaver CS6，單擊“站點”菜單中的“新建站點”命令，則彈出“站點設置對象”對話框，如圖15-1所示。在站點名稱右邊的文本框中填入站點名稱“框架網頁布局，在本地站點文件夾中填入D:websmyFrameSite（也可以指定其他位置）后，單擊“保持”按鈕，就創建了一個新的站點。

圖15-1“站點設置對象”對話框

圖15-2添加網頁top.html、middle.html、bottom.html后效果

2.設計網頁top.html、middle.html、bottom.html：在站點中添加網頁文件并打開。如圖15-2所示。參照實驗14中的設計主頁index.html步驟設計top.html、middle.html、bottom.html。各個頁面的設計效果分別如圖15-3~圖15-5所示。

圖15-3 網頁top.html設計效果圖

圖15-4 網頁middle.html設計效果圖

圖15-5 網頁bottom.html設計效果圖

3.添加其他網頁：參照實驗14，在網站中添加網頁個人簡介introduction.html，添加網頁“我的學校”MySchool.html，添加網頁“我的相冊”MyAbums.html,添加網頁“我的鏈接”MyLinks.html。自己設計各個頁面并保存（也可以直接將實驗14中的相應頁面復制過來）。4.創建框架主頁：選中“窗口”中的“框架”命令，顯示框架面板。打開主頁top.html頁，單擊“修改”菜單的“框架集”子菜單的“拆分上框架”命令，出現如圖15-6的效果。將光標定位到下框架中，單擊“修改”菜單的“框架集”子菜單的“拆分上框架”命令，出現如圖15-7的效果，是典型的上中下網頁布局形式。

5.設置框架屬性：在框架面板中選中框架，在屬性面板中修改框架屬性，如圖15-8所示。

分別將上中下框架名稱修改為mytop、myMiddle、mybottom。源文件分別設為：top.html、middle.html、bottom.html。

6.保存框架集：單擊保存按鈕將框架集保存為indexFrame.html。

7.修改top.html中導航鏈接的目標框架，默認在myMiddle中打開。操作步驟是：選中超級鏈接，選中“修改”菜單中“鏈接目標”子菜單中的“myMiddle”項，如圖15-9所示。

圖15-6 拆分框架效果圖-1

圖15-7 拆分框架效果圖-2

圖15-8 框架屬性設置

圖15-9 修改導航鏈接的目標框架

8.在瀏覽器中或是發布后查看網站，效果如圖15-10所示。網頁上中下分別是三個獨立的網頁，有各自的滾動條。

圖15-10 框架網頁瀏覽效果

15.3.2 利用表格設計網頁布局

利用表格設計網頁布局就是利用表格設計網頁布局，以對實驗14中的“我的小站”進行修改設計為例進行學習，具體操作步驟如下：

1.新建站點：啟動Adobe Dreamweaver CS6，單擊“站點”菜單中的“新建站點”命令，則彈出“站點設置對象”對話框，如圖15-1所示。在站點名稱右邊的文本框中填入站點名稱“表格網頁布局，在本地站點文件夾中填入D:websmyTableSite（也可以指定其他位置）后，單擊“保持”按鈕，就創建了一個新的站點。

2.在站點中添加主頁文件index.html并打開，單擊“插入”菜單中的“表格”命令，彈出“表格”對話框，如圖15-11所示。將行設為3，列設為1，表格寬度為100%，邊框為0，單擊“確定”按鈕，則添加了一個三行一列的表格。

3.調整單元格高度，將15.3.1中的top.html、middle.html、bottom.html依次負責到表格的三行中，這樣就完成了主頁的設計，效果如圖15-12所示。

圖15-11

“表格”對話框

4.5.6.7.8.圖15-12

表格網頁布局首頁設計圖

將主頁的內容區替換為“個人簡介”頁面內容，并將網頁另存為introduction.html。將主頁的內容區替換為“我的學校”頁面內容，并將網頁另存為MySchool。

將主頁的內容區替換為“我的相冊”頁面內容，并將網頁另存為MyAbums.html。將主頁的內容區替換為“我的鏈接”頁面內容，并將網頁另存為MyLinks.html。利用表格布局的網站完成，可發布或瀏覽效果。

15.3.3 操作與練習

1．在實驗14.3.4中設計的個人求職站點添加一個導航頁top.html和一個版權聲明頁bottom.html，并利用框架對站點重新布局，發布和測試站點。

2．將實驗14.3.4中設計的個人求職站點按表格的形式重新設計，并發布和測試站點。

圖15-13 操作與練習3要求效果圖

3．按照圖15-13所示設計一個表格，并填入內容，然后完成下列操作。

利用搜索引擎搜索到《三國演義》在線閱讀的網站，在文字“三國演義”上建立超級鏈接，并鏈接搜索到的網站。

(1)將文字“中國四大名著”格式設為：隸書，24磅，紅色加粗并居中。(2)將表格的單元格間距設為0，邊框粗細設為2，邊框顏色設為藍色。(3)將文字“中國四大名著”所在單元格的背景色設為黃色。(4)將網頁的上邊距設為30像素，左邊距設為20像素(5)將頁面的標題改為“中國四大名著簡介”。(6)保存網頁，在瀏覽器中查看網頁效果。

操作與練習

1、操作與練習

2、操作與練習3操作步驟（略）

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

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

一、教學目標

知識與技能：

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

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

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

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

情感、態度與價值觀：

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

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

二、教學重點與難點

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

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

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

三、教學方法

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

四、教學設計說明

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

五、教學過程

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

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

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

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

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

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

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

設計意圖：所選的網頁學生都比較熟悉，師分析頁面，呈現本節課的課題，激發學生的學習興趣。

（二）新課學習

環節一：根據素材，小組合作設計表格。

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

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

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

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

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

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

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

環節二：動手實踐，編輯表格

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

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

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

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

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

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

生：5列

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

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

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

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

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

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

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

環節三：根據設計，填充表格內容

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

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

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

學生思考

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

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

環節四：最后修飾，美化表格和單元格

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

生：想。（躍躍欲試）

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

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

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

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

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

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

環節五：探究實踐

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

生：沒有

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

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

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

環節六：作品展示，進行評價

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

師總結。

設計意圖：展示部分同學的作品，首先自身先說說特點，其他同學做點評。可以培養學生客觀的評價作品的能力。

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

教學反思

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

一、選取課題，自主探究

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

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

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

三、表格嵌套的講解

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

四、學生情況分析

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

五、同行聽課的借鑒

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

六、反思再教設想

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

第四篇：《用表格為網頁布局》教學設計說課稿

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

《用表格為網頁布局》是浙江教育出版社信息技術教材八年級上冊第三單元第十五課的內容。本課是在學生學習建立網站站點后，開始嘗試做第一張網頁。通過本課的學習，是對表格知識的鞏固和深入，更重要的是為后面的網頁制作打下基礎，所以本課是本單元的重點，起到承上啟下的作用。前階段學生已經學習了文本編輯、圖片插入、網絡基本知識、文件操作等內容，很多知識都可以遷移到本課來。八年級學生對電腦基本操作已經不再陌生，已經能夠獨立完成一定要求的學習任務，但是學生對于特定任務進行分析，整體規劃能力相對還是比較欠缺的。本節課教學的作業設計中，我將注重培養學生這個方面的能力。根據課程標準和教材內容，我將本課的教學目標設計成三個方面：

知識與技能目標：

1、了解主頁布局的常見布局圖，并明確主頁設計的基本要素；

2、理解用表格排版主頁的作用；

3、掌握在網頁中插入表格進行排版的技能；

4、學會設置表格屬性，對表格進行編輯修改。過程與方法目標：

通過欣賞、借鑒他人的主頁布局，取長補短，為自己的主頁布局做鋪墊。情感、態度與價值觀目標：

1、通過作品欣賞，讓學生意識到取長補短的可貴性，及在借鑒基礎上的創新的重要性；

2、用表格排版網頁解決網頁版面雜亂問題，培養在遇到困難時靈活運用各種方法解決，強化建站信心。

為了實現這個教學目標，我將教學重點確定尾插入表格進行排版和更改表格屬性。根據學生的思維障礙和學習情況的分析，我將難點定位于靈活掌握排列表格和設置表格屬性。只有正確設置了表格的屬性，才能美化和完善網頁的布局。為了更好的突出教學重點，突破教學難點，圓滿的完成教學任務，我在課前截取了典型的旅游網頁圖片素材并設置成框架形式讓學生一目了然地看到表格所起的作用，并設置了幾個學生需要突破的任務。

信息技術課是培養學生對信息技術的興趣和意識，使學生養成良好的信息素養為宗旨，強調學生的自主學習和研究學習。上新課前，我要求學生兩兩合作，通過傳統手工繪制草圖的學習方式，設計你需要建立網頁的框架布局，同時學會和與他人合作。為了讓學生主動的參與學習，我在設計教學流程時，準備以學生“任務驅動”為主線，以教師為主導，以學生為主體，通過學生自主探究，合作交流完成教學任務。根據教學內容和學情的分析，本課我采用的教學方法有：講解、練習、任務驅動、小組合作，學生可以通過小組合作、給定的任務等將本課學習用于實際操作。我將結合教學過程來具體分析。整個教學過程我分為以下四個部分來完成：

一、通過旅游網站的解析，直接引入新知，通過刪除網頁的背景、文字、圖片后，呈現出一張網頁的背后其實是表格起到重大的作用。所以學生心中就有個概念，原來做網頁的前提是用表格固定框架。并結合書本p58頁，了解網頁常見的布局圖。直覺、興趣成為學生產生學習動力最直接的因素。

二、本節課的任務是讓學生設計有關龍泉旅游的網頁布局，我先讓學生利用草圖形式設計宣傳龍泉旅游網頁的框架，做這個的目的是為了學生能更順暢、不會盲目的在電腦上操作，這為學生完成任務2提供基礎。

三、鞏固舊知，學習新知，解決問題。建立網頁的前提是建站，學生對站點的認識已經不會陌生，根據教師提供的站點，再將網頁布局呈現在主頁上（學習新知）。通過例子的演示，學生將草圖轉移到網頁上來。在操作過程中學生可能會遇到一些解決不了的問題，我會引導學生勇敢地提出問題，并告訴學生解決問題的方法：（1）自己思考（2）向同學和老師尋求幫助。（3）通過教材操作步驟P59，進行知識遷移。針對學生中普遍存在的問題，我將利用廣播講解演示，解決問題（學生應該會碰到在單元格內插入過大的圖片后，影響相鄰單元格位置變化，這里所要涉及的是表格的嵌套）；針對個別學生的問題，我將個別指導。設計意圖：這個環節充分體現了學生的自主性，讓學生不斷嘗試中發現問題，師生合作解決問題。體現了學生是學習的主體，學生把教材、同學、教師、電腦都作為 學習的幫助者。

四、作品展示及評價。根據課前設定好評價量化表，抽取部分學生作品展示給同學們，通過學生對自己作品的評價打分（自評），再讓別的同學進行評價打分（他評）。但是課堂時間畢竟有限，讓每位學生對自己設計的作品進行評價，然后同組之間進行互評，取長補短，學生可以從中找到自己的缺點和不足之處，也能學習到別人的長處。相互評價，也是獲得最佳學習效果的重要途徑之一。（問題補充：參考諸多網頁，一般網頁的邊框是不顯示的，如何將表格的邊框線從頁面中趕走，這里需要利用表格的屬性進行隱藏邊線，從而使網頁頁面更加美化。）

五、課堂小結。強調頁面布局在網頁設計中的重要性，肯定同學操作過程中好的方面，并及時鼓勵學生。要求同學課后多瀏覽有關網頁，設計出更好的作品。

六、作業布置：同學思考以下問題（1）今天這節課我學會了什么？并寫下本節課的收獲。（2）課后再思考并繪制個人主頁的頁面布局。通過學生自己歸類總結，既能提高學生的語言組織能力和寫作能力、辨別力，又能提高學生的信息素養，這正是我們信息技術課所致力要求的目標。在整個教學設計中，我感覺本節課學生的學習任務和目標很明確，要讓學生主動思考、獲取。體現了學生的自主探究學習。

第五篇：表格基礎和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