周儀蘭

摘 要： 針對中職學生學習DreamWeaver時每節(jié)課學習其中的一部分功能，建設網站時把這些功能整合使用，大部分學生都感到困難的實際情況，作者采用任務驅動教學法理清思路，使學生有效地將所學理論和實踐聯(lián)系在一起，推動網站建設。

關鍵詞： DreamWeaver教學 任務驅動 數據庫

DreamWeaver動態(tài)網頁制作教學，大部分采用案例進行教學，學生可以從具體的案例中學到DreamWeaver的強大功能，但是案例教學中學生往往忽略為什么要這么做，每節(jié)課的教學內容都以教材提供的素材完成，對于素材的選用、項目的設計、網頁的布局及數據庫的設計，學生無需思考這些問題，但是在實際網站建設中，這些內容卻是必不可少的，學生需要逐一設計。在學完DreamWeaver后，筆者要求學生運用它設計一個自己的網站，而中職學生在完成這一項目時，感到難度很大，無從做起。因此在設計過程中，筆者用任務驅動教學引導學生統(tǒng)籌規(guī)劃，遵循網站規(guī)劃、數據庫的設計、網頁的布局、網頁的實施、測試及評價的過程，讓學生獨立完成以上過程，在自己“動手”的過程中，掌握技能，豐富自身的專業(yè)知識。

一、確定網站的主題及所要呈現(xiàn)的內容

這一階段，教師設計一個表格，讓學生完成相應的表格，內容包括網站的名稱、主題；前臺后臺各設計幾個模塊、各模塊的名稱及其包含的項目；要求學生在規(guī)定的時間內完成這份表格。學生在設計項目時，經常會出現(xiàn)項目不足以表達所要呈現(xiàn)的內容的問題，這是教材中缺少的內容。教師可以用一個具體的實例講解分析的過程。例如：我們在做旅游網站時，前臺包括首頁、景點介紹、精品線路、旅游的形式（全景游、一日游、三日游等）。后臺包括：用戶注冊、用戶、管理員登錄、用戶修改密碼、用戶留言板；新聞發(fā)布、編輯、刪減；用戶賬號刪減；景點發(fā)布、編輯、刪減；旅游形式發(fā)布、編輯、刪減等。教師對學生的表格數據給出一些合理化的建議。

二、數據庫的設計

這部分內容在教材中是以素材的形式使用的，學生在學習過程中沒有設計，而在DreamWeaver動態(tài)網頁制作中它卻是核心，網站的所有數據都在數據庫中，由此可見數據庫的重要性。學生數據庫的設計是以數據形式上交，包括數據表、每個數據表包含的字段的字段名、類型、用途，輸入數據記錄的內容，至少十條。內容太少會影響主頁的完整性，教師以旅游網站的實例講解設計過程，數據庫至少包含三個數據表：用戶表、新聞表和景點表。

用戶表中的字段：用戶名（字符型）、密碼（字符型）、用戶級別（數值型）、注冊時間（日期型）、電子郵件（字符型）。

新聞表中的字段：新聞標題（字符型）、新聞內容（字符型）、新聞圖片（字符型）。

景點表中的內容：景點名稱（字符型）、景點內容（字符型）、景點圖片（字符型）。

三、制作頭文件

頭文件包含網站Logo及網站名稱、導航、用戶注冊及登錄、后臺入口，頭文件制作后，可以直接在首頁、詳細頁及后臺中運用，大大加快網頁制作的速度。

1.制作網站Logo

選擇標志性的圖片及站點名稱用Photo或Flash制作成網站Logo，這是我們網站的門面，要求界面友好、色彩搭配協(xié)調、和諧，頁面美觀。

2.連接數據庫

