课程设计报告Word文件下载.docx
《课程设计报告Word文件下载.docx》由会员分享，可在线阅读，更多相关《课程设计报告Word文件下载.docx（23页珍藏版）》请在冰点文库上搜索。
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]
其它
说明
１.本表应在每次实施前一周由负责教师填写二份，院系审批后交院系办备案，一份由负责教师留用。
２.若填写内容较多可另纸附后。
3.一题多名学生共用的，在设计内容、参数、要求等方面应有所区别。
教研室主任：
指导教师：
年月日
目录
1.网站的结构规划4
2.素材的准备5
3.站点建立6
4.主页面的制作8
4.1主页面结构图如下：
8
4.2主页面主要div如下：
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主页面布局图
body,div{
margin:
0;
padding:
}
div{
height:
600px;
border:
solid;
.left{//对左部的div样式进行设置
float:
left;
width:
250px;
border-color:
#fff;
position:
absolute;
left:
0px;
.right{//对右部的div样式进行设置
right;
1050px;
.center{//对中间的div样式进行设置
0200px;
1pxsolid;
border-top-color:
border-bottom-color:
border-left-color:
#c8c8c8;
border-right-color:
74px;
750px;
.top{//对顶部的div样式进行设置
1300px;
500px;
0auto;
background-repeat:
no-repeat;
.down{//对底部的div样式进行设置
129px;
background-color:
#333333;
margin-top:
5px;
5.二级页面的制作
5.1局部刷新的使用
center区域中的内容可实现局部刷新，并不会因为选择某种功能而导致整个界面的刷新，局部刷新主要的实现方式是通过js改变iframe框中的src值。
right区域中的内容使用了iframe框，其中读取了公告页面的内容。
5.2框架使用
班级简介、班级相册、学习园地、班级LOGO的导航实现及center区域的模块和公告区域的模块都采用了曲边设计。
主要div设置如下：
.box{//对导航按钮的div框进行设置
10px;
1pxsolid#c8c8c8;
130px;
-webkit-border-radius:
50px;
-moz-border-radius:
-o-border-radius:
border-radius:
font-family:
"
微软雅黑"
;
font-size:
14px;
cursor:
pointer;
}
.box2{//center区域中的iframe的样式设置
100px;
380px;
margin-left:
75px;
line-height:
22px
.innerbox{//center区域中的iframe中的子网站的div的样式设置
595px;
360px;
22px;
none;
.box3{//right区域中的iframe框的样式设置
80px;
200px;
400px;
20px;
5.3注册页面设计
主要div如下：
.navigation_top{//注册及登录界面的顶部div设置
overflow:
hidden;
background:
#F3F3F3;
text-align:
center;
150px;
.navigation_div{
800px;
0pxauto;
.navigation_center{//注册及登录界面的center的div的样式设置
#fff;
3em0em;
350px;
relative;
.navigation_box{//注册及登录界面的center的div中的小div的样式设置
28%;
.navigation_account{//此div用来固定登录窗口的位置
300px;
6.JavaScript功能代码的编写
6.1导航代码
functionClassabout（）{
document.getElementById（"
cc"
）.src='
class_about.html'
}//该代码实现id为cc的div的局部刷新
functionClassphoto（）{
classpage_photo.html'
functionClassstudy（）{
classpage_area.html'
functionClasslogo（）{
classpage_logo.html'
functionChangecolor1（）{
Classabout"
）.style.background="
#fa694e"
）.style.border="
}//该代码改变id为Classabout的div的背景和边框颜色
functionChangecolor2（）{
Classphoto"
functionChangecolor3（）{
Classstudy"
functionChangecolor4（）{
Classlogo"
functionChangecolor5（）{
#fff"
1px#c8c8c8solid"
functionChangecolor6（）{
functionChangecolor7（）{
functionChangecolor8（）{
6.2注册校验代码
functioncheck1（）
{
varaccount=document.getElementById（"
account"
）.value;
varpassword=document.getElementById（"
password"
varrepassword=document.getElementById（"
repassword"
varmail=document.getElementById（"
mail"
varcard=document.getElementById（"
card"
//获值
if（account!
="
）//帐号不为空进行下一步判断
{
if（password==repassword）//两次密码输入一致进行下一步判断
{
if（isEmail（mail）==true）//邮箱验证通过进行下一步判断
{
if（checkidcard（card）==true）//学号判断成功后，跳转界面
{
alert（"
注册成功，页面将跳转到登录界面"
）;
window.location.href=window.location.href;
}
else
学号格式有误，请输入八位整数"
document.getElementById（"
）.value="
}
else
alert（"
邮箱格式有误，请重新输入"
document.getElementById（"
}
else
两次密码输入不一致"
}
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{
}
}//判断学号的正则表达式
6.3登录校验代码
functioncheck（）
if（account=="
admin"
&
&
password=="
）
window.location.href='
classpage.html'
帐号或密码错误，请重新输入"
document.getElementById（"
6.4时间显示代码
<
scriptlanguage="
javascript"
>
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（）;
//获取秒数
timeShow"
）.innerHTML="
访问时间：
：
+y+"
年"
+mo+"
月"
+d+"
日"
+h+"
时"
+m+"
分"
+s+"
秒"
//输出时间
/script>
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]孙良军.《网页设计与布局实用教程》北京
升级会员 