《Web程序设计》课程设计报告Word格式.docx
《《Web程序设计》课程设计报告Word格式.docx》由会员分享，可在线阅读，更多相关《《Web程序设计》课程设计报告Word格式.docx（21页珍藏版）》请在冰豆网上搜索。
3、网站页面和超链接应形成清晰合理的框架；
4、首页上加入日期时间显示；
5、正确规划网站的栏目结构，合理建立站点目录，见设计指导书。
设计
参数
1、整个网站页面个数不少于5个；
2、采用CSS+DIV进行页面布局，整个网站采用统一的CSS；
3、站点目录规划合理，比如，图片放在images下，CSS文件放在css目录下，各栏目放在对应的栏目文件下；
4、至少一段JavaScript代码；
5、建议色彩搭配不多余5种。
进度
要求
12月29日：
了解设计任务、收集资料、考虑网站栏目设计
12月30日：
素材设计与制作或收集；
12月31日-1月3日：
页面设计与制作；
1月4日：
撰写课程实践总结，作品检查、提交、答辩
参考资料
[1]房爱莲．《网页设计与制作案例教程》[M]．北京：
清华大学出版社，2009年．
[2]文谦、赵位等．《网页制作综合技术教程》[M]．北京：
人民邮电出版社，2010年．
[3]
[4]
其它
说明
１.本表应在每次实施前一周由负责教师填写二份，院系审批后交院系办备案，一份由负责教师留用。
２.若填写内容较多可另纸附后。
3.一题多名学生共用的，在设计内容、参数、要求等方面应有所区别。
教研室主任：
指导教师：
年月日
1、网站的结构规划
C语言教程网，主要分为课程简介、教学课件、视频教学、单元习题、常见问题分析、个人成果展示、学生留言以及会员注册七部分。
规划详图见图1.
图1规划详图
2、素材的准备
根据规划图，依次准备了如下素材。
图1.1.jpg
图2.bg2.png图3.loading.jpg
图4.button1.png
图5.button2.png
图6.button3,png
图7.button4.png
图8.button5,png
图9.button6.png
图10.folder1-close.gif
图11.folder1-open.gif
图12.line.gif
图13.folder-close.gif
图14.folder-open.gif
3、站点建立
先建一个项目文件夹“C语言程序设计网”，然后在里边建一个站点mysite。
打开该站点文件夹，在里边建各种文件的文件夹如下：
‘html’‘image’‘jscript’‘css_css’.最后在’html’文件夹中存放各种网页包括框架业，在‘images’文件夹中存放各种图片素材,在‘jscript’文件夹中存放使用的java脚本文件，在‘css_css’文件夹中存放使用的css样式文件。
图15站点文件夹：
C语言程序设计网…..mysite….
图3-1.站点文件夹
4、主页面的制作
4.1主页面结构图如下：
图16.主页面布局图
4.2主页面主要div如下：
.body{
background-color:
#EEE;
text-align:
center;
}
a:
link{
color:
#036;
text-decoration:
none;
visited{
#00F;
hover{
underline;
#000;
active{
#container{
margin:
0px;
padding:
width:
1000px;
float:
#banner{
height:
200px;
background-image:
url（image/1.jpg）
#link{
1000px;
font-size:
18px;
center;
font-weight:
bold;
#linkul{
0px;
list-style-type:
#linkulli{
left;
#4DA6FF;
#linkullia{
125px;
25px;
none;
display:
block;
#333;
#linkullia:
hover{
#369;
img{
border:
#left{
14px;
#CCC;
left;
510px;
#lefta:
blink;
}
hover{
underline;
red
visited{
green
#left3{
150px;
padding-top:
10px;
url（image/bg2.png）;
#left1{
351px;
#left2{
45px;
margin-top:
15px;
#right{
511px;
799px;
right;
#right1{
12px;
#666;
#CCC;
word-spacing:
normal;
20px;
779px;
5px;
padding-left:
20px;
#right2{
#039;
#999;
#right3li{
#036;
#F9F9F9;
789px;
border-bottom-width:
thin;
border-bottom-style:
dashed;
border-bottom-color:
#footer{
clear:
both;
16px;
#333;
#CAF2FF;
right;
990px;
11px;
padding-right:
font-style:
italic;
}
5、二级页面的制作
5.1登录注册页面的设计
主要div如下：
#loading{
url（image/loading.jpg）;
625px;
130px;
padding-bottom:
.loading1{
30px;
line-height:
40px;
.loading2{
120px;
5.2其他子页面的设计
以课程简介为例，其左侧采用树形目录的形式。
主要div设置如下：
#menu{
#F7F7F7;
#menuli{
10px;
#menuulli{
#menua{
0pxsolid#333;
#menua:
#06F;
#main{
#E8E8E8;
#main1{
margin-right:
margin-left:
28px;
#main2{
24px;
6、JavaScript功能代码的编写
6.1时间日期设置代码
functionstartTime（）
{
vartoday=newDate（）
varn=today.getYear（）
vary=today.getMonth（）
varr=today.getDate（）
varh=today.getHours（）
varm=today.getMinutes（）
vars=today.getSeconds（）
m=checkTime（m）
s=checkTime（s）
document.getElementById（'
txt'
）.innerHTML=（n+1900）+"
年"
+（y+1）+"
月"
+r+"
日"
+h+"
时"
+m+"
分"
+s+"
秒"
t=setTimeout（'
startTime（）'
1000）
functioncheckTime（i）
if（i<
10）
{
i="
0"
+i
returni
6.2注册校验代码
functioncheckname（）
varval=form.xm;
varerrObj=document.getElementById（"
error_name"
）;
if（val.value.length==0）{
errObj.innerHTML="
用户名不能为空"
;
}
functioncheckmima（）
varval=form.mima1;
varvall=form.mima2;
error_mima"
if（val.value!
=vall）{
前后密码要相同"
functioncheck（）
varval2=form.mima1;
varval3=form.mima2;
varerrObj1=document.getElementById（"
val.focus（）;
returnfalse;
else{
"
if（val3.value!
=val2.value）{
errObj1.innerHTML="
val3.focus（）;
else
{
returntrue;
6.3树形目录代码
functioninit（）{
varuls=document.getElementsByTagName（"
ul"
//取得所有ul元素
for（vari=0;
i<
uls.length;
i++）{//循环遍历uls数组
uls[i].style.display="
none"
}
}
functionexpandMenu（menu1）{
//取得li标签（一级菜单）下的第一个ul元素
varul=menu1.getElementsByTagName（"
）[0];
if（ul.style.display=="
）{
ul.style.display="
block"
//显示
}else{
//隐藏
7.设计效果图
7.1主页面效果图
图7-1.主页面效果图
7.2态时间设置的测试
图7-2.动态时间显示图
7.3录注册页面效果图
图7.3登录注册页面效果图
7.4树形页面测试效果图
图7.4树形页面测试效果图
（1）
图7.5形页面测试效果图
（2）
总结
通过此次C语言程序设计的设计与制作，我不仅能够熟练的运用div布局网页结构，同时也熟练地运用了CSS样式美化网页，尤其是对网页文字的美化，是网页看上去清爽简洁，清晰明了。
此外，在这次网站设计中我也运用了JAVA脚本来设计网页，尽管这部分内容较难理解，在初学的时候也没有更多的了解，但是通过此次课程设计我也经能够熟练地运用JAVA脚本的知识去实现网页的许多功能，使自己设计的页面更加合理，也更加的丰富。
本次的网页设计基本实现了所要求的一些样式和功能，但还存在很多不完善的地方。
本次网站设计的优缺点如下：
网站规划合理，结构清晰，页面设计清晰大方，网站风格一致，。
但是也存在一些问题，如素材的准备不够丰富；
主页在不同的浏览的效果有差别；
各框架页设计不详细；
网站很大一部分功能尚未实现。
以后在网页设计中一定要在多种浏览器中预览，以防止部分浏览器不兼容页面。
其次就是学习一些图片视频制作处理软件，保证素材的充足和完美。
升级会员 