陳春蓉

[摘要] 我校是2008年由兩所國家級與一所省級重點中專名校合并而成的新校,是目前福建省規(guī)模最大、辦學條件最好的國家級重點中等職業(yè)學校。然而,能否在省及省以上職業(yè)技能大賽取得優(yōu)異成績,已成為衡量職校辦學水平的重要指標之一。這就要求我校在各級競賽上加強學生的職業(yè)技能培養(yǎng),爭取在各級大賽中脫穎而出。本文以2009年全國計算機技能比賽規(guī)程為指導方向,對網(wǎng)站建設參賽項目的學生培養(yǎng)方案進行了探究及闡述。

[關(guān)鍵詞] 計算機技能競賽 網(wǎng)站建設 網(wǎng)頁切割

當今世界,教育同產(chǎn)業(yè)的結(jié)合愈來愈密切。近年來,我國把大力發(fā)展職業(yè)教育作為振興經(jīng)濟、增強國力的戰(zhàn)略選擇。而舉辦全國職業(yè)院校技能大賽就是職業(yè)教育深化改革、加快發(fā)展所取得的成果的一次大檢閱,是我國教育工作的一項重大制度設計與創(chuàng)新。隨著全國職業(yè)教育技能大賽聲望的不斷攀升,參加省及省以上職業(yè)大賽所取得的成績已成為衡量職業(yè)學校辦學水平的重要指標之一。而筆者擔任我校計算機技能比賽的“園區(qū)網(wǎng)互聯(lián)及網(wǎng)站建設”指導老師,為此,基于中職計算機技能競賽,本文進行了網(wǎng)站建設技能培養(yǎng)的相關(guān)探究。

網(wǎng)站建設是一門綜合性技術(shù),它涉及到圖像設計、動畫設計、網(wǎng)頁設計、數(shù)據(jù)庫設計、程序設計等知識。而中職學生的認知及技術(shù)能力是較為有限,從美工設計、數(shù)據(jù)庫設計到簡單程序設計,無一不是艱辛的學習歷程。面對高手如林的全國性技能競賽,要在有限的時間內(nèi)培養(yǎng)網(wǎng)站建設參賽選手,就必須經(jīng)過較系統(tǒng)的技能培養(yǎng)及訓練。競賽規(guī)程中規(guī)定網(wǎng)站建設項目有兩名參賽選手。因此,必須對兩名選手進行合理分工,真正做到術(shù)有專攻,使其各顯其能,達到最佳組合狀態(tài)。以2009年規(guī)程作為指導方向,根據(jù)網(wǎng)站功能的直觀分析,大體上可分成前、后臺兩大功能:前臺主要完成網(wǎng)頁繪制、首頁設計、模板設計功能。學生必須熟練掌握網(wǎng)頁美工圖繪制、網(wǎng)頁切割、網(wǎng)頁鏈接及其它功能。而后臺則完成數(shù)據(jù)庫設計、數(shù)據(jù)錄入、后臺管理功能。學生必須熟練掌握數(shù)據(jù)結(jié)構(gòu)合理設計、字段名規(guī)范化定義、文字錄入、記錄增刪改、用戶權(quán)限判斷等功能。下面就前、后臺分工安排及技能培養(yǎng)方面進行探究。

一、前臺設計技能培養(yǎng)探究

如何在分析網(wǎng)站主題需求后,短時間內(nèi)完成高質(zhì)量的設計作品,這對前臺設計者來講是場嚴峻挑戰(zhàn),而在現(xiàn)場臨時創(chuàng)作設計是完全不可行的,這就要求參賽者必須經(jīng)過網(wǎng)頁繪制的嚴格訓練。

(一)網(wǎng)頁美工繪制訓練

1.欣賞優(yōu)秀網(wǎng)站,確定網(wǎng)站風格

要完成較經(jīng)典美觀的作品,學生在沒有設計基礎(chǔ)前,并沒有設計靈感,光憑空想象是空洞、單調(diào)的。學生先要懂得欣賞優(yōu)秀網(wǎng)站,對網(wǎng)站風格、內(nèi)容進行分類。這時可按任務分解,將網(wǎng)站分解成導航條、分欄版式、欄目設計任務。了解各項任務的設計特點后,然后再建立綜合頁面設計概念,最后自行設計作品。在繪圖時有兩點網(wǎng)頁配色設計技巧,可作為學生繪制網(wǎng)頁時的指導原則:

