蘇科版（2018）八年級(jí)全冊(cè)信息技術(shù)教案：創(chuàng)建站點(diǎn)并制作首頁(yè)

創(chuàng)建站點(diǎn)并制作首頁(yè)

【教學(xué)目標(biāo)】

1.知識(shí)與技能

(1)理解站點(diǎn)的功能與作用，能熟練地將指定文件夾設(shè)置成站點(diǎn).

(2)了解首頁(yè)中包含的常見(jiàn)元素，自己設(shè)計(jì)首頁(yè)結(jié)構(gòu)圖。

(3)學(xué)會(huì)插入圖片、音頻、文字以及設(shè)置網(wǎng)頁(yè)背景的方法，并根據(jù)需要修改屬性。

(4)初步完成首頁(yè)的制作并保存、預(yù)覽網(wǎng)頁(yè)效果。

2.過(guò)程與方法

(1)通過(guò)親歷在Dreamweaver中設(shè)置站點(diǎn)，加深站點(diǎn)用途的理解。

(2)通過(guò)自己設(shè)計(jì)首頁(yè)結(jié)構(gòu)圖，熟悉首頁(yè)中的常見(jiàn)元素。

(3)制作首頁(yè)的過(guò)程中，通過(guò)對(duì)插入圖片、文字、音頻、水平線及其屬性的操作，在

不斷嘗試中理解和學(xué)習(xí)基本知識(shí)。

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

(1)引導(dǎo)學(xué)生在學(xué)習(xí)新軟件時(shí)與已有知識(shí)經(jīng)驗(yàn)相類比，養(yǎng)成勤于總結(jié)的習(xí)慣，體會(huì)學(xué)

習(xí)要講究方法。

(2)通過(guò)制作主題網(wǎng)站，在創(chuàng)建站點(diǎn)和制作首頁(yè)的過(guò)程中，樹(shù)立人與動(dòng)物和諧相處，

珍愛(ài)、善待和保護(hù)動(dòng)物的觀念，同時(shí)在不斷完成任務(wù)的過(guò)程中體驗(yàn)成功的喜悅。

(3)學(xué)會(huì)科學(xué)運(yùn)用各種元素并進(jìn)行合理布局，個(gè)性化地表達(dá)思想和情感。

【課時(shí)安排】

1課時(shí)

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

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

①站點(diǎn)的功能與作用，熟練地將指定文件夾設(shè)置成站點(diǎn)。

②了解首頁(yè)常見(jiàn)構(gòu)成元素，設(shè)計(jì)出自己首頁(yè)結(jié)構(gòu)圖。

③學(xué)會(huì)插入圖片、文本、聲音、水平線以及設(shè)置網(wǎng)頁(yè)背景的方法。

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

①站點(diǎn)的作用以及設(shè)置站點(diǎn)的方法。

②了解首頁(yè)常見(jiàn)構(gòu)成元素，設(shè)計(jì)出自己首頁(yè)結(jié)構(gòu)圖.

③圖片、文本、聲音、水平線以及網(wǎng)頁(yè)背景的設(shè)置方法。

【教學(xué)方法】

自主學(xué)習(xí)、合作探究、講授法。

【課前準(zhǔn)備】

蘇亞星多媒體廣播軟件、教學(xué)課件、學(xué)件、“xinshang”網(wǎng)站、素材資源、微視頻。

【教學(xué)過(guò)程】

創(chuàng)設(shè)情境，導(dǎo)入新課（3分鐘）

課前準(zhǔn)備：將名為“xinshang”的網(wǎng)站和名為“baohu”的站點(diǎn)文件夾發(fā)送

到學(xué)生機(jī)的桌面上，為上課做好準(zhǔn)備。

教師：同學(xué)們可以打開(kāi)桌面上x(chóng)inshang文件夾下的index.html首頁(yè)文件，

給同學(xué)們2分鐘瀏覽此網(wǎng)站并觀察首頁(yè)，同時(shí)思考首頁(yè)中有哪些元素？

