平面設(shè)計(jì)課程教學(xué)網(wǎng)站的建設(shè)

摘要:校園網(wǎng)在各級(jí)高校的普及為網(wǎng)絡(luò)教學(xué)提供了有利條件，建立課程網(wǎng)站成為教學(xué)改革的一項(xiàng)重要內(nèi)容。闡述了平面設(shè)計(jì)課程網(wǎng)站建設(shè)的必要性、網(wǎng)站的定位與結(jié)構(gòu)。介紹了運(yùn)用圖像處理軟件與網(wǎng)頁設(shè)計(jì)軟件相結(jié)合的網(wǎng)站設(shè)計(jì)方法，分析了網(wǎng)站設(shè)計(jì)中的關(guān)鍵性技術(shù)，并強(qiáng)調(diào)了網(wǎng)站更新維護(hù)的重要性。

關(guān)鍵詞:平面設(shè)計(jì);課程網(wǎng)站;網(wǎng)頁設(shè)計(jì);布局;模板;流媒體

中圖分類號(hào):TP393文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):1009-3044(2009)24-6944-03

The Construct of Course Website of Graphic Design

MA Qiu-fang，ZHANG Bo-lun

(Qingdao Huanghai Vocational College， Info-Engineering Faculty，Qingdao 266427， China)

Abstract: Network-based teaching is possible with the popularity of campus network. One of the most important elements is establishment of website in teaching reform. It is focus on the necessity， location construction of the website. The principle in the website design with image processing software and web page design software is introduced in detail. The keys such as update of the website are also given in the paper.

Key words: graphic design;course website;web design;layout;template;streaming media

1 網(wǎng)站建設(shè)的背景及意義

計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)以及多媒體技術(shù)的快速發(fā)展推動(dòng)了教學(xué)模式和教學(xué)手段的變革。我校的校園網(wǎng)已經(jīng)建立，由于教學(xué)信息資源的匱乏，難以發(fā)揮其在教學(xué)科研中應(yīng)有的作用，建立相應(yīng)課程的教學(xué)網(wǎng)站勢(shì)在必行。

教學(xué)網(wǎng)站是通過網(wǎng)絡(luò)表現(xiàn)教學(xué)內(nèi)容和實(shí)施教學(xué)活動(dòng)的綜合性教學(xué)系統(tǒng)，借助于多媒體和流媒體技術(shù)，為學(xué)生提供一個(gè)自主學(xué)習(xí)的環(huán)境。

平面設(shè)計(jì)課程是我校高職藝術(shù)類專業(yè)的一門主干課程。根據(jù)實(shí)際需要構(gòu)建平面設(shè)計(jì)課程的教學(xué)網(wǎng)站，有助于激發(fā)學(xué)生的學(xué)習(xí)興趣，提高課程的教學(xué)效果和影響力。

2 網(wǎng)站的前期準(zhǔn)備

2.1 需求分析

平面設(shè)計(jì)課程教學(xué)網(wǎng)站的瀏覽者是教師和學(xué)生，需要提供課程的教學(xué)大綱、電子教案及案例素材等教學(xué)資源供學(xué)習(xí)者使用，提供課后習(xí)題以檢查學(xué)習(xí)效果。此外，網(wǎng)站還應(yīng)該實(shí)現(xiàn)師生之間的互動(dòng)，形成一個(gè)有信息反饋和實(shí)時(shí)或非實(shí)時(shí)交流的系統(tǒng)。

2.2 風(fēng)格定位

課程網(wǎng)站的風(fēng)格應(yīng)當(dāng)美觀大方、簡(jiǎn)潔明了，界面的設(shè)計(jì)體現(xiàn)友好和諧、方便用戶操作。風(fēng)格取決于布局和色彩。

網(wǎng)頁布局結(jié)構(gòu)大致可分為“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、封面型等[1]。無論采取何種結(jié)構(gòu)的網(wǎng)頁，都應(yīng)遵循突出主要內(nèi)容、主次分明這一原則。本站點(diǎn)的網(wǎng)頁采用拐角型結(jié)構(gòu)，正文部分縱向分隔為兩欄，這是一種規(guī)范理性的分隔方式，類似于報(bào)刊的版式。

