《網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程》-教學(xué)教案

《網(wǎng)頁(yè)設(shè)計(jì)與制作》

教學(xué)教案

教案（首頁(yè)）

授課時(shí)間月日~月日教案編寫(xiě)時(shí)間月日

課程名稱(chēng)網(wǎng)頁(yè)設(shè)計(jì)與制作

授課教師總學(xué)時(shí)：60

課程代碼0000

周學(xué)時(shí)：6

課程性質(zhì)必修課）選修課（

（V）考試（J）理論學(xué)時(shí):30

考核方式

考查（）實(shí)踐學(xué)時(shí)：30

課程類(lèi)型理論課實(shí)踐課理論+實(shí)踐J

計(jì)算機(jī)信息管理、計(jì)算

授課專(zhuān)業(yè)授課班級(jí)201X級(jí)XXXX班

機(jī)網(wǎng)絡(luò)技術(shù)、電子商務(wù)

本課程采用案例教學(xué)方法，主要任務(wù)是學(xué)習(xí)使用Dreamweaver創(chuàng)建、發(fā)布站點(diǎn)，

為網(wǎng)頁(yè)添加基本元素并進(jìn)行屬性設(shè)置，學(xué)習(xí)Html語(yǔ)言和CSS樣式表的基本結(jié)構(gòu)與語(yǔ)法，

表格與框架布局、模板、庫(kù)以及層、行為、插件的使用；掌握動(dòng)態(tài)網(wǎng)頁(yè)的設(shè)計(jì)基本知識(shí)

課程任務(wù)

與應(yīng)用。

及目標(biāo)

通過(guò)對(duì)本課程的學(xué)習(xí)，使學(xué)生掌握常用網(wǎng)頁(yè)設(shè)計(jì)工具，熟練運(yùn)用多種網(wǎng)頁(yè)設(shè)計(jì)技

術(shù)，具備Web網(wǎng)頁(yè)設(shè)計(jì)、制作及站點(diǎn)管理的基本知識(shí)和技能，能夠獨(dú)立制作小型網(wǎng)站，

適應(yīng)網(wǎng)站管理員、網(wǎng)頁(yè)設(shè)計(jì)師崗位。為后續(xù)課程奠定基礎(chǔ)。

重點(diǎn)：掌握html和CSS,利用DW來(lái)布局網(wǎng)頁(yè)，層、行為、模板、庫(kù)的使用，開(kāi)發(fā)動(dòng)

態(tài)網(wǎng)頁(yè)。

課程重點(diǎn)

難點(diǎn)：正確使用表格和框架進(jìn)行布局，HTML標(biāo)簽和CSS樣式的代碼視圖編輯，以及

及難點(diǎn)

應(yīng)用插件、行為、模板、庫(kù)技術(shù)來(lái)完成網(wǎng)站建設(shè)，能夠應(yīng)用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)進(jìn)行交互式功

能開(kāi)發(fā)的能力。

教學(xué)方法：本課程屬于理論與實(shí)踐結(jié)合的專(zhuān)業(yè)課程，主要采用任務(wù)驅(qū)動(dòng)式、項(xiàng)目任

教學(xué)方法

務(wù)式、案例分析式、實(shí)操等教學(xué)方法。

與手段

教學(xué)手段：多媒體網(wǎng)絡(luò)教學(xué)或投影演示，師生互動(dòng)。

所選用教材的優(yōu)勢(shì)與不足，教學(xué)主要參考資料。

使用教材：《網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程》，馮濤，大連理工大學(xué)出版社，2017.12。

本教材為“十二五”職業(yè)教育國(guó)家規(guī)劃教材，采用項(xiàng)目任務(wù)單元的編寫(xiě)方式，有利于提

高學(xué)生學(xué)習(xí)興趣和實(shí)踐動(dòng)手能力。不足之處，因體裁和篇幅所限，知識(shí)點(diǎn)和案例略欠豐

富，若結(jié)合參考資料輔助教學(xué)更有利于知識(shí)的深入了解。

參考資料：

教材及

1.《HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)從入門(mén)到精通》，胡曉霞，清華大學(xué)出版社，

參考資料

2017.10

2.《DreamweaverCS6+ASP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)完全學(xué)習(xí)手冊(cè)》，劉貴國(guó)，清華大學(xué)

出版社，2014.7

3.http:〃因特網(wǎng)WEB開(kāi)發(fā)者資源，包括較全面的教

程、完善的參考手冊(cè)以及龐大的代碼庫(kù)

4.教材支持網(wǎng)站，提供教學(xué)文件及素材下載、案

例演示，同時(shí)為師生提供免費(fèi)網(wǎng)頁(yè)空間

教案

第1周第1次課授課時(shí)間

授課題目了解開(kāi)發(fā)工具，制作基本網(wǎng)頁(yè)（1/2）

授課方式理論課（V）；實(shí)踐課（）；實(shí)習(xí)（）教學(xué)時(shí)數(shù)2學(xué)時(shí)

教學(xué)目的理解制作與發(fā)布網(wǎng)頁(yè)的流程，了解使用Dreamweaver制作網(wǎng)頁(yè)基本方法

教學(xué)要求

教學(xué)重點(diǎn)制作與發(fā)布網(wǎng)頁(yè)的流程

教學(xué)難點(diǎn)Dreamweaver制作網(wǎng)頁(yè)基本方法

教學(xué)方法教學(xué)方法：本課程屬于理論與實(shí)踐結(jié)合的專(zhuān)業(yè)課程，主要采用任務(wù)驅(qū)動(dòng)

式、項(xiàng)目任務(wù)式、案例分析式、實(shí)操等教學(xué)方法。

教學(xué)手段教學(xué)手段：多媒體網(wǎng)絡(luò)教學(xué)或投影演示，師生互動(dòng)。

教學(xué)內(nèi)容時(shí)間分配

1.導(dǎo)入新課：10分鐘

（1）課程概述。

（2）連接互聯(lián)網(wǎng)，啟動(dòng)瀏覽器，輸入網(wǎng)址：

http://demo.kuanm網(wǎng)頁(yè)顯示“世界你好！”的圖

文信息

2.講授新課：60分鐘

任務(wù)引領(lǐng)“世界為好！”

1.創(chuàng)建站點(diǎn)

2.在站點(diǎn)中創(chuàng)建網(wǎng)頁(yè)

3.上傳網(wǎng)站并瀏覽

相關(guān)知識(shí)

教學(xué)進(jìn)程

1.網(wǎng)站項(xiàng)目開(kāi)發(fā)流程

建立一個(gè)網(wǎng)站就像蓋一幢大樓一樣，它是一個(gè)系統(tǒng)工程，

有著自己特定的工作流程，只有遵循以下八步流程，才能有可

能設(shè)計(jì)出一個(gè)令人滿(mǎn)意的網(wǎng)站。

（1）確定網(wǎng)站主題

網(wǎng)站主題就是所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一

個(gè)鮮明主題。特別是對(duì)于個(gè)人網(wǎng)站，能力、精力、財(cái)力都不足，

因此就不能選擇制年像“網(wǎng)易”、“搜狐”、“新浪”等那樣包羅

萬(wàn)象，內(nèi)容大而全的綜合網(wǎng)站。應(yīng)該找準(zhǔn)一個(gè)自己最感興趣的

方向，做深、做透，辦出自己的特色，這樣才能給用戶(hù)留下深

刻的印象，才能有存在的價(jià)值。

（2）搜集材料

明確網(wǎng)站的主題以后，就要圍繞主題搜集相關(guān)材料了，形

式包括圖片、文字、聲音、影像等。材料既可以從圖書(shū)、報(bào)紙、

光盤(pán)、多媒體上得來(lái)，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的

材料去粗取精，去偽存真，作為自己制作網(wǎng)頁(yè)的素材。

（3）規(guī)劃網(wǎng)站

一個(gè)網(wǎng)站設(shè)計(jì)得成功與否，很大程度上決定于設(shè)計(jì)者的規(guī)

劃水平，規(guī)劃網(wǎng)站就像設(shè)計(jì)師設(shè)計(jì)大樓一樣，圖紙?jiān)O(shè)計(jì)好了，

才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃的內(nèi)容主要包含以下6

個(gè)方面：

