web开发技术课程设计报告-响应式网站项目(辽宁陆海石油响应式网站)论文x
时间：2020-11-15 20:34:54 来源：勤学考试网 本文已影响 人 
濟命乂#泉城学院
《web系统设计》课程设计
学 院： 工学院
专 业： 网络工程
班 级： 1401
姓 名： 王乐
学 号： 2014011070
指导教师： 姬广永张珊珊
2016年7月1日
工学院课程设计评审表
学生姓名
王乐 专业 网络工程 年级 2014 学号
2014011070
设计题目
响应式网站项目（辽宁陆海石油响应式网站）
评价内容
评价指标
评分
权值
评定
成绩
业务水平
（含答辩）
有扎实的基础理论知识和专业技能；能够综合运用所学的 HTML、
CSS、JavaScript等知识和HBuilder开发工具进行WEB站点的规划、设 计与制作；能够根据网站规划，搜集、整理相关素材；独立进行实验工 作，学会调试、发布、管理网站，并能运用所学知识和技能去发现与解 决实际问题；主页版面内容、结构和链接设计清晰合理；考虑页面整体 布局、视觉效果、页面尺寸和框架等因素，保持网站的整体设计风格一 致。
40
课程设计 报告（设计 说明书）质
量
综述简练完整；结论严谨合理；实验正确，分析处理科学；文字通顺，
技术用语准确，符号统一，编号齐全，书写工整规范，图表完备、整洁、 正确；结果有应用价值；工作中有创新意识；对前人工作有改进或突破， 或有独特见解。
30
工作量、 工作态度
按期完成规定的任务，工作量饱满，难度较大；工作努力，遵守纪律； 工作作风严谨务实
30
合计
100
指导
教师
评语
PAGE
PAGE #
PAGE
PAGE #
《web开发技术》课程设计任务书
设计题目：响应式网站项目（辽宁陆海石油响应式网站）
指导
老师
姬广永
参力口
学生
王乐，牟敦现，常发博，陈兵，王守栋
设计
目 的
综合运用所学的 HTML及CSS、JavaScript等知识，使用 WEB开发工具编辑网 页，Photoshop或FireWorks处理图形，制作出主题鲜明、结构清晰、图文并戊、具 有专业水平的网站。
设计
内容
1、 确定所要制作网站的类型、主题、规模以及要使用的技术。
2、 规划网站的栏目、风格，画出站点规戈U层次图，建立站点目录。
3、 根据网站规划，搜集、整理相关素材。
4、 对网站用到的文本、图片、动画等多媒体素材进行处理。
5、 主页版面内容、结构和链接设计要清晰，醒目。
6、 考虑页面整体布局、视觉效果、页面尺寸和框架等因素，保持网站的整体设计风 格一致。
7、 网站调试：网站各个页面完成后，对站点进行调试。
8、 网站发布：网站建设好后，发布到网站服务器。
设计
要求
分组：每三至五人一组，自由组合；
项目演示：以小组为单位，逐一演示本小组成员所做项目，并进行项目讲解； 多人进行共同合作开发，在项目答辩的过程中要明确解说每个人的分工任务， 并且课程设计报告主要介绍自己所做内容，要求实训中制作的网站和目标网站相似 度在70%^上，以完成各个方面的的训练。
PAGE
PAGE #
PAGE
PAGE #
辽宁陆海石油响应式网站的设计
目录辽宁陆海石油响应式网站的设计 2
目录
辽宁陆海石油响应式网站的设计
2
4.2 负责区域网页代码
4.2 负责区域网页代码
6
TOC \o "1-5" \h \z \o "Current Document" 设计目的 3
\o "Current Document" 设计要求 4
\o "Current Document" 网站整体规划 5
\o "Current Document" 网站详细设计及实现 6
4.1 负责区域
4.1 负责区域
4.3负责区域CSS弋码
设计目的
熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。培养我 们利用计算机进行商务网页设计的基本思路和应用开发能力，提高我们的计算机文化 素质。
网页是世界上最有价值的不动产之一。
人们在这个不足 0.1 平米的空间内投资达数 百万美元。网页对公司的影响比简单的电子商务增收方法大得多；网页也是公司对 外 的脸面。
WEB 站点就像一栋房子，它的每一个窗口都可以看成一扇门，人们可以沿着 搜索引擎其他 WEB 站点的链接，绕过主页而进入 WEB 的深层。
设计要求
1．站点命名与结构
站点文件夹为辽宁陆海。
站点文件夹中所包含文件夹：img （Images,存放图片文件），CSS （存放 各部分的css文件）。
站点文件夹中所包含文件：index.html （首页）
网站制作
网站技术要求页面布局合理，色彩和谐，链接正确，图文并茂，制作的网 站和目标网站相似度在 70% 以上，以完成各个方面的的训练。
合作开发
分为 3到 5人的小组，多人进行共同合作来完成此次实训的任务。小组内 部分工合作，每个人都要有自己负责的板块。在竞争与合作中完成此次实训的 任务。
3网站整体规划
讨论网站主题
本次实训要做的网站是辽宁陆海石油装备研究院有限公司的首页，其中的 各种动画、过渡等都需要做出来。
确定栏目和板块
）首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。
）其次就应该考虑导航条的设置了。
3）正文的框架设置 （横向因素和纵向因素交错）
在仔细研究过原版之后，再结合我们自己的想法，在草纸上画出了大体的 栏目和板块。
3?小组分工合作
将整个页面分为三部分，分别是头部（一人负责）、尾部（一人负责）和 主体内容（三人负责）。
我主要负责的是主题内容中最新动态区域。
使用的工具
HTML编辑软件：主要是HBuilder，DreamWeaver作辅助。
浏览器：以使用谷歌浏览器 Chrome浏览为主。
辅助工具：屏幕截图工具 FSCapture，CSS、w3c标准html5手册
网站整体布局框图如下：
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/3b8ef4ad12e25ec4a200b1.jpg" />
</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/a7bdec4def4146b88e1430bc7fc0ab72.jpg" />
</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/59e7aa4560b64d9eb50299e13c745f94.jpg" />
</div>
<h4> 第三套甲板吊机排线布绳工作顺利完成 </h4>
<p style="text-indent: 2em;">2016 年 3 月 3 日，第三套甲班吊机在总工程师 张晓军的带领下，上午顺利完成拼稀 </p>
<div class="read">Read More</div>
</li>
</ul>
</div>
</section>
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网页效果图
西一 .卄介IB 痕寅计产M心TfTMJFJIft代M右AfiMIt
?
海T产品
3UC
址新动态
MIHW 1KA H t fUt*
Z_* * K#?IA4* A_LIT?幣用
关Ptt海
K?l? iim*更**兄All Fil" refcriT-1 liI[rril.JtlUIT|
PAGE
PAGE #
系中中的 PAGE
系中中的
PAGE #
5 设计总结
1 设计目的（一级标题：黑体小三， 1.5 倍行距，段后 1 行）
XXXXXXXXXX……（正文：段落起始空两个字符，宋体，小四（英文、数
字：Times New Roman,小四），1.25 倍行距）
2 设计要求
XXXXXXXXXXXXXXXXXXXXX （正文：段落起始空两个字符,
宋体，小四（英文、数字：Times New Roman,小四），1.25倍行距）
网站整体规划
XXXXXXX……（正文：段落起始空两个字符，宋体，小四（英文、数字：
Times New Roma n,小四），1.25 倍行距）
网站详细设计及实现
4.1 XX （二级标题黑体四号， 1.5 倍行距，段前 0.5 行，独占行，左侧顶格
书写）
XX （三级标题：黑体小四，1.5倍行距，段前0.5行）
4.2 XX （二级标题黑体四号，1.5倍行距，段前0.5行，独占行，左侧顶格
书写）
设计总结
对整个课程设计做归纳性总结，并分析设计过程中的困难及如何解决的，最后提 出展望。
0123456789012345678901234567890123456789012345678901234567890123456789012345678901123456789 11 233 3 444 556
0123456789012345678901234567890123456789012345678901234567890123456789012345678901
123456789 11 233 3 444 556 677 7 888
5PV8/A的研制EEPROM的工艺和制程方法及对良率的影响研究 正（ STR ）调节器
/IP 协议栈的实现 究与处理技术的研究 统究研究与开发
究，匕设应计用与研研究究监测技术研转换器的设计究及实现应
究
，匕
设应计用与研研究究
监测技术研转换器
的设计
究
及实现
应制用
与测研
与测研仪究的研制
系制统的研制
污染测量仪的研制 磨设备的实数现控改造
实的现研制
究研究与实现
实现与应用研究与实现 系统的设计与实现 的研究与应用实现与应用
实现与应用
E..0123456789012345678900 0911血压计的设计合系应用研究实
E.
.0123456789012
345678900 0
911
血压计的设计
合系
应用研究
实
系用统的研究
器的研究
测试仪的研制
报项告目，论本证文，项档支目持可行完整性下研载究，报告支持，任可行意编性研辑究！选报择告我，项们，目推选择广成，项功！目研究报告，项目设计，项目建议书，项目可研
报项告目，论本证文，项档支目持可行完整性下研载究，报告支持，任可行意编性研辑究！选报择告我，项们，目推选择广成，项功！目研究报告，项目设计，项目建议书，项目可研
，成，稿，毕毕功毕业业！业论设计论文，文设初计毕，稿业毕，论
论明！本，文毕，文
