第一篇：網(wǎng)頁制作教案四課時(shí)

網(wǎng)頁欣賞

學(xué)習(xí)目標(biāo)

知識(shí)目標(biāo)：了解網(wǎng)頁是由哪些內(nèi)容組成的； 能力目標(biāo)：了解網(wǎng)頁的簡單結(jié)構(gòu)； 情感目標(biāo)：培養(yǎng)學(xué)生的審美觀念。本節(jié)重點(diǎn)：網(wǎng)頁的概念 難點(diǎn) 網(wǎng)頁的結(jié)構(gòu) 學(xué)習(xí)過程

一、導(dǎo)入新課

精彩的網(wǎng)絡(luò)世界吸引著無數(shù)人的眼球，對我們同學(xué)來說，它也被籠上了神秘的面紗。有些同學(xué)也想在互聯(lián)網(wǎng)上建立自己的空間，但又覺得這是非常高深的事情，其實(shí)這一切并不是那么難?；ヂ?lián)網(wǎng)上有非常多的信息，這些信息的載體就是網(wǎng)頁。那么從這節(jié)課開始，我們學(xué)習(xí)如何制作網(wǎng)頁。

二、學(xué)習(xí)新知 1.教學(xué)練技能

教師首先用網(wǎng)絡(luò)廣播的形式展示幾個(gè)網(wǎng)頁的圖片，以此吸引學(xué)生的注意力，并注意每個(gè)網(wǎng)頁的各自特點(diǎn)。

首先，我們來欣賞幾個(gè)網(wǎng)頁，在欣賞的同時(shí)，我們應(yīng)該注意以下這些網(wǎng)頁基本上都是由哪些元素組成的。

2.學(xué)習(xí)“學(xué)知識(shí)”

（1）打開瀏覽器，輸入網(wǎng)址，讓學(xué)生自己瀏覽；（2）學(xué)生上機(jī)練習(xí)。請同學(xué)們帶著下面幾個(gè)問題瀏覽網(wǎng)頁，以小組為單位進(jìn)行討論，教師巡視。

（1）觀察開的網(wǎng)頁，看看上面都有哪些元素。（2）這些元素在網(wǎng)頁中是怎樣布置的？這樣的結(jié)構(gòu)有什么特點(diǎn)？ 這節(jié)課我們?yōu)g覽了一些精彩的網(wǎng)頁，也了解了網(wǎng)頁的基本組成元素和網(wǎng)頁的簡單結(jié)構(gòu)，同學(xué)們是不是想制作自己的網(wǎng)頁呢？從下節(jié)課開始，我們將學(xué)習(xí)如何制作網(wǎng)頁。

三、學(xué)生練習(xí)

四、教師總結(jié)

首先用網(wǎng)絡(luò)廣播的形式展示幾個(gè)網(wǎng)頁的圖片，以此吸引學(xué)生的注意力，并注意每個(gè)網(wǎng)頁的各自特點(diǎn)。

網(wǎng)頁制作

學(xué)習(xí)目標(biāo)

1、理解網(wǎng)頁與網(wǎng)站的概念

2、掌握建立網(wǎng)站與建立網(wǎng)頁的方法

3、掌握頁面文件與圖片的保存 學(xué)習(xí)重點(diǎn)

掌握建立網(wǎng)站與建立網(wǎng)頁的方法 學(xué)習(xí)難點(diǎn)

1．建站點(diǎn)的位置 2．頁面文件與圖片的保存

課時(shí)安排：3課時(shí) 學(xué)習(xí)過程

第1課時(shí)

一、導(dǎo)入新課

師：上節(jié)課已經(jīng)講了信息集成（也就是網(wǎng)站建設(shè)）的一般過程包括四個(gè)階段，現(xiàn)在請同學(xué)們回顧一下。

生：學(xué)生作答。

師：同學(xué)們平時(shí)都有喜歡上網(wǎng)，那大家知道網(wǎng)站與網(wǎng)頁的區(qū)別嗎？

概念：

網(wǎng)頁：通常我們在WWW上所能看到的每一個(gè)頁面都稱之為網(wǎng)頁,它可以形象地比喻成一篇文章.網(wǎng)站：網(wǎng)站是多個(gè)網(wǎng)頁的集合,即由多個(gè)網(wǎng)頁通過彼此相連而構(gòu)成的一個(gè)整體,可以形象地比喻成一本雜志或一本書.下面我們來學(xué)習(xí)如何用Dreamweaver這個(gè)軟件制作網(wǎng)頁。

二、新課講述

在制作個(gè)人網(wǎng)站之前，應(yīng)先確定網(wǎng)站的主題。2008奧運(yùn)會(huì)即將來臨，這是中國政治，經(jīng)濟(jì)等綜合國力提升到另一臺(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è)菜單項(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)的對話框。