?網(wǎng)站的結(jié)溝

?欄目的設(shè)置

?網(wǎng)站的風(fēng)格

?顏色搭配

?版面布局

?文字圖片的運(yùn)用

<4）制作網(wǎng)頁(yè)

依照前面規(guī)劃，本步驟將一步步地把想法變成現(xiàn)實(shí)，這是

一個(gè)復(fù)雜而細(xì)致的過(guò)程，需要按照先大后小、先簡(jiǎn)單后復(fù)雜來(lái)

進(jìn)行網(wǎng)頁(yè)的制作。

所謂先大后?。壕褪钦f(shuō)在制作網(wǎng)頁(yè)時(shí)，先把大的結(jié)構(gòu)設(shè)計(jì)

好，然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。先簡(jiǎn)單后復(fù)雜，就是先設(shè)

計(jì)出簡(jiǎn)單的內(nèi)容，然后再設(shè)計(jì)復(fù)雜的內(nèi)容，以便出現(xiàn)問(wèn)題時(shí)好

修改。在制作網(wǎng)頁(yè)時(shí)要多靈活運(yùn)用模板技術(shù)，可以大大提高制

作效率。

在Dreamweaver中，制作網(wǎng)頁(yè)的第一步是先創(chuàng)建一個(gè)站

點(diǎn)，然后再在站點(diǎn)內(nèi)添加各網(wǎng)頁(yè)及其他相關(guān)素材。

（5）上傳測(cè)試

在本機(jī)將網(wǎng)頁(yè)制作完畢后，最后還要上傳到互聯(lián)網(wǎng)的網(wǎng)頁(yè)

空間上，才能夠讓全世界的人上網(wǎng)觀看，

網(wǎng)頁(yè)空間是建立在Web服務(wù)器上的一塊存儲(chǔ)區(qū)域，而

Web服務(wù)器是每天都24小時(shí)接入互聯(lián)網(wǎng)的高性能的計(jì)算機(jī)，

有固定的IP地址，穩(wěn)定的性能，并有專(zhuān)人維護(hù)其正常運(yùn)轉(zhuǎn)。

網(wǎng)頁(yè)空間從性能上，由高到低排列有“主機(jī)托管”、“VPS（虛

擬專(zhuān)用服務(wù)器）”、“虛擬主機(jī)”三種方式可選，一般初學(xué)者選

擇比較便宜的“虛雙主機(jī)”即可，價(jià)格在每年千元以?xún)?nèi)。

若僅作為學(xué)習(xí)使用，可共同使用由本書(shū)免費(fèi)提供的若干個(gè)

網(wǎng)頁(yè)空間。讀者可通過(guò)本書(shū)的支持網(wǎng)站獲?。?/p>

注：前例中設(shè)受用于上傳的服務(wù)器即是一個(gè)網(wǎng)頁(yè)空間，事

先已開(kāi)通準(zhǔn)備好了。

網(wǎng)頁(yè)空間申請(qǐng)好了，就可以上傳網(wǎng)頁(yè)文件了，上傳文件需

使用支持FTP協(xié)議的工具軟件，作為本書(shū)使用的Dreamweaver

軟件，本身也集成了FTP功能，前面的“任務(wù)引領(lǐng)”中使用的

即是。除此之外，還有一些專(zhuān)門(mén)的FTP工具，如

FileZilla,FlashFXP等，功能更強(qiáng)大。

網(wǎng)站上傳以后，即可以使用瀏覽器輸入申請(qǐng)網(wǎng)頁(yè)空間時(shí)獲

得的域名來(lái)瀏覽自己的網(wǎng)站了。

申請(qǐng)網(wǎng)頁(yè)空間時(shí)獲得的域名一般是免費(fèi)的三級(jí)域名，是隸

屬于申請(qǐng)公司域名下一級(jí)的子域名。正式的網(wǎng)站往往都專(zhuān)門(mén)申

請(qǐng)一個(gè)標(biāo)準(zhǔn)的一級(jí)域名，如>、

,綁定到網(wǎng)頁(yè)空間上，瀏覽都訪(fǎng)問(wèn)起來(lái)，顯得更正

規(guī)，使用也更方便.一級(jí)域名一般每年百元以?xún)?nèi)。

(6)推廣宣傳

網(wǎng)頁(yè)做好之后，還要不斷地進(jìn)行宣傳，這樣才能讓更多的

人認(rèn)識(shí)它，提高自己網(wǎng)站的訪(fǎng)問(wèn)率和知名度。推廣的方法有很

多，例如到搜索引擎上注冊(cè)，與別的網(wǎng)站交換鏈接，到各大博

客或論壇發(fā)廣告鏈接等。

如果訪(fǎng)問(wèn)量比較大，如每日有幾千人以上訪(fǎng)問(wèn)，就可以考

慮在網(wǎng)站上掛一些廣告進(jìn)行贏利了。

(7)維護(hù)更新

網(wǎng)站要注意經(jīng)常維于更新內(nèi)容，保持內(nèi)容的新鮮，只有不斷地

給它補(bǔ)充新的內(nèi)容，才能夠吸引住瀏覽者。同時(shí)，要對(duì)發(fā)現(xiàn)的

錯(cuò)誤問(wèn)題及時(shí)進(jìn)行修正。

3.鞏固練習(xí)：20分鐘

自由制作一個(gè)網(wǎng)頁(yè)并發(fā)布

4.歸納小結(jié)：10分鐘

理解制作與發(fā)布網(wǎng)頁(yè)的流程

使用Dreamweaver制作網(wǎng)頁(yè)基本方法

網(wǎng)頁(yè)設(shè)計(jì)從入門(mén)到精通》，胡曉霞，清華大學(xué)出版

1.?HTML+CSS+JavaScript

社，2017.10

2.《DreamweaverCS6+ASP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)完全學(xué)習(xí)手冊(cè)》，劉貴國(guó)，清華大學(xué)

使用的出版社，2014.7

參考資料3.因特網(wǎng)WEB開(kāi)發(fā)者資源，包括較全面的

教程、完善的參考手冊(cè)以及龐大的代碼庫(kù)

4.教材支持網(wǎng)站，提供教學(xué)文件及素材下載、案

例演示，同時(shí)為師生提供免費(fèi)網(wǎng)頁(yè)空間

作業(yè)

課后小結(jié)

教研室

簽字：

主任意見(jiàn)

年月日

在授課結(jié)束后將教案交到教研室存檔任課教師簽字:

教案

第1周第2次課授課時(shí)間

授課題目了解開(kāi)發(fā)工具，制作基本網(wǎng)頁(yè)（加）

授課方式理論課（V）；實(shí)踐課（）；實(shí)習(xí)（）教學(xué)時(shí)數(shù)2學(xué)時(shí)

教學(xué)目的了解Dreamweaver的工作界面和操作流程

教學(xué)要求

教學(xué)重點(diǎn)Dreamweaver的工作界面和操作流程

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

教學(xué)方法教學(xué)方法：本課程屬于理論與實(shí)踐結(jié)合的專(zhuān)業(yè)課程，主要采用任務(wù)驅(qū)動(dòng)

式、項(xiàng)目任務(wù)式、案例分析式、實(shí)操等教學(xué)方法。

教學(xué)手段教學(xué)手段：多媒體網(wǎng)絡(luò)教學(xué)或投影演示，師生互動(dòng)。

教學(xué)內(nèi)容時(shí)間分配

1.導(dǎo)入新課：5分鐘

Dreamweaver是一款非常優(yōu)秀的可視化網(wǎng)頁(yè)設(shè)計(jì)工具，為

Adobe公司旗下產(chǎn)品。它與Flash、Fireworks合稱(chēng)為網(wǎng)頁(yè)制作

三劍客，這三個(gè)軟件相輔相承，是制作網(wǎng)頁(yè)的極佳組合。

在眾多網(wǎng)頁(yè)設(shè)計(jì)工具軟件中，Dreamweaver之所以受到業(yè)

內(nèi)人士的青睞，是因?yàn)樗瑫r(shí)具備網(wǎng)頁(yè)設(shè)計(jì)功能和網(wǎng)頁(yè)編程功

