文档介绍：web系统设计》课程设计
学
院
专
业：
班
级
姓
名:
学
号
指导教师
工学院
网络工程
1401
王乐
2014011070
姬广永张珊页，其中的各种动画、过渡等都需要做出来。
确定栏目和板块
1）首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。
2）其次就应该考虑导航条的设置了。
3）正文的框架设置（横向因素和纵向因素交错）在仔细研究过原版之后,再结合我们自己的想法，在草纸上画出了大体的栏目和板块。
小组分工合作将整个页面分为三部分，分别是头部（一人负责）、尾部（一人负责）和主体内容（三人负责）。
我主要负责的是主题内容中最新动态区域。
使用的工具
HTML编辑软件：主要是HBuilder，DreamWeaver作辅助。
浏览器:以使用谷歌浏览器Chrome浏览为主。
辅助工具:屏幕截图工具FSCapture,CSS、w3c标准html5手册
：
4网站详细设计及实现
4。1负责区域代码
5
〈sectionclass=”news”〉
vdivclass="xinl"〉最新动态〈/div〉
<divclass="xin2"〉News</div>
<divclass="dong"〉
<ul〉
〈liclass=”kuai"〉
<divclass="pic”〉
〈imgsrc="img/3b8ec93770744ff4adl2e25ec4a200bl。jpg"/>
</div〉
vh4〉伊朗石油公司代表前来我院参观洽谈v/h4〉
〈pstyle="text-indent:2em;"〉今日，伊朗石油公司的客人来到我院进行石油项目的洽谈合作，院长戴克文热情的接见v/p>
<divclass="read">ReadMore〈/div>
</li〉
〈liclass="kuai”style=”margin:03%;”〉
<divclass=”pic”>
<imgsrc=”img/”/〉
〈/div〉
〈h4〉第三套甲板吊机完成起吊试验〈/h4〉
<pstyle=”text—indent:2em;"〉2016年3月10日，虽然寒潮再度来袭,但依旧没有阻挡我院工作人员完成第三套甲板〈/p>
<divclass="read”>ReadMore</div〉
〈/li>
<liclass="kuai"〉
〈divclass=”pic”>
<imgsrc="img/”/>
</div〉
vh4>第三套甲板吊机排线布绳工作顺利完成〈/h4>
〈pstyle="text—indent：2em；"〉2016年3月3日，第三套甲班吊机在总工程师张晓军的带领下，上午顺利完成拼稀〈/p>
<divclass=”read"〉ReadMore</div〉
</li>
/ul〉
</div〉
〈/section〉
6
。2负责区域CSS代码
。news{
width：100％;
height：550px；
}
。news。xin1{
width:136px；
height：50px；
font-size:32px；font-weight:900;position：relative；top：45px；left:50％；margin—left:-78px；
}
.news。xin2{
color:＃2A7EDA;
width：70px;
height:15px;color：＃1EA8EA;
font—size:28px；position：relative；left:50%；top：30px；margin-left：-35px;
.{margin：0auto；position:relative;
top：40px；
}
.news〉ul〉li{
width：100％;
height：200px;
overflow：hidden;
/＊display：block;*/
7
}
。news>ul〉li{
list-style:none;
float:left；
}
.news。{
width：28％；
height：350px;
border：1pxsolid＃C3C3C3;padding:10px;
}
。news。。pic{width：1