帶有快捷鍵號(hào)的命令：表示該命令有一個(gè)快捷鍵，當(dāng)按下該快捷鍵時(shí)，即可執(zhí)行該命令。2．插入欄

單擊常用▼按鈕，在彈出的下拉菜單中可以選擇要插入的網(wǎng)頁元素的類型

3．編輯窗口 包括：項(xiàng)目選擇標(biāo)簽，文檔工具欄，水平標(biāo)尺，垂直標(biāo)尺，編輯區(qū)域，狀態(tài)欄，垂直擴(kuò)展按鈕和水平擴(kuò)展按鈕。

文檔工具欄：代碼按鈕，拆分按鈕，設(shè)計(jì)按鈕，檢查錯(cuò)誤按鈕，預(yù)覽調(diào)試網(wǎng)頁按鈕，刷新設(shè)計(jì)視圖按鈕，用于隱藏文件內(nèi)容，標(biāo)尺，網(wǎng)格和輔助線按鈕。

4．屬性面板

用于查看各更改當(dāng)前選擇對象的各種屬性。

（二）新建站點(diǎn)

為了有效地發(fā)揮Dreamweaver對網(wǎng)頁的組織管理功能，通常在制作具體的網(wǎng)頁之前，應(yīng)先創(chuàng)建一個(gè)新站點(diǎn)，然后根據(jù)網(wǎng)站的具體結(jié)構(gòu)制作網(wǎng)頁。

[例1-1] 在D盤中建立一個(gè)名為“xinxiaoyun”的新站點(diǎn)。

操作步驟：

① 單擊“開始”按鈕，將指針依次指向“程序（P）”“Macromedia Dreamweaver 8”，并單擊，即可啟動(dòng)Dreamweaver 8。

② 入Dreamweaver 8工作界面后，單擊“站點(diǎn)”/“彈出站點(diǎn)管理”命令，彈出“管理站點(diǎn)”對話框。

③ 單擊“新建（N）”按鈕，在彈出的下拉菜單中選擇“站點(diǎn)（W）”命令。

④ 彈出站點(diǎn)定義對話框，在“你打算為你的站點(diǎn)起什么名字”的文本框中輸入站點(diǎn)的名稱，如“心系奧運(yùn)”。⑤ 單擊“下一步”按鈕，在彈出的對話框中選取中“否，我不想使用服務(wù)器技術(shù)”。

⑥ 單擊“下一步”在彈出的對話框中選取擇開發(fā)過程中如何使用文件，這里選中“編輯我的計(jì)算機(jī)上的副本，完成后再上傳到服務(wù)器”，在“您將把文件存儲(chǔ)在計(jì)算機(jī)上的什么位置”文本框中輸入本地站點(diǎn)的位置“D：”。

⑦ 單擊“下一步”，在彈出的對話框中的“您 如何連接遠(yuǎn)程服務(wù)器”下拉表框中先擇“無”。

⑧ 單擊“下一步”，在彈出的對話框中單擊“完成”。⑨ 彈出“管理站點(diǎn)”對話框，在其左側(cè)列表框中將顯示名為“xinxiaoyun”的站點(diǎn)，單擊“完成”，完成本地站點(diǎn)的建設(shè)。

Dreamweaver將自動(dòng)在指定位置建立一個(gè)站點(diǎn)，首先建立 “D： xinxiaoyun”文件夾，然后在此文件夾下，再建立一組文件夾，其中可見文件夾包括：“_private”和“Images”（存放圖形文件），其余文件夾被隱藏起來。

第2課時(shí)

（三）新建網(wǎng)頁

[例1-2] 在“xinxiaoyun”網(wǎng)站中建立第一個(gè)網(wǎng)頁取名為“index.html”，設(shè)置背景色為：藍(lán)色，字體為：黑色，并作相應(yīng)文件的插入，完成后保存。（兩種方法）1． 新建網(wǎng)頁 操作步驟：方法一

① 選擇“文件”/“新建”命令，彈出“新建文檔”對話框，② 在“類別”列表框中選擇需要?jiǎng)?chuàng)建的網(wǎng)頁類別，如選擇“基本頁”選項(xiàng)，此時(shí)右側(cè)的列表中將顯示基示頁網(wǎng)頁的類型。

③ 在“基本頁”列表框中選擇所需創(chuàng)建軍的網(wǎng)頁類型后，單擊“創(chuàng)建”按鈕即可新建軍指定類型的空白網(wǎng)頁。

④ 再把網(wǎng)頁另存為相應(yīng)的站點(diǎn)下。2.網(wǎng)頁的保存

