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

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

摘要：分析了傳統(tǒng)教學(xué)模式與培養(yǎng)應(yīng)用型人才模式對網(wǎng)頁設(shè)計與制作的教學(xué)改革的影響，提出為培養(yǎng)應(yīng)用型人才的改革方向，并以兩個專業(yè)、四個班的學(xué)生做為實驗樣本，對本年度教學(xué)內(nèi)容做出了一些改革，得出了在培養(yǎng)應(yīng)用型人才時該課程內(nèi)容的改革方案和注意事項，指出為培養(yǎng)服務(wù)地方應(yīng)用型人才，網(wǎng)頁設(shè)計與制作的課程改革勢在必行。

關(guān)鍵詞：傳統(tǒng)教學(xué)；學(xué)即能用；CSS

互聯(lián)移動終端的大面積推廣，使得掌握網(wǎng)頁制作技術(shù)的人才在各個行業(yè)里都成為必不可少的需求；同時，地方普通高校為社會服務(wù)的使命感在不斷增強(qiáng)，如何培養(yǎng)出“學(xué)即能用”的人才，使之在短時間內(nèi)掌握主流的網(wǎng)頁設(shè)計技術(shù)，提高站點訪問量，是這門課程課堂教學(xué)效果進(jìn)步的體現(xiàn)。

一、技術(shù)背景與課堂教學(xué)要求

（一）Internet發(fā)展歷程

Internet經(jīng)歷了從Web1.0到Web3.0的迅猛發(fā)展。Web1.0是靜止、單向、被動的；Web2.0則為用戶開設(shè)了主動權(quán)，使得用戶和網(wǎng)站可行雙向信息互動；Web3.0提升了用戶的主動權(quán)，用戶可對頁面的多種元素（顯示、色彩、像素、框架等）按需設(shè)置，訂制專屬的功能模塊，整合數(shù)據(jù)資源，適用于電腦、手機(jī)、PDA等多終端平臺定制。

（二）傳統(tǒng)的網(wǎng)頁設(shè)計與制作課程內(nèi)容

一般情況下，高校開設(shè)的網(wǎng)頁設(shè)計課程從教學(xué)內(nèi)容上可劃分為兩大塊：1.相關(guān)知識介紹。網(wǎng)站的概念、基本元素及頁面等相關(guān)知識的介紹。2.應(yīng)用軟件的使用。介紹使用最多的Dreamweaver系列網(wǎng)頁制作工具，使學(xué)生掌握布局（表格、層、框架、模板等）、超級鏈接、表單和幾種特效。隨著互聯(lián)網(wǎng)的全面推廣和“學(xué)即能用”的需求，以上內(nèi)容已不能滿足互聯(lián)網(wǎng)時代與時俱進(jìn)的特點。最關(guān)鍵的問題在于：課堂學(xué)到的知識是否馬上就能得到應(yīng)用，是否與目前社會上專業(yè)的網(wǎng)頁制作公司的技術(shù)規(guī)格保持一致。因此，本門課程的改革勢在必行。

二“、服務(wù)于地方”教學(xué)內(nèi)容的改革

（一）教學(xué)內(nèi)容改革

