《web系统设计》课程设计学院:工学院专业:网络工程班级: 1401姓名:王乐学号: 70指导教师:姬广永张珊珊2016 年 7 月 1 日工学院课程设计评审表《web开发技术》课程设计任务书辽宁陆海石油响应式网站的设计目录辽宁陆海石油响应式网站的设计 ..................... 错误!未定义书签。
1 设计目的....................................... 错误!未定义书签。
2 设计要求....................................... 错误!未定义书签。
3 网站整体规划................................... 错误!未定义书签。
4 网站详细设计及实现 ............................. 错误!未定义书签。
负责区域........................................ 错误!未定义书签。
负责区域网页代码................................ 错误!未定义书签。
负责区域CSS代码................................ 错误!未定义书签。
1 设计目的熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。
培养我们利用计算机进行商务网页设计的基本思路和应用开发能力,提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。
人们在这个不足平米的空间内投资达数百万美元。
网页对公司的影响比简单的电子商务增收方法大得多;网页也是公司对外的脸面。
WEB站点就像一栋房子,它的每一个窗口都可以看成一扇门,人们可以沿着搜索引擎其他WEB站点的链接,绕过主页而进入WEB的深层。
2 设计要求1.站点命名与结构站点文件夹为辽宁陆海。
站点文件夹中所包含文件夹:img(Images,存放图片文件),CSS(存放各部分的css文件)。
站点文件夹中所包含文件:(首页)2. 网站制作网站技术要求页面布局合理,色彩和谐,链接正确,图文并茂,制作的网站和目标网站相似度在70% 以上,以完成各个方面的的训练。
3. 合作开发分为3到5人的小组,多人进行共同合作来完成此次实训的任务。
小组内部分工合作,每个人都要有自己负责的板块。
在竞争与合作中完成此次实训的任务。
3 网站整体规划1.讨论网站主题本次实训要做的网站是辽宁陆海石油装备研究院有限公司的首页,其中的各种动画、过渡等都需要做出来。
2.确定栏目和板块1)首先要考虑整个网页的长和宽,以及长度和宽度之间的比例。
2)其次就应该考虑导航条的设置了。
3)正文的框架设置(横向因素和纵向因素交错)在仔细研究过原版之后,再结合我们自己的想法,在草纸上画出了大体的栏目和板块。
3.小组分工合作将整个页面分为三部分,分别是头部(一人负责)、尾部(一人负责)和主体内容(三人负责)。
我主要负责的是主题内容中最新动态区域。
4.使用的工具HTML编辑软件:主要是HBuilder,DreamWeaver作辅助。
浏览器:以使用谷歌浏览器Chrome浏览为主。
辅助工具:屏幕截图工具FSCapture,CSS、w3c标准html5手册5.网站整体布局框图如下:4 网站详细设计及实现负责区域代码HTML代码<section class="news"><div class="xin1">最新动态</div><div class="xin2">News</div><div class="dong"><ul><li class="kuai"><div class="pic"><img src="img/" /></div><h4>伊朗石油公司代表前来我院参观洽谈</h4><p style="text-indent: 2em;">今日,伊朗石油公司的客人来到我院进行石油项目的洽谈合作,院长戴克文热情的接见</p><div class="read">Read More</div></li><li class="kuai" style="margin: 0 3%;"><div class="pic"><img src="img/" /></div><h4>第三套甲板吊机完成起吊试验</h4><p style="text-indent: 2em;">2016年3月10日,虽然寒潮再度来袭,但依旧没有阻挡我院工作人员完成第三套甲板</p><div class="read">Read More</div></li><li class="kuai"><div class="pic"><img src="img/" /></div><h4>第三套甲板吊机排线布绳工作顺利完成</h4><p style="text-indent: 2em;">2016年3月3日,第三套甲班吊机在总工程师张晓军的带领下,上午顺利完成拼稀</p><div class="read">Read More</div></li></ul></div></section>负责区域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; }.news .dong{margin: 0 auto;position: relative;top: 40px;}.news > ul > li{ width:100%;height: 200px; overflow: hidden;/*display: block;*/ }.news > ul > li{list-style: none;float: left;}.news .dong .kuai{width: 28%;height: 350px;border: 1px solid #C3C3C3;padding: 10px;}.news .dong .kuai .pic{width: 100%;height: 50%;overflow: hidden;}.news .dong .pic img{width: 100%;height: 100%;transition: all 2s ease;}.news .dong li:hover img{ transform: scale;}.read{width:38% ;height: 10%;margin: 0 auto;color: #F86C0F;border: 2px solid #F86C0F;font-size: 16px;text-align: center、padding-top: 4%;}.news .dong li:hover .read{background-color:#F86C0F;color: white;}.news .dong li:hover{cursor: pointer;color: #2A7EDA;}网页效果图5 设计总结1设计目的(一级标题:黑体小三,倍行距,段后1行)××××××××××……(正文:段落起始空两个字符,宋体,小四(英文、数字:Times New Roman,小四),倍行距)2设计要求×××××××××××××××××××××……(正文:段落起始空两个字符,宋体,小四(英文、数字:Times New Roman,小四),倍行距)3网站整体规划×××××××……(正文:段落起始空两个字符,宋体,小四(英文、数字:Times New Roman,小四),倍行距)4网站详细设计及实现××(二级标题黑体四号,倍行距,段前行,独占行,左侧顶格书写)××(三级标题:黑体小四,倍行距,段前行)××(二级标题黑体四号,倍行距,段前行,独占行,左侧顶格书写)5设计总结对整个课程设计做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。