單擊“文件（F）”菜單中的“保存文件（S）”命令，彈出“另存為”對話框。

在“文件名（N）”列表框中輸入“index”后，單擊“保存（S）”按鈕。如果要保存的頁面含有圖片、動(dòng)畫、聲音等元素，Dreamweaver還會(huì)繼續(xù)詢問是否保存這些嵌入的文件。此時(shí)最好將這些文件保存起來，以保持它們在網(wǎng)頁中的位置，否則，當(dāng)網(wǎng)站發(fā)生遷移時(shí)，可能因找不到這些圖片、動(dòng)畫等文件而無法顯示。另外，最好將它們保存到Images文件夾中，使網(wǎng)站保持清潔，便于管理和維護(hù)。

3． 設(shè)置背景 設(shè)置網(wǎng)頁屬性：

新建一個(gè)網(wǎng)頁之后，一般還需要設(shè)置網(wǎng)頁的屬性，選擇“修改”/“頁面屬性”命令彈出“頁面屬性”對話框，在“分類”列表框中有“外觀”“鏈接”“標(biāo)題”“標(biāo)題/編碼”和“跟蹤圖象”5個(gè)選項(xiàng)。對頁面進(jìn)行相應(yīng)的處理。

大多數(shù)網(wǎng)頁都應(yīng)用背景圖案來為網(wǎng)頁增色，這些背景可以是一幅大圖片，也可以是若干個(gè)小圖片的重復(fù)使用（即“平鋪”）。選擇背景圖案時(shí)，要注意與文本相協(xié)調(diào)，而且背景的應(yīng)用不要妨礙文本的閱讀。另外，背景圖案越小，網(wǎng)頁的下載速度就越快。

設(shè)置背景的操作步驟：

① 單擊“修改”命令，出現(xiàn)“頁面屬性”對話框，且“背景”標(biāo)簽已被打開。

② 單擊“瀏覽（B）”按鈕，在“選擇文件”對話框中瀏覽文件夾內(nèi)容，從中搜索到所需背景圖案后，單擊“確定”按鈕，關(guān)閉“選擇文件”對話框，再單擊“確定”按鈕，關(guān)閉“頁面屬性”對話框，背景圖案即可插入頁面。

頁面制作完成，可以單擊“預(yù)覽”標(biāo)簽，觀察一下效果。方法二：

在站的文件夾下直接創(chuàng)建，再做相應(yīng)的設(shè)置。

4． 利用表格布局頁面（布局表格和普通表格）操作步驟：

①“插入”/“表格”或者在常用插入欄中的“插入表格”按鈕

②在表格對話框中設(shè)置插入表格的行數(shù)，列數(shù)，表格寬度，邊框粗細(xì)，單元格邊距等，③單擊“確定”按鈕完成表格的創(chuàng)建

（如果要邊框顯示就設(shè)置邊框的值，如果不要，就將其設(shè)置為0）

5． 文字編輯

文字編輯是制作網(wǎng)頁最基本的操作。在網(wǎng)頁編輯窗口中，可以像在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）”命令，打開“圖像源文件”對話框，如果要插入的圖片已經(jīng)保存在當(dāng)前的網(wǎng)站中，可以直接在圖的列表框中選取，然后單擊“確定”按鈕。否則，單擊“瀏覽”按鈕，從“選擇文件”對話框中選擇所需圖片，單擊“確定”按鈕，將圖片插入到網(wǎng)頁中。

② 拖動(dòng)圖片到頁面左側(cè)適當(dāng)位置。

第3課時(shí)

7．插入動(dòng)畫

在網(wǎng)頁制作中，經(jīng)常使用一些小動(dòng)畫，使頁面生動(dòng)活潑，這些小動(dòng)畫文件用專門的工具制作，也以GIF作為文件的擴(kuò)展名。

插入動(dòng)畫的類型有多種，介紹三種：插入FLASH動(dòng)畫，F(xiàn)LASH按鈕和FLASH文本 插入FLASH動(dòng)畫操作步驟：

①依次單擊“插入（I）” 菜單中的“媒體”/“FLASH”命令，打開“選擇文件”對話框，從“選擇文件”對話框中選擇所需動(dòng)畫“xx.swf”，單擊“確定”按鈕，插入動(dòng)畫。

② 拖動(dòng)動(dòng)畫到標(biāo)題下方適當(dāng)位置。

③ 選擇插入網(wǎng)頁中的FLASH動(dòng)畫，此時(shí)單擊“屬性”面板中的“播放”按鈕，就可以預(yù)瀏動(dòng)畫。

插入FLASH按鈕操作步驟：

