第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

熟記站標(biāo)、導(dǎo)航條、廣告條、按鈕等網(wǎng)頁(yè)構(gòu)成要素，以

及網(wǎng)頁(yè)、網(wǎng)站、IP地址、域名、網(wǎng)址等概念；了解網(wǎng)頁(yè)

教學(xué)目標(biāo)與要求

的本質(zhì)和網(wǎng)頁(yè)的布局類型和HTML文檔的基本結(jié)構(gòu)，熟練

掌握網(wǎng)站建設(shè)的基本流程。

重點(diǎn)：站標(biāo)、導(dǎo)航條、廣告條、網(wǎng)頁(yè)、網(wǎng)站、IP地址、

教學(xué)重點(diǎn)

域名、網(wǎng)址等概念，以及網(wǎng)站建設(shè)的流程

難點(diǎn)：IP地址、域名、網(wǎng)址，HTML文檔的基本結(jié)構(gòu)及

教學(xué)難點(diǎn)

其常見(jiàn)標(biāo)簽

教學(xué)方法提問(wèn)、啟發(fā)、圖示、情景教學(xué)、案例、課堂討論

教學(xué)課時(shí)2課時(shí)

第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)教學(xué)

提示

導(dǎo)入課程：大家會(huì)輸入文字、制作和處理圖像、以提問(wèn)的方式引入課程

設(shè)計(jì)動(dòng)畫(huà)，如何把這些作品放到internet中，

采用課堂討論教學(xué)法，打開(kāi)

讓更多的人去查閱和欣賞呢？DW就可以

制作網(wǎng)頁(yè)。幾個(gè)典型的網(wǎng)頁(yè)讓同學(xué)們

1.網(wǎng)頁(yè)的構(gòu)成要素和組成元素討論總結(jié)構(gòu)成要素和組成

網(wǎng)頁(yè)的構(gòu)成要素：站標(biāo)、導(dǎo)航條、廣告條、

標(biāo)題欄和按鈕；元素。

網(wǎng)頁(yè)的組成元素：文字、圖片、動(dòng)畫(huà)（gif、打開(kāi)一個(gè)搜狐主頁(yè)，保存成

flash）、表單（交互功能）、音頻、視頻、

不同的類型，讓大家看保存

超鏈接、表格、框架、導(dǎo)航等。

2.網(wǎng)頁(yè)相關(guān)知識(shí)簡(jiǎn)介的效果，加深對(duì)網(wǎng)頁(yè)本質(zhì)的

基本概念：

理解；

網(wǎng)頁(yè)的本質(zhì)

網(wǎng)頁(yè)、網(wǎng)站、主頁(yè)、互聯(lián)網(wǎng)先打開(kāi)一個(gè)網(wǎng)頁(yè)的源文件，

動(dòng)態(tài)網(wǎng)頁(yè)、靜態(tài)網(wǎng)頁(yè)結(jié)合網(wǎng)絡(luò)常識(shí)，詳細(xì)講解網(wǎng)

IP地址、域名、網(wǎng)址（url）、瀏覽器

頁(yè)的定義，然后略講網(wǎng)站和

等概念

網(wǎng)頁(yè)布局主頁(yè)的概念。并提醒同學(xué)理

網(wǎng)頁(yè)布局的相關(guān)概念解并記憶這些概念。

常見(jiàn)的布局類型

以注冊(cè)和登錄郵箱為例，對(duì)

網(wǎng)站管理與網(wǎng)頁(yè)制作相關(guān)軟件

制作和管理網(wǎng)頁(yè)工具；比講解動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)

制作和優(yōu)化網(wǎng)頁(yè)圖像工具；頁(yè)的特點(diǎn)和區(qū)別。

制作網(wǎng)頁(yè)動(dòng)畫(huà)工具；

其中Dreamweaver、fireworks、以平頂山學(xué)院和搜狐網(wǎng)站

flash這三個(gè)軟件合稱為網(wǎng)頁(yè)的IP地址與域名為例，簡(jiǎn)

“三劍客”。

要講述這兩個(gè)概念。通過(guò)查

其他小工具軟件。

HTML語(yǔ)言看分析知名網(wǎng)站的網(wǎng)址引

HTML的概念

入url的定義和組成，其它

HTML文檔的基本結(jié)構(gòu)

幾個(gè)常見(jiàn)的html標(biāo)簽：html、概念略講。提醒學(xué)生理解并

head、title、style、script、記憶上述概念。

link、meta、body、img、p、font

打開(kāi)一網(wǎng)頁(yè)（詳細(xì)講解網(wǎng)頁(yè)

等。

XHTML語(yǔ)言簡(jiǎn)介布局效果的教程）讓學(xué)生討

腳本語(yǔ)言簡(jiǎn)介

論、分析總結(jié)布局類型。

3.網(wǎng)頁(yè)的設(shè)計(jì)理念和配色方案

網(wǎng)頁(yè)的設(shè)計(jì)理念根據(jù)學(xué)生特點(diǎn)簡(jiǎn)要講解

色彩的三要素ps、flash、fw等軟件在網(wǎng)

網(wǎng)頁(yè)中的色彩心理與網(wǎng)頁(yè)表現(xiàn)第一階段：網(wǎng)站需求分析

色彩搭配應(yīng)遵循的原則頁(yè)設(shè)計(jì)中的功能。

規(guī)劃網(wǎng)站準(zhǔn)備素材

4.網(wǎng)站的開(kāi)發(fā)流程

第二階段：創(chuàng)建站點(diǎn)，設(shè)計(jì)制作各級(jí)頁(yè)面打開(kāi)搜狐主頁(yè)的源代碼，讓

①網(wǎng)站需求分析

學(xué)生認(rèn)識(shí)一下html語(yǔ)言及

