校園生活類網站設計與開發

王遠　梁美平　吳娜娜　楊肖娜　張丹　余建安

摘 要 以校園生活網站為主，總結出在其設計與開發過程中的一般步驟，并針對建設網站過程中可能存在的問題，提出幾點有效建議。

關鍵詞 校園生活網站；網頁設計；頁面元素

中圖分類號：TP393 文獻標識碼：B

文章編號：1671-489X（2016）06-0157-02

1 前言

隨著計算機互聯網技術的不斷普及和發展，人們可以更方便快捷地瀏覽各種各樣的網站，從中獲得自己需要的信息。在計算機網絡不斷應用于教育的今天，校園生活網站的設計以校園生活為題材，提供豐富的信息資源，不僅面向廣大在校師生，也面向社會。它利用網頁的形式，展現出學校師生的學習生活環境和娛樂活動等，有利于宣揚學校的文化精神。隨著校園生活網站建設的重要性越來越突出，對它的設計與開發不容忽視。制作出令人賞心悅目、方便獲取信息的校園生活網站，已成為一種追求。

2 校園生活網站設計與開發步驟

網站定位 首先要對建設的網站進行精確定位，需要明確網站建設的目的和面向的對象，增強其實用性。在明確校園生活網站建設的方向后，進行整體構思與規劃，定位出校園生活網站的特色和風格，如青春類。

素材搜集 圍繞校園生活，收集與網站主題相關素材資料。以校園生活中的娛樂生活為例，在確定主要內容后，還需搜集諸如校外旅行的景點、社團活動的相關事宜、圖片以及音視頻等大量資料，并對資料進行整理，合理分類，便于后期合理安排制作。

頁面制作 首先，確定好網站的整體色調，由于展現的是校園生活，所以可采用綠色、暖黃色和紅色等可以烘托青春氣息的色彩。其次，設計簡潔大方的界面，不拘泥于傳統的校園網站，勇于打破呆板的風格進行創新。第三，在Logo的設計中，可以將簡筆畫的圖像與變化了的文字相結合，既宣揚活力，又能突出學校生活的特色；導航條要讓人一目了然，概括定義好主要關鍵詞；內容板塊的設計是最為自由的，可以根據校園生活的素材，設計出圖文并茂的頁面，給人耳目一新的感覺；版權信息也必不可少。第四，合理規劃好各個板塊，將其組合成最優的整體頁面，能讓人一目了然又富有創意，以吸引更多的瀏覽者，提高網站關注度。

完成發布 校園生活網頁制作完成后，需要在瀏覽器中進行測試，看其能否正確顯示，觀察效果，如果沒有問題，則可以上傳發布于Internet上，并定期進行維護更新。

3 校園生活網站設計與開發的建議

不難發現，往往在網站設計與開發的實踐操作中，還存在許多大大小小的問題。本小組在設計制作寶雞文理學院校園生活網站過程中出現一系列問題。如：色彩選用不當，各種顏色混在一起，過于花哨，像一塊調色板；字體過小或過大，設計過于自由，有的文字顏色搭配不合理，略顯粗俗；使用的圖片模糊且隨性，沒有指向性和內涵，缺乏美感；加入大量動畫和視頻，沒有節制，導致網頁加載速度慢；未能將版面合理布局，圖片、文字只是一味地堆積在一起，缺乏創意；等等。針對出現的問題，總結提出幾點關于制作校園生活類網站的建議，目標在于制作出人們喜聞樂見的優秀網站。

搭配積極、熱情的色彩 用戶打開一個網站，最先感受到的并不是豐富的內容，而是它的色彩。不同的色彩有著不同的象征含義和情感態度，一般來說，紅色象征著火和力量，熱情、奔放；橙色象征著幸福，歡快、生機；明亮的黃色高貴光明；大自然般的綠色和諧有活力；平靜的藍色，靈性的紫色；等等。但同時它們也有消極的一面，比如：紅色表示憤怒，黃色代表警告，紫色帶來壓抑。校園生活網頁中色彩的應用也應遵循色彩的規律，選擇較為活潑的基調，如熱情活力的紅色或生機勃勃的嫩綠色，其他色彩起點綴、襯托、補充的作用，而不能喧賓奪主，使人眼花繚亂?？梢岳冒咨儍艉唵蔚膬烖c，它的加入運用，可以顯露網站的整潔，增加可讀性?？傊谝粋€網頁中不要運用三種以上的色彩，注意色彩的搭配要合理，要給人一種和諧愉快的視覺享受。

