精品童装网上直销店网站设计
摘要： 精品童装网上直销店主要经营各类童装，16年春装热卖、夏季新品、秋季热卖、衬衫T恤以及各种反季商品。本网站主要通过使用HTML5技术进行静态页面的设计，编辑大量的CSS样式文件来设计和美化页面，利用Photoshop技术对网店所需的各类图片进行PS处理，利用Dreamweaver工具进行页面编辑和设计，利用JQuery实现页面特效，给用户更好的体验效果。精品童装网上直销店的设计严格按照电子商务模式流程进行设计和实现，从会员注册、登录，选购商品，加入购物车下单，及查询订单等操作流程进行UI页面设计，其中穿插了各个页面操作。本论文将着重介绍精品童装网上直销店的需求分析、详细设计和页面设计等开发流程。
目录
一、前言 2
二、需求分析 3
（一）网站需求分析 3
（二）网站功能模块设计 4
（三）开发工具及开发技术介绍 4
1、Dreamweaver开发工具简介 4
2、Photoshop开发工具简介 5
3、HTML5技术简介 5
三、详细设计 5
（一）网站主题风格的设计 5
（二）网站logo图标的设计 7
（三）网站页面布局的设计 7
四、网站实现 8
1、网站首页页面设计 8
2、各类型展示页面设计（所有宝贝） 11
3、16春款热卖页面设计 14
4、夏季新品页面设计 14
5、全场优惠页面设计 15
6、新用户注册页面设计 16
7、用户登录页面设计 17
8、我的购物车页面设计 18
9、新订单页面设计 19
10、联系我们页面设计 20
五、总结 21
六、致谢 21
七、参考文献 21
一、前言
21世纪的今天，随着计算机技术和网络技术的日益更新和发展，基于计算机技术的智能化管理软件如雨后竹笋般崛起，各类智能化应用软件因其操作便捷、高效、安全等特点被越来越多的人们所接受和采纳。科技的进步，带动生产力的发展，近年来，随着马云的阿里巴巴在美国的
*好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
成功上市，以淘宝、京东为代表的各类B2B、B2C电子商务销售模式越来越涌起，网购的销售模式也被人们所喜欢喝追求。
精品童装网上直销店就是基于计算机技术和网络技术而设计的，响应电子商务发展的潮流，结合我大学所学的静态页面设计技术而设计的一款电子商务销售静态页面。
通过这样一套静态页面的设计，让我更加熟悉软件开发的生命周期和流程，系统的学习前端页面的各个工具和技术，更好地利用JQuery和HTML技术来设计页面，积累开发经验，争取以更好的姿态走入社会，迎接新的工作和挑战。
需求分析
（一）网站需求分析
本网站开发主要为电子商务购物模式前台页面设计，因此对于网站需要分析而言，主要为网上购物的操作流程，因此，本网站的需求分析主要有：
新用户可通过在网上购物时进行会员注册操作，因此需要设计会员注册页面，主要内容为用户注册表单的设计。
注册会员用户购物时需要进行会员登录操作，故需要设计会员登录页面，主要设计内容为会员登录表单。
会员用户可浏览网店的各类商品信息，故需要设计各类商品展示页面，本网站主要设计了对16年春装热卖、夏季新品、秋季热卖、衬衫T恤以及各种反季的商品进行静态页面设计操作。
会员用户在购物流程中可查看商品详情信息，故本网站设计了查看商品详细信息的静态页面。
会员用户在购物过程中可将商品加入购物车，因此本网站设计了加入购物车操作页面。
会员用户在购物过程中可操作购物车，对购物车记录进行下单操作，因此本网站设计了查看购物车记录的静态页面。
会员用户可购物过程中可进行下单操作，因此本网站需设计会员下单静态页面。
会员用户可查看会员订单，未处理订单等信息，因此本网站针对实际需要，设计了定金浏览页面。
会员用户可查看最新优惠活动信息，因此本网站设计了查看最新优惠活动信息静态页面。
（二）网站功能模块设计
根据网站需求分析，我们可以得出精品童装网上直销店静态页面设计主要实现以下功能模块，具体如图21所示：
图21 网站功能模块图设计
开发工具及开发技术介绍
1.Dreamweaver开发工具简介
Dreamweaver借助共享型用户界面设计， 在 Adobe Creative Suite 4 的不同组件之间更快、更明智地工作。使用工作区切换器可以从一个工作环境快速切换到下一个环境。其具体功能有CS6新增功能、自适应网格、改善FTP 性能、Catalyst 集成、增强型 jQuery 移动支持、CSS3 转换，即将CSS 属性变化制成动画转换效果，使网页设计栩栩如生。在您处理网页元素和创建优美效果时保持对网页设计的精准控制。
2、Photoshop开发工具简介
从功能上看，该软件可分为图像编辑、图像合成、校色调色及特效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。
HTML5技术简介
HTML 5有两大特点:首先，强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签，更可以用于HTML5游戏的开发。其次，追加了本地数据库等Web应用的功能。
详细设计
网站主题风格的设计
根据第二章的系统需求分析，我们可以确认本网站开发的各个页面，在详细设计阶段，我们首先要确认设计的网站主题风格，即页面母版，确定好母版之后，其他页面或者子页面根据母版的风格进行设计，即可保证整套页面风格统一，格调一致，给用户的视觉体验较强。因此首先在设计的过程中，我首先需要确定网站的主题风格，本网站主要是在线销售精品童装，主要用户群体均为母亲一类，偏向女性化，用户群体年龄层大多存在30~40岁之间，因此，本网站的主题色调可使用暖色调，力求给用户一种较为亲切的感觉。
另外网店出售的衣服均为童装一类，因童装大多颜色鲜艳，款式新颖，在加上PS处理，故服装的图片颜色较为明亮，考虑这一因素，网站的背景色采用透明白色为主，可以更加突出各类服装的特色和亮点。因为方便用户操作，网站沿袭传统购物网站的风格模式，为用户提供导航菜单，方便用户进行操作，导航菜单主要用于链接各类型的服装信息，用户功能菜单主要用于用户个人信息的操作。
目录
一、前言 2
二、需求分析 3
（一）网站需求分析 3
（二）网站功能模块设计 4
（三）开发工具及开发技术介绍 4
1、Dreamweaver开发工具简介 4
2、Photoshop开发工具简介 5
3、HTML5技术简介 5
三、详细设计 5
（一）网站主题风格的设计 5
（二）网站logo图标的设计 7
（三）网站页面布局的设计 7
四、网站实现 8
1、网站首页页面设计 8
2、各类型展示页面设计（所有宝贝） 11
3、16春款热卖页面设计 14
4、夏季新品页面设计 14
5、全场优惠页面设计 15
6、新用户注册页面设计 16
7、用户登录页面设计 17
8、我的购物车页面设计 18
9、新订单页面设计 19
10、联系我们页面设计 20
五、总结 21
六、致谢 21
七、参考文献 21
一、前言
21世纪的今天，随着计算机技术和网络技术的日益更新和发展，基于计算机技术的智能化管理软件如雨后竹笋般崛起，各类智能化应用软件因其操作便捷、高效、安全等特点被越来越多的人们所接受和采纳。科技的进步，带动生产力的发展，近年来，随着马云的阿里巴巴在美国的
*好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
成功上市，以淘宝、京东为代表的各类B2B、B2C电子商务销售模式越来越涌起，网购的销售模式也被人们所喜欢喝追求。
精品童装网上直销店就是基于计算机技术和网络技术而设计的，响应电子商务发展的潮流，结合我大学所学的静态页面设计技术而设计的一款电子商务销售静态页面。
通过这样一套静态页面的设计，让我更加熟悉软件开发的生命周期和流程，系统的学习前端页面的各个工具和技术，更好地利用JQuery和HTML技术来设计页面，积累开发经验，争取以更好的姿态走入社会，迎接新的工作和挑战。
需求分析
（一）网站需求分析
本网站开发主要为电子商务购物模式前台页面设计，因此对于网站需要分析而言，主要为网上购物的操作流程，因此，本网站的需求分析主要有：
新用户可通过在网上购物时进行会员注册操作，因此需要设计会员注册页面，主要内容为用户注册表单的设计。
注册会员用户购物时需要进行会员登录操作，故需要设计会员登录页面，主要设计内容为会员登录表单。
会员用户可浏览网店的各类商品信息，故需要设计各类商品展示页面，本网站主要设计了对16年春装热卖、夏季新品、秋季热卖、衬衫T恤以及各种反季的商品进行静态页面设计操作。
会员用户在购物流程中可查看商品详情信息，故本网站设计了查看商品详细信息的静态页面。
会员用户在购物过程中可将商品加入购物车，因此本网站设计了加入购物车操作页面。
会员用户在购物过程中可操作购物车，对购物车记录进行下单操作，因此本网站设计了查看购物车记录的静态页面。
会员用户可购物过程中可进行下单操作，因此本网站需设计会员下单静态页面。
会员用户可查看会员订单，未处理订单等信息，因此本网站针对实际需要，设计了定金浏览页面。
会员用户可查看最新优惠活动信息，因此本网站设计了查看最新优惠活动信息静态页面。
（二）网站功能模块设计
根据网站需求分析，我们可以得出精品童装网上直销店静态页面设计主要实现以下功能模块，具体如图21所示：
图21 网站功能模块图设计
开发工具及开发技术介绍
1.Dreamweaver开发工具简介
Dreamweaver借助共享型用户界面设计， 在 Adobe Creative Suite 4 的不同组件之间更快、更明智地工作。使用工作区切换器可以从一个工作环境快速切换到下一个环境。其具体功能有CS6新增功能、自适应网格、改善FTP 性能、Catalyst 集成、增强型 jQuery 移动支持、CSS3 转换，即将CSS 属性变化制成动画转换效果，使网页设计栩栩如生。在您处理网页元素和创建优美效果时保持对网页设计的精准控制。
2、Photoshop开发工具简介
从功能上看，该软件可分为图像编辑、图像合成、校色调色及特效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。
HTML5技术简介
HTML 5有两大特点:首先，强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签，更可以用于HTML5游戏的开发。其次，追加了本地数据库等Web应用的功能。
详细设计
网站主题风格的设计
根据第二章的系统需求分析，我们可以确认本网站开发的各个页面，在详细设计阶段，我们首先要确认设计的网站主题风格，即页面母版，确定好母版之后，其他页面或者子页面根据母版的风格进行设计，即可保证整套页面风格统一，格调一致，给用户的视觉体验较强。因此首先在设计的过程中，我首先需要确定网站的主题风格，本网站主要是在线销售精品童装，主要用户群体均为母亲一类，偏向女性化，用户群体年龄层大多存在30~40岁之间，因此，本网站的主题色调可使用暖色调，力求给用户一种较为亲切的感觉。
另外网店出售的衣服均为童装一类，因童装大多颜色鲜艳，款式新颖，在加上PS处理，故服装的图片颜色较为明亮，考虑这一因素，网站的背景色采用透明白色为主，可以更加突出各类服装的特色和亮点。因为方便用户操作，网站沿袭传统购物网站的风格模式，为用户提供导航菜单，方便用户进行操作，导航菜单主要用于链接各类型的服装信息，用户功能菜单主要用于用户个人信息的操作。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/wljs/557.html
