网站开发报告

网站开发总结报告

课程名称：《JavaScript脚本语言》

系名：计算机系班级：网络3班

姓名：邓秋胜学号： 0903010306

指导教师：单先余

授课时间：2010-2011学年第二学期

网站开发报告

网站开发总结报告

1.引言

1.1编写目的

运用所学的JAVA脚本语言+CSS+DIV+XHTML技术完成以自己为主题的个人网站。

1.2背景

a．本项目的名称：个人网站-七彩的生活

所开发出来的软件系统的名称：Dreamweaver CS3

b．本项目的任务发起者：单先余老师

开发者：09网络3班邓秋胜

1.3定义

Java，是由Sun Microsystems公司于19xx年5月推出的Java程序设计语言和java平台的总称。

1.4参考资料

a．项目开发总结报告（GB856T-88）国家标准。 b. Web标准的网页设计工作流程.

c.javascrit语言精髓与编程实践。

d.css布局标准

2.项目设计开发

2．1 总体设计 2.2 开发环境配置 Dreamweaver CS3

2．3 网站配置

本网站包含七个页面，分别为：首页，博客，游戏，相册，特效，留言板，联系我。

2．4 编码处理

GB2312

2. 5 数据库设计

列出内容

网站开发报告

3.项目开发结果

3.1产品

主页网站的整体内容：使用HTML和CSS对页面进行布局,以一个以七彩生

活为主题的网站制作标题的banner，一行导航栏包含七个导航按钮，一个显示各链接页面的800X600的层和一个本人制作的版权页脚。层次关系：分为main层，cmenu层七个ccon层和foot层。

网站的整体结构运行屏幕截图如下：

网站开发报告

a.首页index.html是一个运用Macromedia Fireworks 8+ Adobe Photoshop CS5工具制作出来的相片。相片中“我的资料”“好友列表”“好友动态”“我的炫册”“网络日记”“我的留言”等都添加了热点连接，连接跳转对应的页面。

Index.html的运行屏幕截图如下：

网站开发报告

b.个人博客简介：boke.html页面内容：主要连接了本人的腾讯博客，里面有关自己的一些情况。层次关系：为ccon1层。

boke.html的运行屏幕截图如下：

网站开发报告

c.游戏：game.html页面内容：一个flash小游戏。层次关系：为ccon2层。 Cs游戏.swf的运行屏幕截图如下：

网站开发报告

d.相册：photo.html页面内容：用java脚本编写的一个相册。层次关系：为ccon3层。photo.html的运行屏幕截图如下：

网站开发报告

d.特效：demo.html页面内容：里面分别有两个用flash编写的特效。

一个是我自己的简历特效，一个是仿地铁风格的相片广告播放，用来显示图片特效的页面。层次关系：为ccon4层。

demo.html的运行屏幕截图如下

网站开发报告

e.留言板：lyb.htm页面内容：通过一个表单来提交你所要留言的信息。层次关系：为ccon5层。

lyb.htm的运行屏幕截图如下：

网站开发报告

f联系：jl.html页面内容：显示自己的联系方式。层次关系：为ccon6层。 jl.html页面的运行屏幕截图如下：

网站开发报告

3.2主要功能和性能

首页index.html主要实现的是表达出该网站是以自己的个人网站为目的的，该项目产品达到了原定的开发目标。

个人博客boke.html主要是展示自己的个人腾讯博客的资料，该项目产品达到了原定的开发目标。

游戏game.html主要实现的是链接一个flash小游戏到本页，该项目产品达到了原定的开发目标。

相册photo.html主要是运用java脚本语言来实现相册的幻灯片浏览效果，该项目产品达到了原定的开发目标。

特效demo.html主要实现的是运用java脚本语言来实现以特殊效果浏览图片的目的，该项目产品达到了原定的开发目标。

留言板ly.html主要实现留言的功能，该项目产品达到了原定的开发目标。

联系jl.html主要展示的是本人的联系方式，该项目产品达到了原定的开发目标。

4.开发工作评价

4.1对产品质量的评价

本项目在测试中检查出来的程序编制中的错误发生率比较低，大问题基本没有，各项目都达到了预期目的，产品质量良好。

4.2对技术方法的评价

本项目在开发中使用了Java脚本语言技术，xhtml技术，利用DreamweaverCS3对项目进行开发设计，此项目开发比较成功，但是还是存在着一些问题，造成这些问题的原因是多方面的。总的来说，此系统的功能开发还是一个比较成功的案例。

4.3出错原因分析

有些效果没有出来，原因是由于粗心把代码敲错了或者缺少某些关键代码。

5.经验与教训

这次项目的开发，尽管走过一些弯路，出现过一些错误，但是总体上来说是成功的，基本完成了预期的目的，其中还有很多地方值得让我去思考、去改进。

