第一篇：《網(wǎng)頁格式刷》教學(xué)案例（范文模版）

《網(wǎng)頁格式刷》

——CSS樣式表教學(xué)案例

【教材分析】

“CSS樣式表”是高中信息技術(shù)選修《網(wǎng)絡(luò)技術(shù)應(yīng)用》的第五章“動態(tài)網(wǎng)頁制作”中的內(nèi)容。教材中將這塊內(nèi)容分為“什么是CSS”、“CSS實(shí)現(xiàn)”、“在HTML中加入CSS”三部分。本節(jié)內(nèi)容的重點(diǎn)應(yīng)該是“運(yùn)用CSS進(jìn)行樣式設(shè)置的方法和格式”及“在HTML中加入CSS的三種方法”。因此我認(rèn)為將“CSS實(shí)現(xiàn)”與“在HTML中加入CSS”兩部分結(jié)合在一起講比較好。此外，我認(rèn)為“體會CSS樣式表的優(yōu)點(diǎn)”也應(yīng)該是一個教學(xué)重點(diǎn)。學(xué)生以往用FrontPage做網(wǎng)頁都習(xí)慣用工具按鈕、菜單命令來進(jìn)行網(wǎng)頁外觀設(shè)置，使用代碼對學(xué)生來說是件令他們頭疼的事，所以我認(rèn)為有必要通過讓學(xué)生體會CSS樣式表的優(yōu)點(diǎn)讓學(xué)生明白為何我們要學(xué)習(xí)這部分內(nèi)容。【教學(xué)目標(biāo)分析】

1、知識與技能

(1)什么是CSS樣式表。(2)CSS樣式表的優(yōu)點(diǎn)。

(3)嵌入式、內(nèi)聯(lián)式、外聯(lián)式三種樣式表的使用方法。

(4)通過對三種樣式表的親身實(shí)踐，感受這三種樣式表的優(yōu)缺點(diǎn)。

2、過程與方法

(1)通過WORD排版中的“格式刷”引入網(wǎng)頁中的“CSS樣式表”，通過類比，使學(xué)生初步了解CSS樣式表的作用，激發(fā)學(xué)習(xí)興趣。

(2)對于CSS樣式表的概念和優(yōu)點(diǎn)主要由教師講解，并讓學(xué)生在實(shí)踐操作中感受樣式表的優(yōu)點(diǎn)。(3)對于嵌入式、內(nèi)聯(lián)式、外聯(lián)式三種樣式表的使用，由教師講授方法和代碼的書寫格式要求，由學(xué)生根據(jù)實(shí)例要求自我實(shí)踐操作。

(4)在學(xué)生的實(shí)踐操作過程中，讓完成較快的學(xué)生充當(dāng)小老師，幫助其他同學(xué)發(fā)現(xiàn)和改成錯誤。

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

(1)通過CSS樣式表的學(xué)習(xí)，提高學(xué)生美化網(wǎng)頁的技能。(2)培養(yǎng)學(xué)生的探索、實(shí)踐能力。

(3)通過實(shí)踐過程中的“小老師”角色，讓學(xué)生感受同學(xué)之間的互助友愛，團(tuán)結(jié)協(xié)作。【學(xué)情分析】

通過前階段的學(xué)習(xí)，學(xué)生已經(jīng)認(rèn)識了動態(tài)網(wǎng)頁，并對HTML的標(biāo)簽及屬性也有了了解?？紤]到我所在學(xué)校的學(xué)生學(xué)習(xí)能力、領(lǐng)悟能力比較強(qiáng)。因此雖然CSS樣式表對于學(xué)生來說是全新的內(nèi)容，但如果教師采用“講授概念→操作演示→學(xué)生操作”的模式上課，將無法激發(fā)學(xué)生自主探索學(xué)習(xí)的興趣和熱情，所以我采用了教師講授概念和方法，然后由學(xué)生自主探索實(shí)踐操作，使學(xué)生的學(xué)習(xí)更具挑戰(zhàn)性。

【教學(xué)重點(diǎn)、難點(diǎn)分析】

1、教學(xué)重點(diǎn)

(1)CSS樣式表的概念。

(2)體會CSS樣式表的優(yōu)點(diǎn)。

(3)嵌入式、內(nèi)聯(lián)式、外聯(lián)式三種樣式表的使用方法。(4)CSS代碼的書寫格式，輸入的準(zhǔn)確性。

2、教學(xué)難點(diǎn)

(1)三種樣式表在使用上區(qū)別。(2)CSS代碼的書寫格式。【教學(xué)過程】 [新課導(dǎo)入：] 教師活動：教師展示兩篇WORD文檔A和文檔B，文檔A已經(jīng)進(jìn)行了文字字號、字體、顏色、行距、首行縮進(jìn)等排版，文檔B未進(jìn)行任何排版。

教師提問：同學(xué)們，在WORD編輯中，有什么方法能讓文檔B以最快捷的速度排版成文檔A的字號、字體、顏色、行距呢？

學(xué)生活動：部分學(xué)生思考后回答“格式刷”。

教師活動：教師迅速的利用格式刷將文檔B設(shè)置成文檔A的排版外觀。

教師活動：教師展示兩張網(wǎng)頁，網(wǎng)頁A已經(jīng)進(jìn)行了文字字號、字體、顏色、文字鏈接動態(tài)效果、彩色滾動條等外觀設(shè)置，網(wǎng)頁B未進(jìn)行任何設(shè)置。

教師提問：現(xiàn)在老師想把網(wǎng)頁B也設(shè)置成網(wǎng)頁A的外觀，有什么方法能夠快捷而方便地幫我們做到呢？

學(xué)生活動：部分學(xué)生回答說“格式刷”。

教師提問：如果我們在做網(wǎng)頁的過程中，也有一把“格式刷”，是不是就能很方便的將網(wǎng)頁B設(shè)置成網(wǎng)頁A的外觀呢？網(wǎng)頁制作中，到底有沒有這樣的“格式刷”呢？

教師操作：打開網(wǎng)頁A的源代碼，將CSS樣式代碼復(fù)制到網(wǎng)頁B，立刻使網(wǎng)頁B具有了與網(wǎng)頁A相同的外觀。

教師提問：老師剛才復(fù)制粘貼的那段代碼是不是具有與“格式刷”相同的作用？今天我們就來學(xué)習(xí)“網(wǎng)頁中的格式刷”——CSS樣式表。

[新課講授：] 一：什么是CSS樣式表？

教師活動：講授CSS樣式表的概念。

用一個指定的名字來標(biāo)識和保存的一組相關(guān)字符和段落格式的選項(xiàng)集合。

讓學(xué)生了解CSS樣式表的優(yōu)點(diǎn)。(結(jié)合實(shí)例)

1、避免在標(biāo)識字符和設(shè)置段落格式等操作時(shí)重復(fù)定義需要的樣式（如字體、字號、顏色），從而使應(yīng)用該樣式的網(wǎng)頁具有相同的風(fēng)格。

2、只需要修改一個CSS代碼就可以改變頁數(shù)不定的網(wǎng)頁外觀和格式，提高網(wǎng)頁編輯效率。

