天天服饰网站开发
：随着互联网的发展，人们对衣着的购买已经不再局限于去实体店里购买，网上购物则成为了新时代网民的新的选择。本课题主要是设计与制作了一个网上服装购买网站。在这个网站里我主要采用了HTML+CSS技术开发网页，并且添加了JS特效。主要完成的工作包括：服装购买首页的设计、网站的销售理念与促销方式、服装的贴图、网站色彩的搭配、LOGO的设计、网站整体的布局、以及JS特效的收集与分析、页面的具体实现、网站整体的实现与维护。
目 录
一、引言 1
（一）开发背景 1
（二）网站的意义 1
二、开发工具的选择 1
（一）开发工具的选择与介绍 1
（二）开发环境 2
三、网站的整体设计 2
（一）功能结构图 2
（二）网站LOGO设计 2
（三）首页的设计 3
（四）产品展示及订单页面设计 3
四、网站的详细设计 4
(一)首页的具体介绍 4
1.导航条效果实现 5
2.网站搜索框文字效果 5
3.标题动态提示效果 6
（二）购物车与网站的背景音乐 7
1.购物车的单全选效果实现 7
2.购物车的结算效果 9
3.网站的背景音乐 10
（三）会员注册页面 10
1.JS的表单验证 11
2.简单的HTML5标签 12
3.简单的HTML5颜色板块插入 12
（四）产品展示页面 13
1.产品数量与价格联动效果以及评分效果 13
2.星级评论特效 14
五、总结 15
致谢 16
参考文献 17
一、引言
（一）开发背景
随着互联网的飞速发展，网购已经不是一个陌生的单词，他已经变成了我们身边不可或缺的一部分。在今天，互联网渗透了我们的生活，所以我想借助这个服装网站让人们体验不一样的网购生活,得到不一样的网购体验。一个网站的底蕴，主要看这个公司存在
*好棒文|www.hbsrm.com +Q: ^351916072^
的历史、宗旨、人文、还有员工的素养以及是否有积极向上的态度和创新的精神，而我们的公司则完全在这几方面做的极其的好。
（1）为客户创造满意，即让顾客以实惠的价格买到满意的衣服，以及强大的售后服务都是我们所追求的。
（2）为员工创造机会，即让跟着我们一起努力的员工能够拿到满意的薪水以及待遇。这样才更会卖力的为我们工作。
（3）为社会创造价值，当然我们只是一个服装公司，只能以更好的姿态以及良好的口碑去为你们谋取更大的方便，让你们在我们这买的舒心，买的放心。
而我们企业的精神则是创新、创业、创未来。企业的文化则是鼓励个性，激发创新。为此我们特地在网站中专门开出一个页面来介绍公司的企业文化。
（二）网站的意义
一个网站的开发总要伴随着他存在的意义，本网站的开发则是让人方便快捷的购买到自己喜欢的衣服，可以做到随时随地挑选自己喜欢的衣服。
本次课题除了能让人更加快捷便利的购买服装，让人不需要在眼花缭乱的实体店里购买，同时还能享受网站推荐的服装搭配，这也是本网站的一大特色。
二、开发工具的选择
（一）开发工具的选择与介绍
制作本网站运用了以下几个软件：Sublime和Photoshop。在Sublime中运用HTML+CSS对网站进行布局，用Photoshop对图片进行处理，用简单的JavaScript、JQuery特效使整个网页显得更加灵动。
Adobe Photoshop 是Adobe公司为了处理图形图像而制作的，它拥有很强大的修图的功能，使用蒙版、图层等，可以使得图片更加漂亮。涉及到很多方面，包括图形、图像、视频、文字等。
Sublime可以编写HTML和CSS代码，这是一种常见的语言编辑工具，编写网页十分顺畅、简洁，而且还支持样式表，创造出美妙的页面效果。
（二）开发环境
操作系统：Windows 7
编写语言：HTML、CSS、JavaScript、JQuery
调试环境：谷歌浏览器
三、网站的整体设计
（一）功能结构图
网站主要包括首页、产品展示、购物车、服务支持、关于我们、会员注册几个部分。其中主要特色在产品展示上，其目的为来访购物的人提供的很好的推荐，适用于各个年龄段，并且有不同的推荐。具体结构如图31所示:
图31 功能结构图
（二）网站LOGO设计
对于LOGO的设计，首先用几件衣服来很明确的表示这个网站的作用，其次用了一句比较顺口的话“天天新衬衫，其实很简单”作为本站的logo合成。然后我来简单的介绍一下这个logo，用绿色蓝色和粉红色的三件衣服搭配给人一种不是特别鲜艳但是让人看着很舒服的颜色，右边的英文“cotton story”则是一个服装的英文品牌，而本logo的重点则是那句类似顺口溜的中文下面的二维码。这个logo最大的灵感来自这里，因为这里有很多的猜想，首先它既像一件衣服挂在衣架上，然后又像一扇扇门，给你的意思则是每天换一件不同的衣服，最后有欣欣向上的寓意。具体图片如图32所示：
图32 Logo设计图
（三）首页的设计
网站的一级页面布局图，即首页布局图。首页的主要功能是适合本季的服装搭配，各种打折促销，有着适合各年龄层次的服装推荐。总的来说本网站的首页是分为上下结构，上半部分由网站logo和网站总的导航条来显示，下半部分的左边是本网站的特色即适合各种年龄层次的服装搭配，右半部分则是一个会随着季节改变的广告栏还有本季节的服装推荐。而下半部分则是一个底图版权归属以及我们网站的合作方。具体设计如图33所示：
图33 首页设计图
（四）产品展示及订单页面设计
网站的二级页面则是具体的来介绍各种服装，而我选择了一个产品介绍的页面，总体布局不变还是上下结构，而这个产品展示则是一个重点，运用了一些JS特效，让整个产品灵动起来，这些会在下面具体介绍。设计结构如图34所示：
图34 产品展示及下单页面图
四、网站的详细设计
(一)首页的具体介绍
由于是一个服装销售网站，所以必须给人一种耳目一新的感觉。不然谁来你这买是不是，所以首页的设计一定要新颖，所以首页得到设计大致是分为上下两个部分，导航和下面的服装推荐不拘一格没有很死板的布局，但是也不凌乱。总体给人一种很自由的感觉。总的来说网站还是属于一个上下结构，虽然不像其他网站那样很特别的结构分明，但是总结构还是能一眼看出的。也是本网站的一大特色，别具一格和新颖的提现，所以并没有按照别的网站那样死板的格局来做。具体首页如图41所示：
目 录
一、引言 1
（一）开发背景 1
（二）网站的意义 1
二、开发工具的选择 1
（一）开发工具的选择与介绍 1
（二）开发环境 2
三、网站的整体设计 2
（一）功能结构图 2
（二）网站LOGO设计 2
（三）首页的设计 3
（四）产品展示及订单页面设计 3
四、网站的详细设计 4
(一)首页的具体介绍 4
1.导航条效果实现 5
2.网站搜索框文字效果 5
3.标题动态提示效果 6
（二）购物车与网站的背景音乐 7
1.购物车的单全选效果实现 7
2.购物车的结算效果 9
3.网站的背景音乐 10
（三）会员注册页面 10
1.JS的表单验证 11
2.简单的HTML5标签 12
3.简单的HTML5颜色板块插入 12
（四）产品展示页面 13
1.产品数量与价格联动效果以及评分效果 13
2.星级评论特效 14
五、总结 15
致谢 16
参考文献 17
一、引言
（一）开发背景
随着互联网的飞速发展，网购已经不是一个陌生的单词，他已经变成了我们身边不可或缺的一部分。在今天，互联网渗透了我们的生活，所以我想借助这个服装网站让人们体验不一样的网购生活,得到不一样的网购体验。一个网站的底蕴，主要看这个公司存在
*好棒文|www.hbsrm.com +Q: ^351916072^
的历史、宗旨、人文、还有员工的素养以及是否有积极向上的态度和创新的精神，而我们的公司则完全在这几方面做的极其的好。
（1）为客户创造满意，即让顾客以实惠的价格买到满意的衣服，以及强大的售后服务都是我们所追求的。
（2）为员工创造机会，即让跟着我们一起努力的员工能够拿到满意的薪水以及待遇。这样才更会卖力的为我们工作。
（3）为社会创造价值，当然我们只是一个服装公司，只能以更好的姿态以及良好的口碑去为你们谋取更大的方便，让你们在我们这买的舒心，买的放心。
而我们企业的精神则是创新、创业、创未来。企业的文化则是鼓励个性，激发创新。为此我们特地在网站中专门开出一个页面来介绍公司的企业文化。
（二）网站的意义
一个网站的开发总要伴随着他存在的意义，本网站的开发则是让人方便快捷的购买到自己喜欢的衣服，可以做到随时随地挑选自己喜欢的衣服。
本次课题除了能让人更加快捷便利的购买服装，让人不需要在眼花缭乱的实体店里购买，同时还能享受网站推荐的服装搭配，这也是本网站的一大特色。
二、开发工具的选择
（一）开发工具的选择与介绍
制作本网站运用了以下几个软件：Sublime和Photoshop。在Sublime中运用HTML+CSS对网站进行布局，用Photoshop对图片进行处理，用简单的JavaScript、JQuery特效使整个网页显得更加灵动。
Adobe Photoshop 是Adobe公司为了处理图形图像而制作的，它拥有很强大的修图的功能，使用蒙版、图层等，可以使得图片更加漂亮。涉及到很多方面，包括图形、图像、视频、文字等。
Sublime可以编写HTML和CSS代码，这是一种常见的语言编辑工具，编写网页十分顺畅、简洁，而且还支持样式表，创造出美妙的页面效果。
（二）开发环境
操作系统：Windows 7
编写语言：HTML、CSS、JavaScript、JQuery
调试环境：谷歌浏览器
三、网站的整体设计
（一）功能结构图
网站主要包括首页、产品展示、购物车、服务支持、关于我们、会员注册几个部分。其中主要特色在产品展示上，其目的为来访购物的人提供的很好的推荐，适用于各个年龄段，并且有不同的推荐。具体结构如图31所示:
图31 功能结构图
（二）网站LOGO设计
对于LOGO的设计，首先用几件衣服来很明确的表示这个网站的作用，其次用了一句比较顺口的话“天天新衬衫，其实很简单”作为本站的logo合成。然后我来简单的介绍一下这个logo，用绿色蓝色和粉红色的三件衣服搭配给人一种不是特别鲜艳但是让人看着很舒服的颜色，右边的英文“cotton story”则是一个服装的英文品牌，而本logo的重点则是那句类似顺口溜的中文下面的二维码。这个logo最大的灵感来自这里，因为这里有很多的猜想，首先它既像一件衣服挂在衣架上，然后又像一扇扇门，给你的意思则是每天换一件不同的衣服，最后有欣欣向上的寓意。具体图片如图32所示：
图32 Logo设计图
（三）首页的设计
网站的一级页面布局图，即首页布局图。首页的主要功能是适合本季的服装搭配，各种打折促销，有着适合各年龄层次的服装推荐。总的来说本网站的首页是分为上下结构，上半部分由网站logo和网站总的导航条来显示，下半部分的左边是本网站的特色即适合各种年龄层次的服装搭配，右半部分则是一个会随着季节改变的广告栏还有本季节的服装推荐。而下半部分则是一个底图版权归属以及我们网站的合作方。具体设计如图33所示：
图33 首页设计图
（四）产品展示及订单页面设计
网站的二级页面则是具体的来介绍各种服装，而我选择了一个产品介绍的页面，总体布局不变还是上下结构，而这个产品展示则是一个重点，运用了一些JS特效，让整个产品灵动起来，这些会在下面具体介绍。设计结构如图34所示：
图34 产品展示及下单页面图
四、网站的详细设计
(一)首页的具体介绍
由于是一个服装销售网站，所以必须给人一种耳目一新的感觉。不然谁来你这买是不是，所以首页的设计一定要新颖，所以首页得到设计大致是分为上下两个部分，导航和下面的服装推荐不拘一格没有很死板的布局，但是也不凌乱。总体给人一种很自由的感觉。总的来说网站还是属于一个上下结构，虽然不像其他网站那样很特别的结构分明，但是总结构还是能一眼看出的。也是本网站的一大特色，别具一格和新颖的提现，所以并没有按照别的网站那样死板的格局来做。具体首页如图41所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/751.html
