中職網頁前臺設計專業的教學探索

陳鋼金

【摘要】 當今，網頁已和每位網民的生活息息相關，能否把握好教學方向并教會學生設計界面美觀、內容充實、瀏覽速度快、使用方便的頁面，對廣大中職教師來說既是責任、更是挑戰。

【關鍵詞】 中職 網頁 Dreamweaver Photoshop flash JavaScript

【中圖分類號】 G712 【文獻標識碼】 A 【文章編號】 1992-7711（2014）03-114-01

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

一、明確教學目標

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

能設計出美觀大方、合乎邏輯、界面友好的頁面設計草圖。能借助PS軟件對設計出的草圖進行文件生成，生成跟設計草圖一致的網頁PSD效果圖，并科學完成切圖操作。能用flash軟件制作出網頁中常見的動畫（尤其是banner動畫）。能通過Dreamweaver 軟件合理布局站點，并把相關媒體進行有效的整合，生成與PSD效果圖一致的網站頁面。在網頁中加入常見的JavaScript代碼，給HTML網頁添加動態功能，從而實現響應用戶的常見操作。

二、科學開設相關課程

網頁前臺設計要開設什么課程？每門課程有什么作用？這些課程如何整合？成為了學習者共同關心的問題，因為這關系到學習到的技能能否和市場接軌的問題。

（一）美術基礎與網頁賞析。任何美的東西均有其原理所在，學生通過對素描和色彩的學習，美感得到了增強，設計出的網頁效果圖有了理論依據，更符合大眾的品味，加上欣賞過成千上萬個優秀網站的界面，對自身設計網頁PSD效果圖奠定了理論基礎。

（二）Photoshop軟件生成網頁PSD效果圖。Phtoshop軟件在圖像合成與圖像制作領域中功能強大，我們不但能使用該軟件對網頁中的圖片進行處理，而且能對制作出的網頁PSD效果圖進行切圖操作，切出的小圖片文件可以保存為JPG或gif格式，對于網頁中的較多背景圖像，我們只需切成一個象素寬、一個象素高或寬高均為一象素的小圖像即可，大大減少了網站占用的空間，提高了網頁下載瀏覽速度。

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

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

（五）JavaScript代碼的套用。JavaScript代碼對中職生來說較為復雜，但是很多JavaScript代碼在網絡上都可以免費下載，學生僅需掌握其結構及其套用方法，從而使自己開發出的網頁達到動態交互即可。

三、教學中的一些教學方法

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

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

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

[ 參 考 文 獻 ]

[1]《2009年北風網李炎恢講師Xhtml+css視頻教程+項目視頻》.

[2]站長好站（http：//www.zzhaoz.com/shipin/photoshop/）中劉明軒講師的《PS網頁設計視頻教程》.

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

[4]《2010年北風網資深講師李炎恢老師FLASH視頻教程》.