浏阳红黄蓝亲子园网站设计与实现

1、湖南现代物流职业技术学院毕 业 设 计毕业设计题 浏阳红黄蓝亲子园 HYPERLINK 网站设计与实现 毕业设计类型产品设计 工艺设计 方案设计 姓名 屈利娟 班级 电商1201班 所属系部 物流信息系 专业 电子商务 指导教师 欧阳红巍 职称 讲师 完成时间 2014年 12月 15 日 湖南现代物流职业技术学院教务处制2014 年 12 月 15 日原创性声明内容本人郑重声明：所呈交的毕业设计，是本人在导师的指导下，独立进行研究工作所取得的成果。除文中已经注明引用的内容外，本设计不包含任何其他个人或集体已经发表或撰写过的作品成果，所引用相关企业、单位资料获得了对方的授权。对本文的研究做出重

2、要贡献的个人和集体，均已在设计中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。 毕业设计作者签名： 日期： 2014 年12 月15 日 毕业设计使用授权声明 本人完全了解湖南现代物流职业技术学院有关保留、使用毕业设计的有关规定，即：学校有权保留毕业设计并向国家主管部门或其指定机构送交设计的电子版和纸质版，有权将毕业设计用于非赢利目的的少量复制，并允许毕业设计进入学校图书馆、院系资料室被查阅，在世界大学城毕业设计网站公开，学院有权将毕业设计的内容编入有关数据库进行检索，可以采用复印、缩印或其他方法保存毕业设计。毕业设计作者签名：导师签名：日 期：2014 年12月15 日日 期：2

3、014 年12月15 日摘 要21世纪是一个信息高度发达、高速流通的时代，计算机的普及以及计算机网络的广泛应用，让普通人能够接触到比以往更多的知识。面对信息时代的信息大“爆炸”现象，怎样才能使教育跟上时代的步伐，而不至于被时代抛在后面？这是很多专家一直在思考的一个问题。红黄蓝是中国首家且规模最大的0-6岁一体化、综合性教育机构，作为一个以传播知识为主要职能的企业，建立一个属于企业自身的企业宣传官网是十分必要的事情。让网络成为企业新的宣传方式和展示窗口，不仅可为企业节省宣传营销费用，并且能达到更好的展示效果。官方网站代表不仅代表着红黄蓝亲子园的企业品牌形象，而且能够满足教师和家长的多种需求。关键

4、字：企业官网 网站 红黄蓝 目 录 TOC o 1-3 h z u HYPERLINK l _Toc421709482 第一章 网站设计背景 PAGEREF _Toc421709482 h 5 HYPERLINK l _Toc421709483 1.1 企业网站设计目的 PAGEREF _Toc421709483 h 5 HYPERLINK l _Toc421709484 1.2 网站建设需求分析 PAGEREF _Toc421709484 h 6 HYPERLINK l _Toc421709485 1.3 网站整体结构 PAGEREF _Toc421709485 h 7 HYPERLINK

5、l _Toc421709486 第二章 前期准备 PAGEREF _Toc421709486 h 10 HYPERLINK l _Toc421709487 2.1 素材收集整理 PAGEREF _Toc421709487 h 10 HYPERLINK l _Toc421709488 2.2 Banner设计 PAGEREF _Toc421709488 h 11 HYPERLINK l _Toc421709489 2.4 首页效果图 PAGEREF _Toc421709489 h 14 HYPERLINK l _Toc421709490 第三章 网页设计制作 PAGEREF _Toc421709

6、490 h 15 HYPERLINK l _Toc421709491 3.1 首页设计制作 PAGEREF _Toc421709491 h 15 HYPERLINK l _Toc421709492 3.2 其他页面设计制作 PAGEREF _Toc421709492 h 16 HYPERLINK l _Toc421709493 第4章 网站运营推广 PAGEREF _Toc421709493 h 21 HYPERLINK l _Toc421709494 4.1 电子邮件推广 PAGEREF _Toc421709494 h 21 HYPERLINK l _Toc421709495 4.2 IM即