定義站點(diǎn)②設(shè)計(jì)制作網(wǎng)站頁(yè)面設(shè)置頁(yè)面屬性制作頁(yè)面

③空間和域名申請(qǐng)其結(jié)構(gòu)，然后分別用記事本

第三階段：申請(qǐng)空間和域名

④測(cè)試和發(fā)布網(wǎng)站

和dw創(chuàng)建2個(gè)最簡(jiǎn)單的網(wǎng)

⑤第四階段：測(cè)試和發(fā)布網(wǎng)站網(wǎng)站推廣

第五階段：網(wǎng)站推廣頁(yè)，讓學(xué)生細(xì)看其源代碼，

5.典型網(wǎng)站分析并詳細(xì)講解8個(gè)基本標(biāo)簽

頁(yè)面結(jié)構(gòu)及其結(jié)構(gòu)關(guān)系，最后根據(jù)時(shí)

色彩運(yùn)用

間酌情講解其它幾個(gè)常見(jiàn)

標(biāo)簽。

簡(jiǎn)要講解這兩個(gè)概念，然后

創(chuàng)建一個(gè)網(wǎng)頁(yè)，復(fù)制無(wú)縫循

環(huán)的代碼并粘貼到網(wǎng)頁(yè)的

body標(biāo)簽，讓學(xué)生了解腳

本語(yǔ)言的功能。

讓學(xué)生欣賞插入后的效果，

吸引學(xué)生dw的相關(guān)代碼。

結(jié)合上網(wǎng)的經(jīng)驗(yàn)，讓學(xué)生總

結(jié)網(wǎng)頁(yè)的設(shè)計(jì)理念。

色彩的三要素和心理表現(xiàn)

學(xué)生在上學(xué)期的ps課程中

學(xué)習(xí)過(guò)，采用提問(wèn)法，進(jìn)行

復(fù)習(xí)；然后打開(kāi)幾個(gè)典型網(wǎng)

站，分析其配色方案，最后

總結(jié)網(wǎng)頁(yè)中色彩運(yùn)用的原

則。

根據(jù)設(shè)計(jì)的先后順序和學(xué)

生一起分析總結(jié)網(wǎng)站的開(kāi)

發(fā)流程，并用圖加以解釋，

重點(diǎn)講解網(wǎng)站的需求分析，

以加深學(xué)生對(duì)重點(diǎn)知識(shí)的

掌握。

采用課堂討論教學(xué)法，打開(kāi)

幾個(gè)典型的網(wǎng)頁(yè)讓同學(xué)們

討論總結(jié)網(wǎng)站的構(gòu)成要素、

組成元素、布局結(jié)構(gòu)和配色

方案。

作業(yè)布置：

1.察看并對(duì)比分析大型網(wǎng)站（如中國(guó)網(wǎng)、著名學(xué)校網(wǎng)、著名醫(yī)院網(wǎng)、

官方網(wǎng)、科技網(wǎng)、娛樂(lè)休閑運(yùn)動(dòng)網(wǎng)、兒童網(wǎng)、體育網(wǎng)、著名出版社網(wǎng)、

提問(wèn)

cctv網(wǎng)站、sohu、yahoo、IBM、微軟等）的風(fēng)格、色彩搭配與布局。

2.察看的同時(shí)下載自己需要的文章、圖片、軟件等資源。

３.課后習(xí)題。

小結(jié)：通過(guò)提問(wèn)、啟發(fā)、圖示、情景教學(xué)、課堂討論等教學(xué)方法的綜

合運(yùn)用，提高了學(xué)生的學(xué)習(xí)興趣，從學(xué)生的反應(yīng)看，授課效果很

好。

第2章Dreamweaver基礎(chǔ)知識(shí)

熟悉Dreamweaver8工作界面，熟記幾個(gè)常用的工具按

鈕和菜單命令；熟練掌握站點(diǎn)的創(chuàng)建步驟，能快速規(guī)范地

教學(xué)目標(biāo)與要求

創(chuàng)建站點(diǎn)；能夠快速創(chuàng)建、打開(kāi)、保存網(wǎng)頁(yè)文檔；能熟練

設(shè)置頁(yè)面的屬性。

1.創(chuàng)建站點(diǎn)并組織站點(diǎn)的結(jié)構(gòu);2.在站點(diǎn)中創(chuàng)建網(wǎng)頁(yè)3.

教學(xué)重點(diǎn)

頁(yè)面的屬性設(shè)置

教學(xué)難點(diǎn)HTML基礎(chǔ)

教學(xué)方法舉例為主，適當(dāng)講授操作要領(lǐng)，提問(wèn)以測(cè)試課題效果。

教學(xué)課時(shí)2課時(shí)

第2章Dreamweaver基礎(chǔ)知識(shí)教學(xué)提示

我們一貫都是瀏覽網(wǎng)頁(yè)，想自己動(dòng)手做網(wǎng)站拋出問(wèn)題，引入新課

嗎？用什么工具做網(wǎng)站？怎樣做呢？啟動(dòng)dw，詳細(xì)講解插入

欄、文檔標(biāo)簽與“文檔”

Dreamweaver網(wǎng)頁(yè)制作工具。工具欄、狀態(tài)欄的作用，

區(qū)分標(biāo)簽檢查器、標(biāo)簽選

2.1熟悉Dreamweaver8工作界面擇器、標(biāo)記選擇符3個(gè)概

2.2網(wǎng)站創(chuàng)建與管理念及其作用

詳細(xì)講解站點(diǎn)的定義、組

2.2.1站點(diǎn)的定義、組成和結(jié)構(gòu)成、結(jié)構(gòu)，以及文件和文

2.2.2網(wǎng)頁(yè)文檔與文件夾命名規(guī)則件夾的命名規(guī)則。