① 依次單擊“插入（I）” 菜單中的“媒體”/“FLASH按鈕”命令，② 在“樣式”列表框中選擇按鈕的樣式，其效果顯示在“范例“欄中，③ 設(shè)置按鈕上的顯示的文字 ④ 設(shè)置鏈接 ⑤ 設(shè)置打開方式為-blank ⑥ “另存為“文本框中輸入FLASH按鈕存放的路徑 ⑦ 按“確定”按鈕完成按鈕的插入。

⑧ 在屬性面板中可以設(shè)置相關(guān)的屬性，如寬，高，文件名和對起方式等。

插入FLASH按鈕操作步驟：

① 依次單擊“插入（I）” 菜單中的“媒體”/“FLASH文本”命令，② 設(shè)置文字相關(guān)屬性 ③ 設(shè)置鏈接

④ “另存為“文本框中輸入FLASH文本名。⑤ 按“確定”按鈕完成按鈕的插入。

⑥ 在屬性面板中設(shè)置相關(guān)的屬性后，單擊“確定”，這樣當(dāng)將鼠標(biāo)移到文本時(shí)，文本顏色就會(huì)發(fā)生變化

8．插入背景音樂 操作步驟：

a.“插入”/“標(biāo)簽”命令彈出標(biāo)簽選擇器的對話框 b.在左側(cè)樹型列表框中選擇“標(biāo)簽選擇器”/“HTML標(biāo)簽”/“頁元素”命令，然后在右側(cè)的列表框中選擇bgsound選項(xiàng)，c.單擊“插入（I）”按鈕，彈出“標(biāo)簽選擇器-bgsound” d.單擊“源”文本框后的“瀏覽”按鈕，選擇要播放的音樂文件，e.在“循環(huán)”下拉菜表框中輸入要播放的次數(shù)，也可以選擇“無限”一直播放。

f.單擊“確定”完成設(shè)置，關(guān)閉所有的對話窗口。8.設(shè)置超鏈接（文本，圖形）①選擇要設(shè)置超鏈接的文本

②在“屬性”面板中“鏈接”下拉列表框后的選擇 ③選擇要鏈接的目標(biāo)文件，按“確定”

④設(shè)置“目標(biāo)”下拉列表框中選擇超鏈接的打開方式。（blank Self,present,top），圖形的與文本的一樣方法。

如果還有比較多的時(shí)間可以找一下特效代碼演示給學(xué)生看，并且告訴他們怎樣使用這些特效代碼。比如：走馬燈效果

三、課時(shí)要求

第1課時(shí)要求學(xué)生把所建的站點(diǎn)以學(xué)號(hào)+姓名命名交到FTP上，檢查建站點(diǎn)的情況，第2，3課時(shí)要求完善第一節(jié)課的頁站。

四、鞏固練習(xí)

建一個(gè)自己的站點(diǎn)，設(shè)計(jì)一個(gè)主頁，學(xué)生自命主題。

第二篇：FrontPage網(wǎng)頁制作教案(18課時(shí))

FrontPage網(wǎng)頁制作教案（18課時(shí)）

學(xué)期教學(xué)計(jì)劃

一、教材簡析

本學(xué)期使用的計(jì)算機(jī)教材是江蘇科學(xué)技術(shù)出版社出版的初中信息技術(shù)教科書。同時(shí)，由于配合高中階段選修網(wǎng)絡(luò)課程，增加部分網(wǎng)絡(luò)知識(shí)。

本教材主要內(nèi)容如下：１、網(wǎng)絡(luò)基礎(chǔ)知識(shí)２、網(wǎng)頁的建立３、網(wǎng)頁圖片的處理４、網(wǎng)頁框架的設(shè)計(jì)５、網(wǎng)頁表格的制作６、網(wǎng)頁表單的制作７、創(chuàng)建超鏈接８、動(dòng)態(tài)網(wǎng)頁的制作９、網(wǎng)站的建立

二、學(xué)情評(píng)價(jià)

１、學(xué)生學(xué)習(xí)網(wǎng)絡(luò)和網(wǎng)頁制作的興趣濃厚，熱情較高 ２、學(xué)生的計(jì)算機(jī)基礎(chǔ)知識(shí)掌握不夠牢 ３、學(xué)生運(yùn)用電腦的能力較差 ４、部分學(xué)生上機(jī)行為不夠規(guī)范

５、有些學(xué)生鍵盤操作不熟練，用一只手操作鍵盤現(xiàn)象較嚴(yán)重

二、目的要求

１、提高學(xué)生學(xué)習(xí)計(jì)算機(jī)網(wǎng)絡(luò)知識(shí)的興趣，注重動(dòng)手能力 ２、規(guī)范學(xué)生上機(jī)行為，養(yǎng)成良好的習(xí)慣

