網頁設計與制作教學研究

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了網頁設計與制作教學研究范文，希望能給你帶來靈感和參考，敬請閱讀。

1網頁設計與制作課程教學內容設計

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

1.1圖像和動畫的教學設計

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

1.2動態網頁的教學設計

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

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

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

1.4設計綜合案例體現“任務驅動”教學方法

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

2教學方法

采用案例教學法和任務驅動法，并有效利用多媒體雙向教學環境。

2.1案例教學

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

2.2任務驅動教學法

任務驅動法是采用項目化教學方式，即教師不是圍繞知識點去設計每個單獨的案例，而是針對整個課程設計一個貫穿項目，這個貫穿項目由若干模塊組成，并能夠覆蓋課程的所有理論知識。本課程以一個學習任務(制作一個網站)作為教學主線自始至終貫穿課程，整個學習活動的展開都圍繞著這條主線進行。為此，我們原創設計了一個綜合性的網站作品“昆明之光”，盡量將所有章節的知識點涵蓋進去，在教學過程中不斷地運用“新任務”來引導學生學習，并按照模塊化教學內容，層層深入學習，在機房一邊實際操作一邊講解涉及的新知識，以前學過的舊知識也在這一過程中得以鞏固。

2.3有效利用網絡多媒體雙向教學環境

鑒于課程本身操作性的內容很多，在機房采用邊講邊練的方式，優越性是:

(1)學生人手一臺機器，遠比教室的大屏幕投影清晰得多;

(2)這種教學環境實現了“教”與“學”的同步，學生可及時將學到的知識付諸實踐，在實踐中檢驗知識和技能掌握情況，出現問題可及時請教教師;

(3)學生在練習過程中，可通過網絡方便、快捷地下載大課講稿、練習素材等學習資源，提高學習效率。

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

為了使學生在很短時間內抓住學習的重點，掌握網頁制作的方法和技能，原創設計了11個上機實驗，知識點覆蓋教學內容的80，期中和期末的實驗有一定的綜合性，而且對學生已掌握的知識和技能有所超越，能使學生產生興趣，激發學生的求知欲，從而使學生主動學習。鼓勵學生用團隊協作的方法完成復雜程度較高的開發任務，鍛煉學生的團隊協作能力，為日后實際工作奠定基礎。

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

為了使學生重視平時的課堂教學和上機練習，培養學生的動手和創新能力，激發學生內在的學習動力，本課程實施“上機作業+上機考試+網站開發”三位一體考核方式由平時上機作業成績(20)、期中上機考試(20)和期末個人網站作品(60)，并給出作品的量化評價指標。

4結束語

通過項目法，以設計學習任務(開發一個網站)為教學主線貫穿整個教學活動，再輔助課外網絡教學系統，有效解決了“學習內容多、課時少”的突出矛盾。在教學過程中提出并踐行了基于“在做中學”的教學理念，有效解決了學生缺乏創新能力，動手能力差、重理論、輕實踐的困難局面，激發了學生的學習興趣和成就感。在實際教學過程中針對不同的知識點進行了合理的教學案例設計，理論聯系實際，取得了很好的教學效果。學生從自己搜集素材、加工處理素材、到能夠綜合使用多種軟件進行設計、開發網站，不僅培養和提高了學生的信息處理能力，而且極大地提高了學生學習的興趣，學生在“做中學”，學習非常有成就感，而成就感進一步激發了學生內在的學習動力。通過設計、開發網站也培養了學生解決問題的能力與創新精神，而且在社會能力方面，鍛煉了溝通交流的能力，以及團隊協作和組織管理的能力，總的來說提高了學生的數字媒體設計與制作水平.

作者：丁海燕 袁國武 林玲 單位：云南大學