2.2.3創(chuàng)建本地站點(diǎn)的步驟演示站點(diǎn)的創(chuàng)建過(guò)程和

步驟，著重提出保存和站

2.2.4組織站點(diǎn)結(jié)構(gòu)點(diǎn)文件夾的命名。

2.3網(wǎng)頁(yè)文檔基本操作詳細(xì)講解站點(diǎn)結(jié)構(gòu)的組

新建、保存、預(yù)覽、打開(kāi)、關(guān)閉織方法和原則。

分別演示這幾個(gè)操作

2.4基本頁(yè)面屬性設(shè)置通過(guò)dw設(shè)計(jì)視圖分別創(chuàng)

制定文檔標(biāo)題和邊距、網(wǎng)頁(yè)背景顏色和背建1個(gè)網(wǎng)頁(yè)，分別演示文

景圖像，為網(wǎng)頁(yè)設(shè)置文本屬性、鏈接屬性檔標(biāo)題和邊距、背景顏色

和背景圖像、文本和鏈接

和跟蹤圖像的屬性，總結(jié)頁(yè)面的使用的技屬性，以及跟蹤圖像的屬

巧：性的設(shè)置方法和步驟，幫

助學(xué)生掌握頁(yè)面的設(shè)置

過(guò)程。并總結(jié)頁(yè)面設(shè)置和

創(chuàng)建過(guò)程中的一些使用

技巧。

作業(yè)：習(xí)題一第1，2,3題

小結(jié)：本次課內(nèi)容操作性很強(qiáng)，經(jīng)過(guò)學(xué)生自己上臺(tái)操作，發(fā)現(xiàn)大多數(shù)學(xué)生都能

創(chuàng)建并組織好一個(gè)站點(diǎn)，還能快速地設(shè)置網(wǎng)頁(yè)的屬性，達(dá)到了教學(xué)目標(biāo)的要求。

第3章網(wǎng)頁(yè)中的基本元素

1.熟練操作網(wǎng)頁(yè)中的文本；

2.熟練插入各種格式的圖像并設(shè)置其屬性；

教學(xué)目標(biāo)與要求

3.了解圖像切片的作用；

4.熟練制作圖像切片，并插入到dw中

1.文本對(duì)象的插入和格式設(shè)置；

教學(xué)重點(diǎn)2.GIF、PNG和JPEG三種圖像格式的異同點(diǎn)和使用環(huán)境；

3.用fireworks制作網(wǎng)頁(yè)切片的方法；

1.設(shè)置文本標(biāo)題；段落的設(shè)置效果；

2.GIF、PNG和JPEG三種圖像格式的異同點(diǎn)和使用環(huán)境；

教學(xué)難點(diǎn)

3.Dreamweaver8.0中使用圖像的一些基本方法和技巧；

4.在dreamweaver中插入用fireworks制作的切片

課堂講授為輔，多媒體演示為主，適當(dāng)舉例，提問(wèn)以測(cè)試

教學(xué)方法

課題效果，實(shí)驗(yàn)式教學(xué)。

教學(xué)課時(shí)4課時(shí)

第3章網(wǎng)頁(yè)中的基本元素教學(xué)提示

復(fù)習(xí)上節(jié)內(nèi)容：以提問(wèn)的方式

1．如何創(chuàng)建站點(diǎn)？復(fù)習(xí)上次課內(nèi)

容

2．如何站點(diǎn)結(jié)構(gòu)的組織

結(jié)合WORD，通

3.1網(wǎng)頁(yè)中文本的操作

過(guò)復(fù)習(xí)的方

３.１.１認(rèn)識(shí)文本按鈕及屬性面板

式，總結(jié)dw中

?思考題：根據(jù)以前所學(xué)知識(shí)說(shuō)出文本的編輯和設(shè)置屬性文本的操作；

各包括幾個(gè)方面？先簡(jiǎn)要演示一

３.１.２插入文本和對(duì)象下各種文本符

將文本（英文、中文、數(shù)字）添加到文檔中的3種方號(hào)的插入方

法。法，然后輸入

插入特殊字符一首小詩(shī)，調(diào)

水平線整其格式；接

著復(fù)制一篇文

插入日期：菜單法；插入欄按鈕法

章粘貼到dw

對(duì)插入的文本也可以執(zhí)行刪除、搜索、替換、檢查拼

中；最后導(dǎo)入

寫(xiě)（文本－檢查拼寫(xiě)／shift+f7）等操作。

一篇word文

３.１.３設(shè)置文本格式檔；

字符的樣式包括的方面及其設(shè)置方法先簡(jiǎn)要講述一

３.１.４設(shè)置文本標(biāo)題下文本格式、

標(biāo)題的含義與作用標(biāo)題、段落的

3.１.５設(shè)置段落效果設(shè)置的含義和

1.設(shè)置段落格式步驟，然后讓

２.縮進(jìn)段落學(xué)生走上講臺(tái)

對(duì)上述插入的

３．對(duì)齊段落（4種對(duì)齊方式）

文本設(shè)置相應(yīng)

４.分段與換行的相關(guān)操作和區(qū)別：

的字符格式、

３.１.６創(chuàng)建項(xiàng)目列表

標(biāo)題級(jí)別、段

３.２網(wǎng)頁(yè)圖像的運(yùn)用落效果，并選

３.２.１網(wǎng)頁(yè)中圖像格式簡(jiǎn)介擇個(gè)別段落創(chuàng)

1.圖像在網(wǎng)頁(yè)中的作用和網(wǎng)頁(yè)中常用圖像格式有：建項(xiàng)目列表，

GIF、JPEG、PNG。以加深印象。

2.三種圖像格式的特點(diǎn)和在網(wǎng)頁(yè)中的使用場(chǎng)合。通過(guò)比較法講

