维莱玩具网站的设计与开发
本课题是完成维莱玩具网站的介绍，主要内容包括网站的功能模块介绍、网页页面设计、玩具种类、网站实现代码等。本文主要说明了制作该玩具网站的目的是宣传维莱玩具品牌和传播文化，其中也加入了一些个人对于目前玩具市场的需求的看法。客户通过在点击该网站，可以了解维莱的品牌文化、玩具类型、以及参加网站上发布的一些活动。该课题通过使用Photoshop来制作宣传海报并且美化一些图片，用Dreamweaver来实现一个基于Web的网上玩具品牌的制作。最终完成的网站还有一个专门发布活动的页面，方便网站管理者与顾客之间的交流，该网站符合WEB标准的原创网站。
目 录
一、引言 1
二、网站功能模块设计 1
（一）总体设计 1
（二）页面布局 1
（三）功能介绍 2
三、网站页面设计 2
（一）logo的设计 2
（二）首页设计 3
（三）玩具种类 3
（四）合作企业 3
（五）关于我们 4
（六）亲子活动 5
（七）创意活动 6
四、网站实现 6
（一）导航的实现 6
（二）首页滚动条幅实现 7
（三）图片滑动放大特效 7
六、总结 9
致谢 10
参考文献 11
一、引言
维莱玩具网站是为了迎合企业宣传的需要，突显企业品牌文化而设计制作的，现在的市场上有各式各样的网站推出，却鲜少有网站会在乎品牌文化这一回事儿。当然，销量固然重要，然而消费者相信和依赖的品牌才是一个成功的品牌，而维莱网站建设就是以满足消费者的角度为出发点的，通过建立出鲜明的品牌定位，同时利用网络传播环境，让消费者产生对维莱这个品牌在思想上的高度认可，从而创造消费者的对维莱这个品牌的仰。基于这个背景，制作了《维莱玩具网站的设计与开发》这个网站。
二、网站功能模块设计
（一）总体设计
在整个网站的开发设计中，使用DreamweaveCS5用于html语言的编写与设计，在网页中间也插入了javascript语言编写一些特效，如左右滚动的图片、鼠标滑动后放大的图片以及可以
*好棒文|www.hbsrm.com +Q: *351916072*
查找路线的地图名片等。也同时使用了Photoshop8.0，目前Photoshop8.0是较为强大的绘图工具，它还可以绘制艺术图形，还能采集图像并对它们进行修改或修复，也可以通过自己的想象把许多分散的图片制作成一张新的图片。维莱网站的logo和五个主页面上的部分海报都是由Photoshop8.0独立设计的，页面的布局比较简单、清晰，使消费者一面了然，页面的分辨率为1024px，整个网站有三种js前段效果和一段视频插入，页面色彩主色调为黑白灰，给人一种简单大方的感受，而页面的内容及图片却是五彩斑斓的，这样也符合小孩子的审美。该网站五大功能模块包括：首页、玩具种类、合作企业、亲子活动、创意活动。
（二）页面布局
该网站主要采取了3种页面布局，第一种是首页的布局，首页的页面布局较为简单，主要以图片滚动的形式呈现，如图21所示，第二种是玩具种类页面布局，主要是通过简单的点击导航条到达所需了解页面的方式，介绍各种产品信息，如图22所示。第三种布局方式是左右双栏，有主导航和二级导航，用于网站发布信息，如图23所示。
Logo
导航栏
滚动图标
版权所有
图21 维莱网站首页布局
Logo
导航栏
横条广告
二级导航
主体内容
版权所有
图22 维莱网站玩具种类页面布局
Logo
导航栏
二级导航
横幅广告
主体内容
版权所有
图33 维莱网站亲子活动页面布局
（三）功能介绍
网站的首页：通过滚动着的大图给消费者视觉冲击从而加深消费者对品牌的印象。
玩具种类：展现出12种不同的玩具类型供消费者挑选。
合作企业：与维莱玩具合作的企业及相关介绍。
亲子活动：介绍了一些可供消费者报名参加的活动以及网站发布的新闻和资讯。
创意活动:可以满足消费者为自己的小孩设计制作玩具的愿望，也可以为企业寻找有创意有想法的玩具设计师。
三、网站页面设计
（一）logo的设计
该网站的logo就是用Photoshop设计的，如图31所示。该网站的logo在每页主导航栏的最左边，首页中的logo加入在图片中，通过放大logo，突出视觉效果。维莱玩具，维代表思维思维，莱的谐音leo。维莱，即未来。简称为WELO ：we love！这个logo英文简洁。寓意本产品可以给孩子们的童年带来开心快乐。logo采用花边字体和粉色着色，字体上面还有一排可爱的小朋友，这样可以吸引顾客们的喜爱。
图31 维莱网站logo
（二）首页设计
该网站的首页采用了由三张图片形成的横向滚动的javascript特效而设计的，刚点击进入网站给消费者一种视觉的冲击，其效果图如图32所示。
图32 维莱网站首页
（三）玩具种类
该主页面下共有12个子页面，主要分为：益智玩具、毛绒玩具、遥控玩具等，介绍了12种不同的玩具类型，其页面效果图33所示。其中，玩具种类的主页面通过玩具定制活动链接到创意活动，可以定制属于自己的独一无二的玩具。
（四）合作企业
在该主页上，鼠标滑过合作企业的logo于是logo放大，这种特效不仅可以吸引消费者，而且使消费者加深印象。在该页面上还使用地图名片定位了企业的所在地点供消费者查看。该页面共有8个子页面，包括澳贝、乐高、hape、费雪、智高、银辉、迪士尼、万代。如图34所示。
图33 维莱网站玩具种类页面
（五）关于我们
该网页主要是强调了企业的品牌文化，主要包括培养思维、关爱成长、健康生活、聪明智慧、快乐成长五个主题，并在子页面上插入了企业的宣传视频供消费者欣赏。效果图如图45所示。
图34 网站地图名片页面
图35 关于我们页面
（六）亲子活动
该页面主要是不定期更新一些亲子类的游戏活动以及新闻供家长们关注，通过链接点击后可以看到详细内容，其效果图如图46所示。
图36 亲子活动页面
（七）创意活动
该页面是整个网站最吸引消费者之处，通过对玩具市场大环境的分析，更多的儿童喜欢有创意的、智能的、神奇的玩具，可以根据自已的想法而改变成自己想要的样子的玩具，其中乐高玩具就是一个成功的例子。根据这一点，维莱玩具为了能够做的比市场上的玩具更加出色，设计开发了创意玩具专栏，让更多人参与设计玩具，集思广益，激发出更多创意玩具的灵感，开发出孩子们更喜欢的玩具。消费者只要对设计、创意感兴趣的，均可以报名参加玩具设计活动，通过这样的活动不仅可以满足设计爱好者的愿望，更能达到宣传的效果使品牌文化更加深入人心。其效果图如47所示。
目 录
一、引言 1
二、网站功能模块设计 1
（一）总体设计 1
（二）页面布局 1
（三）功能介绍 2
三、网站页面设计 2
（一）logo的设计 2
（二）首页设计 3
（三）玩具种类 3
（四）合作企业 3
（五）关于我们 4
（六）亲子活动 5
（七）创意活动 6
四、网站实现 6
（一）导航的实现 6
（二）首页滚动条幅实现 7
（三）图片滑动放大特效 7
六、总结 9
致谢 10
参考文献 11
一、引言
维莱玩具网站是为了迎合企业宣传的需要，突显企业品牌文化而设计制作的，现在的市场上有各式各样的网站推出，却鲜少有网站会在乎品牌文化这一回事儿。当然，销量固然重要，然而消费者相信和依赖的品牌才是一个成功的品牌，而维莱网站建设就是以满足消费者的角度为出发点的，通过建立出鲜明的品牌定位，同时利用网络传播环境，让消费者产生对维莱这个品牌在思想上的高度认可，从而创造消费者的对维莱这个品牌的仰。基于这个背景，制作了《维莱玩具网站的设计与开发》这个网站。
二、网站功能模块设计
（一）总体设计
在整个网站的开发设计中，使用DreamweaveCS5用于html语言的编写与设计，在网页中间也插入了javascript语言编写一些特效，如左右滚动的图片、鼠标滑动后放大的图片以及可以
*好棒文|www.hbsrm.com +Q: *351916072*
查找路线的地图名片等。也同时使用了Photoshop8.0，目前Photoshop8.0是较为强大的绘图工具，它还可以绘制艺术图形，还能采集图像并对它们进行修改或修复，也可以通过自己的想象把许多分散的图片制作成一张新的图片。维莱网站的logo和五个主页面上的部分海报都是由Photoshop8.0独立设计的，页面的布局比较简单、清晰，使消费者一面了然，页面的分辨率为1024px，整个网站有三种js前段效果和一段视频插入，页面色彩主色调为黑白灰，给人一种简单大方的感受，而页面的内容及图片却是五彩斑斓的，这样也符合小孩子的审美。该网站五大功能模块包括：首页、玩具种类、合作企业、亲子活动、创意活动。
（二）页面布局
该网站主要采取了3种页面布局，第一种是首页的布局，首页的页面布局较为简单，主要以图片滚动的形式呈现，如图21所示，第二种是玩具种类页面布局，主要是通过简单的点击导航条到达所需了解页面的方式，介绍各种产品信息，如图22所示。第三种布局方式是左右双栏，有主导航和二级导航，用于网站发布信息，如图23所示。
Logo
导航栏
滚动图标
版权所有
图21 维莱网站首页布局
Logo
导航栏
横条广告
二级导航
主体内容
版权所有
图22 维莱网站玩具种类页面布局
Logo
导航栏
二级导航
横幅广告
主体内容
版权所有
图33 维莱网站亲子活动页面布局
（三）功能介绍
网站的首页：通过滚动着的大图给消费者视觉冲击从而加深消费者对品牌的印象。
玩具种类：展现出12种不同的玩具类型供消费者挑选。
合作企业：与维莱玩具合作的企业及相关介绍。
亲子活动：介绍了一些可供消费者报名参加的活动以及网站发布的新闻和资讯。
创意活动:可以满足消费者为自己的小孩设计制作玩具的愿望，也可以为企业寻找有创意有想法的玩具设计师。
三、网站页面设计
（一）logo的设计
该网站的logo就是用Photoshop设计的，如图31所示。该网站的logo在每页主导航栏的最左边，首页中的logo加入在图片中，通过放大logo，突出视觉效果。维莱玩具，维代表思维思维，莱的谐音leo。维莱，即未来。简称为WELO ：we love！这个logo英文简洁。寓意本产品可以给孩子们的童年带来开心快乐。logo采用花边字体和粉色着色，字体上面还有一排可爱的小朋友，这样可以吸引顾客们的喜爱。
图31 维莱网站logo
（二）首页设计
该网站的首页采用了由三张图片形成的横向滚动的javascript特效而设计的，刚点击进入网站给消费者一种视觉的冲击，其效果图如图32所示。
图32 维莱网站首页
（三）玩具种类
该主页面下共有12个子页面，主要分为：益智玩具、毛绒玩具、遥控玩具等，介绍了12种不同的玩具类型，其页面效果图33所示。其中，玩具种类的主页面通过玩具定制活动链接到创意活动，可以定制属于自己的独一无二的玩具。
（四）合作企业
在该主页上，鼠标滑过合作企业的logo于是logo放大，这种特效不仅可以吸引消费者，而且使消费者加深印象。在该页面上还使用地图名片定位了企业的所在地点供消费者查看。该页面共有8个子页面，包括澳贝、乐高、hape、费雪、智高、银辉、迪士尼、万代。如图34所示。
图33 维莱网站玩具种类页面
（五）关于我们
该网页主要是强调了企业的品牌文化，主要包括培养思维、关爱成长、健康生活、聪明智慧、快乐成长五个主题，并在子页面上插入了企业的宣传视频供消费者欣赏。效果图如图45所示。
图34 网站地图名片页面
图35 关于我们页面
（六）亲子活动
该页面主要是不定期更新一些亲子类的游戏活动以及新闻供家长们关注，通过链接点击后可以看到详细内容，其效果图如图46所示。
图36 亲子活动页面
（七）创意活动
该页面是整个网站最吸引消费者之处，通过对玩具市场大环境的分析，更多的儿童喜欢有创意的、智能的、神奇的玩具，可以根据自已的想法而改变成自己想要的样子的玩具，其中乐高玩具就是一个成功的例子。根据这一点，维莱玩具为了能够做的比市场上的玩具更加出色，设计开发了创意玩具专栏，让更多人参与设计玩具，集思广益，激发出更多创意玩具的灵感，开发出孩子们更喜欢的玩具。消费者只要对设计、创意感兴趣的，均可以报名参加玩具设计活动，通过这样的活动不仅可以满足设计爱好者的愿望，更能达到宣传的效果使品牌文化更加深入人心。其效果图如47所示。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/650.html
