二手車評估實踐教學網站的制作

馬曉春

摘要：高等院校的學生在學習二手車評估課程時，實習實踐的機會比較少。基于這個原因，本文設計了以本校學生為主，利用互聯網在線練習二手車鑒定評估的實踐教學網站。該網站采用DIV+CSS方式構建完成，大大縮減頁面代碼，更好地控制頁面布局，結構簡明，讓人一目了然。

關鍵詞：二手車評估；網站；DIV+CSS

1 引言

隨著網絡的興起，我國的高等教育教學方式也在隨之變化。網絡提供給我們共同的資源，同時我們也把自己的信息發布出去，大家共享。高等教育的實踐教學不同于職業教育，但也重視學生的實踐經驗與實踐能力，其中有很多課程可以通過網絡來完成實踐教學內容，既調動學生學習的積極性和主動性，又培養了學生的科學探索精神和創新能力。

實踐教學網絡平臺是克服教學資源不足的有效途徑，是實現在資金短缺、設備更新快的條件下能更好地完成實踐教學的最佳手段。因此，發達國家十分重視實踐教學網絡的建設，遠程教學在許多國家已十分普及。據世界經合組織研究資料顯示，到目前為止，世界上已經有一百多個國家和地區開展了實踐教學網絡化的教育，網絡化教育己成為國際教育發展的共同趨勢。

2 網站規劃

2.1網站內容

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

2.2開發技術

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

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

Internet Information Services（IIS，互聯網信息服務），是由微軟公司提供的基于運行Microsoft Windows的互聯網基本服務。最初是Windows NT版本的可選包，隨后內置在Windows 2000、Windows XP Professional和Windows Server 2003一起發行，但在普遍使用的Windows XP Home版本上并沒有IIS。

2.3軟件環境

（1）數據庫：Microsoft Access

（2）網頁腳本：JavaScript

（3）網頁編輯工具：Micromedia Dreamweaver 8

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

（5）其他支撐組件：ODBC數據源、Internet 信息服務（IIS）

2.4硬件環境

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

主板 聯想 KL2

內存 4 GB （ 爾必達 DDR3 1333MHz / 金士頓 DDR3 1333MHz ）

主硬盤：希捷 ST9320423AS （ 320 GB / 7200 轉/分 ）

主顯卡：ATI Mobility Radeon HD 5650 （ 1 GB / 聯想 ）

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

網卡：博通 BCM57780 NetLink Gigabit Ethernet / 聯想

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

3 網站設計

3.1站點設計

打開Dreamweaver 8→站點→新建站點

進入【站點定義】窗口，點擊【高級】選項卡進入【本地信息】分類窗口分別輸入：站點名稱：站點——二手車實踐教學平臺

本地跟文件夾： E：＼設計＼bywz

進入【測試服務器】窗口，分別選擇

服務器模型：ASP JavaScript

訪問：本地/網絡

點擊【確定】按鈕完成站點設置

完成后右下角的站點窗口會顯示一個新的站點。

3.2網站形象設計

3.2.1網站色彩

網站采用了汽車的金屬冷色為主色調，顏色層次清晰，界面美觀簡潔。金屬質感以及大幅跑車背景對瀏覽者產生視覺上的沖擊。同時給人以汽車的悅動質感，網頁之中汽車圖片樣式豐富，各種樣式的名車配圖吸引大眾的目光。

3.2.2字體設計

網站中正文文字均采用宋體12～14號字，大標題則采用黑體，具體字體大小根據網站的美觀設計制定。

3.2.3 Logo設計

汽車二手車實踐平臺以汽車為中心實踐主題其為實踐教學網頁，因此logo的主要字體選用特殊字體——行楷。以行楷來表現標題更能體現出汽車的時代感。

3.2.4導航設計

將導航放置于logo的右邊，五個導航并排安置，同時在導航上做了懸停效果，首頁上一直有懸停效果展示。五個導航并排安置，并除了首頁之外，都設置隱藏下拉菜單選項。

3.3網站頁面設計

3.3.1首頁設計

首頁設計時，為體現網站優化的思想，將首頁設置成為歡迎頁面，包括網站logo以進入、二級主頁設置為導航頁面，它承載了整個網站的主連接，包括：二手車ppt教程下載、二手車評估視頻教程在線播放、汽車碰撞視頻、汽車二手車評估軟件下載及應用，每個版塊都可鏈接到其相對的子頁，排版自然。

3.3.2各級子頁

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

3.4網站模塊制作

3.4.1懸停導航

使用懸停效果可以增加網站的動態效果，使網站更具有動感。

3.4.2 Asp無組件上傳

當通過Http的POST方式上傳文件時，待上傳文件與表單數據一同被瀏覽器封裝成了二進制流發送到服務器。ASP環境中Request內置對象下的BinaryRead方法可以將封裝的二進制流原樣讀出。通過分析讀取出的二進制數據，可以得到待上傳文件的完整二進制數據，將這部分數據保存為文件，則上傳工作即可完成。

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

4 網站運行測試

4.1設置“數據源（ODBC）”

打開【控制面板】→【管理工具】→【數據源 （ODBC）】

進入【數據源（ODBC）】打開【系統DSN】選項卡點擊【添加】按鈕

進入【創建新數據源】窗口，選擇數據源的驅動程序【Microsoft Access Driver （.mdb）】后，進入【ODBC Microsoft Access 安裝】窗口，在數據源名（N）文本框輸入【liuyan】

點擊【選擇】按鈕進入【選擇數據庫】窗口找出數據庫點擊【確定】

返回【ODBC Microsoft Access 安裝】窗口點擊【確定】完成。

4.2利用IIS進行網站運行測試

打開【控制面板】→【管理工具】→【Internet信息服務（IIS）】

進入Internet信息服務（IIS）后打開【本地計算機】→【網站】

右鍵打開【默認網站】→【新建】→【虛擬目錄】

進入【歡迎使用虛擬目錄創建向導】窗口，選擇【下一步】繼續

進入【虛擬目錄別名】窗口輸入虛擬目錄的別名（Web1），點擊【下一步】繼續

進入【網站內容】窗口輸入網站的本地文件夾E：＼bywz

點擊【下一步】繼續

進入【訪問權限】窗口全選所有選擇，點擊【下一步】繼續

進入【已成功完成虛擬目錄創建向導】窗口，點擊【完成】按鈕完成

在打開【默認網站】→【Web1】虛擬目錄，找出【index.html】

點擊右鍵，在右鍵菜單點擊瀏覽即可瀏覽網站

4.3網站鏈接測試

網站完成之后，開始網站的鏈接測試。從首頁開始，測試每一個鏈接，確保沒有一個錯誤鏈接，沒有一個空鏈接。

4.4頁面檢查

檢查每一張頁面，在二級子頁中，為保證三次點擊能到達指定頁面，在文章上方加入頁面導航條，方便同學們瀏覽網頁。

4.5代碼檢查

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

4.6站點文件夾精簡

完成所有網站檢查后，開始文件夾的精簡，刪除沒有用到的文字圖片等內容，使站點文件夾中不存在不必要的文件。

5 結語

用Dreamweaver、Photoshop、Flash、IIS服務器等軟件建立了二手車評估實踐教學平臺網站，完成了資料采集、網站布局、網頁美工、動態ASP上傳、在線實踐教學的相關內容。該網站文本簡明、通俗易懂，整體結構清晰、統一，網站資源豐富、層次清楚、內容嚴謹，網站導航清晰，布局簡單卻不單調，有一定的實用性。

編輯∕岳 鳳