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

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

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

一、新建站點

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

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

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

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

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

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

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

（2）在下邊的窗口上進行相應(yīng)的設(shè)置，如下圖：

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

運行瀏覽效果為：

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

接下來我們運行查看結(jié)果如下圖：

2）增加單元格列的劃分

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

運行效果如下圖：

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

運行效果如下：

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

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

（2）文字內(nèi)容的美化

首先，選中Fashion，如下圖：

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

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

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

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

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

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

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

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

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

單擊之后彈出如下窗口：

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

運行結(jié)果如下：

4、第2行水平線的插入

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

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

運行結(jié)果如下：

5、第3行第1個單元格內(nèi)容插入

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

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

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

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

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

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

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

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

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

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

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

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

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

這時，我們?nèi)ミ\行網(wǎng)頁，則效果如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用同樣的方法，添加搭配得體和個性特征的內(nèi)容，結(jié)果如下：

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

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

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

在標簽

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

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

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

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

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

預(yù)覽效果如下：

9.去掉布局表格的邊框

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

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

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

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

一、教材分析

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

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

二、教學目標

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

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

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

三、教學準備：

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

1、在教師機或?qū)W生機上為學生建立相關(guān)的素材資源文件夾。

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

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

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

五、教學流程

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

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

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

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

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

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

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

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

任務(wù)二：

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

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

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

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

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

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

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

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

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

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

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

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

六、評價建議：

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

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

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

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

授課老師：陳清鋒

總1課時

本周第5課時

備課時間:2010年11月30日

授課班級:高一（2）班

授課時間:2010年12月9日

教學目標

知識與技能

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

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

3、掌握表格的屬性設(shè)置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5、制作頁面底部的版權(quán)和與子頁面的鏈接部分。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

九、小結(jié)（1分鐘）

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

2、頁面要整齊美觀。

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

4、使用擴展布局。

5、只設(shè)寬度，不設(shè)高度。

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

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

十一、思考題，指導(dǎo)下一節(jié)講課內(nèi)容（30秒）

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

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

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

十三、教學反思

第四篇：在網(wǎng)頁中插入圖片教學設(shè)計

《在網(wǎng)頁中插入圖片》教學設(shè)計

執(zhí)教：熊

恒

教學目標： 知識與技能：

會打開上次的網(wǎng)頁；了解圖片在網(wǎng)頁中的作用；學會在網(wǎng)頁中插入圖片的方法。

過程與方法：

通過獨立探究和小組探究的方法基本掌握在網(wǎng)頁中插入圖片。

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

培養(yǎng)學生的審美能力，形成與同學和諧相處、共同進步的精神。明白幫助他人的目的就是美化我們的心靈。

教學重難點：

重

點：了解圖片在網(wǎng)頁中的作用 難

點：能在網(wǎng)頁中插入圖片

教學時間：一課時

教學過程：

一、導(dǎo)入新課：

同學們，上節(jié)課我們學會了制作只有文字的網(wǎng)頁?？墒恰斑溥涠咕W(wǎng)屋”的主頁還有可愛的胖胖熊圖片呢！它是怎么進來的？對于這個問題，我們來進行具體的研究。

揭示課題：在網(wǎng)頁中插入圖片

二、探究新知 任務(wù)一：了解圖片在網(wǎng)頁中的作用。

（1）、教師出示只有文字和帶有圖片的兩個網(wǎng)頁，提問：這兩個網(wǎng)頁哪一個好看呢？

（2）、引導(dǎo)學生觀察，并說出為什么？指定學生回答（有圖片的那一個）

（3）、小結(jié)：網(wǎng)頁中的圖片可以使網(wǎng)頁更加美觀漂亮。任務(wù)二：打開主頁文件咪咪豆網(wǎng)屋index.htm（1）、師生復(fù)習啟動frontpage 軟件。（它是微軟公司推出的一款優(yōu)秀的網(wǎng)頁制作軟件）

（2）、學生試著打開主頁文件咪咪豆網(wǎng)屋index.htm，老師巡視并校正。

操作步驟：網(wǎng)頁制作軟件——單擊文件——打開文件——我的文檔，找到主頁文件咪咪豆網(wǎng)屋index.htm——再打開。

（3）、學生操作。

任務(wù)三：把“胖胖熊”請進來

（1）師生復(fù)習在word 中插入圖片的方法，指名學生回答。教師小結(jié)：方法一：①、復(fù)制——粘貼；②、方法二：菜單——插入——圖片——來自文件——選擇圖片單擊插入。

