web开发技术课程设计报告响应式网站项目(辽宁陆海石油响应式网站)论文

1、濟命乂#泉城学院 web系统设计课程设计 学 院：工学院 专 业：网络工程 班 级： 1401 姓 名：王乐 学 号： 2014011070 指导教师：姬广永张珊珊 2016年7月1日 工学院课程设计评审表 学生姓名 王乐专业网络工程年级2014学号 2014011070 设计题目 响应式网站项目（辽宁陆海石油响应式网站） 评价内容 评价指标 评分 权值 评定 成绩 业务水平 （含答辩） 有扎实的基础理论知识和专业技能；能够综合运用所学的HTML、 CSS、JavaScript等知识和HBuilder开发工具进行WEB站点的规划、设 计与制作；能够根据网站规划，搜集、整理相关素材；独立进行实验

2、工 作，学会调试、发布、管理网站，并能运用所学知识和技能去发现与解 决实际问题；主页版面内容、结构和链接设计清晰合理；考虑页面整体 布局、视觉效果、页面尺寸和框架等因素，保持网站的整体设计风格一 致。 40 课程设计 报告（设计 说明书）质 量 综述简练完整；结论严谨合理；实验正确，分析处理科学；文字通顺， 技术用语准确，符号统一，编号齐全，书写工整规范，图表完备、整洁、 正确；结果有应用价值；工作中有创新意识；对前人工作有改进或突破， 或有独特见解。 30 工作量、 工作态度 按期完成规定的任务，工作量饱满，难度较大；工作努力，遵守纪律； 工作作风严谨务实 30 合计 100 指导 教师 评

3、语 web开发技术课程设计任务书 设计题目：响应式网站项目（辽宁陆海石油响应式网站） 指导 老师 姬广永 参力口 学生 王乐，牟敦现，常发博，陈兵，王守栋 设计 目 的 综合运用所学的 HTML及CSS、JavaScript等知识，使用 WEB开发工具编辑网 页，Photoshop或FireWorks处理图形，制作出主题鲜明、结构清晰、图文并戊、具 有专业水平的网站。 设计 内容 1、确定所要制作网站的类型、主题、规模以及要使用的技术。 2、规划网站的栏目、风格，画出站点规戈U层次图，建立站点目录。 3、根据网站规划，搜集、整理相关素材。 4、对网站用到的文本、图片、动画等多媒体素材进行处理。

4、 5、主页版面内容、结构和链接设计要清晰，醒目。 6、考虑页面整体布局、视觉效果、页面尺寸和框架等因素，保持网站的整体设计风 格一致。 7、网站调试：网站各个页面完成后，对站点进行调试。 8、网站发布：网站建设好后，发布到网站服务器。 设计 要求 分组：每三至五人一组，自由组合； 项目演示：以小组为单位，逐一演示本小组成员所做项目，并进行项目讲解； 多人进行共同合作开发，在项目答辩的过程中要明确解说每个人的分工任务， 并且课程设计报告主要介绍自己所做内容，要求实训中制作的网站和目标网站相似 度在70%上，以完成各个方面的的训练。 i 辽宁陆海石油响应式网站的设计 目录 辽宁陆海石油响应式网站的

5、设计 2 14 4.2 负责区域网页代码 6 1 设计目的 3 2 设计要求 4 3 网站整体规划 5 4 网站详细设计及实现 6 4.1 负责区域 错误！未定义书签 4.3负责区域CSS弋码 1 设计目的 熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。培养我 们利用计算机进行商务网页设计的基本思路和应用开发能力，提高我们的计算机文化 素质。 网页是世界上最有价值的不动产之一。 人们在这个不足 0.1 平米的空间内投资达数 百万美元。网页对公司的影响比简单的电子商务增收方法大得多；网页也是公司对 外 的脸面。 WEB 站点就像一栋房子，它的每一个窗口都可以看成一扇门，人们可以

6、沿着 搜索引擎其他 WEB 站点的链接，绕过主页而进入 WEB 的深层。 2 设计要求 1站点命名与结构 站点文件夹为辽宁陆海。 站点文件夹中所包含文件夹：img （Images,存放图片文件），CSS （存放 各部分的css文件）。 站点文件夹中所包含文件：index.html （首页） 2. 网站制作 网站技术要求页面布局合理，色彩和谐，链接正确，图文并茂，制作的网 站和目标网站相似度在 70% 以上，以完成各个方面的的训练。 3. 合作开发 分为 3到 5人的小组，多人进行共同合作来完成此次实训的任务。小组内 部分工合作，每个人都要有自己负责的板块。在竞争与合作中完成此次实训的 任务。

7、3网站整体规划 1. 讨论网站主题 本次实训要做的网站是辽宁陆海石油装备研究院有限公司的首页，其中的 各种动画、过渡等都需要做出来。 2. 确定栏目和板块 1 ）首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。 2 ）其次就应该考虑导航条的设置了。 3）正文的框架设置 （横向因素和纵向因素交错） 在仔细研究过原版之后，再结合我们自己的想法，在草纸上画出了大体的 栏目和板块。 3小组分工合作 将整个页面分为三部分，分别是头部（一人负责）、尾部（一人负责）和 主体内容（三人负责）。 我主要负责的是主题内容中最新动态区域。 4. 使用的工具 HTML编辑软件：主要是HBuilder，Dream