數據庫的連接是最關鍵的一步，是能否將網頁制作成動態(tài)網頁的關鍵。數據的連接方式有兩種：一種是以自定義連接字符串方式創(chuàng)建數據庫連接，另一種是以數據源名稱方式連接。使用自定義連接字符串創(chuàng)建數據庫連接，可以保證用戶在本地計算機中定義數據庫連接上傳到服務器后繼續(xù)使用，具有很大的靈活性，我們選用自定義字符串的連接方式。數據庫連接對中職學生來說，具有很大難度，經常出現(xiàn)數據庫連接不上的問題，小組成員可以互相調試，必要時教師給予適當指導。

3.制作導航

導航欄中的超級鏈接到具體的文件，文件名應易分辨、記憶、方便后期的調試。

4.制作用戶注冊

（1）新建注冊頁面，創(chuàng)建表單及按鈕。

（2）在代碼界面加入代碼判斷密碼及密碼確認的內容是否一致。

（3）檢查是否則新用戶，否則給出相應信息。

（4）在按鈕中加入插入記錄到用戶表中，默認用戶級別為2，普通用戶。

（5）在頭文件中創(chuàng)建注冊的超鏈接。

這一過程要避免出現(xiàn)用戶名重復的現(xiàn)象，確保用戶的唯一性。

5.制作登錄

（1）定義兩個階段變量用戶名MM_UserName及用戶級別MM_UserAuthorization。

（2）新建登錄頁面，創(chuàng)建表單。

（3）在服務器行為面板中，使用用戶身份驗證，登錄用戶。

（4）在代碼中加入代碼：如果用戶名為空，則顯示您還沒有登錄，否則顯示您好，用戶名及退出。

（5）在代碼中加入代友：如果用戶級別的值<=1，則顯示管理入口。

其中，修改代碼是學生出現(xiàn)錯誤最多的地方，這里要求各組學生互相修改、調試。用這種方法，學生在調試的過程中不斷鞏固知識，有效提高課堂教學效率，提高動手能力，增強團結協(xié)作能力。

6.制作注銷登錄

選中文本注銷，在服務器行為面板中，使用用戶身份驗證中的注銷用戶。

7.生成頭文件

切換到代碼視圖，將標簽以外的代碼刪除。

四、制作首頁

1.打開首頁文件。

2.用插入/HTML中的腳本SSI，將頭文件置于首頁中。

3.創(chuàng)建新聞列表：

（1）用數據庫中的新聞表創(chuàng)建記錄集；

（2）在新聞的位置創(chuàng)建一個一行一列的表格，設置邊框為0，將記錄集中的新聞標題以動；態(tài)文本的形式插入表格中，將表格設置為重復區(qū)域，并設置顯示左端開始的30個字符；

（3）創(chuàng)建詳細頁面；

（4）在首頁中，選定動態(tài)文本新聞標題，添加轉到詳細頁的服務器行為。

4.用上述方法創(chuàng)建景點列表、旅游形式列表等。

5.制作滾動圖片及圖片的懸停效果。

6.插入Flash滾動條。

7.制作頁腳。

至此，首頁制作完畢。

五、制作后臺

1.制作新聞編輯頁面。

（1）用插入/HTML/腳本SSI，將頭文件置于首頁中。

（2）創(chuàng)建新聞列表。

（3）用數據庫中的新聞表創(chuàng)建記錄集，用服務服務器行為的插入記錄完成新聞的添加，用更新記錄完成新聞的修改，用刪除記錄完成新聞的刪除。

（4）添加限制對頁的訪問。

（5）創(chuàng)建新聞列表及詳細頁。

2.用上述方法創(chuàng)建景點的編輯頁、旅游方式的編輯頁及設置管理員等

用任務教學法，學生把所學的內容融會貫通，做出一個自己設計的網站，體驗到成功的喜悅。

參考文獻：

[1]王君學.從零開始—DreamWeaver CS5中文版基礎培訓教程[M].北京：人民郵電出版社，2012：3.

[2]黃文冰.從零開始—DreamWeaver中文版典型實例[M].北京：人民郵電出版社，2005：10.

[3]豐云.“開放·探究·協(xié)作”學習模式下的教師角色探析[J].北京：中國職業(yè)技術教育，2013：17.