《Dreamweaver網(wǎng)頁設(shè)計》教案

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

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

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

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

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

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

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

教學(xué)重點

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

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

教學(xué)難點

其常見標(biāo)簽

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

教學(xué)課時2課時

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

提示

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

設(shè)計動畫，如何把這些作品放到internet中，

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

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

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

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

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

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

網(wǎng)頁的組成元素：文字、圖片、動畫（gif、打開一個搜狐主頁，保存成

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

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

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

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

基本概念：

理解；

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

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

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

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

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

等概念

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

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

常見的布局類型

以注冊和登錄郵箱為例，對

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

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

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

制作網(wǎng)頁動畫工具；

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

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

“三劍客”。

要講述這兩個概念。通過查

其他小工具軟件。

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

HTML的概念

入url的定義和組成，其它

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

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

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

link、meta、body、img、p、font

打開一網(wǎng)頁（詳細(xì)講解網(wǎng)頁

等。

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

腳本語言簡介

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

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

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

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

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

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

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

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

第二階段：創(chuàng)建站點，設(shè)計制作各級頁面打開搜狐主頁的源代碼，讓

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

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

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

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

第三階段：申請空間和域名

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

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

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

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

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

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

色彩運用

間酌情講解其它幾個常見

標(biāo)簽。

簡要講解這兩個概念，然后

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

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

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

本語言的功能。

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

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

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

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

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

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

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

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

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

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

則。

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

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

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

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

以加深學(xué)生對重點知識的

掌握。

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

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

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

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

方案。

作業(yè)布置：

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

官方網(wǎng)、科技網(wǎng)、娛樂休閑運動網(wǎng)、兒童網(wǎng)、體育網(wǎng)、著名出版社網(wǎng)、

提問

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

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

３.課后習(xí)題。

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

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

好。

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

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

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

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

創(chuàng)建站點；能夠快速創(chuàng)建、打開、保存網(wǎng)頁文檔；能熟練

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

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

教學(xué)重點

頁面的屬性設(shè)置

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

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

教學(xué)課時2課時

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

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

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

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

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

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

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

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

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

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

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

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

步驟，著重提出保存和站

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

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

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

分別演示這幾個操作

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

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

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

和背景圖像、文本和鏈接

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

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

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

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

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

技巧。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

教學(xué)難點

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

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

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

教學(xué)方法

課題效果，實驗式教學(xué)。

教學(xué)課時4課時

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

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

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

容

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

結(jié)合WORD，通

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

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

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

式，總結(jié)dw中

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

各包括幾個方面？先簡要演示一

３.１.２插入文本和對象下各種文本符

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

法。法，然后輸入

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

水平線整其格式；接

著復(fù)制一篇文

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

章粘貼到dw

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

中；最后導(dǎo)入

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

一篇word文

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

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

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

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

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

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

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

對上述插入的

３．對齊段落（4種對齊方式）

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

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

的字符格式、

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

標(biāo)題級別、段

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

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

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

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

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

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

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

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

中插入各種圖

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

像對象，并設(shè)

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

置其格式屬

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

性。

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

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

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

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

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

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

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

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

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

1.切片的定義和作用整在機房講

解。詳細(xì)講解

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

并演示切片在

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

fw中制作和

將FireworksHTML插入到Dreamweaver中的方法。

在dw中插入

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

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

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

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

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

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

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

文件的插入方

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

法和屬性設(shè)

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

置；

視頻文件（.flv格式）

用比較法總結(jié)

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

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

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

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

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

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

mid/midi格式：。flash文本和

flash視頻的

wav和aif（aiff）文件

插入方法和屬

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

性設(shè)置；

鏈接到音頻文件

用比較法總結(jié)

嵌入聲音文件網(wǎng)頁中常見的

3.4dw擴展插件音頻文件格式

1.安裝擴展插件及其特點。

2.使用擴展插件舉例演示音頻

使用擴展插件主要有2個步驟：文件的插入和

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

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

樂的插入和設(shè)

命令即可。

置。

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

重點講解頁面

類型含義

過度效果、

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

sound、

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

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

4.常用擴展插件的安裝和使用元素4個插件

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

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

s可實現(xiàn)（效果見實例站點中

命常用擴展插件

有超級鏈接guodong1.html、

令的安裝和使用

時，頁過渡guodong2.html、方法，然后讓

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

出）效果作，教師指點

Typewriter先把要添加該效果的對象放入操作過程和方

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

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

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

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

印文字）

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

對

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

象

樂sound按鈕即可實現(xiàn)

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

p對再在“常用”插入欄中找到

滾動文字插象marquee按鈕即可實現(xiàn)