6.总结

a.主页html+div代码：

function checkform(){

if (form1.name.value == "") { alert("用户名不能为空。"); form1.name.focus(); return false; }

if (form1.password.value == "") { alert("密码不能为空。"); form1.password.focus(); return false; }

}

function MM_openBrWindow(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

</script>

</head>

<form action="#" method="post" name="form1" onSubmit="return

checkform();" >

<img src="zc.gif" width="20" height="20" /> 用户名:

<input name="name" type="text" size="12" maxlength="20" id="name" /> 密码:

<label>

</label> <a href="#" onclick="openwin();"> <span style="font-size:14px">注册</span></a></form>

</div>

AC_FL_RunContent( 'codebase','/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','563','height','212','src','FLSHA/110','quality','high','pluginspage','/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent' ); //end AC code

</script><noscript><object

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="563" height="212">

</object>

</noscript></div>

</UL>

</div>

<map name="Map" id="Map"><area shape="rect" coords="301,51,734,299" href="#" onclick="MM_openBrWindow('photo/风景

1.png','','width=800,height=600')" />

<area shape="rect" coords="179,60,225,95" href="#" /><area shape="rect" coords="310,313,354,345" href="#" onclick="MM_openBrWindow('FLSHA/0.swf','','width=800,height=250')" /> <area shape="rect" coords="177,406,224,439" href="#" /><area shape="rect" coords="311,457,352,490" href="#" /><area shape="rect" coords="308,535,353,566" href="#" onclick="MM_openBrWindow('book/lyb.htm','','width=800,height=600')"

/><area shape="rect" coords="70,118,143,211" href="#" onclick="MM_openBrWindow('FLSHA/0.swf','','width=800,height=250')" /> </map> </div>

<div id="qh_con2" style="DISPLAY: none"><IFRAME src="game/dmt1.html""

width="800px" height="600px" marginwidth="0" marginheight="0" frameborder="0" > </IFRAME></div>

</div>

<tr>

</tr>

</table>

<p>09网络（3）班邓秋胜期末作品《七彩的生活》</p>

</div>

</body>

</html>

<!--0903010306 邓秋胜期末网站作品--!>

b. 视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。

以下是CSS代码

body{}

div,form,ul,li,span{margin:0;padding:0; list-style-type:none;}

body {

font-family:"宋体";

font-size:16px;

background-color: #0099FF;

background-image: url(IMG/df-main.gif);

}

img {border:0px; font-size:14px}

a,a:Link,a:visited{font-size:16px;color:#444; text-decoration:none} a:hover{color:#FF3300; text-decoration:underline;}

/*容器*/

#cont{ width:800px; height:930px; margin:0 auto; padding:0; border:1px solid #3399FF}

/*页眉*/

#head{ height:260px;background-image: url(IMG/123.jpg); background-repeat:no-repeat }

/*登录注册表*/

#login{ width:500px; height:26px; margin:3px 0 0 290px ; color:#006699; font-size:14px ; font-weight:bold}

#name,#password{ border-bottom:1px solid #006699; border-left:0; border-right:0; border-top:0; background-color:transparent; }

/*透明动画*/

#fla{ width:600px; height:220px; margin:0px }

/*主导航菜单*/

#menu_out{width:800px;height:100px;overflow:hidden; padding:0; margin:0; }

#menu ul{ width:800px; margin:0; padding:0; border:0; list-style:none; line-height:38px;float:left; background:url(btbl.png) top repeat-x;} #nav li{ float:left; height:38px; margin:0 5px;}

#nav li a{float:left; display:block; padding-left:6px; height:38px; cursor:pointer; text-decoration:none; text-align:center; }

#nav li a span{ float:left; width:92px; text-align:center; line-height:38px;

font-size:16px; font-weight:bold;color:#000; text-decoration:none; cursor:pointer;}

#nav li .nav_on{background-position:left 100%;} /*鼠标经过时变换背景，方便JS获取样式*/

#nav li .nav_on span{ background-position:right 100%; color:#fff;text-decoration:none;width:92px;background:url(home-bl.png) no-repeat;}/*鼠标经过时变换背景，方便JS获取样式*/

#main{ width:800px; height:600px; background-color:#0099FF; margin:-63px auto auto auto; padding:0}

#menu_con{width:800px; height:600px; background-color:#00ffFF}

#foot{

width:800px;

height:150px;

background-color: #FFFFFF;

padding-top:15px;

text-align:center;

font-size:20px;

font-weight:bold;

border-top:2PX solid #00FFFF

}

.STYLE2 {font-size: 15px}

</style>

相关推荐

网站开发报告

专栏推荐