企业网页设计报告

2017—2018学年第一学期期末考试《网页设计与制作》实践考核企业网站设计说明书项目名称：万豪装饰企业网站设计专业：网络工程学号：***********姓名：******任课教师：刘艳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附录.............................................................1411选题的目的与意义1．1选题目的制作一个好的网页需要经过这些步骤：确定主题和功能、搜集材料、规划网站、选择合适的制作工具、制作网页。为了可以检验自己和提高对页面设计的认识以及对基础知识的掌握和综合利用，我选择了万豪装饰企业的网站设计。1.2选题意义网页设计与制作是一门动手能力很强的课程，掌握知识的关键在于实践，这次选题，最重要的意义在于走出书本，通过一个小项目，培养我们的具有一定的专业素质，和综合应用的能力。现如今很多网页都具有商业价值，因此一个好的网页必须给人舒适的感觉，通过自己的设计和制作，不仅让我们发现自己专业知识上的不足，也能加强我们对网页各个细节的优化，以达到更加好的效果，加强我们的专业设计能力。2选用的技术及技术背景2.1选用的技术HTML、CSS、JavaScript、PS2.2技术背景HTML:又叫超文本标记语言，标准通用标记语言下的一个应用。从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，拥有：简易性、可扩展性、平台无关性、通用性等特点。是一种标记语言。CSS:层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。JavaScript：JavaScript是一种直译式脚本语言，是一种动态类型、弱类基于原型的语言，内置支持类型。是一种属于网络的脚本语言,已经被广泛用于2Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。PS:AdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。从功能上看，该软件可分为图像编辑、图像合成、校色调色及功能色效制作部分等。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。3网页首页的结构设计网页结构设计是网站设计的重要组成部分。这次万豪装饰企业的网页的首页结构设计采用扁平结构的物理结构，因为这是个小型的网页设计。对于装饰公司的首页，最重要的是吸引浏览者的眼球，把公司的最新动态、联系方式、优秀作品、优秀团队都展现出来。还要能够链接公司方方面面的具体信息：首页、关于我们、新闻中心、装饰实例、万豪团队、装饰指南、一品管家、宅急修、装修订单。一个企业的首页设计，需要将最新的产品放在网页中最显眼的位置，还要将特色地成品设计轮流展播，以便访客能够很好地了解企业的文化。网页上一定要明确的标注联系方式。网页还添加购物车功能，方便客户收藏自己喜欢的设计。先用PS进行网页模块的规划，选定好颜色地搭配，测量好各个模块的大小。接下来再用HTML设计网页。通过分析，我规划出模块大致分为下列四部分：如图1.1头部网站版权信息区内容导航万豪装饰企业Logo顶部导航栏成功案例新闻中心装修须知团队风采在线投票联系我们友情链接图1.1万豪企业网页的结构设计34网站详细设计4.1首页设计首页图片效果图：1、第一部分：网页的顶部，包含企业logo，顶部导航，把他们放在一个head盒子里面大小为：1366*854部分css样式：.head{width:1366px;height:85px;background:url(../img/topimg.jpg)no-repeatcentertop;position:relative;}.head.right-link{width: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#nav{width:1366px;height:40px;margin:0;margin-bottom:4px;font-family:微软雅黑;5}#nava#navulli{float:left;/*//让他们横排*/position:relative;width:134.6px;height:40px;margin-top:0px;margin-left:2px;background-color:#ccc;}#nava#navullia{display:block;/*//超链接a是行内元素,没宽高什么的*//*padding:013.92578px;*//*width:90px;*/text-align:center;height:40px;line-height:40px;/*行高和line-height相等则居中*/text-decoration:none;color:#000;/*font-size:14px;*/}#nava#navullia:hover{background-color:#fff;color:#000;}#nava#navulli:hovera{background-color:#fff;color:#000;}6#nava#navulliulli{width:89px;float:none;/*不让他们横排*/background-color:#fff;/*margin-top:2px;*/}效果图如下：图4.23、第三部分：内容由于内容比较多，而且大局呈现左右分布，所以先建立一个content的大盒子，再建立一个conleft和一个conright的盒子，通过子决父相，让conright盒子在content盒子的右部分。部分css样式：#content{width:1366px;position:relative;height:1300px;}#content#conleft{position:absolute;left:0;}#content#conright{width:340px;height:1280px;/*border:1pxsoliddarkgreen;*/margin-left:30px;border-left:1pxsolid#ccc;position:absolute;7right:0;top:10px;}（1）Conleft包含成功案例、新闻中心、团队风采三部分：成功案例部分：写在success盒子，大小为：957*483，文字部分放在盒子sc1中，图片放在scimg盒子里面效果图如下：图4.3新闻中心部分：是左右布局，先用css固定news盒子大小：975*376，再将盒子news_left、news_right放在盒子里面。news_left里面有轮播图，通过css样式和js实现轮播，而且这部分展出儿童房设计，再添加一个盒子写出相应文字。news_right，为了实现比较好的效果，我在里面建立两个盒子一个放标题，一个方内容，通过css实现比较美观的效果。轮播js代码见附录，效果图如下：图4.48团队风采部分：我设计了两个大盒子：conleft_bet和tem，conleft_bet主要写团队风采，和实现盒子的圆弧角度。为了实现左右分布，tem里面存在三个大盒子，前两个盒子在左边上下分布，在tem的左边，右边通过子决父相放另外装有内容的两个盒子。最终实现效果如下:图4.5实现上面效果的部分css样式：#content#news#news_left{position:absolute;width:476px;margin-left:14px;margin-top:13px;}#content#news#news_right{position:absolute;right:0;width:445px;margin-top:40px;}#content.conleft_bet{9width:957px;position:relative;border-bottom:1pxsolid#ccc;height:30px;margin-left:14px;}.name{margin-top:5px;}.tem{width:1000px;height:380px;/*border:1pxsolid#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样式如下：10#content#conright