能。Dreamweaver是適用于從個(gè)人主頁(yè)設(shè)計(jì)到企業(yè)站點(diǎn)開(kāi)發(fā)等

眾多領(lǐng)域的工具，也是在國(guó)內(nèi)外普遍應(yīng)用的專(zhuān)用網(wǎng)頁(yè)設(shè)計(jì)工

具。

可以登錄Adobe官方網(wǎng)站/下載

Dreamweaver最新版本并安裝。

教學(xué)進(jìn)程啟動(dòng)Dreamweaver的操作很簡(jiǎn)單，只需單擊“開(kāi)始”菜

單按鈕，選擇“程序”一"AdobeDreamweaverCS6”，即可啟

動(dòng)該軟件

2.講授新課：65分鐘

2.工欲善其事,必先利其器

在Dreamweaver中可以使用多種方法來(lái)創(chuàng)建Web站點(diǎn)，

下面介紹的是其中常見(jiàn)的一種，其步驟依次為：

（1）規(guī)劃和設(shè)置站點(diǎn)

確定將在哪里發(fā)布文件，檢查站點(diǎn)要求、訪(fǎng)問(wèn)者情況以及

站點(diǎn)目標(biāo)。在組織好信息并確定結(jié)構(gòu)后創(chuàng)建站點(diǎn)。

（2）組織和管理站點(diǎn)文件

在“文件”面板中，可以方便地添加、刪除和重命名文件

及文件夾，以便根據(jù)需要更改組織結(jié)構(gòu)。在“文件”面板中

還有許多工具，可使用它們管理站點(diǎn)，向遠(yuǎn)程服務(wù)器上傳或下

載文件。使用“資源”面板可方便地組織站點(diǎn)中的資源；然

后可以將大多數(shù)資源直接從“資源”面板拖到Dreamweaver

文檔中。

(3)設(shè)計(jì)網(wǎng)頁(yè)布局

選擇要使用的布局方法，或綜合使用Dreamweaver布局

選項(xiàng)創(chuàng)建站點(diǎn)的外觀?？梢允褂肈reamweaverAP元素、CSS

定位樣式或預(yù)先設(shè)計(jì)的CSS布局來(lái)創(chuàng)建布局。也可以使用表

格工具，通過(guò)繪制并重新安排頁(yè)面結(jié)構(gòu)來(lái)快速地設(shè)計(jì)頁(yè)面。如

果希望同時(shí)在瀏覽器中顯示多個(gè)元素，還可以使用框架來(lái)設(shè)計(jì)

文檔的布局。最后，可以基于模板創(chuàng)建新的頁(yè)面，然后在模板

更改時(shí)自動(dòng)更新這些頁(yè)面的布局。

(4)向頁(yè)面添加內(nèi)容

添加資源和設(shè)計(jì)元素，如文本、圖像、鼠標(biāo)經(jīng)過(guò)圖像、圖

像地圖、顏色、影片、聲音、HTML鏈接、跳轉(zhuǎn)菜單等。

Drecniweaver還提供相應(yīng)的行為以便為響應(yīng)特定的事件而執(zhí)

行任務(wù)，例如在訪(fǎng)問(wèn)者單擊“提交”按鈕時(shí)驗(yàn)證表單，或者在

主頁(yè)加載完畢時(shí)打開(kāi)另一個(gè)瀏覽器窗口。最后，Dreamweaver

還提供了工具來(lái)最大限度地提高站點(diǎn)的性能，并測(cè)試頁(yè)面以確

保能夠兼容不同的Web瀏覽器。

(5)通過(guò)手動(dòng)編碼創(chuàng)建頁(yè)面

手動(dòng)編寫(xiě)代碼是創(chuàng)建頁(yè)面的另一種方法。Dreamweaver

除提供了易于使用的可視化編輯工具，同時(shí)也提供了這種手動(dòng)

的、更為自由的編碼環(huán)境；編寫(xiě)頁(yè)面時(shí)隨時(shí)可以采用其中任一

種方法或同時(shí)采用這兩種方法來(lái)創(chuàng)建和編輯頁(yè)面。

(6)針對(duì)動(dòng)態(tài)內(nèi)容設(shè)置動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)程序

許多網(wǎng)站都包含了動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)可以使訪(fǎng)

問(wèn)者能夠在網(wǎng)頁(yè)上查看存儲(chǔ)在數(shù)據(jù)庫(kù)中的信息，或者向數(shù)據(jù)庫(kù)

中添加、編輯信息。

若要?jiǎng)?chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)，必須先設(shè)置Web服務(wù)器和應(yīng)用程序

服務(wù)器，創(chuàng)建或修改Dreamweaver站點(diǎn)，然后連接到數(shù)據(jù)庫(kù)。

可以定義動(dòng)態(tài)內(nèi)容的多種來(lái)源，如從數(shù)據(jù)庫(kù)提取的記錄集

或表單參數(shù)等。如果要在頁(yè)面上添加動(dòng)態(tài)內(nèi)容，只需將該內(nèi)容

拖動(dòng)到頁(yè)面上即可.

可以通過(guò)設(shè)置頁(yè)面來(lái)同時(shí)顯示一條記錄或多條記錄，顯示

多頁(yè)記錄，添加用于在記錄頁(yè)之間來(lái)回移動(dòng)的特殊鏈接，以及

創(chuàng)建記錄計(jì)數(shù)器來(lái)幫助用戶(hù)跟蹤記錄。如果需要更多的靈活

性，則可以創(chuàng)建自定義服務(wù)器行為和交互式表單。

3.DroamwoaverCS6的操作界面

Dreamweaver整個(gè)工作界面如圖1-19所示，其工作區(qū)非

常靈活，用戶(hù)可以根據(jù)自己的習(xí)慣定制工作區(qū)以查看文檔和對(duì)

象屬性。

（1）查看操作界面

菜單欄：?jiǎn)朩indows應(yīng)用程序一樣，菜單欄中匯集了Dreamweaver中各

種命令功能

文檔工具欄：以圖標(biāo)形式匯集了常用工具

文檔窗口：文檔窗口編輯的內(nèi)容與瀏覽器中最終顯示的畫(huà)面內(nèi)容相同，

該窗口是實(shí)際制作頁(yè)面時(shí)最常用的窗口

面板組：包含了“插入”、“CSS樣式”、“文件”等常用面板。雙擊可以

展開(kāi)或關(guān)閉某個(gè)面板，用戶(hù)也可以根據(jù)自己的習(xí)慣通過(guò)“菜單”一“窗

口”重新指定其他面板

狀態(tài)欄：提供與正創(chuàng)是的文檔有關(guān)的其它信息，包括選取工具、“文檔”

窗口的大小便定義，以及文檔字節(jié)容量、下載時(shí)間和文本編碼

屬性面板：每個(gè)對(duì)象或文本都具有不同的屬性，屬性面板用于查看和更

改所選對(duì)象或文本的各種屬性

標(biāo)簽選擇器：顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)

構(gòu)中的任何標(biāo)簽可以比擇該標(biāo)簽及其包含的全部?jī)?nèi)容

工作區(qū)切換器：通過(guò)將面板的當(dāng)前大小和位置存儲(chǔ)為門(mén)定義的工作區(qū)，

即使移動(dòng)或關(guān)閉了面板，也可以恢復(fù)該工作區(qū)。系統(tǒng)同時(shí)也內(nèi)置了各類(lèi)

開(kāi)發(fā)模式下的工作區(qū)

（2）屬性面板

屬性面板可以檢查和編輯當(dāng)前選定頁(yè)面元素（如文本和

插入的對(duì)象）的最常用屬性。屬性面板的內(nèi)容根據(jù)選定的元素

會(huì)有所不同。例如，選擇一段文本時(shí)，屬性面板顯示字體、字

號(hào)、加粗等屬性，而如果選擇頁(yè)面上的一個(gè)圖像，則屬性面板

將改為顯示該圖像的一些屬性，如圖像的文件路徑、圖像的寬

度和高度等。

（3）靈活運(yùn)用設(shè)計(jì)視圖和代碼視圖

Dreamweaver的特征之一就是采用了“所見(jiàn)即所得”方式

來(lái)編輯網(wǎng)頁(yè)，并適當(dāng)?shù)募橙×薍TML編輯器的優(yōu)點(diǎn)。在“所見(jiàn)

