基于CDIO的面向對象程序設計課程網絡教學平臺前臺設計與實現

黃演鋒++羅琪

摘 要：本系統把"CDIO工程教育理念和教學大綱"整合在網絡教學平臺中，提出搭建網絡平臺，需求不僅僅局限在功能和信息方面，而更多的轉向于前端的界面表現方面。要設計開發出一套界面美觀，交互友好的前端界面所涉及的知識和技能也是很廣泛的。本文就基于CDIO的面向對象程序設計課程網絡教學平臺的前端設計與制作流程做了深入剖析。

關鍵詞：photoshop技術；網頁前端設計；HTML技術；CSS技術

傳統的在線學習系統往往功能比較單一，有時僅僅是教學資源的采集，發布平臺。本項目為教學活動中信息發布，教學管理，操作實踐，測評考核，輔導答疑，交流探討等各種環節都提供了相應的功能模塊。教學任務中大多數活動都能在該平臺提供的支持下更高效的地展，很大程度上克服了傳統教學平臺時間，空間的局限性。

本系統充分把“CDIO工程教育理念和教學大綱”整合在網絡教學平臺中，從產品的構思（Conceive）、設計（Design）、實現（Implement）和運作（Operate）等產品研發運行周期的不同階段入手，旨在使學習者能夠體會和適應當代工業生產環境對工程人員的需求。

本項目主要是搭建網絡教育平臺，主要采用Java EE與

Struts 2框架、Hibernate框架、Spring框架的集成開發。

一、網站定位

本網站為在線教育型網站。建立該網站的主要目的使得學生通過互聯網實現自由、自主學習的目的，能夠通過網站首頁，課程，發現，讓學員清楚了解平臺所提供的主要信息。 網站欄目清晰明了，網站本身就是平臺功能的體現。欄目之間的設定都是在服務于如何讓學員更好更方便學習所想要的知識。

二、網站前臺建設要求

本網站前臺采用css+div，javascript。網頁主要體現清爽的感覺，采用白藍的明色色彩組合，制造出平靜恬靜的效果，時學生能以一種平和的心情學習知識，特效方面，主要采用js方式進行呈現。讓網站的一些展示動起來，讓網站更有生機，展現不用的呈現方式，讓用戶在視覺上產生沖擊感，提高學習興趣。

網站的前臺框架如下：

主頁：以網頁靜態的方式展示，需要有登陸功能、注冊功能、密碼找回功能。課程的動態及相關信息在第一時間呈現給學生，提高關注度。

登陸功能：放置在最顯眼的位置，讓用戶第一時間找到登陸位置，曾加用戶體驗度。

注冊功能：放置在登陸功能之后，第二視覺強度，便于用戶注冊帳號。

產品介紹：本模塊主要展示網站的在線產品，產品的相關視頻，點擊之后就可以觀看視頻，更多的視屏跳轉到新頁面。關于我們：每個模塊對應網站的相關內容。

注冊頁面：網站的帳號以郵箱的方式為帳號注冊。

登陸頁面：網站的帳號以郵箱的方式登陸。

產品介紹頁面：本模塊主要展示網絡課程的相關視頻，點擊之后就可以觀看視頻，更多的視屏跳轉到新頁面。

三、設計說明

本教育網絡平臺采用AI在WEB前端的開發與應用，對網頁的矢量圖形進行快速又精確地進行設計。采用PS做WEB美工。首先，建立WEB圖，新建文件長度一般都是1920象素這樣剛好部滿目前最高分辨率的蘋果電腦的顯示， 高度可以自己按需求定。其次，作圖，先打開輔助標尺以保證作圖布局的規范行，然后設計WEB布局。WEB頁的布局采用平整和層次兩種類型。平整布局使得整個頁面做出的效果圖就像畫在紙上一樣的畫平整。層次布局應用在PS的混合模式中，對整個布局有把握再設計效果圖 LOGO BANNER和內容。最后，采用切割技術對Web頁面進行調整。在進行儲存時WEB格式注意儲存為GIF格式，這樣文件才會更小。