在Web頁(yè)上顯示圖片之前，通常需要考慮下列三個(gè)問(wèn)題：解各圖像格式

３.２.２在網(wǎng)頁(yè)中使用圖像的特點(diǎn)

1.插入圖像：舉例：在文檔

中插入各種圖

2.插入圖像占位符：注意圖像占位符的命名規(guī)則和作用

像對(duì)象，并設(shè)

3.創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖象（輪換圖像）

置其格式屬

4.在dw中圖像的編輯功能僅適用于GIF和JPEG圖像格式。

性。

在屬性檢面板中編輯圖像，上述設(shè)置也可通過(guò)菜單實(shí)演示制作圖像

現(xiàn)：修改圖像熱區(qū)和圖文混

用fireworks優(yōu)化圖像。排的效果；演

５．熱點(diǎn)工具的使用和圖像熱區(qū)的添加示制作電子相

６.設(shè)置圖文混排的效果：冊(cè)

7.制作電子相冊(cè)：命令——?jiǎng)?chuàng)建網(wǎng)站相冊(cè)以問(wèn)題的形式

3.2.3切片在fw中的創(chuàng)建和在dw使用引入切片的定

打開(kāi)大圖片網(wǎng)頁(yè)時(shí)，總是等待很長(zhǎng)時(shí)間，怎樣處理才能減少圖義和作用。

片的下載時(shí)間呢？做成切片。本內(nèi)容盡量調(diào)

1.切片的定義和作用整在機(jī)房講

解。詳細(xì)講解

2.切片在fw中的創(chuàng)建方法和步驟

并演示切片在

3.在DW中插入FireworksHTML（切片）的方法和步驟

fw中制作和

將FireworksHTML插入到Dreamweaver中的方法。

在dw中插入

方法1：將切片從Fireworks復(fù)制到剪貼板上，然后直接粘貼的方法與步

到Dreamweaver文檔代碼視圖中的相應(yīng)位置處。驟。

方法2：直接將FireworksHTML插入到Dw中的操作步驟用比較法總結(jié)

３.３網(wǎng)頁(yè)多媒體的運(yùn)用網(wǎng)頁(yè)中出現(xiàn)的

3.3.1在網(wǎng)頁(yè)中使用視頻flash視頻文件的格

1.網(wǎng)頁(yè)中常見(jiàn)的視頻文件格式和插入方法；式及其特點(diǎn)，

2.常見(jiàn)的flash文件格式和插入方法；舉例講解視頻

文件的插入方

flash文件（.fla格式）、flash影片文件（.swf格式）、flash

法和屬性設(shè)

模板文件（swt格式）、flash元素文件（.swc格式）、flash

置；

視頻文件（.flv格式）

用比較法總結(jié)

3.3.2在網(wǎng)頁(yè)中使用音頻

網(wǎng)頁(yè)中出現(xiàn)的

添加聲音需要考慮的因素：添加的的、文件大小、聲音品質(zhì)flash文件的

和在不同瀏覽器中的差異。格式及其特

1.音頻文件的格式和相應(yīng)的特點(diǎn)：點(diǎn)，重點(diǎn)講解

網(wǎng)頁(yè)中常見(jiàn)的音頻格式有：flash按鈕、

mid/midi格式：。flash文本和

flash視頻的

wav和aif（aiff）文件

插入方法和屬

2.在網(wǎng)頁(yè)中插入音頻文件的2種方式：

性設(shè)置；

鏈接到音頻文件

用比較法總結(jié)

嵌入聲音文件網(wǎng)頁(yè)中常見(jiàn)的

3.4dw擴(kuò)展插件音頻文件格式

1.安裝擴(kuò)展插件及其特點(diǎn)。

2.使用擴(kuò)展插件舉例演示音頻

使用擴(kuò)展插件主要有2個(gè)步驟：文件的插入和

①先安裝插件屬性設(shè)置，重

②然后啟動(dòng)dreamweaver，在相應(yīng)的位置找到調(diào)用擴(kuò)展的點(diǎn)講解背景音

樂(lè)的插入和設(shè)

命令即可。

置。

3.在“類型”欄中顯示擴(kuò)展的類型含義：

重點(diǎn)講解頁(yè)面

類型含義

過(guò)度效果、

對(duì)象在dw界面的“插入”工具欄調(diào)用該擴(kuò)展插件

sound、

命令在dw的“命令”菜單中調(diào)用擴(kuò)展marquee和滾

行為在dw的“行為”面板中調(diào)用擴(kuò)展動(dòng)鏈接的AP

4.常用擴(kuò)展插件的安裝和使用元素4個(gè)插件

Page要選定整個(gè)頁(yè)面（即body標(biāo)簽），的用法和設(shè)置

transition再在命令菜單中找到該命令即先演示這幾個(gè)

s可實(shí)現(xiàn)（效果見(jiàn)實(shí)例站點(diǎn)中

命常用擴(kuò)展插件

有超級(jí)鏈接guodong1.html、

令的安裝和使用

時(shí)，頁(yè)過(guò)渡guodong2.html、方法，然后讓

（進(jìn)入/退guodong3.html）學(xué)生上臺(tái)操

出）效果作，教師指點(diǎn)

Typewriter先把要添加該效果的對(duì)象放入操作過(guò)程和方

.mxpAP元素中，然后在行為面板中找法

模擬打字行到y(tǒng)aromat|typewriter即可實(shí)擴(kuò)展這本分內(nèi)

為現(xiàn)，文字的打印效果就顯示在AP容安排到行為