即所得”方式下，即使用戶(hù)不了解HTML標(biāo)記也可以編輯網(wǎng)頁(yè)。

但是，要想制作出完善、多樣化的效果，還是需要學(xué)會(huì)HTML

的使用方法。在Dreamweaver中可以分別顯示“所見(jiàn)艮」所得”

方式的“設(shè)計(jì)視圖”和以HTML標(biāo)記顯示的“代碼視圖”，也

可以將兩種視圖通過(guò)兩個(gè)窗口同時(shí)顯示出來(lái)以做對(duì)比。

兩種視圖按鈕為位于文檔工具欄，下面首先了解一下文檔

工具欄的組成。

可對(duì)設(shè)計(jì)視圖和代碼視圖進(jìn)行切換。

Dreamweaver的默認(rèn)顯示的窗口是設(shè)計(jì)視圖。若想將屏幕

一分為二，同時(shí)顯示設(shè)計(jì)視圖和代碼視圖，則單擊文檔工具欄

中的“拆分”按鈕.

此時(shí)，在設(shè)計(jì)視圖的左側(cè)出現(xiàn)代碼視圖。如果選擇右側(cè)視

圖中對(duì)象，左側(cè)則芻動(dòng)選擇對(duì)應(yīng)的HTML代碼，反之亦然。

如果想完全在弋碼視圖中進(jìn)行操作，就單擊“代碼”按鈕。

此時(shí)，整個(gè)操作畫(huà)面將轉(zhuǎn)換為HTML代碼視圖。如圖1-24所

示。在該視圖，可以自由地對(duì)HTML等代碼直接進(jìn)行編寫(xiě)。

4.可自由擺放的面板組

常用的面板可以一直打開(kāi)，不常用的面板則可隱藏起來(lái)，

以便擴(kuò)大操作區(qū)域。

利用“窗口”莫單可以打開(kāi)或關(guān)閉新窗口或面板組。前面

帶勾選標(biāo)志的是當(dāng)前已打開(kāi)的面板。下面先簡(jiǎn)單確認(rèn)一下都有

哪些面板，至于其中一些面板的使用方法將在后續(xù)模塊中結(jié)合

實(shí)例進(jìn)行說(shuō)明。

Dreamweaver中有很多面板，每個(gè)設(shè)計(jì)者常用的功能都互

不相同，且執(zhí)行不同操作時(shí)，各個(gè)功能項(xiàng)的重要度也會(huì)隨之發(fā)

生變化。如果將個(gè)人常用的且重要的面板放置于醒目的位置，

設(shè)計(jì)者使用起來(lái)將會(huì)非常方便。

除通過(guò)“窗口”菜單對(duì)面板進(jìn)行選擇打開(kāi)或關(guān)閉外，對(duì)已

打開(kāi)的面板，還可以雙擊面板的標(biāo)題欄對(duì)其展開(kāi)和收縮，或是

拖拽面板的標(biāo)題欄使其移動(dòng)到新位置，拖動(dòng)面板的邊框還可以

調(diào)整該面板的寬度或高度。

項(xiàng)目漸近網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第一階段

“溫馨提示”

具體完成過(guò)程

1.創(chuàng)建站點(diǎn)

啟動(dòng)Dreamweaver,在“文件”面板內(nèi)，單擊“管理站點(diǎn)”

鏈接。在彈出的“管理站點(diǎn)”對(duì)話(huà)框，單擊“新建站點(diǎn)”鏈接。

填寫(xiě)“站點(diǎn)名稱(chēng)”為“我心飛揚(yáng)”，“本地站點(diǎn)文件夾”內(nèi)選擇

放置本站點(diǎn)的位置。單擊“保存”按鈕直至完成站點(diǎn)的創(chuàng)建。

2.在站點(diǎn)中創(chuàng)建網(wǎng)頁(yè)

（1）右擊“文件”面板內(nèi)的主目錄“站點(diǎn)-我心飛揚(yáng)”，選

擇“新建文件夾”，重命名為“images〃，再次右擊主目錄“站

點(diǎn)-我心飛揚(yáng)”，選擇“新建文件”，命名為“index.html”。

（2）雙擊打開(kāi)“index.html”文件,選擇菜單“插入”一

“表格”，彈出“表格”對(duì)話(huà)框，設(shè)置“行數(shù)”為2,“歹U”為

2,表格寬度值為100,單位選“百分比”。如圖1-29所示。單

擊“確定”后，即在當(dāng)前網(wǎng)頁(yè)內(nèi)插入一個(gè)2行2列的表格。

（3）通過(guò)鼠標(biāo)拖拽選中表格中第1行的兩個(gè)單元格，在

選中的單元格上右擊彈出快捷菜單，選擇“表格”一“合并單

元格”。

（4）在合并后的第1行單元格內(nèi)，以及第2行第2列單

元格內(nèi)添加相關(guān)文字。

（5）單擊表格第2行左單元格，使光標(biāo)進(jìn)入該區(qū)域內(nèi)，

選擇“插入”一“圖像”，彈出“選擇圖像源文件”對(duì)話(huà)框。

選擇素材圖片后單擊確定，要確保其保存在站點(diǎn)的images子

文件夾內(nèi)。

（6）調(diào)整表格中間豎線(xiàn)左右寬度，使其位于合適的位置。

3.鞏固練習(xí)：20分鐘

自由制作一個(gè)網(wǎng)頁(yè)并發(fā)布

4.歸納小結(jié)：10分鐘

網(wǎng)站項(xiàng)目開(kāi)發(fā)流程

Dreamweaver常用功能的使用

各面板與窗口的名彌及作用，Dreamweaver創(chuàng)建站點(diǎn)步驟

網(wǎng)頁(yè)設(shè)計(jì)從入門(mén)到精通》，胡曉霞，清華大學(xué)出版

1.?HTML+CSS+JavaScript

社，2017.10

2.《DreamweaverCS6+ASP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)完全學(xué)習(xí)手冊(cè)》，劉貴國(guó)，清華大學(xué)

使用的出版社，2014.7

參考資料3.因特網(wǎng)WEB開(kāi)發(fā)者資源，包括較全面的

教程、完善的參考手冊(cè)以及龐大的代碼庫(kù)

4.教材支持網(wǎng)站，提供教學(xué)文件及素材下載、案

例演示，同時(shí)為師生提供免費(fèi)網(wǎng)頁(yè)空間

作業(yè)

課后小結(jié)

教研室

簽字：

主任意見(jiàn)

年月日

任課教師簽字:

教案

第1周第3次課授課時(shí)間

授課題目構(gòu)建網(wǎng)頁(yè)的圖文信息（必）

授課方式理論課（V）；實(shí)踐課（）；實(shí)習(xí)（）教學(xué)時(shí)數(shù)2學(xué)時(shí)

教學(xué)目的通過(guò)“古詩(shī)鑒賞”頁(yè)面制作的學(xué)習(xí)，了解站點(diǎn)的相關(guān)知識(shí)，掌握本地站點(diǎn)的

建立、網(wǎng)頁(yè)中的文字和圖像排版等相關(guān)知識(shí)。

教學(xué)要求

1.創(chuàng)建網(wǎng)站制作空間

2.設(shè)置網(wǎng)頁(yè)文檔屬性

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

3修.改文字屬性

4利.用項(xiàng)目列表整理散亂的內(nèi)容

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

5.在網(wǎng)頁(yè)文檔中插入水平線(xiàn)

6.插入各種符號(hào)

教學(xué)方法教學(xué)方法：本課程屬于理論與實(shí)踐結(jié)合的專(zhuān)業(yè)課程，主要采用任務(wù)驅(qū)動(dòng)

式、項(xiàng)目任務(wù)式、案例分析式、實(shí)操等教學(xué)方法。

教學(xué)手段教學(xué)手段：多媒體網(wǎng)絡(luò)教學(xué)或投影演示，師生互動(dòng)。

教學(xué)內(nèi)容時(shí)間分配

1.導(dǎo)入新課：5分鐘

任務(wù)引領(lǐng)一’古詩(shī)鑒賞”

任務(wù)說(shuō)明：

網(wǎng)頁(yè)打開(kāi)后，將顯示“古詩(shī)鑒賞”界面，運(yùn)行效果演示。

