基于Web的教学网站前端开发设计.zip

**摘要** 21世纪是信息化的时代，信息化物品不断地涌入我们的生活。同时，教育行业也产生了重大变革。传统的身心教授的模式，正在被替代。互联网模式的教育开辟了一片新的热土。 这算是对教育行业的一次重大挑战。截至目前，众多教育行业领头羊，纷纷开辟互联网化的教育模式。作为高校更不能例外。如今，任何一所高校都拥有自己的官方网站，以达到宣传教育的目的。算是对互联网教育的一种进步。 这次课程设计，主要以山东师范大学历山学院为原型，制作WEB前端开发课程的课程设计网站。主要面向高校学生了解并熟悉Web课程，并且可以进行在线学习。同时通过课程设计网站，我们更能清楚了解课程的关键，更了解教师。甚至可以在线提交建议给老师。促进师生学习默契。 # 一、项目简介 Web课程重在学习如何进行网页设计，对同学们来说网站并不陌生，所以建设Web课程设计网站可能更易接受。同时，Web设计的老师，也是精通计算机的老师，对于网站的资源的上传和管理，更能接受。 本次课程设计主要以山东师范大学历山学院Web开发课程为原型进行设计。综合考虑，教师简介、学习资源、课程介绍等几个方面进行重点功能开发。 同时建设教学网站也是非常有意义的。 # 二、项目功能分析 ## 2.1 总体介绍 项目主页主要包括：搜索栏目、菜单、时间及新闻、焦点图、课程主要知识介绍、合作企业及网站底部等几个模块。  ​ 图2.1 主页展示 ## 2.2 页面头部介绍 小工具条：作为小导航，主要辅助用户跳转到指定功能界面进行操作。显示在界面最上方，左侧提示欢迎信息，右侧进行导航常用操作。  ​ 图2.2小工具预览 搜索栏目：作为一个页面的重中之重开头，使用左中右三栏布局，分别显示网站Logo、搜索工具栏以及二维码提示功能。其中搜索栏目下方包含热点关键词，用来推荐给用户。用户点击之后即可直接搜索对应的关键词。  ​ 图2.3页面头部 手机访问提示功能，综合运用CSS和JS完成，实现鼠标移入显示二维码，手机扫描直接进入。如图为移入显示二维码界面。  ​ 图2.4手机访问提示 ## 2.3 导航栏设计 导航栏主要包括网站主要功能页面的导航。并用颜色区分当前正在打开的网页。  ​ 图2.5导航 ## 2.4 焦点图和登录导航界面 左侧，焦点图用来介绍特色课程设计。同时焦点图采用高清大图更有感染力。右侧介绍登录注册以及讲师的信息。  ​ 图2.6焦点图和登录栏目 ## 2.5 课程主要内容导航 主页显示主要内容大纲，更加了解Web课程信息：  ​ 图2.7主要学习部分 ## 2.6 合作企业展示 展示合作企业提升认可度，更为课程设计认证。  ​ 图2.8合作企业展示 ## 2.7 页面底部 底部主要介绍学院微信公众号二维码，以及版权的相关信息。  ​ 图2.9页面底部设计 ## 2.8 返回顶部设计 页面右下角添加返回顶部的功能设计，当浏览到页面底部的时候可以快速返回页面顶部。  ​ 图2.10返回顶部 # 三、主讲教师 ## 3.1 总体介绍  ​ 图2.11 主讲教师页面主要介绍教师的荣誉信息、出版书籍、学生们对老师的评价 ## 3.2 面包屑导航 面包屑导航主要显示当前路径，为用户了解所在界面，方便用户返回上一层。  ​ 图2.12面包屑导航 ## 3.3 教师主要信息  ​ 图2.13 主要信息 ## 3.4 教学经历 运用时间轴的设计，显示教师的教学经历：  ​ 图2.14教学经历 ## 3.5 出版书籍 展示主讲教师的出版书籍的情况。  ​ 图2.15出版书籍 ## 3.6 教师评价 增加学生对教师的评价信息，更了解老师。  ​ 图2.16 教师评价信息 # 四、实践大纲&实践项目 实践大纲主要用来显示Web开发设计的重要知识点，让同学们，更知道那些是重点。  ​ 图2.17学习大纲 实践项目主要介绍Web开发的实践项目要求：  ​ 图2.18实践项目 # 五、课程设计 重要的课程设计展示，以图文结合的方式展开。  ​ 图2.19课程设计 # 六、教学资源 本页面提供教学资源的展示下载。可实现下载功能。并添加上传资源链接进行设计。  ​ 图2.20资源下载页面 # 七、建议反馈 提供建议反馈功能，并可检测用户输入并进行提示操作：  图2.21意见反馈界面 # 八、主要技术实现 ## 8.1 实时显示时间 主页实时显示当前时间，采用定时执行函数，不断获取当前时间，并显示在固定的位置。  ​ 图3.1时间显示代码 ## 8.2 焦点图实现 焦点图实现，布局采用左右布局，一次排列图片，并设置固定大小超出范围不显示。根据偏移量控制图片的显示  ​ 图3.2部分代码显示 ## 8.3 手机快速访问 利用二维码技术实现，通过扫描二维码即可进入网站，鼠标移动到“用手机访问”链接，即可显示图片二维码。  ​ 图3.