３、掌握基本的網(wǎng)絡(luò)知識(shí)和網(wǎng)上獲取信息的能力 ４、對學(xué)生適時(shí)進(jìn)行愛國主義教育

５、成績指標(biāo)：平均分80，及格率98％，高分率80％

三、教學(xué)措施

１、認(rèn)真鉆研，精心備課２、仔細(xì)講授３、耐心輔導(dǎo)４、嚴(yán)格要求學(xué)生

四、教學(xué)進(jìn)度

序次 課題：（內(nèi)容）課時(shí) 周次

序次 課題：（內(nèi)容）課時(shí) 周次 1

機(jī)房常規(guī)教育和課程安排

練習(xí)、實(shí)踐

１ 10 2

網(wǎng)絡(luò)基礎(chǔ)知識(shí)，制作工具

動(dòng)態(tài)網(wǎng)頁制作

１ 11 3

網(wǎng)頁的建立、網(wǎng)頁屬性設(shè)置

網(wǎng)站建立

１ 12 4

網(wǎng)頁圖片的處理

設(shè)置單元格式

１ 13 5

練習(xí)、實(shí)踐

開始

網(wǎng)頁框架的設(shè)計(jì)

分組做網(wǎng)站 7

網(wǎng)頁表格的制作

網(wǎng)頁表單的制作

創(chuàng)建超鏈接

第一節(jié)

網(wǎng)頁制作基礎(chǔ)知識(shí)

教學(xué)目標(biāo)：

1、了解網(wǎng)站、網(wǎng)頁、主頁和HTML的基本概念

2、了解常見的網(wǎng)頁制作工具

3、掌握Frontpage的啟動(dòng)和退出

教學(xué)手段：教師講解與學(xué)生演示相結(jié)合

教學(xué)過程： 一．講課：

一、網(wǎng)頁及其組成

通過瀏覽器在004km.cne.htm。

操作步驟： 1． 文字編輯 2． 插入圖片

插入圖片可使網(wǎng)頁豐富多彩。在網(wǎng)頁中可以使用的圖片類型有多種，但最常用的是GIF和JPG格式的圖片，因?yàn)檫@兩種圖片的文件長度較小，有利于提高網(wǎng)頁的瀏覽速度。所以，插入其他格式的圖片后，在頁面存儲(chǔ)時(shí)，系統(tǒng)會(huì)自動(dòng)將圖片格式轉(zhuǎn)換成GIF或JPG格式。

3． 插入動(dòng)畫

在網(wǎng)頁制作中，經(jīng)常使用一些小動(dòng)畫，使頁面生動(dòng)活潑，這些小動(dòng)畫文件用專門的工具制作，也以GIF作為文件的擴(kuò)展名。

操作步驟：

（1）依次單擊“插入（I）” 菜單中的“圖片（P）”、“來自文件（F）?”命令，打開“圖片”對話框，單擊“瀏覽”按鈕，打開“圖片”對話框，單擊“瀏覽”按鈕，從“選擇文件”對話框中選擇所需圖片“diqiu1.gif”，單擊“確定”按鈕，插入動(dòng)畫。

（2）拖動(dòng)動(dòng)畫到標(biāo)題下方適當(dāng)位置即可。

4． 插入水平線

水平線是貫穿網(wǎng)頁寬度的細(xì)灰條，用來分隔文本成加著重符。插入水平線可以幫助我們將各類相關(guān)信息組合到一起，但同一個(gè)頁面中水平線不宜過多。

調(diào)整水平線的寬度、高度、對齊方式以及顏色，就可以改變它的外觀。5． 設(shè)置背景

（1）單擊“格式（O）”菜單中的“背景（K）?”命令，出現(xiàn)“頁面屬性”對話框，且“背景”標(biāo)簽已被打開。

（2）單擊“瀏覽（B）?”按鈕，在“選擇文件”對話框中瀏覽文件夾內(nèi)容，從中搜索到所需背景圖案后，單擊“確定”按鈕，關(guān)閉“選擇文件”對話框，再單擊“確定”按鈕，關(guān)閉“頁面屬性”對話框，背景圖案即可插入頁面。

頁面制作完成，可以單擊“預(yù)覽”標(biāo)簽，觀察一下效果。

三、網(wǎng)頁的保存 單擊“文件（F）”菜單中的“保存文件（S）”命令，彈出“另存為”對話框.在“文件名（N）”列表框中輸入“welcome”后，單擊“保存（S）”按鈕。如果要保存的頁面含有圖片、動(dòng)畫、聲音等元素，F(xiàn)rontPage還會(huì)繼續(xù)詢問是否保存這些嵌入的文件，如圖5-11所示。