65分鐘

2.講授新課：

完成過(guò)程

首先建立一個(gè)本地站點(diǎn)，然后對(duì)頁(yè)面進(jìn)行布局，最后使用

教學(xué)進(jìn)程文字和圖片豐富整個(gè)網(wǎng)頁(yè)。具體步驟如下：

（1）新建一個(gè)本地站點(diǎn)

（2）選擇“修改”一“頁(yè)面屬性”菜單，選擇背景圖像

（3）為便于后面的處理，可單擊“工作區(qū)切換器”（設(shè)計(jì)器）切

換到MDreamweaver"的“經(jīng)典”視圖，在“常用”快捷欄中

單擊表格圖標(biāo)（居1）,插入3行1列的表格，設(shè)置寬度為500像

素，邊框粗細(xì)為0像素，單元格邊距和單元格間距均為0,然

后使其居中

（4）將光標(biāo)放在表格中的第一行，插入圖片logogjpg和

menug.jpg,在表格的第二行輸入文字“首頁(yè)一＞古詩(shī)大全一〉

宿建德江”，在表格的第三行插入相關(guān)文字

相關(guān)知識(shí)

文字是網(wǎng)頁(yè)中最基礎(chǔ)的信息，瀏覽者主要通過(guò)文字來(lái)了解

網(wǎng)頁(yè)的內(nèi)容，如果掌握了文字的相關(guān)設(shè)置.，就可以創(chuàng)建出一個(gè)

基本的網(wǎng)頁(yè)了。

1.創(chuàng)建網(wǎng)站制作空間

（1）網(wǎng)站與網(wǎng)頁(yè)的區(qū)別

網(wǎng)站是一個(gè)整體，網(wǎng)頁(yè)是一個(gè)個(gè)體，一個(gè)網(wǎng)站是由很多網(wǎng)

頁(yè)構(gòu)建而成。網(wǎng)站和網(wǎng)頁(yè)的關(guān)系就像家庭和家人一樣。

簡(jiǎn)單的來(lái)說(shuō)網(wǎng)頁(yè)與網(wǎng)站的區(qū)別如下：網(wǎng)站是由網(wǎng)頁(yè)集合而

成的，通過(guò)瀏覽器所看到的畫(huà)面就是網(wǎng)頁(yè)，至于多少網(wǎng)頁(yè)集合

在一起才能稱(chēng)作網(wǎng)站，沒(méi)有明確的規(guī)定，即使只有一個(gè)網(wǎng)頁(yè)也

可被稱(chēng)為網(wǎng)站。

網(wǎng)頁(yè)是一個(gè)HTML（超文本標(biāo)記語(yǔ)言）文件（本例中的站

點(diǎn)只有一個(gè)網(wǎng)頁(yè)，名為index.html）。所謂首頁(yè)，即瀏覽者進(jìn)入

網(wǎng)站看到的第一個(gè)網(wǎng)頁(yè)。首頁(yè)的主文件名必須命名為index或

default,如"index.html”、“default.html”。

（2）本地站點(diǎn)的概念

本地站點(diǎn)通常指向本地計(jì)算機(jī)的一個(gè)文件，Dreamweaver

中提供了建立本地站點(diǎn)的功能。

（3）建立操作空間一本地站點(diǎn)

在前面講的“古詩(shī)鑒賞”任務(wù)中，已經(jīng)講解了如何建立本

地站點(diǎn)。

（4）編輯、刪除本地站點(diǎn)

在Dreamweaver菜單中選擇“站點(diǎn)”-*“管理站點(diǎn)”,選

中要編輯的站點(diǎn)，單擊編輯圖標(biāo)（4），可以對(duì)站點(diǎn)進(jìn)行編輯

操作，單擊刪除圖標(biāo)（一）,可以刪除已經(jīng)設(shè)立的站點(diǎn)，如圖

2-7所示。

2.設(shè)置網(wǎng)頁(yè)文檔屬性

文檔屬性的設(shè)置主要是控制頁(yè)面的整體外觀，包括網(wǎng)頁(yè)的

標(biāo)題、背景圖像以及頁(yè)面邊距等。

（1）為網(wǎng)頁(yè)文檔指定標(biāo)題

設(shè)置標(biāo)題可以使用兩種方法，一種方法是選擇“修改”一

“頁(yè)面屬性”菜單，在對(duì)話(huà)框中設(shè)置，如圖2-8所示；另一種

方法是直接在頁(yè)面上方進(jìn)行設(shè)置。

（2）輸入內(nèi)容、劃分段落

在頁(yè)面的指定位置輸入相關(guān)的文字，按回車(chē)鍵可以在下一

個(gè)段落進(jìn)行輸入。

（3）設(shè)置網(wǎng)頁(yè)文檔的空白邊距和背景色

選擇“修改”一“頁(yè)面屬性”菜單，為文檔設(shè)置空白邊距

和背景色。

（4）利用背景圖像填充文檔

利用背景圖片來(lái)填充文檔，可以美觀頁(yè)面，達(dá)到良好的視

覺(jué)效果，如圖2.4所示。

3.修改文字屬性

（1）更改字號(hào)

選中要修改的文字，在“屬性”面板中進(jìn)行大小的選擇

（2）根據(jù)網(wǎng)頁(yè)整體風(fēng)格，修改文字顏色

豐富的視覺(jué)色彩可以吸引用戶(hù)的注意，網(wǎng)頁(yè)中的文字顏色

不僅僅是黑色，還可以設(shè)置成豐富多彩的各種顏色。具體設(shè)置

方法如圖2-10所示。

4.利用項(xiàng)目列表整理散亂的內(nèi)容

在格式排版中，列表是網(wǎng)頁(yè)中常用的排版樣式之一，常用

于商品列表、項(xiàng)目展示等。

（1）DreamweaverCS6支持的項(xiàng)目列表功能

列表時(shí)HTML中組織多個(gè)段落文本的一種方式。列表分成

編號(hào)列表和項(xiàng)目列表。前一種列表用數(shù)字順序?yàn)榱斜碇械捻?xiàng)目

進(jìn)行編號(hào)，而后一種列表則在每個(gè)列表項(xiàng)目之前使用一個(gè)項(xiàng)目

符號(hào)。

（2）利用項(xiàng)C列表整理散亂的內(nèi)容

在設(shè)計(jì)視圖中，選擇項(xiàng)目列表下的3行文字，如圖2-11

所示，在“屬性”面板中單擊項(xiàng)目列表圖標(biāo)（==）,默認(rèn)的

列表項(xiàng)目記號(hào)為圓形黑點(diǎn)

（3）制作項(xiàng)「列表的嵌套列表

在列表項(xiàng)中可以嵌套項(xiàng)目列表或編號(hào)列表。例如在“計(jì)

算機(jī)系”下面輸入3個(gè)專(zhuān)業(yè)，在屬性面板中，單擊縮進(jìn)圖標(biāo)

（=）,如圖2-13所示。如果要設(shè)置嵌套的編號(hào)列表，則需

要單擊編號(hào)圖標(biāo)（目）

5.在網(wǎng)頁(yè)文檔中插入水平線(xiàn)

水平線(xiàn)又稱(chēng)為分割線(xiàn)，可以將文字、圖片等對(duì)象在網(wǎng)頁(yè)中

分割開(kāi)，可以使頁(yè)面變得層次分明，便于閱讀。

（1）理解水平線(xiàn)設(shè)置值

水平線(xiàn)的設(shè)置包括寬度、高度、對(duì)齊方式以及是否有陰影，

還有顏色的設(shè)置。顏色的設(shè)置必須在“代碼”視圖中編寫(xiě)，例

如設(shè)置水平線(xiàn)的顏色為藍(lán)色，其代碼為：

;<hrcolor="blue"/>

L____________________________________1

（2）在網(wǎng)頁(yè)文檔中插入水平線(xiàn)

在網(wǎng)頁(yè)的設(shè)計(jì)視圖下，單擊“常用”快捷欄中插入水平線(xiàn)

圖標(biāo)（善），如圖2-15所示插入水平線(xiàn)，然后在“屬性”面

板中設(shè)置對(duì)應(yīng)的屬性。

