面向藝術類本科生的《網頁設計》課程教學與實踐

修毅　劉正東　洪穎　邵熹雯

摘要：《網頁設計》是我校為藝術類本科生開設的計算機應用基礎類課程。本文總結了多年來《網頁設計》課程的教學與實踐，從教學內容，教學方式和手段，實踐教學，教學評價，教材編寫，多媒體和網絡資源建設等方面，全面地闡述了《網頁設計》課程的教學模式和體系，為今后計算機應用基礎教學改革、提高藝術類本科生教學質量奠定基礎。

關鍵詞：網頁設計；藝術類本科生；教學改革；實踐教學

中圖分類號：G642.41 文獻標志碼：A 文章編號：1674-9324（2016）15-0124-02

從2010年開始，我校為藝術類本科生開設了《網頁設計》課程作為在計算機基礎課程體系中的主選課程。作為新開設的課程，教學內容單一，無法覆蓋課程的全部知識體系；教學內容以知識點堆砌為主，缺乏在設計方法上的提煉和升華，無法滿足藝術類本科生計算機創意能力培養的需要；除了一些配合知識點的小型課堂練習外，沒有為學生提供以創意為核心的綜合性實踐環節，無法為學生的未來專業學習和職業成長提供幫助；沒有對學習效果和能力做出全面和客觀評價的有效方式[1]。這些問題亟待在教學研究和實踐中加以解決。

為此，本課程以“面向藝術類學科，面向藝術類本科生”為理念，以“引導創意，面向應用，促進融合”為教改原則[2]，利用綜合技術和手段，引導藝術類學生進行計算機藝術創意；改善教學內容和教學方法，實現面向應用的理念；加強對藝術類學生的工程概念和流程的傳授，使學生感受到工程與藝術融合的魅力。

一、課程內容與實踐

本課程在教學內容與方法、教學實踐環節和教學評價等方面做了深入而系統的研究，取得了很好的效果。

1.教學內容。教學以課堂案例為載體，利用多媒體課件和軟件操作完成。課程案例貫穿于整個教學過程，每個案例對應重要的知識點。在案例講解后，通過課堂練習和課后練習鞏固所學的知識。整個教學過程分為四個階段：第一，課堂案例導入與講解階段。首先，教師展示案例最終結果，并進行簡單分析，指出案例所用的知識點。然后，采用案例驅動的教學模式，逐步展開，推演出案例最終結果。教師可根據案例難易程度和知識點重要性，在案例推演過程中，對相應部分進行深入剖析和闡述。第二，知識點的深入和擴展分析階段。針對案例中重要的知識點，通過小型輔助案例進行分析和擴展。要求學生在課堂練習和課后學習中，根據各自的想象去拓展該案例，為后續自主命題設計與實踐打下良好基礎。第三，課堂練習實施階段。教師給出實現練習案例的具體要求，讓學生結合課堂案例的實現方式，獨立完成一個或幾個課堂練習。針對本章節所涉及的案例和課堂練習，以及相關知識點，設計與制作方法，創意效果進行總結，完成教學任務。第四，目標設定及發展階段。在課程的最后階段，也是教學實踐階段，要求每位學生獨立完成網站的設計與制作。教師為網站設定技術框架和規模，學生自主選題，收集與整理素材，并在規定的時間內完成從創意、設計和制作的全部工作。

在這個過程中，學生設定自己的目標，支配自己的時間，主導自己的創作過程。教師可以有針對性地對學生的技術問題給予個性化的指導和幫助，對內容設定，創意設計給予點評，引導學生達到最終目標。

2.教學方法和手段。在教學過程中，根據課程特點和學生認知特點，采用多種教學方法和手段，與教學內容構成一個有機整體。第一，案例驅動教學。在教學中，將案例與教學主題緊密結合，穿插教學的全過程。根據教學主題和案例特點，將案例分成了課堂精講型、課堂演示型和課后練習型等，三種類型相互配合，相互協調，形成了張弛有度的教學節奏和良好教學效果。第二，目標驅動教學。在教學實踐活動中，目標驅動教學采用學生自主選題、獨立設計制作來實現。教師設定技術框架，留給學生充分的空間和時間，學生根據選題，進行創意、設計和制作。教師擔當技術支持和評價任務，學生是主導者和實踐者。學生完成了從知識學習者向作品創意者、設計者和制作者的轉變。第三，多媒體教學。豐富的多媒體素材為課堂教學提供了有效的支持。課件中內容全面準確、教學素材豐富；教師利用多媒體課件和系統操作，達到了相得益彰的教學效果。第四，利用網絡平臺開展教學。多媒體教學課件、電子教案、案例、教學大綱、教學日歷、案例素材和效果等資料放在網絡教學平臺上供學生們下載和瀏覽。通過網絡提供更多的課外資源，擴充了學生學習空間和互動方式，取得了良好的教學效果。