內(nèi)容改革是課程改革的首要環(huán)節(jié)。關(guān)于什么是關(guān)鍵內(nèi)容，什么是次要內(nèi)容，筆者走訪了本地專業(yè)網(wǎng)頁設(shè)計公司中企動力的設(shè)計總監(jiān)馬女士，通過對她的訪談，了解到時下主流的網(wǎng)頁設(shè)計公司所涉及到的技術(shù)規(guī)范，對本校現(xiàn)階段的教學(xué)內(nèi)容做了必要的調(diào)整，簡化了表格布局頁面、框架設(shè)計等已被淘汰的陳舊技術(shù)的授課內(nèi)容，有選擇地介紹了網(wǎng)頁交互特效及表單的應(yīng)用，加強(qiáng)了網(wǎng)頁美化工具、HTML語言及CSS的學(xué)習(xí)內(nèi)容。改革后的課程主要分為六大模塊：網(wǎng)頁和網(wǎng)站的基礎(chǔ)知識、網(wǎng)頁美化工具（Photoshop或者Fireworks）、HTML語言、網(wǎng)頁開發(fā)工具的介紹、DIV+CSS、動態(tài)網(wǎng)頁技術(shù)。首先，通過具體的例子闡明網(wǎng)頁、網(wǎng)站的定義，頁面的布局類型（主要是盒模型）、整體造型及配色方案的相關(guān)知識；其次，介紹網(wǎng)頁美化工具圖片處理工具（Photoshop或Fireworks）的使用，學(xué)生可用其設(shè)計頁面元素，加強(qiáng)頁面的視覺效果與美觀性，提升站點的專業(yè)度；再次，介紹HTML的基本語法結(jié)構(gòu)和語句，使學(xué)生熟練掌握其主要標(biāo)簽的使用（傳統(tǒng)的教學(xué)模式對這一部分的內(nèi)容有所忽略）。實踐證明，學(xué)生若不熟悉HTML的語法構(gòu)成，學(xué)習(xí)DIV+CSS這一主流的網(wǎng)頁布局模式就會相當(dāng)吃力。當(dāng)然，對于非專業(yè)學(xué)生而言，學(xué)習(xí)一門語言，即便是文本標(biāo)記語言，由于其本身對計算機(jī)系統(tǒng)相關(guān)知識的欠缺，授課會比較困難，學(xué)生也學(xué)得辛苦，但這又是一個必要的過程，其所占用的時間比較長，需要設(shè)計大量實例，反復(fù)練習(xí)才能掌握。之后介紹開發(fā)工具，重點是要理解頁面的代碼模式和設(shè)計模式，而DIV+CSS則是本門課程的重頭戲，由于學(xué)生對代碼有種天生的恐懼，所以，在建立CSS時又以開發(fā)工具建立為主，修改程序為輔。最后簡單提及動態(tài)網(wǎng)頁技術(shù)。由于課時限制（32節(jié)），本課程主要講授靜態(tài)網(wǎng)頁制作。靜態(tài)網(wǎng)頁技術(shù)分為傳統(tǒng)技術(shù)和新技術(shù)。傳統(tǒng)課堂教學(xué)內(nèi)容重點是布局表格、框架、模板等，而目前主流的網(wǎng)頁制作公司則主要應(yīng)用DIV+CSS。所以，對于陳舊的技術(shù)簡單介紹即可，而把DIV+CSS作為布局的主要技術(shù)進(jìn)行講解。由于這些內(nèi)容需要學(xué)生對代碼部分比較熟悉，所以，在課時中增加了相應(yīng)的HTML的基本語法結(jié)構(gòu)和語句的介紹，并對主要標(biāo)簽的使用熟練掌握。

（二）實際授課效果

筆者今年為設(shè)計和思政兩個專業(yè)的學(xué)生授課。設(shè)計專業(yè)的學(xué)生已經(jīng)開設(shè)了PS，有一定的設(shè)計基礎(chǔ)，所以，課程內(nèi)容改革中的第一部分可以省略；思政專業(yè)的學(xué)生沒有圖片處理基礎(chǔ)，筆者在授課過程中有意加強(qiáng)了這部分內(nèi)容，講授簡單的圖片處理方法和文字特效工具。實踐證明，學(xué)生有追求新知識的欲望，基本能做到學(xué)以致用，并反饋到最終的作品中。往屆學(xué)生的作品更像電子小報，而今年通過課程內(nèi)容改革的學(xué)生作品雖不完美，但在形式內(nèi)容上更接近Internet的正規(guī)網(wǎng)站，教學(xué)效果良好。針對我校提出建立培養(yǎng)服務(wù)于地方應(yīng)用型人才的本科院校，傳統(tǒng)的網(wǎng)頁設(shè)計與制作課程必須響應(yīng)時代號召，更新教學(xué)內(nèi)容與方法。本文僅供從事該課程教學(xué)的教師參考。

參考文獻(xiàn)：

[1]吳延水,王津.項目教學(xué)在網(wǎng)頁設(shè)計與制作中的應(yīng)用[J].電腦知識與技術(shù),2010,6(15):4037-4038.

作者：侯敏 單位：西安文理學(xué)院