二手车评估实践教学网站的制作

马晓春

摘要：高等院校的学生在学习二手车评估课程时，实习实践的机会比较少。基于这个原因，本文设计了以本校学生为主，利用互联网在线练习二手车鉴定评估的实践教学网站。该网站采用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上传、在线实践教学的相关内容。该网站文本简明、通俗易懂，整体结构清晰、统一，网站资源丰富、层次清楚、内容严谨，网站导航清晰，布局简单却不单调，有一定的实用性。

编辑∕岳 凤