web课程设计报告范例

1、. . . . 课程设计(论文)任务书软件学院学院专业 班 一、课程设计(论文)题目二、课程设计(论文)工作自 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

2、）网页的外观要求美观；（5）每人至少完成510页面的设计。2）创新要求： 在基本要求达到后，可进行创新设计，如使用Flash, Js框架等。3）课程设计论文编写要求（1）理论设计部分以课程设计论文的形式提交，格式必须按照课程设计论文标准格式进行书写和装订。（2）课程设计报告（论文）包括目录、绪论、正文、设计小结、参考文献、附录等4）答辩与评分标准： （1）完成需求分析：20分； （2）完成设计过程：20分； （3）完成编码：20分；（4）回答问题：20分。（5）论文编写：20分。5）参考文献：1.web开发技术使用教程轶主编 清华大学2JavaScript分享网 .sharejs./3. W3

3、Cschool在线教程 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、规划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）主题本致力于构建一个大学生展示寝室风采的平台，我们每个大学生都有的自己在学校里面的小小家，那就是我们的寝室。所以的名字“象牙小筑”顾名思义，就是我们寝室，我们的寝室的联盟。作为在校大学生在校交流的平台，立足于寝室文化，力求通过以寝室为单位的交流共享达到丰富学生课

5、余生活的目的。（2）规划共有5个板块，分别为小筑主页，小筑故事，小筑图片，小筑论坛和小筑留言。共19个网页，分为两大模块，主要使用了两套css，其中窝窝论坛共9网页，共用一套css，而其他包括窝窝主页在的10网页公用一套css，在其他个别网页还加入了一些css元素。JavaScript在本的应用主要包括两个方面，一是编写了调用文件的方法，二是的特效，特效部分主要通过游戏区的几个js小游戏来实现，随鼠标浮动的文字来实现的。小筑主页的风格以褐色和绿色为主色调，符合现代大学生青春动感的特点。包括简介区，菜单区，和区三大部分。分别对应相关页面。并加入背景音乐，没当回到主页，则播放背景音乐。小筑故事在主

6、css中加入了自己的一套css元素，凸显的是一种淡雅轻松的气氛。共分为五个板块，分别是小筑娱乐故事，小筑八卦故事，小筑情感故事，小筑劲爆故事以与一个展示区。小筑留言本与刚才的网页同样适用的是一套css，主要是利用table标签来实现的简单留言的功能。小筑图片网页一套为单独的一套css。小筑论坛是的另一大模块，共包括9个页面。以黑白色为基准色，凸显一种自由和谐的氛围。该网页主要分为三大板块：区，简介区和消息区。区分别实现对游戏区，讨论区和留言板的；简介区主要是以简介游戏区和讨论区为主，也包括对这两个区域的；消息区主要是提供最近发生的热点消息以与寝室的美图。在游戏区网页上面主要是实现JavaScr

7、ipt功能，包括js小游戏和页面特效。在留言板上面同样实现的是留言的功能，只不过它使用的是与小筑论坛一样风格的css效果而不是第一套css，另外两大板块公用一注册页面。二 正文1. 网页部分（1） 主Css和JavaScript定义通过css文件定义了一些基本标签的样式该部分的JavaScript作用主要为对调入文件的控制(2)网页实现小筑主页小筑主页分为三个部分，分别为简介区，区和菜单区。全部是通过定义css的id来实现相应区域的划分。其中：菜单区的css主要定义的一些标签的大小和排版，方便利用div标签直接布局。简介区的css主要包括对一些文本和图像显示方式的定义。区主要包括了一些对于相关

8、的显示方式和排列方式。利用id和类则可轻松利用div标签对上述各区域做相关的设置，同时也有利于网页的修改和扩展。设置右边公告栏里的文字向上连续滚动，时间间隔为400ms，且当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动：behavior="scroll" scrollamount="3" scrolldelay="150" direction="up" scrolldelay="400ms" onmouseover="this.stop()"onmouseout=&

9、quot;this.start()">另外还在主页上面加入了背景音乐的播放，其html代码如下：< <embed src="the show.mp3" hidden="True" loop="True"> </embed>loop表示音乐的循环次数。效果图窝窝故事窝窝故事主要分为两大模块一个是菜单区，一个是展示区，同样是利用对主css类的扩展来实现的。菜单区主要是利用了css中的类定义了包括头文件，故事，文本区等条目的样式，因而可利用div标签轻松布局。展示区主要是定义了包括图片的调用以与