網(wǎng)站欣賞：學(xué)生瀏覽網(wǎng)頁(yè)，觀察首頁(yè)，思考首頁(yè)組成元素。

教師：首頁(yè)中包含哪些元素？這些元素又是如何插入到首頁(yè)中的呢？本節(jié)課

我們來(lái)解決這些問(wèn)題。通過(guò)上節(jié)課的學(xué)習(xí)我們知道，要制作網(wǎng)站首先需要為

這個(gè)網(wǎng)站設(shè)置站點(diǎn)。所以我們這節(jié)課的課題是：設(shè)置站點(diǎn)制作首頁(yè)。（引出主題）

PPT："設(shè)置站點(diǎn)制作首頁(yè)”主題文字

板書(shū)：設(shè)置站點(diǎn)制作首頁(yè)

（設(shè)計(jì)意圖：通過(guò)讓學(xué)生瀏覽名為“xinshang”的網(wǎng)站并觀察首頁(yè)，主要是

引出本課主題，讓學(xué)生盡快進(jìn)入學(xué)習(xí)狀態(tài)，明確本節(jié)課的學(xué)習(xí)內(nèi)容，同時(shí)也為后

面歸納首頁(yè)元素做鋪墊。）

一、首頁(yè)常見(jiàn)元素（2分鐘）

教師：首頁(yè)中都有哪些元素呢？下面我們一起看看首頁(yè)圖片。

PPT：呈現(xiàn)網(wǎng)站首頁(yè)圖片

學(xué)生：觀察圖片，思考、回答并小結(jié)首頁(yè)元素。（引導(dǎo)學(xué)生歸納、總結(jié)常有

元素，可以適當(dāng)提示）

板書(shū)：一、首頁(yè)常見(jiàn)元素

1.logo圖標(biāo)2.橫幅圖片3.導(dǎo)航欄4.水平線

5.文字內(nèi)容6.內(nèi)容圖片7.版權(quán)信息

二、設(shè)計(jì)首頁(yè)結(jié)構(gòu)圖（3分鐘）

教師：你們想不想自己設(shè)計(jì)首頁(yè)呢？從這些元素中挑選一些放在你的首頁(yè)

中，并標(biāo)出各元素的位置，設(shè)計(jì)出首頁(yè)結(jié)構(gòu)圖，給出示例圖。

【任務(wù)一】自主設(shè)計(jì)首頁(yè)結(jié)構(gòu)圖

任務(wù)要求：1.你設(shè)計(jì)的首頁(yè)包含哪些元素？

2.在學(xué)案任務(wù)一的方框中畫出首頁(yè)結(jié)構(gòu)圖。

學(xué)生練習(xí)：設(shè)計(jì)首頁(yè)機(jī)構(gòu)圖。

上臺(tái)展示：讓學(xué)生到黑板上畫出首頁(yè)的結(jié)構(gòu)圖，并作簡(jiǎn)單介紹。

（設(shè)計(jì)意圖：通過(guò)呈現(xiàn)網(wǎng)站首頁(yè)圖片，讓學(xué)生了解首頁(yè)中的常見(jiàn)元素，并引

導(dǎo)學(xué)生設(shè)計(jì)出首頁(yè)結(jié)構(gòu)圖。）

三、插入元素，制作首頁(yè)（30分鐘）

1.設(shè)置站點(diǎn)（3分鐘）

教師：首頁(yè)結(jié)構(gòu)圖設(shè)計(jì)好后，我們開(kāi)始制作首頁(yè)。上節(jié)課的學(xué)習(xí)我們知道：

在制作網(wǎng)站之前需要為網(wǎng)站設(shè)置一個(gè)站點(diǎn)。下面哪位同學(xué)上臺(tái)給大家演示如何將

桌面上的baohu文件夾設(shè)置成網(wǎng)站的站點(diǎn)？

學(xué)生演示：1人（演示設(shè)置站點(diǎn)）（提醒：演示的學(xué)生一邊操作一邊講

