Web 课程设计
1.任务
详细介绍自己的家乡，要求包括以下部分板块：风土人情、家乡风貌、家乡土特产品、家乡经济、家乡教育、文化传承、历史名人大事、历史名胜古迹、家乡社区与论坛
实验要求：
- 各板块的静态页面，参考实验一和实验二
- 页面中的各种动态效果和交互，如家乡图片的切换显示，可以使用 JS 插件或者 HTML5 实现
- 家乡所在位置的地图显示，参考实验七
- 论坛可以发帖、回帖、删除，所输入的内容在页面上有显示（不需要保存到数据库），参考实验五和实验六
2.页面的设计（分层、分块等）
如下图所示，页面分成四大模块：
① 是用来展示标题--茂名；
② 是具体内容模块的导航目录，以及登录信息；
③ 是用来呈现主要内容，又划分为两大模块，为下图中的序号 ⑤ 和 ⑥，⑤ 页面是用来实现以动态形式切换家乡图片；⑥ 页面又细分为图中 ⑦ 和 ⑧，⑦ 是用来呈现各个模块的主要内容，⑧ 是导航目录。
④ 主要是底部，保证整体页面效果，没有具体内容。
图一 页面设计布局
3.代码的实现思路（伪代码、流程图或者调用关系）
1、① 页面中主要是通过设置背景图片来呈现标题；
2、② 页面是具体内容模块的导航目录，以及登录信息，这一步实现基本操作，相关导航功能的跳转以及其他操作到后面页面实现布局在实现，这一步代码实现思路如下：
图二 页面 ② 代码实现流程图
3、③ 页面先设置好高度划分为两大模块，为上图中的序号 ⑤ 和 ⑥：
其中 ⑤ 是通过 jQuery 插件实现的一个图片切换，在实现中其实运用了一种逆向思维，图片切换其实背后图片顺序是保持不变，变化的是与他们一一对应决定他们属性的类，根据对应选择改变各个图片的类，加上切换动画效果，从而到达一种逼真的图片切换视觉，具体实现思路如下：
图二 页面 ⑤ 代码实现流程图
4、其中 ⑥ 页面又细分为图中 ⑦ 和 ⑧，⑦ 是用来呈现各个模块的主要内容，⑧ 是导航目录，同上面 2 中相似，⑦ 页面的实现主要用了一个 div 和 iframe 框架，两者中同时会有一个隐藏一个显示，其中 div 实现论坛的功能，iframe 用来呈现家乡的其他介绍，像文化、教育等，这些另外定义 html+css 实现，由其引用。如下：
图三 页面 ⑦ 模块选择实现图
5、实现导航页面功能的跳转后，分步实现文化教育等各个模块，因为都是独立的实现，实现过程都是静态。
最后在页面 ⑦div 中实现论坛功能，论坛页面也分为两大模块，主页面和评论区，主页面是用来呈现各个帖子信息及发帖的，评论区是当点击具体帖子的评论时进入，评论区包含当前点击的帖子以及它的评论。
如下：
图四 论坛主页面与评论区切换图
6、论坛主页面的实现思路：
图五 论坛主页面实现流程图
7、评论区页面实现思路：
图六 评论区页面实现流程图
8、评论的保存主要是用了一个二维数组，一维对应相应的帖子，二维索引对应该帖子的评论，评论定义了一个包含姓名、头像、内容、评论时间的对象来保存。
4.页面效果的截图和功能说明
1、标题、目录、家乡图片切换区
图十七 页面效果图一
2、主要内容区
图十八 页面效果图二
3、各个模块内容呈现集：
图十九 页面效果图三
4、论坛主页面及发表帖子功能介绍：
图二十、二十一 页面效果图四
5、评论区效果呈现如下：
图二十二 页面效果图五
参考文献
- 基于J2EE的远程教育平台的开发与实现（吉林大学·葛瑛）
- 基于J2EE的远程教育平台的开发与实现（吉林大学·葛瑛）
- 基于.NET的Flash网上教学系统的设计与实现（吉林大学·刘颖）
- 基于Internet的机械基础网络课程建设关键技术研究（中国人民解放军国防科学技术大学·冯兴智）
- 基于.net的web教学平台设计与实现（电子科技大学·吴泽徐）
- 基于Web的远程教学平台的设计和实现（青岛理工大学·牟颜君）
- 基于J2EE的远程教育平台的开发与实现（吉林大学·葛瑛）
- 基于J2EE的Web应用程序在仪表在线网站中的应用（浙江大学·周明）
- 基于交互学习的精品课程网站设计与开发研究——以《甘肃民间美术》精品课程为例（西北师范大学·朱举英）
- 基于MVC的在线教育平台的研究与设计（苏州大学·曹晨）
- 基于J2EE的高校课堂教学管理系统设计与分析（电子科技大学·张霖婧）
- 交互式远程教学系统的设计与实现（上海交通大学·罗明朗）
- 基于Web的远程教学系统设计与实现（大连理工大学·孙宝忠）
- 基于J2EE的远程教育平台的开发与实现（吉林大学·葛瑛）
- 基于JSP的校园网站的设计与实现（吉林大学·张帆）
本文内容包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主题。发布者：毕设项目助手 ，原文地址：https://m.bishedaima.com/yuanma/35775.html