7、时通讯工具推广QQ PAGEREF _Toc421709495 h 22 HYPERLINK l _Toc421709496 4.3 SNS社区营销推广微博、微信、论坛 PAGEREF _Toc421709496 h 24 HYPERLINK l _Toc421709497 总结 PAGEREF _Toc421709497 h 26 HYPERLINK l _Toc421709498 致谢 PAGEREF _Toc421709498 h 28 HYPERLINK l _Toc421709499 参考文献 PAGEREF _Toc421709499 h 29 第一章 网站设计背景1.1 企业网站

8、设计目的 企业上网是近年来企业界谈论较多的一个话题，企业对网络有兴趣是因为网络蕴藏着无限商机。一般而言，企业建立自己的企业官网具备以下优势：（1）充分运用网络资源。互联网能快速方便地将产品和服务的信息传向世界的每一个地方，全世界的客户都能通过互联网了解企业，所有的企业也可以借助互联网与世界各国的企业进行互通。 （2）与客户互动来往。企业建立网站，在网上开设信息咨询，就能同外部建立实时的信息交流渠道。 （3）建立企业形象。让别人看到自己，展示企业的实力。企业能够在国内和世界亮相，就是一次宣传企业、产品和服务的机会。 （4）主动占领先机。企业使用互联网是时代发展的趋势，企业要想跟得上时代的发展，务

9、必尽快上网，为了和竞争对手抢占先机，为了不落后于时代的发展，应该考虑建立企业网站。 （5）实现电子企业。电子企业（e-business），它描述的是一个组织通过电子联结与它的关键利益相关者开展工作的方式，以便更有效率和更有效果地实现其目标。企业建立网站，用销售的观点来看不但可以减少交易的中间环节、降低成本，还可以扩建成为网上销售和售前售后咨询服务中心。红黄蓝作为一个以教育为核心的企业，建立一个属于自己的官方网站是很有必要的事情。让网络为亲子园提供新的宣传方式和展示窗口，不仅可为企业节省品牌宣传营销费用，而且还能以最广泛的信息覆盖面达到更好的企业服务展示效果。1.2 网站建设需求分析通常来说，企

10、业做网站有两大需求，一个是利用网络开展营销活动，一个是运用网络为企业管理服务，简单说来就是网络营销和企业信息化。对于后者，一般适用于大型企业提高工作效率和协同办公，而对于广大的中小企业而言，则是开展网络营销。时代在变革，互联网的发展速度让人惊叹，用户数量疾速攀升！，截至2013年12月，中国网民规模已达到6.4亿人，占总人口中的比重53.4%。网络俨然已经成为国内最大的社区。图1.1 2013年中国网民数据图在这样的情形下，建设属于自己的企业网站显得非常重要。企业网站为企业带来了许多的利润和好处：（1）企业网站所面对的不再是处被动地位的读者 , 而是有目地占主动地位的客户。（2）容量大且不受限

11、制，产品资讯、图片等任何你想要提供给客户的资料都可录入。（3）成本低高收益这是企业寻求的目标。建设企业网站所需要的成本非常廉价，网站建设也几乎没有任何风险性。（4）属于自己的企业网站在现代及未来的资讯社会都是企业必不可少的企业识别标志之一。为了能够更好的宣传浏阳红黄蓝,让更多的家长了解浏阳红黄蓝, 网络无疑是一种很好的宣传方式，不仅可为企业节省宣传营销费用，而且还能达到更好的展示效果。企业官网是红黄蓝亲子园的企业品牌形象的展示，所以建设一个红黄蓝的官网是很有必要的.1.3 网站整体结构企业网站是宣传企业自身形象的一个窗口，是销售产品的一种渠道，是企业营销管理的一门计策。它不同于网络公司，而是利

12、用因特网把自己企业介绍给所有在因特网上的客户以达到宣传企业、展示产品的目的，并且是一个延伸企业服务范围的网络工具，企业通过网络可以利用多种方式向客户提供企业的产品、服务等，并收获世界上众多同行的信息。一个好的企业网站应当要以该企业的行业特色为页面主题, 展现企业的核心部分。红黄蓝企业官网的建站目的是进行企业品牌宣传、企业服务推介并提供育儿资讯，基于这一建站目的，本网站的结构主要由首页、关于红黄蓝、课程体系、育儿专区、留言区等几大部分组成。其网站结构如下：图1.2 网站框架结构图1、“首页”栏目：是关于企业公司形象、公司理念、公司文化的文 字介绍。 2、“关于红黄蓝”栏目：主要是宣传红黄蓝，通过

