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

《基于cdio的面向对象程序设计课程网络教学平台前台设计与实现》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、基于CDIO的面向对象程序设计课程网络教学平台前台设计与实现摘要：本系统把nCDIO工程教育理念和教学大纲n整合在网络教学平台中，提出搭建网络平台，需求不仅仅局限在功能和信息方面，而更多的转向于前端的界面表现方面。要设计开发出一套界面美观，交互友好的前端界面所涉及的知识和技能也是很广泛的。本文就基于CDIO的面向对象程序设计课程网络教学平台的前端设计与制作流程做了深入剖析。关键词：Photoshop技术；网前端设计；HTML技术；CSS技术传统的在线学习系统往往功能比较单一，有时仅仅是教学资源的采集，发布平台。本项目为教学活动中信息发布，教学管理，操作实践，测评考核，辅导答疑，交流探讨

2、等各种环节都提供了相应的功能模块。教学任务中大多数活动都能在该平台提供的支持下更高效的地展，很大程度上克服了传统教学平台时间，空间的局限性。本系统充分把“CDI◦工程教育理念和教学大纲”整合在网络教学平台中，从产品的构思(Conceive),设计(Design)、实现(Implement)和运作(Operate)等产品研发运行周期的不同阶段入手，旨在使学习者能够体会和适应当代工业生产环境对工程人员的需求。本项目主要是搭建网络教育平台，主要采用JavaEE与Struts2框架、Hibernate框架、Spring框架的集成开发。一、网站定位本网站为在线教育型网站。建立该网站的主要目的使得

3、学生通过互联网实现自由、自主学习的目的，能够通过网站首页，课程，发现，让学员清楚了解平台所提供的主要信息。网站栏目清晰明了，网站本身就是平台功能的体现。栏目之间的设定都是在服务于如何让学员更好更方便学习所想要的知识。二、网站前台建设要求本网站前台采用css+div,javascripto网页主要体现清爽的感觉，采用白蓝的明色色彩组合，制造出平静恬静的效果，时学生能以一种平和的心情学习知识，特效方面，主要采用js方式进行呈现。让网站的一些展示动起来，让网站更有生机，展现不用的呈现方式，让用户在视觉上产生冲击感，提高学习兴趣。网站的前台框架如下：主页：以网页静态的方式展示，需要有登陆功能、

4、注册功能、密码找回功能。课程的动态及相关信息在第一时间呈现给学生，提高关注度。登陆功能：放置在最显眼的位置，让用户第一时间找到登陆位置，曾加用户体验度。注册功能:放置在登陆功能之后，第二视觉强度，便于用户注册帐号。产品介绍：本模块主要展75网站的在线产品，产品的相关视频，点击之后就可以观看视频，更多的视屏跳转到新页面。关于我们：毎个模块对应网站的相关内容。注册页面：网站的帐号以邮箱的方式为帐号注册。登陆页面：网站的帐号以邮箱的方式登陆。产品介绍页面：本模块主要展示网络课程的相关视频，点击之后就可以观看视频，更多的视屏跳转到新页面。三、设计说明本教育网络平台采用AI在WEB前端的开发与应

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

6、，采用绝对定位和浮动定位。绝对定位的优势在于，可以精确控制任何元素的位置。浮动定位将块元素和独占一行的元素并列起来，不会让整行只有一个元素。本网站的亮点在于banner，以简单多变的文字表达出该网络学习平台的学习理念，提高网络关注度，添加了jS特效来展现课程推荐专栏，图片变化的效果使浏览增添了许多乐趣。在设计首页时，起初jS代码在不同浏览器兼容性出现了问题，最后采用了jquery框架。布局主要采用分栏的方式，以各个板块展示不同的内容信息。导航搜索框采用js特效进行自动仲缩，当鼠标选中搜索框时，搜索框自动变长，网站风格简约，导航醒目，分栏的布局使条理清晰明了。（二）列表页设计说明。列表页

7、的重点在内容部分，以图文混合的形式进行排版，另外添加了显示全部的链接，用户可以选择浏览更多的内容。布局主要采用通栏的方式，以各个板块展示不同的内容信息。内容展不分左右两栏，四、兼容方案的设计用户通常会使用浏览器访问该网络平台。各浏览器解译网站代码的方式略有不同，这意味着。为了避免网站在不同浏览器中显示的效果会有所差异，依赖于浏览器特定的行为本次设计采用一些方式来确保网站在不同的浏览器中都能正确显示。（一）使用有效的HTML和CSS编写网页。有效