一是網(wǎng)頁取色。色彩搭配一定要合理,給人以和諧愉快的感覺。同一個頁面的顏色不要超過四種,眼花繚亂,容易產(chǎn)生視覺疲勞。顏色對比不要反差太大,網(wǎng)頁版面不是美術(shù)作品,要避免形式對內(nèi)容的喧賓奪主。一般來說,適合于網(wǎng)頁標準色的顏色有藍色,黃/橙色,黑/灰/白色三大系列色。在顏色的搭配上,有幾種比較經(jīng)典的方案:紅/黃/白;藍/白;紅/灰/白;藍/橙/白;黃/灰/白。在確定主色調(diào)后,本頁面的其他色調(diào)最好能在調(diào)色板中選取對角線上的色號,配比效果較協(xié)調(diào)。

二是黃金分割法。設計網(wǎng)頁時,網(wǎng)頁背景與前景的字體配色不容忽視,文字加底色能夠起到很好的突出作用,在視覺變化上相當于圖片的作用。如果背景顏色與字體顏色的搭配不合理,就會使網(wǎng)頁效果大打折扣。如果背景色與字體色的對比度太大,就會顯得太刺眼;如果對比度太小,就會使網(wǎng)頁風格變得過于沉悶。黃金分割法的基本原理是把背景與前景的顏色對比度調(diào)節(jié)在0.618比例附近的位置上。

經(jīng)過網(wǎng)頁繪制訓練,要求賽前每組準備兩至三幅風格迥異的網(wǎng)頁美工圖,比賽時首先分析網(wǎng)站主題,再從備選的網(wǎng)頁美工圖中挑選一幅較貼近主題風格的圖并在此圖基礎(chǔ)上進行修改設計。在比賽過程中,每幅圖都要求學生熟練繪制,做到半小時內(nèi)基本完成網(wǎng)頁繪制工作。因此,在平時訓練中就必須要求學生對每幅圖反復練習,做到操作嫻熟,在比賽中決不能因猶豫或思考而浪費時間。

2.確定網(wǎng)站功能,設計布局結(jié)構(gòu)

網(wǎng)站設計需要明確和熟悉設計的對象和構(gòu)成的要素,網(wǎng)站內(nèi)容一般由視聽元素和版式設計兩個方面構(gòu)成。視聽元素主要包括:文本、背景、按鈕、圖標、圖像、表格、顏色、導航工具、背景、動態(tài)影像等,網(wǎng)頁設計者所要考慮的就是如何以感人的形式把它們放進頁面這個“大畫布”里。

然而,對于參賽者而言,競賽時網(wǎng)站主題、功能需求及網(wǎng)頁素材已被確定,即視聽元素及版式已被基本確定,留給參賽者網(wǎng)站設計的發(fā)揮空間并不多。因此,更重要的是訓練學生分析需求文檔、選取素材的能力,從而確定網(wǎng)頁應涵蓋的功能欄目,這對后臺設計者而言也是重要的建庫元素。這就要求之前選中的網(wǎng)頁美工圖,必須能根據(jù)網(wǎng)頁功能需求,靈活地修改欄目的布局,做到每個欄目實現(xiàn)一個功能或一類功能。并盡量采用縱向邏輯法,將相近的內(nèi)容從上至下排列,而不是從左向右排列。這樣可充分利用首頁,讓首頁增多從上至下閱讀的可能。

(二)熟練網(wǎng)頁切割技術(shù),做到圖像最少、最小

網(wǎng)站要設計好,網(wǎng)頁就應該做得越小越好,瀏覽速度也較快。而給網(wǎng)頁瘦身最有效方法就是網(wǎng)頁中的圖片數(shù)達到最少,而且圖片文件大小達到最小。網(wǎng)頁美工圖繪制好后,我們運用切割技術(shù)可將圖片輸出成網(wǎng)頁文件,并進行處理及再次切割,從而使網(wǎng)頁中的圖片做到最少最小。好的網(wǎng)頁切割技術(shù),要求欄目中無論增加多少內(nèi)容,都不能出現(xiàn)裂線現(xiàn)象,或網(wǎng)頁整體結(jié)構(gòu)被破壞等現(xiàn)象,可運用如下切割方法:

