基于JavaScript班级网站开发之班级首页

1、潍坊科技学院JavaScript课程设计报 告 书 课题 基于JavaScript的班级网站开发 专业班级 ： 11软1 学生姓名 ：邵园园 学 号 ：9 指导教师 ：陈凤萍 小组成员 ：邵园园、刘娜、苟祥明、石妍慧 于明明、王超、孙慎伟、马安顺 组 长 ：邵园园 日 期 ：2013 . 1 . 7 成 绩 ： 课程设计任务书院系：中印计算机软件学院 专业：软件技术 班级：11软1 学号：9 一、课程设计时间2012年12月24日至2013年1月11日，共计3周。二、课程设计内容使用html+javascript+css 完成以下任务：1、能够熟练使用css结合html实现网页布局。2、熟练使

2、用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。3、熟练使用javascrip中的对象，实现网页的动态效果。三、课程设计要求1. 课程设计质量： 贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。 网页设计布局合理，色彩搭配合理，网页操作方便。 设计过程中充分考虑浏览器兼容等问题，并做适当处理。 代码应适当缩进，并给出必要的注释，以增强程序的可读性。2. 课程设计说明书：课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。四、指导教师和学生签字指导教师： 学生签名： 五、教师评语： 基于javascript的班级网

3、站（班级主页）开发摘要随着Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。JavaScript是开发Web应用程序不可或缺的一种语言，无论是为Web页面增加交互性还是创建整个应用程序，如果没有JavaScript，今天的Web就不会是现在这个样子。

4、把JavaScript与html和css结合起来，功能将会更加强大。关键字：班级网站、javascript目录一、 前言1 1.1课程设计思路1 1.2课程设计目标1二、关键技术1 2.1HTML相关概念1 2.2css2 2.3javascript3三、总体设计3 3.1 网站总体结构3 3.2主页设计43.3网站功能设计4四、详细设计6 4.1班级网站6 4.2数据库设计6 4.3主要代码6五、课程总结12六、参考文献13一、 前言1.1课程设计思路班级网站基本组成成分包括班级首页、班级介绍、班级相册、留言板、课外活动、同学信息、星语心愿、学校风貌，采用JavaScript语言并结合数据库

5、知识对班级网站进行设计。明年我们就面临着毕业，面临着离别，做这个网站也是为在我们的生命中留下一分美好的回忆，所以网站里面有班里的全部同学信息以及一些照片。JavaScript在创建班级网站的过程中如果运用得当将会使网站得到一个很好的效果，同时也将提高网站的人性化程度。1.2课程设计目标1.能够熟练使用css结合html，通过咨询和考察，最终确定并实现网页布局。同时使用动态样式表甚至可以让图片的切换获得多种转场效果。2熟练使用javascript和html知识结合做一个更漂亮的网站。3熟练使用javascript中的内建对象最终实现一个班级网站的雏形。二、关键技术2.1HTML相关概念1.HTM

6、L语言HTML语言(HypertextMarkupLanguage)中文通常称为超文本置标记语言，是一种用来制作超文本文档的简单标记语言，用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（Unix、Windows）自1990年以来HTML就一直被用作WWW的信息表示语言，用于描述Homepage的格式设计和它与WWW上其他Homepage的连接信息，使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容如图：WWW三个组成部分图2-1WWW的组成2.HTML文件结构

7、元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML文档的标 题。与之间的内容将显示在浏览器窗口的标题栏。 HTML 文件的正文/元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。 2.2css 1.css简介级联样式表（Cascading Style Sheet）简称“CSS”，它是用来进行网页风格设计。通过设立样式表，可以统一地控制HTML中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效

8、果的能力。2.css文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。2.3javascript 1javascript语言JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作。2.Jav

9、aScript嵌入HTML文件JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。1)、JavaScript 语句插入 HTML的方式：（1)使用 标签将语句嵌入文档（2)将 JavaScript 源文件(.js)链接到 HTML 文档中2)、JavaScript 语句插入 HTML的位置：（1)body部分的JS（2)head部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入三、总体设计3.1 网站总体结构 通过班级网站，全面宣传，展示班级风采、优点与特色，发布班级的重大活动安排，增强同学之间的相互联系，提高办事效

10、率。网站结构图见图3-1：班级首页、介绍同学信息班级相册、活动留言板、心愿学校风貌主页 图3-1网站结构图3.2主页设计 页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现班级的勃勃生气，静态主页方式介绍班级风采、优点特色，就得利用JS与数据库结合的技术建立数据库查询管理系统，采用交互式的动态的web画面来实现。3.3网站功能设计在本网站中包括动态切换本站首页、班级介绍、同学信息、班级相册、学校风貌、课外活动、星语心愿、留言板等，并进行一定的美化和整理，基本完成班级网站的雏形结构。显示的样式要求如下图3-2：图3-2 网 站 功 能 图1. 本站首页：一般有动态切换同学信息、浮动

