丁海燕，袁國武，林 玲

(云南大學 信息學院, 昆明 650091)

網(wǎng)頁設計與制作教學實踐研究

丁海燕，袁國武，林 玲

(云南大學 信息學院, 昆明 650091)

網(wǎng)頁設計與制作是一門實踐性強、創(chuàng)新性強、綜合性強的數(shù)字媒體設計課程, 如何激發(fā)學生的學習興趣，在有限的學時內(nèi)完成課程所要求的知識和技能已成為普遍探討的教學問題。針對數(shù)字媒體技術(shù)應用課程的特點，教學內(nèi)容的設計和教學方法的創(chuàng)新成為教學成功的關鍵。文中根據(jù)“網(wǎng)頁設計與制作”課程實際的教學目標,從圖像與動畫、動態(tài)網(wǎng)頁、層疊樣式表CSS、綜合網(wǎng)站案例設計四個方面分析了教學內(nèi)容設計，闡述了教學方法改革，實踐證明大大提高了學生網(wǎng)站設計與制作方面的數(shù)學媒體設計能力和動手能力。

網(wǎng)頁設計;教學設計;案例教學;數(shù)學媒體設計

隨著網(wǎng)絡的普及和迅猛發(fā)展，信息化程度不斷提高，網(wǎng)絡已經(jīng)成為人們獲取信息的主要方式之一，網(wǎng)頁設計制作課程應運而生，它綜合了網(wǎng)頁美工設計、Web 應用開發(fā)、信息發(fā)布與獲取等多方面的技能，為電子商務、電子政務提供了技術(shù)基礎[1]。網(wǎng)頁設計制作課程作為一門技術(shù)與藝術(shù)相融合的創(chuàng)新型課程，要求教師在講授網(wǎng)頁制作相關理論知識和技能的同時，特別要注重激發(fā)學生的學習興趣，啟發(fā)學生的思維，培養(yǎng)學生的實踐能力。因此如何在有限的課時內(nèi)，使學生掌握網(wǎng)頁設計的精髓，具備綜合運用多種軟件工具進行網(wǎng)站開發(fā)與網(wǎng)頁設計的能力，成為授課教師值得探討的話題[2]。筆者結(jié)合實際教學經(jīng)驗，對知識點的教學設計和教學方法改革做了有益的實踐與探索。

1 網(wǎng)頁設計與制作的教學目標與定位

網(wǎng)頁設計與制作課程的總體目標是培養(yǎng)學生具有網(wǎng)站設計與開發(fā)、網(wǎng)絡多媒體設計與開發(fā)的能力。該課程涉及Dreamweaver網(wǎng)頁制作、圖像處理、網(wǎng)頁動畫制作和網(wǎng)頁編程等，使學生具備網(wǎng)頁設計與制作、網(wǎng)站規(guī)劃與維護的實踐技能，最終養(yǎng)成良好的信息收集、加工、處理和發(fā)布的信息素養(yǎng)和動手能力。具體來說，在培養(yǎng)專業(yè)能力方面，應教會學生合理使用表格、層、框架進行網(wǎng)頁布局，體現(xiàn)網(wǎng)頁的藝術(shù)性；熟練使用層、行為和JavaScript 腳本實現(xiàn)網(wǎng)頁特效；使用CSS 樣式統(tǒng)一網(wǎng)站風格；使用模板與庫簡化網(wǎng)頁的批量制作與維護更新；使用網(wǎng)頁三劍客軟件Dreamweaver、Fireworks和Flash進行網(wǎng)頁綜合設計，并根據(jù)用戶的需求進行網(wǎng)站的策劃、制作、發(fā)布及對網(wǎng)站進行更新和維護[2]。同時這門課程還要注重培養(yǎng)學生規(guī)劃網(wǎng)站、從不同媒體查找資料、獲取信息、用圖像處理軟件Fireworks和動畫軟件Flash處理和加工信息的能力；培養(yǎng)與客戶的溝通能力以及團隊協(xié)作能力；培養(yǎng)更新現(xiàn)有知識和技術(shù)的自學能力，以及不斷創(chuàng)新的能力[2]。

