企业网页设计报告(共27页)

1、精选优质文档-倾情为你奉上20172018学年第一学期期末考试网页设计与制作实践考核企业网站设计说明书项目名称： 万豪装饰企业网站设计 专 业： 网络工程 学 号： * 姓 名： * 任课教师： 刘艳 2017年12月26日考核项目及要求项目：万豪装饰企业网站设计1 考核要点（1） 系统设计：完成完整的静态网站（2） 主题明确、内容健康；（3） 页面布局合理，视觉效果好；（4） 网页内容样式设计合理；（5） 代码书写符合标准规范；（6） 具备实际应用价值与创新。2作品要求学生根据自选的主题完成网站设计，并撰写设计说明书。目录专心-专注-专业1选题的目的与意义11选题目的制作一个好的网页需要经过

2、这些步骤：确定主题和功能、搜集材料、规划网站、选择合适的制作工具、制作网页。为了可以检验自己和提高对页面设计的认识以及对基础知识的掌握和综合利用，我选择了万豪装饰企业的网站设计。1.2选题意义网页设计与制作是一门动手能力很强的课程，掌握知识的关键在于实践，这次选题，最重要的意义在于走出书本，通过一个小项目，培养我们的具有一定的专业素质，和综合应用的能力。现如今很多网页都具有商业价值，因此一个好的网页必须给人舒适的感觉，通过自己的设计和制作，不仅让我们发现自己专业知识上的不足，也能加强我们对网页各个细节的优化，以达到更加好的效果，加强我们的专业设计能力。2选用的技术及技术背景2.1选用的技术HT

3、ML、CSS、JavaScript、PS2.2技术背景HTML: 又叫超文本标记语言，标准通用标记语言下的一个应用。从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，拥有：简易性、可扩展性、平台无关性、通用性等特点。是一种标记语言。  CSS: 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现（的一个应用）或（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网

4、页各元素进行格式化。JavaScript：JavaScript是一种直译式脚本语言，是一种动态类型、弱类基于原型的语言，内置支持类型。是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。PS: Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

5、从功能上看，该软件可分为图像编辑、图像合成、校色调色及功能色效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。3网页首页的结构设计网页结构设计是网站设计的重要组成部分。这次万豪装饰企业的网页的首页结构设计采用扁平结构的物理结构，因为这是个小型的网页设计。对于装饰公司的首页，最重要的是吸引浏览者的眼球，把公司的最新动态、联系方式、优秀作品、优秀团队都展现出来。还要能够链接公司方方面面的具体信息：首页、关于我们、新闻中心、装饰实例、万豪团队、装饰指南、一品管家、宅急修、装修订单。一个企业的首页设计，

6、需要将最新的产品放在网页中最显眼的位置，还要将特色地成品设计轮流展播，以便访客能够很好地了解企业的文化。网页上一定要明确的标注联系方式。网页还添加购物车功能，方便客户收藏自己喜欢的设计。先用PS进行网页模块的规划，选定好颜色地搭配，测量好各个模块的大小。接下来再用HTML设计网页。通过分析，我规划出模块大致分为下列四部分：如图1.1图1.1万豪企业网页的结构设计4网站详细设计4.1首页设计首页图片效果图：1、第一部分：网页的顶部，包含企业logo，顶部导航，把他们放在一个head盒子里面大小为：1366*85部分css样式：.headwidth: 1366px;height: 85px; ba

7、ckground: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;ma

8、rgin: 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-a

9、lign: 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;/*不让他们横排*/backgro

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

11、1280px;/*border: 1px solid darkgreen;*/margin-left: 30px;border-left: 1px solid #ccc;position: absolute;right: 0;top:10px;（1）Conleft包含成功案例、新闻中心、团队风采三部分：成功案例部分：写在success盒子，大小为：957*483，文字部分放在盒子sc1中，图片放在scimg盒子里面效果图如下：图4.3新闻中心部分：是左右布局，先用css固定news盒子大小：975*376，再将盒子news_left、news_right放在盒子里面。news_left里面有轮

12、播图，通过css样式和js实现轮播，而且这部分展出儿童房设计，再添加一个盒子写出相应文字。news_right，为了实现比较好的效果，我在里面建立两个盒子一个放标题，一个方内容，通过css实现比较美观的效果。轮播js代码见附录，效果图如下：图4.4团队风采部分：我设计了两个大盒子：conleft_bet和tem，conleft_bet主要写团队风采，和实现盒子的圆弧角度。为了实现左右分布，tem里面存在三个大盒子，前两个盒子在左边上下分布，在tem的左边，右边通过子决父相放另外装有内容的两个盒子。最终实现效果如下:图4.5实现上面效果的部分css样式：#content #news #news_

13、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: 1px solid #ccc;height: 30px;margin-left: 14px;.namemargin-top:5px;.temwidth: 1000

14、px;height: 380px;/*border: 1px solid #0000FF;*/position:relative ;（2）Conright包含装修须知、在线调查、联系我们、友情链接四部。这部分左右布局比较少，因此大部分都是上下结构，命名也是直接以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 .top1 width: 320

15、px; height: 40px; margin-left:10px ; margin-top: 20px; border-bottom: 1px dashed #CCCCCC; padding-bottom: 3px; .t1font-size: 19px;font-weight:bold ;联系我们：将图片设为背景图，图面内容为联系我们及联系方式、传真、邮件。将这一模块放到网页左侧明显的位置，以便访客能够及时联系我们。效果图如下：图4.7部分代码如下：.top6width: 280px;margin-top: 30px;margin-left:80px ;.top6 inputwidth:

