1、交通运输学院课程设计1交通运输学院网页制作及管理课程设计学 院 交通运输学院_班 级 信管 11 交通运输学院课程设计2指导教师评语及成绩指导教师评语 成绩 导师签字： 年 月 日 交通运输学院课程设计3兰州交通大学交通运输学院课程设计任务书所在系：信息管理与信息系统 课程名称： 网页设计 指导教师（签名）： 专业班级： 信管11 学生姓名： 学号： 201000832 一、课程设计题目网页设计二、课程设计的目的发现课程学习中的不足和薄弱环节，予以补充和加强。综合运用在课程学习过程中所学知识，同时为了实现课 程设计的规定成果进行更深入的理论学习和实践拓展。培养独立思考和解决问题的能力，探索和创
2、新的能力。三、课程设计的主要内容和要求（包括原始数据、技术参数、 设计要求、工作量要求等） 自选所需网页设计工具和语言，搜集或自创网页所需素材，实现网页的布局、美工、基本客户端校验等目的。如有余力者，可以进一步学 习并应用数据库技术。要求所有设计为原创结果，布局合理，美观大方，细节处 尽可能应用所学过的设计技术，如 标签式导航、图像翻转等。在此基 础上尽可能有所 创新。工作量方面，要求设计一个网站的主页和其它至少两个页面，要求风格统一。课程设计报告须详细地阐述设计思路和过程，以网页布局结构为主线，分别注释代码功能。相似部分可适当省略。文档撰写须符合统一的格式规范。交通运输学院课程设计4四、工作
3、进度安排 本课程设计的所有内容在一周内完成。 第 1 天：复习巩固原有知识、查阅相关资料、构思出基本设计方案；第 2 天：搜集素材、应用相关工具设计网页基本结构。将设计成果写入报告。第 3-6 天：完成页面内容设计，进行细节美化，加入特定效果；将设计成果写入报告。第7天：完善细节，按要求完善修改课程设计报告。提交设计报告。五、主要参考文献1 Andy Budd. 精通 CSS：高级 Web标准解决方案（第二版）. 北京. 人民邮电出版社.2 张亚飞. CSS 开发. 北京. 电子工业出版社.审核批准意见系主任（签字） 年 月 日目 录1 说明1.1目的：发现课程学习中的不足和薄弱环节，予以补充
4、和加强。综合运用在课程学习过程中所学知识，同时为了实现课程设计的规定成果进行更深入的理论学习和实践拓展。培养独立思考和解决问题的能力，探索和创新的能力。1.2 内容：自选所需网页设计工具和语言，搜集或自创网页所需素材，实现网页的布局、美工、基本客户端校验等目的。如有余力者，可以进一步学习并应用数据库技术。交通运输学院课程设计51.3主要任务：工作量方面，要求设计一个网站的主页和其它至少两个页面，要求风格统一。课程设计报告须详细地阐述设计思路和过程，以网页布局结构为主线，分别注释代码功能。相似部分可适当省略。文档撰写须符合统一的格式规范。2 设计过程2.1设计思想：总体上遵循从整体到部分的思路，
5、由主及次，由大及小。首先，明确设计主题：设计班级网站的三个网页，其中包括班级主页，班级简介页面，班级相册页码，并保持其风格的一致。其次，对每个页面的布局进行设计和安排。运用本学期对 css及脚本的相关知识，对布局进行合理的安排。再次，主要通过对类和块的应用，对每块布局进行内容的设计和安排。最后，将三个网页通过连接的形式合成一个整体，进而达到最终目的。 、2.2设计内容2.2.1网页一的源代码及分析整体分析：*margin:0;padding:0;.wrapper /*对整体框架进行设置*/width: 1102px;height:1050px;交通运输学院课程设计6margin:0 auto;
6、text-align:center; /*对日期的属性进行设置*/ .footer /*对底部布局的属性进行设置*/ overflow:hidden;height:300px;.content /*对内容框架的属性进行设置*/ overflow:hidden; height:700pxbody background-image:url(D:/Mydcuments/MyPictures/ce48b98.gif /*为整体添加背景图片*/ .content .primary /*对内容中右面主体部分的布局进行设置*/ width:64%;height:480px;float:right;displ
7、ay:inline;.content .secondary /*对内容中第一列布局的属性进行设置*/ float:left;height:500px;width:36%;background-image:url(D:/My ocuments/MyPictures/0010.gif);background-attachment:fixed;filter:alpha(opacity=100);.content .primary .primary width:61%;float:left;交通运输学院课程设计7display:inline; /*对内容中第二列部分的属性进行设置*/ .content
8、 .primary .secondary /*对内容中第三列布局的属性进行设置*/width:36%;height:695px;float:right;display:inline; padding-right:3px;background-image:url(D:/My Documents/My Pictures/43.gif);background-repeat:repeat; /*对内容中第三列的框架属性进行设置*/ .footer .primary /*对底部中右部分的主体的属性进行设置*/width:69%; height:300px;float:right;display:inli
9、ne;.footer .secondary /*对底部的第一列布局的属性进行设置*/float:left;height:300px;width:31%;background-image:url(D:/MyDocuments/MyPictures/getCAR7XUAB.gif);filter:alpha(opacity=100);.footer .primary .primarywidth:66%;float:left;display:inline;background-image:url(D:/MyDocuments/My 交通运输学院课程设计8Pictures/2000135760.jpg
10、);filter:alpha(opacity=85);.footer .primary .secondary /*对底部的第三列布局的属性进行设置*/width:34%;height:300px;float:right;display:inline;padding-right:3px;background-image:url(D:/MyDocuments/MyPictures/ebe7923.gif);atext-decoration:none;整体布局：Top Wrapper header .nav交通运输学院课程设计9ContentPrimary .primaryPrimary.secon
11、darySecondaryFooterSecondary Primary .primaryPrimary .secondary顶部分析：.top /*对最顶部的布局进行设置*/ width:1105px;background-image:url(D:/My Documents/My Pictures/图片 00.jpg);交通运输学院课程设计10截图如图 2.1.1图 2.2.1导航分析：ul.nav /*对列表下的导航属性进行设置*/ list-style:none;width:1105px;height:40px;background:url(D:/My Documents/My Pict
12、ures/getCAA.jpg) repeat-x;ul.nav li /*对导航下的列表项进行设置*/ float:left;width:220px;display:block;padding:5px;border-top:2px solid #FFFFFF; /*使导航条产生立体效果*/border-right:5px solid #0099FF;border-bottom:5px solid #0066CC;border-left:2px solid #FFFFFF;ul.nav adisplay:black;padding:15px;text-decoration:none;color:#FF33FF;
