《Web程序设计》课程设计报告.docx
- 文档编号:6530159
- 上传时间:2023-01-07
- 格式:DOCX
- 页数:21
- 大小:2.76MB
《Web程序设计》课程设计报告.docx
《《Web程序设计》课程设计报告.docx》由会员分享,可在线阅读,更多相关《《Web程序设计》课程设计报告.docx(21页珍藏版)》请在冰豆网上搜索。
《Web程序设计》课程设计报告
重庆科技学院
《Web程序设计基础》
课程实践报告
学院:
__专业班级:
学生姓名:
学号:
设计地点(单位)___计算机基础自主学习中心I304______
设计题目:
___《C语言程序设计》课件网站设计与制作
完成日期:
2015年1月4日
指导教师评语:
_______________________________________
____________________________________________________________________________________________________________________________________________________________________________________________________________________
成绩(五级记分制):
________________
指导教师(签字):
________________
重庆科技学院
课程设计任务书
设计题目:
《C语言程序设计》课件网站设计与制作
学生姓名
课程名称
Web程序设计基础课程实践
专业班级
地点
I304/I306
起止时间
2014.12.29-2015.1.4
设计内容及要求
为了满足教师教学资源的共享,现要求将教师的《C语言程序设计》教学课件通过网站的形式组织起来,要求:
1、网站左边用树形目录的形式显示,当点击某一个章节,就在右边显示对应的课件内容;
2、至少要有5个页面以上;
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]
其它
说明
1.本表应在每次实施前一周由负责教师填写二份,院系审批后交院系办备案,一份由负责教师留用。
2.若填写内容较多可另纸附后。
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;
}
a:
visited{
text-decoration:
none;
color:
#00F;
}
a:
hover{
text-decoration:
underline;
color:
#000;
}
a:
active{
text-decoration:
none;
}
#container{
margin:
0px;
padding:
0px;
width:
1000px;
float:
none;
}
#banner{
margin:
0px;
padding:
0px;
height:
200px;
width:
1000px;
background-image:
url(image/1.jpg)
}
#link{
width:
1000px;
font-size:
18px;
text-align:
center;
font-weight:
bold;
}
#linkul{
margin:
0px;
padding:
0px;
list-style-type:
none;
}
#linkulli{
float:
left;
padding:
0px;
background-color:
#4DA6FF;
}
#linkullia{
width:
125px;
height:
25px;
text-decoration:
none;
display:
block;
padding:
0px;
color:
#333;
}
#linkullia:
hover{
background-color:
#369;
}
img{
border:
0px;
}
#left{
font-size:
14px;
background-color:
#CCC;
float:
left;
height:
510px;
width:
200px;
margin:
0px;
padding:
0px;
}
#lefta:
active{
text-decoration:
blink;
}
#lefta:
hover{
text-decoration:
underline;
color:
red
}
#lefta:
visited{
text-decoration:
none;
color:
green
}
#left3{
float:
none;
height:
150px;
width:
200px;
padding-top:
10px;
background-image:
url(image/bg2.png);
font-weight:
bold;
}
#left1{
float:
left;
height:
351px;
width:
200px;
background-image:
url(image/bg2.png);
}
#left2{
height:
45px;
width:
200px;
margin-top:
15px;
}
#right{
margin:
0px;
padding:
0px;
height:
511px;
width:
799px;
float:
right;
}
#right1{
font-size:
12px;
text-align:
left;
color:
#666;
background-color:
#CCC;
word-spacing:
normal;
height:
20px;
width:
779px;
padding-top:
5px;
padding-left:
20px;
font-weight:
bold;
}
#right2{
font-size:
14px;
text-align:
left;
color:
#039;
background-color:
#999;
word-spacing:
normal;
height:
20px;
width:
779px;
padding-top:
5px;
padding-left:
20px;
font-weight:
bold;
}
#right3li{
font-size:
14px;
text-align:
left;
color:
#036;
background-color:
#F9F9F9;
word-spacing:
normal;
height:
25px;
width:
789px;
padding-top:
5px;
padding-left:
10px;
border-bottom-width:
thin;
border-bottom-style:
dashed;
border-bottom-color:
#666;
list-style-type:
none;
}
#footer{
clear:
both;
font-size:
16px;
color:
#333;
background-color:
#CAF2FF;
text-align:
right;
height:
45px;
width:
990px;
padding-top:
11px;
padding-right:
10px;
font-weight:
bold;
font-style:
italic;
}
5、二级页面的制作
5.1登录注册页面的设计
主要div如下:
#loading{
background-image:
url(image/loading.jpg);
float:
none;
height:
625px;
width:
1000px;
padding-top:
130px;
padding-right:
0px;
padding-bottom:
0px;
padding-left:
0px;
}
.loading1{
font-size:
30px;
font-weight:
bold;
color:
#036;
text-align:
center;
font-style:
italic;
line-height:
40px;
}
.loading2{
width:
120px;
color:
#036;
text-align:
right;
font-size:
16px;
font-weight:
bold;
padding-right:
20px;
}
5.2其他子页面的设计
以课程简介为例,其左侧采用树形目录的形式。
主要div设置如下:
#menu{
font-weight:
bold;
font-size:
14px;
background-color:
#F7F7F7;
text-align:
left;
float:
left;
height:
510px;
width:
200px;
margin:
0px;
padding:
0px;
}
#menuli{
margin:
0px;
list-style-type:
none;
line-height:
30px;
padding-top:
0px;
padding-right:
0px;
padding-bottom:
0px;
padding-left:
10px;
}
#menuulli{
margin:
0px;
list-style-type:
none;
line-height:
20px;
padding:
0px;
}
#menua{
color:
#333;
height:
20px;
text-decoration:
none;
border:
0pxsolid#333;
}
#menua:
hover{
color:
#06F;
}
#main{
margin:
0px;
padding:
0px;
height:
511px;
width:
799px;
float:
right;
background-color:
#E8E8E8;
}
#main1{
font-size:
16px;
text-align:
left;
margin-right:
10px;
margin-left:
10px;
line-height:
28px;
color:
#333;
}
#main2{
font-size:
24px;
font-weight:
bold;
text-align:
center;
margin-top:
10px;
color:
#036;
}
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;
varerrObj=document.getElementById("error_mima");
if(val.value!
=vall){
errObj.innerHTML="前后密码要相同";
}
}
functioncheck()
{
varval=form.xm;
varval2=form.mima1;
varval3=form.mima2;
varerrObj=document.getElementById("error_name");
varerrObj1=document.getElementById("error_mima");
if(val.value.length==0){
errObj.innerHTML="用户名不能为空";
val.focus();
returnfalse;
}
else{
errObj.innerHTML="";
}
if(val3.value!
=val2.value){
errObj1.innerHTML="前后密码要相同";
val3.focus();
returnfalse;
}
else
{
errObj1.innerHTML="";
}
returntrue;
}
6.3树形目录代码
functioninit(){
varuls=document.getElementsByTagName("ul");//取得所有ul元素
for(vari=0;i uls[i].style.display="none"; } } functionexpandMenu(menu1){ //取得li标签(一级菜单)下的第一个ul元素 varul=menu1.getElementsByTagName("ul")[0]; if(ul.style.display=="none"){ ul.style.display="block";//显示 }else{ ul.style.display="none";//隐藏 } } 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脚本的知识去实现网页的许多功能,使自己设计的页面更加合理,也更加的丰富。 本次的网页设计基本实现了所要求的一些样式和功能,但还存在很多不完善的地方。 本次网站设计的优缺点如下: 网站规划合理,结构清晰,页面设计清晰大方,网站风格一致,。 但是也存在一些问题,如素材的准备不够丰富;主页在不同的浏览的效果有差别;各框架页设计不详细;网站很大一部分功能尚未实现。 以后在网页设计中一定要在多种浏览器中预览,以防止部分浏览器不兼容页面。 其次就是学习一些图片视频制作处理软件,保证素材的充足和完美。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web程序设计 Web 程序设计 课程设计 报告