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

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

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

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

1.1圖像和動(dòng)畫(huà)的教學(xué)設(shè)計(jì)

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

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

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

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

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

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

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

2教學(xué)方法

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

2.1案例教學(xué)

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

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

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

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

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

(1)學(xué)生人手一臺(tái)機(jī)器，遠(yuǎn)比教室的大屏幕投影清晰得多;

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

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

2.4設(shè)計(jì)配套的上機(jī)實(shí)驗(yàn)，加強(qiáng)實(shí)踐能力

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

3實(shí)施三位一體的考核方式

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

4結(jié)束語(yǔ)

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

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