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

創(chuàng)建站點并制作首頁

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

1.知識與技能

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

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

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

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

2.過程與方法

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

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

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

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

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

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

習(xí)要講究方法。

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

珍愛、善待和保護動物的觀念，同時在不斷完成任務(wù)的過程中體驗成功的喜悅。

(3)學(xué)會科學(xué)運用各種元素并進行合理布局，個性化地表達思想和情感。

【課時安排】

1課時

【教學(xué)重難點】

1.教學(xué)重點

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

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

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

2.教學(xué)難點

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

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

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

【教學(xué)方法】

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

【課前準(zhǔn)備】

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

【教學(xué)過程】

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

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

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

教師：同學(xué)們可以打開桌面上xinshang文件夾下的index.html首頁文件，

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

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

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

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

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

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

板書：設(shè)置站點制作首頁

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

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

面歸納首頁元素做鋪墊。）

一、首頁常見元素（2分鐘）

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

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

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

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

板書：一、首頁常見元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

教師：非常好！感謝你的演示。請回！（提醒學(xué)生掌聲鼓勵）

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

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

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

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

確？（正確的舉手）

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

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

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

2.制作首頁（14分鐘）

PPT：首頁圖片

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

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

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

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

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

①插入圖片

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

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

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

法?，F(xiàn)在有個展示自己的機會，誰來？

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

什么插入圖片，插入什么圖片以及接下來怎么插入圖片的目的。）

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

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

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

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

課本P65中的step4）

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

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

頁面具有個性化，不會千篇一律。）

②添加文字

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

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

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

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

的文字內(nèi)容。

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

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

③插入水平線

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

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

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

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

她們參考課本P65中的step4）

【作品展示】1-2個作品

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

并給出理由；

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

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

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

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

要的。）

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

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

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

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

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

①網(wǎng)頁背景

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

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

作為背景）

②插入音樂

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

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

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

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

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

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

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

（設(shè)計意圖：給學(xué)生一個平臺，主動展示自己的最終作品。先請作

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

作品點評，指出比自己做的好的方面，同時給出完善作品的修改建議。）

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

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