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

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

教學(xué)教案

教案（首頁）

授課時間月日~月日教案編寫時間月日

課程名稱網(wǎng)頁設(shè)計與制作

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

課程代碼0000

周學(xué)時：6

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

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

考核方式

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

課程類型理論課實踐課理論+實踐J

計算機信息管理、計算

授課專業(yè)授課班級201X級XXXX班

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

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

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

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

課程任務(wù)

與應(yīng)用。

及目標

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

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

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

重點：掌握html和CSS,利用DW來布局網(wǎng)頁，層、行為、模板、庫的使用，開發(fā)動

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

課程重點

難點：正確使用表格和框架進行布局，HTML標簽和CSS樣式的代碼視圖編輯，以及

及難點

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

能開發(fā)的能力。

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

教學(xué)方法

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

與手段

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

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

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

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

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

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

參考資料：

教材及

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

參考資料

2017.10

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

出版社，2014.7

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

程、完善的參考手冊以及龐大的代碼庫

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

例演示，同時為師生提供免費網(wǎng)頁空間

教案

第1周第1次課授課時間

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

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

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

教學(xué)要求

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

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

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

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

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

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

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

（1）課程概述。

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

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

文信息

2.講授新課：60分鐘

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

1.創(chuàng)建站點

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

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

相關(guān)知識

教學(xué)進程

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

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

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

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

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

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

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

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

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

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

刻的印象，才能有存在的價值。

（2）搜集材料

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

式包括圖片、文字、聲音、影像等。材料既可以從圖書、報紙、

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

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

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

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

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

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

個方面：

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

?欄目的設(shè)置

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

?顏色搭配

?版面布局

?文字圖片的運用

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

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

一個復(fù)雜而細致的過程，需要按照先大后小、先簡單后復(fù)雜來

進行網(wǎng)頁的制作。

所謂先大后小：就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計

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

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

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

作效率。

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

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

（5）上傳測試

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

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

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

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

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

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

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

擇比較便宜的“虛雙主機”即可，價格在每年千元以內(nèi)。

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

網(wǎng)頁空間。讀者可通過本書的支持網(wǎng)站獲??；

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

先已開通準備好了。

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

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

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

即是。除此之外，還有一些專門的FTP工具，如

FileZilla,FlashFXP等，功能更強大。

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

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

申請網(wǎng)頁空間時獲得的域名一般是免費的三級域名，是隸

屬于申請公司域名下一級的子域名。正式的網(wǎng)站往往都專門申

請一個標準的一級域名，如>、

,綁定到網(wǎng)頁空間上，瀏覽都訪問起來，顯得更正

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

(6)推廣宣傳

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

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

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

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

如果訪問量比較大，如每日有幾千人以上訪問，就可以考

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

(7)維護更新

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

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

錯誤問題及時進行修正。

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

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

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

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

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

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

1.?HTML+CSS+JavaScript

社，2017.10

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

使用的出版社，2014.7

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

教程、完善的參考手冊以及龐大的代碼庫

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

例演示，同時為師生提供免費網(wǎng)頁空間

作業(yè)

課后小結(jié)

教研室

簽字：

主任意見

年月日

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

教案

第1周第2次課授課時間

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

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

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

教學(xué)要求

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

教學(xué)難點

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

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

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

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

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

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

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

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

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

內(nèi)人士的青睞，是因為它同時具備網(wǎng)頁設(shè)計功能和網(wǎng)頁編程功

能。Dreamweaver是適用于從個人主頁設(shè)計到企業(yè)站點開發(fā)等

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

具。

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

Dreamweaver最新版本并安裝。

教學(xué)進程啟動Dreamweaver的操作很簡單，只需單擊“開始”菜

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

動該軟件

2.講授新課：65分鐘

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

在Dreamweaver中可以使用多種方法來創(chuàng)建Web站點，

下面介紹的是其中常見的一種，其步驟依次為：

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

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

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

（2）組織和管理站點文件

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

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

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

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

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

文檔中。

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

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

選項創(chuàng)建站點的外觀。可以使用DreamweaverAP元素、CSS

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

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

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

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

更改時自動更新這些頁面的布局。

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

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

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

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

行任務(wù)，例如在訪問者單擊“提交”按鈕時驗證表單，或者在

主頁加載完畢時打開另一個瀏覽器窗口。最后，Dreamweaver

