| 淺談網(wǎng)絡(luò)課程的頁面設(shè)計 張爽 劉家勛drew0521@163.com 遼寧師范大學(xué)計算機(jī)與信息技術(shù)學(xué)院 大連 116029 【摘要】網(wǎng)絡(luò)課程的頁面設(shè)計應(yīng)按照課程分析、創(chuàng)意設(shè)計、制作、試用測試、修改評價等幾個階段進(jìn)行,具體的設(shè)計內(nèi)容包括主頁的設(shè)計,頁面形式要素的設(shè)計、色彩和動畫視頻等的設(shè)計。在文中，筆者結(jié)合制作《現(xiàn)代教育技術(shù)》網(wǎng)絡(luò)課程的實踐，對這幾方面內(nèi)容的設(shè)計做了分析探討，最后結(jié)合自己的經(jīng)驗，提出了幾點頁面設(shè)計中需要注意的問題。 【關(guān)鍵詞】網(wǎng)絡(luò)課程 頁面設(shè)計 利用網(wǎng)絡(luò)進(jìn)行教學(xué)是教育發(fā)展的一個方向。網(wǎng)絡(luò)教學(xué)的效果如何，與網(wǎng)絡(luò)課程的設(shè)計與制作有關(guān)。所謂網(wǎng)絡(luò)課程，是通過網(wǎng)絡(luò)表現(xiàn)的某門學(xué)科的教學(xué)內(nèi)容及實施的教學(xué)活動的總和。表現(xiàn)形式上就是由一頁頁的網(wǎng)頁按照一定的順序和結(jié)果組成的。網(wǎng)頁既是網(wǎng)絡(luò)課程的組成部分，也是網(wǎng)絡(luò)課程的呈現(xiàn)形式，所有的教學(xué)信息和資源都是通過頁面呈現(xiàn)在學(xué)習(xí)者面前的。因此，網(wǎng)絡(luò)課程頁面設(shè)計的質(zhì)量如何，直接影響到網(wǎng)絡(luò)課程的質(zhì)量。下面就結(jié)合我們開發(fā)制作的《現(xiàn)代教育技術(shù)》網(wǎng)絡(luò)課程談?wù)劸W(wǎng)絡(luò)課程的頁面設(shè)計。 一、 網(wǎng)絡(luò)課程頁面設(shè)計的一般過程 頁面的設(shè)計師一個系統(tǒng)有序的過程，一般包括課程分析、創(chuàng)意設(shè)計、制作、試用測試、修改評價等五個階段。設(shè)計流程圖如下： 課程分析 創(chuàng)意設(shè)計 制作 試用測試 實現(xiàn)產(chǎn)品
評 價 修 改 在該過程中，課程分析是為其它的各項工作奠定了基礎(chǔ)，包括內(nèi)容分析、學(xué)習(xí)者分析、媒體類型分析等教學(xué)設(shè)計工作。在我們開發(fā)的網(wǎng)絡(luò)課程中，我們首先明確將它定位在為廣大師范院校教育專業(yè)學(xué)生和中小學(xué)教師繼續(xù)教育培訓(xùn)服務(wù)。分析學(xué)習(xí)者的特征、學(xué)習(xí)內(nèi)容和學(xué)習(xí)中要用到的媒體，保證了網(wǎng)絡(luò)課程的科學(xué)性和教學(xué)性。這項工作主要由學(xué)科專家和教師來完成。創(chuàng)意設(shè)計是在課程分析的基礎(chǔ)上，對網(wǎng)頁設(shè)計進(jìn)行總體把握，包括了對課程的整體風(fēng)格、代表形象的設(shè)計與策劃，要體現(xiàn)出網(wǎng)絡(luò)課程的風(fēng)格。然后將創(chuàng)意的思想通過具體制作表現(xiàn)出來。制作后的產(chǎn)品要經(jīng)過不斷的測試，試用修改，不斷完善，最后才能完成頁面的設(shè)計。 二、網(wǎng)絡(luò)課程的頁面設(shè)計的特點和要求 網(wǎng)絡(luò)課程的頁面設(shè)計不同于其它的娛樂性質(zhì)、休閑性質(zhì)的網(wǎng)站，有其自身的特點和要求。 （1） 主次分明、重點難點突出 網(wǎng)絡(luò)課程的頁面往往包含了大量的信息和學(xué)習(xí)資源。如果不分主次，很可能使學(xué)習(xí)者在學(xué)習(xí)時抓不住重點，學(xué)習(xí)效果不好。因此，就要求在頁面設(shè)計時要有主有次，對于那些重點難點部分，要加以強(qiáng)調(diào)，突出顯示；而對于那些次要內(nèi)容，要與重點內(nèi)容加以區(qū)別對待，合理安排。 （2）功能齊全、操作方便 網(wǎng)絡(luò)課程的主要目的是促進(jìn)學(xué)生自主學(xué)習(xí)。學(xué)生利用網(wǎng)絡(luò)課程進(jìn)行協(xié)商學(xué)習(xí)或自主學(xué)習(xí)，師生之間交互很少。這就要求網(wǎng)絡(luò)課程的功能齊全、操作方便才行。因此，在頁面的設(shè)計過程中要體現(xiàn)出這樣的原則。 （3）導(dǎo)航清楚，方便理解 網(wǎng)絡(luò)課程的信息量一般很大，學(xué)生在獨立學(xué)習(xí)過程中，很容易迷航。因此要求在頁面設(shè)計時，要設(shè)計明確的導(dǎo)航，讓學(xué)生對自己所處位置一目了然。根據(jù)元認(rèn)知理論，在設(shè)計導(dǎo)航時，要突出主干導(dǎo)航，一般不超過三條；體現(xiàn)出多渠道訪問，在易產(chǎn)生迷航的地方設(shè)計幫助說明文字，方便學(xué)生理解。在我們開發(fā)的網(wǎng)絡(luò)課程中，每個頁面左側(cè)都放置一個導(dǎo)航菜單，方便定位，使學(xué)生不易產(chǎn)生迷航。 （4）均衡一致，適度靈活 網(wǎng)絡(luò)課程的頁面設(shè)計要力求結(jié)構(gòu)均衡、布局合理，保持整個網(wǎng)絡(luò)課程的風(fēng)格一致。一致性即要求網(wǎng)絡(luò)課程的各個頁面的功能區(qū)和構(gòu)成要素在布局位置、功能作用和顏色搭配方面具有相對穩(wěn)定的一致模式。在我們開發(fā)的網(wǎng)絡(luò)課程中，課程學(xué)習(xí)部分五個模塊風(fēng)格一致，這樣學(xué)習(xí)者在學(xué)習(xí)時，不易產(chǎn)生誤操作，而且不會破壞整體的風(fēng)格。但也并非要求一成不變，有時做適當(dāng)?shù)男薷?，提高頁面的生動性?/font> （5）簡潔明快、層次清晰 在頁面設(shè)計時，要力求頁面簡潔、生動，層次清晰。不要以為復(fù)雜的頁面能打動人。“簡單就是美”，因此在設(shè)計頁面時，只要能將意思表達(dá)清楚即可，最重要的是簡潔、清晰，讓人看起來舒服。 三、 網(wǎng)絡(luò)課程頁面設(shè)計的具體內(nèi)容 1. 主頁的設(shè)計 主頁是學(xué)習(xí)者進(jìn)入網(wǎng)絡(luò)課程學(xué)習(xí)的第一個窗口，學(xué)習(xí)者對網(wǎng)絡(luò)課程的第一印象來自于主頁。根據(jù)心理學(xué)中“首因效應(yīng)”理論，第一印象對人的認(rèn)知有強(qiáng)烈的影響，這種印象直接影響人們對此事物其它特性的認(rèn)識和評價。因此，主頁的設(shè)計非常關(guān)鍵。這也是本文把主頁的設(shè)計作為網(wǎng)絡(luò)課程頁面設(shè)計的一項內(nèi)容單獨列出來的原因。 首先，主頁的設(shè)計要考慮到網(wǎng)絡(luò)課程的學(xué)習(xí)者。通過對學(xué)習(xí)者的分析，了解學(xué)習(xí)者的特征，選擇符合他們特征的頁面風(fēng)格。 其次，主頁設(shè)計時要明確主題。主頁是網(wǎng)絡(luò)課程的一個“綱”，是內(nèi)容的概括和摘要。要讓學(xué)習(xí)者瀏覽完主頁后，對課程的內(nèi)容和特點有所了解和把握。 最后，要盡可能縮短下載時間。主頁上包含很多圖像，如網(wǎng)站標(biāo)志、一些象征性的圖片等。這些圖片會導(dǎo)致下載時間延長。一般來說，主頁下載時間不應(yīng)超過30秒。圖片要盡可能小，頁頂圖像最好保持在10KB以下。同時也要注意主頁的顏色搭配和諧，構(gòu)圖均衡、適當(dāng)。 在我們開發(fā)的網(wǎng)絡(luò)課程中，由于學(xué)習(xí)者是在校的大學(xué)生或在職教師，他們的邏輯思維能力都非常強(qiáng)，因此要求主頁的風(fēng)格簡潔、明快、主題突出即可。頁面以藍(lán)色為基調(diào)，頁頂是橫排的矩形，代表了現(xiàn)代教育技術(shù)的媒體特性。在主頁的中間偏右位置是課程的標(biāo)題，下面橫著排列九個圖標(biāo)，明確表明該課程的九項功能。這樣簡單明了，一目了然。讓學(xué)習(xí)者看后，對于該課程的內(nèi)容、重點難點做到心中有數(shù)。 2.頁面形式要素設(shè)計 （1） 文字 網(wǎng)絡(luò)課程的頁面多以文字為核心，靠文字傳遞完整的教學(xué)信息。文字的設(shè)計包括文字的風(fēng)格、大小、顏色等。文字的風(fēng)格就是字體，在網(wǎng)頁中，我們常用的字體有宋體、黑體、仿宋和楷體等。應(yīng)盡量避免使用特殊字體，以免用戶端的瀏覽器不支持。若需要用一種字體來體現(xiàn)頁面的風(fēng)格，可以將其制作成較小的圖像文件插入頁面中適當(dāng)?shù)奈恢?。而且一個頁面中的字體不要超過三種，否則顯得雜亂，沒有主題。 關(guān)于字體的大小，為了突顯主題，標(biāo)題字號可以選的大些。正文字號一般默認(rèn)為12pt（磅），在瀏覽器中顯示比較粗糙，現(xiàn)在較流行的時小中文字體，大小為9 pt。同時，要注意段落間距，網(wǎng)頁默認(rèn)行間距是單倍間距，對于9 pt的字體段落，行間距為1.5倍視覺效果最佳。關(guān)于字體顏色的設(shè)計，在下面的色彩設(shè)計中介紹。 在我們開發(fā)的網(wǎng)絡(luò)課程中，正文字體選為宋體，大小9 pt。標(biāo)題用特殊字體做成小圖片插到網(wǎng)頁中，行間距為1.5倍間距。整體排版規(guī)范、整齊。 （2）圖形圖像 頁面中的圖形圖像主要包括：圖形、圖片、照片、圖表等處文字以外的配合教學(xué)思想表達(dá)的一切有形的部分。是一種極具表現(xiàn)力的形式。適合表現(xiàn)主觀性的、意向性的、情緒性的無法用文字表達(dá)的內(nèi)容。 在使用圖形圖像時有以下幾方面要特別注意： 首先，圖片的格式： 當(dāng)前的網(wǎng)頁中經(jīng)常使用的圖片格式有三種：GIF、JPEG、PNG。每種形式都有其自身的特點。GIF圖形文件采用無損壓縮技術(shù)，文件經(jīng)壓縮后不失真。而且可以存儲透明色、建立動畫等。適用于按鈕、標(biāo)題圖片、線條、圖標(biāo)動畫等。JPEG可以在不減少圖像中所使用的顏色數(shù)量的情況下對圖像進(jìn)行壓縮。由于該格式比較能容忍失真，如圖片、藝術(shù)復(fù)制品、事物或風(fēng)景等都比較適合于用JPEG來表現(xiàn)。PNG采取比GIF更有效的非失真壓縮技術(shù)，通常比GIF和JPEG文件大，不支持動畫。 其次，圖像和文字的配合： 圖像可以彌補(bǔ)文字的不足，但是不能完全代替文字。因此，在頁面設(shè)計時，必須注意將圖像所載的重要信息或鏈接到其它頁面的指示用文字再重申一遍。這樣才能滿足學(xué)習(xí)者的需要。 最后，圖形圖像的處理： 在網(wǎng)頁中的圖形圖像一般采用矩形、圓形等規(guī)則圖形做外邊框，顯得比較呆板。為了提高頁面的生動性，可以采用平面設(shè)計中常用的構(gòu)圖方法，巧妙的將圖片進(jìn)行分解，精心設(shè)計外框，利用噴槍工具隨意涂抹等，削弱圖片規(guī)整外形的刻板。 在我們開發(fā)的網(wǎng)絡(luò)課程中，圖片格式一般都選擇JPEG格式，大小控制在10KB—20KB之間，對于太大的圖片，我們可以利用Firework軟件進(jìn)行切片處理，將圖片打碎，可以提高下載速度。所有頁面設(shè)計中用到的圖片都經(jīng)過了一定的處理，使其與頁面內(nèi)容融為一體，達(dá)到了很好的對文字進(jìn)行補(bǔ)充的作用。 （3） 色彩 頁面色彩設(shè)計是網(wǎng)頁設(shè)計的一項重要內(nèi)容。貫穿于整個頁面設(shè)計的過程之中。是調(diào)節(jié)瀏覽者視覺心理，引起人們注意的主要手段。恰當(dāng)使用顏色，不僅可以增強(qiáng)網(wǎng)絡(luò)課程的藝術(shù)性，而且可以吸引學(xué)生的注意力。 色彩的選擇主要包括對文字、超鏈接、頁面背景顏色等的確定。 文字的顏色，一般選擇和背景色對比較大的顏色，背景多選用淡雅、柔和的顏色，這樣教學(xué)內(nèi)容就可以非常醒目的呈現(xiàn)在學(xué)習(xí)者眼前。導(dǎo)航區(qū)的顏色，要與教學(xué)信息呈現(xiàn)區(qū)的顏色有所不同，便于學(xué)習(xí)者區(qū)分。超鏈接的顏色，要與其它字體顏色加以區(qū)別（一般是紅色或藍(lán)色）。也可以根據(jù)實際需要設(shè)置超鏈接在不同狀態(tài)下文字的顏色。 在色彩搭配時，要盡量將顏色控制在三種以內(nèi)，并選擇一種作為主色調(diào)；背景和文字顏色對比盡量要大，要有足夠的對比度來使網(wǎng)頁易于閱讀，不要選用花紋復(fù)雜的圖案做背景，以便突出主要內(nèi)容；要針對網(wǎng)絡(luò)課程服務(wù)對象的特點，選擇不同的顏色。如兒童喜歡對比強(qiáng)烈、個性鮮明的純顏色，生活在草原上的人喜歡紅色等等。 在我們開發(fā)的網(wǎng)絡(luò)課程中，背景顏色選為白色（#FFFFFF），字體顏色設(shè)為深藍(lán)色（#004080），左側(cè)導(dǎo)航菜單以藍(lán)色為背景（#b7dcfd），整體上是藍(lán)色和白色相襯，易于學(xué)習(xí)者閱讀，讓人看起來舒服，也比較適合該網(wǎng)絡(luò)課程學(xué)習(xí)對象的特點。 （4） 動畫和視頻 在我們?yōu)g覽的大多數(shù)網(wǎng)站中，幾乎有90%以上的頁面中都使用了動畫（主要是GIF和Flash）。網(wǎng)上視頻隨著流媒體技術(shù)的興起而發(fā)展起來，現(xiàn)在網(wǎng)上流行的VOD就是這一類，對者計算機(jī)網(wǎng)絡(luò)的發(fā)展，網(wǎng)上視頻的應(yīng)用將會越來越廣泛。 動、光、色是影響視覺的最活躍的三大因素，其中動的影響最大。在頁面中增加動的因素，可以突破被屏幕的二維空間限制而表現(xiàn)三維空間的結(jié)構(gòu)和形態(tài)，可以強(qiáng)化記憶，而且可以深化趣味空間，讓學(xué)生輕松愉快的學(xué)習(xí)。將圖標(biāo)和按鈕處理為動態(tài)效果，如跳動、閃動、抖動等，再加上精美的造型是網(wǎng)頁設(shè)計中常見的動感設(shè)計。這樣可以使他們成為網(wǎng)頁中濃縮的精“點”。 在對網(wǎng)頁做動畫處理時，要注意：一是頁面中動態(tài)和靜態(tài)的部分要有密切關(guān)系；二是動態(tài)變化不能過多，否則會削弱動態(tài)效果，分散學(xué)習(xí)者的注意力。 四、頁面布局 頁面布局設(shè)計是通過文字圖像的空間組合，表達(dá)和諧與美。版面就是在瀏覽器中看到的完整的一個頁面。下面就介紹幾種常見的布局格式。 （1）拐角型，又稱為“T”型結(jié)構(gòu)。就是指頁面頂部為橫條網(wǎng)站標(biāo)志和廣告條,下方左面為主菜單,右面顯示內(nèi)容的布局.是網(wǎng)頁設(shè)計中的最廣泛的一種布局方式.這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰,主次分明。因為人的注意力主要集中在右下角，所以這些有用的信息能為學(xué)習(xí)者最大可能性獲取。缺點是規(guī)矩呆板,如果細(xì)節(jié)色彩上不注意,很容易讓人“看之無味”. （2）“國”字型，也稱為“同”字型或“口”字型。這種結(jié)構(gòu)是網(wǎng)頁中用的最多的一種結(jié)構(gòu)，是綜合性網(wǎng)站中常用的版式。即頁面上下一般有一個廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容。這種布局方式的優(yōu)點是頁面充滿，內(nèi)容豐富，信息量大，缺點就是頁面擁擠，不夠靈活。 （3）“三”型布局。這種布局多用于國外的網(wǎng)站，在國內(nèi)用的不多。特點就是頁面上橫向2條色塊，將頁面整體分割為4部分，色塊中大多放廣告條。 （4）封面型，又稱為POP布局。POP引自廣告術(shù)語。指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。這種類型基本上出現(xiàn)在一些網(wǎng)站首頁，常用于一些時尚站點。優(yōu)點是顯而易見，漂亮吸引人；缺點是速度較慢。 （5）對稱對比布局。采取左右或者上下對稱的布局,一般用于風(fēng)格比較強(qiáng)的站點.優(yōu)點是視覺沖擊力強(qiáng),缺點是將兩部分有機(jī)結(jié)合比較困難. 這些只是目前網(wǎng)頁中常見的幾種布局方式，在實際應(yīng)用中可以根據(jù)需要作適當(dāng)修改。現(xiàn)在比較方便的一種方式是利用表格來規(guī)劃。在我們開發(fā)的網(wǎng)絡(luò)課程中，是依據(jù)表格來布局的?；窘Y(jié)構(gòu)類似于“T”型結(jié)構(gòu)，頂部為網(wǎng)站的LOGO，LOGO下方是網(wǎng)站的總導(dǎo)航欄，下面左側(cè)是導(dǎo)航菜單，右側(cè)為教學(xué)內(nèi)容展示區(qū)，底部是網(wǎng)站的版權(quán)信息等。可以是學(xué)習(xí)者將注意力主要放在右側(cè)內(nèi)容部分。結(jié)構(gòu)清晰，主次分明。所以建議大家在設(shè)計頁面時不妨嘗試一下用表格來規(guī)劃。 五、 頁面設(shè)計時需注意的問題 結(jié)合我們開發(fā)的《現(xiàn)代教育技術(shù)》網(wǎng)絡(luò)課程的實踐，我認(rèn)為在進(jìn)行網(wǎng)絡(luò)課程的頁面設(shè)計時，有以下幾個問題需注意： （1）主頁內(nèi)容力求樸實簡單 現(xiàn)在，有很多學(xué)習(xí)者是利用調(diào)制解調(diào)器來上網(wǎng)的，這樣他們的上網(wǎng)速度就受到了限制。因此，在主頁中的圖像要力求簡樸，圖像越大，下載速度越慢，時間越長。主頁上的顏色最好不要超過64種，頁頂圖像最好保持在10KB左右。如果主頁圖片國大，可以利用Firework軟件進(jìn)行切片處理。一般將下載時間控制在10—15秒鐘為好，時間過長人們就會沒有耐心。 （2）頁面內(nèi)容要易讀 頁面是以內(nèi)容為主的，不必過分追求復(fù)雜的表現(xiàn)形式。我們應(yīng)合理規(guī)劃文字與背景顏色的搭配方案，不要使背景顏色沖淡文字的視覺效果，也不應(yīng)該是用過多過雜的顏色，讓學(xué)習(xí)者看起來很吃力。而且不要頻繁使用變化字體，這樣讓人看起來很不舒服。 （3）盡量使用相對超級鏈接 在制作圖像或文本鏈接時，要使用相對路徑。這樣做網(wǎng)頁的移植性強(qiáng)，例如把一組源文件移到另一個地方時，相對路徑名仍然有效，不需要重新修改鏈接的目標(biāo)地址。另外要保證鏈接直觀有效，以便讓學(xué)習(xí)者快速找到他們想要的內(nèi)容。因此我們在每一頁的頂部位置都放有相同的導(dǎo)航條，使學(xué)習(xí)者直觀地從每一頁上可以訪問到網(wǎng)站的任何部分。 （4）不宜用太多的動畫和靜態(tài)圖片 在設(shè)計頁面時，要確定是否一定要使用GIF動畫或Flash插件，如果可以不用盡量不用，選擇靜態(tài)圖片來替代。另外，如果學(xué)習(xí)者所用瀏覽器的版本不是IE5.0或Netscape5.0，還要下載Flash插件，很不方便。同時也不要使用橫跨屏幕的圖像，要避免學(xué)習(xí)者滾動屏幕。此外，還要確保所用的動畫和圖片與網(wǎng)頁內(nèi)容有關(guān)，與內(nèi)容融為一體。 （5）要注意瀏覽器和分辨率的兼容性 由于不同的瀏覽器和分辨率對于網(wǎng)頁的顯示效果不同，因此在設(shè)計網(wǎng)頁時要盡量在不同的瀏覽器下設(shè)計和調(diào)試。對于屏幕的分辨率，我們在開發(fā)網(wǎng)絡(luò)課程時，標(biāo)準(zhǔn)的分辨率為800*600。為了實現(xiàn)不同分辨率下頁面不發(fā)生變形，在我們設(shè)計的頁面，將規(guī)劃頁面的表格寬度設(shè)為768像素，居中。以后再嵌套的表格相對于網(wǎng)頁的寬度就固定下來了，永遠(yuǎn)不會超出800*600的屏幕。即使是用別的分辨率來觀看，網(wǎng)頁也不會發(fā)生變形。 以上，僅就本人在網(wǎng)絡(luò)課程的制作實踐中的幾點體會來談網(wǎng)絡(luò)課程頁面設(shè)計的一些基本內(nèi)容。其實網(wǎng)絡(luò)課程的頁面設(shè)計既是一門科學(xué)也是一門藝術(shù)。是一個復(fù)雜的系統(tǒng)工程，在實際的設(shè)計中要全面、系統(tǒng)、總體地對網(wǎng)頁中的各個組成要素進(jìn)行綜合考慮。但總體上要遵循“主次分明、重點突出、風(fēng)格一致、搭配和諧”等原則，將科學(xué)性與藝術(shù)性結(jié)合起來，獲得最佳的感官效果，同時也使學(xué)習(xí)者獲得最佳的學(xué)習(xí)效果。 【參考文獻(xiàn)】 [1]許思貴. 淺談教學(xué)網(wǎng)頁設(shè)計. 曲靖師范學(xué)院學(xué)報[J]2003(3):59-60 [2]謝舒瀟 葉長茂. 淺談網(wǎng)絡(luò)課程的頁面設(shè)計. 高等理科教育[J]2004(1):101-102,104 [3]薄芙麗 滕蘭芝等. 平面設(shè)計的新概念——教學(xué)網(wǎng)頁設(shè)計.電化教育研究[J]2002（3）：54-55 [4]房國棟 姜麗. 淺論教育網(wǎng)站主頁的設(shè)計. 中山大學(xué)學(xué)報論叢[J]2002（5）：169-170 [5]徐金云.網(wǎng)頁設(shè)計中的常見問題及解決辦法.青島科技大學(xué)學(xué)報[J]2003（9）：134-135 [6]陳次白 丁晟春 顏端武著.網(wǎng)頁設(shè)計與制作[M]南京.東南大學(xué)出版社2002.12：30-33，35-39，43 |
