邊做邊學(xué)-Dreamweaver CS6網(wǎng)頁設(shè)計案例教程 教學(xué)教案

《邊做邊學(xué)---DreamweaverCS6網(wǎng)頁設(shè)

計案例教程（第3版）（微課版）》

配套教學(xué)教案

第1講

課時內(nèi)容初識DreamweaverCS6授課時間90分鐘課時2

0掌握工作界面的操作。

0掌握網(wǎng)站框架的創(chuàng)建。

教學(xué)目標(biāo)

0掌握站點的管理。

0掌握網(wǎng)頁文件頭的設(shè)置。

0熟練掌握DreamweaverCS6工作界面的基本操作。

教學(xué)重點

0熟練掌握DreamweaverCS6的站點。

教學(xué)難點在DreamweaverCS6中站點的建立及編輯。

1.教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握界面操作和站點設(shè)置的方法；（2）

通過軟件相關(guān)功能的解析學(xué)習(xí)DreamweaverCS6工作界面的基本操作和設(shè)置文件

頭的基本方法。

教學(xué)設(shè)計2.教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計理念和軟件功能；（2）通過軟件功能

解析深入學(xué)習(xí)軟件功能和制作特點。

3.教學(xué)資料及要求：除了課堂實訓(xùn)案例中講解的軟件功能外，還可以根據(jù)相關(guān)的工

具特點進(jìn)行簡單的練習(xí)和操作。

教學(xué)內(nèi)容

討論問題：1、DreamweaverCS6中的網(wǎng)頁分為哪幾種網(wǎng)頁？

2、在DreamweaverCS6中有哪幾種方法可以創(chuàng)建站點？同時本地站點與遠(yuǎn)程站點有什么

區(qū)別？

內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進(jìn)行配合講解。

1.1操作界面

1.1.1【操作目的】

1.1.2【操作步驟】

1.1.3【相關(guān)工具】

1.開始頁面

2.不同風(fēng)格的界面

3.伸縮自如的功能面板

4.多文檔的編輯界面

5.插入面板

6.更完整的CSS功能

1.2創(chuàng)建網(wǎng)站框架

1.2.1【操作目的】

1.2.2【操作步驟】

1.2.3【相關(guān)工具】

1.3管理站點

1.3.1【操作目的】

1.3.2【操作步驟】

1.3.3【相關(guān)工具】

1.站點管理器

2.創(chuàng)建文件夾

3.定義新站點

1.4網(wǎng)頁文件頭設(shè)置

1.4.1【操作目的】

1.4.2【操作步驟】

1.4.3【相關(guān)工具】

1.插入搜索關(guān)鍵字

2.插入作者和版權(quán)信息

3.設(shè)置刷新時間

4.設(shè)置描述信息

5.設(shè)置頁面中所有鏈接的基準(zhǔn)鏈接

6.設(shè)置當(dāng)前文件與其他文件的關(guān)聯(lián)性

1、熟練掌握DreamweaverCS6界面的操作方法和技巧。

小結(jié)2、熟練掌握在DreamweaverCS6中站點的創(chuàng)建、編輯、復(fù)制、刪除和導(dǎo)出的方法，掌

握新建、保存的技巧。

第2講

課時內(nèi)容文本與文檔授課時間180分鐘課時4

0了解文本與文檔的創(chuàng)建方法和使用技巧。

教學(xué)目標(biāo)0掌握項目符號和編號列表使用方法和區(qū)別。

0掌握水平線、網(wǎng)格與標(biāo)尺的使用方法和技巧。

0熟練掌握文本的多種創(chuàng)建方法和編輯技巧。

教學(xué)重點

0熟練掌握項目符號、編號列表和水平線的使用方法。

教學(xué)難點能夠正確輸入文本并編輯相關(guān)屬性。

1.教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握軒宇門窗網(wǎng)頁、休閑旅游網(wǎng)頁和

休閑度假網(wǎng)頁的制作方法：（2）再通過軟件相關(guān)功能的解析學(xué)習(xí)輸入文本和編輯

文本相關(guān)屬性，以及進(jìn)行區(qū)分使用項目符號和編號列表方法和技巧；（3）再通過

課堂實戰(zhàn)演練鞏固軟件功能及網(wǎng)頁制作技巧：（4）最后通過課后綜合演練消化所

學(xué)軟件知識，提高制作網(wǎng)頁的能力。

教學(xué)設(shè)計

2.教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計理念和軟件功能；（2）通過軟件功能

解析深入學(xué)習(xí)軟件功能和制作特點。（3）通過課堂實戰(zhàn)演練和課后綜合演練提高

學(xué)生的實際應(yīng)用能力。

3.教學(xué)資料及要求：在網(wǎng)上找一些簡單的網(wǎng)頁頁面進(jìn)行制作，來加深學(xué)員對知識點

的理解和提高實際操作能力。

教學(xué)內(nèi)容

討論問題：1、在DreamweaverCS6中可以有哪幾種方法創(chuàng)建文本？

2、在DreamweaverCS6中如何輸入多個連續(xù)空格？

3、在DreamweaverCS6中如何更改文字顏色、字號等設(shè)置？

內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進(jìn)行配合講解。

2.1軒宇門窗網(wǎng)頁

2.1.1【案例分析】

2.1.2【設(shè)計理念】

2.1.3【操作步驟】

1.設(shè)置頁面屬性

2.輸入空格和文字

2.1.4【相關(guān)工具】

1.輸入文本

2.設(shè)置文本屬性

3.輸入連續(xù)的空格

4.設(shè)置是否顯示不可見元素

5.設(shè)置頁邊距

6.設(shè)置網(wǎng)頁的標(biāo)題

7.設(shè)置網(wǎng)頁的默認(rèn)格式

2.1.5【實戰(zhàn)演練】一一佳人SPA養(yǎng)生館網(wǎng)頁

2.2休閑旅游網(wǎng)頁

2.2.1【案例分析】

2.2.2【設(shè)計理念】