3、可以“隨心所欲”地控制頁面布局和外觀。

4、在所有瀏覽器和平臺之間具有較好的兼容性。

二：如何在HTML中加入樣式？

1、嵌入式樣式表

教師活動：教師講授嵌入式樣式表的使用方法。

方法：只需在每個要應(yīng)用樣式的HTML的標(biāo)記后寫上CSS屬性就可以了。

CSS屬性書寫格式：style=“color:red;font-family:黑體;font-size:24pt”

注意：color的屬性值還可以用顏色代碼，如：#ff0000。教師活動：布置課堂練習(xí)題1。

打開example1文件夾下的qzwx.htm，將網(wǎng)頁中文章標(biāo)題文字“秋天的童話·如夢”用嵌入式樣式表設(shè)置成：#ff9900，30pt，黑體。（效果如下圖）

學(xué)生活動：依據(jù)教師講的方法，進(jìn)行練習(xí)。

教師活動：巡回輔導(dǎo)，提醒學(xué)生輸入字母、標(biāo)點(diǎn)一定要準(zhǔn)確。

教師提問：如果用嵌入式樣式表來為網(wǎng)頁中的文字設(shè)置外觀，方不方便？ 學(xué)生回答：不方便。

教師活動：總結(jié)嵌入式樣式表的不足。

嵌入式樣式表主要用于對具體的標(biāo)簽作具體的調(diào)整，其作用的范圍只限于本標(biāo)簽。這種樣式表并不能充分體現(xiàn)出CSS樣式表的優(yōu)越性。引入內(nèi)聯(lián)式樣式表。

2、內(nèi)聯(lián)式樣式表

（1）作用于網(wǎng)頁中的部分文字

教師活動：教師講授第一種內(nèi)聯(lián)式樣式表的使用方法。

方法：(1)在網(wǎng)頁的 定義樣式，如：

(2)在要設(shè)置此樣式的文字頭插入,文字尾插入,如：

1、提示一些不相干的話。

注意：a1為定義的樣式名，不同的網(wǎng)頁，樣式名可以不同。教師活動：布置課堂練習(xí)題2。

打開example2文件夾下的bingdu.htm，用內(nèi)聯(lián)式樣式將網(wǎng)頁中的9個小標(biāo)題字體設(shè)置為：綠色、14pt、黑體。（效果如下圖）

學(xué)生活動：依據(jù)教師講的方法，進(jìn)行練習(xí)。

教師活動：巡回輔導(dǎo)，提醒學(xué)生定位插入點(diǎn)要準(zhǔn)確，樣式名前的點(diǎn)不能丟，輸入字母、標(biāo)點(diǎn)也一定要準(zhǔn)確。教師活動：發(fā)現(xiàn)很多學(xué)生的錯誤都來自輸入錯誤，自己檢查半天也查不出來，于是提議讓同桌同學(xué)幫忙找錯。

學(xué)生活動：學(xué)生很認(rèn)真的幫同學(xué)找錯。

教師提問：如果要把“bingdu.htm”網(wǎng)頁中的小標(biāo)題的顏色由綠色改為藍(lán)色，想一想該如何做？ 學(xué)生回答：只要在定義樣式的代碼中將“green”改為“blue”就行了。教師提問：但是如果我們沒有用內(nèi)聯(lián)式樣式表，那又該如何做？ 學(xué)生回答：那就得九個標(biāo)題一個一個改顏色，改九次。

教師活動：引導(dǎo)學(xué)生體會樣式表的使用提高了我們修改網(wǎng)頁的效率?。?）作用于整個網(wǎng)頁

教師活動：教師講授第一種內(nèi)聯(lián)式樣式表的使用方法。

方法：在網(wǎng)頁的 插入代碼：

教師活動：布置課堂練習(xí)題3。

打開example3文件夾下的teacher.htm，用內(nèi)聯(lián)式樣式表制作超鏈接文字的動態(tài)效果：當(dāng)鼠標(biāo)劃過時(shí)，設(shè)為超連接的文字，變成橘黃色，并出現(xiàn)下劃線。（效果如下圖）

此題代碼由教師提供代碼圖片，學(xué)生自己輸入。

學(xué)生活動：依據(jù)教師講的方法，進(jìn)行練習(xí)。

教師活動：巡回輔導(dǎo)，提醒學(xué)生定位插入點(diǎn)要準(zhǔn)確，輸入字母、標(biāo)點(diǎn)也一定要準(zhǔn)確。提示學(xué)生利用復(fù)制粘貼相同代碼后修改，提高自己的輸入速度。繼續(xù)鼓勵同學(xué)互相幫忙找錯誤。

教師提問：如果網(wǎng)站內(nèi)有幾十網(wǎng)頁都要用到此浮動鏈接效果，該如何做呢？

學(xué)生回答：每張網(wǎng)頁都插入同樣的CSS代碼。

教師提問：有沒有什么方法可以簡化這項(xiàng)操作呢？既然幾十張網(wǎng)頁都要用同樣的代碼，能不能把這段代碼制作成一個獨(dú)立的文件，然后由每張網(wǎng)頁調(diào)用呢？

3、外聯(lián)式樣式表 教師活動：教師講授外聯(lián)式樣式表的使用方法。

方法：(1)將樣式定義成一個“.css”的文件：

可在記事本中輸入樣式代碼，然后保存為擴(kuò)展名為“.css”的文件。(2)在網(wǎng)頁的head區(qū)插入引用代碼：

注意：標(biāo)簽中的屬性沒有前后次序要求。教師活動：布置課堂練習(xí)題4。

打開example4文件夾下的teacher.htm，用外聯(lián)式樣式表制作超鏈接文字的動態(tài)效果： 當(dāng)鼠標(biāo)劃過時(shí)，設(shè)為超連接的文字，變成橘黃色，并出現(xiàn)下劃線。

學(xué)生活動：依據(jù)教師講的方法，進(jìn)行練習(xí)。

教師活動：巡回輔導(dǎo)，提醒學(xué)生定位插入點(diǎn)要準(zhǔn)確，輸入字母、標(biāo)點(diǎn)也一定要準(zhǔn)確。樣式文件和網(wǎng)頁文件要保存于同一個文件夾內(nèi)。

[課堂小結(jié)：] 教師活動：通過兩節(jié)課的學(xué)習(xí)，同學(xué)們知道了什么是CSS樣式表，掌握了三種CSS樣式表的使用。同學(xué)們通過實(shí)踐操作，也體會到了使用CSS樣式表可以避免很多重復(fù)操作，從而提高網(wǎng)頁編輯和修改的效率。希望同學(xué)們以后在自己制作網(wǎng)站時(shí)，能靈活運(yùn)用CSS樣式表來美化自己的網(wǎng)頁。

【自我評析】

本節(jié)內(nèi)容如果但看教學(xué)內(nèi)容，感覺1課時(shí)就可以完成，但是考慮到高二會考對CSS代碼的輸入有一定的要求，所以我決定所有練習(xí)題的代碼都由學(xué)生自己輸入，由于學(xué)生的輸入速度及準(zhǔn)確性問題，比預(yù)計(jì)多用了一課時(shí)。雖然多用了一課時(shí)，但是由于知識點(diǎn)講得比較清晰，給學(xué)生練習(xí)的時(shí)間比較充裕，自我感覺學(xué)生的學(xué)習(xí)效果比較好。

