网页设计说明书

⽹页设计说明书

⽹页设计与制作

设计说明书

姓名：

学号： 201211

班级： 12软件

指导教师：

完成⽇期： 2014年12⽉5⽇

⽬录

第1章简易购物⽹的规划 (2)

1.1需求分析 (2)

1.2⽹站的定位 (2)

1.3⽹站板块的设置 (3)

1.4⽹站功能设计 (3)

第2章简易购物⽹的设计与制作 (4)

2.1⾸页设计 (4)

2.1.1进⼊页⾯及⾸页设计 (4)

2.1.2 logo及banner设计 (5)

2.1.3导航设计 (5)

2.2⼦⽹页设计 (6)

2.2.1主题页⾯设计 (6)

2.2.2导航设计 (9)

第3章简易购物⽹设计的重难点分析 (9)

3.1⽹页设计的重点分析 (9)

3.2⽹页设计的难点分析 (9)

设计总结 (9)

参考⽂献 (9)

简易购物⽹设计说明书

绪论

在当今时代，⽹上购物已变的⾮常流⾏，⽹上购物突破了传统商务的障碍，⽆论对消费者、企业还是市场都有着巨⼤的吸引⼒和影响⼒，在新经济时期⽆疑是达到“多赢”效果的理想模式。

⾸先，对于消费者来说：可以在家“逛商店”，订货不受时间、地点的限制；得较⼤量的商品信息，可以买到当地没有的商品。⽽且⽹上⽀付⽐传统拿现⾦⽀付更加安全，可避免现⾦丢失或遭到抢劫；从订货、买货到货物上门⽆需亲临现场，既省时⼜省⼒。其次，对于商家来说；由于⽹上销售没有库存压⼒、经营成本低、经营规模不受场地限制等。在将来会有更多的企业选择⽹上销售，通过互联⽹对市场信息的及时反馈适时调整经营战略，以此提⾼企业的经济效益和参与国际竞争的能⼒。再次，对于整个市场经济来说：这种新型的购物模式可在更⼤的范围内、更⼴的层⾯上以更⾼的效率实现资源配置。

现在我们学习了⽹页设计，当然就是要能做⼀个精美的⽹页。在此次⽹页设计中，我们要能更加的了解⽹页设计⼯具强⼤的功

能和更好的使⽤它。诚然，此次设计的购物⽹，⼀⽅⾯是为了完成我们的作业，但更重要的是把我们所学到的东西⽤在具体的实践之中，所以，这次设计的⽬的也是要我们更好的掌握和使⽤⽹页设计⼯具和技术，以便提⾼对⽹页知识的更深层了解。第三点也是最要的⼀点是，把我们在书本上学到的知识充分运⽤到此次设计之中。使我们的在书上学到的东西不仅仅停留在表⾯上，把这些东西都⽤在所要做的⽹页上⾯。以达到⽼师要求的效果和学以致⽤。

第1章简易购物⽹的规划

1.1需求分析

简易购物⽹是为了更⽅便的服务⽹民⽽设⽴的⽹站，我们的⽹站内含物品丰富，各式各样，种类多，样式全。为⼴⼤的宅民们，提供了便利的购物渠道。我们⽹站设计板块主要有三块：⽹站⾸页、商品介绍和商品详情。

1.2 ⽹站的定位

1.更加⽅便全⾯的服务于购物者。

2.宣传步⾏街购物⽹，增加知名度，提⾼浏览量。

3.添加⼏个姐妹⽹店在友情链接中，提⾼知名度。

4.提供物美价廉的商品并保证其质量。

5.吸引其他没有购物⽹的商家，代售其商品。

1.3 ⽹站板块的设置

⽹站的版块设置：⽹站主要有三⼤版块，它们是⽹站⾸页、商品介绍、商品详情。其中还有⼀些⼩板块，诸如我要点评、设为⾸页、加⼊收藏等等。这些板块构成了整个⽹页布局，以便条理清晰的给观众以更详细的展现。

1.4 ⽹站功能设计

⽹页设计作为⼀种视觉语⾔，特别讲究编排和布局，虽然主页的设计不等同与平⾯设计，但他们有许多相近之处。版式设计通过⽂字图形的空间结合，表达出和谐之美。

多页⾯站点页⾯的编排设计要求把页⾯之间的有机联系反应出来，特别要处理好页⾯之间和页⾯内的秩序与内容的关系。为了达到最佳的视觉表现效果，设计时考虑到整体布局的合理性，是浏览者有⼀个流畅的视觉体验。

1.主页应该能够给顾客⽐较强烈和突出的印象，要突出⽹站是在线购物的特点和风格。

⽹站的设计⾸先要抓住酒店在同⾏业中的突出特点，以增加浏览者的兴趣，挖掘潜在客户；其次要购物⽹站的服务宗旨和产品特点。显著位置留给重点宣传栏⽬或更新最多的栏⽬，结合⽹站栏⽬设计在⾸页导航上突出层次感，是客户渐进接受。

2.⽹站结构设计合理，层次清楚。

为了将丰富的含义和多样的形式组织统⼀的页⾯结构，形式、语⾔必须符合页⾯的内容。灵活运⽤各种⼿段，通过空间、⽂字、图形之间的相互关系建⽴整体的均衡状态，产⽣和谐的美感。点、线、⾯相结合，充分表达完美的设计意境，使顾客可以从主页⽔平、垂直查询商品。

3.内⾯内容全⾯，尽量涵盖顾客普遍所需的信息。

4.页⾯的链接应该⽅便浏览，传输速度和图⽚的下载的速度快，应注意避免死链接，调不出图形等情况的存在。

第2章简易购物⽹的设计与制作

2.1 ⾸页设计

2.1.1进⼊页⾯及⾸页设计

⾸页设计主要采⽤简洁布局，并有所创意，将所有版块都排列整齐，这样既可以赏⼼悦⽬，⼜可以让浏览者不产⽣视觉上的疲劳，将所有的版块项⽬清晰的罗列出来。

2.1.2 logo设计及banner设计

logo设计如图所⽰：

Banner设计如图所⽰：

本⽹址logo及banner设计简单，以绿⾊为主题，使logo更贴近本⽹页的内容。Logo 与banner结合在⼀块，然后添加字体链接构成导航,具体设计详情请看以下分析

2.1.3 导航设计

导航设计上采⽤绿⾊条状banner为背景，其中字体为⿊⾊，设计简单，给⼈以眼⽬⼀新的感觉。

下⾯是⼀个flash动画形式的介绍，主要先让客户了解⼀下本⽹站的⼀⼩部分商品。让客户⼤略的欣赏⼀下。

2.2⼦⽹页设计

2.2.1主体页⾯设计

副页设计采⽤简单明了的布局，将所在的版块内容突出的表现出来，⽅便浏览者浏览更多信息。

⼦页还连接了⼦页，为具体店家商品介绍。