2.2.3【操作步驟】

1.添加字體

2.改變文字外觀

2.2.4【相關(guān)工具】

1.改變文本的大小

2.改變文本的顏色

3.改變文本的字體

4.改變文本的對齊方式

5.設(shè)置文本樣式

6.段落文本

7.插入換行符

8.設(shè)置項目符號或編號

9.修改項目符號或編號

10.設(shè)置文本縮進(jìn)格式

11.插入日期

12.特殊字符

2.2.5【實戰(zhàn)演練】---快樂購物網(wǎng)頁

2.3休閑度假網(wǎng)頁

2.3.1【案例分析】

2.3.2【設(shè)計理念】

2.3.3【操作步驟】

2.3.4【相關(guān)工具】

1.水平線

2.顯示和隱藏網(wǎng)格

3.標(biāo)尺

2.3.5【實戰(zhàn)演練】一一美食回味網(wǎng)頁

2.4綜合演練——家居裝飾網(wǎng)頁

2.4.1【案例分析】

2.4.2【設(shè)計理念】

2.4.3【知識要點】

2.5綜合演練——有機果蔬網(wǎng)頁

2.5.1【案例分析】

2.5.2【設(shè)計理念】

2.5.3【知識要點】

1.熟練掌握文本的使用方法和技巧。

小結(jié)

2.了解并掌握項目符號和編輯列表的使用方法和技巧。

2.4綜合演練——家居裝飾網(wǎng)頁

2.4.1口（案例分析】“

由于人們生活理念的提升，對家居室內(nèi)環(huán)境有了更新的追求。家居裝飾就是按照個人意愿和喜歡的風(fēng)格，

對居室進(jìn)行藝術(shù)處理,網(wǎng)頁設(shè)計要求具有溫磬、快樂的居家感覺?！?/p>

2.4.2Q【設(shè)計理念】

在網(wǎng)頁設(shè)計制作過程中，背景采用了灰色并使用大幅家居秀影圖片作為裝飾，使整個頁面看'起來典雅舒迄

黑色的導(dǎo)航設(shè)計簡潔雅觀，更方便瀏覽者查閱。整體設(shè)計風(fēng)格具有家居裝飾的特包優(yōu)雅并且時尚…

2.4.3口（知識要點】~

使用“頁面屬性”命令，設(shè)置頁面的邊距、網(wǎng)頁標(biāo)題效果；使用“腐性”面板，改變文字的大小。.

2.5綜合演練一有機果蔬網(wǎng)頁

作業(yè)

251口［案例分析2

現(xiàn)代人對生活質(zhì)量的要求同時表現(xiàn)在對食物的追求，有機果蔬是指在生產(chǎn)過程中嚴(yán)格按照有機生產(chǎn)規(guī)程，

并含有綠色食品標(biāo)，且經(jīng)過有機食品認(rèn)證機構(gòu)鑒定并頒發(fā)有機食品證書的果蔬產(chǎn)品。網(wǎng)頁設(shè)計要求突出果蔬健

康無污染等特色。，

2.5.2口【設(shè)計理念】~

在網(wǎng)頁設(shè)計制作過程中，背景采用了綠色蔬菜的圖片，它給消費者一種健康的感覺；畫融體色彩搭配舒

適親切，白色的文字與圖片搭配相得益彰，導(dǎo)航條設(shè)計簡》的娛有特色，網(wǎng)頁設(shè)計與宣傳主題相呼應(yīng)；畫面清

爽舒適，符合有機食物的風(fēng)格特點?！?/p>

2.5.30［知識要點】，

使用“頁面屬性”命令，設(shè)置頁面邊距和標(biāo)題；使用“首選參數(shù)”命令，設(shè)置允許多個空格一

第3講

課時內(nèi)容圖像和多媒體授課時間180分鐘課時4

0掌握插入圖像的方法和技巧

教學(xué)目標(biāo)

0掌握多媒體在網(wǎng)頁中的應(yīng)用。

0熟練掌握圖像的格式與模式。

教學(xué)重點

0熟練掌握Flash文件的插入與設(shè)置。

教學(xué)難點能夠正確使用圖像和圖像的屬性設(shè)置、Flash文件的格式及設(shè)置屬性。

1.教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握咖啡館網(wǎng)頁、物流運輸網(wǎng)頁的制

作方法；（2）再通過軟件相關(guān)功能的解析學(xué)習(xí)圖像的插入與使用技巧，以及進(jìn)行

動畫的使用；（3）再通過課堂實戰(zhàn)演練鞏固軟件功能及網(wǎng)頁制作技巧；（4）最后

通過課后綜合演練消化所學(xué)軟件知識，提高圖像與動畫的使用能力。

教學(xué)設(shè)計2.教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計理念和軟件功能；（2）通過軟件功能

解析深入學(xué)習(xí)軟件功能和制作特點。（3）通過課堂實戰(zhàn)演練和課后綜合演練提高

學(xué)生的實際應(yīng)用能力。

3.教學(xué)資料及要求：在網(wǎng)上找一些帶有圖像和動畫的網(wǎng)頁頁面進(jìn)行制作，來加深學(xué)

員對知識點的理解和提高實際操作能力。

教學(xué)內(nèi)容

討論問題：1、在DreamweaverCS6中插入圖像后在瀏覽器中不能正常顯示圖像，是哪幾種原因造成？

如何解決？

2、在DreamweaverCS6中如何設(shè)置插入的Flash動畫為透.明背景？

內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進(jìn)行配合講解。

3.1咖啡館網(wǎng)頁

3.1.1【案例分析】

3.1.2【設(shè)計理念】

3.1.3【操作步驟】

3.1.4【相關(guān)工具】

1.網(wǎng)頁中的圖像格式

2.插入圖像

3.設(shè)置圖像屬性

4.插入圖像占位符

5.跟蹤圖像

3.1.5【實戰(zhàn)演練】一一寵物狗網(wǎng)店

3.2物流運輸網(wǎng)頁

