基于CDIO的面向?qū)ο蟪绦蛟O(shè)計(jì)課程網(wǎng)絡(luò)教學(xué)平臺(tái)前臺(tái)設(shè)計(jì)與實(shí)現(xiàn)

黃演鋒++羅琪

摘 要：本系統(tǒng)把"CDIO工程教育理念和教學(xué)大綱"整合在網(wǎng)絡(luò)教學(xué)平臺(tái)中，提出搭建網(wǎng)絡(luò)平臺(tái)，需求不僅僅局限在功能和信息方面，而更多的轉(zhuǎn)向于前端的界面表現(xiàn)方面。要設(shè)計(jì)開發(fā)出一套界面美觀，交互友好的前端界面所涉及的知識(shí)和技能也是很廣泛的。本文就基于CDIO的面向?qū)ο蟪绦蛟O(shè)計(jì)課程網(wǎng)絡(luò)教學(xué)平臺(tái)的前端設(shè)計(jì)與制作流程做了深入剖析。

關(guān)鍵詞：photoshop技術(shù)；網(wǎng)頁前端設(shè)計(jì)；HTML技術(shù)；CSS技術(shù)

傳統(tǒng)的在線學(xué)習(xí)系統(tǒng)往往功能比較單一，有時(shí)僅僅是教學(xué)資源的采集，發(fā)布平臺(tái)。本項(xiàng)目為教學(xué)活動(dòng)中信息發(fā)布，教學(xué)管理，操作實(shí)踐，測(cè)評(píng)考核，輔導(dǎo)答疑，交流探討等各種環(huán)節(jié)都提供了相應(yīng)的功能模塊。教學(xué)任務(wù)中大多數(shù)活動(dòng)都能在該平臺(tái)提供的支持下更高效的地展，很大程度上克服了傳統(tǒng)教學(xué)平臺(tái)時(shí)間，空間的局限性。

本系統(tǒng)充分把“CDIO工程教育理念和教學(xué)大綱”整合在網(wǎng)絡(luò)教學(xué)平臺(tái)中，從產(chǎn)品的構(gòu)思（Conceive）、設(shè)計(jì)（Design）、實(shí)現(xiàn)（Implement）和運(yùn)作（Operate）等產(chǎn)品研發(fā)運(yùn)行周期的不同階段入手，旨在使學(xué)習(xí)者能夠體會(huì)和適應(yīng)當(dāng)代工業(yè)生產(chǎn)環(huán)境對(duì)工程人員的需求。

本項(xiàng)目主要是搭建網(wǎng)絡(luò)教育平臺(tái)，主要采用Java EE與

Struts 2框架、Hibernate框架、Spring框架的集成開發(fā)。

一、網(wǎng)站定位

本網(wǎng)站為在線教育型網(wǎng)站。建立該網(wǎng)站的主要目的使得學(xué)生通過互聯(lián)網(wǎng)實(shí)現(xiàn)自由、自主學(xué)習(xí)的目的，能夠通過網(wǎng)站首頁，課程，發(fā)現(xiàn)，讓學(xué)員清楚了解平臺(tái)所提供的主要信息。 網(wǎng)站欄目清晰明了，網(wǎng)站本身就是平臺(tái)功能的體現(xiàn)。欄目之間的設(shè)定都是在服務(wù)于如何讓學(xué)員更好更方便學(xué)習(xí)所想要的知識(shí)。

二、網(wǎng)站前臺(tái)建設(shè)要求

本網(wǎng)站前臺(tái)采用css+div，javascript。網(wǎng)頁主要體現(xiàn)清爽的感覺，采用白藍(lán)的明色色彩組合，制造出平靜恬靜的效果，時(shí)學(xué)生能以一種平和的心情學(xué)習(xí)知識(shí)，特效方面，主要采用js方式進(jìn)行呈現(xiàn)。讓網(wǎng)站的一些展示動(dòng)起來，讓網(wǎng)站更有生機(jī)，展現(xiàn)不用的呈現(xiàn)方式，讓用戶在視覺上產(chǎn)生沖擊感，提高學(xué)習(xí)興趣。