3.實踐教學。實踐教學活動旨在最大限度地為學生營造自由創作空間，激發學生的創意靈感，發掘學生的創意潛能。本課程教學實踐由“設定要求，自主選題，自由創意，開發制作”四個部分組成。第一，設定要求。設定要求包括創意要求和技術框架。創意要求主要體現在創意原則上，作品必須是原創設計。技術框架包括兩個方面：一是根據本課程知識體系，提出設計制作網站的技術方法，給出可替代的技術方法，給學生提供多項選擇。二是規定網站的規模。對于學習過更多相關知識的學生，可以不局限于這個技術框架，鼓勵學生積極嘗試新方法和手段。第二，自主選題。在自主選擇網站主題時，提倡學生面向學科應用，面向實際需要進行選題。如服裝服飾類，或者藝術設計類、媒體傳播類等為網站主題。選題時，要考慮對網站內容的理解和把握程度，對相關文本、圖形圖像和媒體信息的收集、歸納和整理的水平。第三，自由創意。藝術類本科生具有自主創意的優勢，要發掘學生的專業潛能，利用所學計算機技術把創意效果展現出來。做到主題鮮明，內容完整，色彩搭配美觀，頁面構圖簡潔合理等。同時，考慮要創意與網站主題的密切關系，將創意和內容統一起來。第四，開發制作。按照網站工程設計制作的流程開展工作。首先，對各種信息進行分類和整理，確定網站欄目和網頁的數量。其次，進行網站頁面創意，把創意通過計算機網頁設計技術表現出來。最后，通過技術方法和手段，完成網站的設計和制作。通過開展教學實踐環節，學生更全面系統地掌握了課程內容和探究式的學習方法，煥發了主動學習的熱情，提高了計算機素養和綜合應用能力。

4.教學評價。教學評價可以歸納為主觀與客觀的結合，過程與結果綜合。對課堂教學評價更多依賴于過程評價和客觀評價，如通過查閱日常作業，可以了解對案例中知識的理解；通過結業考試客觀試題的評價，確定學生知識和技巧的掌握。對教學實踐環節評價由教師主觀判斷實現，考查學生的創意和實踐應用水平。

在教學實踐環節中，制定了“網頁設計與制作—實操要求及評分標準”，規范教師對學生作品的評價，保證真實性和客觀性。每個學生一個選題，一個網站，一個評價考核結果，避免出現學生“搭便車”現象。

二、課程資源建設

1.教材。為貫徹本課程的教學理念和原則，確定“完善知識體系，引導藝術創意，面向實際應用，促進藝工融合”為寫作原則[3]，體現集創意、應用和工程為一體，技能、知識與平臺相融合的教學和實踐模式。在教材案例選取上，案例都具有良好的創意和應用背景，創意風格多樣化，色彩、圖案和布局的多種組合；案例取材于多種行業和領域，覆蓋面廣。在講解知識點時，著重提煉頁面藝術創意方法和技巧，做到方法多樣，手段實用，效果良好。在教材內容選取上，向網頁設計與制作的最新技術看齊，全面引入CSS技術和CSS+Div布局技術，歸納出“上中下”和“左中右”兩種基本方式，并提供一個CSS+Div布局的商業網站設計和制作過程。在教材內容表現上，采用新穎、直觀和多樣化方法，突出教學重點和難點，引入“布局圖”，幫助學生理解和把握頁面布局，將表格布局、CSS+Div布局、框架布局和AP Div布局等多種方式反復向學生講授，實現學生掌握和靈活運用布局技術的教學目標。在教材框架安排上，以知識演進為目標，以應用案例為載體，采用可視化操作為主導，代碼實現為從屬的方式，既形象直觀，又深入剖析技術原理。以網站客戶端技術為主體，以網站服務器技術為輔助，為學生全面理解網站設計與制作技術打下堅實基礎。

2.多媒體資源與網站。為配合教師課堂授課，提供了每個章節的電子教案，全部教學案例素材和效果，練習案例素材和效果；為滿足學生課下學習需要，錄制了全部課堂教學案例的教學視頻，形成了完整的多媒體教學資源。本課程還開發了網頁設計精品課網站，向學生提供全天候的互動式學習平臺。網站提供了全部多媒體教學資源，以及學生自主學習的各種資源，如技術專欄、參考資料、在線測試、在線問答、電子書下載、優秀網站賞析和軟件下載等；搭建了學生網站作品的展示欄目，將綜合教學實踐環節中學生制作的全優作品進行實景演示。

三、結論

本課程采用全新的理念和切實可行的教改原則，在教學模式與實踐環節中，在教材寫作、多媒體和網站建設中加以貫徹和落實，突破了《網頁設計》課程建設的固有模式，取得了全方位的教學成果。

經過多年教學與實踐，形成了完善和系統的網頁設計教學體系和模式，幫助學生構建完整的知識體系，掌握創意技能和技巧；借助于綜合性教學實踐環節，極大提高了藝術類本科生的計算機創意和應用能力；以良好的評價體系保證教學評價的有效性。

在教材編寫中，進一步完善和固化教學和模式，教材不僅知識體系完整、內容翔實，而且創意技能實用、面向實戰，與多媒體素材和精品課網站構成了立體化課程資源體系。

參考文獻：

[1]邵熹雯.藝術類專業網頁設計課程教學實踐與研究[J].紡織服裝教育，2013，5（28）：420-422.

[2]修毅，洪穎，邵熹雯.藝術類本科生計算機基礎課程體系的構建與實踐[J].紡織服裝教育，2013，5（28）：377-379.

[3]修毅.《網頁設計與制作》教材的編寫[J].紡織服裝教育，2014，3（29）：258-260.