利用彰顯個性與主題的文字 網站建設過程中，在文字的設計使用時要注意不要使用過大的字體，這樣頁面所包含的內容將會減少，除非要突出某一重點或應用于標題；也不能太小，會使可讀性變差；要適中?？梢愿鶕热菟?，運用不同的字體來彰顯個性與主題，充分體現某種情感。如粗體字強健有力，有大氣磅礴之勢；細體字高雅細致，有柔美之感。校園生活網站頁面的設計中也可以運用文字的圖形化，對字體進行藝術化的設計，能更富有創意地表達設計思想，打破網頁的平淡與單調。要注意文字顏色的使用，要合理使用不同顏色的文字，不要太多，否則整個頁面看起來像是一塊調色板，凌亂無章。還有運用段落與段落間空行及首行縮排等方式來輔以閱讀；不宜使用過多閃爍的文字；等等。

選擇積極向上、有含義的圖像 一個好的網頁離不開好的視覺效果、好的視覺元素——圖像的運用，既可以賦予頁面靈氣，又能通過與文字、音頻的相互結合來吸引人們的注意力，以及幫助其更好地理解文字內容。校園生活網站的圖片應是積極向上、活潑的；避免使用太過灰白的圖片，容易引起壓抑感；在圖像的運用中，可采用自己拍攝的素材圖片，但要注意其清晰度，主體應清晰可見；圖片的含義要簡單明了；圖片中包含的文字應容易辨認；也不宜使用過多過大的圖片，可應用png圖像格式，圖像不容易失真，存貯形式豐富，又能把圖像文件壓縮到極限，利于網絡傳輸且顯示速度快。對于已獲取的圖形或圖像，可以利用Adobe Photoshop、光影魔術手等軟件進行處理，使之更符合網頁編輯的需要，制作出具有特色和吸引力的網站頁面。

加入有效的音視頻 僅僅有文字和圖片組成的靜態頁面中，缺乏相應的視聽覺感受，難以引起瀏覽者的興趣。添加需要的音視頻來表現內容，更富有表現力，能給瀏覽者帶來驚喜，提高點擊量，更具有吸引力。MP3格式的音頻音質好，文件體積較小，可以作長時間播放的背景音樂，也適合用作解說和效果聲，便于在網上傳播。數字視頻能客觀記錄現實，表現事物細節，突破時空限制，從而拓寬人的視野。可以根據需要，利用數字視頻后期制作與處理軟件（如會聲會影）對視頻進行剪切或組接。加入自己錄制或下載的有關視頻，比如心理健康訪談類節目等，能產生文字、圖像等無法代替的視聽覺效果。

適當運用動畫資源 動畫利用人類視覺暫留的特性，快速播放一系列動作連貫的靜態圖像產生視覺上的動態效果，善于表現抽象事物。利用Flash設計出有表現力的動畫，彰顯網站主題。它采用矢量技術，生成的文件容量小，適合網絡傳輸。但也要注意善用此類輔助型網頁內容，過多地、沒有針對性地使用會加重網頁的負擔，影響加載速度，容易使網頁瀏覽者心生厭煩，減少瀏覽量。要注意該用則用，不可濫用。

4 結論

要想制作出成功的諸如校園生活類網站，不僅要注意以上所提到的問題，還需要建設者提高自身技術，在制作過程中認真仔細、不可馬虎，發現問題時能及時有效地解決；增強審美能力，能合理搭配內容；具有創新意識，敢于打破傳統網頁布局；將理論知識與實踐操作相聯系，勤于動手，在實踐中檢驗真理；等等?？傊ㄔO者需要不斷學習和思考，不斷進步，從而設計制作出人們喜愛的網站。

參考文獻

[1]宋志新.淺談網站建設和網頁制作的方法[J].電子技術與軟件工程，2013（24）：22-22.

[2]周容.網頁頁面技術剖析[J].四川職業技術學院學報，2003（1）：72-74.

[3]趙霞，趙國強.網頁制作的問題與方法探析[J].科技風，2009（16）：1.

[4]葉旭東.Flash動畫在網頁制作中的應用[J].信息與電腦：理論版，2012（1）：140-141.