教學中要確立“加強計算機綜合應用能力，以信息技能促進專業(yè)發(fā)展，注重信息的搜集、加工處理、設計和發(fā)布，以提高學生的信息技術(shù)應用水平和實踐技能為目的”的大學公共計算機教學理念。在教學改革上既要把握全局方向，又要具體落到實處，解決傳統(tǒng)教學中理論與實踐聯(lián)系不緊密，學生動手能力和創(chuàng)新能力不強等問題。使高校一年級和二年級的本科學生從具備基本的Windows操作系統(tǒng)和Office辦公軟件操作能力，提升到能將計算機技能與自己的專業(yè)或興趣愛好相結(jié)合，綜合應用Dreamweaver、Fireworks、Flash、Photoshop等多種計算機軟件，設計制作不同主題、界面美觀、內(nèi)容豐富、功能全面的網(wǎng)站，達到發(fā)布和交流信息的目的。

總之，網(wǎng)頁設計的教學目標就是讓每名學生在數(shù)字媒體技術(shù)上具有較高的理論水平和良好的實踐能力，具備一定的網(wǎng)頁設計制作和網(wǎng)站維護管理的能力，并能夠圍繞一個主題自己收集、加工和處理各類信息，最終提交具有一定集文字、圖像、動畫、音頻、視頻等多種視覺效果和技術(shù)含量的網(wǎng)頁作品。

2 網(wǎng)頁設計與制作課程教學內(nèi)容設計

一個完整的網(wǎng)站開發(fā)與設計涉及不同的設計理念與技術(shù)支撐，例如，HTML語言、JavaScript腳本語言、ASP編程技術(shù)、CSS技術(shù)、圖像處理、多媒體技術(shù)、數(shù)據(jù)庫技術(shù)，甚至布局及色彩搭配等美學知識[3]，這難以在一門課程中面面俱到，于是就要求教師應結(jié)合項目化教學方法，積極促進網(wǎng)頁制作多種軟件間的相互滲透與聯(lián)系，并根據(jù)不同專業(yè)學生的特點、現(xiàn)有知識結(jié)構(gòu)和認知水平推敲每個知識點，并設計構(gòu)造出一系列具有可操作性的典型“教學任務”，以提高學生的動手能力、想象力、藝術(shù)審美和創(chuàng)新力等綜合素質(zhì)[3]。

2.1 圖像和動畫的教學設計

一個精彩的網(wǎng)頁是缺少不了圖片的,如圖片按鈕、翻轉(zhuǎn)圖片、濾鏡、透明圖、導航圖等，圖片往往在網(wǎng)頁中起到畫龍點睛的作用,所以在網(wǎng)頁制作過程中一定會涉及圖片的處理[4]。同時要制作出精美的網(wǎng)頁圖像，網(wǎng)頁相冊，以及整體感強烈的版面布局等，往往要借助Fireworks軟件。因此,網(wǎng)頁設計課程也要結(jié)合網(wǎng)頁圖像處理的教學,但由于時間所限，只能通過一些案例重點講解用Fireworks制作導航菜單、特效文字、切片和LOGO標志等。Flash動畫制作則通過幾個簡單的文字動畫案例，讓學生了解動畫制作的原理、Flash 動畫制作的基本步驟、不同類型基本動畫的制作技術(shù)(如引導線動畫、遮罩層動畫、逐幀動畫、補間動畫等)、在動畫中添加聲音、影片的導出等[4]。圖像處理與動畫這部分內(nèi)容，教師可根據(jù)各個學校的學時和學生水平靈活進行增減。

2.2 動態(tài)網(wǎng)頁的教學設計

靜態(tài)網(wǎng)頁的制作可以用軟件直接生成，這是教材的主要內(nèi)容，但同時在教材中也要引入動態(tài)網(wǎng)頁制作的概念，擴展學生的知識面。實現(xiàn)動態(tài)網(wǎng)頁需要綜合運用網(wǎng)絡、數(shù)據(jù)庫、編程和軟件工具，可以擴展學生的思維，培養(yǎng)解決問題、綜合運用各種知識的能力。動態(tài)網(wǎng)頁涉及站點的配置與管理,Web服務器的安裝與配置，服務器端編程語言ASP、PHP、JSP等內(nèi)容[4]，這些內(nèi)容在網(wǎng)頁設計初學階段不必深入展開，因此筆者在教學中設計了一個功能簡單的留言本，僅由3個文件構(gòu)成：首頁index.htm顯示留言，insert.htm填寫并提交留言，lyb.mdb數(shù)據(jù)庫文件以二維表格的方式存儲留言信息。通過該案例向?qū)W生直觀地演示如何創(chuàng)建訪問Access數(shù)據(jù)庫的動態(tài)網(wǎng)頁，通過填寫并提交表單實現(xiàn)記錄的插入，通過留言本首頁實現(xiàn)記錄的查詢和顯示。通過該交互式網(wǎng)頁的實現(xiàn)從而激發(fā)學生以后深入學習動態(tài)網(wǎng)頁編程的興趣，明白網(wǎng)頁設計與制作不僅是藝術(shù)設計的體現(xiàn)，也是編程技術(shù)、多媒體技術(shù)、網(wǎng)絡技術(shù)等的綜合應用。

