企业网页设计报告

-20172018学年第一学期期末考试"网页设计与制作"实践考核企业设计说明书工程名称： 万豪装饰企业设计 专 业： 网络工程 学 号：*姓 名：*任课教师： 艳 2017年12月26日考核工程及要求工程：万豪装饰企业设计1 考核要点（1） 系统设计：完成完整的静态（2） 主题明确、容安康；（3） 页面布局合理，视觉效果好；（4） 网页容样式设计合理；（5） 代码书写符合标准规；（6） 具备实际应用价值与创新。2作品要求学生根据自选的主题完成设计，并撰写设计说明书。目录1选题的目的与意义11.1选题目的11.2选题意义12选用的技术及技术背景12.1选用的技术12.2技术背景13网页首页的构造设计24详细设计34.1首页设计34.2子网页设计125工程测试与浏览器兼容性136总结13附录14. z.-1选题的目的与意义11选题目的制作一个好的网页需要经过这些步骤：确定主题和功能、搜集材料、规划、选择适宜的制作工具、制作网页。为了可以检验自己和提高对页面设计的认识以及对根底知识的掌握和综合利用，我选择了万豪装饰企业的设计。1.2选题意义网页设计与制作是一门动手能力很强的课程，掌握知识的关键在于实践，这次选题，最重要的意义在于走出书本，通过一个小工程，培养我们的具有一定的专业素质，和综合应用的能力。现如今很多网页都具有商业价值，因此一个好的网页必须给人舒适的感觉，通过自己的设计和制作，不仅让我们发现自己专业知识上的缺乏，也能加强我们对网页各个细节的优化，以到达更加好的效果，加强我们的专业设计能力。2选用的技术及技术背景2.1选用的技术HTML、CSS、JavaScript、PS2.2技术背景HTML: 又叫超文本标记语言，标准通用标记语言下的一个应用。从HTML被创造开场，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，拥有：简易性、可扩展性、平台无关性、通用性等特点。是一种标记语言。 CSS: 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用或XML标准通用标记语言的一个子集等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进展格式化。JavaScript：JavaScript是一种直译式脚本语言，是一种动态类型、弱类基于原型的语言，置支持类型。是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。PS: Adobe Photoshop，简称"PS，是由Adobe Systems开发和发行的图像处理软件。主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进展图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。从功能上看，该软件可分为图像编辑、图像合成、校色调色及功能色效制作局部等。 图像编辑是图像处理的根底，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进展复制、去除斑点、修补、修饰图像的残损等。3网页首页的构造设计网页构造设计是设计的重要组成局部。这次万豪装饰企业的网页的首页构造设计采用扁平构造的物理构造，因为这是个小型的网页设计。对于装饰公司的首页，最重要的是吸引浏览者的眼球，把公司的最新动态、联系方式、优秀作品、优秀团队都展现出来。还要能够公司方方面面的具体信息：首页、关于我们、新闻中心、装饰实例、万豪团队、装饰指南、一品管家、宅急修、装修订单。一个企业的首页设计，需要将最新的产品放在网页中最显眼的位置，还要将特色地成品设计轮流展播，以便访客能够很好地了解企业的文化。网页上一定要明确的标注联系方式。网页还添加购物车功能，方便客户收藏自己喜欢的设计。先用PS进展网页模块的规划，选定好颜色地搭配，测量好各个模块的大小。接下来再用HTML设计网页。通过分析，我规划出模块大致分为以下四局部：如图1.1图1.1万豪企业网页的构造设计4详细设计4.1首页设计首页图片效果图：1、第一局部：网页的顶部，包含企业logo，顶部导航，把他们放在一个head盒子里面大小为：1366*85局部css样式：.headwidth:1366px;height:85px; background:url(./img/topimg.jpg)no-repeat center top ; position:relative;.head.right-linkwidth:260px;height:85px;margin-bottom:4px;position:absolute;top:0;right:0;效果如以下图：图4.12、第二局部：企业的导航设计一个nava盒子，为每个小li标签设置大小134*40：局部css样式：#nava width: 1366px;height: 40px;#nava #navwidth: 1366px;height:40px;margin: 0 ;margin-bottom: 4px;font-family: "微软雅黑"#nava #nav ul lifloat: left;/*/让他们横排*/position: relative;width: 134.6px;height: 40px;margin-top: 0px;margin-left: 2px;background-color:#ccc;#nava #nav ul li adisplay: block;/*/超a是行元素,没宽高什么的*/ /* padding: 0 13.92578px;*/*width: 90px;*/text-align: center;height: 40px;line-height: 40px;/*行高和line-height相等那么居中*/text-decoration: none;color: #000;/*font-size: 14px;*/#nava #nav ul li a:hoverbackground-color: #fff;color:#000;#nava #nav ul li:hover abackground-color: #fff;color:#000;#nava #nav ul li ul liwidth: 89px;float: none;/*不让他们横排*/background-color: #fff;/*margin-top: 2px;*/效果图如下：图4.23、第三局部：容由于容比拟多，而且大局呈现左右分布，所以先建立一个content的大盒子，再建立一个conleft和一个conright的盒子，通过子决父相，让conright盒子在content盒子的右局部。局部css样式：#contentwidth:1366px;position:relative;height:1300px ;#content#conleftposition:absolute;left:0;#content#conrightwidth:340px;height:1280px;/*border: 1px solid darkgreen;*/margin-left:30px;border-left:1pxsolid#ccc;position:absolute;right:0;top:10px;1Conleft包含成功案例、新闻中心、团队风采三局部：成功案例局部：写在success盒子，大小为：957*483，文字局部放在盒子sc1中，图片放在scimg盒子里面效果图如下：图4.3新闻中心局部：是左右布局，先用css固定news盒子大小：975*376，再将盒子news_left、news_right放在盒子里面。news_left里面有轮播图，通过css样式和js实现轮播，而且这局部展出儿童房设计，再添加一个盒子写出相应文字。news_right，为了实现比拟好的效果，我在里面建立两个盒子一个放标题，一个方容，通过css实现比拟美观的效果。轮播js代码见附录，效果图如下：图4.4团队风采局部：我设计了两个大盒子：conleft_bet和tem，conleft_bet主要写团队风采，和实现盒子的圆弧角度。为了实现左右分布，tem里面存在三个大盒子，前两个盒子在左边上下分布，在tem的左边，右边通过子决父相放另外装有容的两个盒子。最终实现效果如下:图4.5实现上面效果的局部css样式：#content#news#news_leftposition:absolute;width:476px;margin-left:14px ;margin-top:13px;#content #news #news_rightposition: absolute;right: 0;width:445px;margin-top:40px;#content.conleft_betwidth:957px ;position:relative;border-bottom:1pxsolid#ccc;height:30px;margin-left:14px;.namemargin-top:5px;.temwidth:1000px;height:380px;/*border: 1px solid #0000FF;*/position:relative ;2Conright包含装修须知、在线调查、联系我们、友情四部。这局部左右布局比拟少，因此大局部都是上下构造，命名也是直接以top1-8。装修须知：有两个盒子top1大小320*44，top2大小320*190，在线调查：top3大小320*37，top4大小340*52.67，top5大小340*146.67，top6大小280*30.67,效果分别如下：图4.6局部代码css样式如下：#content#conright.top1width:320px;height:40px;margin-left:10px ;margin-top:20px;border-bottom:1pxdashed#CCCCCC;padding-bottom:3px;.t1font-size:19px;font-weight:bold ;联系我们：将图片设为背景图，图面容为联系我们及联系方式、 、。将这一模块放到网页左侧明显的位置，以便访客能够及时联系我们。效果图如下：图4.7局部代码如下：.top6width:280px;margin-top:30px;margin-left:80px ;.top6inputwidth:80px;height:30px;border-radius:6px ;.top7width:300px;margin-top:60px;margin-left:10px;友情：建立一个top8盒子，盒子里面是友情局部，将其他企业图片附上，放置到盒子中，右半局部的四个盒子运用子绝父相方式。效果图如下：图4.8局部代码如下：.top8width:320px;margin-top:50px;margin-left:15px;.top8.logmargin-top:40px;margin-bottom:30px;建立一个fo_con盒子，里面容为信息，和其他事项。效果图如下：Css样式：#fo_conheight:150px ;width:1366px;text-align: center;#fo_con.middle1margin-top:10px;color:#797979;font-size:8px;图4.94.2子网页设计子网页，我认为可以更文艺一些，可能会引起顾客共鸣，点击首页中的关于我们，观看优秀作品和它们背后的故事。效果图如下：图4.105工程测试与浏览器兼容性工程测试：通过在谷歌测试，缩小67%以上各个功能正常，但是缩小50%以后，工程发生重叠。通过火狐浏览器测试，缩放100%以上及以下都显示正常。用IE缩放显示也正常。浏览器兼容性：浏览器兼容性问题又被称为网页兼容性或兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在的设计和制作中，做好浏览器兼容，才能够让在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。本工程网络兼容性较好，在主流浏览器均能正常显示。但是谷歌浏览器测试时缩小时会显示不正常。6总结通过这次企业的设计，刚开场有点无从下手，后来静下心来，我把设计的网页图片好好看了看，仔细分析了一下。开场给网页大致固定几个大盒子。网页版面的设计各个局部用什么实现、位置放在哪里都是写网页的时候的很重要也是很需要解决的事情。我的网页左右布局大大小小的很多，如果里面的盒子太大了，就会显示不正常，放不到右边。在我的网页中还有三局部上下有一定间距的文字，刚开场，我直接用p标签写的，但是，上下间距不是想要的效果，后来我改为了盒子实现。因为盒子对于设置位置，距离等都是很方便的。再做轮播的时候这是我的弱项，后来经过慢慢看以前的知识，实现了轮播。这个轮播处理比拟困难的是图片和轮播块都能正常轮播。到最后还是样式的事，我的轮播块写的太小了，而每一个li和间距加起来超过了轮播块的大小，因此被弄到了下面一行。总之我认为样式的设置是需要仔细分析的问题，不能想到什么就写什么，否那么可能不只是页面不好看，有可能也会影响到别的容。另外，我认为我们制作网页的时候最好是把每个模块分开写，因为刚开场我没有分开写，后面自己开场感觉代码很乱，而且网页也看着没那么好看，后来我每局部都写了大盒子，调节每个模块之间关系的时候，只需要动大盒子就好了，这样不仅提高效率，也让我自己容易理解。附录1、HTML代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/wanhao.css"/><link rel="stylesheet" type="text/css" href="css/whright.css"/><link rel="stylesheet" type="text/css" href="css/lunbo.css"/><script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script></head><body><div class="head"><!-<div id="img1">-><!-<img src="img/topimg.jpg" width="1366px"height="85px"/>-> <div class="right-link" > <a href='#'>参加收藏</a> <span>|</span> <a href="#none">投诉建议</a> <span>|</span> <a href="#">联系我们</a> </div></div><div id="nava"><div id="nav"><ul><li><a href="#">首页</a></li><li><a href="introduction.html">关于我们</a></li><li><a href="#">新闻中心</a></li><li><a href="#">装饰实例</a></li><li><a href="#">万豪团队</a></li><li><a href="#">装饰指南</a></li><li><a href="#">一品管家</a></li><li><a href="#">宅急修</a></li><li><a href="#">装修订单</a></li><li></li></ul></div></div><div id="content"> <div id="conleft"><div id="success"><div class="sc1"><span class="sucf1">成功案例</span><span>&emsp;&emsp;</span><span class="sucf2">Success Case</span></div><div class="scimg"><img src="img/succ.jpg" width="915px"height="432px"/></div></div><div id="news"><div id="news_left"><div class="news_left_img"><div class="banner"><div class="banner_pic" id="banner_pic"><div class="current"><img src="img/ertong.jpg" width="454px" height="314"/></div><div class="pic"><img src="img/lunbo2.jpg" width="454px" height="314"/></div><div class="pic"><img src="img/lunbo3.jpg" width="454px" height="314"/></div><div class="pic"><img src="img/lunbo4.jpg" width="454px" height="314"/></div><div class="pic"><img src="img/lunbo5.jpg" width="454px" height="314"/></div></div><ol id="button"><li class="crurrent">1</li><li class="but">2</li><li class="but">3</li><li class="but">4</li><li class="but">5</li></ol></div><div class="news_left_word">万振逍遥苑"蝶恋花样板房儿童房</div></div></div><div id="news_right"><div id="news_right_center"><div class="xinwen"><img src="img/jiantou.jpg"/></div><div class="news_right_center_up"><span >&ensp;&emsp;新闻中心</span></div><div class="xinwenmore"><a href="#">>MORE</a></div></div><div class="news_right_content"><div class="newbox">><a href="#">万豪空间装饰荣获市装协多项荣誉 &nbsp;03-25</a></div><div class="newbox">><a href="#">万豪装饰安康装饰讲堂首战告捷 &nbsp;03-24</a></div><div class="newbox">><a href="#">安康装饰有知可识 &nbsp;03-18</a></div><div class="newbox">><a href="#">文化与设计 &nbsp;03-13</a></div><div class="newbox">><a href="#">宋春红应邀中科大09家居学术报告 &nbsp;03-12</a></div><div class="newbox">><a href="#">中国科学技术大学 09家居学术报告&nbsp;03-25</a></div><div class="newbox">><a href="#">中国科学技术大学 09家居学术报告&nbsp;03-25</a></div> </div></div></div><div class="conleft_bet" ><div class="conleft_bet_left">团队风采</div><div class="teammore"><a href="#">>MORE</a></div></div><div class="tem"><div class="box1"><div class="bimg"><img src="img/pople.jpg"/></div><div class="bwrd"><div class="name" >：龚成慧</p></div><div class="name">职务：首席设计师</p></div><div class="name">主要作品：都市豪庭、柏景湾、中</div><div class="name">央花园、蜀山明筑别墅、东海花园空中</div><div class="name">别墅</div></div></div><div class="box2"><div class="bimg"><img src="img/pople.jpg"/></div><div class="bwrd"><div class="name" >：龚成慧</p></div><div class="name">职务：首席设计师</p></div><div class="name">主要作品：都市豪庭、柏景湾、中</div><div class="name">央花园、蜀山明筑别墅、东海花园空中</div><div class="name">别墅</div></div></div><div class="temr"><div class="boxr"><div class="bimg"><img src="img/pople.jpg"/></div><div class="bwrd"><div class="name" >：龚成慧</p></div><div class="name">职务：首席设计师</p></div><div class="name">主要作品：都市豪庭、柏景湾、中</div><div class="name">央花园、蜀山明筑别墅、东海花园空中</div><div class="name">别墅</div></div></div><div class="boxr"><div class="bimg"><img src="img/pople.jpg"/></div><div class="bwrd"><div class="name" >：龚成慧</p></div><div class="name">职务：首席设计师</p></div><div class="name">主要作品：都市豪庭、柏景湾、中</div><div class="name">央花园、蜀山明筑别墅、东海花园空中</div><div class="name">别墅</div></div></div></div></div></div><div id="conright"><div class="top1"><img src="img/conrig1.jpg"/><span class="t1">装修须知</span></div><div class="top2"><div class="whwd">>&ensp;<a href="#">万豪空间装饰荣获市装协多项荣誉</a></div><div class="whwd">>&ensp;<a href="#">万豪装饰安康装饰讲堂首战告捷</a></div><div class="whwd">>&ensp;<a href="#">安康装饰有知可识</a></div><div class="whwd">>&ensp;<a href="#">文化与设计</a></div><div class="whwd">>&ensp;<a href="#">宋春红应邀中科大09家居学术报告</a></div><div class="more">>><a href="#">更多</a></div></div><div class="top3"><img src="img/con2.jpg"width="40px" height="27px"/>&ensp;在线调查</div><div class="top4"><div class="tpo">请问通过什么途径访问到我们</div><div class="tpo">的？</div></div><div class="top5"><div class="inp1"><input type="radio" />网络搜索</div><div class="inp1"><input type="radio" />友情</div><div class="inp1"><input type="radio" />新闻报纸等媒体</div><div class="inp1"><input type="radio" />通过别人介绍</div><div class="inp1"><input type="radio" />其他</div></div><div class="top6"><input type="submit" value="投 票" />&emsp;<input type="button" value="查 看" /></div><div class="top7"><img src="img/lianxi.jpg" width="330px"/></div><div class="top8"><div class="log"><a href="#"><img src="img/iulog1.jpg"/></a><a href="#"><img src="img/iulog2.jpg"/></a></div><div class="log"><a href="#"><img src="img/iulog3.jpg"/></a><a href="#"><img src="img/iulog4.jpg"/></a></div><div class="log"><a href="#"><img src="img/iulog5.jpg"/></a><a href="#"><img src="img/iulog6.jpg"/></a></div><div class="log"><a href="#"><img src="img/iulog7.jpg"/></a><a href="#"><img src="img/iulog8.jpg"/></a></div></div></div></div><div id="fo_con"><img src="img/midd.jpg" height="60px" /><div class="middle1">Copyright&emsp;®2009&emsp;.wanhao.&emsp;ALL Rights Reserved 所有&ensp;·&ensp;万豪装饰</div><div class="middle1">建议使用1024*768以上的屏幕分辨率和6.0以上的IE来访问本站&emsp;技术支持：创想网络</div></div></body></html>2、Js代码：window.onload=function()var current_index=0;var timer=setInterval(autoChange,1000);var button_lis=document.getElementById('button').getElementsByTagName('li');var pic_divs=document.getElementById('banner_pic').getElementsByTagName('div');for(var i=0;i<button_lis.length;i+)button_lisi.onmousemove=function()clearInterval(timer);if(i!=current_index)button_liscurrent_index.style.background="but"for(var i=0;i<pic_divs.length;i+)pic_divsi.className=pic_divsi.className.replace("current","pic");button_lisi.className=button_lisi.className.replace("current","but");if(button_lisi=this)this.className+=" current" pic_divsi.className+=" current"button_lisi.onmouseout=function()timer=setInterval(autoChange,1000);function autoChange()+current_index;if(current_index=button_lis.length)current_index=0;for(var i=0;i<button_lis.length;i+)if(i=current_index)button_lisi.className="current"pic_divsi.className="current"elsebutton_lisi.className="but"pic_divsi.className="pic". z.-2017-2018学年度第一学期期末考试"网页设计与制作"实践考核成绩报告单排课编号：(2017-2018-1)-B080329-00112-014 批阅日期：2017年12月30日*班级*学号*评价工程评分标准分值得分备注主题明确、容安康根据选题情况酌情给分10页面布局合理正确使用div+css进展布局，样式合理10视觉效果好颜色搭配合理，视觉效果好20网页容样式设计使用样式表(css)对表格或字、进展修饰，使页面既能统一风格，又可突出主题20代码书写符合标准代码设计符合标准，命名规20实际应用价值与创新有实际意义和实际应用价值，具备创新点和先进性10设计说明书设计说明书表述清晰，容完整，格式正确。10合计100考核成绩任课教师签字复核人签字. z.