馬曉春

摘要：高等院校的學(xué)生在學(xué)習(xí)二手車評(píng)估課程時(shí)，實(shí)習(xí)實(shí)踐的機(jī)會(huì)比較少?；谶@個(gè)原因，本文設(shè)計(jì)了以本校學(xué)生為主，利用互聯(lián)網(wǎng)在線練習(xí)二手車鑒定評(píng)估的實(shí)踐教學(xué)網(wǎng)站。該網(wǎng)站采用DIV+CSS方式構(gòu)建完成，大大縮減頁(yè)面代碼，更好地控制頁(yè)面布局，結(jié)構(gòu)簡(jiǎn)明，讓人一目了然。

關(guān)鍵詞：二手車評(píng)估；網(wǎng)站；DIV+CSS

1 引言

隨著網(wǎng)絡(luò)的興起，我國(guó)的高等教育教學(xué)方式也在隨之變化。網(wǎng)絡(luò)提供給我們共同的資源，同時(shí)我們也把自己的信息發(fā)布出去，大家共享。高等教育的實(shí)踐教學(xué)不同于職業(yè)教育，但也重視學(xué)生的實(shí)踐經(jīng)驗(yàn)與實(shí)踐能力，其中有很多課程可以通過(guò)網(wǎng)絡(luò)來(lái)完成實(shí)踐教學(xué)內(nèi)容，既調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性和主動(dòng)性，又培養(yǎng)了學(xué)生的科學(xué)探索精神和創(chuàng)新能力。

實(shí)踐教學(xué)網(wǎng)絡(luò)平臺(tái)是克服教學(xué)資源不足的有效途徑，是實(shí)現(xiàn)在資金短缺、設(shè)備更新快的條件下能更好地完成實(shí)踐教學(xué)的最佳手段。因此，發(fā)達(dá)國(guó)家十分重視實(shí)踐教學(xué)網(wǎng)絡(luò)的建設(shè)，遠(yuǎn)程教學(xué)在許多國(guó)家已十分普及。據(jù)世界經(jīng)合組織研究資料顯示，到目前為止，世界上已經(jīng)有一百多個(gè)國(guó)家和地區(qū)開(kāi)展了實(shí)踐教學(xué)網(wǎng)絡(luò)化的教育，網(wǎng)絡(luò)化教育己成為國(guó)際教育發(fā)展的共同趨勢(shì)。

2 網(wǎng)站規(guī)劃

2.1網(wǎng)站內(nèi)容

實(shí)踐教學(xué)網(wǎng)站為學(xué)生提供自主學(xué)習(xí)的平臺(tái)，同時(shí)也為教師提供教學(xué)互動(dòng)本網(wǎng)站設(shè)計(jì)的主要模塊有：教學(xué)資源模塊、實(shí)踐教學(xué)模塊、交流互動(dòng)模塊以及一些輔助學(xué)習(xí)練習(xí)的視頻瀏覽。其中教學(xué)資源模塊包括多媒體課件、講稿、教學(xué)大綱、教學(xué)日歷、培養(yǎng)方案等；實(shí)踐教學(xué)模塊要與網(wǎng)絡(luò)連接，根據(jù)網(wǎng)上的汽車信息，利用評(píng)估軟件進(jìn)行練習(xí)操作；交流互動(dòng)模塊就是通過(guò)上傳工具進(jìn)行資料上傳，老師與學(xué)生、學(xué)生與學(xué)生之間都可以互相交流探討，信息發(fā)布。

2.2開(kāi)發(fā)技術(shù)

DIV+CSS大大縮減頁(yè)面代碼，能提高頁(yè)面瀏覽速度，縮減帶寬成本；結(jié)構(gòu)清晰，容易被搜索引擎搜索到；縮短改版時(shí)間。只要簡(jiǎn)單地修改幾個(gè)CSS文件就可以重新設(shè)計(jì)一個(gè)有成百上千頁(yè)面的站點(diǎn)； CSS非常容易編寫。你可以像寫html代碼一樣輕松地編寫CSS；還能夠更好地控制頁(yè)面布局。