1.分析整體結(jié)構(gòu),按方向切割

首先,判斷網(wǎng)頁設計的直觀整體結(jié)構(gòu),分成左右結(jié)構(gòu)或上下結(jié)構(gòu)。顯示標尺欄,將參考線拖到邊沿并緊貼,為嚴密緊貼,可將圖像放至較大后精確對齊。再用切刀工具,按結(jié)構(gòu)切割,只切左右,或只切上下。切割后輸出網(wǎng)頁。

接著,選取有復合結(jié)構(gòu)的圖片再次切割,也同樣按方向切割。切割后導出成另一個存在同級目錄的網(wǎng)頁文件。這時按四步驟進行網(wǎng)頁合并。第一步:刪除復合結(jié)構(gòu)圖片,根據(jù)圖片大小,將當前單元格大小定義為與被刪圖片一致的寬高。第二步:設置單元格垂直方向頂端對齊。第三步:將生成的表格復制粘貼到當前單元格中,形成表格嵌套。第四步:刪除無用冗余的圖片。但在刪除冗余圖片時,如果圖片較小,刪除后會自動擴大行距。這時僅需切換到代碼中,將生成的空格代碼?刪除即可。

2.應用圖片背景平鋪技術(shù)

要使欄目內(nèi)容增加時不產(chǎn)生裂線現(xiàn)象,最好的設計方法是應用圖片背景平鋪技術(shù)。一般對欄目按方向切割成上中下或左中右結(jié)構(gòu)。最后對中間部分再次切割成細小的一條圖片,然后定義成背景平鋪。也可以將左右兩邊的邊框同樣切割成細小的圖片,定義兩端邊框小圖為背景平鋪。

3.聯(lián)系競賽實際情況,靈活變通

要將網(wǎng)頁圖片真正切割到位,是一項龐大而繁瑣的工程。而實際比賽中時間有限,根本無法按部就班地仔細切割。因此,在訓練過程中,可先讓學生將網(wǎng)頁切割到位后,將位置大小記下來。在比賽過程中則僅將有用的圖片切割下來,然后在網(wǎng)頁中建立表格,通過表格的嵌套及圖片的插入完成作品,這樣工作效率較高。

(三)設計網(wǎng)頁模板,保持網(wǎng)站整體性

要保持網(wǎng)站設計的整體性,頁面設計風格必須要求一致。而在比賽中,參賽選手沒時間進行新頁面設計,這時前臺設計者可以對首頁文件進行簡單修改,再另存為模板,供網(wǎng)站的各鏈接頁面、甚至后臺管理頁面應用。模板的應用十分方便,對模板修改時,僅需更新站點,則所有應用該模板的頁面都能得到快速更新,減少了頁面多、更新難的現(xiàn)象。也有些設計者不采用模板,而選取框架或include代碼的文件調(diào)用,來實現(xiàn)后臺管理頁面。其實無論哪種方法,只要能保證網(wǎng)頁的完整性,學生易上手、好掌握,皆為可行。

(四)其它功能的規(guī)劃

前臺設計人員不僅要完成網(wǎng)頁的繪制與切割,還必須完成首頁顯示、標題與導航鏈接頁面、flash動畫設計。另外,首頁通常還包含有用戶登錄功能、投票功能、網(wǎng)站點擊數(shù)、訪問數(shù)的統(tǒng)計等。因此,前臺設計者的工作量較大,對設計者要求也較高,訓練強度也相對較大。而后臺設計人員相比之下,工作量較小,要求也較低。因此,指導老師可依據(jù)工作強度,對人員合理安排,并安排部分任務相互協(xié)作。

二、后臺設計技能培養(yǎng)探究

近幾年的網(wǎng)站建設競賽試題中,首頁的數(shù)據(jù)基本上從數(shù)據(jù)庫中獲取,較少采用靜態(tài)圖片或靜態(tài)文字顯示。因此,后臺設計者的數(shù)據(jù)創(chuàng)建是整個網(wǎng)站的信息源泉。

