基于圖像模型開發(fā)課程網站的探究

姚 琪

摘要:當前精品課程建設處于高速發(fā)展階段,精品課程的建設推動了高等教育教學改革的發(fā)展。精品課程的建設開發(fā)周期短,高校需要尋找一種高效的課程開發(fā)模式。文章主要研究利用圖像模型開發(fā)課程網站,該方式便于教師自主開發(fā)課程網站,便于學校大規(guī)模開展課程建設。

關鍵詞:圖像模型;精品課程;課程網站;網站制作

精品課程的建設主要包括兩個方面:一是課程資源建設,二是課程網站建設。課程資源建設是精品課程的核心;課程網站建設是資源的展示平臺,是推進器、催化劑。沒有充實的、富有特色的課程資源,精品課程建設將無從談起,但沒有網站的精美加工,再好的資源也將缺失表現力,無法被瀏覽者所理解。精品課程從立項到建設完成,時間緊、任務重,采用快速高效的課程開發(fā)模式建設課程網站是所有高校追求的目標。

一、精品課程網站建設現狀

精品課程要求具有五個一流,即一流教師隊伍、一流教學內容、一流教學方法、一流教材、一流教學管理,這不僅是針對課程資源建設,更是對網站制作者的考驗。經歷幾年的發(fā)展,主要有以下幾種開發(fā)形式:

1.采用系統(tǒng)平臺制作課程網站

目前市場有很多精品課程開發(fā)平臺,快速、高效、簡單易用的特點被眾多高校所追捧。但隨著高校課程建設的深入,缺乏特色、創(chuàng)新成為采用平臺建設網站的弊病,所有采用同系統(tǒng)制作的網站千篇一律,不同學科的重點內容無法得到有效展示。

2.聘請網絡公司制作課程網站

課程建設團隊的教師大部分時間需要處理課程資源內容,并且對于網站制作也不專業(yè),聘請網絡公司制作網站逐步取代采用平臺開發(fā)課程。這樣的網站優(yōu)點是制作精美、有特色、技術含量高。但是缺點也很快暴露,由于公司技術員不懂得教學結構的安排,欄目的設計、后期的維護修改等成為最大的問題。

3.教育技術人員制作課程網站

教育技術人員精通網站技術,又熟悉教學設計和教學方法,關鍵是對精品課程建設的要求和指標有較為深入的研究,在某些方面可以指導教師如何更為合理地建設精品課程,因此請教育技術人員制作課程網站是最佳選擇。但是由于各高校建設的課程門數多,人員缺乏、精力不夠、影響其本職工作等都成為最大的障礙。

從以上課程建設的形式可以看出各有利弊,高校需要尋找一種更為便捷、有效、適合教師自主開發(fā)課程網站的方式,也便于高校今后開展大規(guī)模的課程建設。經過多年的實踐探索,發(fā)現利用圖像模型建設課程網站是一種行之有效的方式。

二、基于圖像模型建設課程網站優(yōu)點

1.網站整體設計統(tǒng)一

采用該技術開發(fā)網站是基于圖形的,圖片樣式即是網站的雛形。課程網站主次頁面的外觀效果可直觀顯現,便于將頁面風格統(tǒng)一,尤其是色彩色調和布局的統(tǒng)一。從歷年國家精品課程建設過程看,發(fā)現很多網站的頁面樣式不統(tǒng)一,缺乏整體感,極大影響了精品課程的展示效果。

2.網站精美,不變形

由于精品課程網站有大量的教學資源需展示,網站首頁作為第一張畫面更應以最好的形象展示給觀眾。對比2003年到2009年的精品課程網站,可以明顯看出網站頁面美化度有了很大的提高。利用傳統(tǒng)的網頁技術,很難實現精美效果。但是利用圖片模型來制作網站,將網站的設計思路轉換為平面設計。圖片設計比網站設計要簡單、效果更好、不易變形、更直觀,理念上的轉變、方法上的變革徹底改變了網站內容的呈現效果。

3.網站制作更加簡便、快速

圖片模型一旦設計完成,那么網站制作將變得非常簡單。只需將圖片切割,就可以生成精美的靜態(tài)網頁,而且效果與圖片一致。這時只需填充課程資源即可。

三、基于圖像模型制作網站的流程

1.圖片風格設計

根據課程特色和學科類別設計圖片風格,這是網站制作的原則和基礎。網站風格是給觀眾的第一印象,主要關注一下幾個方面:

(1)結構一致性。網站結構是網站風格統(tǒng)一的重要手段,包括網站布局、文字排版、導航的統(tǒng)一等。首頁模型設計結構是否一致,直接影響其他模型的風格。

(2)色彩的一致性。保持模型主體色彩的一致,只改變局部色塊。這樣做的優(yōu)點是一個獨特色彩的網站會給人留下深刻的印象,因為人的視覺對色彩要比布局更敏感,更容易在大腦中形成記憶符號。比如可選取一兩種主要色彩,幾種輔助色彩。

(3)導航統(tǒng)一。導航是網站的一項重要組成部分,導航設計合理對網站布局的影響很大,而且影響瀏覽整個網站的便捷性。

(4)特別元素的一致性。在網站平面設計中,個別具有特色的元素(如標志、象征圖形等)重復出現,會給訪問者留下深刻印象。比如網站結構在某一點上的變化,由直線變?yōu)閳A弧、暗色點綴的亮色、色彩中的補色等等。

2.圖片色彩設計