此時(shí)最好將這些文件保存起來，以保持它們在網(wǎng)頁中的位置，否則，當(dāng)網(wǎng)站發(fā)生遷移時(shí)，可能因找不到這些圖片、動(dòng)畫等文件而無法顯示。另外，最好將它們保存到Images文件夾中，使網(wǎng)站保持清潔，便于管理和維護(hù)。練習(xí)：

1． 在設(shè)計(jì)網(wǎng)頁過程中，定義字體時(shí)要注意哪些問題？

2． 為什么在網(wǎng)頁中通常都使用GIF或JPG格式的圖片文件？ 設(shè)置網(wǎng)頁的背景時(shí)，可不可以使用較大的圖片？有什么缺點(diǎn)？

制作“自我簡介”

制作“自我簡介”

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

1、讓學(xué)生熟悉FrontPage 2000的界面。

2、學(xué)會(huì)制作網(wǎng)頁標(biāo)題。

3、學(xué)會(huì)在網(wǎng)頁中插入美麗的圖片。

4、學(xué)會(huì)在FrontPage 2000中使用表格。

二、重、難點(diǎn)使用表格

三、教學(xué)方法演示法、講授法、實(shí)踐操作法、比較討論法

四、教學(xué)類型新授課

五、教學(xué)過程

[導(dǎo)入]前面大家了解因特網(wǎng)的神奇世界，暢游了豐富多彩的網(wǎng)站，欣賞了精美華麗的網(wǎng)頁?？吹竭@么多漂亮的網(wǎng)頁，同學(xué)們是否也想自己在網(wǎng)上建立一個(gè)自己的“家園”？現(xiàn)在我們將學(xué)習(xí)如何利用FrontPage 2000在因特網(wǎng)上安一個(gè)自己的“家”。

在因特網(wǎng)上安“家”的一般步驟大致可分為網(wǎng)站規(guī)劃、網(wǎng)頁制作和上傳發(fā)布三個(gè)階段。本章創(chuàng)建的整個(gè)網(wǎng)站主要由“自我簡介”、“成長之路”、“興趣特長”和“網(wǎng)上交流”等網(wǎng)頁構(gòu)成。

[講授]創(chuàng)建網(wǎng)上家園，首先應(yīng)將自己的有關(guān)情況展示出來，讓來訪者對自己有一個(gè)大概的了解。這里，先來看一個(gè)同學(xué)制作好的“自我簡介”網(wǎng)頁。

這個(gè)網(wǎng)頁包含有圖片、表格和相關(guān)文字等，下面學(xué)著制作這個(gè)網(wǎng)頁。每個(gè)網(wǎng)頁都有一個(gè)標(biāo)題，讓來訪者一目了然。在“自我簡介”網(wǎng)頁中用“自我簡介”幾個(gè)文字來作為這個(gè)網(wǎng)頁的標(biāo)題。

[演示]

1、單擊屏幕左下角的“開始”按鈕，在“開始”菜單中選擇“程序”→“Microsoft FrontPage”菜單命令，進(jìn)入FrontPage 窗口。

2、在網(wǎng)頁編輯工作區(qū)輸入文字“自我簡介”，單擊“格式”工具欄上“居中”按鈕，將文字居中。

3、選中文字“自我簡介”，通過“格式”工具欄的“字體”下拉列表，選擇“楷體_GB2312”。

4、在“格式”工具欄選擇“字號(hào)”為“24磅”，“顏色”為“粉紅色”

5、單擊“常用”工具欄上的“保存”按鈕，彈出 “另存為”對話框。

6、在“文件名”中輸入文件名“簡介”后，單擊“保存”按鈕，保存網(wǎng)頁。[實(shí)踐操作]

1、使用“格式”→“字體”菜單命令也可以方便地設(shè)置字體。啟動(dòng)FrontPage，在編輯工作區(qū)中輸入文字“興趣愛好”，使用菜單命令改變字體。

2、單擊“HTML”標(biāo)簽，觀察編輯工作區(qū)的變化。[提醒]在網(wǎng)頁設(shè)計(jì)中，對于非Windows自帶的字體盡量少用，以免造成別人瀏覽此網(wǎng)頁時(shí)無法顯示這種字體，影響網(wǎng)頁整體效果。

[講授]

1、FrontPage啟動(dòng)后，會(huì)自動(dòng)打開一個(gè)新的空白網(wǎng)頁窗口。FrontPage窗口與前面所學(xué)的Word窗口類似，由標(biāo)題欄、菜單欄、工具欄、編輯區(qū)和狀態(tài)欄組成。

2、網(wǎng)頁文件實(shí)際上是一個(gè)按HTML語言規(guī)則編寫的文本文件。我們看到的網(wǎng)頁是瀏覽器對HTML文件進(jìn)行逐條解釋，再顯示出來的結(jié)果。