(一)數(shù)據(jù)結(jié)構(gòu)設計訓練

分析網(wǎng)站主題及需求文檔,在同一個數(shù)據(jù)庫內(nèi),合理創(chuàng)建表數(shù)據(jù)結(jié)構(gòu)。一般網(wǎng)站主題已能確定一個較主要的數(shù)據(jù)表信息。除了主題數(shù)據(jù)表外,用戶表、新聞/公告表、投票表、留言表、短信息表等,都是網(wǎng)站的常見構(gòu)成數(shù)據(jù)。因此,在平時訓練中應多搜集不同主題的網(wǎng)站,不斷反復地訓練數(shù)據(jù)表的定義,提高數(shù)據(jù)結(jié)構(gòu)設計的能力。此外,字段名的定義也應有統(tǒng)一的命名規(guī)范,不可以隨心所欲地自定義字段名,這樣會對前臺設計者數(shù)據(jù)的引用產(chǎn)生混亂,嚴重地影響到了作品完成效率。

(二)數(shù)據(jù)錄入訓練

數(shù)據(jù)表創(chuàng)建后,如果沒有較豐富的數(shù)據(jù)信息,網(wǎng)頁仍然是空洞的。因此,如果要求學生在短時間內(nèi)錄入較多真實而合法數(shù)據(jù),這就需要學生練習打字速度及復制粘貼應用的速度。

(三)后臺管理功能實現(xiàn)

后臺管理職能主要是系統(tǒng)的維護、用戶管理及數(shù)據(jù)的增加、刪除、修改。學生應熟練掌握數(shù)據(jù)表的增刪改功能頁面,強化每個頁面的完成速度。同時在后臺中還有常見的功能是判斷用戶權(quán)限,實現(xiàn)不同權(quán)限的數(shù)據(jù)維護功能。這些功能的實現(xiàn),一般可通過程序代碼判斷轉(zhuǎn)移或顯示。該功能的實現(xiàn)對學生而言,是較難的知識點,則需要一段時間的訓練及學習過程。此外,后臺的頁面為了達到網(wǎng)站整體性要求,還必須套用前臺提供的網(wǎng)頁模板,并在后臺頁面中的表格及文字大小顏色的定義上,要求與網(wǎng)頁風格色調(diào)一致。

三、綜合訓練與總結(jié)

前后臺的技能培養(yǎng)雖然各有側(cè)重,但比賽時需要密切配合與協(xié)助,所以還必須做綜合訓練。比賽時在一小時內(nèi),要求選手各司其職,前臺設計網(wǎng)頁美工圖及模板,后臺設計數(shù)據(jù)結(jié)構(gòu)及輸入數(shù)據(jù)。接下來應實現(xiàn)數(shù)據(jù)共享,配置 FTP并將文件發(fā)布上傳到服務器中,并應用文件時時更新。為了數(shù)據(jù)的順利共享,在訓練時,就必須注意文件目錄的規(guī)范化管理,每個選手必須有自己獨立的目錄結(jié)構(gòu),否則文件管理混亂,不易更新,還有可能出現(xiàn)文件重名或覆蓋丟失現(xiàn)象。因此,建議在站點根目錄設置前、后臺獨立目錄,而共用的數(shù)據(jù)庫、連接代碼、公共程序代碼、圖片素材也都應創(chuàng)建獨立目錄,同時規(guī)范目錄名及文件名的定義,方便互相調(diào)用時的管理與更新。前后臺雙方的配合需要一段時間的綜合訓練,以達到默契,減少間詢及變更時間,真正做到高效率、高質(zhì)量。

由于全國計算機技能競賽開展的年限并不長,對各級指導參賽的老師來說,每次訓練都是一次不斷探索與總結(jié)的過程。筆者針對中職學生的現(xiàn)況,闡述了基于中職計算機技能競賽的網(wǎng)站建設培養(yǎng)方案,真誠地希望通過本文做到拋磚引玉,加強校際間交流溝通并得到中專職業(yè)教育界同行們的關(guān)注及指點。

參考文獻:

[1]如何開發(fā)一個專業(yè)的企業(yè)WEB網(wǎng)站.

[2]網(wǎng)頁配色之黃金分割法.

[3]網(wǎng)頁藝術(shù)設計.