雖然課題引入用去的時(shí)間比較多，但是通過WORD文檔中的“格式刷”類比引入，給了學(xué)生很直觀的感受，很好的激發(fā)了學(xué)生們的學(xué)習(xí)興趣。在講授三種CSS樣式表的使用方法時(shí)，采用通過實(shí)踐前一種，感受總結(jié)不足，引出第二種，使學(xué)生對于三種使用方法的區(qū)別有了比較深刻的認(rèn)識。

在學(xué)生實(shí)踐過程中，雖然教師已經(jīng)一再提醒代碼中的字母、冒號、分號、引號不能輸錯，但學(xué)生還是會出現(xiàn)輸入錯誤，而且自我檢查不容易找到錯誤。于是我就讓同桌同學(xué)互相幫忙找錯，既讓學(xué)生感受了同學(xué)互助，又收到了很好的學(xué)習(xí)效果。

第二篇：網(wǎng)頁制作教學(xué)案例

《網(wǎng)頁制作》教學(xué)案例分析

【課時(shí)安排】1課時(shí)

【教學(xué)內(nèi)容分析】 本節(jié)課的主題：讓學(xué)生認(rèn)識并利用Dreamweaver軟件制作簡單的網(wǎng)頁，學(xué)會建立站點(diǎn)和設(shè)計(jì)有一定主題思想的主頁，本課是用該軟件創(chuàng)建環(huán)保網(wǎng)站，也就是用所掌握的信息技術(shù)知識解決生活中的實(shí)際問題，使學(xué)生能夠?qū)W以致用。發(fā)揮信息技術(shù)學(xué)科的優(yōu)勢，以素質(zhì)教育的新理念，增強(qiáng)學(xué)生的動手能力，提高學(xué)生的綜合素質(zhì)。

1、以教材為基石，作為構(gòu)建知識的橋梁，依據(jù)《課程標(biāo)準(zhǔn)》，創(chuàng)造性、合理的對教材進(jìn)行二次開發(fā)與重組。如：導(dǎo)入新課時(shí)，利用學(xué)生對美好事物的向往，激發(fā)學(xué)生的求知欲和學(xué)習(xí)興趣；采用任務(wù)驅(qū)動教學(xué)，增強(qiáng)學(xué)生自學(xué)能力；對學(xué)生的評價(jià)方式，采用學(xué)生作品展示，是學(xué)生學(xué)習(xí)的一個延續(xù)，對學(xué)生學(xué)習(xí)起到一種推進(jìn)的作用。

2、對教材內(nèi)容進(jìn)行引申與組合，讓學(xué)生利用網(wǎng)絡(luò)強(qiáng)大的功能搜集資料，分組搜集不同內(nèi)容，包括圖片與文章，采用任務(wù)驅(qū)動，協(xié)作互助的授課模式，發(fā)揮教師的主導(dǎo)作用，增強(qiáng)學(xué)生的主體地位。通過創(chuàng)建環(huán)保網(wǎng)站增強(qiáng)學(xué)生的審美意識與想象力，提高學(xué)生的綜合能力。

【分析教學(xué)對象】

1、學(xué)生的年齡特點(diǎn)和認(rèn)知特點(diǎn)：

學(xué)生對周圍的一切充滿了好奇，他們急于表現(xiàn)自己，對于教師布置的任務(wù)能夠認(rèn)真對待。對于Dreamweaver的知識掌握的較好，但綜合運(yùn)用能力尚有欠缺；能夠上網(wǎng)搜集資料，但速度與技巧還有待提高。本節(jié)課給學(xué)生提出一個總的任務(wù)：創(chuàng)建環(huán)保網(wǎng)站，此項(xiàng)任務(wù)的設(shè)置合理、藝術(shù)，對于學(xué)生各項(xiàng)能力的提高有很大幫助。

學(xué)生創(chuàng)作欲強(qiáng)，因此本節(jié)課中，提倡、鼓勵獨(dú)立完成作品，培養(yǎng)學(xué)生熱愛自然熱愛環(huán)境的情感，以增強(qiáng)學(xué)生的保護(hù)地球、保護(hù)環(huán)境的意識。

2、在學(xué)習(xí)本節(jié)課之前學(xué)生應(yīng)具備的基本知識和技能：

能掌握基本的文字修飾與排版功能并能查找指定地點(diǎn)的文件，會瀏覽網(wǎng)頁與下載資料。

3、學(xué)習(xí)者對即將學(xué)習(xí)的內(nèi)容應(yīng)該具備的水平：

本課是學(xué)生初次認(rèn)識Dreamweaver并能應(yīng)用它制作簡單的網(wǎng)頁，培養(yǎng)學(xué)生綜合運(yùn)用知識解決問題的能力，以及各方面素質(zhì)的一次綜合評價(jià)。

【教學(xué)目標(biāo)的設(shè)計(jì)】 1.知識目標(biāo)：

（1）了解網(wǎng)頁的概念；

（2）初識FrontPage2000并學(xué)會簡單地應(yīng)用；（3）了解建立網(wǎng)站的一般方法；

（4）學(xué)習(xí)制作包含文字、圖片和聲音的網(wǎng)頁。2.技能目標(biāo)：

學(xué)生通過探究學(xué)習(xí)過程中，掌握網(wǎng)站的建立方法與創(chuàng)建簡單網(wǎng)頁的操作。3.情感目標(biāo)：

培養(yǎng)學(xué)生在學(xué)習(xí)過程，自主探究能力和分類匯總知識的能力。培養(yǎng)學(xué)生熱愛環(huán)境、保護(hù)環(huán)境的情感并能號召人們行動起來保護(hù)地球、保護(hù)我們生存的環(huán)境。

【教學(xué)重點(diǎn)與難點(diǎn)】

（1）重點(diǎn)：建立網(wǎng)站與在網(wǎng)頁中插入文字、圖片、設(shè)置背景和背景音樂。（2）難點(diǎn)：將網(wǎng)頁存在網(wǎng)站內(nèi)并把涉及到的文件分類匯總在相應(yīng)的站點(diǎn)文件夾中。

【教學(xué)策略設(shè)計(jì)】

1、根據(jù)教材內(nèi)容和學(xué)生的實(shí)際情況，本課采用“任務(wù)驅(qū)動”、“問題──探究”等教學(xué)方法，創(chuàng)設(shè)一個板報(bào)展覽的情境（創(chuàng)設(shè)情境），以逐個任務(wù)和問題驅(qū)動學(xué)生多動手、多思考、多實(shí)踐，從而了解和掌握Dreamweaver的基本知識和技能。并以英語的鼓勵語言和信息技術(shù)專業(yè)術(shù)語增強(qiáng)學(xué)生的學(xué)習(xí)興趣。

