FrontPage制作簡(jiǎn)單網(wǎng)頁(yè)
（高二信息技術(shù)公開課教學(xué)教案）
［ 教學(xué)目的 ］
了解網(wǎng)站的基本結(jié)構(gòu)、構(gòu)建網(wǎng)站的步驟，掌握用FrontPage制作簡(jiǎn)單網(wǎng)頁(yè) ［ 教學(xué)重點(diǎn) ］
網(wǎng)站規(guī)劃、在網(wǎng)頁(yè)中輸入文字，插入圖片和表格 ［ 教學(xué)難點(diǎn) ］
在網(wǎng)頁(yè)中輸入文字，插入圖片和表格 ［ 教學(xué)形式 ］ 演示與練習(xí)穿插進(jìn)行 ［ 教學(xué)過(guò)程 ］ ［導(dǎo)入新課］
大家都很喜歡上網(wǎng)，因?yàn)榫W(wǎng)上有許多東西（學(xué)習(xí)資料、游戲、軟件、音樂……）可供我們選擇，而且許多都是免費(fèi)的。這就是網(wǎng)絡(luò)的一個(gè)很重要的特點(diǎn)――資源共享。這些資源都是放在一個(gè)一個(gè)網(wǎng)站中的。我們也可以構(gòu)建一個(gè)網(wǎng)站，把你的珍藏整理好放上去。這樣別人就可以分享你的東西。目前，在網(wǎng)上就有許多有名的個(gè)人網(wǎng)站，像華軍軟件、電腦之家、驅(qū)動(dòng)之家、九天音樂等。［講授新課］
要想在網(wǎng)上安家落戶，大體上有以下三步：網(wǎng)站規(guī)劃、網(wǎng)頁(yè)制作和上傳以布。今天我們就先來(lái)學(xué)習(xí)網(wǎng)站規(guī)劃和簡(jiǎn)單網(wǎng)頁(yè)的制作。
一、網(wǎng)站規(guī)劃
（在制作網(wǎng)頁(yè)之前要先建站，如果沒有事先的準(zhǔn)備及策劃，只盲目的開始編輯網(wǎng)頁(yè)，將要花更多的時(shí)間和精力在網(wǎng)站的整合上。所以要養(yǎng)成先建站再織網(wǎng)的好習(xí)慣）
1． 確定網(wǎng)站的主題
2． 網(wǎng)站要包含哪些咨訓(xùn)與服務(wù) 3． 構(gòu)思每個(gè)網(wǎng)頁(yè)的草圖 4． 確定網(wǎng)頁(yè)與網(wǎng)頁(yè)之間的鏈接
演示：
1、用FrontPage中的導(dǎo)航來(lái)更直觀地了解網(wǎng)站結(jié)構(gòu)；
2、用FrontPage新建一個(gè)站點(diǎn)；
（1）打開FrontPage，選擇“文件”－＞“新建”－＞“站點(diǎn)”；（2）單擊“只有一個(gè)網(wǎng)頁(yè)的站點(diǎn)”
注：在“文件夾列表”中顯示該站點(diǎn)中所有的文件夾和文件。（一般新建站點(diǎn)后就有兩個(gè)文件夾，我們一般將網(wǎng)站所需的圖片放在“image”文件夾中，當(dāng)然你也可以根據(jù)需要新建一些文件夾，但必須在一個(gè)站點(diǎn)中）練習(xí)：
1． 自己構(gòu)建一個(gè)個(gè)人網(wǎng)站；
2． 新建個(gè)人網(wǎng)站（當(dāng)然此時(shí)的個(gè)人網(wǎng)站還只是和個(gè)空白網(wǎng)頁(yè)）二．制作網(wǎng)頁(yè)“自我簡(jiǎn)介”（先展示一下做好的“自我簡(jiǎn)介”）
（一）在網(wǎng)頁(yè)中輸入文字和插入表格
1． 在網(wǎng)頁(yè)中編輯工作區(qū)輸入文字“自我簡(jiǎn)介”，居中；
2． 選中文字“自我簡(jiǎn)介”，選擇“楷體＿GB2312”，字號(hào)為“6（24）磅”，粉紅色）； 3． 選擇“插入”－＞“換行符”，在彈出的“換行符屬性”對(duì)話框中選擇“普通換行符”，單擊“確定”，光標(biāo)移到下一行； 4． 單擊“常用”工具欄上的“插入文件中的圖片”按鈕，彈出“圖片”對(duì)話框； 5． 單擊“剪貼畫”按鈕，在“比喻”類別中選擇一幅圖片，將此圖片插入網(wǎng)頁(yè)中； 6． 調(diào)整圖片的大小，居中放置；
7． 選擇“格式”－＞“背景”命令在網(wǎng)頁(yè)中加入背景圖片； 8． 單擊“網(wǎng)頁(yè)編輯區(qū)”下方的“預(yù)覽”標(biāo)簽，可以預(yù)覽網(wǎng)頁(yè)的效果。
（二）制作“自我簡(jiǎn)歷表”
網(wǎng)頁(yè)中僅有一個(gè)標(biāo)題和一幅圖片，內(nèi)容太少，下面插入一個(gè)表格 1． 單擊“常用”工具欄上的“插入表格”按鈕，制作一個(gè)6行2列的表格； 2． 在第一行第二列中，將單元格拆分成3列； 3． 輸入“自我簡(jiǎn)歷表”中的文字；
4． 選中第一、三列，將字體設(shè)為“黑體”，字號(hào)為“4（14）磅”，字型為“粗體”，選中第二、四列，將字體設(shè)為“楷體”，字號(hào)為“4（14）磅”，選中這個(gè)表格，單擊“居中”按鈕，選中第二、四、六行，設(shè)置顏色為“淺綠色”；選中這個(gè)表格，單擊右鍵，選擇“表格屬性”命令，選擇邊框顏色為“粉紅色”，粗細(xì)為1；單擊確定。注：
1、格的邊框粗細(xì)設(shè)為0，則表格不顯示邊框。（我們可以利用這一特點(diǎn)來(lái)合理安排網(wǎng)頁(yè)的版面設(shè)置，書上163頁(yè)圖7.14的混合排版效果就是一例
2、“文件夾列表”中，雙擊某一網(wǎng)頁(yè)，該網(wǎng)頁(yè)就會(huì)顯示在網(wǎng)頁(yè)編輯區(qū)中，練習(xí)：
1． 在剛剛新建的站點(diǎn)上新建幾個(gè)網(wǎng)頁(yè)；
2． 在編輯網(wǎng)頁(yè)時(shí)，學(xué)會(huì)使用表格來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行排版。三．小結(jié)
展示和評(píng)講學(xué)生作品
Frontpage網(wǎng)頁(yè)制作導(dǎo)學(xué)案
青州一中
劉志韓
文件——新建——網(wǎng)頁(yè) 【學(xué)習(xí)目標(biāo)】
1、包括網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)
2、站點(diǎn)的規(guī)劃和創(chuàng)建
3、網(wǎng)頁(yè)文本和圖片的處理、表格和框架的應(yīng)用 【學(xué)習(xí)重難點(diǎn)】
1、建立一個(gè)主題網(wǎng)站
2、建設(shè)一個(gè)網(wǎng)站的步驟
3、網(wǎng)頁(yè)的美化與特效的制作 【課前預(yù)習(xí)】
思考一下多媒體信息集成的方式有哪些？
【自主學(xué)習(xí)】
1、在www中，________是信息的主要組織和表現(xiàn)形式。
2、用________語(yǔ)言編寫的網(wǎng)頁(yè)實(shí)際上是一種文本文件，以.HTML或者.HTM為擴(kuò)展名，可以使用任何文本處理軟件（如記事本、word等）創(chuàng)作或修改。
3、制作網(wǎng)頁(yè)常用的軟件有_________________和_________________。
4、網(wǎng)頁(yè)文件的擴(kuò)展名有哪些？
5、網(wǎng)站開發(fā)的基本過(guò)程：
網(wǎng)站的規(guī)劃——（）——（）——網(wǎng)站的發(fā)布與管理——網(wǎng)站的評(píng)價(jià) 【合作探究與指導(dǎo)】
三、網(wǎng)站的制作
1、創(chuàng)建站點(diǎn)
文件——新建——站點(diǎn)（選擇或創(chuàng)建存儲(chǔ)站點(diǎn)的文件夾）
2、網(wǎng)頁(yè)的創(chuàng)建與編輯
3、插入對(duì)象 水平線 圖片 字幕 懸停按鈕
4、創(chuàng)建超級(jí)鏈接
在對(duì)象上右擊選擇超級(jí)鏈接——選擇鏈接的目標(biāo)。
5、使用表格
表格——插入（在制作網(wǎng)頁(yè)的過(guò)程中用表格來(lái)布局網(wǎng)頁(yè)）
6、在站點(diǎn)中查看網(wǎng)頁(yè)的編輯及網(wǎng)頁(yè)之間的鏈接情況。
分步驟操作練習(xí)題：
1、新建一個(gè)站點(diǎn)，只有一個(gè)空白網(wǎng)頁(yè)的站點(diǎn)。
2、在首頁(yè)上插入“我最喜愛的明星”，然后進(jìn)行修飾。
3、再新建一個(gè)空白網(wǎng)頁(yè)。重新命名為“周杰倫”。
4、插入圖片“周杰倫”，文本“周杰倫”，排版設(shè)置后保存網(wǎng)頁(yè)。
5、再建立一張空白的網(wǎng)頁(yè)，重新命名為“劉亦菲”。
6、插入圖片“劉亦菲”，文本“劉亦菲”，排版設(shè)置后保存網(wǎng)頁(yè)。
7、分別在首頁(yè)和“周杰倫”“劉亦菲”網(wǎng)頁(yè)建立超級(jí)鏈接。操作練習(xí)： 【拓展任務(wù)】
以環(huán)保為主題，利用文件夾“環(huán)?！敝械乃夭?，制作一個(gè)5頁(yè)的網(wǎng)站。
【當(dāng)堂檢測(cè)】
1.在網(wǎng)頁(yè)制作中，我們經(jīng)常用下列（）辦法進(jìn)行頁(yè)面布局。
A.文字
B.表格
C.表單
D.圖片 2.使用瀏覽器訪問網(wǎng)站時(shí)，第一個(gè)被訪問的網(wǎng)頁(yè)稱為（）。
A.網(wǎng)頁(yè)
B.網(wǎng)站
C.HTML語(yǔ)言
D.主頁(yè) 3.網(wǎng)頁(yè)中可使我們進(jìn)行選擇性瀏覽的稱為（）。
A.文字
B.圖片
C.聲音
D.超鏈接
4.在FrontPage2000中，要建立同一個(gè)網(wǎng)頁(yè)內(nèi)的鏈接點(diǎn)，讓你點(diǎn)選某一鏈接后，迅速跳到同一網(wǎng)頁(yè)內(nèi)的另一個(gè)特定位置，應(yīng)采用（）鏈接。
A.單元格
B.表單
C.書簽
D.表格 5.FrontPage 2000中，下述關(guān)于圖片與鏈接的關(guān)系表述正確的是（）。
A.圖片不能建立鏈接
B.一張圖片只能建立一個(gè)鏈接
C.圖片要建立鏈接需經(jīng)過(guò)處理
D.通過(guò)設(shè)置熱區(qū)，一張圖片可建立多個(gè)鏈接 6.在FrontPage 2000“網(wǎng)頁(yè)”視圖模式下，單擊“普通”標(biāo)簽后，在出現(xiàn)的“普通”窗口中，可直接進(jìn)行（）。
A.網(wǎng)頁(yè)編排
B.觀察網(wǎng)頁(yè)在瀏覽器中的效果
C.編輯HTML代碼
D.下載圖片 7.網(wǎng)頁(yè)制作的超文本標(biāo)記語(yǔ)言稱為（）。
A.VB語(yǔ)言
B.HTML語(yǔ)言
C.BASIC語(yǔ)言
D.ASCII 8.在Frontpage2000網(wǎng)頁(yè)視圖方式下，單擊（）標(biāo)簽可直接編輯HTML代碼？
A.普通
B.HTML
C.預(yù)覽
D.編輯 9.在FrontPage 2000中，我們想要文字左右交替移動(dòng)的效果，是下列（）效果。
A.字體
B.DHTML效果
C.字幕
D.懸停按鈕 10.在FrontPage 2000表格單元格中，（）項(xiàng)目不能輸入。
A.表格
B.圖形
C.背景
D.聲音
作業(yè)：以我們寒假生活為主題，從互聯(lián)網(wǎng)上搜索的素材制作一個(gè)網(wǎng)站。
【閱讀材料】
網(wǎng)站設(shè)計(jì)
建立一個(gè)網(wǎng)站就像蓋一幢大樓一樣，它是一個(gè)系統(tǒng)工程，有自己特定的工作流程，你只有遵循這個(gè)步驟，按部就班地一步步來(lái)，才能設(shè)計(jì)出一個(gè)滿意的網(wǎng)站。
一、確定網(wǎng)站主題
網(wǎng)站主題就是你建立的網(wǎng)站所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主題。特別是對(duì)于個(gè)人網(wǎng)站，必須要找準(zhǔn)一個(gè)自己最感興趣內(nèi)容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。
二、搜集材料
明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無(wú)米之炊”。要想讓自己的網(wǎng)站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。材料既可以從圖書、報(bào)紙、光盤、多媒體上得來(lái)，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁(yè)的素材。
三、規(guī)劃網(wǎng)站
網(wǎng)站設(shè)計(jì)得成功與否，很大程度上決定于設(shè)計(jì)者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計(jì)師設(shè)計(jì)大樓一樣，圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁(yè)之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。
四、選擇合適的制作工具
網(wǎng)頁(yè)制作涉及的工具比較多，首先就是網(wǎng)頁(yè)制作工具了，目前大多數(shù)網(wǎng)民選用的都是所見即所得的編輯工具，這其中的優(yōu)秀者當(dāng)然是Dreamweaver和Frontpage了，如果是初學(xué)者，F(xiàn)rontpage2000是首選。除此之外，還有圖片編輯工具，如Photoshop、Photoimpact等；動(dòng)畫制作工具，如Flash、Cool 3d、Gif Animator等；還有網(wǎng)頁(yè)特效工具，如有聲有色等，五、制作網(wǎng)頁(yè)
材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個(gè)復(fù)雜而細(xì)致的過(guò)程，一定要按照先大后小、先簡(jiǎn)單后復(fù)雜來(lái)進(jìn)行制作。
六、上傳測(cè)試
網(wǎng)頁(yè)制作完畢，最后要發(fā)布到Web服務(wù)器上，才能夠讓全世界的朋友觀看，利用這些FTP工具，你可以很方便地把網(wǎng)站發(fā)布到自己申請(qǐng)的主頁(yè)存放服務(wù)器上。網(wǎng)站上傳以后，你要在瀏覽器中打開自己的網(wǎng)站，逐頁(yè)逐個(gè)鏈接的進(jìn)行測(cè)試，發(fā)現(xiàn)問題，及時(shí)修改，然后再上傳測(cè)試。
七、推廣宣傳
網(wǎng)頁(yè)做好之后，還要不斷地進(jìn)行宣傳，這樣才能讓更多的朋友認(rèn)識(shí)它，提高網(wǎng)站的訪問率和知名度。推廣的方法有很多，例如到搜索引擎上注冊(cè)、與別的網(wǎng)站交換鏈接、加入廣告鏈等。
八、維護(hù)更新
《網(wǎng)頁(yè)制作FrontPage》教案
教師：張愛平
第1、2課時(shí) 網(wǎng)頁(yè)設(shè)計(jì)概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)術(shù)語(yǔ)及網(wǎng)站制作的基本流程?！窘虒W(xué)目的】
使學(xué)生對(duì)網(wǎng)站及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣?！窘虒W(xué)重點(diǎn)】
網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)?！窘虒W(xué)難點(diǎn)】
理解網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)?！窘虒W(xué)方式】
講授式、討論式、案例分析式?！窘虒W(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《Internet 網(wǎng)頁(yè)工場(chǎng)》Wittime工作室 重慶出版社。
3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
4、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】 1.1 中超級(jí)鏈接標(biāo)志的難點(diǎn)。
第7、8課時(shí)HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志?！窘虒W(xué)目的】
使學(xué)生掌握簡(jiǎn)單表格、表單與框架的制作?！窘虒W(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性?！窘虒W(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(xiàn)的基本思想。
* 理解框架屬性name、target的意義。* 理解表單中相應(yīng)元素對(duì)應(yīng)標(biāo)志及屬性的含義?！窘虒W(xué)方式】 案例分析式、項(xiàng)目教學(xué) 【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社?！拘抡n內(nèi)容】 2.5 插入表格
2.5.1在網(wǎng)頁(yè)中插入表格
表格的基本構(gòu)成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
2.5.2嵌套的表格 2.5.3表格的屬性設(shè)置 2.5.4單元格屬性設(shè)置 2.6 表單的應(yīng)用
表單在Web網(wǎng)頁(yè)中用來(lái)給訪問者填寫信息，從而能獲得用戶信息，使網(wǎng)頁(yè)具有交互的功能。2.6.1創(chuàng)建表單
2.6.2用定義用戶交互（1）單行文本輸入?yún)^(qū)（2）密碼輸入?yún)^(qū)（3）單選框（4）復(fù)選框（5）隱藏區(qū)域（6）按鈕
2.6.3定義下拉式菜單
你選修的課程：
2.6.4定義多行文字輸入?yún)^(qū)域 請(qǐng)輸入你的詳細(xì)介紹：
2.7 框架窗口
框架把窗口劃分成幾個(gè)子窗口，各個(gè)子窗口可以調(diào)入各自的HTML文檔，最后形成充滿整個(gè)窗口的網(wǎng)頁(yè)。2.7.1框架的定義 2.7.2框架屬性設(shè)置
