网页制作及管理课程设计.doc

交通运输学院课程设计交通运输学院网页制作及管理课程设计学 院 交通运输学院_班 级 信管11 指导教师评语及成绩指导教师评语 成绩 导师签字： 年 月 日 兰州交通大学交通运输学院课程设计任务书所在系：信息管理与信息系统 课程名称： 网页设计 指导教师（签名）： 专业班级： 信管11 学生姓名： 学号： 201000832 一、课程设计题目 网页设计二、课程设计的目的发现课程学习中的不足和薄弱环节，予以补充和加强。综合运用在课程学习过程中所学知识，同时为了实现课程设计的规定成果进行更深入的理论学习和实践拓展。培养独立思考和解决问题的能力，探索和创新的能力。 三、课程设计的主要内容和要求（包括原始数据、技术参数、设计要求、工作量要求等） 自选所需网页设计工具和语言，搜集或自创网页所需素材，实现网页的布局、美工、基本客户端校验等目的。如有余力者，可以进一步学习并应用数据库技术。要求所有设计为原创结果，布局合理，美观大方，细节处尽可能应用所学过的设计技术，如标签式导航、图像翻转等。在此基础上尽可能有所创新。工作量方面，要求设计一个网站的主页和其它至少两个页面，要求风格统一。课程设计报告须详细地阐述设计思路和过程，以网页布局结构为主线，分别注释代码功能。相似部分可适当省略。文档撰写须符合统一的格式规范。四、工作进度安排 本课程设计的所有内容在一周内完成。 第1天：复习巩固原有知识、查阅相关资料、构思出基本设计方案；第2天：搜集素材、应用相关工具设计网页基本结构。将设计成果写入报告。第3-6天：完成页面内容设计，进行细节美化，加入特定效果；将设计成果写入报告。第7天：完善细节，按要求完善修改课程设计报告。提交设计报告。五、主要参考文献1 andy budd. 精通css：高级web标准解决方案（第二版）. 北京. 人民邮电出版社.2 张亚飞. css开发. 北京. 电子工业出版社.审核批准意见系主任（签字） 年月日目 录1 说明1.1目的：发现课程学习中的不足和薄弱环节，予以补充和加强。综合运用在课程学习过程中所学知识，同时为了实现课程设计的规定成果进行更深入的理论学习和实践拓展。培养独立思考和解决问题的能力，探索和创新的能力。1.2 内容：自选所需网页设计工具和语言，搜集或自创网页所需素材，实现网页的布局、美工、基本客户端校验等目的。如有余力者，可以进一步学习并应用数据库技术。1.3主要任务：工作量方面，要求设计一个网站的主页和其它至少两个页面，要求风格统一。课程设计报告须详细地阐述设计思路和过程，以网页布局结构为主线，分别注释代码功能。相似部分可适当省略。文档撰写须符合统一的格式规范。2 设计过程2.1设计思想： 总体上遵循从整体到部分的思路，由主及次，由大及小。首先，明确设计主题：设计班级网站的三个网页，其中包括班级主页，班级简介页面，班级相册页码，并保持其风格的一致。其次，对每个页面的布局进行设计和安排。运用本学期对css及脚本的相关知识，对布局进行合理的安排。再次，主要通过对类和块的应用，对每块布局进行内容的设计和安排。最后，将三个网页通过连接的形式合成一个整体，进而达到最终目的。、2.2设计内容2.2.1网页一的源代码及分析整体分析： * margin:0; padding:0; .wrapper /*对整体框架进行设置*/width: 1102px;height:1050px;margin:0 auto;text-align:center; /*对日期的属性进行设置*/ .footer /*对底部布局的属性进行设置*/ overflow:hidden; height:300px; .content /*对内容框架的属性进行设置*/ overflow:hidden; height:700px body background-image:url(d:/mydcuments/mypictures/ce48b98.gif /*为整体添加背景图片*/ .content .primary /*对内容中右面主体部分的布局进行设置*/ width:64%;height:480px;float:right;display: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; display:inline; /*对内容中第二列部分的属性进行设置*/ .content .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:inline; .footer .secondary /*对底部的第一列布局的属性进行设置*/ float:left; height:300px; width:31%; background-image:url(d:/mydocuments/mypictures/getcar7xuab.gif);filter:alpha(opacity=100); .footer .primary .primary width:66%;float:left;display:inline;background-image:url(d:/mydocuments/my pictures/2000135760.jpg);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 .navcontentprimary .primaryprimary.secondary secondaryfooterprimary .primaryprimary .secondarysecondary顶部分析： .top /*对最顶部的布局进行设置*/ width:1105px;background-image:url(d:/my documents/my pictures/图片00.jpg); img src=d:/my documents/my pictures/图片2.png width=200 height=100 截图如图2.1.1图2.2.1导航分析：ul.nav /*对列表下的导航属性进行设置*/ list-style:none; width:1105px; height:40px;background:url(d:/my documents/my pictures/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 a display:black; padding:15px; text-decoration:none; color:#ff33ff; font-family:lucida console ; font-size:26; text-align:center; home news reading downloadtalking 截图如图2.2.2图2.2.2联络吧部分分析如下：.content .secondary table /*对内容下的第一列布局中的表格整体属性进行设置*/ margin:5px 0px; height:400;text-align:center; font-size:25px; color:#000000; float:center;border:3px dashed #6699ff; filter:alpha(opacity=100)； .content .secondary table a/*对表格下的锚标签的属性的设置*/ color:#000；tr height:35px; tdmargin:0px;border:2px solid #ccccff; td ul li /*对表格单元格内的列表项的属性进行设置*/ height:20px；list-style-type:none;margin:10px; 班主任telephone666-6666e-班长telephone888-88888e-朋友零距离* 朋友零距离* 朋友零距离 快来zoly的空间逛逛吧快和jony交个朋友吧我是可爱的mimy哦heby在等你哦 截图如图2.2.3新闻吧部分的分析： .content .primary .primary li /*对内容中第二列布局下的列表项的属性进行设置*/ height:25px; list-style-type:none;margin:5px;float:left;.content .primary .primary li a margin:0; font-size:22; color:#9933cc; font-weight:bold; var d=new date()var month=new array(12)month0=1month1=2month11=12document.write(2012 - +monthd.getmonth()+ - +d.getdate()+ - )var weekday=new array(7)weekday0=星期日weekday1=星期一 weekday6=星期六document.write(weekdayd.getday() ：今天下午在五教开班会！请大家相互转告：关于2012年暑假工作安排的通知截图如图2.2.4； 图2.2.3 图2.2.4表单部分的分析：fieldset /*对表单的布局进行设置*/ margin:20px; padding:2px; border:2px solid ; legend font-weight:bold; color:#009900; label color:#000000; font-weight:bold; input cursor:pointer; #border /*对边框的属性进行设置*/ position:absolute; top:840px; left:0px; width:800px; 欢迎您!学号:姓名:密码: 登陆 取消 截图如图2.2.5；对日历部分的分析： .content .primary .secondary table /*对内容下的第三列布局下的表格属性进行设置*/ margin:0px; width:250px; height:220px; font-size:18px; text-align:center; border:5px solid #cccccc; .content .primary .secondary table .cal border-collapse:seperate; border-spacing:0; text-align:center; color:#000000; .cal th, .cal td margin:0; padding:0; .cal caption /*对cal类下的标题的属性进行设置*/ font-size:1.8em; font-weight:bold; color:#ff99ff; background-color:#ffffcc; .cal caption rel=prev float:left; margin-left:0.2em; color:#000000; .cal caption rel=next float:right; margin-right:0.2em; color:#6666ff; .cal caption a:link, .cal caption a:visited color:#ff00ff; padding:0.2em; .cal caption a:hover, .cal caption a:active, .cal caption a:focus background-color:#6d8aab7; .cal thead th background-color:#99cc99; border-bottom:1px solid #a9bacb; font-size:0.9em; .cal tbody color:#a4a4a4; text-shadow:1px 1px 1px white; background-color:#d0d9e2; .cal tbody td border-top:1px solid #e0e0e1; border-right:1px solid #9f9fa1; border-bottom:1px solid #acacad; border-left:1px solid #dfdfe0; .cal tody a display:block; color:#663300c; background-color:#c0c8d2; font-weight:bold; .cal tbody a:hover, .cal tbody a:focus, .cal tbody a:active, .cal tbody .selected a:link, .cal tbody .selected a:hover, .cal tbody .selected a:focus, .cal tbody .selected a:active background-color:#0066ff; color:white; text-shadow:1px 1px 2px #22456b; .cal tbody td:hover, .cal tbody td.selected border-top:1px solid #2a3647; border-right:1px solid #465977; border-bottom:1px solid #576e92; border-left:1px solid #466080; img src=d:/my documents/my pictures/aa.emf width=200 height=45caption<july 2012> sunmon sat303112345 截图见图2.2.6； 图2.2.5 图2.2.6 对生活剪影部分的分析： #mybox imgfloat:left；border:3px double dashed #cc66ff; ol.pagination margin:0 200px 0 100px;padding:0;list-style-type:none;float:right; /*对照片部分的水平导航条的属性的设置*/ ol.pagination li /*对导航条下的列表项进行设置*/ float:left; margin-right:0.6em; ol.pagination a, /*对导航条下的链接设置动态效果*/ol.pagination li.selected display:block; padding:0.2em 0.5em; border:1px solid #ccccff; text-decoration:none; background-color:#cccccc;color:#0000ffol.pagination a:hover,ol.pagination a:focus,ol.pagination li.selected background-color:blue;color:white;ol.pagination arel=prev,ol.pagination arel=next border:none; ol.pagination arel=prev:before content:00ab; padding-right:0.5em;ol.pagination arel=next:aftercontent:00bb;padding-left:0.5em; prev12345next 截图如图2.2.7； 图2.2.7 图2.2.8话聊吧部分的分析： 做了好几天的网页设计，好累哦截图如图2.2.8；对阅读吧部分的分析：#bian /*对底部块与块间的隔离带设置样式*/ border-right:6px dotted #000000; border-left:6px dotted #000000; .footer .primary img float:left ; /*对底部第二列布局下的图片属性进行设置*/ 清华同方（cnki)学术总库开世览文美国科研出版社 截图如图2.2.9；对下载吧部分的分析： 网页制作及管理课程设计任务书.截图如图2.2.10; 图2.2.9 图2.2.10截图如图2.2.11;2.2.2网页二的源代码及分析 * margin:0; padding:0; .wrapper width: 1095px; height:670px; margin:0 auto; text-align:center; font-family: .one width:1095px; background-image:url(d:/my documents/my pictures/图片00.jpg); .two position:absolute; top:220px; left:80px; ul.nav margin:0; padding:0; list-style:none; width:1095px; height:40px; background:url( d:/my documents/my pictures/43.gif) epeat-x; filter:alpha(opacity=90); ul.nav lifloat:left; width:218px; display:block;padding:5px;border-top:2px solid #ffffff;border-bottom:5px solid #0066cc;border-left:2px solid #ffffff; ul.nav a display:black; padding:20px; text-decoration:none; color:#ff33ff; font-family:lucida console ; font-size:26; text-align:center; ul.nav a:hover,ul.nav a:focus,ul.nav a:active,ul.nav .selected, ul.nav .selected a:link, ul.nav .selected a:hover, ul.nav .selected a:focus, ul.nav .selected a:active background-color:#6666ff; color:white; body background:url( d:/my documents/my pictures/20094.jpg); .secondary .row1 imgfloat:left;height:200px;.secondary .row1 pfloat:right;height:200px;float:bottom;.secondary .row2 img float:right;height:200px;.secondary .row2 pfloat:left;height:200px;.leftfloat:left;p font-size:20px; color:#000000; text-indent:2em; border-style: solid; border-width: 8px 3px 8px 3px; border-color: #ddd #676767 #5b5b5b #ddd; text-align:le