2.3 層疊樣式表CSS的教學設計

樣式就是一組命名的格式，樣式定義可以用代碼編寫，也可以借助樣式生成器可視化生成，樣式可以定義在當前網(wǎng)頁，也可以導入外部樣式表。筆者設計了大量具體的案例來啟發(fā)學生用CSS完成各種網(wǎng)頁特效，例如首行縮進、圖片和文字濾鏡、首字下沉、圖像作列表的項目符號、字間距和行間距、邊框效果、超鏈接未訪問過、訪問過、鼠標移入、按下激活4種特效、超鏈接去掉下劃線、彩色滾動條、文字浮動效果、背景圖像固定、用層+CSS實現(xiàn)對象的定位布局，以及在同一網(wǎng)站的不同網(wǎng)頁之間通過CSS樣式統(tǒng)一網(wǎng)頁的風格，如相同的文字、背景圖像、超鏈接、邊框等格式設置，優(yōu)點在于一是簡化了不同網(wǎng)頁重復的格式設置工作，二是將來只要更新了CSS樣式，所有引用該樣式的對象都會更新，便于網(wǎng)站的更新和維護。通過演示各種CSS實例，讓學生在學習過程中領會CSS的作用，并能在網(wǎng)頁制作中靈活、充分使用CSS，以達到利用CSS美化網(wǎng)頁，統(tǒng)一網(wǎng)站內(nèi)各個網(wǎng)頁風格的教學目的[5]。

2.4 設計綜合案例體現(xiàn)“任務驅(qū)動”教學方法

要教好網(wǎng)頁設計這門課，必須要圍繞一個完整的網(wǎng)站實例來講解，才能達到良好的教學效果。首頁的效果是網(wǎng)站的重點，因此以網(wǎng)站首頁的設計為例，將圖像、聲音、動畫等多個知識點和Fireworks、Flash不同軟件的講解融入首頁中。教師先演示網(wǎng)頁的多媒體效果，激發(fā)學生興趣；然后演示首頁的制作過程，并對所學到的知識點(新建站點和網(wǎng)頁、圖像查看器、Fireworks制作切片、Flash制作文字動畫，HMTL語言、Flash文本、Flash按鈕等)進行歸納和總結(jié)；最后給出圖像和音樂素材，讓學生舉一反三自己設計一個網(wǎng)站首頁，展示學生作品并評分，課后讓學生通過課程網(wǎng)站學習和借鑒優(yōu)秀網(wǎng)站的版面布局和制作方法，培養(yǎng)自主學習的能力。

3 教學方法

采用案例教學法和任務驅(qū)動法，并有效利用多媒體雙向教學環(huán)境。

3.1 案例教學

講課方式采用案例教學。結(jié)合課程內(nèi)容,原創(chuàng)設計多個網(wǎng)站案例及每一章相應知識點的上機任務, 每個案例網(wǎng)站都綜合了若干個知識點，將抽象的Web開發(fā)技術(shù)以形象生動的形式展現(xiàn)在學生面前。課堂上先演示案例網(wǎng)站, 引出問題, 然后在講解知識點的同時實現(xiàn)案例網(wǎng)站的界面設計和功能。在講解過程中注重基礎知識的傳授和基本技能的培養(yǎng), 同時介紹網(wǎng)頁制作中的相關規(guī)范和標準, 并且注意總結(jié)一些實用的技巧。這種教學方式目的明確、形式生動, 學生帶著問題聽課, 學習興趣和效果明顯提高。

3.2 任務驅(qū)動教學法

任務驅(qū)動法是采用項目化教學方式，即教師不是圍繞知識點去設計每個單獨的案例, 而是針對整個課程設計一個貫穿項目, 這個貫穿項目由若干模塊組成, 并能夠覆蓋課程的所有理論知識。

本課程以一個學習任務(制作一個網(wǎng)站)作為教學主線自始至終貫穿課程, 整個學習活動的展開都圍繞著這條主線進行。為此，我們原創(chuàng)設計了一個綜合性的網(wǎng)站作品“昆明之光”, 盡量將所有章節(jié)的知識點涵蓋進去,在教學過程中不斷地運用“新任務”來引導學生學習，并按照模塊化教學內(nèi)容,層層深入學習, 在機房一邊實際操作一邊講解涉及的新知識,以前學過的舊知識也在這一過程中得以鞏固。