網(wǎng)站的頁面主色調(diào)為海藍(lán)色，海藍(lán)色令人想到獨(dú)立和創(chuàng)造，代表著美好的未來。通過調(diào)整透明度和飽和度對(duì)色彩進(jìn)行變淡或加深漸變等的處理，產(chǎn)生新的海藍(lán)色的近似色彩，整個(gè)網(wǎng)頁看起來色彩統(tǒng)一，又不乏層次和變化。頁面中還使用了淡灰色的背景圖像，給人以遐想的空間，對(duì)于協(xié)調(diào)頁面的均衡也起著很大的作用。

2.3 方案設(shè)計(jì)

2.3.1 網(wǎng)站欄目及欄目簡(jiǎn)介

根據(jù)需求分析，平面設(shè)計(jì)課程網(wǎng)站需要建立以下幾個(gè)欄目:

(1)課程簡(jiǎn)介。簡(jiǎn)要介紹了平面設(shè)計(jì)課程的性質(zhì)和說明，使用的教材及參考教材。

(2)課程建設(shè)。本欄目具體介紹了課程負(fù)責(zé)人和主講教師的基本信息，課程的教學(xué)目的、教學(xué)設(shè)計(jì)思想和教學(xué)手段，課程的教學(xué)特色，考核方式和課程評(píng)價(jià)。

(3)教案與視頻。該欄目提供了平面設(shè)計(jì)課程的CAI課件下載，重點(diǎn)章節(jié)的教師授課現(xiàn)場(chǎng)視頻以及說課形式的課程整體介紹視頻，幫助學(xué)生更有效的學(xué)習(xí)或復(fù)習(xí)。

(4)學(xué)習(xí)指南。網(wǎng)絡(luò)教學(xué)不同于課堂教學(xué)，不能只提供教案課件，還需要提供學(xué)習(xí)指南指導(dǎo)學(xué)生的自主性學(xué)習(xí)[2]。本欄目包括本課程的知識(shí)結(jié)構(gòu)、教學(xué)大綱、各章節(jié)學(xué)時(shí)分配，各章節(jié)的主要內(nèi)容和重點(diǎn)難點(diǎn)以及課程進(jìn)度表。

(5)實(shí)驗(yàn)實(shí)訓(xùn)。該欄目提供了平面設(shè)計(jì)課程的實(shí)踐性環(huán)節(jié)，包括平面設(shè)計(jì)的精彩案例制作步驟以及所需素材的下載，用于拓展知識(shí)面。

(6)習(xí)題與試卷。包括各章節(jié)的相關(guān)習(xí)題、歷年考題以及平面設(shè)計(jì)師認(rèn)證考試的模擬試題，方便了學(xué)習(xí)者的自我檢測(cè)。

(7)學(xué)生作品。選取優(yōu)秀的學(xué)生作品和大賽獲獎(jiǎng)作品進(jìn)行展示。此欄目不僅能夠激發(fā)學(xué)生的積極性，又展示了課程的教學(xué)效果，對(duì)學(xué)校的教學(xué)起到宣傳作用。

(8)討論區(qū)。在討論區(qū)學(xué)生可以進(jìn)行學(xué)習(xí)交流、資源共享、信息發(fā)布以及作品展示等，該欄目加強(qiáng)了師生之間的聯(lián)系。

2.3.2 網(wǎng)站拓?fù)鋱D

圖1為網(wǎng)站拓?fù)鋱D。

2.3.3 確定設(shè)計(jì)工具

開發(fā)一個(gè)好的課程網(wǎng)站要選擇好開發(fā)工具和開發(fā)技術(shù)，網(wǎng)站的靜態(tài)部分使用Dreamweaver來制作，利用Photoshop設(shè)計(jì)網(wǎng)頁界面和處理圖像，網(wǎng)站的動(dòng)態(tài)交互部分采用ASP和SQL實(shí)現(xiàn)，IIS為系統(tǒng)運(yùn)行服務(wù)器。

3 網(wǎng)站建設(shè)

3.1 設(shè)計(jì)首頁界面

3.1.1 繪制首頁草圖

確定了首頁各項(xiàng)欄目及位置之后，開始設(shè)計(jì)首頁的版面，將首頁做一個(gè)簡(jiǎn)單的規(guī)劃(如圖2所示)，包括導(dǎo)航欄、網(wǎng)站Banner、正文、版權(quán)信息。