解步驟，加深學(xué)生的理解和記憶。）

教師：非常好！感謝你的演示。請(qǐng)回?。ㄌ嵝褜W(xué)生掌聲鼓勵(lì)）

教師：下面請(qǐng)同學(xué)們將桌面上名為“baohu”的文件夾設(shè)置成站點(diǎn)。

學(xué)生練習(xí)：將指定文件夾設(shè)置成站點(diǎn)。

Dreamweaver：呈現(xiàn)正確設(shè)置站點(diǎn)的效果。

教師：請(qǐng)同學(xué)們對(duì)照正確設(shè)置站點(diǎn)的效果，檢驗(yàn)自己網(wǎng)頁(yè)站點(diǎn)的設(shè)置是否正

確？（正確的舉手）

學(xué)生：檢測(cè)站點(diǎn)設(shè)置是否正確，正確的舉手。

（設(shè)計(jì)意圖：要讓學(xué)生理解為什么在制作網(wǎng)頁(yè)之前先設(shè)置站點(diǎn)即站點(diǎn)的功能

與意義，通過(guò)學(xué)生演示+操作的方式讓學(xué)生熟練站點(diǎn)的設(shè)置。）

2.制作首頁(yè)（14分鐘）

PPT：首頁(yè)圖片

我們開(kāi)始往首頁(yè)中插入各元素。請(qǐng)同學(xué)們觀察，首頁(yè)中像logo、橫幅、導(dǎo)

航都是以什么形式呈現(xiàn)在首頁(yè)中的？

學(xué)生：圖片的形式

教師：也就是說(shuō)要想在首頁(yè)中添加以上元素，我們需要插入對(duì)應(yīng)元素的圖片。

【任務(wù)二】添加元素制作首頁(yè)

①插入圖片

任務(wù)要求：根據(jù)首頁(yè)結(jié)構(gòu)圖，插入相應(yīng)的圖片。

圖片位置：在“桌面一baohu-images”文件夾下

教師引導(dǎo)：那網(wǎng)頁(yè)中如何插入圖片呢？同學(xué)們可以回想ppt中插入圖片的方

法?，F(xiàn)在有個(gè)展示自己的機(jī)會(huì)，誰(shuí)來(lái)？

（設(shè)計(jì)意圖：通過(guò)讓學(xué)生觀察首頁(yè)中各元素的呈現(xiàn)方式，達(dá)到讓他們理解為

什么插入圖片，插入什么圖片以及接下來(lái)怎么插入圖片的目的。）

學(xué)生演示：插入圖片的操作

學(xué)生：認(rèn)真觀看插入圖片的操作，并記住主要步驟。

教師：下面請(qǐng)同學(xué)們根據(jù)自己設(shè)計(jì)首頁(yè)結(jié)構(gòu)，插入首頁(yè)中的圖片。

學(xué)生：根據(jù)結(jié)構(gòu)圖，插入合適的圖片。（如果學(xué)生遇到困難，提醒她們參考

課本P65中的step4）

（設(shè)計(jì)意圖：讓學(xué)生上臺(tái)演示插入圖片的操作，將WPS文字中插入圖片的知

識(shí)操作遷移到網(wǎng)頁(yè)中。每個(gè)人根據(jù)自己設(shè)計(jì)的首頁(yè)結(jié)構(gòu)插入所需要的圖片。確保

頁(yè)面具有個(gè)性化，不會(huì)千篇一律。）

②添加文字

任務(wù)要求：根據(jù)需要，自主學(xué)習(xí)學(xué)案中“添加文字”，為首頁(yè)添加文字。

文字位置：在“桌面一baohu—網(wǎng)頁(yè)文字”文檔中

教師引導(dǎo)：可以回顧wps中添加文字的知識(shí)。

學(xué)生：自主學(xué)習(xí)學(xué)件中“添加文字”部分,根據(jù)自己設(shè)計(jì)的首頁(yè)，添加合適

