爱尚宝贝孕婴网站的设计与实现
由于网络的普及化，人们对网络越来越依赖以及喜欢上网络带来的便利。消费者对网上购物很是追求与热爱，新一代的年轻人尤其的接受与喜爱这种消费模式，利用网络来宣传爱尚宝贝育婴店的文化理念。网站的具体实现过程中使用Photoshop软件，借鉴其他网站的设计风格的基础加上爱尚宝贝育婴店的文化特色，设计出网页的具体效果， Dreamweaver编辑软件及JavaScript的运用，可以为网站添加特效及整体效果，实现的网站将进一步有利顾客对公司的产品、销售及服务的了解，能够及大地拓展客户渠道。在本论文中进行了详细的阐述网站界面设计、DIV布局、JavaScript网站特效等方面。
目 录
一、引言 1
（一）课题现状分析 1
（二）网站内容 1
1.爱尚宝贝简介 1
2.首页介绍 1
3.子页介绍 1
二、网站开发工具介绍 2
（一）Photoshop软件 2
（二）Dreamweaver软件 2
三、网站的页面设计 2
（一）逻辑结构图 2
（二）DIV的框架 3
1.主页的div框架 3
2.二级子页的div框架 3
3.三级子页的div框架 4
（三）LOGO设计 5
1.创意来源 5
2.具体效果 5
（四）首页效果设计与实现 5
1.首页页面 5
（五）子页效果设计与实现 6
1.二级子页页面 6
2.三级子页页面 7
3.注册页面 9
4.登录页面 9
四、JavaScript特效 10
五、网站的兼容性测试 12
总结 12
参考文献 14
附录 15
一、引言
（一）课题现状分析
现在的社会是信息发展社会，网络以及成为商家与消费者必不可缺少的买卖渠道。为什么说企业破局的必由之路是向互联网转型呢？很简单，人们开始在越来越多的网上选择购物。举个网上购物例子，在2015年，淘宝“双十一”的成交额竟然达到
*好棒文|www.hbsrm.com +Q: *351916072*
九百多亿元；2014年全中国的家乐福销售额为四百多亿元，2014年沃尔玛全中国销售额为七百多亿元，都比淘宝的一天交易额低。网络的趋势逼迫消费渠道的转折。周鸿祎是360公司的创始人，他曾在一本《我的互联网方法论》的书这样说道，我感觉他说的很有道理和意义：“任何一家企业都可以找最强的企业竞争对手进行竞争，但是有一个对手你是打不过的，那就是趋势。趋势一旦爆发，就不会是一种线性的发展。它的积蓄力量会于无形，突然最后爆发出雪崩般的效应。如果不愿意改变其力量任何人或者物都会在雪崩面前被毁灭、消亡，市场会把它边缘化。”并且现在国家放宽二胎政策，这更有利于吸引商家多孕婴这方面的商机，现在的生活成本提高，消费者对孕妇婴儿饮食起居等方面会更加重视，而且网络宣传便利以及范围广，更重要是网上销售成本低，是许多商家最在意方面。
（二）网站内容
1.爱尚宝贝简介
爱尚宝贝网实现了网上售卖孕婴产品，并拓宽人们对孕婴产品了解，让人们更好地适应这个信息发展的时代。具体内容有：对孕婴产品简介、分类、价格等进行相关的介绍。其实，大多人对孕婴产品都不是很了解，所以在网站中对孕婴产品进行了介绍，以方便顾客了解孕婴产品。在网站的制作中，logo设计、登录与注册界面和JavaScript的页面动画设计以及各个链接和相关技术的开发与应用等。
2.首页介绍
首页对孕婴产品分类（首页、奶粉、辅食、纸尿裤、妈妈用品以及正品保证）进行列表以及登录、注册还有JavaScript的动画制作，本网站背景颜色是白色。一般网站设计的主色调使用白色，白色给人一种非常干净、简洁与优雅的感觉，而且大部分人都是喜欢的或者可以说容易接受白色作为背景颜色。白色明亮、干净、畅快、朴素、雅致而且能够突出其他颜色，吸引访客注意，显示重要的内容，从而达到网站整体舒适而又干净利索的效果。
3.子页介绍
子页对孕婴产品分类进行详细介绍使访客充分了解企业产品，又添加更详细的产品相关链接，影响访客浏览网页的因素有很多，在网页上，首先传达信息的，一般为感性的因素，譬喻文本和图像，而这些因素会影响访客的阅读轨迹。网页上的图片容易吸引访客容易被访客接受，根据一些科学研究，在报纸中，往往访客倾向于从图片中获取信息，然后才是阅读文字的内容。网页上的文字相对于图片同样来说没有图片更容易吸引访客，在浏览网页时，访客首先就会注视网页上的图片。访客在处理信息时，一般都是先处理图形图像，所以图片和图形影响访客形成不同的视觉层次。经过恰当的放置这些文本和图像等视觉元素，创建一个“视觉层次”，能够很自然的引导访客阅读网页，并且使用图片更加直观的显示产品，便利访客的选择。
二、网站开发工具介绍
（一）Photoshop软件
用于图像制作和处理的Photoshop 就是一个专业软件，设计师和平面设计爱好者对于这个软件，是一个不可或缺的常用工具，广大用户很快被它的易学易用和强大的功能特性而征服了。我的logo设计就在Photoshop里完成的。在JavaScript动画特效制作中，碰到这个问题，就是每张图片需要大小相同。先打开Photoshop软件，继而打开需要的图片，从图像菜单栏找到下级中的图像大小，进行对应的赋值。现在社会对于图片加工离不开这种软件，所以越来越多人掌握Photoshop软件并运用该软件进行图像创作。
（二）Dreamweaver软件
Dreamweaver 作为一款专业的网页设计与制作软件，它支持代码、拆分、实时试图等多种形式来创作、编写和修改网页。
三、网站的页面设计
（一）逻辑结构图
逻辑结构是对整个系统从思想的分类，把系统分成若干个逻辑单元，分别实现自己的功能。从设计者方面说，逻辑结构图是基础，条理清晰，可以明确去设计网页整体思路，然后一步步去制作与实现，有条有理。不会盲目没有计划的去设计，既节约了时间，也提高了效率。（见图31）
图31 网站逻辑结构图
（二）DIV的框架
1.主页的div框架
主页是一个网站的门面，做的不要太复杂，但也要其网站的主要内容列举出来，排列有序，能够让访客容易明白网站的主要介绍的内容和和使用功能。（见图32）
Logo
Search and shop(查询和购物车区)
Login and register（登录注册区）
Navigation (导航)
Main body（主体部分）
Copyright(版权区)
图32 首页div框架
2.二级子页的div框架
网站的子页既保持首页需要的logo、导航以及版权等网站固定的东西，也要有自己的特色，主体需要列举对应导航需要的产品内容或者其他相关网站的内容。（见图33）
Logo
Search and shop(查询和购物车区)
目 录
一、引言 1
（一）课题现状分析 1
（二）网站内容 1
1.爱尚宝贝简介 1
2.首页介绍 1
3.子页介绍 1
二、网站开发工具介绍 2
（一）Photoshop软件 2
（二）Dreamweaver软件 2
三、网站的页面设计 2
（一）逻辑结构图 2
（二）DIV的框架 3
1.主页的div框架 3
2.二级子页的div框架 3
3.三级子页的div框架 4
（三）LOGO设计 5
1.创意来源 5
2.具体效果 5
（四）首页效果设计与实现 5
1.首页页面 5
（五）子页效果设计与实现 6
1.二级子页页面 6
2.三级子页页面 7
3.注册页面 9
4.登录页面 9
四、JavaScript特效 10
五、网站的兼容性测试 12
总结 12
参考文献 14
附录 15
一、引言
（一）课题现状分析
现在的社会是信息发展社会，网络以及成为商家与消费者必不可缺少的买卖渠道。为什么说企业破局的必由之路是向互联网转型呢？很简单，人们开始在越来越多的网上选择购物。举个网上购物例子，在2015年，淘宝“双十一”的成交额竟然达到
*好棒文|www.hbsrm.com +Q: *351916072*
九百多亿元；2014年全中国的家乐福销售额为四百多亿元，2014年沃尔玛全中国销售额为七百多亿元，都比淘宝的一天交易额低。网络的趋势逼迫消费渠道的转折。周鸿祎是360公司的创始人，他曾在一本《我的互联网方法论》的书这样说道，我感觉他说的很有道理和意义：“任何一家企业都可以找最强的企业竞争对手进行竞争，但是有一个对手你是打不过的，那就是趋势。趋势一旦爆发，就不会是一种线性的发展。它的积蓄力量会于无形，突然最后爆发出雪崩般的效应。如果不愿意改变其力量任何人或者物都会在雪崩面前被毁灭、消亡，市场会把它边缘化。”并且现在国家放宽二胎政策，这更有利于吸引商家多孕婴这方面的商机，现在的生活成本提高，消费者对孕妇婴儿饮食起居等方面会更加重视，而且网络宣传便利以及范围广，更重要是网上销售成本低，是许多商家最在意方面。
（二）网站内容
1.爱尚宝贝简介
爱尚宝贝网实现了网上售卖孕婴产品，并拓宽人们对孕婴产品了解，让人们更好地适应这个信息发展的时代。具体内容有：对孕婴产品简介、分类、价格等进行相关的介绍。其实，大多人对孕婴产品都不是很了解，所以在网站中对孕婴产品进行了介绍，以方便顾客了解孕婴产品。在网站的制作中，logo设计、登录与注册界面和JavaScript的页面动画设计以及各个链接和相关技术的开发与应用等。
2.首页介绍
首页对孕婴产品分类（首页、奶粉、辅食、纸尿裤、妈妈用品以及正品保证）进行列表以及登录、注册还有JavaScript的动画制作，本网站背景颜色是白色。一般网站设计的主色调使用白色，白色给人一种非常干净、简洁与优雅的感觉，而且大部分人都是喜欢的或者可以说容易接受白色作为背景颜色。白色明亮、干净、畅快、朴素、雅致而且能够突出其他颜色，吸引访客注意，显示重要的内容，从而达到网站整体舒适而又干净利索的效果。
3.子页介绍
子页对孕婴产品分类进行详细介绍使访客充分了解企业产品，又添加更详细的产品相关链接，影响访客浏览网页的因素有很多，在网页上，首先传达信息的，一般为感性的因素，譬喻文本和图像，而这些因素会影响访客的阅读轨迹。网页上的图片容易吸引访客容易被访客接受，根据一些科学研究，在报纸中，往往访客倾向于从图片中获取信息，然后才是阅读文字的内容。网页上的文字相对于图片同样来说没有图片更容易吸引访客，在浏览网页时，访客首先就会注视网页上的图片。访客在处理信息时，一般都是先处理图形图像，所以图片和图形影响访客形成不同的视觉层次。经过恰当的放置这些文本和图像等视觉元素，创建一个“视觉层次”，能够很自然的引导访客阅读网页，并且使用图片更加直观的显示产品，便利访客的选择。
二、网站开发工具介绍
（一）Photoshop软件
用于图像制作和处理的Photoshop 就是一个专业软件，设计师和平面设计爱好者对于这个软件，是一个不可或缺的常用工具，广大用户很快被它的易学易用和强大的功能特性而征服了。我的logo设计就在Photoshop里完成的。在JavaScript动画特效制作中，碰到这个问题，就是每张图片需要大小相同。先打开Photoshop软件，继而打开需要的图片，从图像菜单栏找到下级中的图像大小，进行对应的赋值。现在社会对于图片加工离不开这种软件，所以越来越多人掌握Photoshop软件并运用该软件进行图像创作。
（二）Dreamweaver软件
Dreamweaver 作为一款专业的网页设计与制作软件，它支持代码、拆分、实时试图等多种形式来创作、编写和修改网页。
三、网站的页面设计
（一）逻辑结构图
逻辑结构是对整个系统从思想的分类，把系统分成若干个逻辑单元，分别实现自己的功能。从设计者方面说，逻辑结构图是基础，条理清晰，可以明确去设计网页整体思路，然后一步步去制作与实现，有条有理。不会盲目没有计划的去设计，既节约了时间，也提高了效率。（见图31）
图31 网站逻辑结构图
（二）DIV的框架
1.主页的div框架
主页是一个网站的门面，做的不要太复杂，但也要其网站的主要内容列举出来，排列有序，能够让访客容易明白网站的主要介绍的内容和和使用功能。（见图32）
Logo
Search and shop(查询和购物车区)
Login and register（登录注册区）
Navigation (导航)
Main body（主体部分）
Copyright(版权区)
图32 首页div框架
2.二级子页的div框架
网站的子页既保持首页需要的logo、导航以及版权等网站固定的东西，也要有自己的特色，主体需要列举对应导航需要的产品内容或者其他相关网站的内容。（见图33）
Logo
Search and shop(查询和购物车区)
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/656.html
