第一節(jié) 制作簡(jiǎn)單的網(wǎng)頁(yè)
（一）教學(xué)對(duì)象分析
學(xué)生在學(xué)習(xí)本內(nèi)容前，已經(jīng)學(xué)習(xí)了利用Word制作簡(jiǎn)單的網(wǎng)頁(yè)，并且初步掌握了制作網(wǎng)頁(yè)的一般流程及基本操作，具有進(jìn)一步學(xué)習(xí)的能力。
（二）教學(xué)目標(biāo)
1、了解Frontpage的界面組成及基本功能。
2、掌握在Frontpage中編輯文字、插入圖像的方法。
3、掌握在Frontpage中設(shè)置電子郵件超鏈接的方法。
4、培養(yǎng)學(xué)生在獲取信息的能力，使學(xué)生學(xué)會(huì)利用計(jì)算機(jī)和網(wǎng)絡(luò)搜集與準(zhǔn)備網(wǎng)頁(yè)素材。
5、培養(yǎng)學(xué)生的知識(shí)遷移能力。
（三）教學(xué)重點(diǎn)
利用Frontpage制作簡(jiǎn)單的網(wǎng)頁(yè)
（四）教學(xué)方法和手段
教學(xué)方法：以學(xué)生自學(xué)為主，教師輔導(dǎo)為輔。教學(xué)手段：多媒體網(wǎng)絡(luò)教學(xué)。
（五）教學(xué)過程
1、創(chuàng)設(shè)情境，導(dǎo)入新課：
展示幾幅優(yōu)秀的網(wǎng)頁(yè)作品，激發(fā)學(xué)生學(xué)習(xí)專業(yè)網(wǎng)頁(yè)制作軟件的愿望。Frontpager 功能主要體現(xiàn)在：
1、網(wǎng)頁(yè)編輯功能。
2、網(wǎng)站管理功能。
一、啟動(dòng)Frontpage i.ii.啟動(dòng)Frontpage Frontpage窗口組成
二、用Frontpage制作網(wǎng)頁(yè)
1、輸入文字
2、設(shè)置字體、字號(hào)
3、插入剪貼畫
4、創(chuàng)建電子郵件超鏈接
三、保存網(wǎng)頁(yè)
四、預(yù)覽網(wǎng)頁(yè) 反饋操作情況情況
第二節(jié) 插入表格
（一）教學(xué)目標(biāo)
了解Frontpage中使用表格的作用。掌握在Frontpage中插入表格的方法。能熟練在表格中輸入文字、插入圖片。
（二）教學(xué)重點(diǎn)
在Frontpage 中利用表格組織網(wǎng)頁(yè)結(jié)構(gòu)。
（三）教學(xué)過程
導(dǎo)入新課，表格是網(wǎng)頁(yè)中經(jīng)常使用的一種形式，表格里不僅可以存放文字、圖像等數(shù)據(jù)，還可以作為組織網(wǎng)頁(yè)內(nèi)容的框架，使網(wǎng)頁(yè)整齊、美觀。
新課講授：
1、插入空表格
2、在表格中插入圖片
3、設(shè)置圖片屬性
4、輸入文字
5、設(shè)置表格屬性
6、插入表格標(biāo)題
7、保存網(wǎng)頁(yè)、預(yù)覽網(wǎng)頁(yè) 本課總結(jié)
第三節(jié) 創(chuàng)建表單
（一）教學(xué)目標(biāo) 了解表單的功能。
掌握在Frontpage中創(chuàng)建表單的方法。掌握在Frontpage中插入表單域的方法。
（二）教學(xué)重點(diǎn) 表單網(wǎng)頁(yè)的結(jié)果處理。
（三）教學(xué)過程
復(fù)習(xí)
1、如何制作圖文并茂的網(wǎng)頁(yè)？
2、表格在網(wǎng)頁(yè)中的主要作用？
3、在網(wǎng)頁(yè)中插入表格有幾種方法？ 導(dǎo)入新課、創(chuàng)設(shè)情境
展示幾幅含有表單域的網(wǎng)頁(yè)作品，例如調(diào)查表、申請(qǐng)表、提問：表單與表格的異同點(diǎn)？ 講授新課
一、利用表單網(wǎng)頁(yè)向?qū)?chuàng)建表單
1、建立表單
2、修改表單
3、處理表單結(jié)果
4、利用表單確認(rèn)模板制作表單確認(rèn)頁(yè)面
二、制作網(wǎng)頁(yè)背景 反饋操作情況 本課總結(jié)
課后任務(wù)：利用菜單欄中的命令在網(wǎng)頁(yè)中插入表單域。
第四節(jié) 利用框架制作首頁(yè)
（一）教學(xué)目標(biāo) 了解框架的功能
掌握在Frontpage中使用框架的方法。掌握在Frontpage中建立超鏈接的方法。
（二）教學(xué)重點(diǎn) 利用框架制作首頁(yè)
（三）教學(xué)過程
復(fù)習(xí)：
1、如何制作表單頁(yè)？
2、表單的主要作用？
導(dǎo)入新課、創(chuàng)設(shè)情境：展示模范的網(wǎng)頁(yè)作品，激發(fā)學(xué)生學(xué)習(xí)的興趣。講授新課：
一、利用框架制作首頁(yè)
1、新建框架網(wǎng)頁(yè)
2、設(shè)置 右框中的初始網(wǎng)頁(yè)
3、保存網(wǎng)頁(yè)
4、建立左框中的網(wǎng)頁(yè)
二、建立超鏈接
二、制作網(wǎng)頁(yè)背景 保存網(wǎng)頁(yè)、游覽網(wǎng)頁(yè) 反饋操作情況 本課總結(jié)
課后任務(wù)：練習(xí)其他幾種超鏈接方式。宛善網(wǎng)頁(yè)。
第五節(jié) 站點(diǎn)管理
（一）教學(xué)目標(biāo) 了解站點(diǎn)的基本知識(shí)。
掌握利用Frontpage建立站點(diǎn)的方法。掌握向站點(diǎn)中導(dǎo)入網(wǎng)頁(yè)的方法。
（二）教學(xué)重點(diǎn) 導(dǎo)入超鏈接
（三）教學(xué)過程 復(fù)習(xí)：
導(dǎo)入新課、創(chuàng)設(shè)情境：Frontpage不僅具有強(qiáng)大的網(wǎng)頁(yè)編輯功能，而且具有強(qiáng)大的管理站點(diǎn)的功能。講授新課：
一、建立站點(diǎn)
二、導(dǎo)入網(wǎng)頁(yè)
三、導(dǎo)入超鏈接 本課總結(jié)
第六節(jié) 發(fā)布站點(diǎn)
（一）教學(xué)目標(biāo) 了解發(fā)布站點(diǎn)的一般流程
（二）教學(xué)重點(diǎn)
把站點(diǎn)發(fā)布到因特網(wǎng)上是本節(jié)的重點(diǎn)。
（三）教學(xué)過程 復(fù)習(xí)：
導(dǎo)入新課、創(chuàng)設(shè)情境：展示因特網(wǎng)上的優(yōu)秀個(gè)人網(wǎng)站。講授新課：
一、把站點(diǎn)發(fā)布到本機(jī)
二、測(cè)試網(wǎng)站的表單功能
三、把網(wǎng)站發(fā)布到因特網(wǎng)上（介紹）本課總結(jié)
網(wǎng)頁(yè)制作與設(shè)計(jì)教案
第一講 網(wǎng)頁(yè)設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁(yè)中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁(yè)的基本方法............................................................................................................4 第二講 HTML的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級(jí)鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡(jiǎn)單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................13 3.2 在頁(yè)面中加入文字和圖像..................................................................................................14 3.3 超級(jí)鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁(yè)中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁(yè)設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語(yǔ)言簡(jiǎn)介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語(yǔ)句、循環(huán)語(yǔ)句和過程.............................................................20 4.3 VBSCRIPT基本語(yǔ)句.............................................................................................................20
第一講 網(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ǔ)。【教學(xué)方式】
講授式、討論式、案例分析式。【教學(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 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡(jiǎn)稱，一般也稱之為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地址：端口號(hào)/路徑名/文件名
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í)式?！窘虒W(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
2.1 HTML文檔的基本結(jié)構(gòu)
2.1.1 HTML語(yǔ)法
1、雙標(biāo)記
語(yǔ)法：
<標(biāo)記>內(nèi)容
2、單標(biāo)記 語(yǔ)法：<標(biāo)記> 最常用的單標(biāo)記是
3、標(biāo)記屬性 語(yǔ)法
<標(biāo)記
屬性1 屬性2 屬性3 … > 例子
4、注釋語(yǔ)句 格式
例子
2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】
通過本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁(yè)面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無(wú)序列表標(biāo)志及屬性。
第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志
【教學(xué)內(nèi)容】
講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級(jí)鏈接標(biāo)志 【教學(xué)目的】
* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。
< EM>......，強(qiáng)調(diào)文字，通常用斜體。
< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對(duì)于前面的文字增大一級(jí)。
......，使文字大小相對(duì)于前面的文字減小一級(jí)。......，使文字成為前一個(gè)字符的上標(biāo)。......，使文字成為前一個(gè)字符的下標(biāo)。......，使文字顯示為閃爍效果。2.2.6
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開始，以“；”結(jié)束，一個(gè)轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行
不換行 2.2.10 插入水平線 使用
標(biāo)記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無(wú)序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
2、有序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
3、定義列表
- 列表?xiàng)l目1
- 條目1的說明
- 列表?xiàng)l目2
- 條目2的說明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁(yè)中加入文本、圖片和超級(jí)鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁(yè)的基礎(chǔ)。超級(jí)鏈接標(biāo)志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學(xué)習(xí)HTML中超級(jí)鏈接標(biāo)志的難點(diǎn)。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志?！窘虒W(xué)目的】
使學(xué)生掌握簡(jiǎn)單表格、表單與框架的制作?！窘虒W(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性。【教學(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)成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | 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)頁(yè)
