Surmise男装推荐网的设计与实现毕业设计说明书
目录
引言
（一）、开发背景
现如今我们已进入了快速发展的信息时代，互联网也成了当今社会最受关注的行业之一。人们通过计算机网络聊天交友、查阅资料、浏览新闻，计算机网络在人们的生活中得到了广泛的应用。随着互联网的飞速发展，电子商务的好处也逐渐受到了很多企业的关注和重视，顾客可以通过网页上搜索迅速工具很快地找到自己所需要商品信息。衣服是人们最重要的生活必须品。但是，目前人们只能在淘宝，京东等一些大型网站上面选购衣物，面对种类繁多的衣物他们该如何选择适合自己的？蘑菇街和美丽说就这样应运而生了，可是这些网站都是正对女性消费者的。对于男性消费者而言，他们本身就不会像女性那样会打扮自己。因此男性消费者更需要一个好的服装推荐网站，来指导他们如何选择适合自己的衣服，提升他们的穿衣品味。”Surmise”网站就是专门为男性打造男装推荐网站，在这里你可以找到属于你自己的穿衣风格。
（二）、需求分析
现如今我们的生活质量都有了很大提高，人们对自身的穿着品味也有了很高的重视。但是，面对那么多服饰，很多男性消费者不知道哪些是适合自己的。他们可能只是让服务员推荐一下，或者看别人怎么穿的。所以很多男性花了钱，也没有买到适合自己的衣服。因此，男性消费者在服装选择方面是弱势群体。他们需要一个服装推荐者来指导他们如何选择衣服、搭配衣服。 然后，随着网络的发展，网站是一个很好的平台，大家每天都浏览各式各样的网站。因此“Surmise”男装推荐网站便应运而生了。不需要花费金钱购买大量时装杂志，在家就能轻轻松松学会穿搭技巧，让你成为一个时尚潮男。
（三）、内容简介
1、Surmise内容
Surmise男装推荐网主要是为男性消费者服饰穿着做一个推荐 *好棒文|www.hbsrm.com +Q: ￥351916072￥
指导作用，推荐一些时尚的西装、衣服、手表等。指导他们衣服如何搭配，什么样的裤子配什么样的鞋子，以及衣服颜色的搭配。整个网站图片素材较多，让消费者在有很好的视觉享受的同时，学会穿衣搭配技巧。本网站主旨就是培养大家对时尚认知，改掉自己以前不正确的穿衣风格。在网站内容的设计和制作方面包含网站主题的确立、LOGO设计制作、图片的剪裁和大小的统一、各的模块色彩的搭配、JavaScript的网页动态效果的设计与制作以及各链接之间的关系等。
2、首页内容
网站首页首先是导航栏（首页、服饰、搭配、达人），下面动态效果，右边是一个音乐小插件，可以播放歌曲。中间一部分是对服饰、搭配、达人三个部分分别作了一下展示，让用户可以醒目看到网站主要架构。
3、子页内容
子页涵盖了联系我们、加入Surmise、广告合作、友情链接、隐私政策、关于我们、服饰（衣服、西、发型、手表）、搭配（配饰搭配、领带系、服装搭、围巾系法、整体搭配）、达人（达人街拍、达人推荐、达人经验），其中包含对单独搭配的图片展示、搭配方法详解等
网站开发
（一）开发技术
1、超级文本标记语言HTML
HTML，高中计算机课老师就讲过，当时只知道它的英文全称：HyperText Markup Language，中文叫做超文本标记语言。如今，大学自己读了计算机专业，对于HTML便有了更深的了解：它是编写网页文档的语言，它的页面上面的元素是由特定的标记来决定的。那么，什么叫做超文本呢？其实就是我们所说的链接，它是一种指向其他文档链接的一类文本。它把放在不同计算机中的文档链在一起，用户不需要知道链接所指的内容在哪，只要用鼠标点击一下链接，页面就会跳转到所点的文档。“Surmise”男装推荐网站就是用超级文本标记语言编写的HTML文档。
2、DIV+CSS
DIV相当于一个容器，里面存放着HTML的元素，而CSS可以控制这些元素显示在屏幕上特定位置。如果给DIV加上特定的id，就可以实现精确的控制，同时还可以区分其他其他DIV标记。还可以给DIV加上CLASS的属性，可以使拥有相同CLASS属性的DIV样式相同。我制作的网站相同的结构都会使用同一个的ID属性，这样可以使基本框架统一，避免了结构混乱，修改起来也比较方便。总的来说，使用DIV+CSS布局格式的网站符合基本网站标准、易于维护、条理清晰不乱、可以减轻网页负担。
3、JavaScript
JavaScript的应用，让网站看上去更加生动，并且富有美感。让用户在浏览静态文字和图片时别有一番体验，“Surmise”男装推荐网站也正是考虑到这一方面，在字体滚动、图片滚动与切换等，采用了几种不同的JavaScript特效。
、“自动切换”式的图片展示，图片可以自动滚动，也可以点击切换。
图2-1 “自动切换”式的图片效果图
、“字体滚动”式，字体可以在页面滚动起来。
图2-2 “字体滚动”式效果图
（二）、技术支持
1、Photoshop
Photoshop拥有非常强大的图像处理能力，通过它将图片切割成小块，可以提高网页的打开速度。图片的质量也决定着网站的质量，通过Photoshop处理能够让图片尺寸更合理、清晰度更高。这会直接影响用户对该网站的体验的。因此Photoshop确实是制作网页的神器。
2、Editplus
Editplus是HTML网页语言和CSS代码编写的编辑器。它还能够连接浏览器到Editplus窗口中，可以直接预览已经完成的网页，利于检查。
3、Dreamweaver
Dreamweaver是一款专业编写和管理网页的编辑器。使用它能够很容易地创建跨浏览器、跨平台的页面。因此，Dreamweaver对于网页编写来说很直观、简单。但为了自己能够学以致用，我所做的网站的设计基本上以编写代码为主，Dreamweaver只起到的作用是检查错误。
4、Chrome
Chrome是谷歌浏览器。它有JavaScript/CSS控制台、文件查看器等，而且是一款将兼容性很好而且标准严格的浏览器。能够很好观察网页运作详情的能。在Surmise男装推荐网站的制作过程中，我是利用Chrome浏览器对网页进行预览的，此外，通过查看器来查看元素，能够很快的发现错误，做到及时改正。
5、ScrToPic
ScrToPic是一款抓屏工具软件，它具备抓取全屏和自定义抓取的功能，附带的编辑功能，可以在所截的图的上面进行作画、添加文字等。使用起来非常的方便。窗口捕捉时，它可以截取整个屏幕，也可以截取其他任何一个窗口。
图3-1 逻辑结构图
2、DIV框架图
logo
menu
Zs3(展示3区) Zs4(展示4区)
Footer(版权区)
图3-3 二级子页框架图
把网站编码完成后，就如同把试卷上的答案填好。要想把分数提高，还需要反复检查修改，网站也是这样的，也需要测试。
引言
（一）、开发背景
现如今我们已进入了快速发展的信息时代，互联网也成了当今社会最受关注的行业之一。人们通过计算机网络聊天交友、查阅资料、浏览新闻，计算机网络在人们的生活中得到了广泛的应用。随着互联网的飞速发展，电子商务的好处也逐渐受到了很多企业的关注和重视，顾客可以通过网页上搜索迅速工具很快地找到自己所需要商品信息。衣服是人们最重要的生活必须品。但是，目前人们只能在淘宝，京东等一些大型网站上面选购衣物，面对种类繁多的衣物他们该如何选择适合自己的？蘑菇街和美丽说就这样应运而生了，可是这些网站都是正对女性消费者的。对于男性消费者而言，他们本身就不会像女性那样会打扮自己。因此男性消费者更需要一个好的服装推荐网站，来指导他们如何选择适合自己的衣服，提升他们的穿衣品味。”Surmise”网站就是专门为男性打造男装推荐网站，在这里你可以找到属于你自己的穿衣风格。
（二）、需求分析
现如今我们的生活质量都有了很大提高，人们对自身的穿着品味也有了很高的重视。但是，面对那么多服饰，很多男性消费者不知道哪些是适合自己的。他们可能只是让服务员推荐一下，或者看别人怎么穿的。所以很多男性花了钱，也没有买到适合自己的衣服。因此，男性消费者在服装选择方面是弱势群体。他们需要一个服装推荐者来指导他们如何选择衣服、搭配衣服。 然后，随着网络的发展，网站是一个很好的平台，大家每天都浏览各式各样的网站。因此“Surmise”男装推荐网站便应运而生了。不需要花费金钱购买大量时装杂志，在家就能轻轻松松学会穿搭技巧，让你成为一个时尚潮男。
（三）、内容简介
1、Surmise内容
Surmise男装推荐网主要是为男性消费者服饰穿着做一个推荐 *好棒文|www.hbsrm.com +Q: ￥351916072￥
指导作用，推荐一些时尚的西装、衣服、手表等。指导他们衣服如何搭配，什么样的裤子配什么样的鞋子，以及衣服颜色的搭配。整个网站图片素材较多，让消费者在有很好的视觉享受的同时，学会穿衣搭配技巧。本网站主旨就是培养大家对时尚认知，改掉自己以前不正确的穿衣风格。在网站内容的设计和制作方面包含网站主题的确立、LOGO设计制作、图片的剪裁和大小的统一、各的模块色彩的搭配、JavaScript的网页动态效果的设计与制作以及各链接之间的关系等。
2、首页内容
网站首页首先是导航栏（首页、服饰、搭配、达人），下面动态效果，右边是一个音乐小插件，可以播放歌曲。中间一部分是对服饰、搭配、达人三个部分分别作了一下展示，让用户可以醒目看到网站主要架构。
3、子页内容
子页涵盖了联系我们、加入Surmise、广告合作、友情链接、隐私政策、关于我们、服饰（衣服、西、发型、手表）、搭配（配饰搭配、领带系、服装搭、围巾系法、整体搭配）、达人（达人街拍、达人推荐、达人经验），其中包含对单独搭配的图片展示、搭配方法详解等
网站开发
（一）开发技术
1、超级文本标记语言HTML
HTML，高中计算机课老师就讲过，当时只知道它的英文全称：HyperText Markup Language，中文叫做超文本标记语言。如今，大学自己读了计算机专业，对于HTML便有了更深的了解：它是编写网页文档的语言，它的页面上面的元素是由特定的标记来决定的。那么，什么叫做超文本呢？其实就是我们所说的链接，它是一种指向其他文档链接的一类文本。它把放在不同计算机中的文档链在一起，用户不需要知道链接所指的内容在哪，只要用鼠标点击一下链接，页面就会跳转到所点的文档。“Surmise”男装推荐网站就是用超级文本标记语言编写的HTML文档。
2、DIV+CSS
DIV相当于一个容器，里面存放着HTML的元素，而CSS可以控制这些元素显示在屏幕上特定位置。如果给DIV加上特定的id，就可以实现精确的控制，同时还可以区分其他其他DIV标记。还可以给DIV加上CLASS的属性，可以使拥有相同CLASS属性的DIV样式相同。我制作的网站相同的结构都会使用同一个的ID属性，这样可以使基本框架统一，避免了结构混乱，修改起来也比较方便。总的来说，使用DIV+CSS布局格式的网站符合基本网站标准、易于维护、条理清晰不乱、可以减轻网页负担。
3、JavaScript
JavaScript的应用，让网站看上去更加生动，并且富有美感。让用户在浏览静态文字和图片时别有一番体验，“Surmise”男装推荐网站也正是考虑到这一方面，在字体滚动、图片滚动与切换等，采用了几种不同的JavaScript特效。
、“自动切换”式的图片展示，图片可以自动滚动，也可以点击切换。
图2-1 “自动切换”式的图片效果图
、“字体滚动”式，字体可以在页面滚动起来。
图2-2 “字体滚动”式效果图
（二）、技术支持
1、Photoshop
Photoshop拥有非常强大的图像处理能力，通过它将图片切割成小块，可以提高网页的打开速度。图片的质量也决定着网站的质量，通过Photoshop处理能够让图片尺寸更合理、清晰度更高。这会直接影响用户对该网站的体验的。因此Photoshop确实是制作网页的神器。
2、Editplus
Editplus是HTML网页语言和CSS代码编写的编辑器。它还能够连接浏览器到Editplus窗口中，可以直接预览已经完成的网页，利于检查。
3、Dreamweaver
Dreamweaver是一款专业编写和管理网页的编辑器。使用它能够很容易地创建跨浏览器、跨平台的页面。因此，Dreamweaver对于网页编写来说很直观、简单。但为了自己能够学以致用，我所做的网站的设计基本上以编写代码为主，Dreamweaver只起到的作用是检查错误。
4、Chrome
Chrome是谷歌浏览器。它有JavaScript/CSS控制台、文件查看器等，而且是一款将兼容性很好而且标准严格的浏览器。能够很好观察网页运作详情的能。在Surmise男装推荐网站的制作过程中，我是利用Chrome浏览器对网页进行预览的，此外，通过查看器来查看元素，能够很快的发现错误，做到及时改正。
5、ScrToPic
ScrToPic是一款抓屏工具软件，它具备抓取全屏和自定义抓取的功能，附带的编辑功能，可以在所截的图的上面进行作画、添加文字等。使用起来非常的方便。窗口捕捉时，它可以截取整个屏幕，也可以截取其他任何一个窗口。
图3-1 逻辑结构图
2、DIV框架图
logo
menu
Zs3(展示3区) Zs4(展示4区)
Footer(版权区)
图3-3 二级子页框架图
把网站编码完成后，就如同把试卷上的答案填好。要想把分数提高，还需要反复检查修改，网站也是这样的，也需要测试。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1783.html
