網頁設計與制作教學研究

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

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

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

1.1圖像和動畫的教學設計

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

1.2動態(tài)網頁的教學設計

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

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

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

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

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

2教學方法

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

2.1案例教學

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

2.2任務驅動教學法

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

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

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

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

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

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

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

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

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

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

4結束語

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

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