3.2.1【案例分析】

3.2.2【設(shè)計理念】

3.3.3【操作步驟】

3.2.4【相關(guān)工具】

1.插入Flash動畫

2.插入FLV

3.插入Shockwave影片

4.影片插入Applet程序

5.插入ActiveX控件

3.2.5【實戰(zhàn)演練】一一準(zhǔn)媽媽課堂網(wǎng)頁

3.3綜合演練——兒童零食網(wǎng)頁

3.3.1【案例分析】

3.3.2【設(shè)計理念】

3.3.3【知識要點】

3.4綜合演練——房源網(wǎng)頁

3.4.1【案例分析】

3.4.2【設(shè)計理念】

3.4.3【知識要點】

1.熟練掌握圖像的格式與插入方法和使用技巧。

小結(jié)

2.掌握Flash動畫的插入和屬性的設(shè)置。

3.3綜合演練——兒童零食網(wǎng)頁

3.3.1口【案例分析】，

零食是指除一日三餐外的其他食物，一般J集對零食比的衷，零食對兒童具有不可抗拒的特殊魅力，所

以網(wǎng)頁設(shè)計要求能夠吸引兒童關(guān)注，符合兒童的審美需求。~

3.3.2口【設(shè)計理念】~

在網(wǎng)頁設(shè)計制作過程中,使用大紅色作為網(wǎng)頁的背景,能瞬間吸引人們的視線，達(dá)到宣傳的目的；明快鮮

亮的色彩搭配在網(wǎng)頁設(shè)計上十分突出，增強了網(wǎng)頁的視覺效果和觀賞性，卡通的圖日配使畫面更加歡快，下

方產(chǎn)品的介紹直觀明了，方便消費荀蟒。~

3.3.3Q［知識要點】“

使用“圖像”按鈕插入圖像；使用“代碼”視圖，手動輸入代碼設(shè)置圖像的水平間距。~

作業(yè)

3.4綜合演練——房源網(wǎng)頁

3.4.1口【案例分析】“

房源網(wǎng)是當(dāng)下房地產(chǎn)行業(yè)的一種運營方式，它不光是有房屋出租出售的內(nèi)容，還包括房屋裝修、裝飾，以

及一些二手房的出售出租。要求網(wǎng)頁風(fēng)格簡潔，并且著重內(nèi)容的宣傳。~

3.4.20【設(shè)計理念】

在網(wǎng)頁設(shè)計和制作過程中，椽色的背景給人安心舒適的感覺，大氣的圖文搭配使網(wǎng)頁更具質(zhì)感，細(xì)致全面

的圖文信息更加體現(xiàn)了網(wǎng)站周到的服務(wù)；簡潔清晰的導(dǎo)航設(shè)計更便于人們的瀏覽；整體風(fēng)格具有商業(yè)氣息，讓

人耳目一新0?

3.4.3口［知識要點】，

使用“SWF”按鈕為網(wǎng)頁文檔插入Flash動畫效果；使用,,屬性”面板，設(shè)置動畫背景透明效果；使用“播

放”按鈕在文檔窗口中預(yù)覽效果，"

第4講

課時內(nèi)容超鏈接授課時間180分鐘課時4

0了解超鏈接的概念與路徑知識

0掌握文本超鏈接的創(chuàng)建方法和技巧。

教學(xué)目標(biāo)0掌握圖像超鏈接的創(chuàng)建方法和技巧。

0掌握命名錨記超鏈接的創(chuàng)建方法和技巧

0掌握熱區(qū)鏈接的創(chuàng)建方法和技巧

0簡單了解超鏈接的概念與路徑知識。

教學(xué)重點

0熟練掌握超鏈接的分類及每種類型的創(chuàng)建方法。

教學(xué)難點能夠正確給所需文本添加超鏈接，以及錨記超鏈接的使用方法和技巧。

1.教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握建筑模型網(wǎng)頁、溫泉度假網(wǎng)頁的

制作方法：（2）再通過軟件相關(guān)功能的解析學(xué)習(xí)超鏈接的種類，以及進(jìn)行不同類

型的超鏈接創(chuàng)建；（3）再通過課堂實戰(zhàn)演練鞏固軟件功能及網(wǎng)頁制作技巧；（4）

最后通過課后綜合演練消化所學(xué)軟件知識，提高制作超鏈接的能力。

教學(xué)設(shè)計2.教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計理念和軟件功能；（2）通過軟件功能

解析深入學(xué)習(xí)軟件功能和制作特點。（3）通過課堂實戰(zhàn)演練和課后綜合演練提高

學(xué)生的實際應(yīng)用能力。

3.教學(xué)資料及要求：在網(wǎng)上找一些多級頁面進(jìn)行制作，來加深學(xué)員對知識點的理解

和提高實際操作能力。

教學(xué)內(nèi)容

討論問題：1、在DreamweaverCS6中超鏈接有哪幾種類型？分別是哪幾種？

2、在DreamweaverCS6中使用哪種超鏈接可以跳至指定的位置？

內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進(jìn)行配合講解。

4.1建筑模型網(wǎng)頁

4.1.1【案例分析】

4.1.2【設(shè)計理念】

4.1.3【操作步驟】

1.制作電子郵件超接

2.制作下載文件鏈接

4.1.4【相關(guān)工具】

1.超鏈接的概念與路徑知識

2.創(chuàng)建文本鏈接

3.文本鏈接的狀態(tài)

4.下載文件鏈接

5.電子郵件鏈接

4.1.5【實戰(zhàn)演練】——冶金鑄造網(wǎng)頁

4.2溫泉度假網(wǎng)頁

4.2.1【案例分析】

4.2.2【設(shè)計理念】

4.2.3【操作步驟】

1.制作鼠標(biāo)經(jīng)過

2.創(chuàng)建熱點鏈接

4.2.4【相關(guān)工具】

1.圖像超鏈接

2.鼠標(biāo)經(jīng)過圖像鏈接

3.命名錨記鏈接

