南岳學院

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

網頁設計與制作知識點

第一部分HTML

1.在常用表格模式下進行網頁布局（經濟學專業編號）

2.在布局表格下進行布局

1．制作雙線邊框的表格（南岳學院電商編號）

2．制作單線邊框的表格

1．制作占位表格（電商編號）

2．各種文字超鏈接的制作（一般鏈接，錨鏈接，email鏈大寒文案 接及打開方式）

3．制作圖像鏈接和熱區鏈接

4．在表格中插入圖片和透明flash

5．制作用戶登錄表單

無序列表的使用（無序列表的嵌套）（此條不做）

6．層與行為（顯示隱藏層，交換圖像）

第二部分CSS

7．修改文字大小和行距

8．制作動態超鏈接(a:hover)

9．用CSS創建交互（a元素的交互和非a元素的交互）

10．制作首字下沉和圖文混排和分欄（float定位）

11．相對定位和絕對定位的實驗

12．（此學號為空）

13．美化表單樣式(盒子的邊框背景屬性)

14．用CSS盒子模型制作導航條

15．用無序列表制作tab樣式導航條

16．利用盒子的定位屬性制作缺角菜單

17．用滑動門技術制作圓角菜單

18．用4圖象法制作可變寬圓角欄目框

19．CSS＋DIV固定寬度的三欄布局

20．可變寬度布局的制作

第三部分Fireworks

21．規則和不規則圖形的繪制（組合路徑）

22．圖片融合技術（填充、漸變和蒙版）

23．文字效果（陰影、倒影、描邊）

24．用fireworks做按鈕和下拉菜單

25．切片和圖像的導出

第四部分JavaScript

26．制作層的Zindex改變的導航條

27．用CSS和JavaScript制作下拉菜單

28．制作Tab面板

-1-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

第五部分ASP

29．創建虛擬目錄和動態站點

30．將靜態網頁轉換為動態網頁（切割頭尾網頁，導出CSS文件）

31．數據庫的連接

32．創建記錄集

33．綁定動態數據到頁面

34．創建重復區域服務器行為

35．轉到詳細頁面服務器行為

36．記錄新聞點擊次數

37．創建記錄集分頁

38．新聞搜索頁面的設計

39．插入動態圖片

40．用IIF函數將過長新聞標題用省略號取代后部

41．創建用戶登錄驗證界面（包括驗證表單數據不為空）

42．限制非注冊用戶對頁的訪問

43．創建添加新聞頁面

44．創建編輯新聞頁面

練習

第一章HTML

1．分析一個URL的結構

//web/1/200807/

信息被放在一臺被稱為www的服務器上，是一個已被注冊的域名，域名對應一臺

DNS服務器，cn表示中國，主機名，域名合稱為主機頭。/web/是服務器網站目錄下的一個

文件夾，這個一致資源地址將帶你到這個文件，是網頁的文件名

2．一個最簡單HTML文檔的結構

3．HTML元素由標記

??

4．帶有屬性的HTML元素的結構

-2-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

例1：下列HTML元素的寫法分別錯在什么地方？

5．常見的HTML標記

1)基本標記

2)

3)

4)

5)

文本標記

段落標記

圖像標記

表格標記

6)列表標記

7)表單標記

6．HTML標記的分類

1）單標記和配對標記

2）行內元素和塊級元素

7．HTML元素和XHTML元素的區別

在HTML語言規范的基礎上，XHTML元素還有下面一些額外的要求：

1）必須小寫；2）屬性值必須用雙引號引起；3）所有標記包括單標記都必須封閉。

例2：下列哪條html語句的寫法符合XHTML規范：（）

A
B

CD

8．Dreamweaver中插入HTML標記的一些快捷方式：

Enter插入

??

Ctrl＋shift＋space插入 

-3-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

第一講網頁設計概述

【教學內容】

講解網頁設計的相關術語成都游玩 及網站制作的基本流程。

【教學目的】

使學生對網站及網頁有一定的認識，激發學生學習網頁設計的興趣。

【教學重點】

網頁設計中的若干術語。

【教學難點】

理解網頁設計中的若干術語。

【教學方式】

講授式、討論式、案例分析式。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《Internet網頁工場》Wittime工作室重慶出版社。

3、《WEB網站設計》JoelSklar著高等教育出版社。

4、《HTML網頁制作教程》材義語編著鐵道出版社。

【新課內容】

1.1WWW和URL

1.1.1Web的起源

Web是WorldWideWeb的簡稱，一般也稱之為WWW或3W

1.1.2Web的特點和結構

Web最大的特點是使用了超文本（Hypertext）

WWW采用C/S（客戶機/服務器）工作模式

在瀏覽器和服務器之間應用HTTP（HyperTextTransferProtocol，超文本傳輸協議）作

為網絡應用層通信協議1.1.3URL

URL的完整格式

協議://主機名或IP地址：端口號/路徑名/文件名

1.2IE6等瀏覽器的使用

