静态设计页面的制作--课程设计--大学毕业设计论文.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代码
头部和导航栏

d="head">
>
/td>
9e="background-image: url('2.fw.png')"> id="p1">>切尔西又见半年前鬼影 穆帅最强大招去哪了次变过去式 德甲总进球超前辈传奇 r: 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月

致 谢