web开发技术课程设计报告材料

wordweb系统设计课程设计学 院： 工学院 专 业：网络工程 班 级： 1401 姓 名：王乐学 号：2014011070指导教师： 姬广永 X珊珊 2016 年 7 月 1 日工学院课程设计评审表学生某某王乐专业网络工程年级2014学号2014011070设计题目响应式项目某某陆海石油响应式评价内容评价指标评分权值评定成绩业务水平含辩论有扎实的根底理论知识和专业技能；能够综合运用所学的HTML、CSS、JavaScript等知识和HBuilder开发工具进展WEB站点的规划、设计与制作；能够根据规划，搜集、整理相关素材；独立进展实验工作，学会调试、发布、管理，并能运用所学知识和技能去发现与解决实际问题；主页版面内容、结构和设计清晰合理；考虑页面整体布局、视觉效果、页面尺寸和框架等因素，保持的整体设计风格一致。40课程设计报告(设计说明书)质量综述简练完整；结论严谨合理；实验正确，分析处理科学；文字通顺，技术用语准确，符号统一，编号齐全，书写工整规X，图表完备、整洁、正确；结果有应用价值；工作中有创新意识；对前人工作有改良或突破，或有独特见解。30工作量、工作态度按期完成规定的任务，工作量饱满，难度较大；工作努力，遵守纪律；工作作风严谨务实30合计100指导教师评语12 / 14设计题目：响应式项目某某陆海石油响应式指 导老 师姬广永 参 加学 生王乐，牟敦现，常发博，陈兵，王守栋设 计目 的综合运用所学的HTML与CSS、JavaScript等知识，使用WEB开发工具编辑网页， Photoshop或FireWorks处理图形，制作出主题鲜明、结构清晰、图文并茂、具有专业水平的。设 计内 容1、确定所要制作的类型、主题、规模以与要使用的技术。 2、规划的栏目、风格，画出站点规划层次图，建立站点目录。 3、根据规划，搜集、整理相关素材。 4、对用到的文本、图片、动画等多媒体素材进展处理。 5、主页版面内容、结构和设计要清晰，醒目。6、考虑页面整体布局、视觉效果、页面尺寸和框架等因素，保持的整体设计风格一致。 7、调试：各个页面完成后，对站点进展调试。 8、发布：建设好后，发布到服务器。设 计要 求分组：每三至五人一组，自由组合；项目演示：以小组为单位，逐一演示本小组成员所做项目，并进展项目讲解；多人进展共同合作开发，在项目辩论的过程中要明确解说每个人的分工任务，并且课程设计报告主要介绍自己所做内容，要某某训中制作的和目标相似度在70%以上，以完成各个方面的的训练。web开发技术课程设计任务书某某陆海石油响应式的设计目录某某陆海石油响应式的设计41 设计目的52 设计要求53 整体规划64 详细设计与实现8负责区域8负责区域网页代码9负责区域CSS代码91 设计目的熟悉和掌握计算机网页设计的根本技巧与网页制作相关工具软件等内容。培养我们利用计算机进展商务网页设计的根本思路和应用开发能力，提高我们的计算机文化素质。网页是世界上最有价值的不动产之一。人们在这个不足平米的空间内投资达数百万美元。网页对公司的影响比简单的电子商务增收方法大得多；网页也是公司对 外的脸面。WEB站点就像一栋房子，它的每一个窗口都可以看成一扇门，人们可以沿着搜索引擎其他WEB站点的，绕过主页而进入WEB的深层。2 设计要求1站点命名与结构站点文件夹为某某陆海。站点文件夹中所包含文件夹：imgImages，存放图片文件，CSS存放各局部的css文件。站点文件夹中所包含文件：首页2. 制作技术要求页面布局合理，色彩和谐，正确，图文并茂，制作的和目标相似度在70% 以上，以完成各个方面的的训练。3. 合作开发 分为3到5人的小组，多人进展共同合作来完成此次实训的任务。小组内局部工合作，每个人都要有自己负责的板块。在竞争与合作中完成此次实训的任务。3 整体规划1. 讨论主题本次实训要做的是某某陆海石油装备研究院某某的首页，其中的各种动画、过渡等都需要做出来。2. 确定栏目和板块1首先要考虑整个网页的长和宽，以与长度和宽度之间的比例。2其次就应该考虑导航条的设置了。3正文的框架设置 横向因素和纵向因素交织在仔细研究过原版之后，再结合我们自己的想法，在草纸上画出了大体的栏目和板块。3. 小组分工合作将整个页面分为三局部，分别是头部一人负责、尾部一人负责和主体内容三人负责。我主要负责的是主题内容中最新动态区域。4. 使用的工具HTML编辑软件：主要是HBuilder，DreamWeaver作辅助。浏览器：以使用谷歌浏览器Chrome浏览为主。辅助工具：屏幕截图工具FSCapture，CSS、w3c标准html5手册5. 整体布局框图如下：首页头部header产品服务header成功案例最新动态尾部footer搜索框导航横幅变换定位蒙版定位放大定位信息4 详细设计与实现负责区域代码4 HTML代码最新动态News伊朗石油公司代表前来我院参观洽谈今日，伊朗石油公司的客人来到我院进展石油项目的洽谈合作，院长戴克文热情的接见Read More第三套甲板吊机完成起吊试验2016年3月10日，虽然寒潮再度来袭，但依旧没有阻挡我院工作人员完成第三套甲板 Read More第三套甲板吊机排线布绳工作顺利完成2016年3月3日，第三套甲班吊机在总工程师X晓军的带领下，上午顺利完成拼稀Read More4.1.2负责区域CSS代码.newswidth: 100%;height: 550px;.news .xin1width: 136px;height: 50px; font-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;.news 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%;height: 100%;transition: all 2s ease;.news .dong li: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 .dong li:hover .readbackground-color:#F86C0F;color: white;.news .dong li:hovercursor: pointer;color: #2A7EDA;网页效果图5 设计总结1设计目的一级标题：黑体小三，1.5倍行距，段后1行正文：段落起始空两个字符，宋体，小四英文、数字：Times New Roman，小四，倍行距2设计要求正文：段落起始空两个字符，宋体，小四英文、数字：Times New Roman，小四，倍行距3整体规划正文：段落起始空两个字符，宋体，小四英文、数字：Times New Roman，小四，倍行距4详细设计与实现 4.1(二级标题黑体四号，倍行距，段前行，独占行，左侧顶格书写)4.1.1 三级标题：黑体小四，倍行距，段前行4.2 (二级标题黑体四号，倍行距，段前行，独占行，左侧顶格书写)5设计总结对整个课程设计做归纳性总结，并分析设计过程中的困难与如何解决的，最后提出展望。