16、 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盒子，里面内容为网站版权信息，和其

17、他事项。效果图如下：Css样式：#fo_conheight:150px ;width: 1366px;text-align: center;#fo_con .middle1margin-top: 10px;color: #;font-size: 8px;图4.94.2子网页设计子网页，我认为可以更文艺一些，可能会引起顾客共鸣，点击首页中的关于我们，观看优秀作品和它们背后的故事。效果图如下：图4.105项目测试与浏览器兼容性项目测试：通过在谷歌测试，缩小67%以上各个功能正常，但是缩小50%以后，项目发生重叠。通过火狐浏览器测试，缩放100%以上及以下都显示正常。用IE缩放显示也正常。浏览器兼容

18、性：浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。本项目网络兼容性较好，在主流浏览器均能正常显示。但是谷歌浏览器测试时缩小时会显示不正常。6总结通过这次企业网站的设计，刚开始有点无从下手，后来静下心来，我把设计的网页图片好好看了看，仔细分析了一下。开始给网页大致固定几个大盒子。网页版面的设计各个部分用什么实现、位置放在哪里都是写网页的时候的很重要也是很需要解决的事

19、情。我的网页左右布局大大小小的很多，如果里面的盒子太大了，就会显示不正常，放不到右边。在我的网页中还有三部分上下有一定间距的文字，刚开始，我直接用p标签写的，但是，上下间距不是想要的效果，后来我改为了盒子实现。因为盒子对于设置位置，距离等都是很方便的。再做轮播的时候这是我的弱项，后来经过慢慢看以前的知识，实现了轮播。这个轮播处理比较困难的是图片和轮播块都能正常轮播。到最后还是样式的事，我的轮播块写的太小了，而每一个li和间距加起来超过了轮播块的大小，因此被弄到了下面一行。总之我认为样式的设置是需要仔细分析的问题，不能想到什么就写什么，否则可能不只是页面不好看，有可能也会影响到别的内容。另外，我

20、认为我们制作网页的时候最好是把每个模块分开写，因为刚开始我没有分开写，后面自己开始感觉代码很乱，而且网页也看着没那么好看，后来我每部分都写了大盒子，调节每个模块之间关系的时候，只需要动大盒子就好了，这样不仅提高效率，也让我自己容易理解。附录1、HTML代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css"

21、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&qu

22、ot; 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

23、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="

24、;#">首页</a></li><li><a href="introduction.html">关于我们</a></li><li><a href="#">新闻中心</a></li><li><a href="#">装饰实例</a></li><li><a href="#">万豪团队</a></li&

25、gt;<li><a href="#">装饰指南</a></li><li><a href="#">一品管家</a></li><li><a href="#">宅急修</a></li><li><a href="#">装修订单</a></li><li></li></ul></div>&l

26、t;/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</spa

27、n></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="banne

28、r"><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="

29、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&

30、quot;/></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

31、 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="n

32、ews_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="#">&g

33、t;MORE</a></div></div><div class="news_right_content"><div class="newbox">><a href="#">万豪空间装饰荣获市装协多项荣誉 &nbsp;（03-25）</a></div><div class="newbox">><a href="#">万豪装饰健康装饰讲堂首战告捷 &n

34、bsp;（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">&g

35、t;<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家居学术报告&

36、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=&qu

37、ot;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>&

38、lt;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&quo

39、t;/></div><div class="bwrd"><div class="name" >姓名：龚成慧</p></div><div class="name">职务：首席设计师</p></div><div class="name">主要作品：长春都市豪庭、柏景湾、中</div><div class="name">央花园、蜀山明筑别墅、东海花园空中</d

40、iv><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" &

41、gt;姓名：龚成慧</p></div><div class="name">职务：首席设计师</p></div><div class="name">主要作品：长春都市豪庭、柏景湾、中</div><div class="name">央花园、蜀山明筑别墅、东海花园空中</div><div class="name">别墅</div></div></div><div

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

43、">主要作品：长春都市豪庭、柏景湾、中</div><div class="name">央花园、蜀山明筑别墅、东海花园空中</div><div class="name">别墅</div></div></div></div></div></div><div id="conright"><div class="top1"><img src="img

44、/conrig1.jpg"/><span class="t1">装修须知</span></div><div class="top2"><div class="whwd">>&ensp;<a href="#">万豪空间装饰荣获市装协多项荣誉</a></div><div class="whwd">>&ensp;<a href="#&q

45、uot;>万豪装饰健康装饰讲堂首战告捷</a></div><div class="whwd">>&ensp;<a href="#">健康装饰有知可识</a></div><div class="whwd">>&ensp;<a href="#">文化与设计</a></div><div class="whwd">>&ensp

46、;<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"/>&e

47、nsp;在线调查</div><div class="top4"><div class="tpo">请问通过什么途径访问到我们</div><div class="tpo">网站的？</div></div><div class="top5"><div class="inp1"><input type="radio" />网络搜索</div><d

48、iv class="inp1"><input type="radio" />友情链接</div><div class="inp1"><input type="radio" />新闻报纸等媒体</div><div class="inp1"><input type="radio" />通过别人介绍</div><div class="inp1">&l

49、t;input type="radio" />其他</div></div><div class="top6"><input type="submit" value="投 票" />&emsp;<input type="button" value="查 看" /></div><div class="top7"><img src="img/lian

50、xi.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><di

51、v 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"

52、/></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" />