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

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

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

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

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

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

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

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

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

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

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

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

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

（二）實(shí)際授課效果

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

參考文獻(xiàn)：

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

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