還提供了工具來最大限度地提高站點的性能，并測試頁面以確

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

(5)通過手動編碼創(chuàng)建頁面

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

除提供了易于使用的可視化編輯工具，同時也提供了這種手動

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

種方法或同時采用這兩種方法來創(chuàng)建和編輯頁面。

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

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

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

中添加、編輯信息。

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

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

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

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

拖動到頁面上即可.

可以通過設(shè)置頁面來同時顯示一條記錄或多條記錄，顯示

多頁記錄，添加用于在記錄頁之間來回移動的特殊鏈接，以及

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

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

3.DroamwoaverCS6的操作界面

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

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

象屬性。

（1）查看操作界面

菜單欄：問Windows應(yīng)用程序一樣，菜單欄中匯集了Dreamweaver中各

種命令功能

文檔工具欄：以圖標形式匯集了常用工具

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

該窗口是實際制作頁面時最常用的窗口

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

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

口”重新指定其他面板

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

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

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

改所選對象或文本的各種屬性

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

構(gòu)中的任何標簽可以比擇該標簽及其包含的全部內(nèi)容

工作區(qū)切換器：通過將面板的當前大小和位置存儲為門定義的工作區(qū)，

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

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

（2）屬性面板

屬性面板可以檢查和編輯當前選定頁面元素（如文本和

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

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

號、加粗等屬性，而如果選擇頁面上的一個圖像，則屬性面板

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

度和高度等。

（3）靈活運用設(shè)計視圖和代碼視圖

Dreamweaver的特征之一就是采用了“所見即所得”方式

來編輯網(wǎng)頁，并適當?shù)募橙×薍TML編輯器的優(yōu)點。在“所見

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

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

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

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

可以將兩種視圖通過兩個窗口同時顯示出來以做對比。

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

工具欄的組成。

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

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

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

中的“拆分”按鈕.

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

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

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

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

示。在該視圖，可以自由地對HTML等代碼直接進行編寫。

4.可自由擺放的面板組

常用的面板可以一直打開，不常用的面板則可隱藏起來，

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

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

帶勾選標志的是當前已打開的面板。下面先簡單確認一下都有

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

實例進行說明。

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

不相同，且執(zhí)行不同操作時，各個功能項的重要度也會隨之發(fā)

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

設(shè)計者使用起來將會非常方便。

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

打開的面板，還可以雙擊面板的標題欄對其展開和收縮，或是

拖拽面板的標題欄使其移動到新位置，拖動面板的邊框還可以

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

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

“溫馨提示”

具體完成過程

1.創(chuàng)建站點

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

鏈接。在彈出的“管理站點”對話框，單擊“新建站點”鏈接。

填寫“站點名稱”為“我心飛揚”，“本地站點文件夾”內(nèi)選擇

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

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

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

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

點-我心飛揚”，選擇“新建文件”，命名為“index.html”。

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

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

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

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

（3）通過鼠標拖拽選中表格中第1行的兩個單元格，在

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

元格”。

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

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

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

選擇“插入”一“圖像”，彈出“選擇圖像源文件”對話框。

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

文件夾內(nèi)。

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

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

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

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

網(wǎng)站項目開發(fā)流程

Dreamweaver常用功能的使用

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

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

1.?HTML+CSS+JavaScript

社，2017.10

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

使用的出版社，2014.7

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

教程、完善的參考手冊以及龐大的代碼庫

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

例演示，同時為師生提供免費網(wǎng)頁空間

作業(yè)

課后小結(jié)

教研室

簽字：

主任意見

年月日

任課教師簽字:

教案

第1周第3次課授課時間

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

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

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

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

教學(xué)要求

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

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

教學(xué)重點

3修.改文字屬性

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

教學(xué)難點

5.在網(wǎng)頁文檔中插入水平線

6.插入各種符號

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

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

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

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

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

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

任務(wù)說明：

網(wǎng)頁打開后，將顯示“古詩鑒賞”界面，運行效果演示。

65分鐘

2.講授新課：

完成過程

首先建立一個本地站點，然后對頁面進行布局，最后使用

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

（1）新建一個本地站點

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

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

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

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

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

后使其居中

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

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

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

相關(guān)知識

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

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

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

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

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

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

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

