课程设计报告.docx
- 文档编号:23094751
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:23
- 大小:2.54MB
课程设计报告.docx
《课程设计报告.docx》由会员分享,可在线阅读,更多相关《课程设计报告.docx(23页珍藏版)》请在冰豆网上搜索。
课程设计报告
重庆科技学院
《Web程序设计基础》
课程实践报告
学院:
电气与信息工程学院专业班级:
计科13-01
学生姓名:
张其帆学号:
2013441432
设计地点(单位)I304
设计题目:
《班级网站设计与制作》
完成日期:
2015年1月3日
指导教师评语:
____________________________________________________________________________________________________________________________________________________________________
__________________________________________________________________________________
成绩(五级记分制):
_
指导教师(签字):
重庆科技学院
课程设计任务书
设计题目:
班级网站设计与制作
学生姓名
课程名称
Web程序设计基础课程实践
专业班级
计科2013
地点
I304/I306
起止时间
2014.12.29-2015.1.4
设计内容及要求
围绕“科学创新、团队精神、自主学习、沟通交流”为主题,围绕自己班级特色,设计制作班级网站。
要求:
1、网站至少要有5个页面以上,页面内容需包括班级简介,班级logo,班级相册,学习园地,班级公告等;
2、网站主题鲜明,内容健康,构思新颖,有特别之处;
3、网站文本撰写应富于文采并体现班级风采;
4、网站页面和超链接应形成清晰合理的框架;
5、首页上加入日期时间显示;
6、页面要求有用户注册登录功能,并进行客户端数据校验。
7、正确规划网站的栏目结构,合理建立站点目录,见设计指导书。
设计
参数
1、整个网站页面个数不少于5个;
2、采用CSS+DIV进行页面布局,整个网站采用统一的CSS;
3、站点目录规划合理,比如,图片放在images下,CSS文件放在css目录下,各栏目放在对应的栏目文件下;
4、至少一段JavaScript代码;
5、建议色彩搭配不多余三种。
进度
要求
12月29日:
了解设计任务、收集资料、考虑网站栏目设计
12月30日:
素材设计与制作或收集;
12月31日-1月3日:
页面设计与制作;
1月4日:
撰写课程实践总结,作品检查、提交、答辩
参考资料
[1]房爱莲.《网页设计与制作案例教程》[M].北京:
清华大学出版社,2009年.
[2]文谦、赵位等.《网页制作综合技术教程》[M].北京:
人民邮电出版社,2010年.
[3]http:
//61.233.135.30:
93/wwwroot/
[4]
[5]
其它
说明
1.本表应在每次实施前一周由负责教师填写二份,院系审批后交院系办备案,一份由负责教师留用。
2.若填写内容较多可另纸附后。
3.一题多名学生共用的,在设计内容、参数、要求等方面应有所区别。
教研室主任:
指导教师:
年月日
目录
1.网站的结构规划4
2.素材的准备5
3.站点建立6
4.主页面的制作8
4.1主页面结构图如下:
8
4.2主页面主要div如下:
8
5.二级页面的制作10
5.1局部刷新的使用10
5.2框架使用11
5.3注册页面设计13
6.JavaScript功能代码的编写15
6.1导航代码15
6.2注册校验代码15
6.3登录校验代码19
6.4时间显示代码20
7.设计效果图22
7.1主页效果图22
7.2导航测试效果图23
7.3登录及注册界面23
总结25
致谢26
参考文献27
1.网站的结构规划
班级网站,主要分为登录、注册(仅客户端验证)、班级简介、班级相册、学习园地、班级LOGO、班级公告等七部分。
规划详图见图1.
图1规划详图
2.素材的准备
根据规划图,依次准备了如下素材。
图2-11.jpg
图2-2domi.jpg
图2-3logo.jpg
图2-4tree.jpg
3.站点建立
先建一个项目文件夹“班级网站”(如),然后在里边建一个站点index.html,该网页用于登录注册(仅客户端验证),CSS文件夹,用于存放样式文件,style.css,IMG文件夹,用于存放图片资源及LOGO,JS文件夹,用于存放Js文件。
图3-1站点文件夹
4.主页面的制作
4.1主页面结构图如下:
图4—1主页面布局图
4.2主页面主要div如下:
body,div{
margin:
0;
padding:
0;
}
div{
height:
600px;
border:
solid;
}
.left{//对左部的div样式进行设置
float:
left;
width:
250px;
border-color:
#fff;
position:
absolute;
left:
0px;
}
.right{//对右部的div样式进行设置
float:
right;
width:
250px;
border-color:
#fff;
position:
absolute;
left:
1050px;
}
.center{//对中间的div样式进行设置
margin:
0200px;
border:
1pxsolid;
border-top-color:
#fff;
border-bottom-color:
#fff;
border-left-color:
#c8c8c8;
border-right-color:
#c8c8c8;
position:
absolute;
left:
74px;
width:
750px;
}
.top{//对顶部的div样式进行设置
width:
1300px;
height:
500px;
border-color:
#fff;
margin:
0auto;
background-repeat:
no-repeat;
}
.down{//对底部的div样式进行设置
width:
1300px;
height:
129px;
background-color:
#333333;
border-color:
#fff;
margin:
0auto;
margin-top:
5px;
}
5.二级页面的制作
5.1局部刷新的使用
center区域中的内容可实现局部刷新,并不会因为选择某种功能而导致整个界面的刷新,局部刷新主要的实现方式是通过js改变iframe框中的src值。
right区域中的内容使用了iframe框,其中读取了公告页面的内容。
5.2框架使用
班级简介、班级相册、学习园地、班级LOGO的导航实现及center区域的模块和公告区域的模块都采用了曲边设计。
主要div设置如下:
.box{//对导航按钮的div框进行设置
background-color:
#fff;
margin-top:
10px;
border:
1pxsolid#c8c8c8;
width:
130px;
height:
130px;
margin:
0auto;
-webkit-border-radius:
50px;
-moz-border-radius:
50px;
-o-border-radius:
50px;
border-radius:
50px;
font-family:
"微软雅黑";
font-size:
14px;
cursor:
pointer;
}
.box2{//center区域中的iframe的样式设置
background-color:
#fff;
border:
1pxsolid#c8c8c8;
width:
130px;
height:
130px;
margin:
0auto;
-webkit-border-radius:
50px;
-moz-border-radius:
50px;
-o-border-radius:
50px;
border-radius:
50px;
margin-top:
100px;width:
600px;
height:
380px;
margin-left:
75px;
font-family:
"微软雅黑";
font-size:
14px;
line-height:
22px
}
.innerbox{//center区域中的iframe中的子网站的div的样式设置
margin-top:
0px;
width:
595px;
height:
360px;
margin-left:
0px;
font-family:
"微软雅黑";
font-size:
14px;
line-height:
22px;
border:
none;
}
.box3{//right区域中的iframe框的样式设置
background-color:
#fff;
border:
1pxsolid#c8c8c8;
margin:
0auto;
-webkit-border-radius:
50px;
-moz-border-radius:
50px;
-o-border-radius:
50px;
border-radius:
50px;
margin-top:
80px;
width:
200px;
height:
400px;
margin-left:
20px;
font-family:
"微软雅黑";
font-size:
14px;
line-height:
22px
}
5.3注册页面设计
主要div如下:
.navigation_top{//注册及登录界面的顶部div设置
margin-top:
0px;
overflow:
hidden;
background:
#F3F3F3;
width:
1300px;
margin:
0auto;
text-align:
center;
border:
none;
height:
150px;
}
.navigation_div{
width:
800px;
margin:
0pxauto;
border:
none;
}
.navigation_center{//注册及登录界面的center的div的样式设置
margin-top:
0px;
overflow:
hidden;
background:
#fff;
padding:
3em0em;
width:
1300px;
height:
350px;
margin:
0auto;
text-align:
center;
position:
relative;
border:
none;
}
.navigation_box{//注册及登录界面的center的div中的小div的样式设置
background-color:
#fff;
border:
1pxsolid#c8c8c8;
margin:
0auto;
-webkit-border-radius:
50px;
-moz-border-radius:
50px;
-o-border-radius:
50px;
border-radius:
50px;
width:
600px;
height:
380px;
font-family:
"微软雅黑";
font-size:
14px;
line-height:
22px;
position:
absolute;
left:
28%;
}
.navigation_account{//此div用来固定登录窗口的位置
margin-top:
100px;
margin-left:
150px;
width:
300px;
height:
200px;
border:
none;
}
6.JavaScript功能代码的编写
6.1导航代码
functionClassabout(){
document.getElementById("cc").src='class_about.html';
}//该代码实现id为cc的div的局部刷新
functionClassphoto(){
document.getElementById("cc").src='classpage_photo.html';
}
functionClassstudy(){
document.getElementById("cc").src='classpage_area.html';
}
functionClasslogo(){
document.getElementById("cc").src='classpage_logo.html';
}
functionChangecolor1(){
document.getElementById("Classabout").style.background="#fa694e";
document.getElementById("Classabout").style.border="#fa694e";
}//该代码改变id为Classabout的div的背景和边框颜色
functionChangecolor2(){
document.getElementById("Classphoto").style.background="#fa694e";
document.getElementById("Classphoto").style.border="#fa694e";
}
functionChangecolor3(){
document.getElementById("Classstudy").style.background="#fa694e";
document.getElementById("Classstudy").style.border="#fa694e";
}
functionChangecolor4(){
document.getElementById("Classlogo").style.background="#fa694e";
document.getElementById("Classlogo").style.border="#fa694e";
}
functionChangecolor5(){
document.getElementById("Classabout").style.background="#fff";
document.getElementById("Classabout").style.border="1px#c8c8c8solid";
}
functionChangecolor6(){
document.getElementById("Classphoto").style.background="#fff";
document.getElementById("Classphoto").style.border="1px#c8c8c8solid";
}
functionChangecolor7(){
document.getElementById("Classstudy").style.background="#fff";
document.getElementById("Classstudy").style.border="1px#c8c8c8solid";
}
functionChangecolor8(){
document.getElementById("Classlogo").style.background="#fff";document.getElementById("Classlogo").style.border="1px#c8c8c8solid";
}
6.2注册校验代码
functioncheck1()
{
varaccount=document.getElementById("account").value;
varpassword=document.getElementById("password").value;
varrepassword=document.getElementById("repassword").value;
varmail=document.getElementById("mail").value;
varcard=document.getElementById("card").value;//获值
if(account!
="")//帐号不为空进行下一步判断
{
if(password==repassword)//两次密码输入一致进行下一步判断
{
if(isEmail(mail)==true)//邮箱验证通过进行下一步判断
{
if(checkidcard(card)==true)//学号判断成功后,跳转界面
{
alert("注册成功,页面将跳转到登录界面");
window.location.href=window.location.href;
}
else
{
alert("学号格式有误,请输入八位整数");
document.getElementById("card").value="";
}
}
else
alert("邮箱格式有误,请重新输入");
document.getElementById("mail").value="";
}
else
{
alert("两次密码输入不一致");
document.getElementById("password").value="";
document.getElementById("repassword").value="";
}
}
else
{
alert("帐号不能为空");
}
}
functionisEmail(str){
varmyReg=/^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if(myReg.test(str))returntrue;
returnfalse;
}//判断邮箱的正则表达式
functioncheckidcard(s){
varregu=/^\d{8}$/;
varre=newRegExp(regu);
if(re.test(s)){
returntrue;
}else{
returnfalse;
}
}//判断学号的正则表达式
6.3登录校验代码
functioncheck()
{
varaccount=document.getElementById("account").value;
varpassword=document.getElementById("password").value;
if(account=="admin"&&password=="admin")
{
window.location.href='classpage.html';
}
else
{
alert("帐号或密码错误,请重新输入");
document.getElementById("account").value="";
document.getElementById("password").value="";
}
}
6.4时间显示代码
vart=null;
t=setTimeout(time,1000);//开始执行
functiontime()
{
clearTimeout(t);//清除定时器
dt=newDate();
vary=dt.getYear()+1900;//获取年份
varmo=dt.getMonth()+1;//获取月份
vard=dt.getDate();//获取日期
varh=dt.getHours();//获取小时数
varm=dt.getMinutes();//获取分钟数
vars=dt.getSeconds();//获取秒数
document.getElementById("timeShow").innerHTML="访问时间:
:
"+y+"年"+mo+"月"+d+"日"+h+"时"+m+"分"+s+"秒";//输出时间
t=setTimeout(time,1000);
}
7.设计效果图
7.1主页效果图
图7-1主页效果图1
图7-2主页效果图2
7.2导航测试效果图
图7-3树形目录效果图
7.3登录及注册界面
图7-4登录页面效果
图7-5注册页面效果
总结
此次课程实践的过程中,不断的发现问题并解决问题,让我在这短短的一个星期里得到了极大的提高。
对于局部刷新的实现采用了两种方法,第一种是iframe结构配合js改变src的值,第二种是由innerhtml属性来修改div里面的值,这两种技术的运用让网站不再繁杂,比较清爽干净。
课程实践的目的在于提高学生的实战水平,做出来的网站要认真的考虑客户的需求,这样才能够在以后的工作之初,便具有优势。
本次课程实践用到的技术主要有css定义属性,js控制事件的执行,由正则表达式的帮助,可以实现在本地进行一些验证,由于该学期并未学习数据库相关内容,该网站的登录仅仅是验证字符串是否相等,注册也仅仅是对规则进行验证,在以后学习了数据库的内容之后,使用新的开发技术,填充本次课程实践中网站所缺失的部分,也是有必要的,只有我们用心的做自己的每一个作品,而不是在网上去复制别人的成果,我们才能有进步,只有这样,我们才能在计算机科学与技术这门专业走的更远。
致谢
在此次课程实践过程中,游明英老师、许莎老师、刘海玲老师对我的问题进行了不厌其烦的回答与讲解,我能完成此次课程实践与他们的帮助紧密相关,在此向他们表示感谢。
参考文献
[1]孙良军.《网页设计与布局实用教程》北京
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 课程设计 报告
![提示](https://static.bdocx.com/images/bang_tan.gif)