網(wǎng)頁設(shè)計與制作教學(xué)研究

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

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

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

1.1圖像和動畫的教學(xué)設(shè)計

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

1.2動態(tài)網(wǎng)頁的教學(xué)設(shè)計

靜態(tài)網(wǎng)頁的制作可以用軟件直接生成，這是教材的主要內(nèi)容，但同時在教材中也要引入動態(tài)網(wǎng)頁制作的概念，擴展學(xué)生的知識面。實現(xiàn)動態(tài)網(wǎng)頁需要綜合運用網(wǎng)絡(luò)、數(shù)據(jù)庫、編程和軟件工具，可以擴展學(xué)生的思維，培養(yǎng)解決問題、綜合運用各種知識的能力。動態(tài)網(wǎng)頁涉及站點的配置與管理，Web服務(wù)器的安裝與配置，服務(wù)器端編程語言ASP、PHP、JSP等內(nèi)容，這些內(nèi)容在網(wǎng)頁設(shè)計初學(xué)階段不必深入展開，因此筆者在教學(xué)中設(shè)計了一個功能簡單的留言本，僅由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ā)學(xué)生以后深入學(xué)習(xí)動態(tài)網(wǎng)頁編程的興趣，明白網(wǎng)頁設(shè)計與制作不僅是藝術(shù)設(shè)計的體現(xiàn)，也是編程技術(shù)、多媒體技術(shù)、網(wǎng)絡(luò)技術(shù)等的綜合應(yīng)用。

1.3層疊樣式表CSS的教學(xué)設(shè)計

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

1.4設(shè)計綜合案例體現(xiàn)“任務(wù)驅(qū)動”教學(xué)方法

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

2教學(xué)方法

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

2.1案例教學(xué)

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

2.2任務(wù)驅(qū)動教學(xué)法

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

2.3有效利用網(wǎng)絡(luò)多媒體雙向教學(xué)環(huán)境

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

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

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

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

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

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

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

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

4結(jié)束語

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

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