13、对红黄蓝的基本情况、文化理念、服务的了解，使浏阳红黄蓝亲子园为更多用户所熟悉、信赖。 3、“课程体系”栏目：介绍的是红黄蓝有哪些课程体系，适合哪个年龄段的宝宝学习，供家长作参考。 4、“育儿专区”栏目：为用户提供一些育儿知识，还提供论坛和空间的链接，里面都是关于红黄蓝的家长、宝宝的动态，家长们可以在里面互相进行交流、沟通。 5、“留言板”栏目：进行用户留言的收集，加强网站与用户之间的交流，吸取有益的建议，利于网站的改进。 这些组成部分构成了本网站的框架，使得网站建设不会变得杂乱无章。对于本网站的色调，主要选取的是以橙、绿色为主，再配以色彩鲜艳的颜色，给人一种活泼可爱、充满活力的感觉。如下图：图

14、1.3 网站框架效果图 第二章 前期准备2.1 素材收集整理 1、文字素材本网站的文字类素材主要是根据互联网、多媒体搜索关于红黄蓝的相关报道及介绍，对资料进行收集后，将众多资料仔细筛选、概括、归纳，并依据网站各栏目主题要求进行编辑，最后应用于网站。2、图片素材本网站图片素材是一部分通过实地拍摄，一部分则是通过互联网搜集。所有原始图片素材均采用Photoshop软件进行加工处理后应用于网站上。将收集好的图片素材用PS软件打开,选取好原图的某一部分进行图片处理,并调节好色差、大小、亮度，变成网站需要的图片。如下图：图2.1 图片素材处理2.2 Banner设计Banner的设计宣传主题要突出，让用

15、户能一眼就识别出来，并且要把它的重点主题凸显出来，形象鲜明并且能表达主要的情感思想或宣传主题。本网站的banner如图：图2.1 Banner图片banner的设计运用了JS特效，7张图片自动轮播让网站更为生动。JS特效代码如下：!-function newSlider()var dl=document.getElementById(dd).getElementsByTagName(li);var il=document.getElementById(ii).getElementsByTagName(li);var dlen = dl.length;var timer = null,index

16、 = 0,autoTime = 3000;/timer定时器，index当前显示的是第几个，autotime自动切换时间dl0.className=on,il0.className=on;/切换函数function play(j)index = j;stopAuto();/停止计时for (var i=0;idlen ;i+ )dli.className=;ili.className=;dlj.className=on;ilj.className=on;startAuto();/重新开始计时/mouseover表切换for ( var i=0;idlen ;i+ )dli.onmouseove

17、r=function(j)return function()play(j);(i)/click按钮切换for ( var i=0;idlen-1?0:index;play(index);,autoTime);/启动自动切换startAuto()window.onload=function()newSlider();/-2.4 首页效果图图2.2 首页效果图第三章 网页设计制作3.1 首页设计制作首页是网站的门面，是网站的形象展示，设计一个好的网站首页，不仅能够增强网友的体验度，而且还能体现企业实力。首页设计的原则：首先要吸引眼球,让用户能够快速找到自己需要的信息;设计好导航,把最吸引用户的精华

18、内容展示出来，方便用户使用。作为网站页面设计的关键组成部分,将文字、图片等视觉元素进行整合排列，一方面实现页面整体美观和谐的视觉效果，另一方面则达到让浏览者通过首页了解企业品牌实力、明了网站主题以及迅速获取信息的目的。本网站首页采用封面型布局，色彩绚丽富有童趣，很容易瞬间吸引浏览者。本网站首页提供的课程体系和育儿专区是精心设计与组合的，能帮助用户查找到需要的信息与服务，并实施点击浏览行为。本网站作为一个亲子类主题网站,它的色彩会比较倾向于明亮，特别的生动活泼。首页里面整体用两个大的DIV里面包含两个小的DIV，并在页面设计超链接，用户可根据需要进行点击浏览，导航栏目的制作：首先在ps里面制作好

