第一篇：網(wǎng)頁中表格教案

第三課 在網(wǎng)頁中插入表格

一、教材分析

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

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

二、教學目標

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

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

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

三、教學準備：

硬件環(huán)境：使用多媒體網(wǎng)絡教室，配備寬帶網(wǎng)絡。軟件環(huán)境：WinXP操作系統(tǒng)、FrontPage2000以上版本。素材資源：

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

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

我打算出示一組關于學生作文的中學生作文網(wǎng)。

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

五、教學流程

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

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

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

任務一：在FrontPage中有幾種創(chuàng)建表格的方法？它們各有什么優(yōu)點？

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

優(yōu)點：操作速度快

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

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

任務二：

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

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

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

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

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

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

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

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

（四）創(chuàng)設任務，小組協(xié)作，鞏固新知

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

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

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

六、評價建議：

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

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

第二篇：《網(wǎng)頁設計中的表格排版》教案

《網(wǎng)頁設計中的表格排版》教案

授課老師：陳清鋒

總1課時

本周第5課時

備課時間:2010年11月30日

授課班級:高一（2）班

授課時間:2010年12月9日

教學目標

知識與技能

1、掌握網(wǎng)頁設計中的格式化操作

2、掌握網(wǎng)頁設計中表格底紋設置

3、掌握表格的屬性設置

4、掌握網(wǎng)頁設計中表格的排版 過程與方法

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

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

3、培養(yǎng)學生基本的網(wǎng)頁制作流程，培養(yǎng)學生任務驅動方法。情感態(tài)度與價值觀

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

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

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

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

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

1、網(wǎng)頁設計中的表格美感排版

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

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

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

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

接著，展示本次訓練的網(wǎng)頁效果。要求學生按要求完成本次作業(yè)效果。（發(fā)素材到學生機）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

學生繼續(xù)完善網(wǎng)頁主頁和子頁面的設計及超鏈接制作。

七、學生提交作業(yè)（2分鐘）

讓學生把作業(yè)提交上來，檢查學生的作業(yè)。

八、作業(yè)講評，比較，推優(yōu)（1分鐘）

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

九、小結（1分鐘）

1、網(wǎng)頁中的表格排版一定少用空格。

2、頁面要整齊美觀。

3、網(wǎng)頁中排版要注意空隙的使用。

4、使用擴展布局。

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

十、作業(yè)（10秒）

制作一個關于個人的網(wǎng)站。

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

1、網(wǎng)頁設計中有否其他的頁面排版？

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

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

十三、教學反思

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

? 本部分任務

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

? 為什么使用表格

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

具體內容見ppt

? 表格的基本語法

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

? 如何創(chuàng)建表格

具體內容見ppt

? 跨行跨列的表格

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

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

? 表格的美化修飾

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

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

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

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

如何設置對其方式

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

?

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

? 表格的布局

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

用表格對網(wǎng)頁的內容進行整體控制

? DIV+CSS規(guī)劃頁面

? ? ? ? 什么是CSS？

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

DIV+CSS如何規(guī)劃頁面？

? 什么是CSS？

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

? 為什么要使用CSS？

? CSS的特點

便于頁面的修改。便于頁面風格的統(tǒng)一。減少網(wǎng)頁的體積。為什么要使用CSS？ 使用CSS布局的優(yōu)點 表現(xiàn)和內容相分離 提高頁面瀏覽速度 易于維護和改版

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

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

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

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

? 如何使用CSS？

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

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

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

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

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

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

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

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

? ? ? ?

? 幾種樣式的優(yōu)先級

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

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

? DIV+CSS如何規(guī)劃頁面？

請關注上機實驗3

By---QQ69848627

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

在網(wǎng)頁中使用表格、文本和圖片

本節(jié)課案例效果圖：

一、新建站點

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

二、index.html網(wǎng)頁的編輯

1、添加網(wǎng)頁的背景圖片

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

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

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

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

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

注意：該表格是用來布局頁面的，是控制頁面中的內容在適當?shù)奈恢蔑@示的，不是我們用來填數(shù)據(jù)的表格，所以這里表格的邊框粗細設置為0，這樣的話表格看上去是隱藏的，不會影響頁面的美觀性。在這里我們?yōu)榱司庉嫷姆奖憧梢韵仍O置為1像素的邊，最后完成網(wǎng)頁后再修改為0。

運行瀏覽效果為：

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

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

2）增加單元格列的劃分

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

運行效果如下圖：

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

運行效果如下：

接下來我們?yōu)榱司庉嬤^程中視覺比較清晰，我們通過拖拽的方式來拉高行高，如果是嵌套了表格的單元格，可以直接拖拉內部表格來進行高度的調整，結果如下圖：

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

（2）文字內容的美化

首先，選中Fashion，如下圖：

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

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

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

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

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

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

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

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

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

單擊之后彈出如下窗口：

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

運行結果如下：

4、第2行水平線的插入

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

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

運行結果如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這時，我們去運行網(wǎng)頁，則效果如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在標簽

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

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

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

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

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

預覽效果如下：

9.去掉布局表格的邊框

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

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

第五篇：表格網(wǎng)頁制作及反思

表格網(wǎng)頁的制作

三明市實驗小學 黃躍

一、教學目標：

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

⒊激發(fā)學生學習興趣，創(chuàng)作欲、創(chuàng)新意念及實踐能力 ⒋培養(yǎng)學生學習他人并與他人合作精神。

二、教學重點、難點：

重點：表格網(wǎng)頁的制作 難點：合理布局、設計網(wǎng)頁

三、教學準備：

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

四、教學過程：

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

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

⒉個別小組展示素材：

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

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

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

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

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

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

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

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

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

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

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

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

⒉操作提示：

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

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

同學們，今天我們發(fā)揮集體的智慧為班級設計了豐富多彩的網(wǎng)頁，其實制作一個優(yōu)秀的網(wǎng)頁光靠一節(jié)課是不夠的，所以今天在課堂上沒完成的同學課后可繼續(xù)完成。

教學反思：

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

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