（2）學生練習圖片的插入，（3）學生探究把胖胖熊請進“咪咪豆網(wǎng)屋”主頁中的的方法。

教師提問：能否把在word中插入圖片的方法運用在frontpage 軟件中呢？（指名學生回答：可以）學生動手操作：教師巡視，對不正確的地方進行校正。教師小結(jié)：

我們可以這樣把胖胖熊請進“咪咪豆網(wǎng)屋”主頁。操作步驟：

① 把光標移到第二行“咪咪豆網(wǎng)屋”的左邊；

② 單擊“插入”菜單；

③ 選圖片來自文件→選C：“網(wǎng)頁制作”文件夾→找到“胖胖熊1.gif” 文件并單擊→單擊“確定”。

（3）、學生操作，教師巡視指導(dǎo)

（4）、要求學生用同樣的方法把胖胖熊放到“咪咪豆網(wǎng)屋”的右邊。

任務(wù)四：保存網(wǎng)頁

同學們，我們成功把胖胖熊請進“咪咪豆網(wǎng)屋”主頁中，現(xiàn)在，我們要做的就把今天的作品保存起來！

學生試著保存：單擊文件菜單——保存文件。

四、教師小結(jié)：今天同學們通過努力，基本掌握了在網(wǎng)頁中插入和美化圖片的方法，我們插入網(wǎng)頁的目的是美化網(wǎng)頁，幫助他人的目的是美化我們的心靈。

第五篇：信息技術(shù)《在網(wǎng)頁文檔中添加圖片》說課稿

2011春季學期公開課說課稿

《在網(wǎng)頁文檔中添加圖片》說課稿

陽山中學 馮世良

尊敬的各位老師：

大家好！今天我說課的題目是《在網(wǎng)頁文檔中添加圖片》，它是粵教版的選修三《網(wǎng)絡(luò)技術(shù)應(yīng)用基礎(chǔ)》中使用Dreamweaver制作網(wǎng)頁的內(nèi)容，教學的對象為高二級學生。本節(jié)課我將從以下八個方面加以說明：

一、說教材

（一）教材分析

本教材貫徹“以學生為主體，教師為主導(dǎo)”的方針，把提高學生的積極性，培養(yǎng)學生的創(chuàng)新能力作為教育的根本目標。本課所學的是“在網(wǎng)頁文檔中添加圖片”，是網(wǎng)頁頁面美化的重點知識之一，是圖片在網(wǎng)頁上的應(yīng)用、延伸和拓展。通過本課學習，使同學們了解到Dreamweaver作為一個優(yōu)秀的網(wǎng)頁制作軟件，在網(wǎng)頁上使用的元素里面除了文字外還可以插入圖片、動畫等等。學習Dreamweaver的靈活應(yīng)用，是對學生掌握制作網(wǎng)頁的能力訓練與提高，激發(fā)學生自主創(chuàng)作出更加優(yōu)秀的作品。

（二）教學目標分析

教師應(yīng)特別注重培養(yǎng)學生如何獲取信息、處理信息和應(yīng)用信息的能力。在新課程理念指導(dǎo)下，我根據(jù)本節(jié)課教學內(nèi)容制定了知識與技能、過程與方法以及情感態(tài)度價值觀三個方面的教學目標。

1、知識與技能

（1）學生通過使用Dreamweaver在網(wǎng)頁上插入圖片操作練習，讓學生熟悉在網(wǎng)頁上使用圖片的各種方法；

（2）通過練習操作調(diào)整圖片、編輯圖片，使學生熟練掌握在Dreamweaver中調(diào)整圖片、編輯圖片的技巧。

2、過程與方法

（1）通過教師引導(dǎo)，學生動腦思考、交流與實踐操作的學習過程，體驗和感悟探究的一般過程；

（2）學生通過自主、合作、探究學習的方式，提高獲取信息、處理信息和應(yīng)用信息的能力。

2011春季學期公開課說課稿

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

通過設(shè)計“美麗的九寨溝”這一頁面，學習在網(wǎng)頁文檔中插入圖片，提高自己的操作能力，激發(fā)學生學習計算機的興趣，鼓勵和培養(yǎng)學生自主創(chuàng)新的情感。

（三）教學重、難點分析

這節(jié)課的教學內(nèi)容是在網(wǎng)頁文檔中插入圖片，因此讓學生掌握插入圖片的方法是本節(jié)課的重點。對圖片的調(diào)整和編輯的操作中學生容易出錯，掌握起來還有一定的難度，因此我把圖片的調(diào)整與編輯作為本節(jié)課的難點。