4.創(chuàng)建熱區(qū)鏈接

4.2.5【實戰(zhàn)演練】一一金融投資網(wǎng)頁

4.3綜合演練——世界景觀網(wǎng)頁

4.3.1【案例分析】

4.3.2【設(shè)計理念】

4.3.3【知識要點】

4.4綜合演練——世界旅游網(wǎng)頁

4.4.1【案例分析】

4.4.2【設(shè)計理念】

4.4.3【知識要點】

1.熟練掌握超鏈接的概念與路徑。

小結(jié)

2.熟練掌握超鏈接的類型與創(chuàng)建方法的技巧。

4.3綜合演練——世界景觀網(wǎng)頁

4.3.1□【案例分析】.

每個國家、民篇有自己的文化特色以及景觀建筑，這些景觀建筑不僅是國家的標(biāo)志也是民族的驕傲。網(wǎng)

頁設(shè)計要求突出對“世界景觀”這一主題的介紹。~

4.3.2D【設(shè)計理念】“

在網(wǎng)頁設(shè)計和制作過程中，灰綠色的背景使網(wǎng)頁看上去更具質(zhì)感；整齊排^的世界景觀的照片及文字使網(wǎng)

頁看上去更加整潔清晰；網(wǎng)頁設(shè)計留有大量空白，使網(wǎng)頁設(shè)計更具特色，畫面更加開闊，整體風(fēng)格大氣時尚。

口（知識要點】一

作業(yè)4.3.3

使用“矩形熱點”工具，制作指定的鏈接網(wǎng)頁文檔…

4.4綜合演練——世界旅游網(wǎng)頁

4.4.1口【案例分析】『

旅游網(wǎng)站是為游客提供全新獨家的旅游線路，以及旅游服務(wù)經(jīng)驗，并且包含特價旅游網(wǎng)報價和詳細(xì)的旅游

網(wǎng)攻略,網(wǎng)站設(shè)計要求能夠讓人感受到舒適、放松的出游氛圍，，

4.4.2D［設(shè)計理念］。

在網(wǎng)頁設(shè)計和制作過程中，網(wǎng)頁的色彩都是用清爽舒適的色彩搭配；網(wǎng)頁的設(shè)計以圖片為主，使人能夠直

觀地接收到網(wǎng)頁信息，導(dǎo)航欄設(shè)計簡潔，網(wǎng)頁分類明確，方便瀏覽。整體風(fēng)格設(shè)計直觀明了，畫面豐富自然，

使瀏覽者觀看起來賞心悅目。"

4.4.3D［知識要點】

使用“鼠標(biāo)經(jīng)過圖像“按鈕，為網(wǎng)頁添加導(dǎo)航效果，，

第5講

課時內(nèi)容使用表格授課時間270分鐘課時6

0了解表格的簡單操作

教學(xué)目標(biāo)0掌握網(wǎng)頁中的數(shù)據(jù)表格。

0掌握利用表格進(jìn)行頁面布局的方法和技巧。

0簡單了解表格在制作網(wǎng)頁中的作用。

教學(xué)重點

0熟練掌握表格的插入與屬性的設(shè)置。

教學(xué)難點能夠正確使用表格的嵌套制作復(fù)雜的網(wǎng)頁頁面。

1.教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握營養(yǎng)美食網(wǎng)頁、綠色糧倉網(wǎng)頁的

制作方法；（2）再通過軟件相關(guān)功能的解析學(xué)習(xí)表格的插入與屬性的設(shè)置，以及

進(jìn)行表格數(shù)據(jù)的導(dǎo)入與導(dǎo)出；（3）再通過課堂實戰(zhàn)演練鞏固軟件功能及表格的使

用技巧；（4）最后通過課后綜合演練消化所學(xué)軟件知識，提高網(wǎng)頁制作的能力。

教學(xué)設(shè)計2.教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計理念和軟件功能；（2）通過軟件功能

解析深入學(xué)習(xí)軟件功能和制作特點。（3）通過課堂實戰(zhàn)演練和課后綜合演練提高

學(xué)生的實際應(yīng)用能力。

3.教學(xué)資料及要求：在網(wǎng)上找一些簡單的網(wǎng)頁頁面進(jìn)行制作，來加深學(xué)員對知識點

的理解和提高實際操作能力。

教學(xué)內(nèi)容

討論問題：1、在DreamweaverCS6中如何向表格一次添加多行或多列？方法分別是？

2^在DreamweaverCS6中＜tr＞標(biāo)簽可否添加背景圖像？

內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進(jìn)行配合講解。

5.1營養(yǎng)美食網(wǎng)頁

5.1.1【案例分析】

5.1.2【設(shè)計理念】

5.1.3【操作步驟】

5.1.4【相關(guān)工具】

1.表格的組成

2.插入表格

3.表格各元素的屬性

4.在表格中插入內(nèi)容

5.選擇表格元素

6.復(fù)制、粘貼表格

7.縮放表格

8.刪除表格和表格內(nèi)容

9.合并和拆分單元格

10.增加和刪除表格的行和列

5.1.5【實戰(zhàn)演練】一一美麗人生網(wǎng)頁

5.2綠色糧倉網(wǎng)頁

5.2.1【案例分析】

5.2.2【設(shè)計理念】

5.2.3【操作步驟】

5.2.4【相關(guān)工具】

I.導(dǎo)入和導(dǎo)出表格的數(shù)據(jù)

2.排序表格

3.復(fù)雜表格的排版

5.2.5【實戰(zhàn)演練】一一OA辦公系統(tǒng)網(wǎng)頁

5.3綜合演練——茶文化網(wǎng)頁

5.3.1【案例分析】

5.3.2【設(shè)計理念】

5.3.3【知識要點】

5.4綜合演練——火鍋餐廳網(wǎng)頁

5.4.1【案例分析】

5.4.2【設(shè)計理念】

5.4.3【知識要點】

1.熟練掌握表格的插入及表格屬性的設(shè)置方法和技巧。