2、本課傳授給學(xué)生的學(xué)法是“問題驅(qū)動下的自主學(xué)習(xí)──分組協(xié)作學(xué)習(xí)──探究發(fā)現(xiàn)學(xué)習(xí)”。讓學(xué)生在創(chuàng)建環(huán)保網(wǎng)站的過程中，既鼓勵個性張揚(yáng)，又提倡某些問題的分組協(xié)作與自主探究，指導(dǎo)學(xué)生對圖片及文字的來源進(jìn)行探究發(fā)現(xiàn)（從網(wǎng)絡(luò)中搜集）。建構(gòu)主義學(xué)習(xí)理論強(qiáng)調(diào)以學(xué)生為中心，要求學(xué)生由知識的灌輸對象轉(zhuǎn)變?yōu)樾畔⒓庸さ闹黧w。故此本課教學(xué)過程中，以問題驅(qū)動，激發(fā)求知欲望，讓學(xué)生帶著逐個任務(wù)通過探究發(fā)現(xiàn)、相互合作、實(shí)際操作等方式，自主學(xué)習(xí)，使學(xué)生在完成任務(wù)的過程中不知不覺實(shí)現(xiàn)知識的傳遞、遷移和融合。

3、是在網(wǎng)絡(luò)教室中完成的，利用多媒體局域網(wǎng)絡(luò)，實(shí)現(xiàn)教師演示、個別指導(dǎo)、網(wǎng)上交流、作品提交及作品展示評比。在出現(xiàn)共性問題與個別錯誤時(shí)教師可以利用網(wǎng)絡(luò)教室軟件演示和個別指導(dǎo)，在創(chuàng)作作品的同時(shí)，生生可以進(jìn)行網(wǎng)上交流。體現(xiàn)教師的指導(dǎo)、組織作用，學(xué)生主體、探究協(xié)作地位。

【教學(xué)評價(jià)設(shè)計(jì)】

1.采用小組間競爭機(jī)制，比賽哪個小組解決問題或是完成任務(wù)的速度快與質(zhì)量高，增強(qiáng)學(xué)生協(xié)作互助的意識。

2.最后進(jìn)行作品展示，評出“速度”獎，“質(zhì)量”獎，“原創(chuàng)風(fēng)味”獎等幾個獎項(xiàng)，進(jìn)一步激發(fā)學(xué)生的學(xué)習(xí)熱情。對自己的作品有一個反思，增加相互學(xué)習(xí)、相互交流的機(jī)會，讓學(xué)生學(xué)會自己梳理知識，增強(qiáng)自學(xué)能力。

【教學(xué)過程設(shè)計(jì)】

一、情景導(dǎo)入

先前我們學(xué)習(xí)了使用搜索引擎查找我們所需要的資料，這些資料是以網(wǎng)頁形式存在于網(wǎng)絡(luò)中，大家想不想擁有自己創(chuàng)建的網(wǎng)頁？（激發(fā)學(xué)生的求知欲）（學(xué)生回答：想）

從這節(jié)課開始我們就學(xué)習(xí)制作網(wǎng)頁，到底什么是網(wǎng)頁呢？

二、問題驅(qū)動 任務(wù)一：大家打開課本閱讀和瀏覽一些好的網(wǎng)站了解網(wǎng)頁概念，網(wǎng)頁與網(wǎng)站的關(guān)系？看哪個小組能最先解答該問題？

學(xué)生閱讀課本（3分鐘）分小組討論自己的理解。

小結(jié)：

1.網(wǎng)頁使用文字、圖形、聲音影視等多媒體的形式表達(dá)信息，使表達(dá)的信息更加鮮活；

2.問網(wǎng)站時(shí)看到的第一個頁面（網(wǎng)頁）就稱作網(wǎng)站的首頁或主頁； 3.網(wǎng)頁如同大家一樣都必須有一個“家”，這個家就是網(wǎng)站； 4.存在網(wǎng)站中的網(wǎng)頁之間采用了鏈接式的方法將網(wǎng)頁串接起來。

任務(wù)二：在我們了解網(wǎng)頁與網(wǎng)站后，會有疑問：使用什么軟件制作網(wǎng)頁呢？帶著這個問題閱讀課本，同時(shí)跟隨課本啟動這個軟件?？茨膫€小組成員最先完成？ 學(xué)生閱讀并實(shí)踐?? 小結(jié)：

大家會有疑問為什么選擇它，還有別的軟件嗎？有，如FrontPage網(wǎng)頁制作軟件等，課本中使用了Dream weaver這個軟件簡單易學(xué)，并且窗口與我們使用操作系統(tǒng)windows都是基本一致的。

第三篇：網(wǎng)頁設(shè)計(jì)流程教學(xué)案例

我最成功的一節(jié)課——網(wǎng)頁設(shè)計(jì)流程

“網(wǎng)頁設(shè)計(jì)流程”是中職計(jì)算機(jī)應(yīng)用專業(yè)課《網(wǎng)頁制作與設(shè)計(jì)》的重點(diǎn)教學(xué)內(nèi)容。根據(jù)中等職業(yè)學(xué)校計(jì)算機(jī)應(yīng)用專業(yè)課程的主要任務(wù)及對教材內(nèi)容的分析研究，在“網(wǎng)頁制作流程”這課的教學(xué)中，我把掌握網(wǎng)頁制作流程的一些技術(shù)和方法為知識目標(biāo)，通過對知識的學(xué)習(xí)和對作品的創(chuàng)作培養(yǎng)學(xué)生創(chuàng)造能力，協(xié)作能力，動手能力，評價(jià)能力，同時(shí)在教學(xué)中培養(yǎng)學(xué)生的審美、欣賞、創(chuàng)新，主動探索與發(fā)展的能力為情感目標(biāo)。那么，如何來實(shí)現(xiàn)教學(xué)目標(biāo)呢?我進(jìn)行了教學(xué)研究的嘗試，引導(dǎo)學(xué)生開展探究性學(xué)習(xí)：網(wǎng)頁制作作品。

課堂教學(xué)實(shí)例

課題：網(wǎng)頁制作流程

一、教學(xué)目標(biāo)

知識與技能

1、熟悉網(wǎng)頁的各種元素，以及各元素在網(wǎng)頁制作過程中的應(yīng)用。

2、掌握網(wǎng)頁制作過程中的一些技術(shù)和方法。

過程與方法

1、以建構(gòu)主義理論為指導(dǎo)，以研究性學(xué)習(xí)為載體，培養(yǎng)學(xué)生自學(xué)，合作學(xué)習(xí)和動手能力。

2、學(xué)生通過親身經(jīng)歷，提高分析和解決實(shí)際問題的能力。情感與價(jià)值觀

1、培養(yǎng)學(xué)生與他人協(xié)作的學(xué)習(xí)品質(zhì)，加強(qiáng)集體主義的觀念。

2、培養(yǎng)學(xué)生的科學(xué)探索精神與嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度。

任務(wù)描述

根據(jù)學(xué)生不同的學(xué)習(xí)能力，知識、興趣愛好，依據(jù)自愿組成原則，將全班分為6人的小組，各小組規(guī)劃出網(wǎng)頁設(shè)計(jì)方案，分工合作制作網(wǎng)頁，重點(diǎn)注重網(wǎng)頁制作流程，并由學(xué)生自己擔(dān)任評委，評選出優(yōu)秀網(wǎng)頁。

二、教學(xué)過程

