静态设计页面的制作--课程设计--大学毕业设计论文.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 LOGO
u 导航栏
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;

}
#logo{
height: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月

致 谢