網頁設計創作教學實踐初探

陳氚

摘 要：網頁設計是操作性和綜合性都很強的技能課程，它具有實踐性、操作性、綜合性很強的特點，對學生動手技能與理解力均的要求很高。為了提高本課程的教學效果，必須不斷改革與充實教學內容，注重突出學生人才培養的實踐性、應用性。具體教學中采用由淺入深循序漸進演示案例操作與培養學生的實際動手能力結合，圓滿達到教學效果。

關鍵詞：網頁設計與制作；教學實踐

一、施教視對象調整課程手段，明確教學目標

網頁設計是藝術類專業的專業應用技能課，與傳統的其他學科相比具有鮮明的自身特點：①具有很強的操作性和綜合實踐性，特別強調學生的操作能力和學以致用的綜合實踐能力。②理論教學服務于實踐教學，實踐教學反過來又作用于理論教學，任何一個細節都是為創作網頁整體服務的，在教學過程依據學生實驗環節反映，每次增加實驗演示環節，通過做某一個操作加深理解理論知識，使學生從易學易忘到學會即用的程度。

例如：藝術類學生對HTML語句不理解，我多次在Dreamweaver界面，在設計窗口與拆分窗口切換演示與講解以下內容的實際意義

我的作品展示

讓學生理解這段語句“”僅在瀏覽時顯示標題的，而“我的作品展示“語句才是在頁面顯示的，反復讓學生在這兩個語句更換不同的內容，看到瀏覽是顯示的結果，學生通過實踐揭開HTML語句的神秘感，增加學習積極性，加深標記符語句理解與運用。

二、靜態網頁增加動感效果，激發學生探究熱情

（1）網頁設計與制作是綜合實踐性很強的課程，無論是網頁界面設計、網頁編程、網頁藝術欣賞的教學，要讓學生成為教與學的主要部分，引導與激發學生探究熱情，讓學生變被動學習為主動學習，從而成為教與學的主體。 藝術類學生喜好動感美感，在實際教學中正確采用Potoshop設計具有立體感的導航圖片，在Dreamweaver利用插入菜單的圖像對象—鼠標經過圖像，分別插入原始圖像（圖片1）和鼠標經過圖像（圖片2）并且直接鏈接導航條要超鏈接頁面一氣呵成。

通過利用Potoshop為Dreamweaver做前期準備，同時溫習鞏固前學習軟件在后期學習的應用的關聯性，同時初賞靜與動的聯系加強學習主動性。

（2）通常主頁面均有圖片播放的動畫效果，在Flash利用幾組圖片分別采用⑴Flash模板創建相冊（固有動畫效果），⑵Flash采用導入圖片更改大小變形，利用圖層和插入幀并創建補間動畫等實現圖片在一定時間播放動畫，在Dreamweaver利用插入媒體—SWF插入主頁或頁面合適處，瀏覽時頁面不間斷播放動畫（圖片3）。

圖片3

三、精心準備案例項目，從宏觀上進行教學設計：

將實際案例引入教學，每個重要知識點均與實際應用結合起來，融創新思維培養學習方式、實踐案例教學于課程教學中。經典賞析、知識講授、課堂練習、實踐輔導、創新操作等不同教學方法靈活運用，在充分利用現代多媒體教學、網上學習、交流溝通的基礎上，采用第一課堂與第二課堂結合，學研相結合，將現代科學技術充分應用于教學改革之中。

在進行教學時，教師對每個學習情景都設計好案例，然后進行在上課的時候明確任務、教師演示、學生設計、展示評價等。在展示和對比中發現問題、發現認識缺陷；用碰撞形成共識，在課堂交流和評價中，發現學習中的問題，以此引起學生間的認識性爭議，學生在思維碰撞中形成共識，是最好的教學方式。

四、課程教學的進一步探討

本課程主要講述靜態網頁制作部分，對于動態網頁、色彩搭配、flash動畫、圖形圖像處理技術布墊與選擇應用。前導課程可以開設Potoshop、Flash等，為本課程奠定課程知識儲備。

計算機工科專業學生利用數據庫動態實現公告欄，我在教學中思考運用Dreamweaver插入菜單的標簽——HTML標簽—頁面元素——語句讓藝術類學生在頁面實現滾動公告欄效果，有一定實踐效果。

網頁設計作為一門實踐性較強的課程，在教學的方法上應有別于一般的基礎理論課程.提升學生的主動性，通過對教學內容及實驗內容的合理安排對學生進行正確引導并提高學生實際動手能力是其中的關鍵.我們對該課程的改革力求提高學生分析和解決問題的能力，通過教學實踐的探索，這種教學方法極大地提高了學生學習的積極性，取得了良好的教學效果。

參考文獻：

[1]主編：黃舒梅，高海軍，總主編：肖亮.新概念網頁設計，中國傳媒大學出版社.

[2]宇帆，王方，何翠平.網頁設計與網站建設，人民郵電出版社.

（作者單位：武漢傳媒學院）

資助：武漢傳媒學院科技處。