19、图形，再点击插入-图像对象-鼠标经过图像，最终看到当鼠标没有放在图片上时是白色的，当鼠标经过图片时变为黄色的。如下图：图3.1 页面布局图3.2 其他页面设计制作 （1）“关于红黄蓝”页面：本栏目采用静态页面与图片轮播相结合，JS特效的运用为网页增加生动感,图片的播放向用户展示园所内部情况，主要目的是宣传红黄蓝，众多的链接点击展示了红黄蓝丰富多彩活动，是宝宝理想的家园。通过对红黄蓝的基本情况、文化理念、服务的了解介绍，使浏阳红黄蓝亲子园为更多用户所熟悉、信赖。如下图:图3.2 关于红黄蓝页面（2）“课程体系”页面：本页面是一个静态页面，以图文并茂的方式向用户介绍。主要采用创建模板技术实现，将做

20、好的一个页面创建为模板，保存在templates文件夹中，即可进行网页的循环编辑，该页面向用户展示的是适合婴幼儿学习的课程，为家长做一个详细的课程介绍。如下图：图3.3 课程体系页面（3）“育儿专区”页面：本页面运用了图片轮播效果，利用JS特效使网页更生动。为用户提供一些育儿知识，还提供论坛和空间的链接，里面都是关于红黄蓝的家长、宝宝的动态，家长们可以互相进行交流、沟通。如下图：图3.4 育儿专区页面（4）“留言板”页面：本栏目是在中间的DIV层里面插入要实现功能的表单，在下面插入的文本域中填写用户留言，下面的按钮可以进行留言的提交，可加强网站与用户之间的交流。吸取有益的建议，有利于网站的改进

21、。页面中还可以实现页面背景音乐的播放效果。如下图：图3.5 留言板页面第4章 网站运营推广4.1电子邮件推广电子邮件推广是利用邮件列表（客户名录）将信息通过Email发送到对方邮箱，以期达到宣传推广的目的。它范围广、操作简单、成本低廉，是一种非常好的联络工具。本网站实施邮件推广的具体实施过程如下：1、确定电子邮件推广的任务和目标；2、明确推广的目标客户；3、设计好主题和内容。在为红黄蓝进行推广时确定好邮件的营销目标，设置好内容和关键词，优化内容并使用简洁的语言，控制好邮件发送的频率、周期并及时回复发件人，做好后续的跟进服务。同时通过为客户提供一套演示资料让其充分了解公司的产品或服务，提供免费试

22、用、会员优惠等服务，邀请会员参加调查以及提供更加个性化的服务等多种方式提高网站关注量。图4.1 电子邮件推广4.2 IM即时通讯工具推广QQIM推广，又叫即时通讯推广，常见IM营销推广方法有QQ、MSN、飞信、雅虎通、GTALK、旺旺等，目前使用最多的是QQ方面的推广。这种推广成本低廉，而且是一种操作比较简单的推广方法。QQ推广的特点：1、精确度高，针对性强。2、操作简单：很多人都会使用。3、适用性强：用户群体庞大，推广的覆盖面广。4、低成本：几乎是不需成本。 本网站实施QQ的营销过程如下：QQ头像：要富有特色、正规、将红黄蓝的logo作为头像；QQ网名：将“浏阳红黄蓝早教园”设置为网名；完善

23、个人资料：资料要填写真实，个性签名、个人资料等设置为红黄蓝的企业文化和理念；获取良好的排名：“Q我吧“状态;开通QQ会员;名称前加字母空格;把名和头像设置为自已的业务或名称，列如“ 浏阳红黄蓝早教园”，增加曝光率能够排名靠前，增加露脸的机会从而提高推广的效果。在QQ群方面：要和群友建立感情,加一些关于准妈妈、育儿方面的群，聊一些关于关于家庭、育儿方面的知识，促进情感的交流；尽量加成员多的群；同时保持群内活跃度、每天发布一些育儿方面的小知识，偶尔发些有意思的照片，让气氛愉悦一些，多交朋友，拉近距离。传播少量多精的内容，定位准确，有针对性，保持好群内的活跃度。在QQ上通过群发、共享、签到发布浏阳红

