课程的设计班级网站的设计与制作.docxVIP

《Web程序设计基础》课程实践报告设计题目:《班级网站设计与制作》完成日期：2015年1月3日指导教师评语:____________________________________________________________________________________________________________________________________________________________________ __________________________________________________________________________________成绩（五级记分制）: _指导教师（签字）:课程设计任务书设计题目：班级网站设计与制作学生姓名课程名称Web程序设计基础课程实践专业班级计科2013地点I304/I306起止时间2014.12.29-2015.1. 4设计内容及要求围绕“科学创新、团队精神、自主学习、沟通交流”为主题，围绕自己班级特色，设计制作班级网站。要求：1、网站至少要有5个页面以上，页面内容需包括班级简介，班级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.网站的结构规划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.图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主页面结构图如下：图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; pos