笙墨轩书店网站设计与制作报告
摘 要 随着时代的进步，互联网的高速发展，对于现在的人们而言，网络现在在人们生活中占据了举足轻重的分量，它时刻影响着人们的衣食住行，不断地融入人们的生活。相对应的互联网也带动了许多新兴产业的兴起并冲击着传统的销售模式，最令人熟知的就是电子商务的崛起，对于现在的广大人民群众而已，网上购物已经成为自己生活中最主要的一种购物方式，这不仅促进了经济的发展，而且也给各大企业和一些个体商户带来了不小的收益。所以，在这种大环境下，我们也将顺应潮流建立网站以用来宣传企业和销售商品，于是就有了我们的笙墨轩书店网站。本网站旨在给每一个访客提供更好的服务，在网站中可以找到各种类型和不同版本的书籍，大量信息更多的以图片形式出现，省去了繁杂的文字，有效地吸引访客，产生浏览细看的想法，而访客也可以根据自己的需求从众多书籍中找到自己中意的书籍，达到“坐地日行八万里”的效果。笙墨轩书店网站设计与制作说明书则是对我们的网站的logo、基本色调、整体色彩和页面布局及网站定位和目标群体等方面进行了简单的阐述。
目录
一、网站概述 1
（一）网站结构 1
（二）功能分配 3
二、网站建设规划 6
（一）确定主题 6
（二）搜集资料 6
（三）资料整理 6
（四）站点建立 6
（五）编辑CSS样式表 7
三、网站的排版与布局 8
（一）表格排版布局网页 8
（二）主页面 8
（三）次级页面 8
（四）页眉 8
（五）页脚 8
四、网站的风格与形象设计 9
（一）网站整体风格的设计 9
（二）网站的形象设计 9
五、详细操作说明 10
（一）网站首页 10
（二）教育 11
（三）小说 11
（四）文艺 11
（五）青春 11
（六）童书 11
（七）生活 11
（八）经管 11
（九）科技 11
（十）期刊 11
（十一）人文社科 12
（十二）励志/成功 12 *好棒文|www.hbsrm.com +Q: ￥351916072￥
（十三）英文原版书港台图书 12
（十四）单个商品的详情页面 12
（十五）消息中心 14
（十六）客户服务 14
（十七）成为会员 14
（十八）用户登录 15
六、网站的推广与维护 16
（一）网站推广 16
（二）网站维护 17
结束语 18
参考文献 19
致谢 20
附录 21
一、网站概述
此次设计和制作的笙墨轩书店网站是以展示和销售书籍为主，主要分为教育、小说、文艺、青春、童书、生活、经管、科技、期刊、人文社科、励志成功、英文原版书港台图书这12个类别，这些不同类型的书籍面向广大消费者，可以尽情挑选然后购买。
（一）网站结构
网站结构（见图1）
图1笙墨轩书店网站架构图示
1.首页：左侧一栏是新书上架，中间部分的畅销书目
2.子页：
（1）教育类书籍：左侧一栏是新书上架，中间部分为不同品牌及科别的书籍图片、名称、作者及价格（部分国外书籍的译者）
（2）小说类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（3）文艺类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（4）青春类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（5）童书类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（6）生活类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（7）经管类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（8）科技类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（9）期刊类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（10）人文社科类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（11）励志成功类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（12）英文原版书港台图书类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
打开笙墨轩书店网站的首页，如下图（图2）所示
网站通过展示logo、动画制作的banner、新书上架和畅销书籍的图片以与图片相对应的简短的文字叙述结合整体背景来向访客介绍了我们的网站的整体色彩格调、风格和相对应的形象。
图2笙墨轩书店网站首页
（二）功能分配
1.导航栏
导航栏所放置的是我们为书籍所做的十二种分类的标题（即：教育、小说、文艺、青春、童书、生活、经管、科技、期刊、人文社科、励志成功、英文原版书港台图书），位置上居于banner之下，也就是网站整体的中上部，一目了然，消费者可以点击自己的所感兴趣的分类从而进入点击书籍链接进行购买。如图3所示：
图3导航栏
2.书籍搜索
搜索功能，顾名思义就是可以客户可以根据自己想要购买的书籍进行来自行搜索，这样可以更快速的找到自己想要购买的书籍。也通过选择商品分类来缩小搜索范围，这两种书籍的搜索方式都是为了可以更快速更方便的找到自己心仪的书籍，省去一些不必要的时间。如图4所示：
图4 书籍搜索
3.我的购物车
点击位于网站右上角的“我的购物车”，进入之后，可以看到自己已经添加的书籍，包括书籍的信息，如书籍的名称、图片、作者、部分文字说明和一些详细的订单详情，如书籍数量、价格等。如图5所示：
图5 我的购物车
4.消息中心
点击网页右上角的消息中心，里面有客户和商家的聊天内容和我们网站根据客户设置的喜好所推送的商品以及客户所关注的书籍或店铺的最新消息。
5.客户服务
在网站上方的最右面有一个客户服务，负责解决客户的一些常见问题及意见反馈。
6.购物指南
在网站的下方有购物指南，初次购物的客户可以根据流程进行书籍的购买。其中包括购物流程、发票制度、账户管理、会员优惠这四个内容。
7.支付方式
在网站的下方有支付方式，主要包括货到付款、线上支付、抵用券支付和银行转账这四个部分，以用来解决客户对于支付方面所遇到的问题。
目录
一、网站概述 1
（一）网站结构 1
（二）功能分配 3
二、网站建设规划 6
（一）确定主题 6
（二）搜集资料 6
（三）资料整理 6
（四）站点建立 6
（五）编辑CSS样式表 7
三、网站的排版与布局 8
（一）表格排版布局网页 8
（二）主页面 8
（三）次级页面 8
（四）页眉 8
（五）页脚 8
四、网站的风格与形象设计 9
（一）网站整体风格的设计 9
（二）网站的形象设计 9
五、详细操作说明 10
（一）网站首页 10
（二）教育 11
（三）小说 11
（四）文艺 11
（五）青春 11
（六）童书 11
（七）生活 11
（八）经管 11
（九）科技 11
（十）期刊 11
（十一）人文社科 12
（十二）励志/成功 12 *好棒文|www.hbsrm.com +Q: ￥351916072￥
（十三）英文原版书港台图书 12
（十四）单个商品的详情页面 12
（十五）消息中心 14
（十六）客户服务 14
（十七）成为会员 14
（十八）用户登录 15
六、网站的推广与维护 16
（一）网站推广 16
（二）网站维护 17
结束语 18
参考文献 19
致谢 20
附录 21
一、网站概述
此次设计和制作的笙墨轩书店网站是以展示和销售书籍为主，主要分为教育、小说、文艺、青春、童书、生活、经管、科技、期刊、人文社科、励志成功、英文原版书港台图书这12个类别，这些不同类型的书籍面向广大消费者，可以尽情挑选然后购买。
（一）网站结构
网站结构（见图1）
图1笙墨轩书店网站架构图示
1.首页：左侧一栏是新书上架，中间部分的畅销书目
2.子页：
（1）教育类书籍：左侧一栏是新书上架，中间部分为不同品牌及科别的书籍图片、名称、作者及价格（部分国外书籍的译者）
（2）小说类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（3）文艺类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（4）青春类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（5）童书类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（6）生活类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（7）经管类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（8）科技类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（9）期刊类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（10）人文社科类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（11）励志成功类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
（12）英文原版书港台图书类书籍：左侧一栏是新书上架，中间部分为不同的书籍图片、名称、作者及价格（部分国外书籍的译者）
打开笙墨轩书店网站的首页，如下图（图2）所示
网站通过展示logo、动画制作的banner、新书上架和畅销书籍的图片以与图片相对应的简短的文字叙述结合整体背景来向访客介绍了我们的网站的整体色彩格调、风格和相对应的形象。
图2笙墨轩书店网站首页
（二）功能分配
1.导航栏
导航栏所放置的是我们为书籍所做的十二种分类的标题（即：教育、小说、文艺、青春、童书、生活、经管、科技、期刊、人文社科、励志成功、英文原版书港台图书），位置上居于banner之下，也就是网站整体的中上部，一目了然，消费者可以点击自己的所感兴趣的分类从而进入点击书籍链接进行购买。如图3所示：
图3导航栏
2.书籍搜索
搜索功能，顾名思义就是可以客户可以根据自己想要购买的书籍进行来自行搜索，这样可以更快速的找到自己想要购买的书籍。也通过选择商品分类来缩小搜索范围，这两种书籍的搜索方式都是为了可以更快速更方便的找到自己心仪的书籍，省去一些不必要的时间。如图4所示：
图4 书籍搜索
3.我的购物车
点击位于网站右上角的“我的购物车”，进入之后，可以看到自己已经添加的书籍，包括书籍的信息，如书籍的名称、图片、作者、部分文字说明和一些详细的订单详情，如书籍数量、价格等。如图5所示：
图5 我的购物车
4.消息中心
点击网页右上角的消息中心，里面有客户和商家的聊天内容和我们网站根据客户设置的喜好所推送的商品以及客户所关注的书籍或店铺的最新消息。
5.客户服务
在网站上方的最右面有一个客户服务，负责解决客户的一些常见问题及意见反馈。
6.购物指南
在网站的下方有购物指南，初次购物的客户可以根据流程进行书籍的购买。其中包括购物流程、发票制度、账户管理、会员优惠这四个内容。
7.支付方式
在网站的下方有支付方式，主要包括货到付款、线上支付、抵用券支付和银行转账这四个部分，以用来解决客户对于支付方面所遇到的问题。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jmgl/dzsw/350.html
