家电网站设计网页设计课程小组报告.docx
《家电网站设计网页设计课程小组报告.docx》由会员分享，可在线阅读，更多相关《家电网站设计网页设计课程小组报告.docx（19页珍藏版）》请在冰点文库上搜索。
家电网站设计网页设计课程小组报告
南京工业大学
网页设计课程设计报告
小组工作报告
学院：
经济与管理学院
专业：
电子商务
组别：
第一组
小组成员：
学号
姓名
2204120201
陈凯雯
2204120202
陈维维
2204120203
邓琦
2204120125
朱青
2204120134
赵金从
成绩：
优良中及格不及格
2015年07月
第一部分小组分工及分工计划
第一阶段：
行业网站对比评析
朱青：
行业网站的目标定位评析
邓琦：
行业网站的版面的总体设计和栏目设置评析
陈维维：
行业网站提供的信息是否准确以及网页的制作结构评析
陈凯雯：
行业网站的色彩和导航评析
赵金从：
行业网站的交互式设计评析
第二阶段：
讨论确定网站设计方案，进行网站建设
朱青：
网站首页，对网站进行整理
陈凯雯：
网站子页的公司简介，图片收集
邓琦：
网站子页的联系我们，PS图片
赵金从：
网站子页的新闻资讯以及下级页面
陈维维：
网站子页的产品展示以及下级页面
第三阶段：
域名申请，网站上传，撰写报告
朱青：
域名申请
邓琦、陈凯雯：
网站上传
陈维维：
撰写小组报告和PPT
赵金从：
演讲PPT
、
第二部分小组家电网站前端设计报告
一、选定的2家标杆网站名录
1.1行业背景分析
随着现代技术革命及信息技术的发展，世界家用电器制造业发生了巨大的变化：
全球化趋势不断加强，抢占世界市场成为各跨国制造公司的首要战略。
在全球范围，家电工业仍属于朝阳工业，据推测，世界家电销售额每年以平均5﹪的速度增长，世界主要家电产品需求额每年以6.6﹪速度增长。
巨大的国际市场为中国家电业的发展提供了巨大的发展空间，中国的家电产业是中国最具有国际竞争力和优势的制造部门之一，主要产品产量位居世界的前列，这使得中国崛起成为世界性的家电制造基地之一。
家电行业是一个全球化特征比较明显的行业，中国以其低廉和高素质的劳动力成本优势、巨大的潜在国内市场、良好的投资环境、完善的供应链体系等综合优势成为国际家电巨头们心中最理想的投资场所之一。
跨国家电企业的进入，也推动着中国本土家电行业的发展。
今天中国的家电产业已经成为了世界家电行业中不可小视的力量。
1.2选定的标杆网站
序号
公司名称
网址
选择理由
国内
海尔集团
海尔是世界白色家电第一品牌，世界大型家用电器第一品牌，中国最具价值品牌，世界品牌500强企业。
国外
惠而浦
惠而浦公司是世界上最大的大型家用电器制造商之一，其白色家电产品已连续11年保持全球市场占有率领先。
二、标杆网站分析
本次分析我们选择了国内的海尔官网以及国外的惠而浦官网，从各个方面对其进行分析比较。
图1海尔官网
图2惠而浦官网
2.1网站目标定位
海尔锁定的目标消费群是现代家庭，热衷于使用互联网的客户群体。
海尔在网站推出高端定制品牌，不以价格作为卖点，而是要追求产品的高科技含量、多功能一体化、使用简单、完善的售后服务等全方位的产品带来的增值效果，以创造出能够为企业和消费者增值的有价值订单为目的。
与海尔不同的是，惠而浦的目标是创造世界最好的家用电器，使生活更加简便和快乐。
它在网站上主要强调的是简单与便捷性，注重打造家庭氛围。
2.2网站总体设计
海尔的网站页面体现了简洁明快、结构清晰的特点，以白色为主色调，给人和谐、舒适的感觉。
网页的设计风格都基本一样，包括网页的背景、颜色、字体、布局等都非常相似，也体现了简洁明快、风格一致的网页设计。
网站的每一页面的左上方都有醒目的海尔企业的LOGO，颜色鲜明，吸引眼球，起到一种很好的宣传作用。
惠而浦的网站在网页设计上，首页创意点重点体现在Flash的表现上，将惠而浦经典产品结合温馨的家庭氛围，运用Flash动画的效果生动的展示出来，在未进入内页的情况下就可对产品留下深刻印象。
网站整体策划设计风格比较简约、清爽；精致、大气，呈现惠而浦家电的特质及品牌形象，同时在细节的把握上，严谨、细腻、生动，更好的契合惠而浦的目标。
2.3网站栏目设置
海尔网站栏目结构设计清晰、合理、层次分明、功能齐全。
网站的栏目：
个人产品、商用产品、服务专区、海尔商城、人才招聘、关于海尔。
在每一个栏目下有的还有二级、三级栏目。
菜单和导航相比于前段时间更清晰简单了，说明网站的更新速度还是蛮快的。
网站还建立了自己的站点地图，不至于浏览者迷失，且还有自己的站内搜索引擎，也可以提供很多的便捷。
总体来说，网页信息的排放位置比较合理。
惠而浦的网站比起海尔来说少了些许图片，显得更加简洁、具有逻辑性。
各项栏目都很明确，一级二级栏目连接也凸显人性化。
惠而浦的网站基本上不需要下拉，所有的基本上都显示在一个页面上，海尔与其比较起来就显得页面过多，但是海尔的栏目设置也因此显得更醒目一些。
2.4网站内容
海尔的信息内容比较丰富，分为若干个子栏目：
海尔简介、海尔产业、企业文化、海尔在全球、海尔研发、海尔大学、投资者关系、公益事业等这些信息完全可以让一个对该公司一无所知的人看了以后，会对海尔有一个详细的了解。
在产品信息上，它列出了所有系列和各种型号的产品，对产品有着详细的介绍，而且有的还配有图片资料、视频文件。
另外用户的服务信息范围广泛，包括产品知识、下载中心、在线报修、视频指南、服务政策、用户感言、星级服务，其中“服务与支持”、“联系我们”等都建立了企业与客户经常性联系的渠道，体现了真诚为客户服务，为客户解决问题，尽可能满足客户的要求和需求的理念。
惠而浦的网站内容更多的侧重在对产品的介绍，更注重的是用户购买产品的便捷性。
信息内容方面没有海尔的广泛，主要介绍了相关技术、优势等。
2.5网站制作结构
海尔与惠而浦基本上都属于是三级结构的网站，其中海尔的链接结构如表所示：
表1海尔结构
2.6网站色彩与导航
海尔网站的色彩以白色为主，穿插一些彩色的图片，使人看上去心情愉悦。
网页具有清晰的导航和站内搜索系统设计，可以引导用户浏览想要浏览的每一页、每一商品。
惠而浦网站首页也是以白色为主，穿插的图片运用Flash动画的效果生动的展示出来。
惠而浦网站的导航与站内搜索系统设计与海尔不相上下。
导航的位置对于站点的结构与整体布局有着举足轻重的作用，两个网站都采用了多种导航，增加了页面的可访性。
2.7网站交互式设计
海尔官网整体网站设计比较人性化，能够符合用户习惯。
网站浏览者基本能够顺利找到自己所需要的网页，获取所需信息。
通过点击“了解更多产品”进入产品专区页面，这样既保证了首页的简洁性，也可以向访问者充分展示了海尔的丰富产品链及产品的详细情况。
但是，从产品专区页面无法重新返回官网首页，如果不小心关掉首页又需要重新浏览首页就会很麻烦，给访问者带来不好的用户体验。
此外，网站访问者想直接进入购买页面还需要至少二次点击才能进入到相关页面，在现在崇尚高效快捷的消费情况下，这同样不利于给访问者良好的用户体验。
为了体现对消费者的重视以及更方便地满足网站访问者的需求，可以增加“售后服务”这一栏目。
大多数用户都更习惯在官网首页就能进入“售后服务”页面。
惠而浦的设计在这一方面就相对合理，惠而浦的首页可以很容易的看到进入商城以及售后服务的链接，相对于海尔更具有人性化，契合了现代快节奏的生活方式。
三、小组虚拟网站设计与规划
3.1网站名称
惠家家电有限公司
3.2Logo设计
由于公司名称是惠家，主要注重要以人为本。
所以logo主要设计成房子的形状，下面放上公司的英语名称。
图3公司logo
3.3需求分析
对于前端用户，通过网站能够了解到企业的动态和已经公开发布的产品，对自己需要的产品进行查询商品等。
对于后端系统管理员，通过系统能够进行主页的更新、商品管理等。
3.4网站目的
宣传公司对外形象；提供客户咨询服务、解决方案等；辅助公司产品营销。
3.5网站定位
①以企业形象宣传和产品营销为导向
②结构清晰，层次分明
3.6网站页面风格
①风格要简洁方便，有色彩和视觉冲击，但要求协调、页面流畅，不可以给用户凌乱的感觉；
②保证浏览者在较短的时间内看到最想看到的内容；
③注重页面和banner、flash和图片的协调；合理安排首页的信息，避免信息过多分不清主次，造成信息冗余，引起用户的反感。
3.7网站色彩方案
色彩要与VI协调（红色），页面要求简洁；搭配图片、banner、flash等装饰，使得页面有灵活性。
本次设计的家电网站是以红色为主题的。
之所以选定主色调为红色，是因为考虑到公司强调的以“家”为本的理念，而红色具有强烈的感染力，具有明亮、健康、热烈、温暖、欢乐以及尊贵的色感，然后通过调整透明度或者饱和度，就是色彩进行变淡、加深或渐变的处理，产生新的红色的近似色彩，使网页色彩看起来既统一又富有层次感。
3.8网站信息架构
信息架构可以从组织系统、标签系统、导航系统和搜索系统四个部分来构造。
我们的网站就是用大众分类法来组织信息，整体的架构是以家电为中心，然后通过公司简介、产品展示、新闻资讯、联系我们等几个分类栏目来详细介绍网站内容。
表2组织结构图
标签系统就是在网站中是如何表示信息的，标签是有效的网站表现中不可缺少的一部分。
我们选择了导航系统选项与文字型标签两类。
在网站的头部和底部都设置了相应的标签，用户能快速地获取自己所需要的信息。
我们的家电网站选用的是全站与区域式相整合的导航系统类型。
既有整体又有部分，相辅相成。
导航系统的流畅性在网站中起着至关重要的作用。
3.9CSS方案
对于格式的部分CSS代码如下，其他详细代码位于文件夹里：
@charset"utf-8";
*{
margin:
0px;
padding:
0px;
}
ul,li{list-style-type:
none;}
a{text-decoration:
none;border:
none;}
img{border:
none;}
.clear{clear:
both;}
body{
font-family:
"微软雅黑";
font-size:
16px;
background:
#FFFFFF
}
#wrapper{width:
100%;margin:
0auto;}
#iitop{width:
100%;background:
#eeeeee;height:
26px;border-bottom:
1pxsolid#dcdcdc;}
.iitop{width:
1000px;margin:
0auto;}
#login{float:
left;color:
#333;line-height:
30px;}
#logina{color:
#333;}
.topnav{float:
right;color:
#333;}
.topnava{color:
#333;line-height:
30px;}
/*head--------*/
#iheader{width:
100%;background:
url（../images/header.jpg）repeat-x;height:
115px;}
.head{width:
1000px;margin:
0auto;}
#top1{float:
left;width:
300px;padding-left:
30px;padding-top:
20px;}
#top2{float:
right;width:
340px;padding-top:
10px;margin-left:
300px;}
.top2{padding-top:
20px;}
#menu{width:
100%;background:
url（../images/menu.jpg）repeat-x;height:
50px;}
.menu{height:
50px;width:
1000px;margin:
0auto;}
.menuul{padding-left:
20px;}
.menuulli{float:
left;width:
140px;height:
50px;text-align:
center;background:
url（../images/menu.jpg）no-repeatrightcenter;}
.menuullia{height:
50px;line-height:
50px;font-size:
15px;color:
#fff;width:
140px;display:
block;background:
url（../images/cion01.gif）no-repeatleft4px;font-family:
"微软雅黑"}
.menuullia:
hover{color:
#e9ff7e;background:
#b31412;}
#imain{width:
1000px;margin:
0auto;padding-top:
10px;}
.imain_t{width:
100%;padding-bottom:
10px;}
.imain_t1{width:
1000px;margin:
0auto;}
.title{padding:
54px040px305px;}
.text{width:
1000px;margin:
0auto;}
.company{width:
304px;float:
left;}
.news{width:
265px;float:
right;margin-left:
10px;}
.pic{background:
url（../images/bg.jpg）no-repeat;overflow:
hidden;height:
30px;line-height:
30px;color:
#fff;padding-left:
15px;}
.pic1{background:
url（../images/bg.jpg）no-repeat;overflow:
hidden;height:
30px;line-height:
30px;color:
#fff;padding-left:
15px;}
.itext1{padding-top:
10px;font-size:
12px;font-family:
'宋体';color:
#666;line-height:
24px;padding-left:
10px;padding-right:
10px;background:
url（../images/text1.jpg）no-repeat;min-height:
210px;}
.itext1ul{padding-left:
10px;padding-bottom:
20px;float:
left;}
.itext1ulli{background:
url（../images/dian.jpg）no-repeatleftcenter;}
.itext1ullia{font-size:
12px;font-family:
'宋体';color:
#666;line-height:
24px;padding-left:
20px;}
.itext1img{float:
left;padding:
010px00;}
.ewm{float:
right;}
3.10网站JavaScript方案
以下是JavaScript代码，其他详细代码位于文件夹里
vartransitionstext=newArray;
transitionstext[0]="progid:
DXImageTransform.Microsoft.Fade（duration=1）";
transitionstext[1]="progid:
DXImageTransform.Microsoft.Blinds（Duration=1,bands=20）";
transitionstext[2]="progid:
DXImageTransform.Microsoft.Checkerboard（Duration=1,squaresX=20,squaresY=20）";
transitionstext[3]="progid:
DXImageTransform.Microsoft.Strips（Duration=1,motion=rightdown）";
transitionstext[4]="progid:
DXImageTransform.Microsoft.Barn（Duration=1,orientation=vertical）";
transitionstext[5]="progid:
DXImageTransform.Microsoft.GradientWipe（duration=1）";
transitionstext[6]="progid:
DXImageTransform.Microsoft.Iris（Duration=1,motion=out）";
varpersistlastviewedmsg=1;//
varpersistmsgbehavior="onload";//setto"onload"or"onclick".
vartickdelay=3000;
vardivonclick=（persistlastviewedmsg&&persistmsgbehavior=="onclick"）?
'onClick="savelastmsg（）"':
'';
varcurrentmessage=0;
functionchangetickercontent（）{
crosstick.style.filter=transitionstext[Math.floor（Math.random（）*transitionstext.length）];
if（crosstick.filters&&crosstick.filters.length>0）
crosstick.filters[0].Apply（）;
//compatibility
if（typeof（tickerids）=="undefined"）{
crosstick.innerHTML=tickercontents[currentmessage];
}else{
crosstick.innerHTML="";
varcurrentVessel=document.getElementById（tickercontents[currentmessage]）;
varchildE=currentVessel.firstChild;
if（childE&&childE.nodeType==1）{
crosstick.appendChild（childE.cloneNode（true））;
childE=childE.nextSibling;
}
while（childE）{
if（childE.nodeType==1）{
crosstick.appendChild（childE.cloneNode（true））;
}
childE=childE.nextSibling;
}
}
if（crosstick.filters&&crosstick.filters.length>0）
crosstick.filters[0].Play（）;
currentmessage=（currentmessage==tickercontents.length-1）?
currentmessage=0:
currentmessage+1;
varfilterduration=（crosstick.filters&&crosstick.filters.length>0）?
crosstick.filters[0].duration*1000:
0;
setTimeout（"changetickercontent（）",tickdelay+filterduration）;
}
四、小组虚拟网站建设与发布
4.1网站首页设计
该部分主要用于展示公司网站的基本框架和基本功能，通过主页用户可以清晰地看到网站的整体布局，从网站可以感觉到该公司结构分明，管理有条不紊。
首页运用图片、幻灯片等设计，使网站在能够提供给访问者最需要的信息之外还能拥有赏心悦目的感觉。
这样整个网站兼具拥有可观性和实用性的特点。
另外，主页还放置了新闻动态、热门产品以及联系我们三个小界面，其中热门产品可以实现滚动，还可以连接到我们的产品中心，不但美观，而且方便快捷，利于用户体验。
图4网站首页
在网站的底部，设置了链接，点击文字即可链接相关页面，这里也优化了用户体验。
图5首页底部
4.2公司简介设计
该部分主要用于介绍公司背景、服务内容、获得荣誉、营销范围以及核心价值观等。
访问者能够在网上直接了解公司的基本状况，便于树立企业形象。
因为我们主要是想进行产品推广，所以在这一页面上放置了产品列表，以便于用户想要了解相关产品。
图6公司简介页面
4.3产品展示设计
该部分主要用于公司产品的展示，以达到推广销售的目的。
产品展示部分设置了产品种类，点击就可以链接到相关种类的产品页面。
另外，点击产品中心的任一产品都可以进入如图8所示的产品介绍的界面，用户可以在那里了解到产品的相关信息。
每一个产品的底部还设有相关产品的展示，用户可以通过点击进行选择了解。
图7产品展示1
图8产品展示2
4.4新闻资讯设计
该部分主要用于介绍公司最新新闻，既可通过本部分让用户了解到公司相关信息，同时也可以通过此栏目侧面烘托公司的规模以及相关规范。
另外我组还在新闻列表下设置了家电购买常识以及家电养护常识，帮助用户了解关于家电的必要知识。
其中企业新闻、购买常识以及养护常识里面都设置有相关产品的链接，例如图10企业新闻中R290环保冷媒空调的新闻页面下设置有此类产品的链接。
图9新闻资讯1
图10新闻资讯2
4.5联系我们设计
该部分主要将公司的地理坐标告诉用户，用户可以通过公司地址找到我们。
此外还公布公司的联系人、电话、邮箱等联系方式，便于用户查询以及与公司进行沟通，完善售后服务。
图11联系我们
4.6注册免费域名和免费主机空间并上传小组网站
1、在米特网注册一个账号，账号注册成功之后会有赠送的积分，这些积分的用途就是为接下来申请域名做铺垫。
2、注册成功之后，在首页，如图12所示，输入自己想注册的域名：
图12域名注册
3、接下来，系统会自动查询你所输入的域名是否可以注册，如果可以注册，就会出现图13所示结果：
图13域名注册
4、利用获取的积分来兑换确认注册域名，如图14所示：
图14积分使用
5、域名注册成功，可以进入后台查看，如图15所示：
图15注册成功
6、我们注册的域名是。
由于遇到技术方面的问题，网站无法上传。
第三部分课程设计总结
1.1设计遇到的问题
我组在进行网页设计与制作的过程中，并不是一帆风顺的，总会遇到很多在想象不到的错误：
1、整个页面如何做
升级会员 