11、的图片和文字滚动等几种方式，通过动态样式表甚至可以让图片的切换获得多达20多种转场效果。2班级介绍：一般用HTML表格显示班级的图片、和每个同学的信息，大部分班级网站都采用数据库和动态脚本语言来自动生成学生信息的列表。3学校风貌：电子购物车一般有两种方式来实现，一种是在服务器端存储每个用户的每一次电子购物操作，还有一种是采用客户端cookie来实现电子购物车，cookie是网站存储在客户端的少量数据，可以让网站的不同网页之间共享相同的变量。4同学信息：创建同学信息程序，需要输入的信息包括学生姓名、性别、电话、qq、出生年月日、身份证号码、住址、邮编。重点体现在在查询每个同学的信息时通过客户端，

12、无须将数据提交到服务器端，从而提高了程序的效率，也可以避免程序提交数据的过程中重复输入的过程。 5. 班级相册：在JavaScript操作图像，在一个文件夹中保存所需要的图片，在浏览器中可以按顺序播放一张张图片，还可以设置图片出现时的花样，使网站变得更加漂亮、更加吸引人，给人留下深刻的印象，更加的方便浏览图片。6. 留言板：留言板那块在网页中会显示每个学生对班级的留言、对同学的祝福、对自己将来的打算、以及对各位老师的感谢。 7. 课外活动:在这里一一列着我们集体曾经参加的各种活动的时间、名称及照片，这是可以看得见的回忆，多年后回头看看，该是感觉多么珍贵、对么温馨:这是曾经年少的时候. 8. 星

13、语心愿：梦想就在这里启程！星语心愿是每个同学的梦想的表达，可以写出小学、中学曾经追逐的梦想，以及现在毕业就要步入的社会的梦想或者是对未来的畅想，还可以写出曾经喜欢却没有表白的Ta或者想说却有说不出的心事、这有点属于隐私，可以匿名的哦。四、详细设计 4.1班级网站 班级网站共分为8个模块，我在私下里收集了每个同学的信息、每次活动的照片，班级相模块册可以在网页中自由浏览照片，同学信息模块可以查询每个同学的信息，这主要用到数据库知识。班级网站的设计主要是能给11软1的同学留下回忆，让每个人记住我们曾经在一起过、曾经相识过、纵然我们来自四面八方、纵然以后要各奔东西，都不能忘记我们曾经同学一场。 4.2

14、数据库设计 本网站采用的数据库是Microsoft Access,建立库文件，包含如下几个表文件：Claim 网站公告信息表Loginfo 来访登录时间信息表Mssg 留言信息表Photo 图文内容说明信息表User 成员地址信息表4.3主要代码无标题文档 潍 坊 科 技 学 院 wi fnk j xu yun 11 软 1 本站首页 班级介绍 同学信息 班级相册 学校风貌 课外活动 星语心愿 留言板 11软1 男同胞们名单. 11软1 女同胞们(名单). 班长:裴星宇 团支书:万小爽 纪委:苟详明 学习委员:王超 教(睡觉)主:姜淑飞 438之色长:张

15、媛媛 幽默哥:袁振 那个某某人:邵园园 青岛小曼:刘娜 青岛帅锅:江京翔 梁山好汉:丁三香 少数民族:杨波 菏泽老乡:于亚萍 火柴哥:孙慎伟 班里最文静的女孩:仪双元 老实巴交:李振涛 菏泽小妹:葛丽 聊城知识分子:范丽丽 宿管部:严茂奇 卖糖葫芦:岳芬芬 青岛小胖:董旭 临沂小伙:段振明 淡定哥:祝传志 兔子:卜巧莲 运行结果如下图3-3:图3-3 运 行 结 果 图五、课程总结这个班级网站是我和其他组员一起完成的，第一次做一个像样的网站一开始真不知道从何下手，我们在一起耐心的探讨、一起努力的查找资料，最后终于完成。真的是受益匪浅！先是认识到了集体力量的伟大，没有集体智慧的结合，就不会有我们这个网站的运行，然后我感觉这次课程设计不只是局限于书本上的知识，而是与实践相结合，理论+实践使知识更好的运用到了生活中去。通过这次的网站设计我发现我还有很多知识需要学习、我懂得太少了，水平还需要接着提高。在设计网站的过程中我们除了很多次错误，在一次又一次的改正下，最终网站运行成功！在这次