企业网页设计报告

1、20172018 网页设计与制作实践考核企业网站设计说明书项目名称： 专 业：学 号：姓 ：2017年12月26 日考核项目及要求项目：万豪装饰企业网站设计1考核要点（1） 系统设计：完成完整的静态网站（2） 主题明确、内容健康；（3） 页面布局合理，视觉效果好；（4） 网页内容样式设计合理；（5） 代码书写符合标准规范；（6） 具备实际应用价值与创新。2作品要求学生根据自选的主题完成网站设计，并撰写设计说明书。1选题的目的与意义. 1112选用的技术及技术背景. 1113网页首页的结构设计. 24网站详细设计. 335项目测试与浏览器兼容性. 136总结. 13附录. 141 11选题目的识

2、以及对基础知识的掌握和综合利用，我选择了万豪装饰企业的网站设计。1.2 选题意义我们的专业设计能力。2 2.1 选用的技术HTML、CSS、JavaScript、PS2.2 技术背景HTML: 又叫超文本标记语言，标准通用标记语言下的一个应用。从HTML被户提供页面效果的控制。超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，拥有：简易性、可扩展性、平台无关性、通用性等特点。是一种标记语言。CSS: 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）不仅可以静态

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

4、分为图像编辑、图像合成、校色调色及功能色效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。3 的首页，最重要的是吸引浏览者的眼球，把公司的最新动态、联系方式、优秀作品、优秀团队都展现出来。还要能够链接公司方方面面的具体信息：首页、关于我们、新闻中心、装饰实例、万豪团队、装饰指南、一品管家、宅急修、装修订单。明确的标注联系方式。网页还添加购物车功能，方便客户收藏自己喜欢的设计。先用 PS 进行网页模块的规划，选定好颜色地搭配，测量好各个模块的大小。接下来再用 HTML 设计网页。通过分析，我规划出

5、模块大致分为下列四部分：如图 1.1头部导航万豪装饰企业网站版权信息区图23height: 85px; background:url(./img/topimg.jpg)no-repeatmargin-bottom: 4px;position: absolute;top: 0;2、第二部分：企业的导航4#nava #nav ul lifloat: left;/*/让他们横排*/position: relative;width: 134.6px;height: 40px;margin-top: 0px;margin-left: 2px;background-color:#ccc;#nava #na

6、v 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 abackg

7、round-color: #fff;color:#000;5#nava #nav ul li ul liwidth: 89px;图4.23、第三部分：内容由于内容比较多，而且大局呈现左右分布，所以先建立一个content 的大盒#content #conrightwidth: 340px;height: 1280px;/*border: 1px solid darkgreen;*/margin-left: 30px;border-left: 1px solid #ccc;position: absolute;6图 4.3图 4.47图 4.5实现上面效果的部分 css样式：#content #

8、news #news_leftposition: absolute;width:476px;position: absolute;width:445px;8position: relative;border-bottom: 1px solid #ccc;height: 30px;图 4.69border-bottom: 1px dashed #CCCCCC;padding-bottom: 3px;图 4.7部分代码如下：.top6border-radius: 6px ;图 4.8margin-top: 50px;margin-left: 15px;margin-top: 40px;margin

9、-bottom:30px;图图5 项目测试：通过在谷歌测试，缩小 67%以上各个功能正常，但是缩小 50%以后，项目发生重叠。通过火狐浏览器测试，缩放 100%以上及以下都显示正常。用 IE 缩放显示也正常。浏览器兼容性：浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问是谷歌浏览器测试时缩小时会显示不正常。6 文字，刚开始，我直接用p标签写的，但是，上下间距不是想要的效果，后来我 li 能不只是页面不好看，有可能也会影响到别的内容。每部分都写了大盒子，调节每个模块之间关系的时候，只需要动大盒子就好了，这样不仅提高效率，也让

10、我自己容易理解。1、HTML代码!-!-加入收藏|投诉建议|联系我们首页关于我们新闻中心装饰实例万豪团队装饰指南一品管家宅急修装修订单成功案例Success Case12345万振逍遥苑“蝶恋花”样板房儿童房新闻中心MORE万豪空间装饰荣获市装协多项荣誉（03-25）万豪装饰健康装饰讲堂首战告捷 （03-24）健康装饰有知可识 （03-18）文化与设计 a宋春红应邀中科大09家居学术报告（03-12）中国科学技术大学 09家居学术报告（03-25）中国科学技术大学 09家居学术报告（03-25）团队风采MORE姓名：龚成慧职务：首席设计师主要作div央花园、蜀山明筑别墅、东海花园空中别墅姓名：

11、龚成慧职务：首席设计师主要作品：长春都市豪庭、柏景湾、中央花园、蜀山明筑别墅、东海花园空中别墅姓名：龚成慧职务：首席设计师主要作品：长春都市豪庭、柏景湾、中央花园、蜀山明筑别墅、东海花园空中别墅姓名：龚成慧职务：首席设计师主要作品：长春都市豪庭、柏景湾、中央花园、蜀山明筑别墅、东海花园空中别墅装修须知万豪空间装饰荣获市装协多项荣誉万豪装饰健康装饰讲堂首战告捷健康装饰有知可识文化与设计宋春红应邀中科大09家居学术报告更多在线调查请问通过什么途径访问到我们网站的？ 网络搜索友情链接新闻报纸等媒体通过别人介绍其他Copyright2009ALL RightsReserved 版权所有合肥万豪装饰有限

12、公司建议使用1024*768以上的屏幕分辨率和6.0以上的IE来访问本站技术支持：创想网络2、Js代码：window.onload=function()var current_index=0;var timer=setInterval(autoChange,1000);varbutton_lis=document.getElementById(button).getElementsByTagName(li);varpic_divs=document.getElementById(banner_pic).getElementsByTagName(div);for(var i=0;ibutton_

13、lis.length;i+)button_lisi.onmousemove=function()clearInterval(timer);if(i!=current_index)button_liscurrent_index.style.background=but;for(var i=0;ipic_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(va