6.插入各種符號(hào)

在DreamweaverCS6中自帶了很多的特殊字符，但有一些

是鍵盤(pán)無(wú)法直接輸入的，可以通過(guò)下面的方法插入一些特殊字

符。

選擇“插入”一“HTML”一“特殊字符”菜單，在“特

殊字符”命令的子菜單中，有12個(gè)菜單命令20分鐘

3.鞏固練習(xí)：

自由制作類(lèi)似圖文網(wǎng)頁(yè)10分鐘

4.歸納小結(jié)：

1.創(chuàng)建網(wǎng)站制作空間

2.設(shè)置網(wǎng)頁(yè)文檔屬性

3.修改文字屬性

4.利用項(xiàng)目列表整理散亂的內(nèi)容

5.在網(wǎng)頁(yè)文檔e插入水平線(xiàn)

6.插入各種符號(hào)

1.<HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)從入門(mén)到精通》，胡曉霞，清華大學(xué)出版

社，2017.10

2.《DreamweaverC56十ASP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)完全學(xué)習(xí)于冊(cè)》，劉貴國(guó)，消華大學(xué)

使用的出版社，2014.7

參考資料3.因特網(wǎng)WEB開(kāi)發(fā)者資源，包括較全面的

教程、完善的參考手冊(cè)以及龐大的代碼庫(kù)

4.教材支持網(wǎng)站，提供教學(xué)文件及素材下載、案

例演示，同時(shí)為師生提供免費(fèi)網(wǎng)頁(yè)空間

作業(yè)

課后小結(jié)

教研室

簽字：

主任意見(jiàn)

年月日

在授課結(jié)束后將教案交到教研室存檔任課教師簽字:

教案

第2周第1次課授課時(shí)間

授課題目構(gòu)建網(wǎng)頁(yè)的圖文信息（加）

授課方式理論課（V）；實(shí)踐課（）；實(shí)習(xí)（）教學(xué)時(shí)數(shù)2學(xué)時(shí)

教學(xué)目的通過(guò)“名車(chē)風(fēng)采”的學(xué)習(xí)，了解網(wǎng)頁(yè)中的圖像和超鏈接的應(yīng)用等相關(guān)知識(shí)。

教學(xué)要求

1.在網(wǎng)頁(yè)文檔中插入圖像

2.優(yōu)化圖像和段落

教學(xué)重點(diǎn)3.制作鼠標(biāo)響應(yīng)的翻轉(zhuǎn)菜單

4.利用超鏈接連接相關(guān)網(wǎng)頁(yè)

教學(xué)難點(diǎn)5利.用"錨“功能定位到網(wǎng)頁(yè)的特定位置

6.利用圖像熱點(diǎn)，在一張圖像上設(shè)置多個(gè)不同的鏈接

7.設(shè)置文件頭標(biāo)簽

教學(xué)方法教學(xué)方法：本課程屬于理論與實(shí)踐結(jié)合的專(zhuān)業(yè)課程，主要采用任務(wù)驅(qū)動(dòng)

式、項(xiàng)目任務(wù)式、案例分析式、實(shí)操等教學(xué)方法。

教學(xué)手段教學(xué)手段：多媒體網(wǎng)絡(luò)教學(xué)或投影演示，師生互動(dòng)。

教學(xué)內(nèi)容時(shí)間分配

1.導(dǎo)入新課：5分鐘

任務(wù)引領(lǐng)二"名車(chē)風(fēng)采

任務(wù)說(shuō)明：

網(wǎng)頁(yè)打開(kāi)后，溶行的效果如圖

2.講授新課：65分鐘

完成過(guò)程

首先建立一個(gè)本地站點(diǎn)，然后布局頁(yè)面，最后利用文字和

教學(xué)進(jìn)程

圖片豐富整個(gè)網(wǎng)頁(yè)。具體步驟如下：

（1）新建一個(gè)本地站點(diǎn)，打開(kāi)Dreamweaver,選擇

"Dreamweaver站點(diǎn)”一項(xiàng)，設(shè)置站點(diǎn)名稱(chēng)為“名車(chē)風(fēng)采”，

在本地站點(diǎn)文件夾后選擇要設(shè)置站點(diǎn)的目錄，點(diǎn)擊“保存”即

可，

（2）選擇“修改”一“頁(yè)面屬性”一項(xiàng)，設(shè)置上邊距為

Opx,選擇“標(biāo)題”一項(xiàng)，設(shè)置為“名車(chē)風(fēng)采”；

（3）切換到“Dreamweaver”的“經(jīng)典”視圖,在“常用”

快捷欄中單擊表格圖標(biāo)（匡1）,插入4行1列的表格，設(shè)置寬度

為800像素，邊框粗細(xì)為0像素，單元格邊距和單元格間距為

0像素，然后使其居中；

(4)將光標(biāo)放在表格中的第一行，插入1行2列的嵌套表

格并插入圖片logo.jpg和導(dǎo)航圖片mpzx.jpg.mczx.jpg、

jdmc.jpg、mcxs.jpg、lxwm.jpg

(5)在表格的第二行插入“car.jpg”圖片，在第三行插入

汽車(chē)標(biāo)志aef.jpg、fll.jpg、lbjn.jpg、mbh.jpg,并設(shè)置marquee

標(biāo)記。

(6)第四行輸入相關(guān)文字，并插入圖片cd.jpg。

相關(guān)知識(shí)：

圖像是網(wǎng)頁(yè)中重要的組成要素，如果一個(gè)網(wǎng)頁(yè)中只有文字

的話(huà)，未免太單調(diào)了，大量的圖片信息可以給網(wǎng)頁(yè)增添更多的

色彩。

1.在網(wǎng)頁(yè)文檔口插入圖像

(1)網(wǎng)頁(yè)中常用的圖像種類(lèi)

①JPEG/JPG圖片文件格式

②GIF圖片文件格式

③PNG圖片文件格式

(2)在網(wǎng)頁(yè)文檔中插入圖像

在“設(shè)計(jì)”視圖下，將光標(biāo)定位在準(zhǔn)備插入圖像的位置后，

選擇“插入”一“圖像”菜單，彈出“選擇圖像源文件”對(duì)話(huà)

框,選擇“images”文件夾中的“l(fā)ogo.jpg”文件，選中文件后

可在對(duì)話(huà)框的右邊看到圖像預(yù)覽的效果，如圖2-19所示。單

擊“確定”按鈕后，所選的圖像就會(huì)被插入到網(wǎng)頁(yè)中

除了前面講解的插入圖像的方法外，還可以將光標(biāo)移到要

插入圖像的位置后，在“常用”快捷欄中單擊圖像按鈕

田)。

(3)圖像無(wú)法在瀏覽器上顯示的解決辦法

有時(shí)候在瀏覽器打開(kāi)頁(yè)面時(shí)圖像不能夠正常顯示。通常情

況下是因?yàn)椴迦雸D像時(shí)的路徑出現(xiàn)了問(wèn)題，最好的解決方法是

在制作網(wǎng)頁(yè)之前先建立本地站點(diǎn)，然后插入圖像的時(shí)候都在本

地站點(diǎn)中選擇，沒(méi)有在本地站點(diǎn)中的圖像，系統(tǒng)會(huì)自動(dòng)提示把

圖像拷貝到本地站點(diǎn)中如圖2-22所示，這樣制作的網(wǎng)頁(yè)就不

會(huì)存在圖片無(wú)法正常顯示的問(wèn)題了，即使把整個(gè)網(wǎng)站拷貝到其

他電腦上，網(wǎng)頁(yè)也會(huì)正常運(yùn)行。

2.優(yōu)化圖像和段落

(1)調(diào)整圖像和文本的對(duì)齊方式

(2)調(diào)整圖像大小和圖像邊距

3.制作鼠標(biāo)響應(yīng)的翻轉(zhuǎn)菜單

我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，經(jīng)常能看到這樣的菜單，當(dāng)鼠標(biāo)

經(jīng)過(guò)一張圖片時(shí)變奏成另一張圖片的效果，看起來(lái)既美觀又動(dòng)

感，在DreamweaverCS6中實(shí)現(xiàn)這一功能其實(shí)很簡(jiǎn)單。