10、文字的显示方式效果图窝窝图片网页利用网上模板的资源，只需将相应的CSS文件和Javascript文件添加到指定的文件夹中即可实现相册中图片风格的统一以与相册的翻阅功能等：<link href="css/photo.css" rel="stylesheet" type="text/css"><script src="js/photo.js" language="javascript"></script>效果图窝窝留言该部分因为较为简单所以并没有在添加css的类和

11、id，只是利用了table和ul来做相应的布局。2. 论坛网页部分（1） 主Css和JavaScript定义通过css文件定义了一些基本标签的样式，主JavaScript文件是与上一部分的一样的，同样是实现对文件的保存和调用功能。（2） 网页实现论坛主页论坛采用是一种简约的风格，简单的定义了菜单区的头文件，的css样式，通过div实现布局效果图游戏区游戏区的css样式与上页一样，并没有加入新的布局，只是在页面进入时加入了如下JavaScript代码，以实现文字随鼠标浮动的效果。其代码如下：<script><!-/*Copyleft*Arkys Web Builder Toys

12、 : Dreamweaver3 : Flying fonts follow your mouseCoder by Arky; data:2000-1-21;mailto:arky21cn.; icq:17119978for more tools, please */另外在游戏区还加入了五个JavaScript小游戏，每个小游戏各对应一个网页。效果图留言板该部分也依然延续了主css文件中的布局，只是在html文件中加入了一个table标签，因为还没有连接数据库所以现在其实还无法实现留言的功能，但可以完整的显示界面。效果图三.设计小结（1）设计中遇到的问题与解决通过JavaScript文件编写一些

13、特效，但通过网页调用时发现有些JavaScript文件无法将其添加到html的onload事件中，也就是网页在加载的时候并不调用该JavaScript。虽然通过将其改为id的形式在div标签中调用可以实现，但是目前还不知道有些js程序无法随html的onload加载的原因。一开始并没有写过多的css方法，css也只是将基本的标签加以定义，而网页的各部分都是通过talbe标签来实现的，后来发现如果一个网页有多个衍生的网页，这样不但要反复的定义table而且如果发现错误，一点一点的修改也过于麻烦，因而采用了再css里定义各种区域的类和id的方法，结果是编译变的简单很多。由于写了过多的css文件，所

14、以在调用的时候发现会有覆盖的现象出现，因此将各部分网页以与相应的css保存在同一个文件中，结果显示正常。（2）心得体会 本次课设虽然做了19个网页，但是由于时间关系，还是有许多想要实现的功能没有实现，同时还有许多问题没有解决。比如有些文字的排版还不够整齐，而且背景音乐只加载到了主页还没有加载到其他分页面。同时还希望能够通过IIS假设站点能够使其变为真正的，是诸如注册和留言页面能够连接到数据库。 此次课程设计加深了我对css和javascript的认识。之前我也只是在课本上知道两者的主要特点和大致容，但是这次实践之后，我更清楚了所谓的页面风格和函数功能的体现。特别是相册的制作，它并非直接用CSS

15、实现，而是很灵活地利用div将相应的代码作为一个块来实现切换图片的功能，所以，并不是一种功能只能由一种技术来实现，我们应该学会用更简单明了的技术实现更为复杂的功能，我认为，这才是技术发展的最终目标。通过本次课设我加深了对web编程的理解，能够比原来更为清晰的认识到网页的制作。提高自己的编程技术，也为今后的jsp学习打下了基础。四.参考文献1.web开发技术使用教程轶主编 清华大学2JavaScript分享网 .sharejs./3. W3Cschool在线教程 五.附录主Css和JavaScript定义Cssbodybackground:url(images/bg.jpg) no-repeat

16、 center top #000000;padding:0;font-family:Georgia, "Times New Roman", Times, serif;font-size:12px;margin:0px auto auto auto;color:#696767;ppadding:0px 0 20px 0;text-align:justify;margin:0px;line-height:17px;p.tipspadding:0px 0 7px 0;text-align:justify;margin:0px;line-height:17px;border-bot

