基于CDIO的面向对象程序设计课程网络教学平台前台设计与实现

黄演锋++罗琪

摘 要：本系统把"CDIO工程教育理念和教学大纲"整合在网络教学平台中，提出搭建网络平台，需求不仅仅局限在功能和信息方面，而更多的转向于前端的界面表现方面。要设计开发出一套界面美观，交互友好的前端界面所涉及的知识和技能也是很广泛的。本文就基于CDIO的面向对象程序设计课程网络教学平台的前端设计与制作流程做了深入剖析。

关键词：photoshop技术；网页前端设计；HTML技术；CSS技术

传统的在线学习系统往往功能比较单一，有时仅仅是教学资源的采集，发布平台。本项目为教学活动中信息发布，教学管理，操作实践，测评考核，辅导答疑，交流探讨等各种环节都提供了相应的功能模块。教学任务中大多数活动都能在该平台提供的支持下更高效的地展，很大程度上克服了传统教学平台时间，空间的局限性。

本系统充分把“CDIO工程教育理念和教学大纲”整合在网络教学平台中，从产品的构思（Conceive）、设计（Design）、实现（Implement）和运作（Operate）等产品研发运行周期的不同阶段入手，旨在使学习者能够体会和适应当代工业生产环境对工程人员的需求。

本项目主要是搭建网络教育平台，主要采用Java EE与

Struts 2框架、Hibernate框架、Spring框架的集成开发。

一、网站定位

本网站为在线教育型网站。建立该网站的主要目的使得学生通过互联网实现自由、自主学习的目的，能够通过网站首页，课程，发现，让学员清楚了解平台所提供的主要信息。 网站栏目清晰明了，网站本身就是平台功能的体现。栏目之间的设定都是在服务于如何让学员更好更方便学习所想要的知识。

二、网站前台建设要求

本网站前台采用css+div，javascript。网页主要体现清爽的感觉，采用白蓝的明色色彩组合，制造出平静恬静的效果，时学生能以一种平和的心情学习知识，特效方面，主要采用js方式进行呈现。让网站的一些展示动起来，让网站更有生机，展现不用的呈现方式，让用户在视觉上产生冲击感，提高学习兴趣。

网站的前台框架如下：

主页：以网页静态的方式展示，需要有登陆功能、注册功能、密码找回功能。课程的动态及相关信息在第一时间呈现给学生，提高关注度。

登陆功能：放置在最显眼的位置，让用户第一时间找到登陆位置，曾加用户体验度。

注册功能：放置在登陆功能之后，第二视觉强度，便于用户注册帐号。

产品介绍：本模块主要展示网站的在线产品，产品的相关视频，点击之后就可以观看视频，更多的视屏跳转到新页面。关于我们：每个模块对应网站的相关内容。

注册页面：网站的帐号以邮箱的方式为帐号注册。

登陆页面：网站的帐号以邮箱的方式登陆。

产品介绍页面：本模块主要展示网络课程的相关视频，点击之后就可以观看视频，更多的视屏跳转到新页面。

三、设计说明

本教育网络平台采用AI在WEB前端的开发与应用，对网页的矢量图形进行快速又精确地进行设计。采用PS做WEB美工。首先，建立WEB图，新建文件长度一般都是1920象素这样刚好部满目前最高分辨率的苹果电脑的显示， 高度可以自己按需求定。其次，作图，先打开辅助标尺以保证作图布局的规范行，然后设计WEB布局。WEB页的布局采用平整和层次两种类型。平整布局使得整个页面做出的效果图就像画在纸上一样的画平整。层次布局应用在PS的混合模式中，对整个布局有把握再设计效果图 LOGO BANNER和内容。最后，采用切割技术对Web页面进行调整。在进行储存时WEB格式注意储存为GIF格式，这样文件才会更小。

（一）设计效果。整个页面布局运用上下分栏的方式呈现，采用绝对定位和浮动定位。绝对定位的优势在于，可以精确控制任何元素的位置。浮动定位将块元素和独占一行的元素并列起来，不会让整行只有一个元素。

本网站的亮点在于banner，以简单多变的文字表达出该网络学习平台的学习理念，提高网络关注度，添加了JS特效来展现课程推荐专栏，图片变化的效果使浏览增添了许多乐趣。

在设计首页时，起初JS代码在不同浏览器兼容性出现了问题，最后采用了jquery框架。布局主要采用分栏的方式，以各个板块展示不同的内容信息。导航搜索框采用js特效进行自动伸缩，当鼠标选中搜索框时，搜索框自动变长，网站风格简约，导航醒目，分栏的布局使条理清晰明了。

（二）列表页设计说明。列表页的重点在内容部分，以图文混合的形式进行排版，另外添加了显示全部的链接，用户可以选择浏览更多的内容。布局主要采用通栏的方式，以各个板块展示不同的内容信息。内容展示分左右两栏，

四、兼容方案的设计

用户通常会使用浏览器访问该网络平台。各浏览器解译网站代码的方式略有不同，这意味着。为了避免网站在不同浏览器中显示的效果会有所差异，依赖于浏览器特定的行为本次设计采用一些方式来确保网站在不同的浏览器中都能正确显示。

（一）使用有效的 HTML 和 CSS 编写网页。有效、易解译的 HTML 可保证网页得以正确显示，而 CSS 可以将网页的外观和内容分离开来，使网页可以更快速地载入和呈现给访问者。本设计使用有效的 HTML 和 CSS 编写网页，然后在尽可能多的浏览器中测试这些网页显示的效果，并使用W3 Consortium 免费提供的在线 HTML 和 CSS 验证工具验证网页，使用HTML Tidy 的工具快捷地清理代码。

（二）指定字符编码，编码置于文档（或框架）的顶部。为使浏览器可以呈现您网页上的文字，本设计始终为相应的文档指定编码。为了避免某些浏览器无法识别文档深处的字符集声明，本设计还将此编码置于文档（或框架）的顶部。此外，为了确保网络服务器不发送相冲突的 HTTP 标头。使用content-type：

text/html； charset=utf-8 之类的标头替代网页中的所有字符集声明。

（三）使用Flash和富媒体指南，使网页易于访问。本设计按照 Flash 和其他富媒体使用指南进行操作，然后在 Lynx 这样的纯文本浏览器中对网站进行测试。提供针对富媒体内容和功能的纯文本浏览方式，有助于搜索引擎更方便地抓取本网站并将其编入索引，同时也大大方便了使用屏幕读取器等技术访问。

结束语：好的开端是成功的一半，通过本次的大学生创新计划，让我体会到要做好一个网站，前期的规划是最重要的，准备充分才能事半功倍，而不是毫无目的的随心所欲，这是网站开发中要特别注意的问题之一。而在网站规划过程中搜集相关资料，并从中分析有用的信息进行整理，这锻炼了我对信息收集整理的能力，将对我以后的学习和工作是有益的。虽然创新设计项目仍有一些不足，但过程中的体验却让我受益匪浅，那对我而言将是一种宝贵的财富，让我在今后的学习及工作中有所借鉴，不断地提高和完善自我。

参考文献：

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

[2] 阮文江主编 JavaScript程序设计基础教程[M] 人名邮电出版社 2010.8

[3] 王亚芬著 Photoshop 7标准教程[M] 海洋出版社 2009.8