陳鋼金

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[ 參 考 文 獻(xiàn) ]

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

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

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

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