件

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

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

xp象InsertGreeting”按鈕即可實

插入問候語現(xiàn)

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

對

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

象

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

Persistent先把要添加該效果的對象放入

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

滾動鏈接的到ribberszeewolde|

行

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

為

一般用來顯示廣告信息。

（guodong1.html中的”送給

你了“）

作業(yè)：

1.填空題

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

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

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

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

（3）在計算機領(lǐng)域中，圖像分為________和________2大類。

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

2.選擇題

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

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

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

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

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

（2）網(wǎng)頁通?？梢灾С值膱D像格式有___________。

A．GIFB．BMPC．AVI

D．PSDE．PNGF．JPEG。

3.簡答題

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

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

格式最好？

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

4.操作題：

搜集自己的喜愛的圖片，制作一個電子相冊。

小結(jié)：

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

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

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

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

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

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

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

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

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

教學(xué)重點

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

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

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

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

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

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

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

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

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

局表格布局頁面。簡要講解并3種表格模

式的作用，重點演示不

4.1.表格模式

同模式下按鈕的使用

1.dw中表格的3種模式

回顧word和excel中講

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

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

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

基本操作，引入dw中表

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

格的概念和基本操作。

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

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

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

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

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

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

簽。逐一演示表格的各

1．表格的作用

個基本操作。

2.表格的組成部分

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

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

的原因

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

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

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

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

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

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

局表格和布局單元格的

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

注意事項。

5.嵌套表格

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

表格嵌套的作用

元格的屬性；

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

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

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

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

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

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

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

1.繪制布局表格

操作，以加深印象。

繪制布局表格的注意事項：

2.繪制布局單元格

繪制布局單元格的注意事項：

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

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

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

作業(yè)：

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

2.說出表格和布局表格的作用

3.敘述“表格擴展模式”的作用

4.什么是間隔圖像？

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

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

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

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

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

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

設(shè)置

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

教學(xué)重點

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

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

教學(xué)難點

性設(shè)置

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

教學(xué)方法

講授，師生互動，提問式教學(xué)。

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

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

示

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

1.基本概念看和分

析知名

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

網(wǎng)站使

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

用框架

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

的布局

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

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

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

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

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

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

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

的創(chuàng)建

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

和保存

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

操作

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

打開框

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

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

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

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

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

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

1.選擇框架：通過“框架”面板來選擇框架和子框架。置及其

含義

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

演示框

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

架中的

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

超級鏈

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

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

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

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

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

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

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

Topframe。

5.6課堂實例――制作一個框架網(wǎng)頁

作業(yè)：

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

2.課后習(xí)題

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

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

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

理解AP元素的作用；熟記AP元素的命名原則和特點；掌

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

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

內(nèi)容。

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

教學(xué)重點

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

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

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

講授，師生互動，提問式教學(xué)。

教學(xué)課時2課時

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

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

用AP元素做出來的效果。入新課

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

6.1.1AP元素的概述頁面布局中的

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

效等。演示AP元素的

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

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

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

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

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

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

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

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

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

位

6.1.3.AP元素屬性詳解

1.單個AP元素的屬性：AP元素編號、左和上、寬

和高、Z軸、背景圖像、背景顏色、剪輯、可見性、

溢出：

2.多個AP元素的屬性：

6.1.4AP元素的基本操作

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

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

6.1.5嵌套AP元素

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

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

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

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

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

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

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

第7章超級鏈接

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

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

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

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

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

教學(xué)重點

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

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

1.超級鏈接的路徑

教學(xué)難點

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

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

授，師生互動，提問式教學(xué)。

教學(xué)課時2課時

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

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

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

主頁就能訪問到其它各個面呢？需要創(chuàng)建超級打開幾個典型網(wǎng)站的

鏈接。主頁，讓大家分析超

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

1.超級鏈接的定義引入超級鏈接的定

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

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

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

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

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

7.2超級鏈接的路徑鏈接路徑的類型和在

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

文檔相對路徑、站點根目錄相對路徑。的書寫方法（20分鐘）

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

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

鏈接、錨點鏈接、外部鏈接3種類型。分類。（8分鐘）

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

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

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

等。各種方法的使用情況

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

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

超級鏈接；方法，讓學(xué)生上臺操

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

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

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

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

7.5幾種特殊的超級鏈接詳解鐘）

1．錨記鏈接簡要講述超級鏈接的

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

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

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

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

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

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

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

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

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

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

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

體感覺授課效果還好。

第8章交互（行為、圖AP元素和時間軸的綜合運用，以及

javascript）

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

網(wǎng)頁；

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

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

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

能力。

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

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