Web瀏覽器是瀏覽Internet資源的客戶端軟件

在Windows環境下使用的瀏覽器主要有InternetExplorer、NetscapeNavigator、Mosaic

Firefox等

1.2.1IE6,IE7，Firefox的界面

1.2.2IE6,IE7，Firefox的使用

-4-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

1.3網頁中所使用的技術

1.3.1HTML語言和XML語言

1、HTML語言

HTML只使用SGML中很小一部分標記

HTML語言（HyperTextMarkupLanguage超文本標記語言）

HTML是純文本的語言，其源代碼可以用各種文本編輯工具進行編輯，常用的網頁制

作軟件如FrontPage、Dreamweaver等實際上是自動生成HTML源代碼的工具

2、XML語言

XML（eXtensibleMarkupLanguage）

1.3.2動態網頁

1.3.3多媒體技術的應用

1.3.4Web服務器端程序

1.4制作網頁的基本方法

1.4.1制作網頁的基本步驟

1、確定網頁的內容

2、設計網頁的組織結構

3、資料的收集與整理

4、選擇網頁的設計方法

1.4.2制作網頁時要注意的問題

1、網頁的標題要簡潔，明確。

2、在文本中要使用水平線，以分割不同部分。

3、對重點段落要強調顯示。

4、網頁中插入的圖片要盡量的小。

5、圖形要附加文字說明，以便關閉圖像時查看。

6、網頁中引用的資料及商標（或圖標），不能侵犯版權。

【課后小結】

通過學習，認識網絡、網站、網頁及相關信息，理解網頁制作的流程及了解相應開發工

具，為設計網頁做準備。

第二講HTML的基本標志與格式標志

【教學內容】

講解HTML基本標志對和格式標志。

【教學目的】

使學生標志對與格式標志對的使用。

【教學重點】

格式標志的使用。

【教學難點】

-5-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

列表標志的使用。

【教學方式】

討論式、案例分析式、練習式。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》JoelSklar著高等教育出版社。

3、《HTML網頁制作教程》材義語編著鐵道出版社。

【新課內容】

2.1HTML文檔的基本結構

2.1.1HTML語法

1、雙標記

語法：

<標記>內容

2、單標記

語法：<標記>

最常用的單標記是

3、標記屬性

語法

<標記屬性1屬性2屬性3…>

例子

4、注釋語句

格式

例子

2.1.2HTML文檔的基本結構

【課后小結】

通過本次課的學習,要求能熟練掌握網頁面的基本標志與格式標志,并能靈活運用

列表,有序列表,無序列表標志及屬性。

第三講HTML的文本、圖片與超級鏈接標

志

【教學內容】

講解HTML標準中的文本、圖片與超級鏈接標志

【教學目的】

*使學生了解標題元素,掌握字體,上下標,及特殊字符的標志。

-6-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

*使學生掌握圖片標志,聲音標志及相應的屬性,學會利用標志在網頁中插入聲音與圖

片。

*使學生掌握超級鏈接標志的使用。

【教學重點】

*字體、圖片和超級鏈接標志的使用。

*網頁中特殊符號的輸入。

【教學難點】

*理解特殊符號對應的標志。

*理解img標志中屬性的意義。

*理解書簽超級鏈接的意義。

【教學方式】

討論式、案例分析式、練習式。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》JoelSklar著高等教育出版社。

3、《HTML網頁制作教程》材義語編著鐵道出版社。

【新課內容】

2.2插入文字

2.2.1劃分段落

格式

段落內容

2.2.2插入標題文字

格式

標題內容

2.2.3字號屬性

設置基準字號：

網頁內的其他文字，采用下面的格式來定義

......

Size的有效范圍是1（最大）到7（最小）。如果在Size的值前面帶上“+”號或“-”號，則

表示相對于基礎字體增大或減小若干字號。

2.2.4顏色屬性

兩種方式

字符串

2.2.5字體屬性

2.2.6文本修飾

......，文字以粗體顯示。

......，文字顯示為斜體。

......，顯示下劃線。

......，中心線貫穿文字。

-7-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

......，強調文字，通常用斜體。

......，特別強調的文字，通常用黑體。

......，以等寬體顯示西文字符。

......，使文字大小相對于前面的文字增大一級。

......，使文字大小相對于前面的文字減小一級。

^......，使文字成為前一個字符的上標。

_......，使文字成為前一個字符的下標。

......，使文字顯示為閃爍效果。

2.2.6文本修飾

2.2.7預格式化文本

使用預格式化標記

不再忽略在此之間的空格、制表符與回車符等元素

2.2.8轉義字符與特殊字符

一般轉義符都是以“&”開始，以“；”結束，一個轉義符之間不能有空格

2.2.9文本強制換行和不換行

文本強制換行

不換行

2.2.10插入水平線

使用

屬性：Width，Size，Align，Noshade，color

2.2.11使用列表

1、無序列表

列表條目1

......