小結(jié)

2.熟練掌握表格嵌套布局。

5.3綜合演練一茶文化網(wǎng)頁

5.3.1口【案例分析】“

茶文化包括茶葉品評技法、藝術(shù)操作手段的鑒賞、品茗美好環(huán)境的領(lǐng)略等整個品茶過程的美好意境;其過

程體現(xiàn)形式和精神的相互統(tǒng)一，是飲茶活動過程中形成的文化現(xiàn)象：它起源久近，歷史悠久，文化底蘊深厚：

網(wǎng)頁設(shè)計要求突出茶文化的文化底蘊，以及它的美好意境;“

5.3.2D【設(shè)計理念】

在網(wǎng)頁設(shè)計和制作過程中，淡是閑適的茶區(qū)直盤紿人悠閑舒適的印象：素鞋古樸的茶具和新鮮的茶葉搭配

清新自然之感油然而生，具有民族特色和中國文化的圖文搭配，更加提升了畫面的中國文化氣息:整體風(fēng)格符

合茶文化的特色，畫面搭配舒適和諧，~

作業(yè)5.3.3D［知識要點】.，

使用“導(dǎo)入表格式數(shù)據(jù)”命令，導(dǎo)人外部表格數(shù)據(jù)；使用“插入列”命令，為表珞增加列；使用“圖像”

按徑插入圖像；使用“CSS樣式“命令，控制文字的大小及顏色,，

5.4綜合演練——火鍋餐廳網(wǎng)頁

5.4.1口【案例分析】

火鍋，古稱“古董堂”，因投料入沸水時發(fā)出的“咕咚”聲而得名。重慶火鍋，麻辣醇香，名揚天下，是

現(xiàn)代人熱愛的美食之一。網(wǎng)站設(shè)計要求時尚新潮，符合年輕人的口味,~

5.4.2口【設(shè)計理念】，

在網(wǎng)頁設(shè)計和制作過程中，模糊的火鍋背景能夠給瀏覽者帶來好奇心；紅色的色塊在畫面中突出，也符合

火鍋的特色，色塊的排放具有秩序，使畫面看起來整齊并具有規(guī)律。網(wǎng)頁設(shè)計突出了宣傳的主題。，

5.4.3Q［知識要點］~

使用“頁面屬性”命令，設(shè)置頁面的邊距和標(biāo)題；使用“表格”按鈕插入表格；使用“CSS樣式”命令，

為單元格添加背景圖像效果；使用“圖像”按鈕插入圖像°，

第6講

課時內(nèi)容使用框架授課時間270分鐘課時6

0了解框架與框架集的作用。

教學(xué)目標(biāo)

0掌握框架的屬性設(shè)置方法和技巧。

0簡單了解框架的作用。

教學(xué)重點

0熟練掌握框架布局的應(yīng)用。

教學(xué)難點能夠正確使用框架布局制作部分跳轉(zhuǎn)頁面。

1.教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握牛奶飲料網(wǎng)頁、建筑規(guī)劃網(wǎng)頁的

制作方法；（2）再通過軟件相關(guān)功能的解析學(xué)習(xí)框架的創(chuàng)建方法和使用技巧，以

及進(jìn)行框架頁之間的超鏈接；（3）再通過課堂實戰(zhàn)演練鞏固軟件功能及框架使用

技巧；（4）最后通過課后綜合演練消化所學(xué)軟件知識，提高網(wǎng)頁制作的能力。

教學(xué)設(shè)計2.教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計理念和軟件功能；（2）通過軟件功能

解析深入學(xué)習(xí)軟件功能和制作特點。（3）通過課堂實戰(zhàn)演練和課后綜合演練提高

學(xué)生的實際應(yīng)用能力。

3.教學(xué)資料及要求：在網(wǎng)上找一些帶有框架布局的網(wǎng)頁頁面進(jìn)行制作，來加深學(xué)員

對知識點的理解和提高實際操作能力。

教學(xué)內(nèi)容

討論問題：1、在DreamweaverCS6中框架分為哪幾種類型？每種類型用在哪些方面？

2、在DreamweaverCS6中修改其中一個框架頁時其他框架頁是否有影響？

內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進(jìn)行配合講解。

6.1牛奶飲料網(wǎng)頁

6.1.1【案例分析】

6.1.2【設(shè)計理念】

6.1.3【操作步驟】

1.新建框架并編輯

2.插入圖像

6.1.4【相關(guān)工具】

1.建立框架集

2.為框架添加內(nèi)容

3.保存框架

4.框架的選擇

5.修改框架的大小

6.拆分框架

7.刪除框架

6.1.5【實戰(zhàn)演練】——獻(xiàn)愛心活動中心網(wǎng)頁

6.2建筑規(guī)劃網(wǎng)頁

6.2.1【案例分析】

6.2.2【設(shè)計理念】

6.2.3【操作步驟】

1.設(shè)置保存文檔

2.插入表格、圖像和鼠標(biāo)經(jīng)過圖像

3.修改頁面屬性并插入圖像

4.創(chuàng)建圖像超鏈接

6.2.4【相關(guān)工具】

1.框架屬性

2.框架集的屬性

3.框架中的鏈接

6.2.5【實戰(zhàn)演練】一一陽光外語小學(xué)網(wǎng)頁

6.3綜合演練——健康定制網(wǎng)頁

6.3.1【案例分析】

6.3.2【設(shè)計理念】

6.3.3【知識要點】

6.4綜合演練——健康定制網(wǎng)頁2

6.4.1【案例分析】

6.4.2【設(shè)計理念】

6.4.3【知識要點】

1.熟練掌握框架的插入方法和技巧。

小結(jié)

2.熟練掌握框架頁之間的超鏈接。

6.3綜合演練一健康定制網(wǎng)頁1

6.3.1口【案例分析】，

隨獺代人生活壓力的不斷變大，健康就成了不可忽視的重要問題，健康定制可以根據(jù)用戶的身體情況為

