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

重庆科技学院 《Web程序设计基础》 课程实践报告 学 院:电气与信息工程学院专业班级: 计科13-01 学生姓名: 学 号:2013441432 设计地点（单位）I304 设计题目: 《班级网站与制作》 指导教师评语: ____________________________________________________________________________________________________________________________________________________________________ __________________________________________________________________________________ 成绩（五级记分制）: _ 指导教师（签字）: 重庆科技学院 课程设计任务书 设计题目：班级网站设计与制作 学生姓名 课程名称 Web程序设计基础课程实践 专业班级 计科2013 地 点 I304/I306 起止时间 2014.12.29-2015.1. 4 设计内容及要求 围绕“科学创新、团队精神、自主学习、沟通交流围绕自己班级特色 1、网站至少要有个页面以上，页面内容需包括班级简介，班级logo，班级相册，学习园地，班级公告等； 2、网站主题鲜明，内容健康，构思新颖，有特别之处； 3、网站文本撰写应富于文采并体现班级风采； 4、网站页面和超链接应形成清晰合理的框架 5、首页上加入日期时间显示； 6、页面要求有用户注册登录功能，并进行客户端数据校验。 7、正确规划网站的栏目结构，合理建立站点目录，见设计指导书。 设计 参数 整个网站页面个数不少于5个； 采用CSS+DIV进行页面布局，整个网站采用统一的CSS； 站点目录规划合理，比如，图片放在images下，CSS文件放在css目录下，各栏目放在对应的栏目文件下； 至少一段JavaScript代码； 建议色彩搭配不多余三种。 进度 要求 12月29日：了解设计任务、收集资料、考虑网站栏目设计 12月30日：素材设计与制作或收集； 12月31日-1月3日：页面设计与制作； 1月4日：撰写课程实践总结，作品检查、提交、答辩 参考资料 [1] 房爱莲．《网页设计与制作案例教程》[M]．北京：清华大学出版社，2009年． /view/4807f61ca300a6c30c229f75.html [2]文谦、赵位等．《网页制作综合技术教程》[M]．北京：人民邮电出版社，2010年． [3] 0:93/wwwroot/ [4]http://225226./class/default/default.aspx [5] http://07/class/default/default.aspx 其它 说明 １.本表应在每次实施前一周由负责教师填写二份，院系审批后交院系办备案，一份由负责教师留用。２.若填写内容较多可另纸附后。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 规划详图 2.素材的准备 根据规划图，依次准备了如下素材。 图2-11.jpg 图2-2 domi.jpg 图2-3logo.jpg 图2-4 tree.jpg 3.站点建立 先建一个项目文件夹“班级网站”（如）index.html,该网页用于登录注册（验证），用于存放样式文件用于图片及LOGO，JS文件夹，用于存放Js。 3-1 站点文件夹 4.主页面的制作 4.1主页面结构图如下： 图4—1 主页面布局图 4.2主页面主要div如下： body,div{ margin:0; padding:0; } div{ heig