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

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

【教學目標】

1.知識與技能

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

(2)了解首頁中包含的常見元素，自己設計首頁結構圖。

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

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

2.過程與方法

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

(2)通過自己設計首頁結構圖，熟悉首頁中的常見元素。

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

不斷嘗試中理解和學習基本知識。

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

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

習要講究方法。

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

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

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

【課時安排】

1課時

【教學重難點】

1.教學重點

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

②了解首頁常見構成元素，設計出自己首頁結構圖。

③學會插入圖片、文本、聲音、水平線以及設置網頁背景的方法。

2.教學難點

①站點的作用以及設置站點的方法。

②了解首頁常見構成元素，設計出自己首頁結構圖.

③圖片、文本、聲音、水平線以及網頁背景的設置方法。

【教學方法】

自主學習、合作探究、講授法。

【課前準備】

蘇亞星多媒體廣播軟件、教學課件、學件、“xinshang”網站、素材資源、微視頻。

【教學過程】

創(chuàng)設情境，導入新課（3分鐘）

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

到學生機的桌面上，為上課做好準備。

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

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

網站欣賞：學生瀏覽網頁，觀察首頁，思考首頁組成元素。

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

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

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

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

板書：設置站點制作首頁

（設計意圖：通過讓學生瀏覽名為“xinshang”的網站并觀察首頁，主要是

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

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

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

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

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

學生：觀察圖片，思考、回答并小結首頁元素。（引導學生歸納、總結常有

元素，可以適當提示）

板書：一、首頁常見元素

1.logo圖標2.橫幅圖片3.導航欄4.水平線

5.文字內容6.內容圖片7.版權信息

二、設計首頁結構圖（3分鐘）

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

中，并標出各元素的位置，設計出首頁結構圖，給出示例圖。

【任務一】自主設計首頁結構圖

任務要求：1.你設計的首頁包含哪些元素？

2.在學案任務一的方框中畫出首頁結構圖。

學生練習：設計首頁機構圖。

上臺展示：讓學生到黑板上畫出首頁的結構圖，并作簡單介紹。

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

導學生設計出首頁結構圖。）

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

1.設置站點（3分鐘）

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

在制作網站之前需要為網站設置一個站點。下面哪位同學上臺給大家演示如何將

桌面上的baohu文件夾設置成網站的站點？

學生演示：1人（演示設置站點）（提醒：演示的學生一邊操作一邊講

解步驟，加深學生的理解和記憶。）

教師：非常好！感謝你的演示。請回?。ㄌ嵝褜W生掌聲鼓勵）

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

學生練習：將指定文件夾設置成站點。

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

教師：請同學們對照正確設置站點的效果，檢驗自己網頁站點的設置是否正

確？（正確的舉手）

學生：檢測站點設置是否正確，正確的舉手。

（設計意圖：要讓學生理解為什么在制作網頁之前先設置站點即站點的功能

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

2.制作首頁（14分鐘）

PPT：首頁圖片

我們開始往首頁中插入各元素。請同學們觀察，首頁中像logo、橫幅、導

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

學生：圖片的形式

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

【任務二】添加元素制作首頁

①插入圖片

任務要求：根據(jù)首頁結構圖，插入相應的圖片。

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

教師引導：那網頁中如何插入圖片呢？同學們可以回想ppt中插入圖片的方

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

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

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

學生演示：插入圖片的操作

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

教師：下面請同學們根據(jù)自己設計首頁結構，插入首頁中的圖片。

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

課本P65中的step4）

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

識操作遷移到網頁中。每個人根據(jù)自己設計的首頁結構插入所需要的圖片。確保

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

②添加文字

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

文字位置：在“桌面一baohu—網頁文字”文檔中

教師引導：可以回顧wps中添加文字的知識。

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

的文字內容。

（設計意圖：首頁應該是圖文并茂的，所以在插入圖片以后，讓學生自主學

習學件上的知識，為首頁添加適當?shù)奈淖謨热?。?/p>

③插入水平線

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

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

（設計意圖：插入水平線的知識點比較簡單，可以讓學生自主學習。加之，

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

她們參考課本P65中的step4）

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

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

并給出理由；

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

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

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

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

要的。）

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

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

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

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

【任務五】合作探究美化首頁

①網頁背景

任務要求：小組合作，一起探究設置網頁背景的方法（顏色或圖片）。

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

作為背景）

②插入音樂

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

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

學生：以小組為單位，合作探究如何設置背景音樂。

（以小組為單位，讓學生合作探索設置網頁背景、插入音樂的方法。引導學

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

告知學生在“插入一媒體一插件”中設置。）

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

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

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

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

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

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