JavaScript是一種能讓你的網(wǎng)頁(yè)更加生動(dòng)活潑的程式語(yǔ)言，也是目前網(wǎng)頁(yè)中設(shè)計(jì)中最容易學(xué)又最方便的語(yǔ)言。我們可以利用JavaScript輕易地做出親切的歡迎訊息、漂亮的數(shù)字鐘、有廣告效果的跑馬燈及簡(jiǎn)易的選舉，還可以顯示瀏覽器停留的時(shí)間。讓這些特殊效果提高網(wǎng)頁(yè)的可觀性。

Internet Information Services（IIS，互聯(lián)網(wǎng)信息服務(wù)），是由微軟公司提供的基于運(yùn)行Microsoft Windows的互聯(lián)網(wǎng)基本服務(wù)。最初是Windows NT版本的可選包，隨后內(nèi)置在Windows 2000、Windows XP Professional和Windows Server 2003一起發(fā)行，但在普遍使用的Windows XP Home版本上并沒(méi)有IIS。

2.3軟件環(huán)境

（1）數(shù)據(jù)庫(kù)：Microsoft Access

（2）網(wǎng)頁(yè)腳本：JavaScript

（3）網(wǎng)頁(yè)編輯工具：Micromedia Dreamweaver 8

（4）操作系統(tǒng)：Microsoft Windows 7 旗艦版 （ 32位 / SP1 / DirectX 11）

（5）其他支撐組件：ODBC數(shù)據(jù)源、Internet 信息服務(wù)（IIS）

2.4硬件環(huán)境

處理器：英特爾 Core i3 M 330 @ 2.13GHz 雙核筆記本處理器

主板 聯(lián)想 KL2

內(nèi)存 4 GB （ 爾必達(dá) DDR3 1333MHz / 金士頓 DDR3 1333MHz ）

主硬盤：希捷 ST9320423AS （ 320 GB / 7200 轉(zhuǎn)/分 ）

主顯卡：ATI Mobility Radeon HD 5650 （ 1 GB / 聯(lián)想 ）

顯示器：三星 SEC3049 （ 14.7 英寸 ）

網(wǎng)卡：博通 BCM57780 NetLink Gigabit Ethernet / 聯(lián)想

聲卡 瑞昱 ALC272 @ 英特爾 5 Series/3400 Series Chipset 高保真音頻

3 網(wǎng)站設(shè)計(jì)

3.1站點(diǎn)設(shè)計(jì)

打開(kāi)Dreamweaver 8→站點(diǎn)→新建站點(diǎn)

進(jìn)入【站點(diǎn)定義】窗口，點(diǎn)擊【高級(jí)】選項(xiàng)卡進(jìn)入【本地信息】分類窗口分別輸入：站點(diǎn)名稱：站點(diǎn)——二手車實(shí)踐教學(xué)平臺(tái)

本地跟文件夾： E：＼設(shè)計(jì)＼bywz

進(jìn)入【測(cè)試服務(wù)器】窗口，分別選擇

服務(wù)器模型：ASP JavaScript

訪問(wèn)：本地/網(wǎng)絡(luò)

點(diǎn)擊【確定】按鈕完成站點(diǎn)設(shè)置

完成后右下角的站點(diǎn)窗口會(huì)顯示一個(gè)新的站點(diǎn)。

3.2網(wǎng)站形象設(shè)計(jì)

3.2.1網(wǎng)站色彩

網(wǎng)站采用了汽車的金屬冷色為主色調(diào)，顏色層次清晰，界面美觀簡(jiǎn)潔。金屬質(zhì)感以及大幅跑車背景對(duì)瀏覽者產(chǎn)生視覺(jué)上的沖擊。同時(shí)給人以汽車的悅動(dòng)質(zhì)感，網(wǎng)頁(yè)之中汽車圖片樣式豐富，各種樣式的名車配圖吸引大眾的目光。

3.2.2字體設(shè)計(jì)

網(wǎng)站中正文文字均采用宋體12～14號(hào)字，大標(biāo)題則采用黑體，具體字體大小根據(jù)網(wǎng)站的美觀設(shè)計(jì)制定。

3.2.3 Logo設(shè)計(jì)

汽車二手車實(shí)踐平臺(tái)以汽車為中心實(shí)踐主題其為實(shí)踐教學(xué)網(wǎng)頁(yè)，因此logo的主要字體選用特殊字體——行楷。以行楷來(lái)表現(xiàn)標(biāo)題更能體現(xiàn)出汽車的時(shí)代感。

