《信息技術(shù)》第三冊
新課程標(biāo)準(zhǔn)教案
制作第一個網(wǎng)頁(網(wǎng)頁誕生了)
[教學(xué)目的]
1．通過瀏覽幾個精彩網(wǎng)頁，激發(fā)學(xué)生制作網(wǎng)頁的學(xué)習(xí)興趣。
2．熟練掌握啟動Frontpage 2000，熟悉Frontpage2000文件菜單和常用工具的使用方法，新建“只有一個網(wǎng)頁的站點”的操作步驟，從中認(rèn)識Frontpage2000的主界面，理解創(chuàng)建網(wǎng)站的意義．
3．網(wǎng)頁的基本步驟，了解創(chuàng)建網(wǎng)頁的過程學(xué)會在網(wǎng)頁中輸入文字、編輯文字、插入圖片的方法，培養(yǎng)學(xué)生搜集、處理信息的能力。
4．作網(wǎng)頁，培養(yǎng)學(xué)生學(xué)習(xí)制作網(wǎng)頁的興趣
[教學(xué)重點]
創(chuàng)建網(wǎng)站的過程，制作、編輯網(wǎng)頁的基本方法。Frontpage2000的窗口組成，[教學(xué)難點]
保存網(wǎng)頁文件的方法，創(chuàng)建網(wǎng)站的意義
[教法設(shè)計]
演示、練習(xí)、講授、啟發(fā)引導(dǎo)、任務(wù)驅(qū)動
[導(dǎo)入新課]
<講述>在因特網(wǎng)上，我們可以用IE瀏覽器獲取萬維網(wǎng)中各種有價值的信息。同時看到許多
組織機(jī)構(gòu)甚至個人都在萬維網(wǎng)上擁有自己的網(wǎng)頁。
讓學(xué)生打開“網(wǎng)上鄰居”的“網(wǎng)頁”文件夾，瀏覽從網(wǎng)上下載的幾個精彩網(wǎng)頁。
<歸納> 你們有沒有想過自己制作一個網(wǎng)頁呢?把自己想要表述的內(nèi)容，自己喜歡的作文、圖片通過網(wǎng)頁展示給同學(xué)或更多的朋友觀看、欣賞、瀏覽。
[講授新課]
<布置任務(wù)> 制作第一個網(wǎng)頁
<提問> 網(wǎng)頁制作不是一件簡單的事情，而是按一定的順序一步步進(jìn)行的。請同學(xué)們回憶制作網(wǎng)頁前應(yīng)作哪些準(zhǔn)備工作?
<歸納> 現(xiàn)在開始創(chuàng)建網(wǎng)頁．我們選用功能強(qiáng)大，操作簡單的工具Frontpage 2000來制作。
一．啟動Frontpage 2000
<討論> 進(jìn)入到Frontpage 2000界面后，比比看，這個軟件與以前學(xué)過的Word 2000與Excel2000有什么相同與不同之處呢?(展示兩軟件界面的圖片)
<歸納> 相同之處是：窗口相似，都有常見的標(biāo)題欄、菜單欄和工具欄。不同的是：多了一個如教材的圖2—2—2所示：1．編輯模式標(biāo)簽卡2．視圖框。
二．建立只有一個網(wǎng)頁的站點
<思考> 為什么不新建一個網(wǎng)頁，而要新建一個站點呢?
<演示> 新建FrontPage 2000中“個人站點”來啟發(fā)引導(dǎo)．
<小結(jié)> 一般來講，網(wǎng)頁文件總是存放在特定的站點中便于管理。因此，第一次制作網(wǎng)頁之前需建立一個存放網(wǎng)頁文件的專用站點。
<學(xué)生練習(xí)>教材P76試試看
對于初學(xué)者，通常選用“只有一個網(wǎng)頁的站點”，今后根據(jù)需要可以向網(wǎng)站中添加新的網(wǎng)頁。
<提問> 看書P76頁圖2-2-6，仔細(xì)觀察文件夾列表中唯一的一個網(wǎng)頁名稱是什么?(它是什么文件?)
<歸納> index．htm被命名為主頁，即進(jìn)入網(wǎng)站時看到的第一個網(wǎng)頁。
三．在主頁面編輯模式下插入文字，插入圖片。
<講授> 我們知道文字，圖片，動畫是網(wǎng)頁組成的基本元素。
教案設(shè)計：陡埠中學(xué)
彭榮兵
《信息技術(shù)》第三冊
新課程標(biāo)準(zhǔn)教案
今天我們就在空白的主頁中加入文字和圖片，制作一個簡單的網(wǎng)頁。
<老師演示啟動Frontpage 2000，新建“一個網(wǎng)頁的站點”直至打開INDEK.HTM主頁的整個步驟)
<布置任務(wù))
打開主頁文件，在右邊主頁頁面編輯窗，中完成如下任務(wù)：
1．將準(zhǔn)備好的介紹班集體的文字(主題和正文)插入(復(fù)制，粘貼)到頁面中。
2．從計算機(jī)E盤里找到存儲的“集體照”圖片插入到網(wǎng)頁中。
復(fù)習(xí)WORD中學(xué)過的文字編輯、排版，插入圖片的方法。
<部分學(xué)生演示插入圖片的方法，教師重復(fù)演示并加以補(bǔ)充>
<宣布比賽開始>
<學(xué)生操作，教師指導(dǎo)>
<對在操作的過程中遇到的共性問題給予指導(dǎo)>
問題：
學(xué)生插入圖片后將其移動到合適的位置及調(diào)整圖片大小．
<解決方法>
1．老師引導(dǎo)，講解；2．學(xué)生演示；3．學(xué)生相互討論。
四．預(yù)覽網(wǎng)頁
<講授> 編輯工作完成后就能觀看制作的效果了．可以保存之后在IB瀏覽器中觀看，也可以直接通過預(yù)覽模式標(biāo)簽卡預(yù)覽、瀏覽．請同學(xué)們參考教材的圖示切換“預(yù)覽”標(biāo)簽卡，預(yù)覽制作的網(wǎng)頁。
<展示幾個學(xué)生的優(yōu)秀作品，師生共同評價>
評選出網(wǎng)頁制作的“速度獎”、“設(shè)計獎”、“美觀獎”。
五、保存制作的網(wǎng)頁
網(wǎng)頁制作完成，需要將它保存下來．請同學(xué)們按照教材P78頁上的操作步驟將網(wǎng)頁文件分別存放在images和_private文件夾中。
<學(xué)生自行操作>
<歸納)在創(chuàng)建網(wǎng)站的同時系統(tǒng)自動地創(chuàng)建了images和_private文件夾。其中images文件夾用來保存網(wǎng)頁中使用的圖像文件，而private文件夾則保存一些參考文件和其他一些重要數(shù)據(jù)．鑒于此，希望同學(xué)們以后要學(xué)會分門別類地存放數(shù)據(jù)、資料和信息，養(yǎng)成整潔、條理的好習(xí)慣。
<課堂總結(jié)> 今天用網(wǎng)頁制作工具Frontpage 2000創(chuàng)建了一個只有一個網(wǎng)頁的站點，在主頁中加入了文字和圖片，制作了一個簡單的網(wǎng)頁．這只是網(wǎng)頁制作的第一步，精彩的網(wǎng)頁還要不斷地加工、美化和修飾，例如：配上美麗的背景，加上好看的花邊和配上動聽的音樂，使之變得更完美。
<課后小記>
本著以學(xué)生為主體的原則，我在本課的教學(xué)中設(shè)計先讓學(xué)生瀏覽網(wǎng)上下載的精彩網(wǎng)頁，借以激發(fā)他們學(xué)習(xí)制作網(wǎng)頁的興趣，然后從啟動Frontpage 2000開始，直至網(wǎng)頁制作完成，老師只是一步步的啟發(fā)引導(dǎo)，起著主導(dǎo)的作用，大部分時間都是學(xué)生自己動手動腦操作，整堂課課堂氣氛活躍，收到了較好的教學(xué)效果。
教案設(shè)計：陡埠中學(xué)
彭榮兵
網(wǎng)頁制作與設(shè)計教案
第一講 網(wǎng)頁設(shè)計概述....................................................................................................................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的文本、圖片與超級鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁設(shè)計.............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動態(tài)網(wǎng)頁設(shè)計.............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁設(shè)計案例.....................................................................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è)計概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁設(shè)計的相關(guān)術(shù)語及網(wǎng)站制作的基本流程。【教學(xué)目的】
使學(xué)生對網(wǎng)站及網(wǎng)頁有一定的認(rèn)識，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計的興趣。【教學(xué)重點】
網(wǎng)頁設(shè)計中的若干術(shù)語。【教學(xué)難點】
理解網(wǎng)頁設(shè)計中的若干術(shù)語。【教學(xué)方式】
講授式、討論式、案例分析式。【教學(xué)參考】
1、《網(wǎng)頁設(shè)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《Internet 網(wǎng)頁工場》Wittime工作室 重慶出版社。
3、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。
4、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社。【新課內(nèi)容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡稱，一般也稱之為WWW或3W 1.1.2 Web的特點和結(jié)構(gòu)
Web最大的特點是使用了超文本（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地址：端口號/路徑名/文件名
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è)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社。【新課內(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的文本、圖片與超級鏈接標(biāo)志
【教學(xué)內(nèi)容】
講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級鏈接標(biāo)志 【教學(xué)目的】
* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。
< EM>......，強(qiáng)調(diào)文字，通常用斜體。
< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對于前面的文字增大一級。
......，使文字大小相對于前面的文字減小一級。......，使文字成為前一個字符的上標(biāo)。......，使文字成為前一個字符的下標(biāo)。......，使文字顯示為閃爍效果。2.2.6
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開始，以“；”結(jié)束，一個轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行
不換行 2.2.10 插入水平線 使用
標(biāo)記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無序列表
2、有序列表
- 列表條目1
- 列表條目2......
3、定義列表
- 列表條目1
- 條目1的說明
- 列表條目2
- 條目2的說明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁中加入文本、圖片和超級鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁的基礎(chǔ)。超級鏈接標(biāo)志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學(xué)習(xí)HTML中超級鏈接標(biāo)志的難點。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志。【教學(xué)目的】
使學(xué)生掌握簡單表格、表單與框架的制作。【教學(xué)重點】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性。【教學(xué)難點】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對應(yīng)標(biāo)志及屬性的含義。【教學(xué)方式】
案例分析式、項目教學(xué) 【教學(xué)參考】
1、《網(wǎng)頁設(shè)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社。【新課內(nèi)容】
2.5 插入表格
2.5.1 在網(wǎng)頁中插入表格
表格的基本構(gòu)成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口屬性設(shè)置
2.7.4 常見的框架窗口劃分方法（1）標(biāo)題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分
（3）目錄和標(biāo)題，分為左上、左下、右三部分
（4）標(biāo)題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁
