《Web程序设计基础》 课程实践报告-班级网站设计与制作.doc

重庆科技学院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年/view/4807f61ca300a6c30c229f75.html2文谦、赵位等网页制作综合技术教程M北京：人民邮电出版社，2010年3 0:93/wwwroot/4http:/225226./class/default/default.aspx5 http:/07/class/default/default.aspx其它说明.本表应在每次实施前一周由负责教师填写二份，院系审批后交院系办备案，一份由负责教师留用。.若填写内容较多可另纸附后。3.一题多名学生共用的，在设计内容、参数、要求等方面应有所区别。教研室主任： 指导教师： 年 月 日目录1.网站的结构规划42.素材的准备53.站点建立64.主页面的制作84.1主页面结构图如下：84.2主页面主要div如下：85.二级页面的制作105.1 局部刷新的使用105.2框架使用115.3注册页面设计136.JavaScript功能代码的编写156.1导航代码156.2注册校验代码156.3登录校验代码196.4时间显示代码207.设计效果图227.1主页效果图227.2导航测试效果图237.3登录及注册界面23总 结25致谢26参考文献271.网站的结构规划班级网站，主要分为登录、注册（仅客户端验证）、班级简介、班级相册、学习园地、班级LOGO、班级公告等七部分。规划详图见图1.网站：班级网站网站首页classpage.html班级LOGO班级相册学习园地班级简介班级公告网站推荐书籍推荐登录验证及注册验证界面index.html注册验证登录验证图1 规划详图2.素材的准备根据规划图，依次准备了如下素材。图2-11.jpg图2-2 domi.jpg图2-3logo.jpg图2-4 tree.jpg3.站点建立 先建一个项目文件夹“班级网站”（如），然后在里边建一个站点index.html,该网页用于登录注册（仅客户端验证），CSS文件夹，用于存放样式文件，style.css，IMG文件夹，用于存放图片资源及LOGO，JS文件夹，用于存放Js文件。图3-1 站点文件夹4.主页面的制作4.1主页面结构图如下：TopLeftRightCenterDowm图41 主页面布局图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:0 200px; border:1px solid; 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:0 auto; background-repeat:no-repeat;.down /对底部的div样式进行设置width:1300px;height:129px; background-color:#333333; border-color:#fff;margin:0 auto; 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:1px solid #c8c8c8; width:130px; height:130px; margin:0 auto;-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:1px solid #c8c8c8; width:130px; height:130px; margin:0 auto; -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:1px solid #c8c8c8; margin:0 auto; -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:0 auto;text-align: center;border:none;height:150px;.navigation_divwidth: 800px;margin: 0px auto;border:none;.navigation_center/注册及登录界面的center的div的样式设置margin-top:0px;overflow: hidden;background: #fff;padding: 3em 0em; width:1300px; height:350px;margin:0 auto;text-align: center;position:relative;border:none;.navigation_box /注册及登录界面的center的div中的小div的样式设置background-color:#fff;border:1px solid #c8c8c8; margin:0 auto; -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导航代码function Classabout()document.getElementById(cc).src=class_about.html;/该代码实现id为cc的div的局部刷新function Classphoto()document.getElementById(cc).src=classpage_photo.html;function Classstudy()document.getElementById(cc).src=classpage_area.html;function Classlogo()document.getElementById(cc).src=classpage_logo.html;function Changecolor1()document.getElementById(Classabout).style.background=#fa694e;document.getElementById(Classabout).style.border=#fa694e;/该代码改变id为Classabout的div的背景和边框颜色function Changecolor2()document.getElementById(Classphoto).style.background=#fa694e;document.getElementById(Classphoto).style.border=#fa694e;function Changecolor3()document.getElementById(Classstudy).style.background=#fa694e;document.getElementById(Classstudy).style.border=#fa694e;function Changecolor4()document.getElementById(Classlogo).style.background=#fa694e;document.getElementById(Classlogo).style.border=#fa694e;function Changecolor5()document.getElementById(Classabout).style.background=#fff;document.getElementById(Classabout).style.border=1px #c8c8c8 solid;function Changecolor6()document.getElementById(Classphoto).style.background=#fff;document.getElementById(Classphoto).style.border=1px #c8c8c8 solid;function Changecolor7()document.getElementById(Classstudy).style.background=#fff;document.getElementById(Classstudy).style.border=1px #c8c8c8 solid;function Changecolor8()document.getElementById(Classlogo).style.background=#fff;document.getElementById(Classlogo).style.border=1px #c8c8c8 solid;6.2注册校验代码function check1()var account=document.getElementById(account).value;var password=document.getElementById(password).value;var repassword=document.getElementById(repassword).value;var mail=document.getElementById(mail).value;var card=document.getElementById(card).value;/获值if(account!=)/帐号不为空进行下一步判断if(password=repassword)/两次密码输入一致进行下一步判断if(isEmail(mail)=true)/邮箱验证通过进行下一步判断if(checkidcard(card)=true)/学号判断成功后，跳转界面alert(注册成功，页面将跳转到登录界面);window.location.href=window.location.href;elsealert(学号格式有误，请输入八位整数);document.getElementById(card).value=;elsealert(邮箱格式有误，请重新输入);document.getElementById(mail).value=;elsealert(两次密码输入不一致);document.getElementById(password).value=;document.getElementById(repassword).value=;elsealert(帐号不能为空);function isEmail( str ) var myReg = /-_A-Za-z0-9+(_A-Za-z0-9+.)+A-Za-z0-92,3$/; if(myReg.test(str) return true; return false; /判断邮箱的正则表达式function checkidcard( s ) var regu =/d8$/; var re = new RegExp(regu); if (re.test(s) return true; else return false; /判断学号的正则表达式6.3登录校验代码function check()var account=document.getElementById(account).value;var password=document.getElementById(password).value;if(account=admin&password=admin)window.location.href=classpage.html;elsealert(帐号或密码错误，请重新输入);document.getElementById(account).value=;document.getElementById(password).value=;6.4时间显示代码 var t = null; t = setTimeout(time,1000);/开始执行 function time() clearTimeout(t);/清除定时器 dt = new Date(); var y=dt.getYear()+1900;/获取年份 var mo=dt.getMonth()+1;/获取月份 var d=dt