HTML是英文Hyper Text Markup Language的縮寫，意為“超文本標(biāo)記語言”。這種語言用“<>”來標(biāo)記網(wǎng)頁中對象的格式和有關(guān)參數(shù)。網(wǎng)頁中除了文字保存在HTML文件中外，其他對象（如聲音、圖象、動(dòng)畫等）在HTML文件中只是保存了相應(yīng)的標(biāo)識(shí)和有關(guān)參數(shù)，真正是內(nèi)容還在這些對象的文件中。因此，這些對象的文件如果被刪除或改變了位置，就不能在瀏覽器中正確顯示出來。

[討論]如果在兩個(gè)文字之間增加了一個(gè)空格后，間距又顯得太大，此時(shí)應(yīng)怎樣調(diào)整才能得到合適的間距呢？

[實(shí)踐操作]啟動(dòng)FrontPage，分別建立主題為“興趣特長”和“成長之路”的兩個(gè)網(wǎng)頁，并保存為xingqu.htm和chengzhang.htm [講述]你在因特網(wǎng)上漫游時(shí)，精彩生動(dòng)的圖片會(huì)使人流連忘返。在自己的網(wǎng)頁上添加美麗的圖片，一定也會(huì)增加吸引力。

[演示]

1、打開網(wǎng)頁jianjie.htm，選擇“插入”→“換行符”菜單命令，彈出 “換行符屬性”對話框，選擇“普通換行符”，單擊“確定”按鈕，將光標(biāo)下移一行。

3、單擊“常用”工具欄上的“插入文件中的圖片”按鈕，彈出 “圖片”對話框。

4、單擊“剪貼畫”按鈕，彈出“剪貼畫庫”窗口，在“比喻”類別中找到剪貼畫圖片，將此圖片插入到網(wǎng)頁中。

5、調(diào)整圖片的大小，并居中放置。

插入圖片[講授]

1、使用回車鍵換行時(shí)，行距較大，而采用普通換行符來換行，行距為0。

2、FrontPage中可以插入的圖片文件格式很多，如GIF、JPEG、PNG和BMP等。其中BMP格式的圖片是未經(jīng)過壓縮的，文件較大，一般很少使用；而GIF、JPEG、PNG格式的圖片都是壓縮過的，文件較小，便于在網(wǎng)頁中瀏覽和下載，所以經(jīng)常使用。[實(shí)踐操作]

1、在已建立的網(wǎng)頁“成長之路”中，選擇“插入”→“圖片”菜單命令，加入合適的圖片，并調(diào)整圖片的位置和大小。

2、在已建立的“興趣特長”網(wǎng)頁中，使用“常用”工具欄上的“插入文件中的圖片”按鈕，加入合適的圖片，并調(diào)整圖片的位置和大小。

3、選擇“格式”→“背景”菜單命令在網(wǎng)頁中加入背景圖片

以圖片為背景的網(wǎng)頁[講解]在FrontPage中使用表格，可以整齊地排列文本，有效地組織數(shù)據(jù)，使整個(gè)網(wǎng)頁看起來簡潔清晰。我們下面來使用表格制作出自我情況介紹。

網(wǎng)頁中的“自我簡歷表” [演示]

1、單擊“常用”工具欄上的“插入表格”按鈕，制作出一個(gè)6行2列的表格。

2、在第一行第二列中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中，選擇“拆分單元格”命令，彈出 “拆分單元格”對話框。

3、選取“拆分為列”選項(xiàng)，在“列數(shù)”框中輸入3，單擊“確定”按鈕，將此單元格分為三列。

4、輸入表格中相應(yīng)的文字。

5、按住Ctrl鍵，單擊表格的第一列和第三列，選中此兩列，在“格式”工具欄上設(shè)置“字體”為“黑體”，“字號(hào)”為“4（14）磅”，“字型”為“粗體”。

6、選中第二列和第四列，設(shè)置“字體”為“楷體”，“字號(hào)”為“4（14）磅”。

7、選中表格的 所有行，單擊“格式”工具欄上的“居中”按鈕，將文字居中。

8、選中第二行、第四行、和第六行，單擊“格式”工具欄上的“突出顯示顏色”按鈕，選擇突出顯示顏色為“淺綠色”。

9、選中整個(gè)表格，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格屬性”菜單命令，彈出 “表格屬性”對話框。

10、選擇邊框顏色為“粉紅色”，單擊“確定”按鈕，制作出 “自我簡歷表”。[試一試]刪除表格的某一行、某一列或整個(gè)表格。[小技巧]

1、選中表格的多行、多列或多個(gè)單元格時(shí)要按住Ctrl鍵不放，再選取所需的行、列或單元格。

