构建一个大学生展示寝室风采的平台软件学院web课程设计.doc

课程设计(论文)任务书 软件学院 学院 专业 班 一、课程设计(论文)题目 二、课程设计(论文)工作自 2010年 6 月 22 日起至 2010 年 7 月 8 日止。三、课程设计(论文) 地点: 创新大楼 四、课程设计(论文)内容要求：1本课程设计的目的（1）加深web技术基本概念的了解；（2）灵活使用html标记，css技术，javascript技术；（3）巩固相关的理论知识；（4）培养学生分析、解决问题的能力；（5）提高学生的科技论文写作能力。 2课程设计的任务及要求1）基本要求：（1）分析各功能模块的需求；（2）要求使用HTML,CSS,JS制作静态网页；（3）提出合理的设计方案； （4）网页的外观要求美观；（5）每人至少完成510张页面的设计。 2）创新要求： 在基本要求达到后，可进行创新设计，如使用Flash, Js框架等。3）课程设计论文编写要求（1）理论设计部分以课程设计论文的形式提交，格式必须按照课程设计论文标准格式进行书写和装订。（2）课程设计报告（论文）包括目录、绪论、正文、设计小结、参考文献、附录等4）答辩与评分标准： （1）完成需求分析：20分； （2）完成设计过程：20分； （3）完成编码：20分；（4）回答问题：20分。（5）论文编写：20分。5）参考文献：1.web开发技术使用教程陈轶主编 清华大学出版社2JavaScript分享网 /3. W3Cschool在线教程 /6）课程设计进度安排内容 天数地点构思及收集资料 3图书馆编码 3实验室撰写论文 2图书馆学生签名： 2010 年 6 月22 日课程设计(论文)评审意见（1）完成需求分析（20分）：优（）、良（）、中（）、一般（）、差（）； （2）设计分析（20分）：优（）、良（）、中（）、一般（）、差（）； （3）完成编码（20分）：优（）、良（）、中（）、一般（）、差（）；（4）回答问题（20分）：优（）、良（）、中（）、一般（）、差（）；（5）论文编写（20分）：优（）、良（）、中（）、一般（）、差（）；评阅人： 职称： 硕士 2010 年 7月 8日目录一绪论4（1）网站主题4（2）网站规划4二正文41.网站网页部分4（1）主Css和JavaScript定义4（2）网页实现5小筑主页5小筑故事网页7小筑图片网页7小筑留言网页82.论坛网页部分9（1）主Css和JavaScript定义9（2）网页实现9论坛主页9游戏区9留言板10三.设计小结11（1）设计中遇到的问题及解决11（2）心得体会11四.参考文献12一 绪论（1）网站主题本网站致力于构建一个大学生展示寝室风采的平台，我们每个大学生都有的自己在学校里面的小小家，那就是我们的寝室。所以网站的名字“象牙小筑”顾名思义，就是我们寝室，我们的寝室的联盟。网站作为在校大学生在校交流的平台，立足于寝室文化，力求通过以寝室为单位的交流共享达到丰富学生课余生活的目的。（2）网站规划 网站共有5个板块，分别为小筑主页，小筑故事，小筑图片，小筑论坛和小筑留言。共19个网页，分为两大模块，主要使用了两套css，其中窝窝论坛共9张网页，共用一套css，而其他包括窝窝主页在内的10张网页公用一套css，在其他个别网页还加入了一些css元素。JavaScript在本网站的应用主要包括两个方面，一是编写了调用文件的方法，二是网站的特效，特效部分主要通过游戏区的几个js小游戏来实现，随鼠标浮动的文字来实现的。小筑主页的风格以褐色和绿色为主色调，符合现代大学生青春动感的特点。包括简介区，菜单区，和链接区三大部分。分别对应相关页面。并加入背景音乐，没当回到主页，则播放背景音乐。小筑故事在主css中加入了自己的一套css元素，凸显的是一种淡雅轻松的气氛。共分为五个板块，分别是小筑娱乐故事，小筑八卦故事，小筑情感故事，小筑劲爆故事以及一个展示区。小筑留言本与刚才的网页同样适用的是一套css，主要是利用table标签来实现的简单留言的功能。小筑图片网页一套为单独的一套css。小筑论坛是网站的另一大模块，共包括9个页面。以黑白色为基准色，凸显一种自由和谐的氛围。该网页主要分为三大板块：链接区，简介区和消息区。链接区分别实现对游戏区，讨论区和留言板的链接；简介区主要是以简介游戏区和讨论区为主，也包括对这两个区域的链接；消息区主要是提供最近发生的热点消息以及寝室的美图。在游戏区网页上面主要是实现JavaScript功能，包括js小游戏和页面特效。在留言板上面同样实现的是留言的功能，只不过它使用的是与小筑论坛相同风格的css效果而不是第一套css，另外两大板块公用一张注册页面。二 正文1. 网站网页部分（1） 主Css和JavaScript定义网站通过css文件定义了一些基本标签的样式该部分的JavaScript作用主要为对调入文件的控制(2)网页实现小筑主页小筑主页分为三个部分，分别为简介区，链接区和菜单区。全部是通过定义css的id来实现相应区域的划分。其中：菜单区的css主要定义的一些标签的大小和排版，方便利用div标签直接布局。简介区的css主要包括对一些文本和图像显示方式的定义。链接区主要包括了一些对于相关链接的显示方式和排列方式。利用id和类则可轻松利用div标签对上述各区域做相关的设置，同时也有利于网页的修改和扩展。设置右边公告栏里的文字向上连续滚动，时间间隔为400ms，且当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动：behavior=scroll scrollamount=3 scrolldelay=150 direction=up scrolldelay=400ms onmouseover=this.stop()onmouseout=this.start()另外还在主页上面加入了背景音乐的播放，其html代码如下： loop表示音乐的循环次数。效果图窝窝故事窝窝故事主要分为两大模块一个是菜单区，一个是展示区，同样是利用对主css类的扩展来实现的。菜单区主要是利用了css中的类定义了包括头文件，故事链接，文本区等条目的样式，因而可利用div标签轻松布局。展示区主要是定义了包括图片的调用以及文字的显示方式效果图窝窝图片网页利用网上模板的资源，只需将相应的CSS文件和Javascript文件添加到指定的文件夹中即可实现相册中图片风格的统一以及相册的翻阅功能等：效果图窝窝留言该部分因为较为简单所以并没有在添加css的类和id，只是利用了table和ul来做相应的布局。2. 论坛网页部分（1） 主Css和JavaScript定义网站通过css文件定义了一些基本标签的样式，主JavaScript文件是与上一部分的相同的，同样是实现对文件的保存和调用功能。（2） 网页实现论坛主页论坛采用是一种简约的风格，简单的定义了菜单区的头文件，链接的css样式，通过div实现布局效果图游戏区游戏区的css样式与上页相同，并没有加入新的布局，只是在页面进入时加入了如下JavaScript代码，以实现文字随鼠标浮动的效果。其代码如下：0)var el=elsi;var es=el.style;if(el.src&el.src.match(i_p)&es.filter=)el.height = el.height;el.width = el.width;es.filter = progid:DXImageTransform.Microsoft.AlphaImageLoader(src=+el.src+,sizingMethod=crop); el.src = clear;elsevar elb=el.currentStyle.backgroundImage;if(elb.match(i_p)var path=elb.split();var rep=(el.currentStyle.backgroundRepeat=no-repeat)?crop:scale;es.filter=progid:DXImageTransform.Microsoft.AlphaImageLoader(src=+path1+,sizingMethod=+rep+);es.height=el.clientHeight+px;es.backgroundImage=none;if (el.currentStyle.position!=absol