基于中職計算機技能競賽的網站建設培養探究

陳春蓉

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

[關鍵詞] 計算機技能競賽 網站建設 網頁切割

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

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

一、前臺設計技能培養探究

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

(一)網頁美工繪制訓練

1.欣賞優秀網站,確定網站風格

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

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

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

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

2.確定網站功能,設計布局結構

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

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

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

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

1.分析整體結構,按方向切割

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

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

2.應用圖片背景平鋪技術

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

3.聯系競賽實際情況,靈活變通

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

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

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

(四)其它功能的規劃

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

二、后臺設計技能培養探究

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

(一)數據結構設計訓練

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

(二)數據錄入訓練

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

(三)后臺管理功能實現

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

三、綜合訓練與總結

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

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

參考文獻:

[1]如何開發一個專業的企業WEB網站.

[2]網頁配色之黃金分割法.

[3]網頁藝術設計.