3.2.4導(dǎo)航設(shè)計(jì)

將導(dǎo)航放置于logo的右邊，五個(gè)導(dǎo)航并排安置，同時(shí)在導(dǎo)航上做了懸停效果，首頁(yè)上一直有懸停效果展示。五個(gè)導(dǎo)航并排安置，并除了首頁(yè)之外，都設(shè)置隱藏下拉菜單選項(xiàng)。

3.3網(wǎng)站頁(yè)面設(shè)計(jì)

3.3.1首頁(yè)設(shè)計(jì)

首頁(yè)設(shè)計(jì)時(shí)，為體現(xiàn)網(wǎng)站優(yōu)化的思想，將首頁(yè)設(shè)置成為歡迎頁(yè)面，包括網(wǎng)站logo以進(jìn)入、二級(jí)主頁(yè)設(shè)置為導(dǎo)航頁(yè)面，它承載了整個(gè)網(wǎng)站的主連接，包括：二手車ppt教程下載、二手車評(píng)估視頻教程在線播放、汽車碰撞視頻、汽車二手車評(píng)估軟件下載及應(yīng)用，每個(gè)版塊都可鏈接到其相對(duì)的子頁(yè)，排版自然。

3.3.2各級(jí)子頁(yè)

每個(gè)子頁(yè)左側(cè)及右側(cè)的內(nèi)容是各個(gè)模塊的快速鏈接，包括二手車ppt教程下載、二手車評(píng)估視頻教程在線播放、汽車碰撞視頻、汽車二手車評(píng)估軟件下載及應(yīng)用等的內(nèi)容，可以在瀏覽這個(gè)頁(yè)面時(shí)，能快速鏈接到自己感興趣的頁(yè)面。為以后將網(wǎng)站建設(shè)成一個(gè)動(dòng)網(wǎng)，在右側(cè)上側(cè)安置目錄導(dǎo)航這一欄，動(dòng)網(wǎng)建成之時(shí)，欄目能及時(shí)更新，以便向同學(xué)們推薦更好的知識(shí)。中間是主要的汽車教程與試驗(yàn)內(nèi)容，根據(jù)模塊而改變。

3.4網(wǎng)站模塊制作

3.4.1懸停導(dǎo)航

使用懸停效果可以增加網(wǎng)站的動(dòng)態(tài)效果，使網(wǎng)站更具有動(dòng)感。

3.4.2 Asp無(wú)組件上傳

當(dāng)通過(guò)Http的POST方式上傳文件時(shí)，待上傳文件與表單數(shù)據(jù)一同被瀏覽器封裝成了二進(jìn)制流發(fā)送到服務(wù)器。ASP環(huán)境中Request內(nèi)置對(duì)象下的BinaryRead方法可以將封裝的二進(jìn)制流原樣讀出。通過(guò)分析讀取出的二進(jìn)制數(shù)據(jù)，可以得到待上傳文件的完整二進(jìn)制數(shù)據(jù)，將這部分?jǐn)?shù)據(jù)保存為文件，則上傳工作即可完成。

在后臺(tái)asp程序中，以前獲取表單提交的ASCII 數(shù)據(jù)，非常容易。但是如果須要獲取上傳的文件，就必須使用Request對(duì)象的BinaryRead方法來(lái)讀取。結(jié)合Request對(duì)象的TotalBytes屬性，可以將所有表單提交的數(shù)據(jù)全部變成二進(jìn)制，不過(guò)這些數(shù)據(jù)都是經(jīng)過(guò)編碼的。首先讓我們來(lái)看看這些數(shù)據(jù)是如何編碼的，有無(wú)規(guī)律可循，編段代碼，在代碼中我們將BinaryRead讀取的二進(jìn)制轉(zhuǎn)化為文本，輸出出來(lái)，在后臺(tái)的upload.asp中。

4 網(wǎng)站運(yùn)行測(cè)試

4.1設(shè)置“數(shù)據(jù)源（ODBC）”

打開(kāi)【控制面板】→【管理工具】→【數(shù)據(jù)源 （ODBC）】

進(jìn)入【數(shù)據(jù)源（ODBC）】打開(kāi)【系統(tǒng)DSN】選項(xiàng)卡點(diǎn)擊【添加】按鈕

