第一節 制作簡單的網頁
（一）教學對象分析
學生在學習本內容前，已經學習了利用Word制作簡單的網頁，并且初步掌握了制作網頁的一般流程及基本操作，具有進一步學習的能力。
（二）教學目標
1、了解Frontpage的界面組成及基本功能。
2、掌握在Frontpage中編輯文字、插入圖像的方法。
3、掌握在Frontpage中設置電子郵件超鏈接的方法。
4、培養學生在獲取信息的能力，使學生學會利用計算機和網絡搜集與準備網頁素材。
5、培養學生的知識遷移能力。
（三）教學重點
利用Frontpage制作簡單的網頁
（四）教學方法和手段
教學方法：以學生自學為主，教師輔導為輔。教學手段：多媒體網絡教學。
（五）教學過程
1、創設情境，導入新課：
展示幾幅優秀的網頁作品，激發學生學習專業網頁制作軟件的愿望。Frontpager 功能主要體現在：
1、網頁編輯功能。
2、網站管理功能。
一、啟動Frontpage i.ii.啟動Frontpage Frontpage窗口組成
二、用Frontpage制作網頁
1、輸入文字
2、設置字體、字號
3、插入剪貼畫
4、創建電子郵件超鏈接
三、保存網頁
四、預覽網頁 反饋操作情況情況
第二節 插入表格
（一）教學目標
了解Frontpage中使用表格的作用。掌握在Frontpage中插入表格的方法。能熟練在表格中輸入文字、插入圖片。
（二）教學重點
在Frontpage 中利用表格組織網頁結構。
（三）教學過程
導入新課，表格是網頁中經常使用的一種形式，表格里不僅可以存放文字、圖像等數據，還可以作為組織網頁內容的框架，使網頁整齊、美觀。
新課講授：
1、插入空表格
2、在表格中插入圖片
3、設置圖片屬性
4、輸入文字
5、設置表格屬性
6、插入表格標題
7、保存網頁、預覽網頁 本課總結
第三節 創建表單
（一）教學目標 了解表單的功能。
掌握在Frontpage中創建表單的方法。掌握在Frontpage中插入表單域的方法。
（二）教學重點 表單網頁的結果處理。
（三）教學過程
復習
1、如何制作圖文并茂的網頁？
2、表格在網頁中的主要作用？
3、在網頁中插入表格有幾種方法？ 導入新課、創設情境
展示幾幅含有表單域的網頁作品，例如調查表、申請表、提問：表單與表格的異同點？ 講授新課
一、利用表單網頁向導創建表單
1、建立表單
2、修改表單
3、處理表單結果
4、利用表單確認模板制作表單確認頁面
二、制作網頁背景 反饋操作情況 本課總結
課后任務：利用菜單欄中的命令在網頁中插入表單域。
第四節 利用框架制作首頁
（一）教學目標 了解框架的功能
掌握在Frontpage中使用框架的方法。掌握在Frontpage中建立超鏈接的方法。
（二）教學重點 利用框架制作首頁
（三）教學過程
復習：
1、如何制作表單頁？
2、表單的主要作用？
導入新課、創設情境：展示模范的網頁作品，激發學生學習的興趣。講授新課：
一、利用框架制作首頁
1、新建框架網頁
2、設置 右框中的初始網頁
3、保存網頁
4、建立左框中的網頁
二、建立超鏈接
二、制作網頁背景 保存網頁、游覽網頁 反饋操作情況 本課總結
課后任務：練習其他幾種超鏈接方式。宛善網頁。
第五節 站點管理
（一）教學目標 了解站點的基本知識。
掌握利用Frontpage建立站點的方法。掌握向站點中導入網頁的方法。
（二）教學重點 導入超鏈接
（三）教學過程 復習：
導入新課、創設情境：Frontpage不僅具有強大的網頁編輯功能，而且具有強大的管理站點的功能。講授新課：
一、建立站點
二、導入網頁
三、導入超鏈接 本課總結
第六節 發布站點
（一）教學目標 了解發布站點的一般流程
（二）教學重點
把站點發布到因特網上是本節的重點。
（三）教學過程 復習：
導入新課、創設情境：展示因特網上的優秀個人網站。講授新課：
一、把站點發布到本機
二、測試網站的表單功能
三、把網站發布到因特網上（介紹）本課總結
網頁制作與設計教案
第一講 網頁設計概述....................................................................................................................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
第一講 網頁設計概述
【教學內容】
講解網頁設計的相關術語及網站制作的基本流程?！窘虒W目的】
使學生對網站及網頁有一定的認識，激發學生學習網頁設計的興趣?！窘虒W重點】
網頁設計中的若干術語?！窘虒W難點】
理解網頁設計中的若干術語。【教學方式】
講授式、討論式、案例分析式?！窘虒W參考】
1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。
2、《Internet 網頁工場》Wittime工作室 重慶出版社。
3、《WEB網站設計》Joel Sklar著 高等教育出版社。
4、《HTML網頁制作教程》材義語編著 鐵道出版社?！拘抡n內容】
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的使用
列表標志的使用?！窘虒W方式】
討論式、案例分析式、練習式?！窘虒W參考】
1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。
2、《WEB網站設計》Joel Sklar著 高等教育出版社。
3、《HTML網頁制作教程》材義語編著 鐵道出版社?！拘抡n內容】
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中制作表格、表單與框架的標志?！窘虒W目的】
使學生掌握簡單表格、表單與框架的制作?！窘虒W重點】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標志與屬性?！窘虒W難點】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實現的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應元素對應標志及屬性的含義?！窘虒W方式】
案例分析式、項目教學 【教學參考】
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 不支持框架的網頁
