淘 宝店铺装修网站报告 .docVIP

湖北汽车工业学院 《网页设计与网站建设课程设计》报告 2015-1 一、网店的主题风格说明和产品内容介绍、分类 1.1网店的主题风格 网店在整体的效果上采用巧克力色背景，给人以沉稳、高端、高贵的感觉，使得页面整体呈现出炫酷的色彩，同时在网店图片的选取及图片处理上注意对图片品质及色彩的处理，银白色结合暗淡色给人更加的凸显手表的色彩，让人感觉店铺冷中透热；同时网店的店招也是网站的一大亮点，背景色选取选炫酷金黄色的皇冠的头标，并且闪烁，同时在网店的logo上为“一表人才”的闪烁字体，给人以更加高端炫酷的感觉，这个正好与网站的设计整体效果相匹配，整体上呈现出色彩相互搭配，高端靓丽富贵的感觉，正是这样的设计决定了网站炫酷高贵、冰冷而不失温暖的设计风格。 1.2网店经营的产品及其分类 网店店铺名称为“檀紫香”，其店铺的logo为“一表人才”的闪烁字体，这也就是暗示了我的店铺所经营的产品为手表，具体为“金仕盾”品牌，具体的分类比较详细，如下：在导航条中显示的主要栏目包括“首页”、“手表种类”、“颜色”、“机芯类型”、“风格”、“显示方式”五部分，每一个模块的下面具体分类如下，并且没有个分类中都建立了本类别的宝贝链接。 二、网店的设计思路与网站的结构框图； 在网店的设计中主要表现在网店的整体背景及店铺所呈现出的整体效果入手，并结合店铺及自身的能力来设计出网站的结构框架，具体将从以下两方面来阐述： 2.1网店的设计思路 在网店的设计中具体的思路如下：第一、在纸上面绘制出简单的店铺主要框架；第二、对自己的店铺的具体所要呈现出来的效果进行简单的设计及主要的风格定位（尤其是网店的整体页头、页面的背景色彩（背景图片））；第三、在网络上寻找店铺装修时所需要的相关照片，查看照片之间的相互协调搭配的程度，是否和自己最初的设想是一样的；第四、对自己的网店进行简单的装饰，初步查看效果，并进行及时的调整，必要的时候可以通过ps对不适合的图片进行处理；第五、实现对网店中宝贝的分类及发布宝贝详情。第六、在网络上寻找相关的淘宝店铺的特效效果，并进行装饰；第七、在制作的过程中同时也要注意对现有网店的改进及发布预览，看是否适合自己所需要的效果；第八、也就是最后一步，就是对店铺进行优化及完善。 2.2网店的结构框架 网店的结构框架在整体上设计的是“王”字，从上至下分别为“店招”、“导航条”、“宝贝分类”页面、“特销品”页面及最后的“页底”图片。在店铺中网店的结构框架上具有一定的层次感，自上而下层次分明且结果清晰，产品分类也相对较为清楚。同时在网店的框架设计中，以大图为主，由于考虑到网店销售产品为手表，所以在界面的制作的时候也尽量避免在框架的显示中出现小图片效果不好，而致使网店的整体效果不好。 三、网店的设计过程与截图 第一步：在草稿纸上面开始简单绘制网店的效果图，并对其风格、框架进行确定，在第一步中，最主要的是需要对页面的各部分的宽度及高度的设计及计算，切记在设计中忽视这一步而使得网站在设计过程中出现尺寸不合的情况。 第二步：通过查找网络资源寻找制作网店所需的相关图片及代码，并将图片上传到图片空间（如有不合适的图片需要用photoshop对其进行图片的处理），具体的截图及图片空间上传的照片如下： 第三步：在图片上传成功后我们需要进一步对要进行发布的“宝贝”进行发布，这个可以通过“发布宝贝”按钮进行发布，然后进入下面的页面对添加的宝贝进行相关信息的完善。 由于这个对后面页面中宝贝的介绍及相关的信息有影响，所以一定要弄好。在这个宝贝页面的发布的时候要注意宝贝的发布顺序及宝贝的命名，因为这个方便后面的网店图像与宝贝详情页的链接方便。 第四步：通过“宝贝分类”对导航条进行简单的制作，通过编辑导航条中的“编辑”来进行导航条显示样式的添加。在宝贝中的添加一般选取“添加手工分类”，在这一栏目设置中其子菜单添加时候一定要仔细，因为这块是直接和网店的导航条有直接关系的，当然了在此也可以注意是否添加图片。 第五步：对网店进行装修，主要是对其使用的图片的效果进行，在此之前是一个完美的“店招”的设置及logo的设计，本店中也注重了全屏海报的设计（这个是通过下面的代码实现的）。在店铺的图片效果设计中也应该注意对图片之间的排序。 第六步：将其他的宝贝图片及展示的图片按照同样的方法进行添加。在添加中需要注意的是宝贝的网络地址与其对应的宝贝详情页的链接的图片要保持一致，在这块也可以通过编辑源码进行链接的添加。 当然也可以使用代码直接将空间图片中的网址直接引用。并对添加的图片进行对应的超链接设置，也就是宝贝详情页的链接。 四、网店特色与创新 本网店的特设之一表现在网店的“店招”设置比较独一无二，在店招设置上是将背景图和原本显示的图片进行叠加实现的，所以在店招上能够显示闪烁的效果，并且将背景图片设置为平铺则使