中職網(wǎng)頁前臺設(shè)計(jì)專業(yè)的教學(xué)探索

陳鋼金

【摘要】 當(dāng)今，網(wǎng)頁已和每位網(wǎng)民的生活息息相關(guān)，能否把握好教學(xué)方向并教會學(xué)生設(shè)計(jì)界面美觀、內(nèi)容充實(shí)、瀏覽速度快、使用方便的頁面，對廣大中職教師來說既是責(zé)任、更是挑戰(zhàn)。

【關(guān)鍵詞】 中職 網(wǎng)頁 Dreamweaver Photoshop flash JavaScript

【中圖分類號】 G712 【文獻(xiàn)標(biāo)識碼】 A 【文章編號】 1992-7711（2014）03-114-01

網(wǎng)頁的前臺設(shè)計(jì)屬于設(shè)計(jì)的范疇，因其所涉及的理論知識不深奧，市場前景廣闊，且工資待遇也比一般的平面設(shè)計(jì)要高得多，因此在中職學(xué)校開設(shè)網(wǎng)頁前臺設(shè)計(jì)專業(yè)具有可行性和推廣性。筆者從事中職網(wǎng)頁前臺設(shè)計(jì)專業(yè)教學(xué)已經(jīng)有三年之久，一直在這個專業(yè)上輔導(dǎo)學(xué)生參加省市技能比賽，并且指導(dǎo)的學(xué)生也曾多次在比賽中賽出佳績。下面我就談?wù)劸W(wǎng)頁前臺設(shè)計(jì)專業(yè)的教學(xué)目標(biāo)、教學(xué)方向、教學(xué)方法及相關(guān)學(xué)習(xí)資料。希望可以給廣大熱愛網(wǎng)頁設(shè)計(jì)或從事網(wǎng)頁教學(xué)的朋友們一些幫助。

一、明確教學(xué)目標(biāo)

作為中職生，普遍存在文化基礎(chǔ)相對薄弱的問題，所以在教學(xué)中一定要先拋開復(fù)雜的代碼分析。從學(xué)生感興趣、易理解、能就業(yè)方面入手，制定切實(shí)可行的教學(xué)目標(biāo)。

能設(shè)計(jì)出美觀大方、合乎邏輯、界面友好的頁面設(shè)計(jì)草圖。能借助PS軟件對設(shè)計(jì)出的草圖進(jìn)行文件生成，生成跟設(shè)計(jì)草圖一致的網(wǎng)頁P(yáng)SD效果圖，并科學(xué)完成切圖操作。能用flash軟件制作出網(wǎng)頁中常見的動畫（尤其是banner動畫）。能通過Dreamweaver 軟件合理布局站點(diǎn)，并把相關(guān)媒體進(jìn)行有效的整合，生成與PSD效果圖一致的網(wǎng)站頁面。在網(wǎng)頁中加入常見的JavaScript代碼，給HTML網(wǎng)頁添加動態(tài)功能，從而實(shí)現(xiàn)響應(yīng)用戶的常見操作。

二、科學(xué)開設(shè)相關(guān)課程

網(wǎng)頁前臺設(shè)計(jì)要開設(shè)什么課程？每門課程有什么作用？這些課程如何整合？成為了學(xué)習(xí)者共同關(guān)心的問題，因?yàn)檫@關(guān)系到學(xué)習(xí)到的技能能否和市場接軌的問題。

（一）美術(shù)基礎(chǔ)與網(wǎng)頁賞析。任何美的東西均有其原理所在，學(xué)生通過對素描和色彩的學(xué)習(xí)，美感得到了增強(qiáng)，設(shè)計(jì)出的網(wǎng)頁效果圖有了理論依據(jù)，更符合大眾的品味，加上欣賞過成千上萬個優(yōu)秀網(wǎng)站的界面，對自身設(shè)計(jì)網(wǎng)頁P(yáng)SD效果圖奠定了理論基礎(chǔ)。

（二）Photoshop軟件生成網(wǎng)頁P(yáng)SD效果圖。Phtoshop軟件在圖像合成與圖像制作領(lǐng)域中功能強(qiáng)大，我們不但能使用該軟件對網(wǎng)頁中的圖片進(jìn)行處理，而且能對制作出的網(wǎng)頁P(yáng)SD效果圖進(jìn)行切圖操作，切出的小圖片文件可以保存為JPG或gif格式，對于網(wǎng)頁中的較多背景圖像，我們只需切成一個象素寬、一個象素高或?qū)捀呔鶠橐幌笏氐男D像即可，大大減少了網(wǎng)站占用的空間，提高了網(wǎng)頁下載瀏覽速度。