3.1.2 首頁效果圖

使用Photoshop制作效果圖，將文件規(guī)格設(shè)置為寬度780像素，高度800像素，分辨率為300像素/英寸。效果圖制作完成后借助參考線進(jìn)行劃分，然后使用切片工具沿參考線切片(如圖3所示)，并將其存儲(chǔ)為Web所用格式，系統(tǒng)則自動(dòng)生成一個(gè)文件夾，保存所有的切片。

需要注意的是:切片時(shí)要按照Dreamweaver表格能實(shí)現(xiàn)的區(qū)域進(jìn)行劃分，切忌切片過于復(fù)雜[1];為了整個(gè)網(wǎng)站風(fēng)格的統(tǒng)一，網(wǎng)站中的其他網(wǎng)頁也采用類似的形式。

3.2 創(chuàng)建站點(diǎn)

在制作網(wǎng)站時(shí)創(chuàng)建一個(gè)本地站點(diǎn)文件夾，這個(gè)文件夾用來存放和管理站點(diǎn)中的所有文件，該文件夾的四個(gè)子文件夾，分別是image、video、courseware、works，分別用來存放網(wǎng)頁的圖片、教學(xué)視頻、電子課件和學(xué)生作品。

啟動(dòng)Dreamweaver新建站點(diǎn)，站點(diǎn)名稱為“平面設(shè)計(jì)課程教學(xué)網(wǎng)站”，本地根文件夾則設(shè)置為上面所建的本地站點(diǎn)。

3.3 網(wǎng)站建設(shè)中的關(guān)鍵點(diǎn)

3.3.1 網(wǎng)頁的布局

網(wǎng)頁的布局方式一般有:表格布局、框架布局及層布局。本站點(diǎn)中的網(wǎng)頁采用表格布局，表格比較容易設(shè)置和定位，方便管理調(diào)用，比較適用于排版統(tǒng)一的網(wǎng)頁[3]。不采用單一層進(jìn)行布局是因?yàn)閷拥慕^對(duì)定位方式導(dǎo)致網(wǎng)頁的穩(wěn)定性不高，層的位置會(huì)跟隨顯示分辨率的變化而移動(dòng)，造成頁面混亂。

3.3.2 模板和庫的使用

由于網(wǎng)站中所有網(wǎng)頁的布局和界面大體一致，在制作和修改網(wǎng)頁時(shí)借助模板減少重復(fù)的工作量。避免了相同部分的輸入，而且在更新網(wǎng)站時(shí)，只需修改模板，系統(tǒng)就能自動(dòng)更新基于這個(gè)模板的所有網(wǎng)頁。

此外還將網(wǎng)頁中的內(nèi)容的許多共性部分(如版權(quán)信息等)定義為庫元素，將其應(yīng)用在每個(gè)頁面需要的地方。與模板類似，當(dāng)相關(guān)信息發(fā)生改變時(shí)，不必每個(gè)頁面都進(jìn)行修改，只需修改庫元素就會(huì)自動(dòng)更新全部網(wǎng)頁。

3.3.3 錨點(diǎn)鏈接

實(shí)驗(yàn)實(shí)訓(xùn)、學(xué)習(xí)指南、學(xué)生作品等網(wǎng)頁的特點(diǎn)是內(nèi)容分類多，但各項(xiàng)包含的內(nèi)容少。如學(xué)生作品分為海報(bào)設(shè)計(jì)、包裝設(shè)計(jì)、書籍封面設(shè)計(jì)等七個(gè)分類，而每一類展示的作品只有八幅，這樣就可以在頁面的右側(cè)設(shè)計(jì)一個(gè)內(nèi)部導(dǎo)航條，為其添加錨點(diǎn)鏈接。

這種設(shè)計(jì)方式是將全部內(nèi)容放置在一個(gè)頁面上，瀏覽時(shí)利用錨點(diǎn)在同一頁面的不同位置進(jìn)行跳轉(zhuǎn)。這樣一來，在瀏覽不同類別的內(nèi)容時(shí)無需打開新的頁面或刷新頁面，提高了瀏覽速度，而且維護(hù)方便，省去大量重復(fù)代碼，減少了文件容量。

3.3.4 流媒體

