web课程设计报告范例Word下载.docx
《web课程设计报告范例Word下载.docx》由会员分享，可在线阅读，更多相关《web课程设计报告范例Word下载.docx（20页珍藏版）》请在冰豆网上搜索。
编码3 实验室
撰写论文2 图书馆
学生签名：
2010年6月22日
课程设计（论文）评审意见
（1）完成需求分析（20分）：
优（ ）、良（ ）、中（ ）、一般（ ）、差（ ）；
（2）设计分析 （20分）：
（3）完成编码 （20分）：
（4）回答问题 （20分）：
（5）论文编写 （20分）：
评阅人：
职称：
硕士
2010年7月8日
目录
一．绪论4
（1）网站主题4
（2）网站规划4
二．正文4
1.网站网页部分4
（1）主Css和JavaScript定义4
（2）网页实现5
小筑主页5
小筑故事网页7
小筑图片网页7
小筑留言网页8
2.论坛网页部分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"
400ms"
onmouseover="
this.stop（）"
onmouseout="
this.start（）"
>
另外还在主页上面加入了背景音乐的播放，其html代码如下：
<
<
embedsrc="
theshow.mp3"
hidden="
True"
loop="
/embed>
loop表示音乐的循环次数。
效果图
窝窝故事
窝窝故事主要分为两大模块一个是菜单区，一个是展示区，同样是利用对主css类的扩展来实现的。
菜单区主要是利用了css中的类定义了包括头文件，故事链接，文本区等条目的样式，因而可利用div标签轻松布局。
展示区主要是定义了包括图片的调用以及文字的显示方式
窝窝图片网页
利用网上模板的资源，只需将相应的CSS文件和Javascript文件添加到指定的文件夹中即可实现相册中图片风格的统一以及相册的翻阅功能等：
linkhref="
css/photo.css"
rel="
stylesheet"
type="
text/css"
scriptsrc="
js/photo.js"
language="
javascript"
/script>
窝窝留言
该部分因为较为简单所以并没有在添加css的类和id，只是利用了table和ul来做相应的布局。
2.论坛网页部分
网站通过css文件定义了一些基本标签的样式，主JavaScript文件是与上一部分的相同的，同样是实现对文件的保存和调用功能。
（2）网页实现
论坛主页
论坛采用是一种简约的风格，简单的定义了菜单区的头文件，链接的css样式，通过div实现布局
游戏区
游戏区的css样式与上页相同，并没有加入新的布局，只是在页面进入时加入了如下JavaScript代码，以实现文字随鼠标浮动的效果。
其代码如下：
script>
!
--
/*******************************Copyleft******************************************
ArkysWebBuilderToys:
:
Dreamweaver3:
Flyingfontsfollowyourmouse
CoderbyArky;
data:
2000-1-21;
mailto:
arky@;
icq:
17119978
formoretools,pleasevisit
*********************************************************************************/
另外在游戏区还加入了五个JavaScript小游戏，每个小游戏各对应一个网页。
留言板
该部分也依然延续了主css文件中的布局，只是在html文件中加入了一个table标签，因为还没有连接数据库所以现在其实还无法实现留言的功能，但可以完整的显示界面。
三.设计小结
（1）设计中遇到的问题及解决
通过JavaScript文件编写一些特效，但通过网页调用时发现有些JavaScript文件无法将其添加到html的onload事件中，也就是网页在加载的时候并不调用该JavaScript。
虽然通过将其改为id的形式在div标签中调用可以实现，但是目前还不知道有些js程序无法随html的onload加载的原因。
一开始并没有写过多的css方法，css也只是将基本的标签加以定义，而网页的各部分都是通过talbe标签来实现的，后来发现如果一个网页有多个衍生的网页，这样不但要反复的定义table而且如果发现错误，一点一点的修改也过于麻烦，因而采用了再css里定义各种区域的类和id的方法，结果是编译变的简单很多。
由于写了过多的css文件，所以在调用的时候发现会有覆盖的现象出现，因此将各部分网页以及相应的css保存在同一个文件中，结果显示正常。
（2）心得体会
本次课设虽然做了19个网页，但是由于时间关系，还是有许多想要实现的功能没有实现，同时还有许多问题没有解决。
比如有些文字的排版还不够整齐，而且背景音乐只加载到了主页还没有加载到其他分页面。
同时还希望能够通过IIS假设站点能够使其变为真正的网站，是诸如注册和留言页面能够连接到数据库。
此次课程设计加深了我对css和javascript的认识。
之前我也只是在课本上知道两者的主要特点和大致内容，但是这次实践之后，我更清楚了所谓的页面风格和函数功能的体现。
特别是相册的制作，它并非直接用CSS实现，而是很灵活地利用div将相应的代码作为一个块来实现切换图片的功能，所以，并不是一种功能只能由一种技术来实现，我们应该学会用更简单明了的技术实现更为复杂的功能，我认为，这才是技术发展的最终目标。
通过本次课设我加深了对web编程的理解，能够比原来更为清晰的认识到网页的制作。
提高自己的编程技术，也为今后的jsp学习打下了基础。
四.参考文献
五.附录
主Css和JavaScript定义
Css
body
{
background:
url（images/bg.jpg）no-repeatcentertop#000000;
padding:
0;
font-family:
Georgia,"
TimesNewRoman"
Times,serif;
font-size:
12px;
margin:
0pxautoautoauto;
color:
#696767;
}
p{
0px020px0;
text-align:
justify;
0px;
line-height:
17px;
p.tips{
0px07px0;
border-bottom:
1px#cebf91dashed;
h1{
#7e5025;
5px010px0;
19px;
font-weight:
normal;
h2{
#2d7513;
0px05px0;
bold;
#marquee_content{
width:
288px;
height:
201px;
border:
solidthin#CCC;
#ul_side{
margin:
padding-top:
20px;
padding-left:
40px;
list-style:
none;
font-size:
14px;
#ul_sideli{
color:
#F30;
list-style-type:
disc;
a.read_more{
display:
block;
#855f35;
float:
right;
font-style:
italic;
5px000;
text-decoration:
a:
hover.read_more{
underline;
img.left_icon{
left;
0px15px0px0px;
img.right_icon{
0px0px0px15px;
.clear{
clear:
both;
a{
#main_container{
width:
960px;
height:
auto;
position:
relative;
.top_leafs{
absolute;
top:
left:
11px;
z-index:
200;
#header{
196px;
url（images/header_bg.jpg）no-repeattopcenter;
.logo{
290px;
center;
28px;
110px00112px;
.logoa{
/*----------------menutab----------------------*/
.menu{
470px;
145px0040px;
.menuul{
list-style:
.menuulli{
inline;
.menuullia{
border:
010px010px;
_margin:
07px07px;
#754928;
.menuullia:
hover{
3px#bc8d46solid;
.menuulli.selecteda{
/*-------------center_content-------------*/
#center_content{
819px;
autoauto20pxauto;
background-color:
#fef8e6;
.left_content{
410px;
15px10px10px60px;
.right_content{
010px10px20px;
.bottom_content{
369px;
url（images/bottom_bg.jpg）no-repeattopcenter;
.photos_block{
10px010px0;
.photo_box{
114px;
111px;
018px00;
url（images/photo_bg.gif）no-repeatcenter;
img.photo{
6px000;
a.view{
4px6px00;
#706443;
.tip_box{
0015px0;
.news_box{
5px05px0;
.date_box{
47px;
49px;
25px;
url（images/date_bg.gif）no-repeatcenter;
span.day{
span.month{
#fef8e5;
.news_content{
230px;
00010px;
.about_text{
300px;
195px0030px;
.friends_list{
180px;
/*----------------------list-------------------------*/
ul.list{
ul.listli{
auto;
008px0;
ul.listlia{
padding:
00015px;
display:
url（images/footer_bullet.gif）no-repeatleft;
ul.listlia:
.bottom_right{
240px;
195px0015px;
.bottom_righta{
.footer{
770px;
border-top:
JavaScript
varclear="
images/clear.gif"
//pathtoclear.gif
pngfix=function（）
{
varels=document.getElementsByTagName（'
*'
）;
vari_p=/\.png/i;
vari=els.length;
while（i-->
0）{varel=els[i];
vares=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;
}
else
varelb=el.currentSty
升级会员 