周芳 ZHOU Fang；潘丽丽 PAN Li-li
（青岛理工大学琴岛学院计算机工程系，青岛 266071）
（School of Computer sciences of Qindao College，Qingdao Technological University，Qingdao 266071，China）
摘要： 本文针对《VB程序设计》精品课程建设的需求，采用ASP，Dreamweaver和Fireworks等综合工具研发了《VB》精品课程资源集成平台，并提出了一些看法。
Abstract： Aimed at the requirements of the excellent course of VB Program Design, this paper uses the synthesis tools, such as ASP,Dreamweaver and Fireworks and so on to research and invent the resource integration platform of VB excellent course and put forward some opinions.
教育期刊网 http://www.jyqkw.com
关键词 ： VB；精品课程；资源集成平台；ASP；Dreamweaver
Key words： VB；excellent course；resource integration platform；ASP；Dreamweaver
中图分类号：TP393 文献标识码：A
文章编号：1006-4311（2015）06-0249-02
1 平台设计需求
1.1 功能需求：①平台界面要美观、大方，整体风格协调统一，导航层次分明，操作简单、方便师生。②学科特色要鲜明，无论是平台的总体风格，还是图片、动画等都应具备学科特色，并增强浏览的趣味性和可观赏性[3]。③提供学生丰富的学习资源并具有检索功能，以辅助学生自主学习并能及时找到所需要的材料。④具有师生及时交流的空间。为师生提供了一个专业交流与互动的空间，无论学生在哪，只要有网络就可以将问题提交到平台上。⑤具有自我检测功能。为方便学生随学随练、随练随测，需要提供一个章节测试功能。为检验学生综合运用本学科所学知识的能力，还需要提供综合测试功能。
1.2 性能需求：①处理数据的准确性和及时性要好，查询时应确保关键字在相应的数据范围中对应的记录都能查到。②系统的可扩充性要高，精品课程建设是一项长期的系统工程，所以要求平台提供足够“空间”对功能进行调整和扩充。
2 平台的结构和功能
2.1 平台结构 平台的总体结构如图1所示。
2.2 功能 各模块的主要功能概述如下：
①课程简介：主要介绍《Visual Basic程序设计》课程的相关内容，它由四部分内容构成，即课程简介，课程规划，教学大纲以及课程使用的教材。②教学团队：主要将课程负责人，团队成员构成以及师资培养情况展示在页面上。③成果展示：主要展示课程负责人及团队教师获得的相关科研项目和奖励情况，分学术水平和成果展示两部分，其中将教师的获奖情况制作成flash动态进行展示，以增强页面的可观赏性。④实验与试卷：由于《Visual Basic程序设计》课程不仅有理论教学内容，还要辅助上机实验教学。在这里主要将实验内容、操作要求以及操作的参考过程展示在页面中；同时附有往年的实验考题和试题。⑤下载专区：此模块提供《Visual Basic程序设计》课程教学大纲，教学课件，授课的电子教案，学生实验报告以及部分教师的授课视频，供用户下载使用。⑥综合材料：此模块包括本门精品课程的建设情况，教材的建设情况，实践性教学的实施情况，教学的研究和改革以及教师教学的方法等内容。⑦留言板：主要提供师生在线交流的地方。⑧在线测试：该模块主要包括章节测试，综合测试，成绩查询以及退出系统四种功能。⑨申报书：将本门课程在申报过程中的相关文件展示出来，主要有申报书，建设方案，中期报告以及佐证材料。
3 平台实现
本文主要介绍平台首页面最难实现的部分过程及对应代码。首页面最难实现的是页面中元素的定位。本文经过反复实践和测试，最终确定采用绝对定位方法来解决这一难题。绝对定位方法为H3（position：absolute；top 100px）。使用绝对定位的优势是可以精确控制元素在任何位置。它可将页面中的某个元素从其原来的位置上移除，并重新定位在期望的任何位置上，且移动到指定位置之后，该元素原来占用的控件将释放。
本文在首页中使用了9个div标签来布局，首先添加一个大的div（id为main），设置其宽度属性，然后在其中嵌套其它的div，分别指定宽度和高度，主要代码如下：
①嵌套DIV代码
<div id="main">
<div id="kecheng">
<a href="kcjs.html" class="more">kecheng</a>
<p align="justify" class="kengcheng_p">…</p>
</div>
<div id="kaoshi">
②设置属性代码
#main {
background-image: url(../imgs/main.gif);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 532px;
width: 948px;
position: relative;
}
在使用嵌套div的时候，绝对定位有个极为有用的特性，如果某个绝对定位元素的容器被定位过，那么为该元素指定的top和left值将不再基于该页面的根html，而是会基于容器左上角计算偏移量，如id为"kaoshi"的嵌套DIV其定位方式如下：
#main #kaoshi {
margin: 0px;
padding: 0px;
height: 254px;
width: 309px;
position: absolute;
top: 10px;
right: 11px;
}
该div的起始位置是基于其容器main的左上角进行计算的，其他嵌套div的实现方法类似，只需测量好设计图中各个组成部分的尺寸，确定div的起始位置就可以很好地完成网页中元素的定位，从而完成首页的布局。
4 结语
本文采用ASP、DreamWeaver和Fireworks等综合技术设计和开发了教、学兼备，师生互动，在线测试等功能的集成平台，以达到优质资源共享。该平台具有较强的稳定性、扩充性、全面性。但精品课程建设是一项长期的系统工程，需要及时补充和完善，以满足师生不断增长的“教与学”需求。
教育期刊网 http://www.jyqkw.com
参考文献：
[1]http://www.jpkcnet.com/new/zhengce/Announces_detail.asp?Announces_ID=13.
[2]Wang Xiuying & Zhou Fang(2011). The Online Testing System With Explain Function As Students Answer Mistake.2011 IEEE International Symposium on IT Medicine and Education. vol.2 of 2. December 9-11, 2011,Guangzhou,China:456-460.
[3]李学农，陈庆.精品课程网站设计策略及创建思路[J].中国医学教育技术，2006，20（5）：389-391.