2、有序列表

列表條目1

3、定義列表

……

-8-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

2.3插入圖片

2.3.1在網頁中插入圖片

基本格式

2.3.2圖片的屬性

2.4建立超級鏈接

2.4.1指向一個目標

1、建立超級鏈接

字符串

2、為圖片建立超級鏈接

3、鏈接到郵件和多媒體文件

鏈接到郵件

請與我聯系

2.4.2使用錨點

使用錨點可以使用戶在一個較長的文檔中跳轉，方便地找到要閱讀的內容。

建立錨點：

錨點文字

使超級鏈接指向已定義的錨點。

文字

文字

2.4.3新窗口和基準鏈接

1、打開新窗口

Target="window-name">開一個新窗口

2、基準鏈接

在與之間設定

2.4.4圖像地圖

圖像地圖的格式為：

-9-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

......

2.4.4圖像地圖

【課后小結】

本節介紹了在網頁中加入文本、圖片和超級鏈接的標志與相應屬性，熟練運用這些標志

是制作多媒體網頁的基礎。超級鏈接標志中，書簽鏈接是一類特殊的鏈接方式，理解和

使用書簽鏈接學習HTML中超級鏈接標志的難點。

第四講HTML表格、表單與框架標志

【教學內容】

講解HTML中制作表格、表單與框架的標志。

【教學目的】

使學生掌握簡單表格、表單與框架的制作。

【教學重點】

*表格中單元格的合并以及表格嵌套和疊加操作。

*框架的嵌套使用。

*表單元素標志與屬性。

【教學難點】

*理解表格屬性rowspan與colspan的含義以及表格嵌套實現的基本思想。

*理解框架屬性name、target的意義。

*理解表單中相應元素對應標志及屬性的含義。

【教學方式】

案例分析式、項目教學

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》JoelSklar著高等教育出版社。

3、《HTML網頁制作教程》材義語編著鐵道出版社。

【新課內容】

2.5插入表格

2.5.1在網頁中插入表格

表格的基本構成元素：表頭，單元格，列，行

2.5.2嵌套的表格

2.5.3表格的屬性設置

2.5.4單元格屬性設置

2.6表單的應用

表單在Web網頁中用來給訪問者填寫信息，從而能獲得用戶信息，使網頁具有交互的

功能。

2.6.1創建表單

2.6.2用定義用戶交互

（1）單行文本輸入區

（2）密碼輸入區

（3）單選框

（4）復選框

（5）隱藏區域

（6）按鈕

2.6.3定義下拉式菜單

你選修的課程：

計算機

英語

邏輯學

心理學

2.6.4定義多行文字輸入區域

請輸入你的詳細介紹：

文字

2.7框架窗口

框架把窗口劃分成幾個子窗口，各個子窗口可以調入各自的HTML文檔，最后形成充

滿整個窗口的網頁。

2.7.1框架的定義

2.7.2框架屬性設置

Rows="pixels，*“

FrameBborder="0“Border=0

-11-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

FrameSpacing="2“

BorderColor="#008000“

>

2.7.3子窗口屬性設置

FrameBorder="0"NoresizeFrameSpacing="6"BorderColor="#0000FF"Target="rtop">

2.7.4常見的框架窗口劃分方法

（1）標題和正文，分為上下兩部分

（2）層次結構，分為上中下三部分

（3）目錄和標題，分為左上、左下、右三部分

（4）標題、目錄和正文，分為上、左下、右下三部分

（5）嵌套目錄，分為左、右上、右下三部分

2.7.5不支持框架的網頁

</p></div><div><p><BODY>很抱歉，饋下使用的瀏覽器不支援框架功能，請轉用新的瀏覽器。</p></div><div><p></BODY></p></div><div><p>

2.7.6內部框架

【課后小結】

表格在網頁設計中應用廣泛，熟練掌握表格的基本標志及配合使用的屬性的意義，是靈

活運用表格的基礎。表格的嵌套是表格制作中的一個難點，關鍵是要抽象出嵌套表格對

應的簡單表格模型，再將模型中單元格的位置使用內嵌表格代替。

框架結構是布局網頁的一種常用方式，要掌握框架及其嵌套的實現，以及在框架中設置

超級鏈接時目標框架位置的設置。

表單是網頁實現交互處理的工具,熟練掌握表單中元素的標志和屬性，是設計表單網頁

關鍵。

第五講HTML標志綜合運用案例

【教學內容】

綜合運用所學過的HTML標志書寫網頁。

【教學目的】

使學生能夠書寫簡單的HTML網頁。

【教學重點】

使用所學的HTML標志書寫網頁。

【教學難點】

HTML的綜合運用。

【教學方式】

案例分析式、討論式、練習式。

-12-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》JoelSklar著高等教關于文明的詩 育出版社。

3、《HTML網頁制作教程》材義語編著鐵道出版社。

【新課內容】

1、用記事本書寫HTML網頁。

