1、 WebWeb 程序设计基础程序设计基础 课程实践报告课程实践报告 设计题目: 班级网站设计与制作 完成日期： 2015 年 1 月 3 日 指导教师评语: _ _ _ 成 绩 （ 五 级 记 分 制 ） : _ 指导教师（签字）: 1 课程设计任务书课程设计任务书 设计题目：班级网站设计与制作 学生姓名 课程名称 Web 程序设计基础课程实践 专业班级 地 点 I304/I306 起止时间 2014.12.29-2015.1. 4 设 计 内 容 及 要 求 围绕“科学创新、团队精神、自主学习、沟通交流”为主题，围绕自己班级特色，设计 制作班级网站。要求： 1、网站至少要有 5 个页面以上，
2、页面内容需包括班级简介，班级 logo，班级相册，学 习园地，班级公告等； 2、网站主题鲜明，内容健康，构思新颖，有特别之处； 3、网站文本撰写应富于文采并体现班级风采； 4、网站页面和超链接应形成清晰合理的框架； 5、首页上加入日期时间显示； 6、页面要求有用户注册登录功能，并进行客户端数据校验。 7、正确规划网站的栏目结构，合理建立站点目录，见设计指导书。 设 计 参 数 1、 整个网站页面个数不少于 5 个； 2、 采用 CSS+DIV 进行页面布局，整个网站采用统一的 CSS； 3、 站点目录规划合理，比如，图片放在 images 下，CSS 文件放在 css 目录下，各栏目 放在对应
3、的栏目文件下； 4、 至少一段 JavaScript 代码； 5、 建议色彩搭配不多余三种。 进 度 要 求 12 月 29 日：了解设计任务、收集资料、考虑网站栏目设计 12 月 30 日：素材设计与制作或收集； 12 月 31 日-1 月 3 日：页面设计与制作； 1 月 4 日：撰写课程实践总结，作品检查、提交、答辩 参 考 资 料 1 房爱莲网页设计与制作案例教程M北京：清华大学出版社，2009 年 2文谦、赵位等网页制作综合技术教程M北京：人民邮电出版社，2010 年 2 其 它 说 明 .本表应在每次实施前一周由负责教师填写二份，院系审批后交院系办备案，一份由 负责教师留用。.若填
4、写内容较多可另纸附后。3.一题多名学生共用的，在设计内容、 参数、要求等方面应有所区别。 教研室主任： 指导教师： 年 月 日 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.设计效果图 . 2
5、2 7.1 主页效果图 22 7.2 导航测试效果图 23 7.3 登录及注册界面 23 总 结 . 25 致谢 . 26 参考文献 . 27 4 1.1.网站的结构规划网站的结构规划 班级网站，主要分为登录、注册（仅客户端验证）、班级简介、班级相册、学习园 地、班级 LOGO、班级公告等七部分。规划详图见图 1. 图 1 规划详图 网站：班级网站 网站首页 classpage.html 班 级 LO GO 班 级 相 册 学 习 园 地 班 级 简 介 班 级 公 告 网站 推荐 书籍 推荐 登录验证及注册验证界面index.html 注 册 验证 登 录 验证 5 2.2.素材的准备素材的准备 根据规划图，依次准备了如下素材。 图 2-1 1.jpg 图 2-2 domi.jpg 图 2-3 logo.jpg 6 图 2-4 tree.jpg 3.3.站点建立站点建立 先建一个项目文件夹“班级网站”（如），然后在里边建一个站点 ind
