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