其定制相關(guān)的治療方案，在設(shè)計上要求合理地進(jìn)行配色和編排，展現(xiàn)出健康、簡約的特點。“

6.3.20【設(shè)計理念】~

在網(wǎng)頁設(shè)計和制作過程中，銀灰色的背景展現(xiàn)出網(wǎng)站的品質(zhì)；清晰明快的編排方式給人簡約、大氣的印象.

與網(wǎng)頁的主題相呼應(yīng)；整體設(shè)計簡潔直觀，讓人一目了然，宣傳性強，?

6.3.3L［知識要點】，

作業(yè)使用“新建”命令，新建空白頁面；使用“插入”菜單，插入新建瓦；使用“保存全部”命令，將框架全

部保存；使用“圖像”按鈕制作鈣的框架網(wǎng)頁效果一

???*

@?

6.4綜合演練一健康定制網(wǎng)頁2

6.4.1口［案例分析］

本網(wǎng)頁是為健康定制網(wǎng)頁制作的子頁面，在設(shè)計上要求簡潔直觀、清晰明確的展示出企業(yè)的相關(guān)信息，并

與首頁的設(shè)計相呼應(yīng)?！?/p>

6.4.2D［設(shè)計理念］.，

在網(wǎng)頁設(shè)計和制作過程中，與首頁相同的用色和布局，使整體設(shè)計具有連貫性；橙色的標(biāo)簽使展示的內(nèi)容

清晰明確，讓人一目了然，明快的用色給人陽光、健康的印象，與網(wǎng)頁的主題內(nèi)容相呼應(yīng)；整體設(shè)計醒目直觀,

宣傳性強。“

6.4.3口［知識要點】“

使用“鏈接”選項,設(shè)置鏈接效果；使用“目標(biāo)”選項，設(shè)置鏈接的顯示區(qū)域…

=［Tn-HHD“

第7講

課時內(nèi)容使用層授課時間225分鐘課時5

0掌握層的基本操作方法和技巧。

教學(xué)目標(biāo)

0掌握應(yīng)用層設(shè)計表格的方法和技巧。

0掌握層的插入方法和應(yīng)用技巧。

教學(xué)重點

0熟練層的屬性設(shè)置。

教學(xué)難點能夠正確使用層命令來布局元素的位置。

1.教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握聯(lián)創(chuàng)網(wǎng)絡(luò)技術(shù)網(wǎng)頁、信業(yè)融資網(wǎng)

頁的制作方法；（2）再通過軟件相關(guān)功能的解析學(xué)習(xí)層的使用方法和技巧，以及

將層轉(zhuǎn)換為表格的方法；（3）再通過課堂實戰(zhàn)演練鞏固軟件功能及應(yīng)用層技巧；（4）

最后通過課后綜合演練消化所學(xué)軟件知識，提高層的應(yīng)用能力。

教學(xué)設(shè)計2.教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計理念和軟件功能；（2）通過軟件功能

解析深入學(xué)習(xí)軟件功能和制作特點。（3）通過課堂實戰(zhàn)演練和課后綜合演練提高

學(xué)生的實際應(yīng)用能力。

3.教學(xué)資料及要求：在網(wǎng)上找一些網(wǎng)頁頁面進(jìn)行制作，來加深學(xué)員對知識點的理解

和提高實際操作能力。

教學(xué)內(nèi)容

討論問題：1、在DreamweaverCS6中層的作用是？

2、在DreamweaverCS6中有哪幾種方法調(diào)整層的順序？

內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進(jìn)行配合講解。

7.1聯(lián)創(chuàng)網(wǎng)絡(luò)技術(shù)網(wǎng)頁

7.1.1【案例分析】

7.1.2【設(shè)計理念】

7.1.3【操作步驟】

7.1.4【相關(guān)工具】

1.創(chuàng)建層

2.選擇層

3.設(shè)置層的默認(rèn)屬性

4.AP元素面板

5.更改層的堆疊順序

6.更改層的可見性

7.調(diào)整層的大小

8.嵌套層

9.移動層

10.對齊層

11.層靠齊到網(wǎng)格

7.1.5【實戰(zhàn)演練】——鮮花速遞網(wǎng)頁

7.2信業(yè)融資網(wǎng)頁

7.2.1【案例分析】

7.2.2【設(shè)計理念】

7.2.3【操作步驟】