教案與視頻頁面需要將教師授課視頻上傳至網(wǎng)站，考慮到傳輸網(wǎng)絡(luò)的帶寬、觀看者等待時(shí)間和視頻分辨率等因素，將所有視頻統(tǒng)一轉(zhuǎn)換為Flv格式。Flv的全稱是Flash video，是一種流媒體的格式，邊下載邊播放，形成的文件較小，加載速度快，分辨率適中。

3.3.5 以學(xué)生為中心

在網(wǎng)站的規(guī)劃和實(shí)現(xiàn)方面都堅(jiān)持以學(xué)生為中心。例如:針對(duì)不同水平的學(xué)生提供不同的教學(xué)進(jìn)度和學(xué)習(xí)目標(biāo)，并配合難易度不同的課件、教學(xué)視頻以及課后習(xí)題;在討論區(qū)設(shè)置教師答疑版塊，集中解決學(xué)生學(xué)習(xí)中遇到的問題;設(shè)置反饋意見電子信箱，收集學(xué)生的意見和建議;網(wǎng)站欄目和內(nèi)部導(dǎo)航條的劃分符合學(xué)生的認(rèn)知心理等，真正實(shí)現(xiàn)了由以教師為中心向以學(xué)生為中心的轉(zhuǎn)變。

3.3.6 網(wǎng)站的更新

一個(gè)好的課程網(wǎng)站不僅需要建設(shè)，更需要不斷更新維護(hù)。許多高校都建立了課程網(wǎng)站，但是建成后沒有后期的更新維護(hù)，成了“一建了之”的工程，降低了網(wǎng)站的生命力，沒有達(dá)到促進(jìn)教學(xué)的最終目的。

平面設(shè)計(jì)課程發(fā)展速度很快，軟件不斷升級(jí)、國際流行設(shè)計(jì)不斷變化。筆者剛接觸Photoshop時(shí)的CS版本升級(jí)到現(xiàn)在CS4版本只用了四年的時(shí)間，增加了幾十項(xiàng)功能。為了讓課程跟上時(shí)代的步伐，不斷吸納最新的教學(xué)成果和研究成果，完善的教案、習(xí)題、視頻等教學(xué)資源[4]，并將討論區(qū)里優(yōu)秀的學(xué)生原創(chuàng)作品提煉出來充實(shí)到網(wǎng)站中，實(shí)現(xiàn)網(wǎng)站的滾動(dòng)建設(shè)，延長生命力。

4 總結(jié)

課程網(wǎng)站的建設(shè)是教學(xué)模式和教學(xué)手段改革的一項(xiàng)重要內(nèi)容，課程網(wǎng)站可以實(shí)現(xiàn)優(yōu)秀教學(xué)資源和教學(xué)成果的共享，提高教學(xué)質(zhì)量。通過一年的運(yùn)行證明效果良好，學(xué)生自主學(xué)習(xí)的積極性增加，教師的業(yè)務(wù)水平也有所提高。課程網(wǎng)站的建設(shè)是一項(xiàng)長期的工作，需要在教學(xué)實(shí)踐中不斷總結(jié)和完善。

參考文獻(xiàn):

[1] 智豐電腦工作室.Dreamweaver8網(wǎng)站設(shè)計(jì)制作入門與提高[M].北京:中國林業(yè)出版社，2006.290-292，298.

[2] 王向紅.“微機(jī)原理及接口技術(shù)”課程網(wǎng)站設(shè)計(jì)和實(shí)現(xiàn)[J].中國現(xiàn)代教育裝備，2007(9):51-52.

[3] 王鳳蘭，趙應(yīng)旺.花卉精品課程建設(shè)中網(wǎng)站的構(gòu)建初探[J].農(nóng)業(yè)與技術(shù)，2007(7):164.

[4] 李士梅，龔盛昭.基于Web技術(shù)的精品課程網(wǎng)站設(shè)計(jì)與維護(hù)[J].廣東輕工職業(yè)學(xué)院學(xué)報(bào)，2008，7(1):10-11.

[5] 邱勝樺，陳城釗. 《大學(xué)物理學(xué)》精品課程網(wǎng)站的設(shè)計(jì)與制作[J]. 韓山師范學(xué)院學(xué)報(bào)，2008，29(3):98-99.