首先準(zhǔn)備兩張尺寸人小一樣的圖片若干組，選擇“常用”

快捷欄中的“鼠標(biāo)經(jīng)過(guò)圖像”選項(xiàng)

然后會(huì)彈出一個(gè)選擇圖片的對(duì)話(huà)框，如圖2-29所示，在

“原始圖像”和“鼠標(biāo)經(jīng)過(guò)圖像”后選擇對(duì)應(yīng)的圖片即可，其

中“替換文本”的含義是圖片不能正常顯示時(shí)，在頁(yè)面中顯示

的文字。

最后可以重復(fù)上面的操作，制作出來(lái)的翻轉(zhuǎn)圖像菜單

4.利用超鏈接連接相關(guān)網(wǎng)頁(yè)

在瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常使用超級(jí)鏈接，它是網(wǎng)頁(yè)中最根本和

最重要的元素之一.通過(guò)鏈接可以把Internet中的各種信息有

機(jī)地聯(lián)系在一起，從而使孤立的網(wǎng)頁(yè)之間產(chǎn)生一定的聯(lián)系，用

戶(hù)可以從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，從而可以方便地查找到

所需的資源。

（1）鏈接其他網(wǎng)頁(yè)文檔

選中耍添加鏈援的文本或圖像，然后在“屬性”面板上單

擊“鏈接”文本框后的“瀏覽文件”按鈕

此時(shí)將打開(kāi)“選擇文件”對(duì)話(huà)框，在其中找到要鏈接的網(wǎng)

頁(yè)文件。這里我們選擇index.html

在添加鏈接時(shí)，我們可以選擇文件地址的類(lèi)型。如果想使

用文件相對(duì)地址創(chuàng)建鏈接，可以在對(duì)話(huà)框中“相對(duì)于”下拉列

表框中選擇“文檔”選項(xiàng)；如果使用根目錄相對(duì)地址，可以在

“相對(duì)于”下拉列表框中選擇“根目錄”。

值得注意的是，鏈接的網(wǎng)頁(yè)或文件必須位于本地站點(diǎn)中，

不可以在硬盤(pán)中隨意選取。

（2）建立外部網(wǎng)站的文檔鏈接

外部鏈接指的皓針對(duì)搜索引擎，與其它站點(diǎn)所做的友情鏈

接，通過(guò)自己的網(wǎng)站可以快速的瀏覽到相關(guān)行業(yè)的別的網(wǎng)站。

建立外部鏈接的具體操作是，選中要鏈接的文字，然后在

“屬性”面板中的鏈接后的文本框中輸入對(duì)應(yīng)的網(wǎng)站的地址即

可

（3）建立電子郵件鏈接

電子郵件鏈接是連接到E-mail地址的鏈接。添加郵件鏈接

最直接的方法是在選中文本或圖像后，在“屬性”面板上輸入

以下形式的鏈接地址“mailto:machunyan@”,其中

umachunyan@n是E-mail的接收地址

另外，通過(guò)“常用”快捷欄也可以插入E-mail連接。在“常

用”快捷欄中單擊電子郵件按鈕（G3）

在打開(kāi)的對(duì)話(huà)掂的“文本”文本框中填寫(xiě)E-mail鏈接中要

顯示的文字，在E-mail文本框中填寫(xiě)相應(yīng)的E-mail地址

5.利用“錨“功能定位到網(wǎng)頁(yè)的特定位置

當(dāng)我們?cè)诨ヂ?lián)網(wǎng)上看小說(shuō)時(shí)，如果小說(shuō)過(guò)長(zhǎng)，要找到相應(yīng)

的內(nèi)容就會(huì)變得很麻煩；再比如頁(yè)面的內(nèi)容過(guò)多時(shí)，總是需要

通過(guò)滾動(dòng)條來(lái)查找相應(yīng)的內(nèi)容，這樣也會(huì)很吃力。

如果此時(shí)能在咳網(wǎng)頁(yè)中創(chuàng)建一個(gè)目錄，瀏覽者只需單擊目

錄上的項(xiàng)目就能跳到網(wǎng)頁(yè)相應(yīng)的位置上，這樣就會(huì)很方便。而

要實(shí)現(xiàn)這樣的效果，就需要用到錨記鏈接。

（1）創(chuàng)建命名錨記

（2）創(chuàng)建到錨點(diǎn)的鏈接。

6.利用圖像熱點(diǎn)，在一張圖像上設(shè)置多個(gè)不同的鏈接

（1）圖像熱點(diǎn)的概念

熱點(diǎn)主要用于圖像地圖，通過(guò)該熱點(diǎn)可以在圖像地圖中設(shè)

定作用區(qū)域，這樣當(dāng)用戶(hù)的鼠標(biāo)移到指定的作用區(qū)域點(diǎn)擊時(shí)，

會(huì)自動(dòng)鏈接到預(yù)先沒(méi)定好的頁(yè)面。當(dāng)你在網(wǎng)上沖浪的時(shí)候，一

定見(jiàn)過(guò)這種網(wǎng)頁(yè)效果：有一幅世界地圖，當(dāng)你用鼠標(biāo)點(diǎn)擊了亞

洲區(qū)域時(shí)，就會(huì)進(jìn)入介紹亞洲的網(wǎng)頁(yè)；而當(dāng)你用鼠標(biāo)點(diǎn)擊歐洲

區(qū)域時(shí)，進(jìn)入的則是關(guān)于歐洲內(nèi)容的網(wǎng)頁(yè)。

（2）利用圖像熱點(diǎn)功能，在圖像上建立鏈接

在網(wǎng)頁(yè)中選中圖片，然后在“屬性”面板中出現(xiàn)相應(yīng)的各

項(xiàng)設(shè)置，其中有3種不圖的熱點(diǎn)設(shè)置

選擇“屬性”面板中“地圖（M）”下圖標(biāo)中的某一形狀,

按住鼠標(biāo)左鍵在圖片中相應(yīng)位置拖動(dòng)即可建立一個(gè)矩形的“熱

點(diǎn)”，在默認(rèn)情況下，剛創(chuàng)建的熱點(diǎn)的“鏈接畫(huà)”為“#"，需

要手動(dòng)設(shè)置鏈接的目標(biāo)網(wǎng)址，同時(shí)也可設(shè)置“目標(biāo)也）”及“替

換（I）W

（3）查看圖像熱點(diǎn)相關(guān)屬性

①鏈接：鏈接的目標(biāo)地址。

②目標(biāo)：鏈接打開(kāi)的窗口設(shè)置，有四種選擇，分別是

_blank、_parent、_self、_top。

③替換：當(dāng)圖片無(wú)法顯示時(shí)，在圖片的位置用文字代替

顯示。

7.設(shè)置文件頭標(biāo)簽

在這里我們主要學(xué)習(xí)的是與＜head＞標(biāo)記相關(guān)的功能，在

vhead＞標(biāo)記內(nèi)可以添加主頁(yè)的相美說(shuō)明文字、關(guān)鍵詞、刷新功

能和主頁(yè)轉(zhuǎn)換效果。

（1）利用元標(biāo)記插入網(wǎng)頁(yè)說(shuō)明文字

百度、雅虎、搜狐等站點(diǎn)的檢索功能非常強(qiáng)大，它們都具

有從因特網(wǎng)中搜索信息的檢索機(jī)器，這些檢索機(jī)器通過(guò)主頁(yè)中

＜head＞標(biāo)記中輸入的主頁(yè)說(shuō)明文字檢索因特網(wǎng)中的網(wǎng)頁(yè)文檔，

此時(shí)，在檢索結(jié)果畫(huà)面中顯示的說(shuō)明文字就是元標(biāo)記。具體操

作如下。

選擇“插入”一“html”一“文件頭標(biāo)簽”一“說(shuō)明”菜

單，彈出如圖2-42所示的對(duì)話(huà)框，在文本框中設(shè)置想要寫(xiě)的

描述信息。

設(shè)置完成后，在頁(yè)面中會(huì)自動(dòng)生成對(duì)應(yīng)的代碼

（2）指定網(wǎng)頁(yè)的關(guān)鍵詞

當(dāng)檢索引擎檢索頁(yè)面時(shí)，并不是對(duì)頁(yè)面的全部?jī)?nèi)容進(jìn)行檢