8、Weaver作辅助。 浏览器：以使用谷歌浏览器 Chrome浏览为主。 辅助工具：屏幕截图工具 FSCapture，CSS、w3c标准html5手册 5. 网站整体布局框图如下： 首页 变 换 蒙 版 成功案 例 疋 位 疋 位 横 幅 头部 header 横 幅 头部 header 产品服 务 header 搜 索 框 版 权 尾部 footer 4 网站详细设计及实现 4.1 负责区域代码 4.1.1 HTML 代码 最新动态 News 伊朗石油公司代表前来我院参观洽谈 今日，伊朗石油公司的客人来到我院进行石油项 目的洽谈合作，院长戴克文热情的接见 Read More 第三套甲板吊机完成起

9、吊试验 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%;

10、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

11、;*/ .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 t

12、ransform: 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网页效果图 西一

13、.卄介IB痕寅计产M心TfTMJFJIft代M右AfiMIt 海T产品 3UC 址新动态 MIHW 1KA H t fUt* Z_* * K#IA4* A_LIT幣用 关Ptt海 Kl iim*更*兄All Fil refcriT-1 liIrril.JtlUIT| 5 设计总结 1 设计目的（一级标题：黑体小三， 1.5 倍行距，段后 1 行） XXXXXXXXXX（正文：段落起始空两个字符，宋体，小四（英文、数 字：Times New Roman,小四），1.25 倍行距） 2 设计要求 XXXXXXXXXXXXXXXXXXXXX （正文：段落起始空两个字符, 宋体，小四（英文、数字：Ti

14、mes New Roman,小四），1.25倍行距） 3 网站整体规划 XXXXXXX（正文：段落起始空两个字符，宋体，小四（英文、数字： Times New Roma n,小四），1.25 倍行距） 4 网站详细设计及实现 4.1 XX （二级标题黑体四号， 1.5 倍行距，段前 0.5 行，独占行，左侧顶格 书写） 4.1.1 XX （三级标题：黑体小四, 1.5 倍行距，段前 0.5 行） 4.2 XX （二级标题黑体四号, 1.5 倍行距,段前 0.5 行,独占行,左侧顶格 书写） 5 设计总结 对整个课程设计做归纳性总结,并分析设计过程中的困难及如何解决的,最后提 出展望。 目录 第

15、一章总论 错. 误！未定义书签 一、项目概况 错. 误！未定义书签 二、项目提出的理由与过程 错. 误！未定义书签 三、项目建设的必要性 错. 误！未定义书签 四、项目的可行性 错. 误！未定义书签 第二章市场预测 错. 误！未定义书签 一、市场分析 错. 误！未定义书签 二、市场预测 错. 误！未定义书签 三、产品市场竞争力分析 错. 误！未定义书签 第三章建设规模与产品方案 错. 误！未定义书签 一、建设规模 错. 误！未定义书签 二、产品方案 错. 误！未定义书签 三、质量标准 错. 误！未定义书签 第四章项目建设地点 错.误！未定义书签 一、项目建设地点选择 错. 误！未定义书签 二、

16、项目建设地条件 错. 误！未定义书签 第五章技术方案、设备方案和工程方案 错. 误！未定义书签 一、技术方案 错. 误！未定义书签 二、产品特点错误！未定义书签 三、主要设备方案错误！未定义书签 四、工程方案 错误！未定义书签 第六章 原材料与原料供应 错误！未定义书签 一、原料来源及运输方式错误！未定义书签 二、燃料供应与运输方式错误！未定义书签 第七章 总图布置、运输、总体布局与公用辅助工程 错误！未定义书签 一、总图布置 错误！未定义书签 二、运输错误！未定义书签 三、总体布局错误！未定义书签 四、公用辅助工程 错误！未定义书签 第八章 节能、节水与安全措施错误！未定义书签 一、主要依据

17、及标准 错误！未定义书签 二、节能错误！未定义书签 三、节水错误！未定义书签 四、消防与安全错误！未定义书签 第九章 环境影响与评价 错误！未定义书签 一、法规依据错误！未定义书签 二、项目建设对环境影响 错误！未定义书签 三、环境保护措施 错误！未定义书签 四、环境影响评价 错误！未定义书签 第十章 项目组织管理与运行 .错误！未定义书签 一、项目建设期管理 错误！未定义书签 二、项目运行期组织管理 错误！未定义书签 第十一章 项目实施进度 错误！未定义书签 第十二章投资估算和资金筹措错误！未定义书签 一、投资估算错误！未定义书签 二、资金筹措错误！未定义书签 第十三章财务评价与效益分析错误！未定义书签 一、项目财务评价 错误！未定义书签 二、财务评价结论 错误！未定义书签 三、社会效益错误！未定义书签 四、生态效益 错. 误