高中信息技術《網頁制作初步》教案
www.tmdps.cn 教材分析
教學內容：高中信息技術第五章第二節《網頁的制作》。
教學重點：網頁文字處理、插入圖片、動畫、水平線以及設置背景的方法。
教學難點：通過網站自主學習，讓學生自己建立網頁。
學生分析
本課對象是高一學生，學生通過前面woRD和INTERNET的學習，對網頁內容編輯、結構和效果等設計有了一定的感性認識。
教學目標
熟悉網頁中的各種元素及其制作方法，初步了解網頁制作過程，培養學生的自學能力和創新探索精神。
教學環境
設計“網頁制作”網站，是學生通過網站在教師的引導下，實現自主學習，完成網站中每一知識點的學習，教師借助投影儀及時反饋學生在完成目標時出現的問題。
教學方法
通過網站引導學生自主學習，解決教師提出的實際問題。
教學過程
（引入）邊講邊演示
展示一個簡單的網頁
你現在正在上網，一定去了不少站點吧！這些站點的頁面都設計得非常精美，讓你在瀏覽信息的同時，還可以得到美的享受。這么吸引人的頁面，是怎么制作出來的呢？你想不想也做一個精美的個人主頁呢？如果你的回答是肯定的，那我們就一起學一下FrontPage的使用。FrontPage是優秀的專業化網頁設計軟件之一，使用FrontPage你只要幾分鐘就可以建立一個自己的網頁，這可是一件令人激動的事喲！
（新課）教師引導學生根據網站自學，完成教師提出具體操作要求
模塊
一、教師引導學生自學“網頁制作知識準備”，提出問題：
1、啟動FRoNTPAGE？
2、FRoNTPAGE的三種顯示模式？
3、在e:下新建空站點，取名為abc站點文件夾。
模塊
二、教師引導學生自學“新建網頁”，提出要求：
1、新建普通網頁。
4、打開e:網站制作素材可愛的家鄉高郵.htm網頁。
模塊
三、教師引導學生自學“文字編輯”，提出要求：
1、把高郵.htm網頁中的標題設置為“5號”、綠色，“加粗”字體，“居中”對齊。
2、把高郵.htm網頁中的正文字體設置為“3號”，綠色。
模塊
四、教師引導學生自學“圖片動畫”，提出要求：
1、在網頁中插入e:網站制作素材高郵風景高郵湖.jpg
2、在網頁中插入e:網站制作素材高郵風景welcome.gif
模塊
五、教師引導學生自學“水平線”，提出要求：
1、在網頁中標題與正文之間插入水平線。
2、水平線寬度設置為100%，高度為3像素，水平居中，顏色改為綠色。
模塊
六、教師引導學生自學“設置背景”，提出要求：
設置網頁背景為e:網頁制作網站制作素材高郵風景背景2文件
模塊
七、教師引導學生自學“保存”，提出要求：
將當前網頁另存到e:abc高郵.htm，并將圖片保存到images文件夾中。
模塊
七、教師引導學生自學“小結”，提出要求把學生分為兩組，一組練習制作個人網頁，一組練習制作班級網頁。制作素材在e:網站制作素材練習素材中。對學生作品點評，小結。www.tmdps.cn
浙江省高中信息技術網頁制作會考知識點
一、插入網頁元素：
01.文字及格式：從文本文件中復制文字內容 → 光標定位到相應單元格中 → 粘貼 → 選中文字 → 格式 → 字體（段落）→ 根據題意設置 → 確定
02.字幕組件：定位 → 插入 → 組件 → 字幕 → 輸入文字設置屬性 → 確定。
03.藝術字：定位 → 插入 → 圖片 → 藝術字 → 選擇一種式樣后確定 → 輸入文字設置格式后確定。
04.圖片及屬性：光標定位于單元格中 → 插入 → 圖片 → 來自文件 → 找到并選中圖片文件（一定要從考生文件夾中找圖片，包括擴展名都要正確，文件類型可以選所有文件。）→ 確定 → 右擊圖片 → 圖片屬性 → 根據題意設置 → 確定（注意不能設置成單元格背景圖片）
05.表格：光標定位 → “表格”菜單 → 插入 → 表格（行或列、單元格）。
06.水平線及屬性：光標定位 → 插入 → 水平線 → 右擊水平線 → 水平線屬性 → 根據題意設置 → 確定
二、背景（顏色或圖片、音樂）、屬性的設置：
01.網頁屬性（網頁背景、背景音樂、網頁標題等）：在網 1
頁中右擊 → 網頁屬性 → 根據題意設置 → 確定（圖片和音樂文件一定要來自自己的考生文件夾，網頁標題不能插入到網頁的上方）
02.表格背景、表格屬性：光標定位于要設置的表格右擊 → 表格屬性 → 根據題意設置 → 確定
03.單元格背景、單元格屬性：光標定位于要設置的單元格右擊 → 單元格屬性 → 根據題意設置 → 確定
三、表格的操作：
01.插入行（列）：光標定位 → 表格 → 插入 → 行或列 02.刪除行（列）：選中要刪除的行（列）→ 表格 → 刪除單元格（正確選擇行或列）
03.合并（拆分）單元格：選中要合并（拆分）的單元格 → 表格 → 合并（拆分）單元格→ 根據題意設置 → 確定
四、超鏈接的設置：
01.在文字（圖片）上設置（修改）超鏈接到網站地址：選中文字（圖片）→ 在選中區域右擊 → 超鏈接（超鏈接屬性）→ 單擊“原有文件或網頁”按鈕 → 在地址欄中輸入網址 → 確定。
示例：超鏈接到“中央電視臺”http://常見錯誤：（1）只有（2）http://http://2
02.鏈接到文件：選中文字（圖片）→ 在選中區域右擊 → 超鏈接（超鏈接屬性）→ 單擊“原有文件或網頁”按鈕 → 找到并選中文件（必須到考生文件夾中去尋找所要鏈接的文件，包括擴展名都要正確。顯示擴展名的操作：打開一個文件夾 → 工具→ 文件夾選項 →“查看”標簽 → 去掉“隱藏已知文件類型的擴展名”前面的對號 → 確定）→ 確定
示例：鏈接文件germ.htm
常見錯誤： http://germ.htm
03.鏈接到電子郵件：選中文字（圖片）→ 在選中區域右擊 → 超鏈接（超鏈接屬性）→ 單擊“電子郵件地址”按鈕 → 電子郵件地址欄中輸入電子郵件地址 → 確定
示例：超鏈接到abc@163.com
常見錯誤：（1）只有myname@163.com（2）http:// myname@163.com
五、新建網頁（保存位置是考生文件夾、文件名要正確）
文件 → 新建 → 空白網頁（開始 → 所有程序 → Microsoft Office → Microsoft Office FrontPage 2003）→ 按照題意制作網頁 → 文件 → 保存 → 選擇保存位置和輸入文件名 → 保存 → 關閉窗口
網頁制作
教學目標：
1、了解網頁的主要構成內容
2、學會網頁的布局
3、學會網頁中插入圖片，文字設置，插入超鏈接的方法 教學內容：
1、啟動FrontPage “開始”菜單——程序——Microsoft office——Microsoft FrontPage
2、新建網頁：文件——新建——空白網頁
表格——表格布局 表格——插入表格
專心
愛心
用心 1
調整表格
插入圖片：
1． 插入：插入——圖片——剪貼畫（來自文件）2． 設置：右擊圖片（快捷菜單）——圖片屬性 3． 刪除：選擇圖片——按刪除鍵
調整圖片，單擊圖片，出現小黑方塊，就可調整圖片
專心
愛心
用心 2
文字的錄入：直接錄入。
復制——復制粘貼
文字的編輯：格式——字體
格式——段落
文字最后生成格式
專心
愛心
用心 3
超級鏈接：
1． 鏈接到郵箱
選擇“求助信箱圖片”——單擊超鏈接按鈕——選擇“郵件超鏈接”按鈕——輸入郵箱地址——確定
2． 鏈接到其他網頁、網站
選擇鏈接文字——單擊超鏈接按鈕——輸入指定網頁地址——確定 3． 取消超鏈接
選擇超鏈接部分——單擊超鏈接按鈕——刪除URL地址欄的內容——確定
保存：文件——保存
保存位置為F：/**班級/
專心
愛心
用心 4
網頁制作與設計教案
第一講 網頁設計概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網頁中所使用的技術............................................................................................................4 1.4 制作網頁的基本方法............................................................................................................4 第二講 HTML的基本標志與格式標志.......................................................................................4 2.1 HTML文檔的基本結構.........................................................................................................5 第三講 HTML的文本、圖片與超級鏈接標志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標志綜合運用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態網頁設計.............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級鏈接的運用..................................................................................................................14 3.4.表格的應用.........................................................................................................................14 3.5.在網頁中創建表單.............................................................................................................15 第八講 DREAMWEAVER中動態網頁設計.............................................................................15 第九講 DREAMWEAVER綜合性網頁設計案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語言簡介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數據類型.......................................................................................................................18 4.2.表達式和運算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環語句和過程.............................................................20 4.3 VBSCRIPT基本語句.............................................................................................................20
第一講 網頁設計概述
【教學內容】
講解網頁設計的相關術語及網站制作的基本流程。【教學目的】
使學生對網站及網頁有一定的認識，激發學生學習網頁設計的興趣。【教學重點】
網頁設計中的若干術語。【教學難點】
理解網頁設計中的若干術語。【教學方式】
講授式、討論式、案例分析式。【教學參考】
1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。
2、《Internet 網頁工場》Wittime工作室 重慶出版社。
3、《WEB網站設計》Joel Sklar著 高等教育出版社。
4、《HTML網頁制作教程》材義語編著 鐵道出版社。【新課內容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡稱，一般也稱之為WWW或3W 1.1.2 Web的特點和結構
Web最大的特點是使用了超文本（Hypertext）WWW采用C/S（客戶機/服務器）工作模式
在瀏覽器和服務器之間應用HTTP（Hyper Text Transfer Protocol，超文本傳輸協議）作為網絡應用層通信協議 1.1.3 URL URL的完整格式
協議://主機名或IP地址：端口號/路徑名/文件名
1.2 IE5的使用
Web瀏覽器是瀏覽Internet資源的客戶端軟件
在Windows環境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表標志的使用。【教學方式】
討論式、案例分析式、練習式。【教學參考】
1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。
2、《WEB網站設計》Joel Sklar著 高等教育出版社。
3、《HTML網頁制作教程》材義語編著 鐵道出版社。【新課內容】
2.1 HTML文檔的基本結構
2.1.1 HTML語法
1、雙標記
語法：
<標記>內容
2、單標記 語法：<標記> 最常用的單標記是
3、標記屬性 語法
<標記
屬性1 屬性2 屬性3 … > 例子
4、注釋語句 格式
例子
2.1.2 HTML文檔的基本結構 【課后小結】
通過本次課的學習,要求能熟練掌握網頁面的基本標志與格式標志,并能靈活運用 列表,有序列表,無序列表標志及屬性。
第三講 HTML的文本、圖片與超級鏈接標志
【教學內容】
講解HTML標準中的文本、圖片與超級鏈接標志 【教學目的】
* 使學生了解標題元素,掌握字體,上下標,及特殊字符的標志。
< EM>......，強調文字，通常用斜體。
< STRONG>......，特別強調的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對于前面的文字增大一級。
......，使文字大小相對于前面的文字減小一級。......，使文字成為前一個字符的上標。......，使文字成為前一個字符的下標。......，使文字顯示為閃爍效果。2.2.6
文本修飾 2.2.7
預格式化文本 使用預格式化標記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉義字符與特殊字符
一般轉義符都是以“&”開始，以“；”結束，一個轉義符之間不能有空格 2.2.9 文本強制換行和不換行 文本強制換行
不換行 2.2.10 插入水平線 使用
標記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無序列表
2、有序列表
- 列表條目1
- 列表條目2......
3、定義列表
- 列表條目1
- 條目1的說明
- 列表條目2
- 條目2的說明 ……
...... 2.4.4 圖像地圖 【課后小結】
本節介紹了在網頁中加入文本、圖片和超級鏈接的標志與相應屬性，熟練運用這些標志是制作多媒體網頁的基礎。超級鏈接標志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學習HTML中超級鏈接標志的難點。
第四講 HTML表格、表單與框架標志
【教學內容】
講解HTML中制作表格、表單與框架的標志。【教學目的】
使學生掌握簡單表格、表單與框架的制作。【教學重點】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標志與屬性。【教學難點】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實現的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應元素對應標志及屬性的含義。【教學方式】
案例分析式、項目教學 【教學參考】
1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。
2、《WEB網站設計》Joel Sklar著 高等教育出版社。
3、《HTML網頁制作教程》材義語編著 鐵道出版社。【新課內容】
2.5 插入表格
2.5.1 在網頁中插入表格
表格的基本構成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口屬性設置
2.7.4 常見的框架窗口劃分方法（1）標題和正文，分為上下兩部分（2）層次結構，分為上中下三部分
（3）目錄和標題，分為左上、左下、右三部分
（4）標題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網頁