1、課前準(zhǔn)備

（1）以小組為單位，規(guī)劃網(wǎng)頁結(jié)構(gòu)方案，描述網(wǎng)頁制作流程。

（2）根據(jù)這個方案進(jìn)行工作分配，依據(jù)所給網(wǎng)頁制作流程準(zhǔn)備材料、備寫相關(guān)材料。

2、制作過程（1）欄目設(shè)計(jì)

（2）資料搜集

（3）網(wǎng)頁藍(lán)圖制作

（4）色系選擇（5）字體選擇

（6）頁面詳細(xì)設(shè)計(jì)

3、網(wǎng)頁評審

各小組派一名成員上臺演示，根據(jù)老師制定的評分標(biāo)準(zhǔn)，請各小組長進(jìn)行評分，評出優(yōu)秀的班級網(wǎng)頁。

三、教學(xué)活動主要環(huán)節(jié)

1、引入教學(xué)資源環(huán)境，創(chuàng)設(shè)學(xué)習(xí)情境。這個環(huán)節(jié)的主要教學(xué)目的是激發(fā)學(xué)生的學(xué)習(xí)興趣和對新知識的渴望，讓他們有對新知識和技能的學(xué)習(xí)動機(jī)，愿望和需求，在教學(xué)中，根據(jù)學(xué)生的思想特點(diǎn)與學(xué)習(xí)心理。我用自己制作的網(wǎng)頁課件以及收集的優(yōu)秀網(wǎng)頁截圖來創(chuàng)設(shè)情景，向?qū)W生展示了優(yōu)秀網(wǎng)頁的網(wǎng)頁作品，并指出：大家看到的每一幅畫面都是一個網(wǎng)頁，這些網(wǎng)頁有的美觀大方；有的豐富多彩。有的個性鮮明，那么我們自己能不能制作出具有自己風(fēng)格的網(wǎng)頁。這樣激發(fā)了學(xué)生學(xué)習(xí)網(wǎng)頁制作的興趣及求知欲望，產(chǎn)生了完成作品展網(wǎng)頁的動機(jī)．此時(shí)，我對學(xué)生提出研究的目標(biāo)--如何利用網(wǎng)頁三劍客這個軟件來完成你們的班級網(wǎng)頁制作，最后各研究小組要分別展示你們的研究成果。

2、小組學(xué)習(xí)與探索研究。在課堂上，我出示范例，引導(dǎo)學(xué)生分析網(wǎng)頁的結(jié)構(gòu)，指出：網(wǎng)頁中可以有文字、圖片，甚至有動畫和聲音，為了和瀏覽者更好地交流，有時(shí)還添加各種表格、組件。當(dāng)然，各式各樣的超鏈接更是常常出現(xiàn)在網(wǎng)頁里。學(xué)生有了初步的直觀印象后，就不會感到盲目，而且會引起學(xué)生極大的興趣。隨后，我將一個網(wǎng)頁的制作流程分別說明，那一個環(huán)節(jié)需要哪些軟件，用到哪些技術(shù)；就作品網(wǎng)頁制作過程簡單介紹任務(wù)分解，重點(diǎn)在于小組任務(wù)的分配，將網(wǎng)頁制作流程中各環(huán)節(jié)根據(jù)任務(wù)的輕重和學(xué)生能力的強(qiáng)弱進(jìn)行分配，既要每個小組成員都有事可干，能完成各自任務(wù)，更要每個成員發(fā)揮自己的特長，使網(wǎng)頁整體有特色，對技術(shù)的掌握更上一層樓，這個過程中引導(dǎo)學(xué)生輕松愉快、主動去解決問題，完成任務(wù)，進(jìn)而達(dá)到自身對知識的意義建構(gòu)是關(guān)鍵。

3、小組展示網(wǎng)頁評審。展示交流是研究課題的最后一個環(huán)節(jié)，各小組通過多媒體教室向全班同學(xué)展示了各小組的研究成果，并對各個小組進(jìn)行自評，即；說出哪些是本小組最好的，哪些是本小組還沒能解決的．最后請各小組長評選出優(yōu)秀網(wǎng)頁。我認(rèn)為在此環(huán)節(jié)，教師應(yīng)把握評價(jià)的尺度，評價(jià)的側(cè)重點(diǎn)應(yīng)該放在學(xué)生在自主的學(xué)習(xí)過程中學(xué)會了哪些學(xué)習(xí)方法，同學(xué)間團(tuán)結(jié)合作意識是否體現(xiàn)，井充分肯定學(xué)生的成果，鼓勵他們繼續(xù)發(fā)揚(yáng)這種探索研究精神。

四、教學(xué)反思

在“網(wǎng)頁制作流程”這堂課的教學(xué)過程中，我充分利用了軟件本身的特點(diǎn)為學(xué)生創(chuàng)設(shè)了和諧、美好，愉快的信息化學(xué)習(xí)的平臺，發(fā)揮了學(xué)生的主體作用．教學(xué)中，充分調(diào)動了學(xué)生的學(xué)習(xí)積極性，培養(yǎng)了學(xué)生的動手能力，觀察分析能力和主動探索性學(xué)習(xí)的能力。通過教學(xué)方法的設(shè)計(jì)教會了學(xué)生分析問題的方法，教學(xué)情景的設(shè)計(jì)使學(xué)生身臨其境，啟發(fā)了學(xué)生探索新知，深研新知的強(qiáng)烈欲望，培養(yǎng)了學(xué)生良好的思維習(xí)慣、學(xué)習(xí)習(xí)慣，使學(xué)生學(xué)習(xí)新知識的同時(shí)形成了良好的學(xué)習(xí)心理，實(shí)現(xiàn)了教學(xué)目標(biāo)。實(shí)踐表明，開展探究性學(xué)習(xí)對網(wǎng)頁制作的教學(xué)具有非常好的效果，活動中充分發(fā)揮了學(xué)生的主體性，學(xué)生學(xué)習(xí)積極性被充分調(diào)動起來了。同時(shí)，提高了課堂效率，使整節(jié)課的教學(xué)目標(biāo)得以順利完成，小組的分工合作體現(xiàn)了平等原則，每個學(xué)生都積極參與到教學(xué)活動中．此外，小組成果評比演示也充分體現(xiàn)了學(xué)生在課堂活動中的主體地位。

第四篇：初中信息技術(shù)教學(xué)案例-美化網(wǎng)頁

初中信息技術(shù)教學(xué)案例

————《美化網(wǎng)頁》

一、課題

本課是《美化網(wǎng)頁》課時(shí)的內(nèi)容。學(xué)生已經(jīng)學(xué)習(xí)了制作簡單網(wǎng)頁的基本方法，這部分的主要內(nèi)容是，網(wǎng)頁中共享邊框、導(dǎo)航欄的設(shè)置和主題的應(yīng)用。如果采用傳統(tǒng)的教學(xué)模式（即教師示范──學(xué)生模仿操作）也能完成教學(xué)任務(wù)，但對學(xué)生而言，他們只學(xué)會了計(jì)算機(jī)的操作，而對信息素養(yǎng)并沒有得到提高。因此，本著學(xué)生自主探究學(xué)習(xí)意示、創(chuàng)新能力的培養(yǎng)，以綜合提高學(xué)生的信息素養(yǎng)為目的，筆者在教學(xué)時(shí)將本課中原來讓“做中學(xué)”的方式改為了自主探究的學(xué)習(xí)方式，將課堂交給學(xué)生，讓學(xué)生自主探究學(xué)習(xí)，教師在課堂中主要起到引導(dǎo)作用。