索，而是對(duì)元標(biāo)記中的關(guān)鍵詞進(jìn)行搜索，所以如果希望更多的

訪(fǎng)問(wèn)者通過(guò)檢索引擎搜索到自己的頁(yè)面，就最好設(shè)置關(guān)鍵詞。

具體操作同前面講的類(lèi)似。

選擇“插入”-“html”一“文件頭標(biāo)簽”一“關(guān)鍵字”

菜單，彈出如圖2-43所示的對(duì)話(huà)框，在文本框中設(shè)置關(guān)鍵字

即可

設(shè)置完成后，在頁(yè)面中會(huì)自動(dòng)生成對(duì)應(yīng)的代碼。

(3)自動(dòng)刷新功能

刷新功能是在訪(fǎng)問(wèn)當(dāng)前網(wǎng)頁(yè)文檔后的指定時(shí)間內(nèi)跳轉(zhuǎn)到

其他網(wǎng)頁(yè)或重新打開(kāi)網(wǎng)頁(yè)文檔的功能。該功能主要用于在變更

主頁(yè)地址之后的幾秒內(nèi)自動(dòng)轉(zhuǎn)到新的主頁(yè)，或用于從介紹頁(yè)自

動(dòng)切換到首頁(yè)。具體操作如下。

選擇“插入”/“html”f“文件頭標(biāo)簽”一“刷新”

菜單，彈出如圖2-44所示的對(duì)話(huà)框，在“延遲”后面填寫(xiě)秒

數(shù)，在“操作”中沒(méi)置想要轉(zhuǎn)到的頁(yè)面地址。

設(shè)置完成后，在頁(yè)面中會(huì)自動(dòng)生成對(duì)應(yīng)的代碼

<4)利用元標(biāo)記實(shí)現(xiàn)頁(yè)面轉(zhuǎn)換效果

當(dāng)我們?cè)谝蛱鼐W(wǎng)中遨游時(shí)，常?？吹皆诰W(wǎng)頁(yè)之間進(jìn)行切換

時(shí)會(huì)有一些特效，這種效果叫做頁(yè)面轉(zhuǎn)換效果。

首先設(shè)置的是進(jìn)入當(dāng)前網(wǎng)頁(yè)時(shí)的頁(yè)面轉(zhuǎn)換效果，具體操作

如下：

選擇“插入”一“html”一“文件頭標(biāo)簽”一“meta”

菜單，彈出如圖2-45所示的對(duì)話(huà)框，在“屬性”后面選擇

MHTTP-equivalent“值”填寫(xiě)“enter”,在"內(nèi)容”中

填寫(xiě)uRevealTrans(Duration=10Jransition=20)

設(shè)置完成后，在頁(yè)面中會(huì)自動(dòng)生成對(duì)應(yīng)的代碼

然后設(shè)置的是寓開(kāi)當(dāng)前網(wǎng)頁(yè)文檔時(shí)顯示的頁(yè)面轉(zhuǎn)換效果，

具體操作如下：

選擇“插入”-“html”一“文件頭標(biāo)簽”-“meta”

菜單，彈出如圖2-46所示的對(duì)話(huà)框，在“屬性”后面選擇

“HTTP-equivalent”，“值”填寫(xiě)“exit”，在“內(nèi)容”中填

,,

寫(xiě)“RevealTrans(Duration=10Jransition=10)o

設(shè)置完成后，在頁(yè)面中會(huì)自動(dòng)生成對(duì)應(yīng)的代碼

3.鞏固練習(xí)：20分鐘

按所學(xué)知識(shí)自由制作網(wǎng)頁(yè)

4.歸納小結(jié)：10分鐘

1.在網(wǎng)頁(yè)文檔內(nèi)插入圖像

2.優(yōu)化圖像和段落

3.制作鼠標(biāo)響應(yīng)的翻轉(zhuǎn)菜單

4利.用超鏈接連接相關(guān)網(wǎng)頁(yè)

5.利用“錨”功能定位到網(wǎng)頁(yè)的特定位置

6.利用圖像熱點(diǎn)，在一張圖像上設(shè)置多個(gè)不同的鏈接

7.設(shè)置文件頭標(biāo)簽

1.?HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)從入門(mén)到精通》，胡曉霞，清華大學(xué)出版

社，2017.10

2.《DreamweaverCS6+A5P動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)完全學(xué)習(xí)手冊(cè)》，劉貴國(guó)，清華人學(xué)

使用的出版社，2014.7

參考資料3.因特網(wǎng)WEB開(kāi)發(fā)者資源，包括較全面的

教程、完善的參考手冊(cè)以及龐大的代碼庫(kù)

4.教材支持網(wǎng)站，提供教學(xué)文件及素材下載、案

例演示，同時(shí)為師生提供免費(fèi)網(wǎng)頁(yè)空間

作業(yè)

課后小結(jié)

教研室

簽字：

主任意見(jiàn)

年月日

在授課結(jié)束后將教案交到教研室存檔任課教師簽字:

教案

第2周第2次課授課時(shí)間

授課題目構(gòu)建網(wǎng)頁(yè)的圖文信息（券）

授課方式理論課（V）；實(shí)踐課（）；實(shí)習(xí)（）教學(xué)時(shí)數(shù)2學(xué)時(shí)

教學(xué)目的

通過(guò)項(xiàng)目漸近等實(shí)例，鞏固所學(xué)知識(shí)，并能夠融會(huì)貫通，熟練運(yùn)用

教學(xué)要求

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

融會(huì)貫通，熟練運(yùn)用

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

教學(xué)方法教學(xué)方法：本課程屬于理論與實(shí)踐結(jié)合的專(zhuān)業(yè)課程，主要采用任務(wù)驅(qū)動(dòng)

式、項(xiàng)目任務(wù)式、案例分析式、實(shí)操等教學(xué)方法。

教學(xué)手段教學(xué)手段：多媒體網(wǎng)絡(luò)教學(xué)或投影演示，師生互動(dòng)。

教學(xué)內(nèi)容時(shí)間分配

1.導(dǎo)入新課：5分鐘

項(xiàng)目漸近網(wǎng)站項(xiàng)后“我心飛揚(yáng)”之第二階段“發(fā)布圖文信息”

展示完成后的效果

本階段的操作要點(diǎn)主要有兩點(diǎn)：

（1）為“熱門(mén)圖文”欄目創(chuàng)建二級(jí)目錄結(jié)構(gòu)，并將所需

的圖片素材放入；

（2）創(chuàng)建網(wǎng)頁(yè)文件。

2.講授新課：45分鐘

具體完成過(guò)程

1.創(chuàng)建“熱門(mén)圖文”二級(jí)目錄結(jié)構(gòu)

教學(xué)進(jìn)程（1）創(chuàng)建圖片存放文件夾。右擊站點(diǎn)主目錄，在其下新

建一個(gè)文件夾，命名為“images”，并將網(wǎng)站所需的圖片素材

放入其中。

（2）生成文件。再次右擊站點(diǎn)主目錄，選擇“新建文件”，

將新創(chuàng)建的文件命名為“hot.html”。

2.創(chuàng)建網(wǎng)頁(yè)文件

上一步已經(jīng)生成了該網(wǎng)頁(yè)的空白文件，本步驟將為其生成

html代碼。

（1）設(shè)計(jì)頁(yè)面布局。雙擊“hot.html”文件，找開(kāi)后，

首先切換到“設(shè)計(jì)”視圖，插入2行2列的表格；

（2）在第一行左單元格插入images文件夾下的

slidel.jpg文件，右單元格插入各文字鏈接

（3）將第二行合并為一個(gè)單元格，然后在第二行單元格

內(nèi)再插入一個(gè)2行3歹山寬度為100%,單元格邊距為20的表

格（該表格可稱(chēng)之為嵌套表格），并在對(duì)應(yīng)的3個(gè)單元格內(nèi)分

別插入對(duì)應(yīng)圖片和文字，并設(shè)置“屬性面板”中的“格式”屬

性，將“蝴蝶效應(yīng)”、“峽谷列車(chē)”、“一滴水”設(shè)置為“標(biāo)

題2”。

3.鞏固練習(xí)：40分鐘

拓展訓(xùn)練“