簡單的來說網(wǎng)頁與網(wǎng)站的區(qū)別如下：網(wǎng)站是由網(wǎng)頁集合而

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

在一起才能稱作網(wǎng)站，沒有明確的規(guī)定，即使只有一個網(wǎng)頁也

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

網(wǎng)頁是一個HTML（超文本標記語言）文件（本例中的站

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

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

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

（2）本地站點的概念

本地站點通常指向本地計算機的一個文件，Dreamweaver

中提供了建立本地站點的功能。

（3）建立操作空間一本地站點

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

地站點。

（4）編輯、刪除本地站點

在Dreamweaver菜單中選擇“站點”-*“管理站點”,選

中要編輯的站點，單擊編輯圖標（4），可以對站點進行編輯

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

2-7所示。

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

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

標題、背景圖像以及頁面邊距等。

（1）為網(wǎng)頁文檔指定標題

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

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

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

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

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

個段落進行輸入。

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

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

和背景色。

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

利用背景圖片來填充文檔，可以美觀頁面，達到良好的視

覺效果，如圖2.4所示。

3.修改文字屬性

（1）更改字號

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

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

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

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

方法如圖2-10所示。

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

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

于商品列表、項目展示等。

（1）DreamweaverCS6支持的項目列表功能

列表時HTML中組織多個段落文本的一種方式。列表分成

編號列表和項目列表。前一種列表用數(shù)字順序為列表中的項目

進行編號，而后一種列表則在每個列表項目之前使用一個項目

符號。

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

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

所示，在“屬性”面板中單擊項目列表圖標（==）,默認的

列表項目記號為圓形黑點

（3）制作項「列表的嵌套列表

在列表項中可以嵌套項目列表或編號列表。例如在“計

算機系”下面輸入3個專業(yè)，在屬性面板中，單擊縮進圖標

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

要單擊編號圖標（目）

5.在網(wǎng)頁文檔中插入水平線

水平線又稱為分割線，可以將文字、圖片等對象在網(wǎng)頁中

分割開，可以使頁面變得層次分明，便于閱讀。

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

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

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

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

;<hrcolor="blue"/>

L____________________________________1

（2）在網(wǎng)頁文檔中插入水平線

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

圖標（善），如圖2-15所示插入水平線，然后在“屬性”面

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

6.插入各種符號

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

是鍵盤無法直接輸入的，可以通過下面的方法插入一些特殊字

符。

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

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

3.鞏固練習(xí)：

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

4.歸納小結(jié)：

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

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

3.修改文字屬性

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

5.在網(wǎng)頁文檔e插入水平線

6.插入各種符號

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

社，2017.10

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

使用的出版社，2014.7

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

教程、完善的參考手冊以及龐大的代碼庫

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

例演示，同時為師生提供免費網(wǎng)頁空間

作業(yè)

課后小結(jié)

教研室

簽字：

主任意見

年月日

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

教案

第2周第1次課授課時間

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

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

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

教學(xué)要求

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

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

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

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

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

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

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

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

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

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

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

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

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

任務(wù)說明：

網(wǎng)頁打開后，溶行的效果如圖

2.講授新課：65分鐘

完成過程

首先建立一個本地站點，然后布局頁面，最后利用文字和

教學(xué)進程

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

（1）新建一個本地站點，打開Dreamweaver,選擇

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

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

可，

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

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

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

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

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

0像素，然后使其居中；

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

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

jdmc.jpg、mcxs.jpg、lxwm.jpg

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

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

標記。

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

相關(guān)知識：

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

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

色彩。

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

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

①JPEG/JPG圖片文件格式

②GIF圖片文件格式

③PNG圖片文件格式

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

在“設(shè)計”視圖下，將光標定位在準備插入圖像的位置后，

選擇“插入”一“圖像”菜單，彈出“選擇圖像源文件”對話

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

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

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

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

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

田)。

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

有時候在瀏覽器打開頁面時圖像不能夠正常顯示。通常情

況下是因為插入圖像時的路徑出現(xiàn)了問題，最好的解決方法是

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

地站點中選擇，沒有在本地站點中的圖像，系統(tǒng)會自動提示把

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

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

他電腦上，網(wǎng)頁也會正常運行。

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

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

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

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

我們在瀏覽網(wǎng)頁的時候，經(jīng)常能看到這樣的菜單，當鼠標