二、教學(xué)目標(biāo)分析

1．認(rèn)知目標(biāo)：學(xué)會簡單的對網(wǎng)頁進(jìn)行美化的方法。

2．技能目標(biāo)：

（1）掌握美化網(wǎng)頁的幾種操作方法；（2）能夠應(yīng)用主題，來改變網(wǎng)頁的整體布局；（3）能夠靈活地對幾種操作方法進(jìn)行綜合運(yùn)用。

3．情感目標(biāo)：（1）通過師生協(xié)作和學(xué)生互相配合，培養(yǎng)學(xué)生合作團(tuán)結(jié)的精神；（2）培養(yǎng)學(xué)生熱愛美的情感，激發(fā)學(xué)生表現(xiàn)美的欲望，使學(xué)生的審美能力得到提高。

三、學(xué)習(xí)者特征分析

從學(xué)生的認(rèn)知特點(diǎn)來看，他們愛問好動、求知欲強(qiáng)、想象力豐富，對實(shí)際操作活動有著濃厚的興趣，對直觀事物感知較強(qiáng)，正處在形象思維向抽象思維逐步過渡的階段。因此，在學(xué)習(xí)過程中，應(yīng)鼓勵學(xué)生自己觀察，親自動手操作，進(jìn)行學(xué)生討論和交流，師生共同歸納總結(jié)，體驗(yàn)學(xué)習(xí)。

在講此內(nèi)容之前，學(xué)生已經(jīng)學(xué)過如何制作一個簡單的網(wǎng)頁，并且已對網(wǎng)頁進(jìn)行簡單的修飾,這為學(xué)生進(jìn)一步對美化網(wǎng)頁作好了充分準(zhǔn)備。

基于以上學(xué)生情況的分析，筆者對教學(xué)過程大膽采用讓學(xué)生為主體，教師為主導(dǎo)為教學(xué)思路進(jìn)行設(shè)計(jì)。

四、教學(xué)策略選擇與設(shè)計(jì)

在講此內(nèi)容之前，學(xué)生已經(jīng)學(xué)過如何制作一個簡單的網(wǎng)頁，并且已對網(wǎng)頁進(jìn)行簡單的修飾,這為學(xué)生進(jìn)一步對美化網(wǎng)頁作好了充分準(zhǔn)備。

基于以上學(xué)生情況的分析，筆者對教學(xué)過程大膽采用讓學(xué)生為主體，教師為主導(dǎo)為教學(xué)思路進(jìn)行設(shè)計(jì)。

五、教學(xué)資源與工具設(shè)計(jì)

本課中筆者利用多媒體網(wǎng)絡(luò)教室系統(tǒng)展示學(xué)生制作的各式各樣的網(wǎng)頁，同時(shí)也用簡單的幻燈片制作一些簡單的頁面，以此來出示本課的教學(xué)目標(biāo)以及學(xué)習(xí)任務(wù)，以便學(xué)生有目標(biāo)的去學(xué)習(xí)和練習(xí)。

六、教學(xué)過程

（一）組織教學(xué)

（二）學(xué)生討論──導(dǎo)出教學(xué)目標(biāo)

師：（利用科教2000多媒體網(wǎng)絡(luò)教室系統(tǒng)選擇幾個觀看）請同學(xué)們將你們所制作的網(wǎng)頁打開，說說誰的網(wǎng)頁最漂亮。漂亮在什么地方？

（學(xué)生討論）有的說某個同學(xué)網(wǎng)頁中的文字好看，也有的說某個同學(xué)的網(wǎng)頁中的圖片漂亮，還有的說某個同學(xué)的網(wǎng)頁底色好看等等。

師：剛才同學(xué)們都說出某個網(wǎng)頁的某一點(diǎn)好看，沒有完全是自己認(rèn)為最漂亮的一個，那么，今天，就讓我們用計(jì)算機(jī)做出一個自己認(rèn)為最漂亮一個網(wǎng)頁好嗎？

生：好！

師：利用多媒體電子教室分別展示已經(jīng)進(jìn)行美化了的《美麗家鄉(xiāng)1》和當(dāng)前還沒有進(jìn)行美化的《美麗家鄉(xiāng)2》兩個網(wǎng)頁。誰說說這兩個網(wǎng)頁哪一個更漂亮，它們的區(qū)別在哪兒？

生：“美麗家鄉(xiāng)2”更漂亮。

師：那么請同學(xué)們討論一下，要想讓網(wǎng)頁最漂亮到底要對網(wǎng)頁做那些修飾呢？（學(xué)生討論）有的說要加鏈接欄，也有的說要添加共享邊框，還有的說要對網(wǎng)頁進(jìn)行底色的設(shè)置。

師：（小結(jié)）利用幻燈片出示本節(jié)課的教學(xué)目標(biāo)：（1）怎樣給網(wǎng)頁添加導(dǎo)航與共享邊框，來使網(wǎng)頁更美觀、更具有個性化；（2）如何進(jìn)行主題的應(yīng)用來改變網(wǎng)頁的整體布局。

（解析：通過學(xué)生討論對老師所展示的學(xué)生網(wǎng)頁，進(jìn)而加深對網(wǎng)頁的認(rèn)識，也明白本課的教學(xué)目標(biāo)。由于采用討論這一形式也能更好地調(diào)動全班學(xué)生的學(xué)習(xí)積極性，更容易激發(fā)學(xué)生的學(xué)習(xí)興趣。）

（三）新課講授

教師利用多媒體電子教室演示

1、插入鏈接欄導(dǎo)航

教師演示：單擊“插入”→“導(dǎo)航”→“插入Web組件”→“選擇相應(yīng)設(shè)

置”→“下一步”→“選擇相應(yīng)設(shè)置” →“完成”（讓學(xué)生知道插入鏈接欄導(dǎo)航的方法）

師：出示學(xué)習(xí)任務(wù)：（展示網(wǎng)頁）請同學(xué)們插入如教師所示的鏈接欄。

生：學(xué)生自主探究練習(xí)。（學(xué)生通過自主學(xué)習(xí)，能初步掌握導(dǎo)航欄的添加，并為后面的共享邊框的設(shè)置作準(zhǔn)備）

師：教師巡視，了解學(xué)生操作的情況，進(jìn)行個別學(xué)生指導(dǎo)。對做的好的給予肯定和贊揚(yáng)。

生：請個別學(xué)生示范操作。

教師提出問題：請同學(xué)們對“導(dǎo)航欄”屬性通話框中的各個“選項(xiàng)”逐個進(jìn)行研究、總結(jié)、掌握。（培養(yǎng)學(xué)生的自學(xué)能力）