2、利用案例進行HTML網頁的綜合講解。

3、要求學生按規定書寫一個完整的HTNL網頁。

【課后小結】

HTML是目前制作網頁時必須掌握的一種語言，學好HTML語言是為以后對《網頁設

計》這門課程更深入的學習打下扎實的基礎。

第六講Dreamweaver中簡單WEB站點建

立與管理

【教學內容】

講解Dreamweaver的工作界面和基本操作。

【教學目的】

使學生掌握網頁制作工具Dreamweaver的基本操作方式。

【教學重點】

網頁制作工具Dreamweaver的界面和基本基本操作。

【教學難點】

掌握一個新的開發工具。

【教學方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》JoelSklar著高等教育出版社。

3、《Dreamweaver網頁設計案例教程》白煜編著清華大學出版社。

4、《DreamweaverMX2004完美網頁設計與制作》姜楠編著中國青年出版社。

【新課內容】

3.1Dreamweaver概述

3.1.1Dreamweaver的工作界面

3.1.2Dreamweaver4的基本操作

1、直接建立新網頁

“文件”→“新建”(Ctrl+N)

2、打開已有的網頁

“文件”→“打開”

3、保存編輯過的網頁

-13-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

“文件”→“保存”，直接保存

“文件”→“另存為”,換名保存

4、預覽正在編輯的網頁

“文件”→“在預覽器中預覽”

5、設置網頁屬性

“修改”→“頁面設置”

（1）標題

（2）背景圖像

（3）背景色

（4）文字顏色

（5）超級鏈接顏色

（6）左邊界上邊界

（7）文件編碼方式

（8）網頁藍圖

6、導入Word文件

“文件”→“導入”→“導入WordHTML”

3.1.3用Dreamweaver創建和管理站點

1、創建本地站點

“站點”

→“新建站點”

2、管理站點

“站點”

→“定義站點”

3、上傳和下載文件

【課后小結】

Dreamweaver是一款由Macromedia公司開發的專業HTML編輯器，用于對WEB站點、

WEB頁面和WEB應用程序進行設計、編碼和開發。無論是剛接觸網頁設計的初學者

還是專業的WEB開發人員，Dreamweaver都在前衛的設計理念和強大的軟件功能方面

給予了充分可靠的支持。因此學好Dreamweaver對以后的網頁設計有很大的幫助。

第七講Dreamweaver中靜態網頁設計

【教學內容】

講解利用Dreamweaver進行靜態頁面的制作。

【教學目的】

使學生掌握利用Dreamweaver對頁面進行文本、圖象、超級鏈接、表格以及框架等的

編輯。

【教學重點】

通過對工具軟件Dreamweaver的操作，制作出完整的靜態頁面。

【教學難點】

了解靜態網頁的含義

【教學方式】

講授式、項目模塊式、演示教學。

-14-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》JoelSklar著高等教育出版社。

3、《Dreamweaver網頁設計案例教程》白煜編著清華大學出版社。

4、《DreamweaverMX2004完美網頁設計與制作》姜楠編著中國青年出版社。

【新課內容】

3.2在頁面中加入文字和圖像

3.2.1文字的添加和處理

（1）文字屬性面板的使用

3.2.2插入和優化圖像

（1）準備圖像

把網頁中所用到的圖像文件預先拷貝到站點文件夾中

（2）插入圖像

（3）設置圖像屬性

（4）創建圖像地圖

3.3超級鏈接的運用

3.3.1插入超級鏈接

（1）直接在屬性面板的鏈接項填入鏈接的地址。

（2）在屬性面板單擊瀏覽文件按鈕打開瀏覽窗口來選擇鏈接的網頁。

（3）利用指向文件圖標創建鏈接。

3.3.2超級鏈接的運用

（1）鏈接其他網站

在鏈接欄填寫URL

選擇目標網頁顯示的窗口。_blank、parent、_lf、_top

（2）鏈接其他文件

輸入網頁文件名外

使用屬性面板上的指向文件圖標，創建內部鏈接

（3）鏈接E-mail

直接在鏈接欄填寫E-mail地址。

利用對象面板插入E-mail

（4）錨點鏈接

建立錨點:“隱藏”→“插入命令錨點”→填入錨點的名稱

建立錨點鏈接:在鏈接欄中輸入符號“#”和錨點名稱。

3.4.表格的應用

3.4.1表格的創建

A.創建表格

-15-

衡陽師范學院經濟與法律系《網頁設計與制詩經中的好名字 作》教案唐四薪

（1）使用菜單“插入”→“表格”。

（2）單擊對象面板上的子菜單中插入表格按鈕。

（3）按CTRL+ALT+T組合鍵。

B.選擇表格元素

（1）選取整個表格

（2）選擇行和列

（3）選擇單元格

3.4.2表格屬性的設置

1、表格整體屬性設置

2、行列和單元格屬性設置

3.5.在網頁中創建表單

A創建表單

“插入”→“表單”