的文字內(nèi)容。

（設(shè)計(jì)意圖：首頁(yè)應(yīng)該是圖文并茂的，所以在插入圖片以后，讓學(xué)生自主學(xué)

習(xí)學(xué)件上的知識(shí)，為首頁(yè)添加適當(dāng)?shù)奈淖謨?nèi)容。）

③插入水平線

任務(wù)要求：根據(jù)需要，自主學(xué)習(xí)“插入水平線”知識(shí)，為首頁(yè)添加水平線。

學(xué)生：自主學(xué)習(xí)學(xué)件中“插入水平線”部分，在合適位置添加一條水平線。

（設(shè)計(jì)意圖：插入水平線的知識(shí)點(diǎn)比較簡(jiǎn)單，可以讓學(xué)生自主學(xué)習(xí)。加之，

首頁(yè)中很少插有水平線，所以此任務(wù)設(shè)置為可選任務(wù)。如果學(xué)生遇到困難，提醒

她們參考課本P65中的step4）

【作品展示】1-2個(gè)作品

展示1個(gè)元素齊全、布局合理的“成功”作品。讓其他學(xué)生對(duì)作品進(jìn)行打分

并給出理由；

展示1個(gè)“反面”作品，不僅要給作品打分，更要給出合理的修改建議。學(xué)

生再根據(jù)修改建議繼續(xù)完善作品。

（設(shè)計(jì)意圖：首頁(yè)中常見(jiàn)的功能元素都已添加，通過(guò)“正反”作品的展示、

對(duì)比，讓學(xué)生明確首頁(yè)中不僅僅要有功能元素，各元素之間的合理布局才是最重

要的。）

3.合作探究，美化首頁(yè)（13分鐘）

教師：添加首頁(yè)元素后，我們可以根據(jù)自己的喜好設(shè)置個(gè)性化的網(wǎng)頁(yè)，你想

為你的首頁(yè)設(shè)置一個(gè)背景效果嗎？趕緊行動(dòng)起來(lái)吧！坐在一起是一個(gè)小組，挑選

小組中最好的作品合作探究完成本任務(wù)，最終展示小組作品。

【任務(wù)五】合作探究美化首頁(yè)

①網(wǎng)頁(yè)背景

任務(wù)要求：小組合作，一起探究設(shè)置網(wǎng)頁(yè)背景的方法（顏色或圖片）。

圖片位置：在“桌面一baohu—images”文件夾中“BG”圖片。（選擇圖片

作為背景）

②插入音樂(lè)

任務(wù)要求：小組合作，探究插入背景音樂(lè)的方法。

音樂(lè)位置：在“桌面-baohu-天鵝湖序曲”mp3文件。

學(xué)生：以小組為單位，合作探究如何設(shè)置背景音樂(lè)。

（以小組為單位，讓學(xué)生合作探索設(shè)置網(wǎng)頁(yè)背景、插入音樂(lè)的方法。引導(dǎo)學(xué)

生將ppt中插入音樂(lè)的方法遷移到網(wǎng)頁(yè)中；如果學(xué)生仍然探究不出，教師則直接

告知學(xué)生在“插入一媒體一插件”中設(shè)置。）

【作品展示】1-2人作品（根據(jù)時(shí)間）

（設(shè)計(jì)意圖：給學(xué)生一個(gè)平臺(tái)，主動(dòng)展示自己的最終作品。先請(qǐng)作

者簡(jiǎn)單介紹自己的首頁(yè)，總結(jié)在制作過(guò)程中遇到的問(wèn)題；然后其他學(xué)生再對(duì)他的

作品點(diǎn)評(píng)，指出比自己做的好的方面，同時(shí)給出完善作品的修改建議。）

教師：在制作過(guò)程中，其他學(xué)生可能也會(huì)遇到各種問(wèn)題，例如：圖片無(wú)法任

意移動(dòng)、豎著的導(dǎo)航欄無(wú)法實(shí)現(xiàn)，文