web开发技术课程设计报告
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
《web系统设计》课程设计
学院:工学院
专业:网络工程
班级: 1401
姓名:王乐
学号: 2014011070
指导教师:姬广永珊珊
2016 年 7 月 1 日
工学院课程设计评审表
《web开发技术》课程设计任务书
陆海石油响应式的设计
目录
陆海石油响应式的设计 (2)
1 设计目的 (3)
2 设计要求 (4)
3 整体规划 (5)
4 详细设计及实现 (6)
4.1负责区域.................................................. 错误!未定义书签。
4.2负责区域网页代码 (6)
4.3负责区域CSS代码 (7)
1 设计目的
熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等容。培养我们利用计算机进行商务网页设计的基本思路和应用开发能力,提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。人们在这个不足0.1平米的空间投资达数百万美元。网页对公司的影响比简单的电子商务增收方法大得多;网页也是公司对外的脸面。WEB站点就像一栋房子,它的每一个窗口都可以看成一扇门,人们可以沿着搜索引擎其他WEB站点的,绕过主页而进入WEB的深层。
2 设计要求
1.站点命名与结构
站点文件夹为陆海。
站点文件夹中所包含文件夹:img(Images,存放图片文件),CSS(存放各部分的css文件)。
站点文件夹中所包含文件:index.html(首页)
2. 制作
技术要求页面布局合理,色彩和谐,正确,图文并茂,制作的和目标相似度在70% 以上,以完成各个方面的的训练。
3. 合作开发
分为3到5人的小组,多人进行共同合作来完成此次实训的任务。小组部分工合作,每个人都要有自己负责的板块。在竞争与合作中完成此次实训的任务。
3 整体规划
1.讨论主题
本次实训要做的是陆海石油装备研究院的首页,其中的各种动画、过渡等都需要做出来。
2.确定栏目和板块
1)首先要考虑整个网页的长和宽,以及长度和宽度之间的比例。
2)其次就应该考虑导航条的设置了。
3)正文的框架设置(横向因素和纵向因素交错)
在仔细研究过原版之后,再结合我们自己的想法,在草纸上画出了大体的栏目和板块。
3.小组分工合作
将整个页面分为三部分,分别是头部(一人负责)、尾部(一人负责)和主体容(三人负责)。
我主要负责的是主题容中最新动态区域。
4.使用的工具
HTML编辑软件:主要是HBuilder,DreamWeaver作辅助。
浏览器:以使用谷歌浏览器Chrome浏览为主。
辅助工具:屏幕截图工具FSCapture,CSS、w3c标准html5手册
5.整体布局框图如下:
4 详细设计及实现
4.1负责区域代码
4.1.1 HTML代码
伊朗石油公司代表前来我院参观洽谈
今日,伊朗石油公司的客人来到我院进行石油项目的洽谈合作,院长戴克文热情的接见
Read More第三套甲板吊机完成起吊试验
2016年3月10日,虽然寒潮再度来袭,但依旧没有阻挡我院工作人员完成第三套甲板
Read More第三套甲板吊机排线布绳工作顺利完成
2016年3月3日,第三套甲班吊机在总工程师晓军的带领下,上午顺利完成拼稀
Read More
4.1.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;