網(wǎng)頁(yè)制作教案四課時(shí)

1、網(wǎng)頁(yè)欣賞學(xué)習(xí)目標(biāo) 知識(shí)目標(biāo)：了解網(wǎng)頁(yè)是由哪些內(nèi)容組成的； 能力目標(biāo)：了解網(wǎng)頁(yè)的簡(jiǎn)單結(jié)構(gòu)； 情感目標(biāo)：培養(yǎng)學(xué)生的審美觀念。 本節(jié)重點(diǎn)：網(wǎng)頁(yè)的概念 難點(diǎn) 網(wǎng)頁(yè)的結(jié)構(gòu) 學(xué)習(xí)過程一、導(dǎo)入新課 精彩的網(wǎng)絡(luò)世界吸引著無數(shù)人的眼球，對(duì)我們同學(xué)來說，它也被籠上了神秘的面紗。有些同學(xué)也想在互聯(lián)網(wǎng)上建立自己的空間，但又覺得這是非常高深的事情，其實(shí)這一切并不是那么難?；ヂ?lián)網(wǎng)上有非常多的信息，這些信息的載體就是網(wǎng)頁(yè)。那么從這節(jié)課開始，我們學(xué)習(xí)如何制作網(wǎng)頁(yè)。二、學(xué)習(xí)新知1.教學(xué)練技能 教師首先用網(wǎng)絡(luò)廣播的形式展示幾個(gè)網(wǎng)頁(yè)的圖片，以此吸引學(xué)生的注意力，并注意每個(gè)網(wǎng)頁(yè)的各自特點(diǎn)。首先，我們來欣賞幾個(gè)網(wǎng)頁(yè)，在欣賞的同時(shí)，我們

2、應(yīng)該注意以下這些網(wǎng)頁(yè)基本上都是由哪些元素組成的。 2.學(xué)習(xí)“學(xué)知識(shí)” （1）打開瀏覽器，輸入網(wǎng)址，讓學(xué)生自己瀏覽； （2）學(xué)生上機(jī)練習(xí)。 請(qǐng)同學(xué)們帶著下面幾個(gè)問題瀏覽網(wǎng)頁(yè)，以小組為單位進(jìn)行討論，教師巡視。 （1）觀察開的網(wǎng)頁(yè)，看看上面都有哪些元素。 （2）這些元素在網(wǎng)頁(yè)中是怎樣布置的？這樣的結(jié)構(gòu)有什么特點(diǎn)？ 這節(jié)課我們?yōu)g覽了一些精彩的網(wǎng)頁(yè)，也了解了網(wǎng)頁(yè)的基本組成元素和網(wǎng)頁(yè)的簡(jiǎn)單結(jié)構(gòu)，同學(xué)們是不是想制作自己的網(wǎng)頁(yè)呢？從下節(jié)課開始，我們將學(xué)習(xí)如何制作網(wǎng)頁(yè)。三、學(xué)生練習(xí)四、教師總結(jié) 首先用網(wǎng)絡(luò)廣播的形式展示幾個(gè)網(wǎng)頁(yè)的圖片，以此吸引學(xué)生的注意力，并注意每個(gè)網(wǎng)頁(yè)的各自特點(diǎn)。 網(wǎng)頁(yè)制作學(xué)習(xí)目標(biāo)1、理解網(wǎng)頁(yè)

3、與網(wǎng)站的概念2、掌握建立網(wǎng)站與建立網(wǎng)頁(yè)的方法3、掌握頁(yè)面文件與圖片的保存學(xué)習(xí)重點(diǎn)掌握建立網(wǎng)站與建立網(wǎng)頁(yè)的方法學(xué)習(xí)難點(diǎn)1建站點(diǎn)的位置2頁(yè)面文件與圖片的保存課時(shí)安排：3課時(shí)學(xué)習(xí)過程第1課時(shí)一、導(dǎo)入新課師：上節(jié)課已經(jīng)講了信息集成（也就是網(wǎng)站建設(shè)）的一般過程包括四個(gè)階段，現(xiàn)在請(qǐng)同學(xué)們回顧一下。生：學(xué)生作答。師：同學(xué)們平時(shí)都有喜歡上網(wǎng)，那大家知道網(wǎng)站與網(wǎng)頁(yè)的區(qū)別嗎？概念：網(wǎng)頁(yè)：通常我們?cè)赪WW上所能看到的每一個(gè)頁(yè)面都稱之為網(wǎng)頁(yè),它可以形象地比喻成一篇文章.網(wǎng)站：網(wǎng)站是多個(gè)網(wǎng)頁(yè)的集合,即由多個(gè)網(wǎng)頁(yè)通過彼此相連而構(gòu)成的一個(gè)整體,可以形象地比喻成一本雜志或一本書. 下面我們來學(xué)習(xí)如何用Dreamweaver這