元素中。(guodong1.html中打之后講解

印文字）

Sound.mxp要選定整個(gè)頁(yè)面（即body標(biāo)簽），

對(duì)

插入背景音再在“常用”插入欄中找到

象

樂(lè)sound按鈕即可實(shí)現(xiàn)

Marquee.mx要選定整個(gè)頁(yè)面（即body標(biāo)簽），

p對(duì)再在“常用”插入欄中找到

滾動(dòng)文字插象marquee按鈕即可實(shí)現(xiàn)

件

Insert把光標(biāo)定位在頁(yè)面的合適位置，

Greeting.m對(duì)然后選擇“插入”欄中的“CN

xp象InsertGreeting”按鈕即可實(shí)

插入問(wèn)候語(yǔ)現(xiàn)

Calander.m把光標(biāo)定位在頁(yè)面的合適位置，

對(duì)

xp然后選擇“插入”欄中的

象

“calander”按鈕即可實(shí)現(xiàn)

Persistent先把要添加該效果的對(duì)象放入

layersAP元素中，然后在行為面板中找

滾動(dòng)鏈接的到ribberszeewolde|

行

AP元素Persistentlayers即可實(shí)現(xiàn)，

為

一般用來(lái)顯示廣告信息。

（guodong1.html中的”送給

你了“）

作業(yè)：

1.填空題

（1）使用屬性檢查器或【文本】菜單中的選項(xiàng)可以設(shè)置或更改所選文本

的字體特性?？梢栽O(shè)置字體____________（如粗體或斜體）和______。

（2）若要插入更多的特殊字符，請(qǐng)選擇______|______|______或在

______欄中選擇______圖標(biāo)，選擇一個(gè)字符，然后單擊【確定】。

（3）在計(jì)算機(jī)領(lǐng)域中，圖像分為_(kāi)_______和________2大類。

（4）GIF圖像采用的是________壓縮格式。

2.選擇題

（1）在網(wǎng)頁(yè)中連續(xù)輸入空格的方法是_______。

A．連續(xù)按空格鍵

B．按下Ctrl鍵再連續(xù)按空格鍵

C．轉(zhuǎn)換到中文的全角狀態(tài)下連續(xù)按空格鍵

D．按下Shift鍵再連續(xù)按空格鍵

（2）網(wǎng)頁(yè)通常可以支持的圖像格式有___________。

A．GIFB．BMPC．AVI

D．PSDE．PNGF．JPEG。

3.簡(jiǎn)答題

（1）網(wǎng)頁(yè)中常用的圖像格式有哪些？各有什么特點(diǎn)？如果在網(wǎng)頁(yè)中添加

動(dòng)畫(huà)格式的浮動(dòng)廣告，采用何種格式？為什么？電子相冊(cè)，應(yīng)該用哪種

格式最好？

(2)如何創(chuàng)建鼠標(biāo)變換圖像和圖像熱點(diǎn)？

4.操作題：

搜集自己的喜愛(ài)的圖片，制作一個(gè)電子相冊(cè)。

小結(jié)：

本章內(nèi)容較多，但交簡(jiǎn)單，需要邊講解邊對(duì)比總結(jié)，通過(guò)對(duì)比總

結(jié)和學(xué)生上臺(tái)操作演示，從學(xué)生上機(jī)的作業(yè)來(lái)看，授課效果很好。

第4章使用表格與布局表格布局網(wǎng)頁(yè)

1.了解表格和布局表格在網(wǎng)頁(yè)布局中的作用；

2.掌握表格和布局表格的插入方法和基本編輯方法；

教學(xué)目標(biāo)與要求3.掌握表格和布局表格、單元格和布局單元格的屬性設(shè)置；

4.通過(guò)對(duì)表格和布局表格的學(xué)習(xí)，提高學(xué)生學(xué)習(xí)網(wǎng)頁(yè)制作的

興趣，增強(qiáng)學(xué)生的審美觀

1．表格的插入方法、基本編輯方法與應(yīng)用；

教學(xué)重點(diǎn)

2．布局表格和布局單元格的繪制方法、屬性設(shè)置與應(yīng)用

教學(xué)難點(diǎn)1.表格和單元格的屬性設(shè)置與應(yīng)用；

2.布局表格和布局單元格的繪制與屬性設(shè)置

教學(xué)方法多媒體演示，案例教學(xué)，任務(wù)驅(qū)動(dòng)，引導(dǎo)教學(xué)；提問(wèn)式教學(xué)。

教學(xué)課時(shí)2學(xué)時(shí)

第4章使用表格與布局表格布局網(wǎng)頁(yè)教學(xué)提示

用表格控制文字、圖片、動(dòng)化等對(duì)象的位置，使網(wǎng)頁(yè)的布展示一個(gè)布局合理、美

局緊湊又整齊美觀。常用的頁(yè)面設(shè)計(jì)布局類型有：表格、觀的網(wǎng)頁(yè)，激起學(xué)生的

布局表格和AP元素三種，本章著重講解如何使用表格和布學(xué)習(xí)興趣。

局表格布局頁(yè)面。簡(jiǎn)要講解并3種表格模

式的作用，重點(diǎn)演示不

4.1.表格模式

同模式下按鈕的使用

1.dw中表格的3種模式

回顧word和excel中講

2.模式切換的操作方式：

過(guò)的有關(guān)表格的概念和

查看--表格模式標(biāo)準(zhǔn)模式/布局模式/表格擴(kuò)展模式。

基本操作，引入dw中表

3.模式的區(qū)別與注意事項(xiàng)：

格的概念和基本操作。

只有在“設(shè)計(jì)”視圖中才可切換到“布局”模式；重點(diǎn)講解表格的屬性設(shè)

在不同模式下，工具欄的各個(gè)按鈕作用不同；置含義。

在布局模式中不能像布局表格的空白區(qū)域插入內(nèi)插入一個(gè)表格，并在每

容，只能創(chuàng)建布局單元格，布局單元格才是承載具個(gè)格中插入不同的內(nèi)

體內(nèi)容的容器。容，然后切換到代碼視

4.2使用表格布局網(wǎng)頁(yè)圖，讓學(xué)生識(shí)記三個(gè)標(biāo)

簽。逐一演示表格的各

1．表格的作用

個(gè)基本操作。

2.表格的組成部分

重點(diǎn)講解創(chuàng)建嵌套表格

表格的行、列、單元格、邊距、間距、邊框

的原因

3.表格的標(biāo)記打開(kāi)一個(gè)示例網(wǎng)頁(yè)，讓

<table>標(biāo)記、<tr>標(biāo)記、<td>標(biāo)記學(xué)生上講臺(tái)比照著制作

三者的對(duì)應(yīng)位置關(guān)系出相同效果

4.表格的基本操作討論總結(jié)表格布局的缺

表格的插入、選擇、刪除、大小調(diào)整；點(diǎn)

單元格的選擇、合并、拆分、大小調(diào)整；重點(diǎn)演示并總結(jié)繪制布

局表格和布局單元格的

表格在“擴(kuò)展表格”模式和“標(biāo)準(zhǔn)”模式下的應(yīng)用

注意事項(xiàng)。

5.嵌套表格

演示設(shè)置布局表格和單

表格嵌套的作用

元格的屬性；

創(chuàng)建嵌套表格的操作方法。

在設(shè)置好屬性的布局單

6.導(dǎo)入和導(dǎo)出表格數(shù)據(jù)、元格中添加文章、圖像

7.表格布局網(wǎng)頁(yè)的應(yīng)用實(shí)例和多媒體。

8.表格布局的缺點(diǎn)先和學(xué)生一起分析左側(cè)

4.3布局表格布局網(wǎng)頁(yè)網(wǎng)頁(yè)的操作思路和主要

步驟，然后讓學(xué)生上臺(tái)

1.繪制布局表格

操作，以加深印象。

繪制布局表格的注意事項(xiàng)：

2.繪制布局單元格

繪制布局單元格的注意事項(xiàng)：

3.設(shè)置布局表格和布局單元格的屬性和參數(shù)

4.在布局單元格中添加內(nèi)容

5.課堂實(shí)例――用布局表格布局網(wǎng)站主頁(yè)

作業(yè)：

課堂作業(yè)：1.敘述3種模式的概念及切換方法。

2.說(shuō)出表格和布局表格的作用

3.敘述“表格擴(kuò)展模式”的作用

4.什么是間隔圖像？

書(shū)面作業(yè)：課后習(xí)題。

小結(jié)：通過(guò)與學(xué)生熟悉的word中表格的操作對(duì)照講解，本章的講解顯得較輕

松；讓學(xué)生上臺(tái)操作，提高了學(xué)生的學(xué)習(xí)積極性和主動(dòng)性，教學(xué)效果較好。

第5章使用框架布局網(wǎng)頁(yè)

了解框架網(wǎng)頁(yè)的概念；熟練創(chuàng)建、保存框架網(wǎng)頁(yè)，并設(shè)置

教學(xué)目標(biāo)與要求框架和框架集的屬性；框架中超級(jí)鏈接的創(chuàng)建和目標(biāo)屬性

設(shè)置

熟練創(chuàng)建保存框架網(wǎng)頁(yè)，并設(shè)置框架和框架集的屬性；框

教學(xué)重點(diǎn)

架中超級(jí)鏈接的創(chuàng)建和目標(biāo)屬性設(shè)置

框架網(wǎng)頁(yè)的概念和保存；框架中超級(jí)鏈接的創(chuàng)建和目標(biāo)屬

教學(xué)難點(diǎn)

性設(shè)置

多媒體演示為主，適當(dāng)舉例，人體媒體結(jié)合式教學(xué)，課堂

教學(xué)方法

講授，師生互動(dòng)，提問(wèn)式教學(xué)。

教學(xué)課時(shí)2學(xué)時(shí)

第5章框架網(wǎng)頁(yè)教學(xué)提

示

5.1框架和框架集的概念、結(jié)構(gòu)和應(yīng)用通過(guò)看

1.基本概念看和分

析知名

框架網(wǎng)頁(yè)、框架集、框架

網(wǎng)站使

框架和框架集的關(guān)系

用框架

2．框架網(wǎng)頁(yè)的結(jié)構(gòu)

的布局

3.認(rèn)識(shí)框架面板：效果，引

4.框架網(wǎng)頁(yè)的應(yīng)用：通常用于導(dǎo)航。入框架

5.框架網(wǎng)頁(yè)的優(yōu)缺點(diǎn)和框架

5.2創(chuàng)建和保存框架與框架集集的概

5.2.1使用預(yù)設(shè)的框架集念

1.創(chuàng)建新的空預(yù)設(shè)框架的具體操作步驟。舉例演

修改框架名稱必須以字母開(kāi)頭，可以包含數(shù)字、下劃線（_）；示框架

的創(chuàng)建

但不允許是javascript中的保留字（如top或navigator）、連

和保存

字符（-）、句點(diǎn)、空格和；而且區(qū)分大小寫(xiě)。

操作

2.創(chuàng)建預(yù)設(shè)的框架集并在某一框架中顯示現(xiàn)有文檔

打開(kāi)框

5.2.2創(chuàng)建和編輯框架架面板，

1.創(chuàng)建框架查看并

2.刪除框架總結(jié)框

3.建立嵌套的框架集架和框

4.保存框架和框架集架集的

5.3設(shè)置框架及框架集的屬性屬性設(shè)

1.選擇框架：通過(guò)“框架”面板來(lái)選擇框架和子框架。置及其

含義

2.設(shè)置框架屬性

演示框

框架的背景顏色可以在頁(yè)面屬性中進(jìn)行設(shè)置

架中的

在框架的屬性面板中進(jìn)行設(shè)置框架的的名稱、源文件、鏈

超級(jí)鏈

接、邊距、滾動(dòng)、邊框和能否調(diào)整大小等。接效果

3.設(shè)置框架集屬性：邊框、邊框大小和邊框顏色。舉例演

5.4設(shè)置框架集中的超級(jí)鏈接示框架

5.4.1在框架網(wǎng)頁(yè)中建立超鏈接網(wǎng)頁(yè)的

5.4.2框架網(wǎng)頁(yè)中設(shè)置超級(jí)鏈接的目標(biāo)打開(kāi)方式設(shè)計(jì)與

1.相對(duì)鏈接目標(biāo)：_blank、_top、_parent、_self制作

2.絕對(duì)鏈接目標(biāo)：mainframe、Leftframe、Rightframe、

Topframe。

5.6課堂實(shí)例――制作一個(gè)框架網(wǎng)頁(yè)

作業(yè)：

1.使用框架的優(yōu)點(diǎn)是什么？

2.課后習(xí)題

小結(jié)：本章介紹了框架網(wǎng)頁(yè)的創(chuàng)建、保存和屬性設(shè)置，著重講解了框架網(wǎng)頁(yè)的

中超級(jí)鏈接的創(chuàng)建和目標(biāo)設(shè)置，內(nèi)容較少，授課效果較好。

第6章AP元素的創(chuàng)建和使用

理解AP元素的作用；熟記AP元素的命名原則和特點(diǎn)；掌

教學(xué)目標(biāo)與要握繪制AP元素和插入AP元素的方法和區(qū)別；熟練設(shè)置AP

求元素的屬性；靈活、合理地使AP元素隨心所欲的布局頁(yè)面

內(nèi)容。

AP元素的作用；AP元素的插入和繪制；AP元素的屬性設(shè)

教學(xué)重點(diǎn)

置；AP元素的特點(diǎn)；AP元素的應(yīng)用

教學(xué)難點(diǎn)AP元素的作用；AP元素的屬性設(shè)置；AP元素的應(yīng)用

教學(xué)方法多媒體演示為主，適當(dāng)舉例，人體媒體結(jié)合式教學(xué)，課堂

講授，師生互動(dòng)，提問(wèn)式教學(xué)。

教學(xué)課時(shí)2課時(shí)

第6章AP元素的創(chuàng)建和使用教學(xué)提示

在瀏覽網(wǎng)頁(yè)時(shí)，注意到滾動(dòng)的廣告圖片了嗎？它是使拋出問(wèn)題，引

用AP元素做出來(lái)的效果。入新課

6.1應(yīng)用AP元素布局網(wǎng)頁(yè)強(qiáng)調(diào)AP元素在

6.1.1AP元素的概述頁(yè)面布局中的

1、AP元素的應(yīng)用：布局網(wǎng)頁(yè)；制作簡(jiǎn)單動(dòng)畫(huà)；設(shè)計(jì)特作用

效等。演示AP元素的

2、AP元素的定義、AP元素的特點(diǎn)、AP元素的分類、繪制要領(lǐng)；

AP元素的優(yōu)缺點(diǎn)、AP元素面板。選擇AP元素，

6.1.2創(chuàng)建AP元素讓學(xué)生觀察的

1.在首選參數(shù)對(duì)話框中設(shè)置AP元素的參數(shù)，可設(shè)置屬性，并詳細(xì)

AP元素嵌套和顯示AP元素錨記。講解各屬性的

2.插入AP元素與繪制AP元素設(shè)置含義。

3.繪制AP元素和插入AP元素的差別演示AP元素的

4.AP元素的html代碼各種操作

5.AP元素的絕對(duì)定位（一般是默認(rèn)設(shè)置）和相對(duì)定綜合舉例

位

6.1.3.AP元素屬性詳解

1.單個(gè)AP元素的屬性：AP元素編號(hào)、左和上、寬

和高、Z軸、背景圖像、背景顏色、剪輯、可見(jiàn)性、

溢出：

2.多個(gè)AP元素的屬性：

6.1.4AP元素的基本操作

激活A(yù)P元素、選擇AP元素、調(diào)整AP元素大小、移動(dòng)

AP元素、對(duì)齊AP元素、吸附AP元素到網(wǎng)格

6.1.5嵌套AP元素

6.1.6.AP元素和表格的相互轉(zhuǎn)換

6.2課堂實(shí)例――用AP元素布局網(wǎng)站首頁(yè)

作業(yè)：課后習(xí)題

上機(jī)作業(yè)：使用AP元素、表格和css排版網(wǎng)站首頁(yè)

小結(jié)：本章著重講解AP元素的創(chuàng)建、命名和屬性設(shè)置，讓學(xué)生親自上臺(tái)

制作案例，加深了對(duì)新知識(shí)的印象。上機(jī)時(shí)發(fā)現(xiàn)學(xué)生基本都能完成操作任

務(wù)，總體感覺(jué)授課效果較好。

第7章超級(jí)鏈接

了解超級(jí)鏈接的路徑和鏈接結(jié)構(gòu)；熟記超級(jí)鏈接目標(biāo)打開(kāi)方

教學(xué)目標(biāo)與要求式的設(shè)置含義；熟練掌握超級(jí)鏈接的4種創(chuàng)建方法；能快速

完成5種特殊超級(jí)鏈接的創(chuàng)建方法和步驟。

1.超級(jí)鏈接的各種創(chuàng)建步驟

2.超級(jí)鏈接目標(biāo)打開(kāi)方式的設(shè)置含義

教學(xué)重點(diǎn)

3.超級(jí)鏈接的4種創(chuàng)建方法

4.5種特殊超級(jí)鏈接的創(chuàng)建方法和步驟

1.超級(jí)鏈接的路徑

教學(xué)難點(diǎn)

2.超級(jí)鏈接目標(biāo)打開(kāi)方式的設(shè)置含義

教學(xué)方法多媒體演示為主，適當(dāng)舉例，人體媒體結(jié)合式教學(xué)，課堂講

授，師生互動(dòng)，提問(wèn)式教學(xué)。

教學(xué)課時(shí)2課時(shí)

第7章超級(jí)鏈接教學(xué)提示

大家已經(jīng)會(huì)創(chuàng)建不同內(nèi)容的網(wǎng)頁(yè)了，怎樣把這些分拋出問(wèn)題，引入新課。

散的網(wǎng)頁(yè)組合成一個(gè)統(tǒng)一的整體，讓瀏覽者只打開(kāi)（2分鐘）

主頁(yè)就能訪問(wèn)到其它各個(gè)面呢？需要?jiǎng)?chuàng)建超級(jí)打開(kāi)幾個(gè)典型網(wǎng)站的

