《web系统
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
》课程设计
学 院: 工学院
专 业: 网络工程
班 级: 1401
姓 名: 王乐
学 号: 2014011070
指导教师: 姬广永 张珊珊
2016 年 7 月 1 日
工学院课程设计评审表
学生姓名
王乐
专业
网络工程
年级
2014
学号
2014011070
设计
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
目
响应式网站项目(辽宁陆海石油响应式网站)
评价内容
评价指标
评分
权值
评定
成绩
业务水平(含答辩)
有扎实的基础理论知识和专业技能;能够综合运用所学的HTML、CSS、JavaScript等知识和HBuilder开发工具进行WEB站点的规划、设计与制作;能够根据网站规划,搜集、整理相关素材;独立进行实验工作,学会调试、发布、管理网站,并能运用所学知识和技能去发现与解决实际问题;主页版面内容、结构和链接设计清晰合理;考虑页面整体布局、视觉效果、页面尺寸和框架等因素,保持网站的整体设计风格一致。
40
课程设计报告(设计说明书)质量
综述简练完整;结论严谨合理;实验正确,分析处理科学;文字通顺,技术用语准确,符号统一,编号齐全,书写工整
规范
编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载
,图表完备、整洁、正确;结果有应用价值;工作中有创新意识;对前人工作有改进或突破,或有独特见解。
30
工作量、
工作态度
按期完成规定的任务,工作量饱满,难度较大;工作努力,遵守纪律;工作作风严谨务实
30
合计
100
指导教师评语
设计题目:响应式网站项目(辽宁陆海石油响应式网站)
指 导
老 师
姬广永
参 加
学 生
王乐,牟敦现,常发博,陈兵,王守栋
设 计
目 的
综合运用所学的HTML及CSS、JavaScript等知识,使用WEB开发工具编辑网页, Photoshop或FireWorks处理图形,制作出主题鲜明、结构清晰、图文并茂、具有专业水平的网站。
设 计
内 容
1、确定所要制作网站的类型、主题、规模以及要使用的技术。
2、规划网站的栏目、风格,画出站点规划层次图,建立站点目录。
3、根据网站规划,搜集、整理相关素材。
4、对网站用到的文本、图片、动画等多媒体素材进行处理。
5、主页版面内容、结构和链接设计要清晰,醒目。
6、考虑页面整体布局、视觉效果、页面尺寸和框架等因素,保持网站的整体设计风格一致。
7、网站调试:网站各个页面完成后,对站点进行调试。
8、网站发布:网站建设好后,发布到网站服务器。
设 计
要 求
分组:每三至五人一组,自由组合;
项目演示:以小组为单位,逐一演示本小组成员所做项目,并进行项目讲解;
多人进行共同合作开发,在项目答辩的过程中要明确解说每个人的分工任务,并且课程设计报告主要介绍自己所做内容,要求实训中制作的网站和目标网站相似度在70%以上,以完成各个方面的的训练。
《web开发技术》课程设计任务书
辽宁陆海石油响应式网站的设计
目录
辽宁陆海石油响应式网站的设计 4
1 设计目的 5
2 设计要求 5
3 网站整体规划 6
4 网站详细设计及实现 8
4.1负责区域 8
4.2负责区域网页代码 9
4.3负责区域CSS代码 9
1 设计目的
熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。培养我们利用计算机进行商务网页设计的基本思路和应用开发能力,提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。人们在这个不足0.1平米的空间内投资达数百万美元。网页对公司的影响比简单的电子商务增收
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
大得多;网页也是公司对 外的脸面。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
手册
华为质量管理手册 下载焊接手册下载团建手册下载团建手册下载ld手册下载
5. 网站整体布局框图如下:
4 网站详细设计及实现
4.1负责区域代码
4.1.1 HTML代码
最新动态
News
-
伊朗石油公司代表前来我院参观洽谈
今日,伊朗石油公司的客人来到我院进行石油项目的洽谈合作,院长戴克文热情的接见
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;
}
.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(1.3);
}
.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;
}
4.2网页效果图
5 设计总结
1设计目的(一级标题:黑体小三,1.5倍行距,段后1行)
××××××××××……(正文:段落起始空两个字符,宋体,小四(英文、数字:Times New Roman,小四),1.25倍行距)
2设计要求
×××××××××××××××××××××……(正文:段落起始空两个字符,宋体,小四(英文、数字:Times New Roman,小四),1.25倍行距)