4、個(gè)軟件制作網(wǎng)頁(yè)。二、新課講述在制作個(gè)人網(wǎng)站之前，應(yīng)先確定網(wǎng)站的主題。2008奧運(yùn)會(huì)即將來臨，這是中國(guó)政治，經(jīng)濟(jì)等綜合國(guó)力提升到另一臺(tái)階的盛事，我們中學(xué)生也得供獻(xiàn)一分錦力本節(jié)課的主題是圍繞“心系奧運(yùn)”，資料（包括文字、圖片、動(dòng)畫）等我已經(jīng)為大家收集好，內(nèi)容分類，網(wǎng)站的結(jié)構(gòu)也規(guī)劃好了，利用Dreamweaver這個(gè)工具來完成“心系奧運(yùn)”這個(gè)網(wǎng)站的建設(shè)。（一）啟動(dòng)Dreamweaver，認(rèn)識(shí)其工作界面“開始”-à“程序”-à“Macromedia Dreamweaver 8”Dreamweaver工作界面包括：菜單欄 插入欄 編輯窗口 屬性面板 浮動(dòng)面板組1菜單欄（包括10個(gè)菜單

5、項(xiàng)）符號(hào)所表示的含意黑色命令：表示該命令當(dāng)前是可用的灰色命令：表示該命令當(dāng)前是不可用的，需要滿足一定的條件后才能使用。帶有復(fù)選標(biāo)記的命令：表示該命令是一種可選擇命令，若前面出現(xiàn)標(biāo)記，表示該命令正在使用；若沒有標(biāo)記時(shí)，表示該命令沒有被使用。帶有三角形的命令：表示在該命令下還有下一級(jí)子菜單命令。帶有省略號(hào)的的命令：表示選擇命令后會(huì)彈出一個(gè)相關(guān)的對(duì)話框。帶有快捷鍵號(hào)的命令：表示該命令有一個(gè)快捷鍵，當(dāng)按下該快捷鍵時(shí)，即可執(zhí)行該命令。2插入欄單擊常用按鈕，在彈出的下拉菜單中可以選擇要插入的網(wǎng)頁(yè)元素的類型3編輯窗口包括：項(xiàng)目選擇標(biāo)簽，文檔工具欄，水平標(biāo)尺，垂直標(biāo)尺，編輯區(qū)域，狀態(tài)欄，垂直擴(kuò)展按鈕和水平擴(kuò)展

6、按鈕。文檔工具欄：代碼按鈕，拆分按鈕，設(shè)計(jì)按鈕，檢查錯(cuò)誤按鈕，預(yù)覽調(diào)試網(wǎng)頁(yè)按鈕，刷新設(shè)計(jì)視圖按鈕，用于隱藏文件內(nèi)容，標(biāo)尺，網(wǎng)格和輔助線按鈕。4屬性面板用于查看各更改當(dāng)前選擇對(duì)象的各種屬性。（二）新建站點(diǎn)為了有效地發(fā)揮Dreamweaver對(duì)網(wǎng)頁(yè)的組織管理功能，通常在制作具體的網(wǎng)頁(yè)之前，應(yīng)先創(chuàng)建一個(gè)新站點(diǎn)，然后根據(jù)網(wǎng)站的具體結(jié)構(gòu)制作網(wǎng)頁(yè)。例1-1 在D盤中建立一個(gè)名為“xinxiaoyun”的新站點(diǎn)。操作步驟： 單擊“開始”按鈕，將指針依次指向“程序（P）”“Macromedia Dreamweaver 8”，并單擊，即可啟動(dòng)Dreamweaver 8。 入Dreamweaver 8工作界面后，

7、單擊“站點(diǎn)”/“彈出站點(diǎn)管理”命令，彈出“管理站點(diǎn)”對(duì)話框。 單擊“新建（N）”按鈕，在彈出的下拉菜單中選擇“站點(diǎn)（W）”命令。 彈出站點(diǎn)定義對(duì)話框，在“你打算為你的站點(diǎn)起什么名字”的文本框中輸入站點(diǎn)的名稱，如“心系奧運(yùn)”。 單擊“下一步”按鈕，在彈出的對(duì)話框中選取中“否，我不想使用服務(wù)器技術(shù)”。 單擊“下一步”在彈出的對(duì)話框中選取擇開發(fā)過程中如何使用文件，這里選中“編輯我的計(jì)算機(jī)上的副本，完成后再上傳到服務(wù)器”，在“您將把文件存儲(chǔ)在計(jì)算機(jī)上的什么位置”文本框中輸入本地站點(diǎn)的位置“D：”。 單擊“下一步”，在彈出的對(duì)話框中的“您 如何連接遠(yuǎn)程服務(wù)器”下拉表框中先擇“無”。 單擊“下一步”，在彈