重點：通過本節(jié)課學習，熟練使用Dreamweaver在網(wǎng)頁文檔中插入圖片的方法。

難點：學生通過交流與實踐操作，熟悉插入圖片的方法，掌握對圖片的調(diào)整和編輯的技巧。

二、說教法

根據(jù)教學內(nèi)容，本課采用的主要教學方法有“創(chuàng)設(shè)情境法”、“任務(wù)驅(qū)動法”、“自主探究法”、“分層教學法”。

信息技術(shù)教學大綱中明確指出：知識及技能的傳授應(yīng)以完成典型“任務(wù)”為主。為此在授課時，我先通過展示九寨溝美麗的風景圖片，激發(fā)學生的興趣，引出本節(jié)的主題任務(wù)——為九寨溝制作宣傳網(wǎng)頁，在完成這個主題任務(wù)過程中，再給出一個個小任務(wù)，讓學生運用已學知識，自已動手，自主探究，以任務(wù)的方式再次激發(fā)學生興趣，使教學內(nèi)容合理流動。

三、說學法

在這節(jié)課中學生主要用到的學法是：接受任務(wù)——思考討論——嘗試操作——自主創(chuàng)造——作品展示。學生在完成每個任務(wù)的過程中，總是從思考討論完成任務(wù)的辦法開始，在對討論的結(jié)果進行探究驗證的基礎(chǔ)上，完成任務(wù)，最后通過作品展示，讓學生更多地體驗一種成就感，進一步激發(fā)他們強烈的創(chuàng)造欲望。

四、說教學準備

1、帶多媒體教學系統(tǒng)的網(wǎng)絡(luò)教室；

2、多媒體教學課件；

3、學生預(yù)先分組，并選一個計算機水平較好，又比較負責任的學生擔當小組長；

2011春季學期公開課說課稿

4、將九寨溝相關(guān)資料及圖片存放在學生機上。

五、說教學過程

根據(jù)本課教學內(nèi)容以及信息技術(shù)課程學科特點，結(jié)合高二級學生的實際認知水平，我設(shè)計了如下四個教學環(huán)節(jié)：

（一）情境激趣，引出主題

（二）任務(wù)驅(qū)動，自主探究

（三）實踐運用，提高發(fā)展

（四）展示評價，歸納總結(jié) 第一環(huán)節(jié)：情景激趣，引出主題

首先，我展示九寨溝風景圖片，同學們一定會被眼前美麗的風景所打動。此時，問道：多么美麗的風景啊，你們想不想讓外面更多的人了解美麗的九寨溝，讓更多的人到九寨溝旅游觀光呢？那么，今天我就讓大家當一回設(shè)計師，用我們所學的Dreamweaver軟件為九寨溝的旅游事業(yè)設(shè)計一個網(wǎng)頁，讓更多的人來了解九寨溝！好不好？

同學們的激情一下了被調(diào)動起來，使新知識的學習成了學生內(nèi)心的需要，從而使這節(jié)課有了一個良好的開端。

第二環(huán)節(jié)：任務(wù)驅(qū)動，自主探究

同學們的激情被調(diào)動起來后，個個躍躍欲試，緊接著有一些同學會由喜悅轉(zhuǎn)為疑惑：怎樣為九寨溝作宣傳呢？

這時，打開兩個文檔：看，這是老師為九寨溝設(shè)計的兩份宣傳頁面，你們覺得哪份宣傳效果更加形象生動，更能起到很好的宣傳效果呢？

學生的回答肯定是帶圖片的那份，我趁熱打鐵提出第一個任務(wù)。任務(wù)一：同學們先自已動手試一試，如何在網(wǎng)頁中插入圖片？

任務(wù)提出后，同學們思考討論，然后我提示學生插入圖片要使用插入菜單，讓學生自已動手實踐，看看誰最先找到插入圖片的方法，這樣意在培養(yǎng)學生主動探索的學習習慣。

在動手實踐過程中，學生的水平不一，有些同學不僅很快就找到了插入圖片的方法，還找到了其他插入圖片的方法。但是，也有少數(shù)學生找不到，這時，我

2011春季學期公開課說課稿

請已學會的學生擔任小老師，指導(dǎo)其他同學，并鼓勵學生走上講臺為大家分別演示插入圖片的方法，給學生提供一個展示才能的機會。