2、選中整個(gè)表格的方法：在表格的最左或最右邊雙擊鼠標(biāo)左鍵，當(dāng)所有單元格反色顯示時(shí)表示該表格被選中。[學(xué)生閱讀并實(shí)踐] 表格的編輯方法 用表格來安排版面 [實(shí)踐操作]

1、在自己所建的xingqu.htm網(wǎng)頁中使用表格展示自己的興趣愛好。在chengzhang.htm網(wǎng)頁中加入能反映自己成長過程的圖片。

2、建立一個(gè)2行6列的表格，在表格中插入圖片和表格。

3、將本節(jié)中所制作的主題文字、圖片和表格進(jìn)行混排。

[總結(jié)]

本小節(jié)我們學(xué)習(xí)了制作幾個(gè)簡單的文字網(wǎng)頁，進(jìn)一步熟悉了文字的設(shè)置。學(xué)會(huì)在網(wǎng)頁中插入圖片，并能利用插入的表格更方便地實(shí)現(xiàn)圖文混排的設(shè)計(jì)，使網(wǎng)頁看起來簡潔利落。同學(xué)們對表格的使用需要進(jìn)一步加強(qiáng)練習(xí)。

第三篇：網(wǎng)頁制作教案

網(wǎng)頁制作與設(shè)計(jì)教案

第一講 網(wǎng)頁設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁的基本方法............................................................................................................4 第二講 HTML的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級(jí)鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁設(shè)計(jì).............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級(jí)鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動(dòng)態(tài)網(wǎng)頁設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語言簡介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環(huán)語句和過程.............................................................20 4.3 VBSCRIPT基本語句.............................................................................................................20

第一講 網(wǎng)頁設(shè)計(jì)概述

【教學(xué)內(nèi)容】

講解網(wǎng)頁設(shè)計(jì)的相關(guān)術(shù)語及網(wǎng)站制作的基本流程?！窘虒W(xué)目的】

使學(xué)生對網(wǎng)站及網(wǎng)頁有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的興趣。【教學(xué)重點(diǎn)】

網(wǎng)頁設(shè)計(jì)中的若干術(shù)語?！窘虒W(xué)難點(diǎn)】

理解網(wǎng)頁設(shè)計(jì)中的若干術(shù)語?！窘虒W(xué)方式】

講授式、討論式、案例分析式?！窘虒W(xué)參考】

1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。

2、《Internet 網(wǎng)頁工場》Wittime工作室 重慶出版社。

3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。

4、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】

1.1 WWW和URL 1.1.1 Web的起源

Web是World Wide Web的簡稱，一般也稱之為WWW或3W 1.1.2 Web的特點(diǎn)和結(jié)構(gòu)

Web最大的特點(diǎn)是使用了超文本（Hypertext）WWW采用C/S（客戶機(jī)/服務(wù)器）工作模式

在瀏覽器和服務(wù)器之間應(yīng)用HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 1.1.3 URL URL的完整格式

協(xié)議://主機(jī)名或IP地址：端口號(hào)/路徑名/文件名

1.2 IE5的使用

Web瀏覽器是瀏覽Internet資源的客戶端軟件

在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等

1.2.1 IE5的界面 1.2.2 IE5的使用

列表標(biāo)志的使用。【教學(xué)方式】

討論式、案例分析式、練習(xí)式。【教學(xué)參考】

1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。

2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。

3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】

2.1 HTML文檔的基本結(jié)構(gòu)

2.1.1 HTML語法

1、雙標(biāo)記

語法：

<標(biāo)記>內(nèi)容

2、單標(biāo)記 語法：<標(biāo)記> 最常用的單標(biāo)記是

3、標(biāo)記屬性 語法

<標(biāo)記

屬性1 屬性2 屬性3 … > 例子

4、注釋語句 格式

例子

2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】

通過本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無序列表標(biāo)志及屬性。

第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志

【教學(xué)內(nèi)容】

講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級(jí)鏈接標(biāo)志 【教學(xué)目的】

* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。

< EM>......，強(qiáng)調(diào)文字，通常用斜體。

< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。

......，以等寬體顯示西文字符。

......，使文字大小相對于前面的文字增大一級(jí)。

......，使文字大小相對于前面的文字減小一級(jí)。^......，使文字成為前一個(gè)字符的上標(biāo)。_......，使文字成為前一個(gè)字符的下標(biāo)。......，使文字顯示為閃爍效果。2.2.6

文本修飾 2.2.7

預(yù)格式化文本 使用預(yù)格式化標(biāo)記

不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符

一般轉(zhuǎn)義符都是以“&”開始，以“；”結(jié)束，一個(gè)轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行

不換行 2.2.10 插入水平線 使用