8、出的對(duì)話框中單擊“完成”。 彈出“管理站點(diǎn)”對(duì)話框，在其左側(cè)列表框中將顯示名為“xinxiaoyun”的站點(diǎn)，單擊“完成”，完成本地站點(diǎn)的建設(shè)。Dreamweaver將自動(dòng)在指定位置建立一個(gè)站點(diǎn)，首先建立 “D： xinxiaoyun”文件夾，然后在此文件夾下，再建立一組文件夾，其中可見文件夾包括：“_private”和“Images”（存放圖形文件），其余文件夾被隱藏起來。第2課時(shí)（三）新建網(wǎng)頁(yè)例1-2 在“xinxiaoyun”網(wǎng)站中建立第一個(gè)網(wǎng)頁(yè)取名為“index.html”，設(shè)置背景色為：藍(lán)色，字體為：黑色，并作相應(yīng)文件的插入，完成后保存。（兩種方法）1 新建網(wǎng)頁(yè)操作步驟：方法一 選擇

9、“文件”/“新建”命令，彈出“新建文檔”對(duì)話框， 在“類別”列表框中選擇需要?jiǎng)?chuàng)建的網(wǎng)頁(yè)類別，如選擇“基本頁(yè)”選項(xiàng)，此時(shí)右側(cè)的列表中將顯示基示頁(yè)網(wǎng)頁(yè)的類型。 在“基本頁(yè)”列表框中選擇所需創(chuàng)建軍的網(wǎng)頁(yè)類型后，單擊“創(chuàng)建”按鈕即可新建軍指定類型的空白網(wǎng)頁(yè)。 再把網(wǎng)頁(yè)另存為相應(yīng)的站點(diǎn)下。2. 網(wǎng)頁(yè)的保存單擊“文件（F）”菜單中的“保存文件（S）”命令，彈出“另存為”對(duì)話框。在“文件名（N）”列表框中輸入“index”后，單擊“保存（S）”按鈕。如果要保存的頁(yè)面含有圖片、動(dòng)畫、聲音等元素，Dreamweaver還會(huì)繼續(xù)詢問是否保存這些嵌入的文件。此時(shí)最好將這些文件保存起來，以保持它們?cè)诰W(wǎng)頁(yè)中的位置，否則

10、，當(dāng)網(wǎng)站發(fā)生遷移時(shí)，可能因找不到這些圖片、動(dòng)畫等文件而無法顯示。另外，最好將它們保存到Images文件夾中，使網(wǎng)站保持清潔，便于管理和維護(hù)。3 設(shè)置背景設(shè)置網(wǎng)頁(yè)屬性：新建一個(gè)網(wǎng)頁(yè)之后，一般還需要設(shè)置網(wǎng)頁(yè)的屬性，選擇“修改”/“頁(yè)面屬性”命令彈出“頁(yè)面屬性”對(duì)話框，在“分類”列表框中有“外觀”“鏈接”“標(biāo)題”“標(biāo)題/編碼”和“跟蹤圖象”5個(gè)選項(xiàng)。對(duì)頁(yè)面進(jìn)行相應(yīng)的處理。大多數(shù)網(wǎng)頁(yè)都應(yīng)用背景圖案來為網(wǎng)頁(yè)增色，這些背景可以是一幅大圖片，也可以是若干個(gè)小圖片的重復(fù)使用（即“平鋪”）。選擇背景圖案時(shí)，要注意與文本相協(xié)調(diào)，而且背景的應(yīng)用不要妨礙文本的閱讀。另外，背景圖案越小，網(wǎng)頁(yè)的下載速度就越快。設(shè)置背景的

11、操作步驟： 單擊“修改”命令，出現(xiàn)“頁(yè)面屬性”對(duì)話框，且“背景”標(biāo)簽已被打開。 單擊“瀏覽（B）”按鈕，在“選擇文件”對(duì)話框中瀏覽文件夾內(nèi)容，從中搜索到所需背景圖案后，單擊“確定”按鈕，關(guān)閉“選擇文件”對(duì)話框，再單擊“確定”按鈕，關(guān)閉“頁(yè)面屬性”對(duì)話框，背景圖案即可插入頁(yè)面。頁(yè)面制作完成，可以單擊“預(yù)覽”標(biāo)簽，觀察一下效果。方法二：在站的文件夾下直接創(chuàng)建，再做相應(yīng)的設(shè)置。4 利用表格布局頁(yè)面（布局表格和普通表格）操作步驟：“插入”/“表格”或者在常用插入欄中的“插入表格”按鈕在表格對(duì)話框中設(shè)置插入表格的行數(shù)，列數(shù)，表格寬度，邊框粗細(xì)，單元格邊距等，單擊“確定”按鈕完成表格的創(chuàng)建（如果要邊框顯示