24、黄蓝亲子园的信息、介绍红黄蓝。并把品牌关键词写入“好友印象”中，扩大宣传量，从而提高人气，增加关注量。图4.2 QQ好友推广图4.3 QQ群推广4.3 SNS社区营销推广微博、微信、论坛SNS即社会性网络服务，专指旨在帮助人们建立社会性网络的互联网应用服务。目前来说第二盛行既便宜又有用的推行方式是微博微信，进行微博微信推行的话，有一个条件是要粉丝量够多，并且要时刻在线博友进行互动、交流，所以真实做起来比较消耗精力与体力! 论坛推广通过文字、图片、视频等方式发布企业的产品和服务信息，从而加深目标客户对企业产品和服务的了解。最终达到宣传企业的品牌、加深市场认知度的网络营销活动”。对于红黄蓝的社区营

25、销推广运用的是软文的发布，在软文中带上网站的链接，可以取得很好的推广效果。把网站的名称和logo做成一个图片，在发帖或顶贴的时候带上这张有网站logo的图片进行宣传，为红黄蓝提高人气值，增加用户关注度。图4.4 微博推广图4.5 微信推广图4.6 论坛推广总结实践是检验真理的唯一标准,当然也是检验学习成果的标准。通过这次毕业设计让我对前面学过的许多课程有了更为深刻的理解，也是我对这三年所学的东西的一个综合体现。然而这次设计让我感受颇深，它让我体会到了理论知识结合实践的重要性。 首先，我选的课题是早教园网站设计，随之而来的就是我如何来确定该网站的主题,起初自己把问题想的过于简单了，总觉得只要我把

26、主题给确定了，其他的事情也就好解决了。然而却远远不是我想的那样，当我确定了主题着手来做时，发现自己根本不知从哪着手，到底用什么来布局网站，网站的整体风格又是怎样的，如何来规划等这一系列的问题都是我极需要解决的。我开始变得有点焦躁不安，带着这样的心情来做我的设计，其结果是几天下来网站的整体布局都还没有一个统一的概念。慢慢的我就静下心来反思自己这几天所做的，发现自己的方法完全错了，太急于求成，然后我整整自己思绪，一步步来，先准备资料，画出网站的设计框架图，把握整体布局，明确了网站的基本功能，再设计好网站各主要部分，将一些细节问题考虑周全后才开始动手，使得后来的工作才得以顺利进行。其次，对于DIV的

27、了解不是很透彻，所以自己只有去找资料，老师和网络给了我很大的帮助，在网络查找资料的日子里，面对网上无数信息的罗列，自己有时也会感到烦躁不安，但每当自己找到了自己想要的资料时，激动和兴奋接踵而至，心里满满的只有喜悦毫无疲惫，这段旅程看似荆棘密布，实则蕴藏着无尽的宝藏，让自己了解和学习了很多以前自己根本就不知道的知识。 但总的来说，这次的毕业设计为我即将踏入社会之前提供了一次锻炼的舞台。正像指导老师说的一样，它让我对几年来所学的专业课有了更为深刻的认识，使知识得到了融会贯通，得到了比以往学习任何一门课都更大的提高和进步。所谓活到老学到老，自己以后还要加强知识的学习，不断的完善自己。经过设计这个网站，这不仅仅是一次毕业设计，更重要的是在学习的过程中，脚踏实地，认真严谨，实事求是的学习态度，不怕困难、坚持不懈、吃苦耐劳的精神是我在这次设计中最大的收益。我想这是一次意志的磨练，是对我实际能力的一次提升，也会对我未来的学习和工作有很大的帮助。 这次毕业设计不能说得上是完美，但我觉自己已经尽了自己最大努力去完成，我想只要自己努力了就能对得起自己了。同时我也会在以后的时间里尽量的完善它，不断的对它进行升级，做出更好的成绩。 致谢大学时光已接近尾声，在此我想对我的父母、亲人们