（三）flash軟件制作出網(wǎng)頁中常見的動畫。Flash軟件生成的二維動畫，因其占用空間小等原因，在網(wǎng)上大為流行。對于學(xué)好網(wǎng)頁中的flash動畫，一是要熟練掌握好工具箱中工具的使用，達(dá)到利用工具繪制簡單圖形的能力；二是通過舉一反三的方法，掌握好制作幀幀動畫、形變動畫、運(yùn)動動畫、引導(dǎo)層動畫、遮罩層動畫等原理與制作方法。可以多瀏覽網(wǎng)頁中的flash動畫，然后進(jìn)行分析再制作。

（四）Dreamweaver軟件整合網(wǎng)頁元素生成網(wǎng)頁文件。Dreamweaver軟件可以把文字、聲音、視頻、動畫等媒體整合在一個網(wǎng)頁之中。學(xué)好此軟件可以分成為以下幾步：找一本較為基礎(chǔ)的書或一部視頻教程，進(jìn)行Dreamweaver軟件操作的學(xué)習(xí)，在學(xué)習(xí)中注重html、css代碼與生成的網(wǎng)頁元素的對應(yīng)；利用Dreamweaver的代碼視圖手寫代碼并注重與設(shè)計(jì)視圖中元素的對應(yīng)關(guān)系，主要目的是為了深入學(xué)習(xí)html代碼與css代碼；學(xué)習(xí)DIV+CSS網(wǎng)頁布局方法，為自己的網(wǎng)頁設(shè)計(jì)生涯開啟標(biāo)準(zhǔn)化的大門。

（五）JavaScript代碼的套用。JavaScript代碼對中職生來說較為復(fù)雜，但是很多JavaScript代碼在網(wǎng)絡(luò)上都可以免費(fèi)下載，學(xué)生僅需掌握其結(jié)構(gòu)及其套用方法，從而使自己開發(fā)出的網(wǎng)頁達(dá)到動態(tài)交互即可。

三、教學(xué)中的一些教學(xué)方法

（一）多鼓勵學(xué)生。德國教育家第斯多惠說：“教學(xué)藝術(shù)的本質(zhì)不在于傳授的本領(lǐng)，而在于激勵、喚醒、鼓舞。”教師想方設(shè)法讓學(xué)生能喜歡上這門課程，可以多拿一些成功的人或事激勵學(xué)生，對于一些不認(rèn)真聽課的學(xué)生，更要多多關(guān)心與談心，做到在思想上感情上贏得學(xué)生。

（二）把自己的講課思路記錄或錄制下來。講課講得慢，條理清楚，讓大多數(shù)學(xué)生能跟上老師的思路，這已是老生常談。但作為一門專業(yè)課，我建議，授課老師可以借助記事本軟件把自己的講課要點(diǎn)采用邊講邊敲的方式記錄下來，或是通過屏幕錄像專家軟件錄制自己的講課視頻，然后發(fā)到每一位學(xué)生的電腦上，這樣學(xué)生就可以在練習(xí)時跟上老師的思路，增強(qiáng)學(xué)習(xí)的信心。

（三）請教學(xué)科中的“專家”來幫忙。如今是一個網(wǎng)絡(luò)時代，網(wǎng)絡(luò)中的資源非常豐富，各類專家均或多或少在網(wǎng)上發(fā)布視頻教程，各位朋友可以多去學(xué)習(xí)；另可以多參閱網(wǎng)頁前臺的網(wǎng)上論壇，取長補(bǔ)短、拓寬視野不斷提升自身的技能水平。

[ 參 考 文 獻(xiàn) ]

[1]《2009年北風(fēng)網(wǎng)李炎恢講師Xhtml+css視頻教程+項(xiàng)目視頻》.

[2]站長好站（http：//www.zzhaoz.com/shipin/photoshop/）中劉明軒講師的《PS網(wǎng)頁設(shè)計(jì)視頻教程》.

[3]72建站網(wǎng)（http：//www.72jz.com/）中李開坤的《JavaScript視頻教程》.

[4]《2010年北風(fēng)網(wǎng)資深講師李炎恢老師FLASH視頻教程》.