12、就設(shè)置邊框的值，如果不要，就將其設(shè)置為0）5 文字編輯文字編輯是制作網(wǎng)頁(yè)最基本的操作。在網(wǎng)頁(yè)編輯窗口中，可以像在Word中一樣直接輸入文字，進(jìn)行編輯和排版，操作步驟： 選定標(biāo)題“心系奧運(yùn)”，進(jìn)行如下設(shè)置：字體為黑體，字號(hào)為7號(hào)字，顏色為綠色，居中排列。 選定正文，并設(shè)置如下：采用默認(rèn)的字體和字號(hào)，顏色為黑色，居中排列。6. 插入圖片操作步驟：將插入點(diǎn)移到要插入圖片的位置，“插入（I）”菜單中的“圖像（I）”命令，打開“圖像源文件”對(duì)話框，如果要插入的圖片已經(jīng)保存在當(dāng)前的網(wǎng)站中，可以直接在圖的列表框中選取，然后單擊“確定”按鈕。否則，單擊“瀏覽”按鈕 ，從“選擇文件”對(duì)話框中選擇所需圖片，單擊“

13、確定”按鈕，將圖片插入到網(wǎng)頁(yè)中。 拖動(dòng)圖片到頁(yè)面左側(cè)適當(dāng)位置。第3課時(shí)7插入動(dòng)畫在網(wǎng)頁(yè)制作中，經(jīng)常使用一些小動(dòng)畫，使頁(yè)面生動(dòng)活潑，這些小動(dòng)畫文件用專門的工具制作，也以GIF作為文件的擴(kuò)展名。插入動(dòng)畫的類型有多種，介紹三種：插入FLASH動(dòng)畫，F(xiàn)LASH按鈕和FLASH文本插入FLASH動(dòng)畫操作步驟：依次單擊“插入（I）” 菜單中的“媒體”/“FLASH”命令，打開“選擇文件”對(duì)話框，從“選擇文件”對(duì)話框中選擇所需動(dòng)畫“xx.swf”，單擊“確定”按鈕，插入動(dòng)畫。 拖動(dòng)動(dòng)畫到標(biāo)題下方適當(dāng)位置。 選擇插入網(wǎng)頁(yè)中的FLASH動(dòng)畫，此時(shí)單擊“屬性”面板中的“播放”按鈕，就可以預(yù)瀏動(dòng)畫。插入FLASH按

14、鈕操作步驟： 依次單擊“插入（I）” 菜單中的“媒體”/“FLASH按鈕”命令， 在“樣式”列表框中選擇按鈕的樣式，其效果顯示在“范例“欄中， 設(shè)置按鈕上的顯示的文字 設(shè)置鏈接 設(shè)置打開方式為-blank “另存為“文本框中輸入FLASH按鈕存放的路徑 按“確定”按鈕完成按鈕的插入。 在屬性面板中可以設(shè)置相關(guān)的屬性，如寬，高，文件名和對(duì)起方式等。插入FLASH按鈕操作步驟： 依次單擊“插入（I）” 菜單中的“媒體”/“FLASH文本”命令， 設(shè)置文字相關(guān)屬性 設(shè)置鏈接 “另存為“文本框中輸入FLASH文本名。 按“確定”按鈕完成按鈕的插入。 在屬性面板中設(shè)置相關(guān)的屬性后， 單擊“確定”，這樣當(dāng)將鼠標(biāo)移到文本時(shí)，文本顏色就會(huì)發(fā)生變化8插入背景音樂操作步驟：a.“插入”/“標(biāo)簽”命令彈出標(biāo)簽選擇器的對(duì)話框b. 在左側(cè)樹型列表框中選擇“標(biāo)簽選擇器”/“HTML標(biāo)簽”/“頁(yè)元素”命令，然后在右側(cè)的列表框中選擇bgsound選項(xiàng)，c. 單擊“插入（I）”按鈕，彈出“標(biāo)簽選擇器-bgsound”d.單擊“源”文本框后的“瀏覽”按鈕，選擇要播放的音樂文件，e. 在“循環(huán)”下拉菜表框中輸入要播放的次數(shù)，也可以選擇“無限”一直播放。f. 單擊“確定”完成設(shè)置，關(guān)閉所有的對(duì)話窗口。8.設(shè)置超鏈接（文本，圖形）選擇要設(shè)置超鏈接的文本在“屬性”