3.3 有效利用網(wǎng)絡多媒體雙向教學環(huán)境

鑒于課程本身操作性的內(nèi)容很多,在機房采用邊講邊練的方式，優(yōu)越性是:(1) 學生人手一臺機器, 遠比教室的大屏幕投影清晰得多；(2) 這種教學環(huán)境實現(xiàn)了“教”與“學”的同步,學生可及時將學到的知識付諸實踐, 在實踐中檢驗知識和技能掌握情況, 出現(xiàn)問題可及時請教教師；(3) 學生在練習過程中, 可通過網(wǎng)絡方便、快捷地下載大課講稿、練習素材等學習資源, 提高學習效率。

3.4 設計配套的上機實驗，加強實踐能力

4 實施三位一體的考核方式

5 結(jié)束語

通過項目法，以設計學習任務(開發(fā)一個網(wǎng)站)為教學主線貫穿整個教學活動，再輔助課外網(wǎng)絡教學系統(tǒng)，有效解決了“學習內(nèi)容多、課時少”的突出矛盾。在教學過程中提出并踐行了基于“在做中學”的教學理念，有效解決了學生缺乏創(chuàng)新能力，動手能力差、重理論、輕實踐的困難局面，激發(fā)了學生的學習興趣和成就感。在實際教學過程中針對不同的知識點進行了合理的教學案例設計，理論聯(lián)系實際，取得了很好的教學效果。

學生從自己搜集素材、加工處理素材、到能夠綜合使用多種軟件進行設計、開發(fā)網(wǎng)站，不僅培養(yǎng)和提高了學生的信息處理能力，而且極大地提高了學生學習的興趣，學生在“做中學”，學習非常有成就感，而成就感進一步激發(fā)了學生內(nèi)在的學習動力。通過設計、開發(fā)網(wǎng)站也培養(yǎng)了學生解決問題的能力與創(chuàng)新精神，而且在社會能力方面，鍛煉了溝通交流的能力，以及團隊協(xié)作和組織管理的能力，總的來說提高了學生的數(shù)字媒體設計與制作水平。

[1] 尹玉菡, 楊萬軍. 非計算機專業(yè)《網(wǎng)頁設計制作》課程教學設計與實踐[J]. 遼寧師專學報.2010,12(1):44-45.

[2] 戚爽. “Dreamweaver 網(wǎng)頁制作”課程的教學研究[J]. 長春理工大學學報，2010,5(12):169-170.

[3] 汪迎春. 高職網(wǎng)頁設計課程任務驅(qū)動教學設計與實踐[J].計算機時代，2010(6):45-47.

[4] 丁海燕.《網(wǎng)頁設計與制作》課程設計、特色與培養(yǎng)目標[J].云南大學學報，2009,31(1):223-226.

[5] 王秀麗，陳瓊，寧正元.網(wǎng)頁設計與制作[M].北京:清華大學出版社，2006.

[6]丁海燕.“網(wǎng)頁設計與制作”教學實踐與實驗教學設計[J]. 云南大學學報，2012，34(2)：327-330.

Research on the Teaching Prachtice of Webpage Design and Preparation

DING Haiyan，YUAN Guowu, LIN Lin

(School of Information Science and Engineering, Yunnan University, Kunming 650091, China)

Webpage design is a strongly practical, innovative and comprehensive digital media design course. How to inspire students’ study interests and complete knowledge and technologies needed by this course in limited class hour has become a teaching question discussed commonly. According to the features of digital media technology application course, design of teaching contents and the teaching methods reform become the key to the success in teaching. According to the actual teaching objects of course Webpage design, this paper analyzed teaching content design in the aspect of image and animation, active webpage, cascading style sheet and comprehensive website case design, and discussed the teaching methods reform too. Practice proves that students’ ability of digital media design and practical ability in webpage design are improved greatly.

webpage design; teaching design; case teaching; digital media design

2014-04-03；修改日期: 2014-06-16

2013年度云南省質(zhì)量工程教學改革研究資金資助項目(X3113008)；云南大學第五批中青年骨干教師培養(yǎng)計劃'專項經(jīng)費資助項目。

丁海燕(1974-), 女,碩士,副教授, 主要從事: 計算機應用、數(shù)據(jù)庫。

G642.0

A

10.3969/j.issn.1672-4550.2015.02.055