美美达装饰网网站的设计与实现毕业设计论文.doc

毕 业 设 计毕业设计题 ： 美美达装饰网网站的设计与实现毕业设计类型： n产品设计 o工艺设计 o方案设计姓 名： 班 级： 所 属 系 部 ： 物 流 信 息 系 专 业: 电 子 商 务 指 导 教 师 ： 职 称： 完 成 时 间 : 摘要伴随着科技技术的发展，互联网早已渗透到商业的方方面面，从发布广告到宣传企业乃至招聘精英、网络销售等，现如今，网络已成为企业进行市场竞争的重要手段。利用网络这个大舞台建立企业自己的官网，不仅可以宣传企业的品牌，发布一些企业的新闻，还可以通过网络信息反馈并及时了解消费者需求，更好的把握商机。 本网站是一个装饰企业官网，通过关于我们、精品案例、装修百科、新闻资讯、诚聘英才等栏目，介绍了企业的基本信息、装修案例、新闻资讯等信息。本网站采用flash、dreamweaver、photoshop、javascript等技术实现。关键词：美美达 企业官网 装修公司 目录引言1第1章 网站设计背景21.1企业网站设计目的21.2网站建设需求分析31.3网站总体结构7第2章 前期准备92.1 素材收集整理92.2 LOGO设计92.3 Banner设计102.4 首页效果图11第3章 网页设计制作123.1 首页设计制作123.2 其他页面设计制作16第4章 网站推广194.1电子邮件推广194.2 IM即时通讯工具推广204.3 SNS社区营销推广21总结22致谢24参考文献25引言随着全球信息网络的发展，互联网发展得越发迅速，在世界上它已不仅仅是一种技术存在着，而是一种新的经营模式，它彻底改变了人类生活，学习，工作，娱乐的方式。随着21世纪信息时代的来临，企业官网已成为企业宣传的必要手段，它不仅能树立企业形象宣传企业品牌，还能推广企业的产品和服务，综合展示企业的实力。此外，企业官网对于拓展市场，增进企业与客户的联系，挖掘潜在客户也发挥着积极的意义。基于这些优势，越来越多的企业毅然的选择了建立自己的企业官网。第1章 网站设计背景1.1企业网站设计目的伴随着网络技术的不断发展,网络技术已经传遍了世界上的各个角落。企业利用网站宣传自己的形象,挖掘商机；个人利用网站展示个性风采,创建彼此沟通的桥梁，企业建立自己的官网非常有必要。眼下，越来越多的企业选择建立了自己的官网。那么建设企业网站有哪些作用呢？1、有利于树立企业形象。企业网站的作用类似于传统企业花费大量的精力说做的宣传广告，不同之处在于企业网站相对来说能容纳的信息量更大，企业可以随时随地都能把任何资讯或者是希望顾客说熟知的信息添加到网站中去，如装修知识、产品介绍等。此外，相对来说，建立企业网站的费用也比传统企业的要低的多，而且无地域限制。2、企业网站能容纳的信息也比传统企业多得多。企业官网最基本的功能就是能全面的通过各个方面展示我们公司的综合实力。企业可以随时把希望大家想了解的信息加入到网站中，如公司简介、特色的产品、公司的资质等，而且信息广泛，没有地域限制，可以随时随地的让顾客了解我们的企业。3、加强企业与用户的沟通，让企业更了解用户。我们可以在首页设计一个在线联系的浮动窗口，当顾客看到吸引她的，可以随时和我们的客服联系，可以增进与顾客的亲密度，及时关注客户的需求，更加高效的为顾客提供高品质服务，进而挖掘更多的潜在客户。此外，企业还可以通过调查功能了解用户的需求。不仅如此，企业还可以在企业网站上发布企业最新的动态，宣传最新的活动，让用户第一时间了解企业的第一手资讯。本网站属于信息发布型网站。力图通过美美达企业官网推广美美达装饰公司品牌，展现企业实力，增进企业与客户之间的沟通，让企业得到更好更快的发展。1.2网站建设需求分析 眼下，互联网时代的市场竞争已经从传统的产品、服务竞争延伸到信息化水平的竞争，建立企业网站，利用网络这一渠道进行企业的形象树立、信息发布、客户服务、等工作，成为众多企业应对这种竞争的一种有效策略。网站作为企业向用户和网民提供信息的一种方式，是企业开展网络推广及电子商务的基础，是反映企业形象和文化的重要窗口。本论文针对一家美美达装修设计公司，建立一个以企业宣传、家装服务推介为目的的企业宣传型网站，并力图充分利用本网站开展网络营销，大力宣传公司品牌及服务，让更多的客户了解，信任公司。本网站在建设前期主要从以下几个方面来展开需求分析：1、建站前要抓好前期市场调研分析。企业网站建设是建立在各种各样的需求上面的，要进行各方面的分析，这些需求往往来自于企业自身发展的需要。本网站建站之初，通过各种市场调研分析活动，比如：通过邮箱发送网络问卷调查、通过纸质传单发送市场问卷调查等方式收集了大量的市场调研信息，效果图如1-1所示图1-1 市场调查问卷表通过调查确定本网站的目标客户群主要是有装修需求的家庭及企事业单位。2、定位企业网站的目标及功能。本网站建设过程中通过对家装企业市场深入细致的调研，在网上浏览分析了许多家装企业网站的相关资料，比如：成都川豪装饰公司，北京龙发装饰官网等。参考了川豪官网，在类目上并做了一些修改，初步确定网站的主要类目是首页、装修百科、新闻资讯、关于我们、精品案例、招聘英才、联系我们。川豪装饰首页如图1-2所示。参考了北京龙发装饰，在整体布局上根据我们公司的需求做了一些修改，整体布局主要分为三部分，页头、主体。北京龙发装饰首页效果图如1-3所示。通过对市场装修企业官网的分析，过滤出了一个清晰、明确的美美达家装企业建站目标，即：面向企业单位及个人家庭装饰用户，宣传企业品牌、树立企业形象、发布装修知识、设立在线客户沟通渠道，并挖掘潜在客户。图1-2 川豪装饰效果图图1-3 龙发装饰效果图3、规划企业网站的内容和栏目。在互联网的信息海洋中脱颖而出，吸引更多的访问者、带来更多的点击量，是一个网站建设的最终目标。美美达家装企业网站根据之前确定的企业网站的目标及功能需求，紧密围绕用户这个中心，挑选锤炼出企业网站的一级栏目，即：关于我们、精品案例、装修百科、诚聘英才等栏目，并利用一定的逻辑结构有序地组织起来，构建出企业网站的框架结构。通常来说，企业网站的栏目应简洁明了，一般数量控制在5 至7 个，更多的栏目会让用户不容易记忆甚至感到反感，栏目名称的字数应控制在6 字以内，要准确地表达栏目的内容特色。本网站栏目名称设定遵循这一原则，每个栏目均为4个字左右，并且命名简洁清晰。一般认为网站栏目层次应控制在3 层左右，各层的子栏目数量也不宜过多，便于浏览、维护和管理。本网站作为企业官网为增强客户体验度，将网站层次控制在2层，这样使得浏览者能迅速找到所需信息，并且操作简单明了。4、分配好企业网站的内容和栏目后，应站在全局的角度考虑如下几个问题：（1）网站整体风格。根据市场调研的相关资料结合企业的类型、文化、理念等，创意企业网站的整体形象，包括网站标志、宣传口号、标准色彩及其它美工效果等。对于企业网站，一般直接选用企业的标志或注册商标作为网站标志、企业的广告词作为网站的宣传口号、企业标志、商标或产品包装等方面统一使用的颜色作为网站的标准色彩，以达到与企业的商业形象一致。（2）网站技术解决方案。根据企业的商务模式、资金状况、技术水平及网站的目标、功能、内容等，确定企业网站的硬软件解决方案，包括服务器建设、操作系统及相关使用技术的选择、网站安全性措施的制定等等。（3）网站建设费用预算。企业网站的费用主要包括租用网络线路、软硬件培训、网站管理人员配备等所需的费用，应一一明细列出。1.3网站总体结构本网站是面向有装修需求的客户群体，介绍公司的基本情况，家装服务。其目的是树立企业形象宣传企业品牌。基于以上定位，网站划分为以下几个栏目：关于我们、精品案例、装修百科、新闻资讯、诚聘英才、注册、登录、公司简介、公司资质、设计团队、联系我们。总体结构如图3-1所示：美美达装饰首页关于我们精品案例装修百科新闻资讯诚聘英才注册登录公司简介公司资质设计团队联系我们图1-3 美美达装饰网站总体结构图1、关于我们栏目：主要介绍企业的基本情况、获奖荣誉、设计核心的技术团队及企业的联系方式。2、精品案例栏目：用于展示企业的特色装修项目的效果图，以便浏览者参考。3、装修百科栏目：用于发布各类型的装修知识。4、诚聘英才栏目：用于发布企业的人才供求信息，展现企业的总体实力。第2章 前期准备2.1 素材收集整理对网站的总体进行了布局设计后，就可以进行下一步的建设，在此之前，还有一份非常重要的工作要做，那就是搜集素材。本网站设计所需的素材图片大部分源于网上搜集，比如：在百度图库等。在网络上收集好素材图片后，通过Photoshop软件进行产品图片的处理，首先把搜集的素材加入到photoshop里面，然后通过各种特效把搜集的素材图片处理到自己想要的效果，处理完毕后将素材图片进行重命名，保存在images文件夹里，便于在后期的网站设计中使用。网站中的logo，是企业商标的展示。本网站首先采用logo设计软件进行logo设计再根据本企业的理念加以修改，然后通过Photoshop软件根据网站首页的设计布局进行大小的调整。网站所应用到的动态特效是通过在网络搜集JavaScript代码，然后针对网站主题及所需对代码进行修改，最后应用于网站中。如日期的更新、浮动在线QQ等。2.2 LOGO设计每个网站都有代表其企业形象的标志Logo。Logo又称为徽标，它起到了对企业识别和推广的作用。美美达装饰企业官网的标志，采用几何图形和文字组合，简单明了，方便易记。采用彩虹拱形渐变的几何图形，寓意“风雨过后见彩虹”。彩虹给人带来的感觉是美丽的，装饰就是把这个世界装点得更美丽，如果只是几何图形则显得太单调，为此在此基础上加上了公司的名称，寓意企业最终呈现的作品是能让消费者满意的，并让用户一目了然企业品牌名称。Logo图如图2-2所示图2-5 logo效果图2.3 Banner设计Banner也就是横幅广告，它主要用于宣传企业，体现中心意旨。网页中的banner信息代表着一个企业的形象，所以应该表现得大气、端庄。一个好的banner设计，可以吸引浏览者访问，增加网站的点击量。本网站的banner主要放在首页的中部位置，用于宣传本企业的特色产品和优惠活动。先采用photoshop软件把宣传的内容用图片的形式展现出来，图文结合，使活动更具说服力。把图片做出来之后，再使用flash软件，把图片以动态轮播的形式展现出来，然后保存，接着把生成的SWF的文件用deamweaver网页制作软件把文件插入到布局的位置中。这样设计，使得整个网站看起来不那么单调，吸引浏览者的眼球，使客户从而了解企业的实力，进一步挖掘潜在客户。其banner效果图如2-6所示：图2-6 Banner效果图2.4首页效果图图2-7首页效果图 第3章 网页设计制作3.1 首页设计制作3.1.1 页面布局建立企业网站，页面布局很重要。一个好的布局可以让用户迅速找到需要的信息，大大提高网站的易用性。本网站首页的整个布局分为三部分，分别是页头、主信息区、页尾。采用CSS样式和表格嵌套相结合的布局实现方式。整个首页分为页头、主信息区和页尾三个部分组成。页头包括banner和导航栏。主信息区包括企业广告、文字信息、精品案例。页尾包括企业的版权信息、地址及其联系方式。除此之外首页还用到了浮动在线QQ。使得整个布局更有企业的氛围。首页布局如图所示。图3-1 首页布局图3.1.2 风格定位对于一个网站来说，色彩搭配是很重要的。打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。好的色彩搭配能在一瞬间吸引浏览者的眼球，简单的说。一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。色彩的冲击力是最强的，很容易给用户留下深刻的印象。本网站的搭配主色为白、蓝、红、三种颜色。白色代表纯洁、纯真、朴素、神圣、明快。天蓝色代表开阔、豁达、永恒、理智、纯净、纯洁。红色代表激情、活力、热诚、进取。充分代表了一个企业该有的气质和形象。给客户留下深刻的印象。3.1.3 Javascript特效本网站为增强首页的动态效果，使用了一些JS特效，使得首页看起来更生动活泼，从而吸引浏览者的眼球。具体来说，有下列动态特效：1、浮动QQ在首页添加了浮动QQ的JS特效，方便浏览者和企业客服联系，拉近企业和客户的联系，使得企业网站看起来更专业，整个网站看起来更美观，也方便客户及时和我们的客服联系，及时了解客户的需求。给客户提供更加优质的服务。浮动QQ部分代码如下：kfguin=3712381;ws=; companyname=美美达装饰; welcomeword=您好,欢迎光临美美达装饰官方网站，请问,有什么可以帮到您的吗?; type=1;效果图如下： 图3-2 浮动QQ效果图2、日期更新网站在首页上添加日期更新的JS特效，客户在浏览网页的同时，又能方便的关注时间信息。部分代码如下： !- Begin var enable=0; today=new Date(); new Date();var day; var date;var time_start = new Date();var clock_start = time_start.getTime(); if(today.getDay()=0) day=星期日 if(today.getDay()=1) day=星期一 if(today.getDay()=2) day=星期二 if(today.getDay()=3) day=星期三 if(today.getDay()=4) day=星期四 if(today.getDay()=5) day=星期五 if(today.getDay()=6) day=星期六 yr = today.getYear(); if (yr 1000) yr+=1900; date=yr+年+(today.getMonth()+1)+月+today.getDate()+日 ;document.write(+date); document.write(day+); 效果图如下： 图3-3 日期更新效果图3.2 其他页面设计制作3.2.1 精品案例页面精品案例网页主要展示本企业有特色的装修案例。其页面布局形式和首页一致，大致分为页头、主信息区和页尾。本页面主信息区分为五块，分别是现代风格家装案例展示、简欧风格家装案例展示、地中海风格家装案例展示、田园风格家装案例展示、新中式风格家装案例展示。每一种风格家家装展示采用几何形的布局，通过图片的拼接将企业的精品案例很好的展示了出来，页面整体布局美观，让人一目了然。网页效果如图3-4所示。图3-4 精品案例网页效果图3.2.2 关于我们页面关于我们网页采用的是网页模板技术实现。先建立一个模板网页，其中模板网页中设计了页头和页尾，而中间主信息块部分则设置为可编辑区域。“关于我们”页面主信息区分成两部分，一部分是“关于我们”的四个二级栏目，分别是“公司简介”、 “公司资质”、 “设计团队”和“联系我们”，通过这些栏目把公司的信息很好的进行展示。此外，还加入了一些flash动画，使得网页看起来更美观，让整个网页看起来不再那么单调。另一部分是精品案例栏目和四个二级栏目的信息区域。整体效果如图3-5所示：图3-5 关于我们效果图第4章 网站推广 4.1电子邮件推广电子邮件推广常用的方法包括邮件列表、电子刊物、新闻邮件、会员通讯、专业服务商的电子邮件广告等。如果邮件发送规模比较小，可以采取一般的邮件发送方式或邮件群发软件来完成。如果发送规模较大，就应该借助于专业的邮件列表发行平台来发送。邮件内容要吸引人，不能让人反感。同时邮件要简洁，不能太啰嗦，更不能发垃圾邮件。在本网站建设初期，首页可以给熟悉的朋友或群发送邮件，推广美美达企业，简单的介绍一些我们美美达公司的特色产品，优惠活动，等到有一定的口碑以后，就利用朋友来宣传我们的企业，这样一传十，十传百就能达到推广的效果了。为什么首先要选择身边的朋友呢，这样既成本比较少，又能达到推广的目的。如图4-1所示： 图4-1 电子邮件推广4.2 IM即时通讯工具推广IM即时通讯工具推广又叫即时通讯营销。IM即时通讯工具推广一般有两种应用方式：第一种是企业通过IM营销通讯工具，如QQ动态，发布一些产品信息和促销信息，或者可以通过图片发布一些网友喜闻乐见的表情，同时加上企业要宣传的标志。第二种是网络在线交流，中小企业在建立企业网站时一般会有即时通讯在线，这样潜在的客户如果对产品或者服务感兴趣可以及时与在线的商家联系。腾讯QQ是目前大家最喜爱的社交工具，利用QQ的欢迎度，在QQ动态发布公司的一些活动优惠信息，再搭配一张图，这样图文结合一起推广，这样更能吸引浏览者的眼球。通过这种方式，在社交平台宣传我们的企业信息，推广企业的品牌，我们可以先用PS工具，把我们的特色产品的优惠活动，以图片的形式展现出来，视觉的效果对浏览者的吸引比较大，这样就能增加我们公司的知名度，也能达到宣传的效果。效果图如4-2所示：图4-2 QQ社交工具推广效果图4.3 SNS社区营销推广SNS，即社会性网络服务，专指旨在帮助人们建立社会性网络的互联网应用服务。 SNS营销，是随着网络社区化而兴起的营销方式。SNS社区在中国快速发展时间并不长，但是SNS现在已经成为备受广大用户欢迎的一种网络交际模式。通过病毒式传播的手段，让产品被更多的人知道。 本网站可以可以采用微博社区的知名度，在博客上发表一些有用的软文来宣传我们的网站，比如说一些装修的经验，可以给客户做一些参考，再在文章里面宣传我们的品牌。针对一些新手不知道装修的人来说，这种装修知识和经验对需要装修的人群是很有帮助的，他们也会在网页搜索这类信息，必要时，把我们的品牌写进去，这样既能被顾客说熟知，又能增加软文的曝光率。效果图如下图所示。 图4-3 微博推广总结通过这次毕业设计让我对前面学过的许多课程有了更为深刻的理解，也是我对这三年所学的东西的一个综合体现。首先，我选的课题是美美达装饰网网站的设计与实现，起初自己把问题想的过于简单了，总觉得只要我把首页随便乱搞一下，其他的页面也就好做了。然而却远远不是我想的那样，当我确定了主题着手来做时，发现自己根本不知从哪着手，到底用什么来布置界面，网站的整体风格又是怎样的，如何来规划等这一系列的问题都是我极需要解决的。我开始变得有点浮躁不安，带着这样的心情来做我的设计，其结果是几天下来网站的整体布局都还没有一个统一的概念。慢慢的我就静下心来反思自己这几天所做的，发现自己的方法完全错了，太急于求成，然后我整整自己思绪，一步步来，先在网上查找装饰有关的资料，在草稿纸上画出首页的布局，然后研究整个网站的配色效果，再思考怎样布局才是最好的，明确我的网站要实现哪些功能，实现什么效果，最终，我把首页的初稿定了下来，其次是其他页面，到底要不要用模板，我把这些东西想好后，做后面的就简单多了，思绪也清晰了。总的来说，这次的设计为我即将踏入社会之前提供了一次锻炼的机会，它让我对几年来所学的知识有了更为深入的理解，使知识得到了融会贯通，得到了比以往学习任何一门课都更大的提高和进步。所谓活到老学到老，自己以后还要加强学习，不断的完善自己。这个企业宣传网站，对于我来说它这不仅仅是一次设计，更重要的是在学习的过程中，脚踏实地，实事求是的学习态度，不怕困难、坚持不懈、吃苦耐劳的精神是我在这次设计中最大的收益。这次设计不能说得上是完美，但我觉自己已经尽了自己最大努力去完成，我想只要自己努力了就能对得起自己了。同时我也会在以后的时间里尽量的完善它，不断的对它进行升级，做出更好的成绩。致谢时间匆匆，三年的大学生活即将结束，我也已经从一个懵懂的小姑娘变成一个有责任心有担当的女性来。在这期间，有苦有甜，有笑有泪，三年了，学到的不仅仅是课堂上的知识，更是很多做人的道理。有些知识真的是课本上学不到的，需要自己用心领悟，所以我现在回想起来，很感谢，曾经帮助过我，在我迷茫时指导迷津的伙伴们，老师们，在生活上帮助过我的同学们。感谢我的母校物流学院，让我有学习的机会；感谢所有的任课老师，在你们的谆谆教导下，让我学到这么多的知识。感谢曾经在我学习上帮助过我的老师们、同学们，谢谢在我遇到难题时，耐心的指导。感谢我的指导老师，她对我进行了无私的指导和帮助，不厌其烦的帮助进行论文的修改和改进。感谢我的室友们，我在遇到困难，伸出了援助之手。感谢电商班的所有同学们，对我学习上、生活上的帮助。谢谢你们。参考文献1张月.网站界面设计.北京：北京理工大学出版社 20062姜恩正/黄静慧.设计师谈成功网页设计原则.电子工业出版社.20063屠忠俊.网络广告教程.北京:北京大学出版社，20074尼葛洛庞帝.数字化生存.胡泳，范海燕译.海口:海南出版社，19975中国互联网络信息中心.中国互联网络发展状况统计报告.20076 I. R. I色彩研究所.设计师谈网页配色.电子工业出版社.200224