經(jīng)過一張圖片時變奏成另一張圖片的效果，看起來既美觀又動

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

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

快捷欄中的“鼠標經(jīng)過圖像”選項

然后會彈出一個選擇圖片的對話框，如圖2-29所示，在

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

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

的文字。

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

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

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

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

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

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

所需的資源。

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

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

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

此時將打開“選擇文件”對話框，在其中找到要鏈接的網(wǎng)

頁文件。這里我們選擇index.html

在添加鏈接時，我們可以選擇文件地址的類型。如果想使

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

表框中選擇“文檔”選項；如果使用根目錄相對地址，可以在

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

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

不可以在硬盤中隨意選取。

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

外部鏈接指的皓針對搜索引擎，與其它站點所做的友情鏈

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

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

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

可

（3）建立電子郵件鏈接

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

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

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

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

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

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

在打開的對話掂的“文本”文本框中填寫E-mail鏈接中要

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

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

當我們在互聯(lián)網(wǎng)上看小說時，如果小說過長，要找到相應(yīng)

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

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

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

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

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

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

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

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

（1）圖像熱點的概念

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

定作用區(qū)域，這樣當用戶的鼠標移到指定的作用區(qū)域點擊時，

會自動鏈接到預(yù)先沒定好的頁面。當你在網(wǎng)上沖浪的時候，一

定見過這種網(wǎng)頁效果：有一幅世界地圖，當你用鼠標點擊了亞

洲區(qū)域時，就會進入介紹亞洲的網(wǎng)頁；而當你用鼠標點擊歐洲

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

（2）利用圖像熱點功能，在圖像上建立鏈接

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

項設(shè)置，其中有3種不圖的熱點設(shè)置

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

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

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

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

換（I）W

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

①鏈接：鏈接的目標地址。

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

_blank、_parent、_self、_top。

③替換：當圖片無法顯示時，在圖片的位置用文字代替

顯示。

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

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

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

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

（1）利用元標記插入網(wǎng)頁說明文字

百度、雅虎、搜狐等站點的檢索功能非常強大，它們都具

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

＜head＞標記中輸入的主頁說明文字檢索因特網(wǎng)中的網(wǎng)頁文檔，

此時，在檢索結(jié)果畫面中顯示的說明文字就是元標記。具體操

作如下。

選擇“插入”一“html”一“文件頭標簽”一“說明”菜

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

描述信息。

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

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

當檢索引擎檢索頁面時，并不是對頁面的全部內(nèi)容進行檢

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

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

具體操作同前面講的類似。

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

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

即可

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

(3)自動刷新功能

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

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

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

動切換到首頁。具體操作如下。

選擇“插入”/“html”f“文件頭標簽”一“刷新”

菜單，彈出如圖2-44所示的對話框，在“延遲”后面填寫秒

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

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

<4)利用元標記實現(xiàn)頁面轉(zhuǎn)換效果

當我們在因特網(wǎng)中遨游時，常?？吹皆诰W(wǎng)頁之間進行切換

時會有一些特效，這種效果叫做頁面轉(zhuǎn)換效果。

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

如下：

選擇“插入”一“html”一“文件頭標簽”一“meta”

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

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

填寫uRevealTrans(Duration=10Jransition=20)

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

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

具體操作如下：

選擇“插入”-“html”一“文件頭標簽”-“meta”

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

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

,,

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

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

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

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

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

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

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

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

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

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

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

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

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

社，2017.10

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

使用的出版社，2014.7

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

教程、完善的參考手冊以及龐大的代碼庫

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

例演示，同時為師生提供免費網(wǎng)頁空間

作業(yè)

課后小結(jié)

教研室

簽字：

主任意見

年月日

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

教案

第2周第2次課授課時間

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

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

教學(xué)目的

通過項目漸近等實例，鞏固所學(xué)知識，并能夠融會貫通，熟練運用

教學(xué)要求

教學(xué)重點

融會貫通，熟練運用

教學(xué)難點

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

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

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

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

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

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

展示完成后的效果

本階段的操作要點主要有兩點：

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

的圖片素材放入；

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

2.講授新課：45分鐘

具體完成過程

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

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

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

放入其中。

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

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

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

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

html代碼。

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

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

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

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

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

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

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

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

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

題2”。

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

拓展訓(xùn)練“