使用菜單“窗口”調出“對象”面板，“表單”→“插入”

B添加表單元素

（1）添加文本域

“插入”→“表單對象”→“文本域”

設置TextField，字符寬度，最多字符，類型

（2）添加選擇域

①在表單中插入單選按鈕。“插入”→“表單對象”→“單選按鈕”

②在表單中插入復選按鍵。“插入”→“表單對象”→“復選鈕”

（3）添加列表和下拉式菜單

（4）添加按鈕

（5）添加文件域

【課后小結】

了解靜態網頁的含義，利用DreamweaverMX2004的強大功能制作出各色各樣的頁面，

為以后的學習打下堅實的基礎。

第八講Dreamweaver中動態網頁設計

【教學內容】

講解利用Dreamweaver進行動態頁面的制作。

【教學目的】

使學生掌握利用Dreamweaver作出簡單的動態頁面。

【教學重點】

理解動態頁面的含義以及數據庫的使用。

【教學難點】

了解動態網頁的含義。

【教學方式】

講授式、項目模塊式、演示教學。

-16-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》JoelSklar著高等教育出版社。

3、《Dreamweaver網頁設計案例教程》白煜編著清華大學出版社。

4、《DreamweaverMX2004完美網頁設計與制作》姜楠編著中國青年出版社。

【新課內容】

1、初識數據庫與ASP

2、建立數據庫

3、在DreamweaverMX2004中連接數據庫

4、綁定數據庫

5、顯示記錄

6、添加記錄

7、修改記錄

8、刪除記錄

【課后小結】

了解動態網頁的含義，本節詳細的介紹了如何在DreamweaverMX2004中實現與數據

庫的連接。動態網頁是當今的主流，學好動態網頁的制作是必須的。

第九講Dreamweaver綜合性網頁設計案例

【教學內容】

實例講解利用Dreamweaver進行留言本的制作。

【教學目的】

使學生掌握利用Dreamweaver作出簡單的動態站點。

【教學重點】

動態站點的制作流程。

【教學難點】

數據庫的創建、連接與顯示。

【教學方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》JoelSklar著高等教育出版社。

3、《Dreamweaver網頁設計案例教程》白煜編著清華大學出版社。

4、《DreamweaverMX2004完美網頁設計與制作》姜楠編著中國青年出版社。

【新課內容】

1、制定網站設計方案。

2、建立數據庫。

3、在DreamweaverMX2004中創建站點。

4、在DreamweaverMX2004中連接數據庫。

5、發表、編輯、刪除留言部分制作。

6、管理留言

【課后小結】

-17-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

通過具體實例的講解剖析，使學生更加直觀的了解了動態網站的制作流程。留言本是一

個典型的并且簡單的動態站點案例，上手容易。

第十講VBScript概述

【教學內容】

講解VBScript的基本概念及其特點。

【教學目的】

使學生對VBScript有個初步的了解。

【教學重點】

什么是VBScript。

【教學難點】

如何在HTML頁面中添加VBScript代碼。

【教學方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》張錦祥主編科學出版社。

3、《網頁編程技術與實例》譚浩強主編人民郵電出版社。

【新課內容】

4.1VBScript語言簡介

4.1.1什么是VBScript

VBScript是一種基于對象和事件驅動并具有安全性能的腳本語言。

具有以下幾個基本特點：

(1)是一種腳本編寫語言

(2)是基于對象的語言

(3)簡單性

(4)安全性

(5)動態性

(6)跨平臺性

4.1.2VBScript程序運行和編輯環境

運行:在任何安裝IE或Navigator瀏覽器的計算機上

編輯：可以用任何文本文件編輯器（如Notepad、WordPad、WPS、DOS的EDIT命令

等）進行編輯，也可以用網頁制作工具編輯

4.1.3把VBScript代碼嵌入HTML文檔

4.1.3把VBScript代碼嵌入HTML文檔

("這是紫星的電腦世界");

alert("這是紫星的電腦世界");

【課后小結】

VBScript是程序開發語言VisualBasic家族的最新成員，可以將靈活的腳本應用于更廣

泛的領域，包括MicrosoftInternetExplorer中的Web客戶端腳本和MicrosoftInternet

InformationServer中的Web服務器端腳本。掌握VBScript是開發動態網站的必要條件。

第十一講VBScript的基本元素與輸入輸出

【教學內容】

講解VBScript的數據類型、常量、變量、運算符以及VBScript的基本語句。

【教學目的】

使學生對VBScript這種開發語言的基本語法有個初步認識。

【教學重點】

VBScript的基本元素與輸入輸出。

【教學難點】

對VBScript的數據類型、常量、變量、運算符建立起基本概念。

【教學方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》張錦祥主編科學出版社。

3、《網頁編程技術與實例》譚浩強主編人民郵電出版社。

【新課內容】

4.2.基本數據類型

數值（整數和實數）

字符串型（用“...”號或′...′括起來的字符或數值）