進(jìn)入【創(chuàng)建新數(shù)據(jù)源】窗口，選擇數(shù)據(jù)源的驅(qū)動(dòng)程序【Microsoft Access Driver （.mdb）】后，進(jìn)入【ODBC Microsoft Access 安裝】窗口，在數(shù)據(jù)源名（N）文本框輸入【liuyan】

點(diǎn)擊【選擇】按鈕進(jìn)入【選擇數(shù)據(jù)庫(kù)】窗口找出數(shù)據(jù)庫(kù)點(diǎn)擊【確定】

返回【ODBC Microsoft Access 安裝】窗口點(diǎn)擊【確定】完成。

4.2利用IIS進(jìn)行網(wǎng)站運(yùn)行測(cè)試

打開(kāi)【控制面板】→【管理工具】→【Internet信息服務(wù)（IIS）】

進(jìn)入Internet信息服務(wù)（IIS）后打開(kāi)【本地計(jì)算機(jī)】→【網(wǎng)站】

右鍵打開(kāi)【默認(rèn)網(wǎng)站】→【新建】→【虛擬目錄】

進(jìn)入【歡迎使用虛擬目錄創(chuàng)建向?qū)А看翱?，選擇【下一步】繼續(xù)

進(jìn)入【虛擬目錄別名】窗口輸入虛擬目錄的別名（Web1），點(diǎn)擊【下一步】繼續(xù)

進(jìn)入【網(wǎng)站內(nèi)容】窗口輸入網(wǎng)站的本地文件夾E：＼bywz

點(diǎn)擊【下一步】繼續(xù)

進(jìn)入【訪問(wèn)權(quán)限】窗口全選所有選擇，點(diǎn)擊【下一步】繼續(xù)

進(jìn)入【已成功完成虛擬目錄創(chuàng)建向?qū)А看翱?，點(diǎn)擊【完成】按鈕完成

在打開(kāi)【默認(rèn)網(wǎng)站】→【W(wǎng)eb1】虛擬目錄，找出【index.html】

點(diǎn)擊右鍵，在右鍵菜單點(diǎn)擊瀏覽即可瀏覽網(wǎng)站

4.3網(wǎng)站鏈接測(cè)試

網(wǎng)站完成之后，開(kāi)始網(wǎng)站的鏈接測(cè)試。從首頁(yè)開(kāi)始，測(cè)試每一個(gè)鏈接，確保沒(méi)有一個(gè)錯(cuò)誤鏈接，沒(méi)有一個(gè)空鏈接。

4.4頁(yè)面檢查

檢查每一張頁(yè)面，在二級(jí)子頁(yè)中，為保證三次點(diǎn)擊能到達(dá)指定頁(yè)面，在文章上方加入頁(yè)面導(dǎo)航條，方便同學(xué)們?yōu)g覽網(wǎng)頁(yè)。

4.5代碼檢查

檢查每一張頁(yè)面的代碼，同時(shí)檢查外部樣式CSS代碼，刪去不需要的代碼，整合類似代碼，確保網(wǎng)站中沒(méi)有多余的代碼。給每一個(gè)圖片加上alt屬性，便于搜索引擎搜索到圖片文件。

4.6站點(diǎn)文件夾精簡(jiǎn)

完成所有網(wǎng)站檢查后，開(kāi)始文件夾的精簡(jiǎn)，刪除沒(méi)有用到的文字圖片等內(nèi)容，使站點(diǎn)文件夾中不存在不必要的文件。

5 結(jié)語(yǔ)

用Dreamweaver、Photoshop、Flash、IIS服務(wù)器等軟件建立了二手車評(píng)估實(shí)踐教學(xué)平臺(tái)網(wǎng)站，完成了資料采集、網(wǎng)站布局、網(wǎng)頁(yè)美工、動(dòng)態(tài)ASP上傳、在線實(shí)踐教學(xué)的相關(guān)內(nèi)容。該網(wǎng)站文本簡(jiǎn)明、通俗易懂，整體結(jié)構(gòu)清晰、統(tǒng)一，網(wǎng)站資源豐富、層次清楚、內(nèi)容嚴(yán)謹(jǐn)，網(wǎng)站導(dǎo)航清晰，布局簡(jiǎn)單卻不單調(diào)，有一定的實(shí)用性。

編輯∕岳 鳳