自主印花T恤网站的设计与实现
目录
一、引言 1
二、开发工具的介绍及选择 1
（一）Dreamweaver CS5 1
（二）JavaScript 1
（三）Adobe Photoshop 5.0 2
三、T恤网站设计分析 2
（一） 网站的制作背景和意义 2
（二） T恤网站的设计与规划 2
1、明确架设网站的目的及客户要求 2
2、T恤网站概貌 2
3、功能划分及描述 3
四 详细设计与实现 3
(一) 组织结构图 3
（二） 网站页面的设计与实现 4
1、首页设计 4
2、在线预订网页设实现 11
3、会员登录网页设计与实现 13
五 测试与维护 15
结束语 16
谢 辞 17
参考文献 18
一、引言
网络的诞生和发展，颠覆了传统的消费方式。网上购物的方式打破了传统购物方式空间以及时间的束缚，导致网上购物成为主流，网上销售也日益扩大，据国家统计局统计2014年中国网上零售额高达27898亿元，同比往年增长49.7%。其中鞋帽，衣服占其中的77.8%，年龄段大多处于15-50岁之间人群。
网络服装消费占人们网络总消费的大头，其中T恤又是服装中必不可少的一个种类。它是春夏季人们喜欢着装的衣服之一，又名文化衫，其包括商务T恤和休闲T恤。它与传统服装的区别在于通过不同图案或文字来张扬不同的性格特点，以简约、舒适而颇受消费者喜欢。据阿里巴巴统计，每年的T恤购买量均呈现上升趋势，中国是一个人口大国，T恤的需求量较为庞大,因此开发一个专门的T恤销售网站 *好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
,可以为T恤爱好者带来更方便快捷的购物环境，而自主印花则可以更好的满足消费者个性定制的需求。
二、开发工具的介绍及选择
（一）Dreamweaver CS5
Dreamweaver是一款网页制作编辑器。其工作区非常灵活，因此可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：
1. 装载器中包含一些打开和关闭常用检查器和模板的按钮。
2. 对象工具栏可以创建不同类型对象的按钮。
3. 属性检查器显示选定对象的属性。
4. 快捷键可以帮助用户对快速执行某些命令。
Dreamweaver是一款创建静态网页非常方便的软件，在本网站的制作过程中，本网站利用Dreamweaver软件的DIV+CSS功能构建网站结构，并在其中填写代码促使网站页面的形成。
（二）JavaScript
JavaScript是一种脚本语言，被广泛的应用与客户端。JS因具有可直接嵌入Html以及简单性和跨平台性（即适用于多种不同平台的浏览器）而广受欢迎。
一个网站只有静态效果会显的枯燥，所以本网站采用JavaScript语言在网站中实现图片以及语言的动态效果，用以增加网站的多样性，减轻用户的疲乏感。
（三）Adobe Photoshop 5.0
Photoshop是一款目前非常流行的图形编辑器，在图像编辑、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。
1. 文字处理更加方便
2. 增加的图层集使图层管理更有序。
3. 新增图像功能：图像的剪切和剪裁更加方便。
本网站主要利用Photoshop美化图片的功能，对网站使用的图片加以美化，使其看起来更大方美观，并且利用Photoshop可以在保证不破坏图片的美感下修改图片的大小，方便网站整体构架的排版，增加网站的整体美感。
三、T恤网站设计分析
（一） 网站的制作背景和意义
随着休闲消费文化的日益流行，T恤作为一种休闲服饰，越来越受到消费者的青睐。T恤的发展时间比较长，如今，T恤的发展主要形成三大主流。一是凭借优雅及高品位打造的商务休闲系列，主要适用于高端商务人士及成熟人士着装；二是以舒适简单，随意及款式不一形成的大众路线；三是凭借T恤上个性印花走个性路线的，个性路线的T恤颇受欢迎。
由于网上消费者年轻人占消费人群的比重较高，年轻人的购物需求以及对潮流的追求逐渐提升，所以本网站开设印花系列T恤衫，旨在为青年消费者提供更多的选择，从消费者自身选择考虑，可以更好的满足消费者的需求。
（二） T恤网站的设计与规划
1、明确架设网站的目的及客户要求
T恤的兴起是因其上风格迥异的图案和文字，从而颇受消费者热爱，由于消费群体的数量庞大并且需求各不相同，所以建设一个自主印花T恤网站的目的在于依据消费者自己的需求从而帮助消费者打造一款合适的T恤。
2、T恤网站概貌
通过建立一个T恤网站通过自主印花更加快捷的为客户提供购买平台，个性定制是为了更好满足每个顾客对自身不同的需求，网站从用户自身考虑，重视用户对于自身需求的选择，利用个性定制这种新颖的方式吸引用户的眼球。
3、功能划分及描述
网站设计有新闻更新，浏览者可以在首页浏览自己喜欢的新闻，浏览T恤衣服、T恤设计图案，会员登录等，对于功能的划分，网站清晰的规划了四个部分，可以方便用一目了然的了解网站的整体状况，用户可以更方便的浏览自己感兴趣的部分。
(1)新闻
服装行业中T恤衣服显示最新的新闻供浏览者浏览，用以方便消费者更好的了解T恤行业的最新新闻，在这个页面用户可以简单、快捷的了解T恤行业的发展行情，了解T恤行业发展的潮流及趋势，用户可以更好的认清自身的需求，更好更满意的消费。
(2)在线预订
在线预定页面是一个用户对本站T恤衣服感兴趣直接下单的地方，在本页面，消费者可以通过提供图案或文字进行T恤的预定。
(3)男装展示
在其中展示T恤服装类型，包括中性标准、男装圆领长袖、女装标准、
女装V领长袖、女装圆领长袖、韩版风格产品图片。页面将不同风格的T恤清晰的规划在页面的左侧上方位置，用户可以就自身需求进行选择。
(4)设计图案
在其中展示T恤衣服中最新图案的图片，以及用户可以通过网站提供用户多需求而本网站没有展示的图片，网站则将其纳入，按照用户要求将其印花致其T恤上，可以更好的满足用户对自身的需求。
(5)联系我们
在其中显示本站的联系方式，如电话号码、地址等。
栏目实质是一个将网站目的明确的大纲。因此T恤网站分为七个栏目，分别是关于我们、新闻资讯、男装展示、儿童展示、在线预订、印花图案、联系我们。
四 详细设计与实现
(一)组织结构图
本网站由首页、新闻资讯、衣服展示、在线预订和印花图案四个板块组成。具体页面层次结构如图4-1所示。
图4-1 组织结构图
（二） 网站页面的设计与实现
1、首页设计
(1)LOGO设计
网站的LOGO是一个网站很重要的一部分，LOGO好坏的标准取决与它对用户的第一印象，一个好的LOGO应该给用户难忘的感觉，使用户铭记，成功的LOGO应做到简洁、美观、色彩不过于复杂，基于此本网站采用一个简单的萌牛头像，以球形为原型创建，希望网站可以牛气冲天，并且寓意网站为消费者辛勤劳作。并赋予其鲜艳的红色使其像牛儿一样充满活力，并且红色可以给人们强烈的冲击感，方便消费者牢记网站，网站LOGO简洁又不失美观，具体如图4-2所示。
一、引言 1
二、开发工具的介绍及选择 1
（一）Dreamweaver CS5 1
（二）JavaScript 1
（三）Adobe Photoshop 5.0 2
三、T恤网站设计分析 2
（一） 网站的制作背景和意义 2
（二） T恤网站的设计与规划 2
1、明确架设网站的目的及客户要求 2
2、T恤网站概貌 2
3、功能划分及描述 3
四 详细设计与实现 3
(一) 组织结构图 3
（二） 网站页面的设计与实现 4
1、首页设计 4
2、在线预订网页设实现 11
3、会员登录网页设计与实现 13
五 测试与维护 15
结束语 16
谢 辞 17
参考文献 18
一、引言
网络的诞生和发展，颠覆了传统的消费方式。网上购物的方式打破了传统购物方式空间以及时间的束缚，导致网上购物成为主流，网上销售也日益扩大，据国家统计局统计2014年中国网上零售额高达27898亿元，同比往年增长49.7%。其中鞋帽，衣服占其中的77.8%，年龄段大多处于15-50岁之间人群。
网络服装消费占人们网络总消费的大头，其中T恤又是服装中必不可少的一个种类。它是春夏季人们喜欢着装的衣服之一，又名文化衫，其包括商务T恤和休闲T恤。它与传统服装的区别在于通过不同图案或文字来张扬不同的性格特点，以简约、舒适而颇受消费者喜欢。据阿里巴巴统计，每年的T恤购买量均呈现上升趋势，中国是一个人口大国，T恤的需求量较为庞大,因此开发一个专门的T恤销售网站 *好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
,可以为T恤爱好者带来更方便快捷的购物环境，而自主印花则可以更好的满足消费者个性定制的需求。
二、开发工具的介绍及选择
（一）Dreamweaver CS5
Dreamweaver是一款网页制作编辑器。其工作区非常灵活，因此可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：
1. 装载器中包含一些打开和关闭常用检查器和模板的按钮。
2. 对象工具栏可以创建不同类型对象的按钮。
3. 属性检查器显示选定对象的属性。
4. 快捷键可以帮助用户对快速执行某些命令。
Dreamweaver是一款创建静态网页非常方便的软件，在本网站的制作过程中，本网站利用Dreamweaver软件的DIV+CSS功能构建网站结构，并在其中填写代码促使网站页面的形成。
（二）JavaScript
JavaScript是一种脚本语言，被广泛的应用与客户端。JS因具有可直接嵌入Html以及简单性和跨平台性（即适用于多种不同平台的浏览器）而广受欢迎。
一个网站只有静态效果会显的枯燥，所以本网站采用JavaScript语言在网站中实现图片以及语言的动态效果，用以增加网站的多样性，减轻用户的疲乏感。
（三）Adobe Photoshop 5.0
Photoshop是一款目前非常流行的图形编辑器，在图像编辑、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。
1. 文字处理更加方便
2. 增加的图层集使图层管理更有序。
3. 新增图像功能：图像的剪切和剪裁更加方便。
本网站主要利用Photoshop美化图片的功能，对网站使用的图片加以美化，使其看起来更大方美观，并且利用Photoshop可以在保证不破坏图片的美感下修改图片的大小，方便网站整体构架的排版，增加网站的整体美感。
三、T恤网站设计分析
（一） 网站的制作背景和意义
随着休闲消费文化的日益流行，T恤作为一种休闲服饰，越来越受到消费者的青睐。T恤的发展时间比较长，如今，T恤的发展主要形成三大主流。一是凭借优雅及高品位打造的商务休闲系列，主要适用于高端商务人士及成熟人士着装；二是以舒适简单，随意及款式不一形成的大众路线；三是凭借T恤上个性印花走个性路线的，个性路线的T恤颇受欢迎。
由于网上消费者年轻人占消费人群的比重较高，年轻人的购物需求以及对潮流的追求逐渐提升，所以本网站开设印花系列T恤衫，旨在为青年消费者提供更多的选择，从消费者自身选择考虑，可以更好的满足消费者的需求。
（二） T恤网站的设计与规划
1、明确架设网站的目的及客户要求
T恤的兴起是因其上风格迥异的图案和文字，从而颇受消费者热爱，由于消费群体的数量庞大并且需求各不相同，所以建设一个自主印花T恤网站的目的在于依据消费者自己的需求从而帮助消费者打造一款合适的T恤。
2、T恤网站概貌
通过建立一个T恤网站通过自主印花更加快捷的为客户提供购买平台，个性定制是为了更好满足每个顾客对自身不同的需求，网站从用户自身考虑，重视用户对于自身需求的选择，利用个性定制这种新颖的方式吸引用户的眼球。
3、功能划分及描述
网站设计有新闻更新，浏览者可以在首页浏览自己喜欢的新闻，浏览T恤衣服、T恤设计图案，会员登录等，对于功能的划分，网站清晰的规划了四个部分，可以方便用一目了然的了解网站的整体状况，用户可以更方便的浏览自己感兴趣的部分。
(1)新闻
服装行业中T恤衣服显示最新的新闻供浏览者浏览，用以方便消费者更好的了解T恤行业的最新新闻，在这个页面用户可以简单、快捷的了解T恤行业的发展行情，了解T恤行业发展的潮流及趋势，用户可以更好的认清自身的需求，更好更满意的消费。
(2)在线预订
在线预定页面是一个用户对本站T恤衣服感兴趣直接下单的地方，在本页面，消费者可以通过提供图案或文字进行T恤的预定。
(3)男装展示
在其中展示T恤服装类型，包括中性标准、男装圆领长袖、女装标准、
女装V领长袖、女装圆领长袖、韩版风格产品图片。页面将不同风格的T恤清晰的规划在页面的左侧上方位置，用户可以就自身需求进行选择。
(4)设计图案
在其中展示T恤衣服中最新图案的图片，以及用户可以通过网站提供用户多需求而本网站没有展示的图片，网站则将其纳入，按照用户要求将其印花致其T恤上，可以更好的满足用户对自身的需求。
(5)联系我们
在其中显示本站的联系方式，如电话号码、地址等。
栏目实质是一个将网站目的明确的大纲。因此T恤网站分为七个栏目，分别是关于我们、新闻资讯、男装展示、儿童展示、在线预订、印花图案、联系我们。
四 详细设计与实现
(一)组织结构图
本网站由首页、新闻资讯、衣服展示、在线预订和印花图案四个板块组成。具体页面层次结构如图4-1所示。
图4-1 组织结构图
（二） 网站页面的设计与实现
1、首页设计
(1)LOGO设计
网站的LOGO是一个网站很重要的一部分，LOGO好坏的标准取决与它对用户的第一印象，一个好的LOGO应该给用户难忘的感觉，使用户铭记，成功的LOGO应做到简洁、美观、色彩不过于复杂，基于此本网站采用一个简单的萌牛头像，以球形为原型创建，希望网站可以牛气冲天，并且寓意网站为消费者辛勤劳作。并赋予其鲜艳的红色使其像牛儿一样充满活力，并且红色可以给人们强烈的冲击感，方便消费者牢记网站，网站LOGO简洁又不失美观，具体如图4-2所示。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1660.html