7.2.4[相關(guān)工具】

1.將APDiv轉(zhuǎn)換為表格

2.將表格轉(zhuǎn)換為APDiv

7.2.5[實戰(zhàn)演練】——精品家居網(wǎng)頁

7.3綜合寅練——充氣浮床網(wǎng)頁

7.3.1[案例分析】

7.3.2[設(shè)計理念】

7.3.3[知識要點】

7.4綜合寅練——美味小吃網(wǎng)頁

7.4.1[案例分析】

7.4.2[設(shè)計理念】

7.4.3[知識要點】

1.熟練層的插入方法及屬性設(shè)置。

小結(jié)

2.熟練掌握層轉(zhuǎn)為表格的方法和技巧。

豳7.3綜合演練一充氣浮床網(wǎng)頁

7.3.1D【案例分析】“

充氣浮床是水上娛樂項目不可或缺的娛樂設(shè)施，為水上娛樂帶來更多歡樂，深受不同年齡層人們的喜愛：

網(wǎng)站設(shè)計要求具有歡樂溫馨的氛圍。。

7.3.2口［設(shè)計理念］“

在網(wǎng)頁設(shè)計和制作過程中，彩色的線條在畫面中多次出現(xiàn)，代表著充氣床的多樣魅力，并且起到豐富畫面

效果的作用，充滿快樂地畫面氛圍.達(dá)到宣傳的目的；整個網(wǎng)頁設(shè)計集歡樂、明快、現(xiàn)代為一體，并且體現(xiàn)出

水上運動的動感和歡樂。“

7.3.3Q［知識要點】“

使用“繪制APDiv”按鈕繪制層；使用“圖像”按鈕在繪制的圖層中插入圖像?！?/p>

作業(yè)9-尹！ME1|"

—w.0..

■7.4綜合演練一一美味小吃網(wǎng)頁...一.■

7.4.1口［案例分析】~

比薩餅是一種發(fā)源于意大利的食品，在全球頗受歡迎c比薩餅的通常做法是在發(fā)酵的圓面餅上面覆蓋番茄

醬、奶酪和其他配料，并由烤爐烤制而成，一般的比薩端會搭配其池小吃及飲品，網(wǎng)頁設(shè)計要求體現(xiàn)比薩餅

的美味與特色。，

7.4.20【設(shè)計理念】

在網(wǎng)頁設(shè)計和制作過程中，使用模糊的比薩底黑莊作為背景，能夠呼應(yīng)主題并骸！1襯托的效果，突出了畫

面中的主要內(nèi)容；網(wǎng)頁的信息內(nèi)容使用圓形在畫面中系列，圖文搭配合理舒適，整體風(fēng)格簡單大方，能夠體現(xiàn)

出休閑隨意的飲食特色。~

7.4.30［知識要點】0

使用“繪制AP-Div"按鈕繪制層；使用“圖像”按鈕插入圖像；使用"CSS樣式”命令，設(shè)置文字的大

小和顏色；使用“移動層”命令,調(diào)整層的位置制作陰影效果。“

第8講

課時內(nèi)容CSS樣式授課時間225分鐘課時5

0了解CSS樣式的概念。

0了解CSS樣式。

0掌握樣式的類型與創(chuàng)建方法。

教學(xué)目標(biāo)

0掌握編輯樣式的方法和技巧。

回掌握CSS的屬性。

0掌握過濾器。

0掌握如何應(yīng)用CSS樣式控制標(biāo)簽。

教學(xué)重點

0熟練掌握CSS的屬性設(shè)置。

教學(xué)難點能夠正確使用不同類型的樣式控制標(biāo)簽。

1.教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握國畫展覽館網(wǎng)頁、打印機網(wǎng)頁和

愛晚工程網(wǎng)頁的制作方法；（2）再通過軟件相關(guān)功能的解析學(xué)習(xí)CSS樣式，以及

CSS樣式的屬性及分類；（3）再通過課堂實戰(zhàn)演練鞏固軟件功能及CSS樣式的應(yīng)

用技巧：（4）最后通過課后綜合演練消化所學(xué)軟件知識，提高網(wǎng)頁制作的能力。

教學(xué)設(shè)計2.教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計理念和軟件功能；（2）通過軟件功能

解析深入學(xué)習(xí)軟件功能和制作特點。（3）通過課堂實戰(zhàn)演練和課后綜合演練提高

學(xué)生的實際應(yīng)用能力。

3.教學(xué)資料及要求：在網(wǎng)上中找一些多樣式的網(wǎng)頁頁面進(jìn)行制作，來加深學(xué)員對知

識點的理解和提高實際操作能力。

教學(xué)內(nèi)容

討論問題：1、在DreamweaverCS6中CSS樣式分為哪幾種類型？每種類型的具體作用？

2、在DreamweaverCS6中使用CSS樣式定位時需注意什么事項？

內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進(jìn)行配合講解。

8.1國畫展覽館網(wǎng)頁

8.1.1【案例分析】

8.1.2【設(shè)計理念】

8.1.3【操作步驟】

8.1.4【相關(guān)工具】

1.CSS樣式的概念

2.“CSS樣式”面板

3.CSS樣式的類型

4.創(chuàng)建重定義HTML標(biāo)簽樣式

5.創(chuàng)建CSS選擇器

6.創(chuàng)建和應(yīng)用自定義樣式

7.創(chuàng)建和引用外部樣式

8.編輯樣式

8.1.5【實戰(zhàn)演練】一一葡萄酒網(wǎng)頁

8.2打印機網(wǎng)頁

8.2.1【案例分析】

8.2.2【設(shè)計理念】

8.2.3【操作步驟】

1.插入表格并輸入文字

2.設(shè)置CSS屬性

8.2.4【相關(guān)工具】

1.類型

2.背景

3.區(qū)塊

4.方框

5.邊框

6.列表

7.定位

8.擴(kuò)展

9.過渡

8.2.5【實戰(zhàn)演練】一一室內(nèi)設(shè)計網(wǎng)頁

8.3愛晚工程網(wǎng)頁

8.3.1【案例分析】

8.3.2【設(shè)計理念】

8.3.3【操作步驟】

1.插入圖片

8.3.4【相關(guān)工具】

1.可應(yīng)用過濾的HTML標(biāo)簽

2.CSS的靜態(tài)過濾器

3.CSS的動態(tài)過濾器

8.3.5【實戰(zhàn)演練】一一汽車配件網(wǎng)頁

8.4綜合演練——GPS導(dǎo)航儀網(wǎng)頁

8.4.1【案例分析】

8.4.2【設(shè)計理念】

8.4.3【知識要點】

8.5綜合演練——抒情散文網(wǎng)頁

8.5.1【案例分析】

8.5.2【設(shè)計理念】

8.5.3【知識要點】

1.熟練掌握CSS樣式的概念。

小結(jié)

2.熟練掌握CSS樣式的分類及使用方法和技巧。

8.4綜合演練——GSP導(dǎo)航儀網(wǎng)頁

作業(yè)8.4.1口【案例分析】.

GPS導(dǎo)航儀能夠幫助用戶準(zhǔn)確定位當(dāng)前位置，并且根據(jù)既定的目的地計算行程，廣泛用于交通、旅游等方

面。本例將制作GPS導(dǎo)航儀網(wǎng)頁，要求體現(xiàn)出GPS導(dǎo)航儀的技術(shù)和功能一

8.4.2D【設(shè)計理念】“

在網(wǎng)頁設(shè)計和制作過程中，背景采用藍(lán)白黑的色彩搭配，給人輕松和自在的感覺；將產(chǎn)品照片作為網(wǎng)頁設(shè)

計的主體，醒目直觀地展示出網(wǎng)頁的宣傳主題，網(wǎng)站分類明確，與背景顏色相呼應(yīng)；簡潔直觀的設(shè)計讓人一目

了然,易于查看瀏覽。~

8.4.3R［知識要點】

使用“屬性”面板，為文字添加空白鏈接；使用“CSS樣式”命令，設(shè)置超鏈接的顯示及鼠標(biāo)經(jīng)過的顯示

8.5綜合演練一抒情散文網(wǎng)頁

8.5.1D［案例分析】~

抒情散文以抒發(fā)主觀清感為出發(fā)點，以空靈飄逸見長，著力點在于準(zhǔn)確表達(dá)感清色彩的語言運用上。本例

將制作抒情散文網(wǎng)頁，在設(shè)計上希望體現(xiàn)出作者清新、自然、悠閑的心境：“

8.5.2口［設(shè)計理念］。

在網(wǎng)頁設(shè)計和制作過程中，采用淡雅的色彩作為背景，通過優(yōu)美的畫面處理，營造出自然、閑適的氛圍，

給人清新、悠閑的感覺，符合抒清散文的特色；圖文的合理搭配，增添了畫面的美感，與宣傳的主題相呼應(yīng)；

整個設(shè)計簡潔直觀.沒有多余的修飾,讓瀏覽者一目了然C，

8.5.3口［知識要點】“

使用“CSS樣式”命令，設(shè)置文字的樣式顯示。~

第9講

課時內(nèi)容模板和庫授課時間225分鐘課時5

0了解“資源”面板。

教學(xué)目標(biāo)0掌握模板的創(chuàng)建方法和使用技巧。

0掌握庫的使用方法和技巧。

0掌握模板的使用方法。

教學(xué)重點

0熟練庫面板的應(yīng)用。

教學(xué)難點能夠正確應(yīng)用模板的所有屬性。

1.教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握電子吉他網(wǎng)頁、建達(dá)康集團(tuán)網(wǎng)頁

的制作方法；（2）再通過軟件相關(guān)功能的解析學(xué)習(xí)模板的創(chuàng)建、編輯和應(yīng)用，以

及庫面板的使用；（3）再通過課堂實戰(zhàn)演練鞏固軟件功能及模板的應(yīng)用技巧；（4）

最后通過課后綜合演練消化所學(xué)軟件知識，提高網(wǎng)頁制作的能力。

教學(xué)設(shè)計2.教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計理念和軟件功能；（2）通過軟件功能

解析深入學(xué)習(xí)軟件功能和制作特點。（3）通過課堂實戰(zhàn)演練和課后綜合演練提高

學(xué)生的實際應(yīng)用能力。

3.教學(xué)資料及要求：在網(wǎng)上中找一些具有共同點的多級頁面進(jìn)行制作，來加深學(xué)員

對知識點的理解和提高實際操作能力。

教學(xué)內(nèi)容

討論問題：1、在DreamweaverCS6中有幾種方法創(chuàng)建模板？分別是？

2、在DreamweaverCS6中庫面板的具體作用是？

內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進(jìn)行配合講解。

9.1電子吉他網(wǎng)頁

9.1.1【案例分析】

9.1.2【設(shè)計理念】

9.1.3【操作步驟】

1.創(chuàng)建模板

2.創(chuàng)建可編輯區(qū)域

9.1.4【相關(guān)工具】

1.“資源”面板

2.創(chuàng)建模板

3.定義和取消可編輯區(qū)域

4.創(chuàng)建基于模板的網(wǎng)頁

5.管理模板

9.1.5【實戰(zhàn)演練】一一水果慕斯網(wǎng)頁

9.2建達(dá)康集團(tuán)網(wǎng)頁

9.2.1【案例分析】

9.2.2【設(shè)計理念】

9.2.3【操作步驟】

1.把經(jīng)常用的圖標(biāo)注冊到庫中

2.利用庫中注冊的項目制作網(wǎng)頁文檔

3.修改庫中注冊的項目

9.2.4【相關(guān)工具】

1.創(chuàng)建庫文件

2.向頁面添加庫項目

3.更新庫文件

9.2.5【實戰(zhàn)演練】一一律師事務(wù)所網(wǎng)頁

9.3綜合演練——食譜大全網(wǎng)頁

9.3.1【案例分析】

9.3.2【設(shè)計理念】

9.3.3【知識要點】

9.4綜合演練——愛家紡網(wǎng)頁

9.4.1【案例分析】

9.4.2【設(shè)計理念】

9.4.3【知識要點】

1.熟練掌握模板的創(chuàng)建、編輯、應(yīng)用。

2.熟練掌握庫面板的應(yīng)用。

1QQ2A速位一_自鴻+今向TH1

y?O-nr'更良1日K壬網(wǎng)貝］

9.3.1□【案例分析】.

食譜網(wǎng)站是提供最全面的中國各地菜譜、外國菜譜、家常菜譜、創(chuàng)意美食等菜譜知識的專業(yè)網(wǎng)站，其推薦

專題菜譜包括豆腐的做法、蛋糕的做法、牛肉的做法、排骨的做法、雞的做法等。網(wǎng)頁設(shè)計要求搭配合理，能

吸引瀏覽者觀看。，

9.3.20［設(shè)計理念］“

在網(wǎng)頁設(shè)計和制作過程上，網(wǎng)頁的背景使用明亮的橙色，帶給人溫暖舒適的感覺；網(wǎng)頁的頁面劃分較有特

色，靈活多變的頁面使網(wǎng)頁看起來更加豐富；圖文搭配合理，美食照片豐富且與主題相呼應(yīng)，使人一目了然；

網(wǎng)頁整體設(shè)計畫面美觀，符合美食網(wǎng)站的特色C~

9.3.3口［知識要點】一

使用“另存模板”命令將頁面存為模板；使用“可編輯區(qū)域”按鈕添加可編輯區(qū)C