高中信息技術(shù)《網(wǎng)頁制作初步》教案
www.tmdps.cn 教材分析
教學(xué)內(nèi)容：高中信息技術(shù)第五章第二節(jié)《網(wǎng)頁的制作》。
教學(xué)重點(diǎn)：網(wǎng)頁文字處理、插入圖片、動畫、水平線以及設(shè)置背景的方法。
教學(xué)難點(diǎn)：通過網(wǎng)站自主學(xué)習(xí)，讓學(xué)生自己建立網(wǎng)頁。
學(xué)生分析
本課對象是高一學(xué)生，學(xué)生通過前面woRD和INTERNET的學(xué)習(xí)，對網(wǎng)頁內(nèi)容編輯、結(jié)構(gòu)和效果等設(shè)計有了一定的感性認(rèn)識。
教學(xué)目標(biāo)
熟悉網(wǎng)頁中的各種元素及其制作方法，初步了解網(wǎng)頁制作過程，培養(yǎng)學(xué)生的自學(xué)能力和創(chuàng)新探索精神。
教學(xué)環(huán)境
設(shè)計“網(wǎng)頁制作”網(wǎng)站，是學(xué)生通過網(wǎng)站在教師的引導(dǎo)下，實(shí)現(xiàn)自主學(xué)習(xí)，完成網(wǎng)站中每一知識點(diǎn)的學(xué)習(xí)，教師借助投影儀及時反饋學(xué)生在完成目標(biāo)時出現(xiàn)的問題。
教學(xué)方法
通過網(wǎng)站引導(dǎo)學(xué)生自主學(xué)習(xí)，解決教師提出的實(shí)際問題。
教學(xué)過程
（引入）邊講邊演示
展示一個簡單的網(wǎng)頁
你現(xiàn)在正在上網(wǎng)，一定去了不少站點(diǎn)吧！這些站點(diǎn)的頁面都設(shè)計得非常精美，讓你在瀏覽信息的同時，還可以得到美的享受。這么吸引人的頁面，是怎么制作出來的呢？你想不想也做一個精美的個人主頁呢？如果你的回答是肯定的，那我們就一起學(xué)一下FrontPage的使用。FrontPage是優(yōu)秀的專業(yè)化網(wǎng)頁設(shè)計軟件之一，使用FrontPage你只要幾分鐘就可以建立一個自己的網(wǎng)頁，這可是一件令人激動的事喲！
（新課）教師引導(dǎo)學(xué)生根據(jù)網(wǎng)站自學(xué)，完成教師提出具體操作要求
模塊
一、教師引導(dǎo)學(xué)生自學(xué)“網(wǎng)頁制作知識準(zhǔn)備”，提出問題：
1、啟動FRoNTPAGE？
2、FRoNTPAGE的三種顯示模式？
3、在e:下新建空站點(diǎn)，取名為abc站點(diǎn)文件夾。
模塊
二、教師引導(dǎo)學(xué)生自學(xué)“新建網(wǎng)頁”，提出要求：
1、新建普通網(wǎng)頁。
4、打開e:網(wǎng)站制作素材可愛的家鄉(xiāng)高郵.htm網(wǎng)頁。
模塊
三、教師引導(dǎo)學(xué)生自學(xué)“文字編輯”，提出要求：
1、把高郵.htm網(wǎng)頁中的標(biāo)題設(shè)置為“5號”、綠色，“加粗”字體，“居中”對齊。
2、把高郵.htm網(wǎng)頁中的正文字體設(shè)置為“3號”，綠色。
模塊
四、教師引導(dǎo)學(xué)生自學(xué)“圖片動畫”，提出要求：
1、在網(wǎng)頁中插入e:網(wǎng)站制作素材高郵風(fēng)景高郵湖.jpg
2、在網(wǎng)頁中插入e:網(wǎng)站制作素材高郵風(fēng)景welcome.gif
模塊
五、教師引導(dǎo)學(xué)生自學(xué)“水平線”，提出要求：
1、在網(wǎng)頁中標(biāo)題與正文之間插入水平線。
2、水平線寬度設(shè)置為100%，高度為3像素，水平居中，顏色改為綠色。
模塊
六、教師引導(dǎo)學(xué)生自學(xué)“設(shè)置背景”，提出要求：
設(shè)置網(wǎng)頁背景為e:網(wǎng)頁制作網(wǎng)站制作素材高郵風(fēng)景背景2文件
模塊
七、教師引導(dǎo)學(xué)生自學(xué)“保存”，提出要求：
將當(dāng)前網(wǎng)頁另存到e:abc高郵.htm，并將圖片保存到images文件夾中。
模塊
七、教師引導(dǎo)學(xué)生自學(xué)“小結(jié)”，提出要求把學(xué)生分為兩組，一組練習(xí)制作個人網(wǎng)頁，一組練習(xí)制作班級網(wǎng)頁。制作素材在e:網(wǎng)站制作素材練習(xí)素材中。對學(xué)生作品點(diǎn)評，小結(jié)。www.tmdps.cn
浙江省高中信息技術(shù)網(wǎng)頁制作會考知識點(diǎn)
一、插入網(wǎng)頁元素：
01.文字及格式：從文本文件中復(fù)制文字內(nèi)容 → 光標(biāo)定位到相應(yīng)單元格中 → 粘貼 → 選中文字 → 格式 → 字體（段落）→ 根據(jù)題意設(shè)置 → 確定
02.字幕組件：定位 → 插入 → 組件 → 字幕 → 輸入文字設(shè)置屬性 → 確定。
03.藝術(shù)字：定位 → 插入 → 圖片 → 藝術(shù)字 → 選擇一種式樣后確定 → 輸入文字設(shè)置格式后確定。
04.圖片及屬性：光標(biāo)定位于單元格中 → 插入 → 圖片 → 來自文件 → 找到并選中圖片文件（一定要從考生文件夾中找圖片，包括擴(kuò)展名都要正確，文件類型可以選所有文件。）→ 確定 → 右擊圖片 → 圖片屬性 → 根據(jù)題意設(shè)置 → 確定（注意不能設(shè)置成單元格背景圖片）
05.表格：光標(biāo)定位 → “表格”菜單 → 插入 → 表格（行或列、單元格）。
06.水平線及屬性：光標(biāo)定位 → 插入 → 水平線 → 右擊水平線 → 水平線屬性 → 根據(jù)題意設(shè)置 → 確定
二、背景（顏色或圖片、音樂）、屬性的設(shè)置：
01.網(wǎng)頁屬性（網(wǎng)頁背景、背景音樂、網(wǎng)頁標(biāo)題等）：在網(wǎng) 1
頁中右擊 → 網(wǎng)頁屬性 → 根據(jù)題意設(shè)置 → 確定（圖片和音樂文件一定要來自自己的考生文件夾，網(wǎng)頁標(biāo)題不能插入到網(wǎng)頁的上方）
02.表格背景、表格屬性：光標(biāo)定位于要設(shè)置的表格右擊 → 表格屬性 → 根據(jù)題意設(shè)置 → 確定
03.單元格背景、單元格屬性：光標(biāo)定位于要設(shè)置的單元格右擊 → 單元格屬性 → 根據(jù)題意設(shè)置 → 確定
三、表格的操作：
01.插入行（列）：光標(biāo)定位 → 表格 → 插入 → 行或列 02.刪除行（列）：選中要刪除的行（列）→ 表格 → 刪除單元格（正確選擇行或列）
03.合并（拆分）單元格：選中要合并（拆分）的單元格 → 表格 → 合并（拆分）單元格→ 根據(jù)題意設(shè)置 → 確定
四、超鏈接的設(shè)置：
01.在文字（圖片）上設(shè)置（修改）超鏈接到網(wǎng)站地址：選中文字（圖片）→ 在選中區(qū)域右擊 → 超鏈接（超鏈接屬性）→ 單擊“原有文件或網(wǎng)頁”按鈕 → 在地址欄中輸入網(wǎng)址 → 確定。
示例：超鏈接到“中央電視臺”http://常見錯誤：（1）只有（2）http://http://2
02.鏈接到文件：選中文字（圖片）→ 在選中區(qū)域右擊 → 超鏈接（超鏈接屬性）→ 單擊“原有文件或網(wǎng)頁”按鈕 → 找到并選中文件（必須到考生文件夾中去尋找所要鏈接的文件，包括擴(kuò)展名都要正確。顯示擴(kuò)展名的操作：打開一個文件夾 → 工具→ 文件夾選項 →“查看”標(biāo)簽 → 去掉“隱藏已知文件類型的擴(kuò)展名”前面的對號 → 確定）→ 確定
示例：鏈接文件germ.htm
常見錯誤： http://germ.htm
03.鏈接到電子郵件：選中文字（圖片）→ 在選中區(qū)域右擊 → 超鏈接（超鏈接屬性）→ 單擊“電子郵件地址”按鈕 → 電子郵件地址欄中輸入電子郵件地址 → 確定
示例：超鏈接到abc@163.com
常見錯誤：（1）只有myname@163.com（2）http:// myname@163.com
五、新建網(wǎng)頁（保存位置是考生文件夾、文件名要正確）
文件 → 新建 → 空白網(wǎng)頁（開始 → 所有程序 → Microsoft Office → Microsoft Office FrontPage 2003）→ 按照題意制作網(wǎng)頁 → 文件 → 保存 → 選擇保存位置和輸入文件名 → 保存 → 關(guān)閉窗口
網(wǎng)頁制作
教學(xué)目標(biāo)：
1、了解網(wǎng)頁的主要構(gòu)成內(nèi)容
2、學(xué)會網(wǎng)頁的布局
3、學(xué)會網(wǎng)頁中插入圖片，文字設(shè)置，插入超鏈接的方法 教學(xué)內(nèi)容：
1、啟動FrontPage “開始”菜單——程序——Microsoft office——Microsoft FrontPage
2、新建網(wǎng)頁：文件——新建——空白網(wǎng)頁
表格——表格布局 表格——插入表格
專心
愛心
用心 1
調(diào)整表格
插入圖片：
1． 插入：插入——圖片——剪貼畫（來自文件）2． 設(shè)置：右擊圖片（快捷菜單）——圖片屬性 3． 刪除：選擇圖片——按刪除鍵
調(diào)整圖片，單擊圖片，出現(xiàn)小黑方塊，就可調(diào)整圖片
專心
愛心
用心 2
文字的錄入：直接錄入。
復(fù)制——復(fù)制粘貼
文字的編輯：格式——字體
格式——段落
文字最后生成格式
專心
愛心
用心 3
超級鏈接：
1． 鏈接到郵箱
選擇“求助信箱圖片”——單擊超鏈接按鈕——選擇“郵件超鏈接”按鈕——輸入郵箱地址——確定
2． 鏈接到其他網(wǎng)頁、網(wǎng)站
選擇鏈接文字——單擊超鏈接按鈕——輸入指定網(wǎng)頁地址——確定 3． 取消超鏈接
選擇超鏈接部分——單擊超鏈接按鈕——刪除URL地址欄的內(nèi)容——確定
保存：文件——保存
保存位置為F：/**班級/
專心
愛心
用心 4
網(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站點(diǎn)建立與管理.....................................................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é)重點(diǎn)】
網(wǎng)頁設(shè)計中的若干術(shù)語。【教學(xué)難點(diǎn)】
理解網(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的特點(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地址：端口號/路徑名/文件名
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)志的難點(diǎn)。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志。【教學(xué)目的】
使學(xué)生掌握簡單表格、表單與框架的制作。【教學(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性。【教學(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(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)頁