鏈接。主頁(yè)，讓大家分析超

7.1超級(jí)鏈接的定義和目標(biāo)選項(xiàng)的含義級(jí)鏈接的功能，進(jìn)而

1.超級(jí)鏈接的定義引入超級(jí)鏈接的定

2.屬性檢查器的“目標(biāo)”彈出菜單中各個(gè)選項(xiàng)的義、分類和目標(biāo)列表

含義：_blank、_parent、_self、_top。的設(shè)置。讓學(xué)生討論

3：創(chuàng)建一個(gè)完整的超級(jí)鏈接必須考慮的4個(gè)方面：總結(jié)創(chuàng)建超級(jí)鏈接的

①鏈接的載體②鏈接的目標(biāo)注意事項(xiàng)（20分鐘）

③鏈接的路徑④鏈接目標(biāo)的打開(kāi)方式通過(guò)舉例和配圖講解

7.2超級(jí)鏈接的路徑鏈接路徑的類型和在

在dreamweaver中有三種類型的鏈接路徑：絕對(duì)路徑、創(chuàng)建超級(jí)鏈接時(shí)路徑

文檔相對(duì)路徑、站點(diǎn)根目錄相對(duì)路徑。的書(shū)寫(xiě)方法（20分鐘）

7.3超級(jí)鏈接的分類采用討論法，讓學(xué)生