(1)色系一致性。采用相同色系設計圖片模型是保持一致性的關鍵。所謂相同色系,是指幾種色彩在360°色相環(huán)上位置十分相近,大約在45°左右或同一色彩不同明度的幾種色彩。

(2)局部色調互補對比。局部運用對比色或互補色來增加變化,避免采用相同色系造成頁面的單調。所謂對比色,是指色相環(huán)相距較遠,大約在100°左右,視覺效果鮮亮、強烈。而互補色則是色相環(huán)上相距最遠的連種色彩,即相距180°,其對比關系最強烈、最富有刺激性,往往使畫面十分突出,特別適合突出重點欄目,但在使用中注意使用的度,否則容易造成色彩的花。

(3)過渡色調和。過渡色包括幾種形式:兩種色彩的中間色調、單色中混入黑、白、灰進行調和以及單色中混入相同色彩進行調和等等。過渡色能夠神奇地將幾種不協(xié)調的色彩統(tǒng)一起來。

3.圖片版面設計

(1)分欄設計。課程網站的內頁布局一般比較簡單,即內頁的一欄式、不等分兩欄式、三欄式版面布局,但因為瀏覽器寬幅有限,一般不宜設計成三欄以上的布局。

(2)導航設計。版面布局中主要是考慮導航、必要信息和正文的布局關系。比較多的情況是采用頂部放置必要的信息,如課程名稱、課程特色及導航條,或將導航條放在左側而右側,這樣的布局結構清晰、易于使用。

4.切割圖片,生成網頁

圖像模型設計完成,即可利用Photoshop切片工具切割頁面,進而生成網頁。

(1)切圖。切圖是網頁設計中非常重要的一環(huán),它是我們標明哪些是圖片區(qū)域,哪些是文本區(qū)域的重要步驟。另外,合理的切圖還有利于加快網頁的下載速度。

(2)生成WEB頁面。對已經切割完成的圖片進行“另存為WEB頁”操作即可生成靜態(tài)課程網站框架,圖片自動會生成一個html頁面和images文件夾。

5.內容填充

資源內容的填充位置和顯示大小在設計模型時已經設計完成,因此內容的填充樣式要符合網站框架結構,否則會直接破壞前期設計的網站結構,影響整體風格,對此我們通常采用以下幾種方式:

(1)將文檔轉換為swf文件。在精品課程建設中,大量的文字內容放入網頁顯示會出現排版異常、字體混亂情況,并且影響頁面美觀。常用的方法就是將Word、PPT等文檔內容轉化為swf文檔后,插入課程網站。這樣做的優(yōu)點是字體、排版不變形,節(jié)約版面設計,保持頁面美觀,并且可對文檔進行滾動、放大、縮小操作。這也是在精品課程建設過程中對大批量網絡文檔用的最多的方式。

(2)將文檔轉化為網頁。將文檔另存為web頁,將此單獨作為課程網站的一個頁面。這對于單個簡單排版的文檔可以這樣處理。如果文檔中有圖表、圖片等復雜內容,則不適合采用此種方式。

(3)復制文字到網頁。對于只有少量文字且簡單排版文檔的可先復制到記事本中,然后再復制到課程網頁中。如果直接從文檔復制到網頁則也會出現排版異?，F象。

(4)特殊效果文字顯示。對于網站頁面中需有特殊效果的文字插入,可通過互聯網絡查找相關特效代碼,然后將整個特效代碼拷貝到相應的網頁代碼位置即可。

6.細節(jié)調整

為使課程網站整個風格統(tǒng)一,尤其是文本內容格式統(tǒng)一,這就要用到CSS樣式表。利用CSS樣式表,可方便對整個網站主體文字的批量修改。因此充分利用CSS樣式表,一方面可實現網站主體文字風格的統(tǒng)一,另一方面便于今后快速高效修改文字格式。

四、利用圖像模型開發(fā)網站的注意點

1.模型像素設計

每個網站的大小(寬*高)都要符合瀏覽器的大小,頁面過大的網頁瀏覽器放不下,不方便瀏覽者觀看內容,有時無法凸顯特色欄目。因此頁面大小在設計模型時就需要注意,通常頁面大小為1024*768像素。

2.切片方式

對模型的切片轉換到網頁中是一個個拼接的表格,因此如何切片,先后順序,切片的多少都會直接影響到后面課程資源內容的填充,因為表格極易被破壞。建議事先規(guī)劃,保留PSD原圖,多次嘗試。

3.CSS樣式表設計

利用樣式表便于網站形成統(tǒng)一風格,樣式表的設計可通過Dreamwaver進行設計,形成單獨的文件,分別套用給每個網頁,這樣便于今后統(tǒng)一修改。

4.冗余代碼清除

設計者在制作頁面完成后,最好執(zhí)行清理冗余代碼操作,這樣可使網頁執(zhí)行效率更高,占用容量更小。

參考文獻:

[1] 教育部.關于啟動高等學校教學質量和教學改革工程精品

課程建設工作的通知(教高[2003]1號)[EB/OL].http://

www.jpkcnet.com/new/zhengce/Announces_detail.asp?Announces_ID=13.

[2] 姚恩全.“三位一體”的精品課程建設范式研究[J].四川師

范大學學報(社會科學版),2006,(6):56-60.

[3] 楊世勇.對國家精品課程建設的思考[J].現代教育科學,

2004,(11):19-20.

[4] 王玲華.國家精品課程支持技術問題分析[J].濟南職業(yè)學

院學報,2006,(3).