WEB课程设计——我的家乡

Web 课程设计 1,任务 详细介绍自己的家乡,要求包括以下部分板块:风土人情,家乡风貌,家乡土特产品,家乡经济,家乡教育,文化传承,历史名人大事,历史名胜古迹,家乡社区与论坛 实验要求: 各板块的静态页面

本文包含相关资料包-----> 点击直达获取<-------

Web 课程设计

1.任务

详细介绍自己的家乡,要求包括以下部分板块:风土人情、家乡风貌、家乡土特产品、家乡经济、家乡教育、文化传承、历史名人大事、历史名胜古迹、家乡社区与论坛

实验要求:

  1. 各板块的静态页面,参考实验一和实验二
  2. 页面中的各种动态效果和交互,如家乡图片的切换显示,可以使用 JS 插件或者 HTML5 实现
  3. 家乡所在位置的地图显示,参考实验七
  4. 论坛可以发帖、回帖、删除,所输入的内容在页面上有显示(不需要保存到数据库),参考实验五和实验六

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

相关推荐

发表回复

登录后才能评论