１按照鏈接路徑的不同，網(wǎng)頁(yè)中超鏈接一般分為內(nèi)部討論總結(jié)超級(jí)鏈接的

鏈接、錨點(diǎn)鏈接、外部鏈接3種類型。分類。（8分鐘）

２按照使用對(duì)象的不同，網(wǎng)頁(yè)中的鏈接又可以分為以舉例講解各種方法下

下幾種：文本超鏈接、圖像超鏈接、電子郵件鏈接、超級(jí)鏈接的創(chuàng)建方法

錨點(diǎn)鏈接、軟件下載鏈接、多媒體文件鏈接、空鏈接和創(chuàng)建步驟，并總結(jié)

等。各種方法的使用情況

7.4超級(jí)鏈接的創(chuàng)建方法（25分鐘）

1.使用屬性檢查器中鏈接后的文本框創(chuàng)建各種各樣的借助上面講過(guò)的創(chuàng)建

超級(jí)鏈接；方法，讓學(xué)生上臺(tái)操

2.使用屬性檢查器中的瀏覽文件圖標(biāo)創(chuàng)建各種各樣的作實(shí)踐，創(chuàng)建各種類

超級(jí)鏈接；型的超級(jí)鏈接。根據(jù)

3.使用“指向文件”圖標(biāo)創(chuàng)建超級(jí)鏈接；情況不部分內(nèi)容調(diào)整