（解析：“插入鏈接欄導(dǎo)航”是本節(jié)教學(xué)重難點(diǎn)，通過老師的演示講解，讓學(xué)生帶著問題去操作，進(jìn)行自主探究，最終解決實(shí)際問題。這樣既完成了教學(xué)目標(biāo)，也更好地提高了學(xué)生探究意識和創(chuàng)新能力。所以，讓學(xué)生帶著任務(wù)直接去學(xué)習(xí)，這樣使學(xué)生自主學(xué)習(xí)得到的體現(xiàn)，也有利于教師對個別學(xué)生加以指導(dǎo)，充分體現(xiàn)了學(xué)生為主體，教師為主導(dǎo)的思想。）

2．共享邊框

教師提示：“共享邊框”是在網(wǎng)站的每個網(wǎng)頁中，在共同的框架位置上顯示相同的內(nèi)容，我們可以通過“格式”菜單的“共享邊框”命令來為網(wǎng)頁進(jìn)行共享邊框的設(shè)置（讓學(xué)生知道設(shè)置共享邊框的概念及設(shè)置的基本方法）

師：出示學(xué)習(xí)任務(wù)：（展示網(wǎng)頁）請同學(xué)們設(shè)置如教師所示的共享邊框。

生：學(xué)生自主探究練習(xí)。（學(xué)生通過自主學(xué)習(xí)，能初步掌握共享邊框的設(shè)置）師：教師巡視，了解學(xué)生操作的情況，進(jìn)行個別學(xué)生指導(dǎo)。對做的好的給予肯定和贊揚(yáng)。

生：請個別學(xué)生示范操作。

（解析：本部分教學(xué)也應(yīng)是本節(jié)教學(xué)重難點(diǎn)，教師并沒有完全示范操作，而是稍加提醒，讓學(xué)生帶著問題去操作，最終解決實(shí)際問題。這樣既完成了教學(xué)目標(biāo)，也更好地提高了學(xué)生探究意識。）

3．知識拓展──主題的應(yīng)用

師：剛才都是我們手工對網(wǎng)頁進(jìn)行的美化，有沒有一種更快捷的辦法讓電腦自動對網(wǎng)頁進(jìn)行美化呢？

生：（學(xué)生陷入深思之中）

師：請同學(xué)們仔細(xì)觀察一下“格式”菜單中還有什么命令？（教師適時(shí)的加以提醒）生：（此時(shí)多數(shù)都積極動手操作實(shí)踐了）

師：那就請同學(xué)們各顯神通吧！看誰做得又快又好！

生：（此時(shí)學(xué)生都積極參與操作，都想拿到第一名）

師：（教師巡視，注意觀察及個別指導(dǎo)）

師：（過一段時(shí)間，當(dāng)發(fā)現(xiàn)有第一位學(xué)生運(yùn)用“主題”做好時(shí)）好，我班王偉同學(xué)已經(jīng)做好了，就請他為我們示范講解一下吧。

師：（結(jié)合學(xué)生操作和講解情況加以總結(jié)）

（解析：利用知識拓展形式來補(bǔ)充課堂知識，讓那些學(xué)有余力的學(xué)生表現(xiàn)得更出色，同時(shí)，也更加激勵全班學(xué)生向更高層次發(fā)展，提高學(xué)生對信息技術(shù)的興趣。也要充分注重學(xué)生的個體差異性。）

4．放開手腳──充分展顯學(xué)生個性

師：剛才同學(xué)們都掌握了對網(wǎng)頁的基本美化方法了，現(xiàn)在老師這還有一個很粗糙的網(wǎng)頁想請同學(xué)們把它美化的更漂亮些，好嗎？

生：好！

師：那就請各位同學(xué)大顯身手吧，看看誰的網(wǎng)頁最漂亮！

生：積極主動地進(jìn)行練習(xí)

師：注意對個別學(xué)生進(jìn)行相關(guān)指導(dǎo)。

（解析：通過讓學(xué)生幫老師解決問題的形式，將問題拋給學(xué)生，學(xué)生的積極性更高，同時(shí)也采用競賽的形式，比一比誰的最漂亮，這就更好的提高了學(xué)生的興趣。更重要的是能夠讓學(xué)生充分展現(xiàn)個性，放開學(xué)生的手腳，讓學(xué)生大膽發(fā)揮想象，尊重了學(xué)生的個性發(fā)展，大大提高了學(xué)生的自主創(chuàng)新能力。）

5．作品分析──填寫報(bào)告

師：現(xiàn)在同學(xué)們都已經(jīng)美化好了網(wǎng)頁，請同學(xué)們填寫網(wǎng)頁上的一份表格。

生：學(xué)生認(rèn)真填寫表格內(nèi)容。

（解析：通過分析自己的作品，讓學(xué)生在腦海里充分回憶所學(xué)過的知識點(diǎn)，加深對操作過程的印象，進(jìn)而培養(yǎng)學(xué)生良好的學(xué)習(xí)意識和學(xué)習(xí)習(xí)慣。）

作品分析表（略）

6．本課總結(jié)

師：（結(jié)合某個同學(xué)的作品進(jìn)行總結(jié)）這節(jié)課我們學(xué)習(xí)了對網(wǎng)頁的一些簡單的美化，同學(xué)們表現(xiàn)得都很好，希望同學(xué)們能將此運(yùn)用到今后的學(xué)習(xí)生活中去。

（解析：對全課的總結(jié)，首先是進(jìn)一步理順了本節(jié)的教學(xué)重難點(diǎn)，也充分肯定了學(xué)生學(xué)習(xí)成果，為以后的學(xué)習(xí)奠定了堅(jiān)實(shí)的基礎(chǔ)。）

七、教學(xué)評價(jià)設(shè)計(jì)

首先，在這節(jié)課的教學(xué)中，采用了任務(wù)驅(qū)動的教學(xué)方法，注重學(xué)生的自主探究意示和創(chuàng)新能力的培養(yǎng)，這種教學(xué)方法既培養(yǎng)了學(xué)生自主學(xué)習(xí)的能力，也更好地提高了學(xué)生的創(chuàng)新能力，使學(xué)生成為真正的學(xué)習(xí)主體。通過學(xué)生自學(xué)、實(shí)踐、質(zhì)疑、探索的過程，自主完成指定任務(wù)來達(dá)到教學(xué)的目的。在教學(xué)過程中多啟發(fā)、少教授，充分發(fā)揮學(xué)生的自學(xué)能力、獨(dú)立分析問題和解決問題的能力、創(chuàng)新的能力。

其次，在教學(xué)評價(jià)上，也讓學(xué)生進(jìn)行了自評、互評，提高了學(xué)生自我評價(jià)的能力，同時(shí)也培養(yǎng)了學(xué)生良好的學(xué)習(xí)習(xí)慣。

最后，教師從原來的知識的傳授者轉(zhuǎn)變?yōu)榻虒W(xué)的組織者、管理者，教師的主導(dǎo)地位得以充分的體現(xiàn)。

八、幫助和總結(jié)

