静态设计页面的制作--课程设计--大学毕业设计论文.doc

存档资料 成绩： 华东交通大学理工学院课 程 设 计 报 告 书所属课程名称 网页设计与网页制作 题 目 静态设计页面的制作 分 院 电 信 分 院 专业班级 信管2班 学号 20120210450221 学生姓名 熊武 指导教师 魏建红 20 14 年 12 月 29 日 华东交通大学理工学院课程设计报告序号项 目等级优秀良好中等及格不及格1课程设计态度评价2出勤情况评价3任务难度评价4工作量饱满评价5任务难度评价6设计中创新性评价7论文书写规范化评价8综合应用能力评价综合评定等级课程设计（论文）评阅意见评阅人 职称 20 14 年 12 月29日 目录第一章 课程设计内容及要求4第二章 课程设计目的及流程5第三章 课程设计方法及步骤6第四章 课程设计的部分代码及截图10第五章 课程设计心得27第六章 参考文献28第一章 课程设计内容及要求一.课程设计题目 用已经学过的网站开发技术及开发工具DW，根据网站首页效果图，利用DIV+CSS设计出一个网站首页。二.课程设计内容及要求 内容有：1建立站点；2结构分析；3搭建框架；4切割效果图；5布局页面头部和导航；6布局页面侧边栏；7布局页面主体部分；8底部和细节调整要求有：运用DIV+CSS设计出一个静态页面，做到简洁，清晰，明了。第二章 课程设计目的及流程一.课程设计目的： 1.通过课设的制作，来加深同学对网页设计的认识和制做。同时也加强了对同学的实际操作能力。 2.要尊重浏览者体验，网站不是做给自己看的。一.课程设计流程：确定主题搭建版式风格画好框架DW把div 框架搭建具体内容的添加 第三章 课程设计方法及步骤一.课程设计方法：1.建立站点 打开DW，建立名为website站点2.结构分析 u 头部u LOGOu 导航栏u 内容框ü 左边部分内容Ø 上面部分Ø 下面部分ü 右边部分内容ü 中间部分ü 下面部分u 尾部3.搭建框架 4.切割效果图 5.布局页面头部和导航 6.布局页面侧边栏 7.布局页面主体部分 8.底部和细节调整 第四章 课程设计的部分代码及截图1、html代码头部和导航栏 <div id="head"> <div id="head_contend"> <div id="first">足球天下</div> <div id="index">首页</div> <div id="admin">登陆</div> </div> </div> <div id="body"><div id="logo"> <h1>绿 茵场</h1> </div> <div id="rad"> <ul class="rad"> <li><a href="#">首页</a></li> <li><a href="#">联赛</a></li> <li><a href="#">直播</a></li> <li><a href="#">欧洲</a></li> <li><a href="#">南美</a></li> <li><a href="#">亚洲</a></li> </ul> </div>侧边栏 <div id="content"> <div class="blank" style="background: aquamarine"><h1>最新消息</h1></div> <div id="content_top"> <ul> <li><a href="#">巴神自曝回国米？！打包回家 悍将迎接：欢迎</a> </li> <li><a href="#">因扎吉亲口宣布AC米兰1人必留队 钦点红黑军2珍宝</a></li> <li><a href="#">卡佩罗：AC米兰国米路还很长 3年不犯错能缓过来</a></li> <li><a href="#">梅西制霸之路添新版图 这次他想当欧洲联赛射手王</a></li> <li><a href="#">皇马公布战AC米兰22人名单 这场球皇马赚足400万</a></li> <li><a href="#">国米签阿森纳锋霸定了！本人点头 温格开口放行</a></li> <li><a href="#">皇马更衣室回应穆里尼奥：希望欧冠能遇到你！</a></li> </ul> </div> <div class="blank"style="background:lightgreen"><h1>积分榜</h1></div> <div id="content_bottom"> <table> <tr> <th>英超积分榜</th> </tr> <tr> <td>排名</td><td>球队</td><td>场次</td><td>积分</td> </tr> <tr> <td>1</td><td>切尔西</td><td>19</td><td>46</td> </tr> <tr> <td>2</td><td>曼城</td><td>19</td><td>46</td> </tr> <tr> <td>3</td><td>曼联</td><td>19</td><td>46</td> </tr> <tr> <td>4</td><td>开普敦</td><td>19</td><td>33</td> </tr> <tr> <td>5</td><td>切尔西</td><td>19</td><td>33</td> </tr> <tr> <td>6</td><td>阿森纳</td><td>19</td><td>33</td> </tr> <tr> <td>7</td><td>热刺</td><td>18</td><td>46</td> </tr> <tr> <td>8</td><td>西汉姆联</td><td>18</td><td>46</td> </tr> </table> </div> </div>28第 页 共 28 页主题部分 <div id="content1"> <div id="slid"> <div id="img"> <div class="b1" style="background-image: url('1.jpg.png')"></div> <div class="b2" style="background-image: url('2.fw.png')"></div> <div class="b3" style="background-image: url('3.fw.png')"></div> <div class="b4" style="background-image: url('4.fw.png')"></div> </div> <div id="mcimg"> <div id="p1"></div> <div id="p2"></div> <div id="p3"></div> <div id="p4"></div> </div> </div> </div> <div id="boot"> <div class="blank"style="background:lightgreen"><h1>英超赛事</h1></div> <div class="c1"> <ul> <li><a href="#">拿命死磕 这就是英超！皇马巴萨来英超会如何</a></li> <li><a href="#">英名哨:小法那是绝对点球 切尔西为假摔还债</a></li> <li><a href="#">切尔西一尊真龙变强无极限 梅西能做的他也要做</a></li> <li><a href="#">切尔西又见半年前鬼影 穆帅最强大招去哪了</a></li> <li><a href="#">切尔西造新版梅西+伊涅斯塔 一狂神锁定英超第1</a></li> <li><a href="#">00000！切尔西一把灵刀自杀 穆帅最爱神牌变废牌</a></li> <li><a href="#">穆帅暴怒:丑闻！英超在反切尔西 裁判该羞愧</a></li> <li><a href="#">英超切尔西技术统计:空有传控优势 射正仅有1次</a></li> </ul> </div> <div class="blank"style="background:lightgreen"><h1>德甲赛事</h1></div> <div class="c1"> <ul> <li><a href="#">队报评百大球星：诺伊尔力压C罗梅西居榜首</a> </li> <li><a href="#">国家队队友让香川变过去式 德甲总进球超前辈传奇</a> </li> <li><a href="#">穆勒：瓜迪奥拉是最职业的教练 他让拜仁变更强</a> </li> <li><a href="#">动人圣诞！德国小球队震撼一幕 3万个温暖灵魂</a> </li> <li><a href="#">海因克斯：我推荐罗伊斯加盟皇马 拜仁那位置人多</a> </li> <li><a href="#">伤病 错过世界杯 丑闻-2014成罗伊斯最惨的一年</a> </li> <li><a href="#">多特官方宣布签冬季首援 东欧飞翼接班罗伊斯？</a> </li> <li><a href="#">德国名模示爱罗伊斯:你去拜仁 我就是你的(图)</a> </li> <li><a href="#">德甲-狼堡2-1逆转稳居次席 多特1-2负垫底队</a> </li> <li><a href="#">还记得他吗？前拜仁后卫将出狱 纵火烧自己房子</a> </li> </ul> </div> </div>底部和细节调整 <div id="root"> <center><p>Copyright ©2014 熊武, All Rights Reserved</p></center> </div>2、CSS代码* margin: 0px; padding: 0px; font-family:"微软雅黑"#head background-color: deepskyblue; height: 50px; width: 100%; box-shadow: cornflowerblue 5px 5px 5px ; position: fixed; float: top; z-index: 100;#head #head_contend margin-left: 15%; background-color: chartreuse; height: 50px; width: 75%;#head_contend #first text-align: left; background:powderblue; width: 200px; height: 50px; float: left;#head_contend #admin text-align: center; background:lightblue ; height: 50px; width: 50px; float: right;#head_contend #index text-align: center; background: darkseagreen; height: 50px; width: 50px; float: right;#body margin-left:15%; padding-top: 10px; width:75%; float: top; z-index: 0; #logoheight:50px; margin-top:50px ; padding: 0;#rad margin: 5px; height: 50px; width: 100%; border-radius: 10px; box-shadow: darkcyan 5px 5px 10px ;#content border-radius: 10px; width: 30%; box-shadow: darkcyan 5px 5px 10px ; float:left; padding:15px ;#content #content_top border:5px dimgrey solid; border-radius: 10px; width: 100%; box-shadow: darkcyan 5px 5px 10px ; position: relative; float:left; margin-right: 5px; background:greenyellow;#content #content_center border:5px dimgrey solid; border-radius: 10px; width: 100%; box-shadow: darkcyan 5px 5px 10px ; position: relative; float:left; margin-right: 5px; background:turquoise;#content #content_bottom border:5px dimgrey solid; border-radius: 10px; width: 100%; box-shadow: darkcyan 5px 5px 10px ; position: relative; float:left; margin-right: 5px; background: palegreen;#content1 border:5px dimgrey solid; border-radius: 10px; width: 65%; height: 250px ; box-shadow: darkcyan 5px 5px 10px ; float: left; background: powderblue; #content1 #slid height: 100%; width: 100%; margin: 4px; padding:2px;#slid #img border: solid 2px rosybrown; height:190px; width: 98%; box-shadow: lightblue 2px 2px 2px; padding-top: 2px;#slid #mcimg border: 2px darkcyan solid; height: 40px; margin-top: 2px; width: 58%; padding-left: 40%; padding-top: 2px; overflow: hidden;#boot border:5px dimgrey solid; border-radius: 10px; width: 65%; height: 500px ; box-shadow: darkcyan 5px 5px 10px ; float:left;#boot .c1 border: solid 2px greenyellow; border-radius: 5px; width:98%; height: 200px; box-shadow: darkcyan 5px 5px 10px ; float: top;#root border:5px dimgrey solid; border-radius: 10px; width: 100%; height: 50px ; box-shadow: darkcyan 5px 5px 10px ; float:left; background-color: deepskyblue;#p1 background: cornflowerblue; width: 35px; height: 35px; float: left; box-shadow: darkcyan 5px 5px 10px ; #p2 background: orange; width: 35px; height: 35px; float: left; box-shadow: darkcyan 5px 5px 10px ;#p3 background: chartreuse; width: 35px; height: 35px; float: left; box-shadow: darkcyan 5px 5px 10px ;#p4 background: orchid; width: 35px; height: 35px; float: left;box-shadow: darkcyan 5px 5px 10px ; .b1 width: 47%; height: 28%; float: left; box-shadow: darkcyan 5px 5px 10px ; position: absolute;.b2 background: chartreuse; width: 47%; height: 28%; float: left; font-size: 40px; box-shadow: darkcyan 5px 5px 10px ; position: absolute; display: none;.b3 background: orange; width: 47%; height: 28%; float: left; box-shadow: darkcyan 5px 5px 10px ; position: absolute; display: none;.b4 background: cornflowerblue; width: 47%; height: 28%; float: left; box-shadow: darkcyan 5px 5px 10px ; position: absolute; display: none;h1 color: chocolate; font-family: sans-serif;ul list-style-type:none; margin:0; padding:0; overflow:hidden;.rad li float:left;.rad a:link,a:visited display:block; width:150px; height: 32px; font-weight:bold; color:#FFFFFF; background-color: lightblue; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; padding-top: 10px;.rad a:hover,a:active background-color: aqua;.blank border:5px dimgrey solid; border-radius: 10px; width: 98%; box-shadow: darkcyan 5px 5px 10px ; float:top; margin-bottom: 5px;.c1 a color: dodgerblue;#logo h1 color: lime;#logo h2 color: dodgerblue;#content_top a color: dodgerblue;3、JS代码/* * Created by xx on 2014/12/28. */$(document).ready(function() $("#p1").mouseenter(function() var p1=$("#p1"); p1.css(background:'#00ced1',boxshadow:'red 5px 5px 5px',fontsize:'25px'); p1.css(border:' solid 2px lavender') $(".b1").css(display:'inherit') $(".b2").css(display:'none') $(".b3").css(display:'none') $(".b4").css(display:'none') ) $("#p1").mouseleave(function()var p1=$("#p1"); var p1=$("#p1"); p1.css(background:'cornflowerblue'); ) $("#p2").mouseenter(function() var p2=$("#p2"); p2.css(background:'#00ced1'); $(".b2").css(display:'inherit') $(".b1").css(display:'none') $(".b3").css(display:'none') $(".b4").css(display:'none') ) $("#p2").mouseleave(function() var p2=$("#p2"); p2.css(background:'orange'); ) $("#p3").mouseenter(function() var p3=$("#p3"); p3.css(background:'#00ced1'); $(".b3").css(display:'inherit') $(".b1").css(display:'none') $(".b2").css(display:'none') $(".b4").css(display:'none') ) $("#p3").mouseleave(function() var p3=$("#p3"); p3.css(background:'chartreuse'); ) $("#p4").mouseenter(function() var p4=$("#p4"); p4.css(background:'#00ced1') $(".b4").css(display:'inherit') $(".b1").css(display:'none') $(".b3").css(display:'none') $(".b2").css(display:'none') ) $("#p4").mouseleave(function() var p4=$("#p4"); s p4.css(background:'orchid') )第五章 课程设计心得在学习网页制作的过程中，我深深体会到一点“有付出，就终有回报”，你的付出与你的回报终究是成正比的。经过了多少漫漫长路，经过了多少忘我的投入，经过了多少波折，我的网页与众人见面了。当我第一眼在网络下一览我的个人主页，我是多么的激动，多么的兴奋，就像多年未见的老同学，一种讲不出道不明的感觉。做好主页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。 第六章 参考文献1 谢希仁. 计算机网络（第五版）M. 北京：电子工业出版社，2008年2月2 胡小强 计算机网络M 北京：北京邮电大学出版社2005年1月3 李济国 计算机网络 上海：上海交通大学出版社 2012年3月4 张和 计算机网络完全 北京：北京电子大学出版社2006年5月5 刘贺 计算机网络 西安：西安电子工业大学出版社2008年8月致 谢