web开发技术课程设计报告

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

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

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

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

5、专业 .整理 .下载可编辑辽宁陆海石油响应式网站的设计目录辽宁陆海石油响应式网站的设计31 设计目的42 设计要求63 网站整体规划74 网站详细设计及实现94.1 负责区域 .错误！未定义书签。4.2 负责区域网页代码94.3 负责区域 CSS代码10.专业 .整理 .下载可编辑1 设计目的熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。培养我们利用计算机进行商务网页设计的基本思路和应用开发能力，提高我们的计算机文化.专业 .整理 .下载可编辑素质。网页是世界上最有价值的不动产之一。人们在这个不足0.1 平米的空间内投资达数百万美元 。网页对公司的影响比简单的电子商务增收方法

6、大得多；网页也是公司对外的脸面 。WEB 站点就像一栋房子 ，它的每一个窗口都可以看成一扇门，人们可以沿着搜索引擎其他WEB 站点的链接 ，绕过主页而进入WEB 的深层 。.专业 .整理 .下载可编辑2 设计要求1站点命名与结构站点文件夹为辽宁陆海 。站点文件夹中所包含文件夹：img （Images ，存放图片文件 ）， CSS（存放各部分的 css 文件）。站点文件夹中所包含文件： index.html （首页）2. 网站制作网站技术要求页面布局合理，色彩和谐 ，链接正确 ，图文并茂 ，制作的网站和目标网站相似度在70% 以上，以完成各个方面的的训练。3. 合作开发分为 3 到 5 人的小组

7、 ，多人进行共同合作来完成此次实训的任务。小组内部分工合作 ，每个人都要有自己负责的板块。在竞争与合作中完成此次实训的任务。.专业 .整理 .下载可编辑3 网站整体规划1. 讨论网站主题本次实训要做的网站是辽宁陆海石油装备研究院有限公司的首页，其中的各种动画 、过渡等都需要做出来 。2. 确定栏目和板块1）首先要考虑整个网页的长和宽 ，以及长度和宽度之间的比例 。2）其次就应该考虑导航条的设置了 。.专业 .整理 .下载可编辑3）正文的框架设置（横向因素和纵向因素交错）在仔细研究过原版之后 ，再结合我们自己的想法，在草纸上画出了大体的栏目和板块 。3. 小组分工合作将整个页面分为三部分 ，分别

8、是头部 （一人负责 ）、尾部（一人负责 ）和主体内容 （三人负责 ）。我主要负责的是主题内容中最新动态区域。4. 使用的工具HTML 编辑软件 ：主要是 HBuilder ，DreamWeaver 作辅助 。浏览器：以使用谷歌浏览器 Chrome 浏览为主 。辅助工具 ：屏幕截图工具 FSCapture，CSS、 w3c 标准 html5 手册5. 网站整体布局框图如下 ：首页头部产品服成功案最新动尾部header务例态footerheader搜导横变定蒙定放定信版索航幅换位版位大位息权框.专业 .整理 .下载可编辑4 网站详细设计及实现4.1 负责区域代码代码最新动态 News 伊朗石油公司

9、代表前来我院参观洽谈今日，伊朗石油公司的客人来到我院进行石油项目的洽谈合作，院长戴克文热情的接见Read More.专业 .整理 .下载可编辑 第三套甲板吊机完成起吊试验2016年 3 月 10 日，虽然寒潮再度来袭，但依旧没有阻挡我院工作人员完成第三套甲板Read More 第三套甲板吊机排线布绳工作顺利完成2016年 3 月 3 日，第三套甲班吊机在总工程师张晓军的带领下，上午顺利完成拼稀Read More负责区域 CSS代码.news.专业 .整理 .下载可编辑width: 100%;height: 550px;.news .xin1width: 136px;height: 50px;f

10、ont-size: 32px;font-weight: 900;position: relative;top: 45px;left: 50%;margin-left: -78px;.news .xin2color: #2A7EDA;width: 70px;height: 15px;color:#1EA8EA;font-size: 28px;position: relative;left:50%;top: 30px;.专业 .整理 .下载可编辑margin-left: -35px;.news .dongmargin: 0 auto;position: relative;top: 40px;.ne

11、ws ul liwidth:100%;height: 200px;overflow: hidden;/*display: block;*/.news ul lilist-style: none;float: left;.news .dong .kuaiwidth: 28%;height: 350px;.专业 .整理 .下载可编辑border: 1px solid #C3C3C3;padding: 10px;.news .dong.kuai .picwidth: 100%;height: 50%;overflow: hidden;.news .dong .pic imgwidth: 100%;h

12、eight: 100%;transition: all2s ease;.news .dongli:hover imgtransform: scale(1.3);.readwidth:38% ;height: 10%;margin: 0 auto;color: #F86C0F;.专业 .整理 .下载可编辑border: 2px solid #F86C0F;font-size: 16px;text-align: center、padding-top: 4%;.news .dongli:hover .readbackground-color:#F86C0F;color: white;.news .dongli:hovercursor: pointer;color: #2A7EDA;.专业 .整理 .下载可编辑4.2 网页效果图.专业 .整理 .下载可编辑5 设计总结1 设计目的 （一级标题 ：黑体小三 ，1.5 倍行距 ，段后 1 行） ：段落起始空两个字符，宋体，小四（英文、数字：Times New Roman ，小四）， 1.25 倍行距）2 设计要求 ，宋体，小四（英文、数字： Times New Roman ，小四）， 1.25 倍行距）3 网站整体规划 ：段落起始空两个字符，宋体，小四（英文、数字：TimesNew Roman ，小四）， 1.