17、tom:1px #cebf91 dashed;h1color:#7e5025;padding:5px 0 10px 0;margin:0px;font-size:19px;font-weight:normal;h2color:#2d7513;padding:0px 0 5px 0;margin:0px;font-size:12px;font-weight:bold;#marquee_contentwidth:288px;height:201px;border:solid thin #CCC;#ul_sidemargin:0px; padding-top:20px;padding-left:40

18、px; list-style:none;font-size:14px;#ul_side licolor:#F30;list-style-type:disc;a.read_moredisplay:block;color:#855f35;float:right;font-style:italic;margin:5px 0 0 0;text-decoration:none;font-size:12px;a:hover.read_moretext-decoration:underline;img.left_iconfloat:left;padding:0px 15px 0px 0px;img.righ

19、t_iconfloat:right;padding:0px 0px 0px 15px;.clearclear:both;atext-decoration:underline;#main_containerwidth:960px;height:auto;margin:auto;padding:0px;position:relative;.top_leafsposition:absolute;top:0px;left:11px;z-index:200;#headerwidth:960px;height:196px;margin:0px;padding:0px;background:url(imag

20、es/header_bg.jpg) no-repeat top center;.logowidth:290px;text-align:center;font-size:28px;color:#7e5025;float:left;padding:110px 0 0 112px;.logo acolor:#7e5025;text-decoration:none;/*- menu tab-*/.menuwidth:470px;float:left;padding:145px 0 0 40px;.menu ullist-style:none;padding:0px;margin:0px;.menu u

21、l lidisplay:inline;.menu ul li afloat:left;border:none;margin:0 10px 0 10px;_margin:0 7px 0 7px;text-decoration:none;color:#754928;font-size:14px;font-weight:bold;.menu ul li a:hovercolor:#754928;border-bottom:3px #bc8d46 solid;.menu ul li.selected afloat:left;border:none;margin:0 10px 0 10px;text-d

22、ecoration:none;color:#754928;font-size:14px;font-weight:bold;border-bottom:3px #bc8d46 solid;/*-center_content-*/#center_contentwidth:819px;margin:auto auto 20px auto;height:auto;background-color:#fef8e6;.left_contentwidth:410px;float:left;padding:15px 10px 10px 60px;.right_contentwidth:290px;float:

23、left;padding:0 10px 10px 20px;.bottom_contentwidth:819px;height:369px;clear:both;margin:auto;background:url(images/bottom_bg.jpg) no-repeat top center;.photos_blockpadding:10px 0 10px 0;.photo_boxwidth:114px;height:111px;float:left;display:block;text-align:center;margin:0 18px 0 0;position:relative;

24、background:url(images/photo_bg.gif) no-repeat center;img.photopadding:6px 0 0 0;a.viewfloat:right;padding:4px 6px 0 0;text-decoration:none;color:#706443;.tip_boxclear:both;float:left;width:290px;padding:0 0 15px 0;.news_boxclear:both;float:left;width:290px;padding:5px 0 5px 0;.date_boxwidth:47px;hei

25、ght:49px;float:left;text-align:center;line-height:25px;font-weight:bold;background:url(images/date_bg.gif) no-repeat center;span.daycolor:#855f35;span.monthcolor:#fef8e5;.news_contentwidth:230px;float:left;padding:0 0 0 10px;.about_textwidth:300px;padding:195px 0 0 30px;float:left;.friends_listwidth

26、:180px;float:left;padding:195px 0 0 30px;/*-list-*/ul.listlist-style:none;padding:0px;margin:0px; ul.list lilist-style:none;width: auto;height: auto;padding:0 0 8px 0; margin:0px;ul.list li awidth: auto; padding:0 0 0 15px; margin:0;color:#696767;text-align:left; display:block;text-decoration:none;b

27、ackground:url(images/footer_bullet.gif) no-repeat left;ul.list li a:hovertext-decoration:underline;.bottom_rightwidth:240px;float:left;text-align:center;padding:195px 0 0 15px;.bottom_right apadding:10px 0 10px 0;display:block;.footerclear:both;width:770px;margin:auto;text-align:center;padding:5px 0

28、 0 0;font-size:11px;border-top:1px #cebf91 dashed;JavaScriptvar clear="images/clear.gif" /path to clear.gifpngfix=function()var els=document.getElementsByTagName('*');var i_p=/.png/i;var i=els.length;while (i- >0)var el=elsi;var es=el.style;if(el.src&&el.src.match(i_p)&&e