（一）設計效果。整個頁面布局運用上下分欄的方式呈現，采用絕對定位和浮動定位。絕對定位的優勢在于，可以精確控制任何元素的位置。浮動定位將塊元素和獨占一行的元素并列起來，不會讓整行只有一個元素。

本網站的亮點在于banner，以簡單多變的文字表達出該網絡學習平臺的學習理念，提高網絡關注度，添加了JS特效來展現課程推薦專欄，圖片變化的效果使瀏覽增添了許多樂趣。

在設計首頁時，起初JS代碼在不同瀏覽器兼容性出現了問題，最后采用了jquery框架。布局主要采用分欄的方式，以各個板塊展示不同的內容信息。導航搜索框采用js特效進行自動伸縮，當鼠標選中搜索框時，搜索框自動變長，網站風格簡約，導航醒目，分欄的布局使條理清晰明了。

（二）列表頁設計說明。列表頁的重點在內容部分，以圖文混合的形式進行排版，另外添加了顯示全部的鏈接，用戶可以選擇瀏覽更多的內容。布局主要采用通欄的方式，以各個板塊展示不同的內容信息。內容展示分左右兩欄，

四、兼容方案的設計

用戶通常會使用瀏覽器訪問該網絡平臺。各瀏覽器解譯網站代碼的方式略有不同，這意味著。為了避免網站在不同瀏覽器中顯示的效果會有所差異，依賴于瀏覽器特定的行為本次設計采用一些方式來確保網站在不同的瀏覽器中都能正確顯示。

（一）使用有效的 HTML 和 CSS 編寫網頁。有效、易解譯的 HTML 可保證網頁得以正確顯示，而 CSS 可以將網頁的外觀和內容分離開來，使網頁可以更快速地載入和呈現給訪問者。本設計使用有效的 HTML 和 CSS 編寫網頁，然后在盡可能多的瀏覽器中測試這些網頁顯示的效果，并使用W3 Consortium 免費提供的在線 HTML 和 CSS 驗證工具驗證網頁，使用HTML Tidy 的工具快捷地清理代碼。

（二）指定字符編碼，編碼置于文檔（或框架）的頂部。為使瀏覽器可以呈現您網頁上的文字，本設計始終為相應的文檔指定編碼。為了避免某些瀏覽器無法識別文檔深處的字符集聲明，本設計還將此編碼置于文檔（或框架）的頂部。此外，為了確保網絡服務器不發送相沖突的 HTTP 標頭。使用content-type：

text/html； charset=utf-8 之類的標頭替代網頁中的所有字符集聲明。

（三）使用Flash和富媒體指南，使網頁易于訪問。本設計按照 Flash 和其他富媒體使用指南進行操作，然后在 Lynx 這樣的純文本瀏覽器中對網站進行測試。提供針對富媒體內容和功能的純文本瀏覽方式，有助于搜索引擎更方便地抓取本網站并將其編入索引，同時也大大方便了使用屏幕讀取器等技術訪問。

結束語：好的開端是成功的一半，通過本次的大學生創新計劃，讓我體會到要做好一個網站，前期的規劃是最重要的，準備充分才能事半功倍，而不是毫無目的的隨心所欲，這是網站開發中要特別注意的問題之一。而在網站規劃過程中搜集相關資料，并從中分析有用的信息進行整理，這鍛煉了我對信息收集整理的能力，將對我以后的學習和工作是有益的。雖然創新設計項目仍有一些不足，但過程中的體驗卻讓我受益匪淺，那對我而言將是一種寶貴的財富，讓我在今后的學習及工作中有所借鑒，不斷地提高和完善自我。

參考文獻：

[1] 曾靜娜著 CSS+DIV[M] 北京希望電子出版社 2010.3

[2] 阮文江主編 JavaScript程序設計基礎教程[M] 人名郵電出版社 2010.8

[3] 王亞芬著 Photoshop 7標準教程[M] 海洋出版社 2009.8