4.使用菜單中的“超級(jí)鏈接”命令創(chuàng)建超級(jí)鏈接；到機(jī)房講解。（30分

7.5幾種特殊的超級(jí)鏈接詳解鐘）

1．錨記鏈接簡(jiǎn)要講述超級(jí)鏈接的

2．創(chuàng)建腳本鏈接修改與更新操作。（15

3．給圖像熱區(qū)加上超級(jí)鏈接分鐘）

4．創(chuàng)建電子郵件超鏈接結(jié)構(gòu)較為簡(jiǎn)單（15分

5．創(chuàng)建空鏈接鐘）

7.6超級(jí)鏈接的基本操作：更新、修改、檢查總結(jié)并提出建議。（10

7.7超級(jí)鏈接的結(jié)構(gòu)分鐘）

7.8總結(jié)創(chuàng)建超級(jí)鏈接的5點(diǎn)建議

作業(yè)：1.敘述超級(jí)鏈接的定義2.說(shuō)出超級(jí)鏈接的路徑

3.說(shuō)出超級(jí)鏈接的4種創(chuàng)建方法。

小結(jié)：本章內(nèi)容較多，超級(jí)鏈接的路徑較難理解；其他內(nèi)容相對(duì)容易，

且操作性較強(qiáng)，易掌握，學(xué)生基本都能創(chuàng)建各種類型的超級(jí)鏈接，總

體感覺(jué)授課效果還好。

第8章交互（行為、圖AP元素和時(shí)間軸的綜合運(yùn)用，以及

javascript）

1.熟練地應(yīng)用行為，能夠隨心所欲地制作出具交互功能的

網(wǎng)頁(yè)；

2.掌握時(shí)間軸的概念和基本用法；

教學(xué)目標(biāo)與要求3.通過(guò)對(duì)行為的學(xué)習(xí)應(yīng)用，增加網(wǎng)頁(yè)設(shè)計(jì)的特殊效果，提

高學(xué)生對(duì)學(xué)習(xí)網(wǎng)頁(yè)制作的興趣，培養(yǎng)大家的動(dòng)手操作

能力。

4.了解java腳本的基本用法

1.行為的概念和創(chuàng)建，2.使用