然后，我利用事先做好的課件，演示操作步驟，歸納操作方法。這樣做，既突出了本節(jié)課的重點，又強化了學生對重點知識的掌握。

通過學生的演示，教師的歸納，學生們都能將圖片插入到網(wǎng)頁。緊接著我找出幾份具有代表性的學生作品，利用多媒體網(wǎng)絡(luò)教室廣播軟件進行展示，我首先對這些作品給予充分肯定的同時，請同學們議一議如何使這些作品更加完美，同學們暢所欲言，對于學生們提出的建議，我歸納成3個有待解決的問題：

問題1：如何改變圖片的大?。?問題2：如何移動圖片的位置？

問題3：如何調(diào)整圖片和文字之間的位置關(guān)系？

這3個問題轉(zhuǎn)變成為3個新的任務(wù)擺在了學生們的面前，我讓學生根據(jù)自已能力的高低選擇1個或多個任務(wù)進行探究，并嘗試操作。這樣采用分層教學的方法，既讓能力高的學生充分展示自已的才華，也能讓能力較低的學生品嘗到成功的喜悅，使得全體學生都得到最大程度的發(fā)展。

同學們在操作前，我這樣提示大家：如果遇到解決不了的問題，可通過教材的閱讀或網(wǎng)絡(luò)搜索解決方法的方式來完成。

教師巡回指導(dǎo)，對于個別學生遇到的問題，可以讓小組中會操作的學生傳授方法，開展合作學習。對于大部分同學都解決不了的問題，則進行啟發(fā)引導(dǎo)。

然后選幾位學生將屏幕上的幾幅作品進行完善，最后教師進行歸納總結(jié)，并對操作過程中容易出現(xiàn)的問題進一步強調(diào)。通過生生互動，師生互動，突破了對圖片進行調(diào)整編輯這個難點。

在這一環(huán)節(jié)，同學們在任務(wù)的驅(qū)動下，自主探究，動手實踐，解決了問題，學生的角色從“讓我學”變成“我要學”，學習的興趣在不斷提高，好奇心也隨之得到滿足。動手實踐的得與失，不再是作品的好壞，而是“自主學習”的成功體驗。

第三個環(huán)節(jié)：實踐運用，提高發(fā)展

在學生掌握新知后，我設(shè)計了一個以小組為單位來為九寨溝設(shè)計一宣傳網(wǎng)站的比賽，在制定比賽規(guī)則后，給學生留下自由發(fā)揮的空間，鼓勵學生自主創(chuàng)造，2011春季學期公開課說課稿

充分發(fā)揮自已的靈感和特長，以小組合作的形式，讓學生體驗團結(jié)協(xié)作的力量，以比賽的方式，使學生的興奮點再次激起高潮，不知不覺中使知識得到了鞏固。

第四個環(huán)節(jié)：展示評價，歸納總結(jié)

在這個環(huán)節(jié)里，利作多媒體網(wǎng)絡(luò)教室的優(yōu)勢，將小組中的優(yōu)秀作品傳送到教師機，我利用廣播教學讓學生欣賞。學生在欣賞的過程中，既可以相互學習，交流心得，鍛煉口頭表達能力和評價能力，又可以使學生獲得成功的興奮，被認可的滿足，品嘗到學習的快樂。

六、布置作業(yè)

在我結(jié)束本節(jié)課的教學活動時，我將請同學們對這節(jié)課談?wù)勛砸训氖斋@，目的在于讓同學人回顧教學過程，對知識進行系統(tǒng)化的梳理，加深對本課重難點的理解。最后，我會說：今天大家已經(jīng)成功地為網(wǎng)頁添加圖片，但是網(wǎng)頁還不夠完美，比如動態(tài)元素的使用，背景的設(shè)置等，這些知識我們將在下節(jié)課繼續(xù)學習。然后，布置作業(yè)：預(yù)習在網(wǎng)頁文檔中設(shè)置動態(tài)元素的方法，并嘗試著操作練習，這樣給學生造成學習的期待心理，激發(fā)他們下階段的學習熱情。

七、評價分析

本節(jié)課以任務(wù)為主線，有意識地留給學生適度的思維空間，使傳授知識與培養(yǎng)能力容為一體。鼓勵學生大膽上臺演示，讓學生暴露思維過程，教師將從多方面給予評價，同時，通過作品展示，讓學生自評，互評，從而體現(xiàn)評價主體的多元化，評價方式的多樣化。

八、板書設(shè)計（略）

我的說課到此結(jié)束，敬請各位評委老師指正，謝謝！