布爾型（使用True或Fal表示）

空值

VBScript采用弱類型的形式，因而一個數據的變量或常量不必首先作聲明

4.2.1基本數據類型

-19-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

1、常量

（1）整型常量

可以使用十六進制、八進制和十進制表示。

（2）實型常量

由整數部分加小數部分表示，如12.32、193.98。使用科學或標準方法表示：5E7、4e5

等。

（3）布爾值

只有兩種狀態：True或Fal。

（4）字符型常量

使用單引號“′”或雙引號“″”括起來的一個或幾個字符。

（5）空值（null）

（6）特殊字符（以反斜杠（）開頭的字符串）

2、變量

變量的主要作用是存取數據、提供存放信息的容器。

對于變量必須明確變量的命名、變量的類型、變量的聲明及其變量的作用域。

(1）變量的命名

Ａ、必須是一個有效的變量，央企高管薪酬 即變量以字母開頭，中間可以出現數字如test1、text2等。

除下劃線“_”作為連字符外，變量名稱不能有空格、＋、－、，或其它符號。

Ｂ、不能使用JavaScript中的保留字作為變量。

（2）變量的類型

（3）變量的聲明及其作用域

使用var關鍵字對變量作聲明

有全局變量和局部變量

4.2.表達式和運算符

１、表達式

可以分為算術表述式、字串表達式、賦值表達式以及布爾表達式等.

２、運算符

（1）雙目運算符和單目運算符

雙目運算符：操戍守邊關 作數1運算符操作數2

如50＋40、"This"+"that"等。

單目運算符只需一個操作數，其運算符可在前或后。

（2）算術運算符

（3）比較運算符

（4）邏輯運算符

3、注釋符

//，在本行中所有在“//”符號之后的字符將被解釋器忽略。

/*......*/，在/*和*/之間的所有字符（可持續多行）將被解釋器忽略。

【課后小結】

本節介紹了VBScript的基本元素，包括VBScript的數據類型、常量、變量和運算符，

并且初步提到了VBScript的輸入輸出基本語句，為下節課的內容作好準備。

-20-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

第十二講VBScript的條件語句、循環語句

和過程

【教學內容】

講解VBScript的一些基本語句以及過程。

【教學目的】

使學生基本掌握對VBScript的基本語句語法格式和過程。

【教學重點】

VBScript的基本語句語法格式。

【教學難點】

VBScript的基本語句語法格式和過程過于概念化抽象化，學生掌握有難度。

【教學方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》張錦祥主編科學出版社。

3、《網頁編程技術與實例》譚浩強主編人民郵電出版社。

【新課內容】

4.3VBScript基本語句

4.3.1控制程序流程

１、if條件語句

if(表達式){

語句段1;

......

}

el{

語句段2;.....

}

2、for循環語句

for(初始化；條件；增量)

3、while循環

while（條件）

語句集；

４、break和continue語句

break語句使得循環從for或while中跳出

continue使得跳過循環內剩余的語句而進入下一次循環

4.3.2函數

函數可以封裝那些在程序中可能要多次用到的模塊，并可作為事件驅動的結果而調用的

-21-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

程序。從而實現一個函數與事件驅動相關聯。事件可以是頁面調入、單擊、表單送出等。

【課后小結】

本節詳細介紹了VBScript的基本語句語法格式和過程，這些概念過于抽象化，學生掌

握過程中有很大難度，這就要求我們教師不斷的耐心的詳細的進行講解。

第十三講VBScript文檔對象模型

【教學內容】

講解VBScript的文檔對象模型。

【教學目的】

使學生掌握對VBScript文檔對象模型的理解和運用。

【教學重點】

什么是VBScript的文檔對象模型。

【教學難點】人力資源管理就業

VBScript文檔對象模型的靈活運用。

【教學方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、金鷹視后 《WEB網站設計》張錦祥主編科學出版社。

3、《網頁編程技術與實例》譚浩強主編人民郵電出版社。

【新課內容】

4.4基于對象的VBScript語言

4.4.1對象的基礎知識

1.對象的基本結構

2.引用對象的途徑

3.有關對象操作語句

（1）in語句

用于對已知對象的所有屬性進行操作的控制循環，它將一個已知對象的所有屬性反復賦

值給一個變量，而不是使用計數器來實現。此語句無需知道對象中屬性的個數即可進行

操作。

（2）with語句

說明要引用的對象，在該語句體內，任何對變量的引用被認為是這個對象的屬性的引用，

這種方法可節省一些代碼，避免引用混亂。

使用形式為

withobject{...}

（3）this關鍵詞

（4）new運算符

4.對象屬性的引用

-22-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

（１）使用點（.）運算符

（２）通過對象的下標實現引用

（３）通過屬性名稱字符串的形式實現引用

對象的方法的引用

靜態對象，在引用該對象的屬性或方法時不需要為它創建實例；

動態對象，在引用它的對象屬性或方法時必須為它創建一個實例。

4.4.2常用對象的屬性和方法

字符串對象string

（1）string對象的屬性

該對象只有一個屬性length

（2）String對象的方法

錨點，anchor()

有關字符顯示的控制方法。Big，Italics()，bold()，blink()，small（），fixed()，fontsize(size)

字體顏色方法。fontcolor(color)

字符串大小寫轉換。toLowerCa()，toUpperCa()

字符搜索。indexOf[charactor,fromIndex]

返回字符串的一部分字符串。ubstring(start,end)

算術函數的math對象

日期及時間對象date

4.4.3VBScript中的系統函數

1、eval（字符串表達式），返回字符串表達式中的值。

如test=eval("8+9+5/2")，返回的test值為19.5，而不是字符串"8+9+5/2"。

2、unEscape(string)，返回字符串ASCII碼。

3、escape(character)，返回字符的編碼。

4、parFloat(floustring)，返回實數。

5、parInt(numbestring,radix)，返回不同進制的數。radix是數的進制，numbestring是

字符串數。

4.4.4創建新對象

4.4.5VBScript中的數組

4.5使用內部對象系統

4.5.1瀏覽器中的對象

1、文檔對象的作用

把文檔中的鏈接、表單、標簽等基本元素包裝起來，提供給編程人員使用。

2、文檔對象中的屬性

（1）alinkcolor

（2）linkcolor

（3）vlinkColor

（4）bgcolor

（5）fgcolor

（6）LastModified

（7）Location

（8）title

-23-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

３、Document對象中的對象

Links

AnchorsForms

這三個對象分別組成各自的數組，網頁中每個對象的數目包含在屬性length中。

4.5.2窗口元素的控制

【課后小結】

文檔對象模型是可以被任何腳本引擎訪問的對象的集合，它提供了對Web瀏覽器的訪

問。但VBScript語言沒有其對象模型，它使用MicrosoftInternetExploer瀏覽器的對象

模型，這是一種具有層次結構的對象模型，其中每個對象都有屬性、方法和事件，而屬

性本身也是對象，它又包含屬性、方法和事件。這是學生應該注意的地方。

第十四講ASP概述

【教學內容】

講解ASP的基本理論概念。

【教學目的】

使學生掌握對“什么是ASP”有個基本的認識

【教學重點】

什么是ASP。

【教學難點】

又一個新的概念ASP要求學生掌握。

【教學美女圖像 方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》張錦祥主編科學出版社。

3、《網頁編程技術與實例》譚浩強主編人民郵電出版社。

【新課內容】

5.1ASP概述

5.1.1ASP簡介

（1）ASP的含義

ASP（ActiveServerPages，動態服務器網頁）是一種基于服務器的編程技術，它并不是

一種腳本語言，它提供的只是一種服務器端的腳本環境。從某種意義上說ASP是一種

附加特性擴展了的HTML文件。

（2）ASP的特點

純文本文件

設計方便

與平臺無關性

較強的安全性

-24-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

擴充能力強

訪問數據庫方便

（3）ASP的用途

ASP可以實現計數器、留言本、聊天室等應用程序。

①在網站中設計滾動顯示的廣告欄；

②從HTML的表單中接受信息并保存到數據庫中；

③可以根據不同的訪問時間顯示不同的內容，以創建個性化的網頁；

④在網頁中添加計數器；

⑤根據用戶的瀏覽器的版本和類型顯示不同檔次的內容；

⑥跟蹤用戶網站上的活動并存入日志文件。

5.1.2ASP的工作原理

ASP工作的過程分為下面的幾步：

①用戶在瀏覽器的地址欄中輸入要訪問的主頁地址并按回車鍵觸發這個申請。

②瀏覽器將ASP申請發送到含有IIS的Web服務器上。

③Web服務器接受這些申請并根據.asp的后綴意識到這是一個ASP文件。

④Web服務器從本地硬盤或內存讀取適當的ASP文件，然后向特定的名為

程序發送文件。

⑤Web服務器將ASP文件從頭到尾執行并根據命令要求生成標準的HTML文件，并

將生成的HTML文件傳送給瀏覽器。

⑥傳送回來的HTML文件將被用戶的瀏覽器所解釋，并將其結果顯示在用戶的瀏覽器

上。

【課后小結】

ASP的英文全稱是ActiveServerPage，翻譯為中文就是動態網頁。ASP對WEB服務器

的增強，讓HTML網頁瀏覽器從服務器取得WEB頁面的工作方式有所改變。理解ASP

的工作原理對以后的進一步學習制關重要。

第十五講使用ASP對象

【教學內容】

講解ASP對象的使用。

【教學目的】

使學生掌握對ASP對象的使用方法。

【教學重點】

什么是ASP的對象。

【教學難點】

每種對象的運用都不相同。

【教學方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》食物作文 張錦祥主編科學出版社。

3、《網頁編程技術與實例》譚浩強主編人民郵電出版社。

【新課內容】

-25-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

5.2ASP的內置對象

5.2.1Request對象

⒈利用form集合獲取數據

⒉利用QueryString集合獲取數據

5.2.2Respon對象

⒈向瀏覽器輸出數據（）

⒉文字打字效果

⒊清除數據（）

⒋使網頁轉向（ct）

⒌停止向瀏覽器輸出數據（）

5.2.3Application對象

5.2.4Session對象

5.2.5Server對象

Server對象提供對服務器上的方法和屬性進行的訪問，最常用的方法是創建ActiveX組

件的實例。其他方法用于將URL或HTML編碼成字符串，將虛擬路徑映射到物理路徑

以及設置腳本的超時限期。

⒈向瀏覽器輸出HTML代碼的方法（code）

⒉取得文件路徑的方法（h）

⒊設置腳本運行時間

【課后小結】

在面向對象編程中，對象就是指具有一組實體的屬性數據和操作方法的變量。ASP是

一種面向對象的程序語言，它具有許多對象。通過本節的學習，要求學生熟練掌握ASP

對象的使用方式。

第十六講使用ASP組件

【教學內容】

講解ASP組件的使用。

【教學目的】

使學生掌握對ASP組件的使用方法。

【教學重點】

什么是ASP的組件。

【教學難點】

過多的組件使學生掌握起來需要花費很多精力和時間。

【教學方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》張錦祥主編科學出版社。

3、《網頁編程技術與實例》譚浩強主編人民郵電出版社。

【新課內容】

-26-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

5.3ASP的內置組件

5.3.1文件訪問組件

1、文件操作組件

⒉文件的處理

3、對文件夾和驅動器進行操作

5.3.2廣告輪播組件

1、AdRotator組件的屬性

5.3.3瀏覽器信息組件

⒈BrowCapabilities組件的主要屬性

⒉BrowCapabilities組件的工作原理

使用BrowCapabilities組件前必須先創建該組件實例。

Set實例名=Object(“rType”)

5.3.4內容鏈接組件

【課后小結】

當用ASP編寫服務器端應用程序時，必須依靠組件來增強WEB應用程序的功能。事

實上組件是其他人已經編寫好的一些程序，我們只要掌握它們的使用方法就可以了。

第十七講使用ADO對象

【教學內容】

講解ADO對象的使用方法。

【教學目的】

使學生掌握對ADO對象的使用方法。

【教學重點】

什么是ADO對象。

【教學難點】

如何運用ADO訪問數據庫。

【教學方式】

講授式、項目模塊式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

2、《WEB網站設計》張錦祥主編科學出版社。

3、《網頁編程技術與實例》譚浩強主編人民郵電出版社。

【新課內容】

5.5ADO數據對象

5.5.1Connection對象

1、Connection對象的方法

Open方法

-27-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

Execute方法

Clo方法

BeginTrans方法

CommitTrans方法

RoolbackTrans方法

2、Connection對象的屬性

5.5.2Recordt對象

1、Recordt對象的方法

Open方法

“）

Clo方法

Move方法

Update方法

CancelUpdate方法

UpdateBatch方法

CancelBatch方法

AddNew方法

Delete方法

5.5.3Command對象

1、CreateParameter方法

2、Excute方法

3、Command對象所提供的屬性包括

ActiveConnection屬性、CommandText屬性、CommandType屬性、CommandTimeout

屬性、Name屬性、State屬性以及Prepared屬性

【課后小結】

ASP環境下對數據庫的訪問主要是通過ADO數據模型。ADO訪問數據庫更類似于編

寫數據庫應用程序。ADO是ASP技術的核心之一，它集中體現了ASP技術豐富而靈

活的數據庫訪問功能。學好本節是制作動態網站的關鍵。

第十八講設計實例——論壇

【教學內容】

實例講解利用ASP進行論壇的制作。

【教學目的】

使學生掌握ASP網站的制作方式及其流程。

【教學重點】

一個簡單ASP網站的制作方式及其流程。

【教學難點】

要求學生綜合運用所學過知識。

【教學方式】

案例分析式、討論式、演示教學。

【教學參考】

1、《網頁設計與制作》楊尚森曲宏山賈文峰等著電子工業出版社。

-28-

衡陽師范學院經濟與法律系《網頁設計與制作》教案唐四薪

2、《WEB網站設計》張錦祥主編科學出版社。

3、《網頁編程技術與實例》譚浩強主編人民郵電出版社。

4、《ASP數據庫系統開發實例導航》宣小平但正剛張文毅編著人民郵電出版社。

【新課內容】

1、論壇系統功能概述

2、創建數據庫

3、查看主題

4、發表主題

5、保存主題

6、回復主題

7、保存回復

【課后小結】

論壇是網絡上非常流行的一個功能，通過對以前所學知識的綜合運用完成這一網站的設

計和建設，對于學生來說有一定難度，但是通過實例的講解，幫助學生們更快的上手，

效果非常顯著。

-29-