網(wǎng)站的前臺(tái)框架如下：

主頁：以網(wǎng)頁靜態(tài)的方式展示，需要有登陸功能、注冊(cè)功能、密碼找回功能。課程的動(dòng)態(tài)及相關(guān)信息在第一時(shí)間呈現(xiàn)給學(xué)生，提高關(guān)注度。

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

注冊(cè)功能：放置在登陸功能之后，第二視覺強(qiáng)度，便于用戶注冊(cè)帳號(hào)。

產(chǎn)品介紹：本模塊主要展示網(wǎng)站的在線產(chǎn)品，產(chǎn)品的相關(guān)視頻，點(diǎn)擊之后就可以觀看視頻，更多的視屏跳轉(zhuǎn)到新頁面。關(guān)于我們：每個(gè)模塊對(duì)應(yīng)網(wǎng)站的相關(guān)內(nèi)容。

注冊(cè)頁面：網(wǎng)站的帳號(hào)以郵箱的方式為帳號(hào)注冊(cè)。

登陸頁面：網(wǎng)站的帳號(hào)以郵箱的方式登陸。

產(chǎn)品介紹頁面：本模塊主要展示網(wǎng)絡(luò)課程的相關(guān)視頻，點(diǎn)擊之后就可以觀看視頻，更多的視屏跳轉(zhuǎn)到新頁面。

三、設(shè)計(jì)說明

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

（一）設(shè)計(jì)效果。整個(gè)頁面布局運(yùn)用上下分欄的方式呈現(xiàn)，采用絕對(duì)定位和浮動(dòng)定位。絕對(duì)定位的優(yōu)勢(shì)在于，可以精確控制任何元素的位置。浮動(dòng)定位將塊元素和獨(dú)占一行的元素并列起來，不會(huì)讓整行只有一個(gè)元素。

本網(wǎng)站的亮點(diǎn)在于banner，以簡(jiǎn)單多變的文字表達(dá)出該網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)的學(xué)習(xí)理念，提高網(wǎng)絡(luò)關(guān)注度，添加了JS特效來展現(xiàn)課程推薦專欄，圖片變化的效果使瀏覽增添了許多樂趣。

在設(shè)計(jì)首頁時(shí)，起初JS代碼在不同瀏覽器兼容性出現(xiàn)了問題，最后采用了jquery框架。布局主要采用分欄的方式，以各個(gè)板塊展示不同的內(nèi)容信息。導(dǎo)航搜索框采用js特效進(jìn)行自動(dòng)伸縮，當(dāng)鼠標(biāo)選中搜索框時(shí)，搜索框自動(dòng)變長(zhǎng)，網(wǎng)站風(fēng)格簡(jiǎn)約，導(dǎo)航醒目，分欄的布局使條理清晰明了。

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

四、兼容方案的設(shè)計(jì)

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

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

（二）指定字符編碼，編碼置于文檔（或框架）的頂部。為使瀏覽器可以呈現(xiàn)您網(wǎng)頁上的文字，本設(shè)計(jì)始終為相應(yīng)的文檔指定編碼。為了避免某些瀏覽器無法識(shí)別文檔深處的字符集聲明，本設(shè)計(jì)還將此編碼置于文檔（或框架）的頂部。此外，為了確保網(wǎng)絡(luò)服務(wù)器不發(fā)送相沖突的 HTTP 標(biāo)頭。使用content-type：

text/html； charset=utf-8 之類的標(biāo)頭替代網(wǎng)頁中的所有字符集聲明。

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

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

參考文獻(xiàn)：

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

[2] 阮文江主編 JavaScript程序設(shè)計(jì)基礎(chǔ)教程[M] 人名郵電出版社 2010.8

[3] 王亞芬著 Photoshop 7標(biāo)準(zhǔn)教程[M] 海洋出版社 2009.8