本課教學(xué)以“情景導(dǎo)入→知識建構(gòu)→綜合應(yīng)用→自主創(chuàng)新”為主線，提高了學(xué)生學(xué)習(xí)的主動性。通過本節(jié)課的學(xué)習(xí)使學(xué)生們的創(chuàng)新能力增強(qiáng)了許多，制作出了好多漂亮的網(wǎng)頁。教師要營造交互式的學(xué)習(xí)環(huán)境，給學(xué)生更大的主動權(quán)，滿足學(xué)生個性化的學(xué)習(xí)需求。教師的引導(dǎo)與學(xué)生的思考融為一體，符合學(xué)生的認(rèn)知規(guī)律，有助于學(xué)生全身心地參與到學(xué)習(xí)中去。要讓學(xué)生在課堂上真正“動”起來，教師在課堂預(yù)設(shè)與生成的諸多環(huán)節(jié)都要精心設(shè)計(jì)，科學(xué)處理，以理性的思維去點(diǎn)燃學(xué)生求知的火焰。

第五篇：網(wǎng)頁設(shè)計(jì)教學(xué)案例

《網(wǎng)頁設(shè)計(jì)》之站點(diǎn)的建立教學(xué)案例

新疆阜康市廈門實(shí)驗(yàn)小學(xué)成偉

一、教學(xué)目標(biāo)

1、知道站點(diǎn)、主頁的概念，能在指定位置建立只有一個網(wǎng)頁的站點(diǎn)；

2、認(rèn)識FRONTPAGE的界面；

3、掌握在主頁中插入文字、圖片、水平線；

4、掌握頁面文件與圖片的保存。

二、教學(xué)重點(diǎn)

1、能在指定位置建立只有一個網(wǎng)頁的站點(diǎn)（難點(diǎn)）

2、能在頁面中插入文字、圖片、水平線

3、掌握頁面文件與圖片的保存（難點(diǎn)）

三、教學(xué)方法

在教學(xué)中，一方面采用比較教學(xué)的方法，促進(jìn)學(xué)生知識的遷移；另一方面，提供學(xué)生一個導(dǎo)學(xué)課件，讓學(xué)生根據(jù)這個網(wǎng)絡(luò)環(huán)境下的課件自己探索學(xué)習(xí)，以滿足不同層次學(xué)生的需求。

四、教學(xué)過程 設(shè)計(jì)

教師活動：

1、引入課題：（激發(fā)興趣，活躍氣氛）

同學(xué)們喜不喜歡上網(wǎng)？經(jīng)常上新浪、百度等，有沒有同學(xué)知道新浪、百度稱做什么？

（網(wǎng)站）

瀏覽新浪網(wǎng)站，瀏覽的第一個頁面稱為什么？

（主頁）

問題1：網(wǎng)站是不是就是網(wǎng)頁？用自己的語言描述一下網(wǎng)站的概念

（網(wǎng)站包含多個網(wǎng)頁，通過超鏈接把不同的頁面鏈接起來）

問題2：網(wǎng)頁是不是就是主頁？

(第一個頁面稱為主頁,網(wǎng)站設(shè)計(jì)者可以確定哪一個是主頁,主頁的文件名一般為：index.htm,主頁也是網(wǎng)頁)

設(shè)計(jì)網(wǎng)站一般必須經(jīng)過兩個步驟，首先是在計(jì)算機(jī)里做好，然后發(fā)布在internet上，讓所有的人訪問瀏覽。

今天我們學(xué)習(xí)用Frontpage建立站點(diǎn)，制作一個主頁。先來研究一下沒有發(fā)布的網(wǎng)站,打開教師做的網(wǎng)站

問：同學(xué)們看到了什么？

（文件夾）

總結(jié)：

可以這樣理解網(wǎng)站：在資源管理器里，網(wǎng)站表現(xiàn)為一個文件夾，里面存放的是所有與網(wǎng)站相關(guān)的文件。

打開主頁，瀏覽頁面，這是老師做的一個導(dǎo)學(xué)課件，將幫助大家完成學(xué)習(xí)任務(wù)。

請學(xué)生瀏覽教師課件，了解學(xué)習(xí)任務(wù)

2、新建站點(diǎn)

FRONTPAGE的啟動

問：與word比較，有什么不同？

（增加了視圖區(qū)，編輯區(qū)有三個窗口）

總結(jié)：

視圖區(qū)：多種視圖模式是為了方便網(wǎng)站的管理。制作網(wǎng)頁時(shí)，必須在網(wǎng)頁視圖中編輯頁面

普通窗口：鼠標(biāo)在閃動，可編輯、修改頁面，所見即所得的方式

預(yù)覽窗口：瀏覽器中出現(xiàn)的效果，與PowerPoint中的“放映幻燈片”類似。

打開導(dǎo)學(xué)軟件，根據(jù)步驟，示范建立只有一個網(wǎng)頁的站點(diǎn)，強(qiáng)調(diào)新站點(diǎn)的位置、路徑的正確輸入，站點(diǎn)的名稱。任務(wù)1：學(xué)生根據(jù)導(dǎo)學(xué)課件，在d:建立自己站點(diǎn)(站點(diǎn)名字改為自己的名字，便于記憶)

請一位學(xué)生示范如何建立站點(diǎn),教師總結(jié)

問：在文件夾列表中看到了什么？

（分析多出的文件夾列表欄，多了一個文件夾，里面有兩個子文件夾和主頁，圖片存放在images文件夾中）

3、編輯主頁與保存主頁

看效果圖，請學(xué)生分析主頁中的元素

總結(jié)：鮮明的主題，如：我的世界、開心樂園等，有分割頁面的水平線，與主題相關(guān)的圖片，對網(wǎng)站的簡單介紹根據(jù)導(dǎo)學(xué)軟件，學(xué)生完成任務(wù)2：設(shè)計(jì)主頁、保存主頁與圖片

4、總結(jié)反饋

請學(xué)生示范，講解如何插入圖片（來自剪貼畫與來自文件）、插入水平線，如何保存

總結(jié)：必須切換到“編輯”窗口下編輯

主頁的保存中存在問題：

單擊“文件”----“保存”或工具欄的“保存”按扭，彈出一個對話框，保存嵌入式文件，改變文件夾，圖片必須保存在本站點(diǎn)images文件夾中,便于站點(diǎn)的管理。

5、請學(xué)生繼續(xù)完成自己的主頁，有能力的同學(xué)完成提高篇

6、教師與學(xué)生共同評價(jià)總結(jié)

老師向?qū)W生展示自己的作品，與學(xué)生一起討論評價(jià)。

請學(xué)生總結(jié)今天的學(xué)習(xí)內(nèi)容：建立包含一個頁面的站點(diǎn)，主頁的設(shè)計(jì)與保存。

學(xué)生活動：學(xué)生回答問題、學(xué)生觀察網(wǎng)站的表現(xiàn)形式、瀏覽課件，并了解本節(jié)課的學(xué)習(xí)任務(wù)、學(xué)生觀察FRONTPAGE界面與word的不同，學(xué)生觀察教師演示不同編輯窗口的區(qū)別。學(xué)生上機(jī)操作，在指定位置建立自己站點(diǎn)、同桌互相幫助，并參考教師做的課件，利用網(wǎng)絡(luò)環(huán)境下的課件自己探索學(xué)習(xí)，滿足不同層次學(xué)生的需求、學(xué)生總結(jié)。