网店美工赢家宝典(第8章)让店铺不再虎头蛇尾之页尾模块

让店铺不再虎头蛇尾之页尾模块第8章Areyouready?第8章让店铺不再虎头蛇尾之页尾模块公共区域的页尾模块页尾让店铺基本信息一目了然8.18.2卖家们总以为页头很重要，往往忽视了店铺页尾模块的设计和利用。页尾模块是一个公用、固定的区域，无论点击哪个页面都会出现页尾模块，好的页尾模块不但可以增加店铺点击率，还可以起到引导买家快速搜索页面的作用。淘宝店铺页尾模块是首页装修页面的最后一个自定义内容区，卖家可以自行设计相关图文和代码，布置在店铺页面的最下方。店铺页尾模块淘宝对页尾模块的高度没有限制，个人建议不要超过500像素，天猫页尾模块的宽度为990像素，C店页尾模块的宽度为950像素。淘宝店铺页尾是一个不可忽视的地方，添加页尾模块的好处在于可以在所有页面显示，那么，我们应该如何合理利用页尾模块呢？第一：为页尾模块添加买家须知、快递信息等内容，买家看到买家须知，就会减少向店铺客服咨询的数量。添加买家须知等内容第二：为页尾模块添加客服中心，如果买家浏览到最后，想要咨询卖家，也可以直接点击客服中心即可咨询，即方便又简洁。添加客服中心第三：为页尾模块添加底部导航信息，提高买家购买率。添加导航第四：为页尾模块添加二维码，以便及时推送消息，增加客户群体。添加二维码页尾模块可以作为买家访问店铺的快速通道，合理地设置页尾信息可以使买家方便的从页尾模块跳回首页或分类信息页面，查看店铺的其他商品及信息。因此，提供清晰的页尾模块能够保证更多店铺页面被访问，使更多的商品被发现，极大地影响店铺的转化率。经过上节的介绍我们对店铺页尾有了初步的了解，那么如何制作一款视觉加营销两者都不缺的店铺页尾模块呢？首先页头和页尾相呼应，因为卖家与买家之间是在完全陌生的空间里进行交易，所以视觉沟通尤为重要，通过页头和页尾的呼应，能够让买家感觉到这是一家店铺的设计风格，而不是两个设计理念。其次要合理地运用页尾模块，掌握好设计的度，不要把所有信息都添加到页尾模块上，做到运筹帷幄才是最关键的。尾页效果操作步骤步骤1

执行【文件】丨【新建】命令，新建一个名称为店铺页尾，尺寸为950×190像素的空白文档，然后为背景图像填充颜色，色值为【#041540】。新建文档并填充颜色操作步骤步骤2

在【图层】面板中创建新图层，在工具箱中设置前景色的色值为【#1f3f91】。选择【画笔工具】，在工具选项栏中设置画笔【大小】为【20】，【硬度】为【0】，然后在图像上点击鼠标左键画一个点。绘制圆点操作步骤步骤3

执行【编辑】丨【自由变换】命令，快捷键为【Ctrl+T】，显示自由变换框，分别在左侧和右侧中间的控制点上拖动鼠标，变换图像。步骤4

调整满意后，按【Enter】键确定变换图像，然后将图像移动到文档的上方，露出变化图像的下半部。操作步骤步骤5

在【图层】面板中创建新图层，在工具箱中设置前景色的色值为【#567cdd】，利用步骤2～4中的操作方法，制作如下图所示的图像。制作发光图像操作步骤步骤6

在工具箱中选择【直线工具】，在工具选项栏中设置填充颜色值为【#a2bcff】，【粗细】为【1像素】，然后在图像上按住【Shift】键的同时拖动鼠标，绘制1条直线。绘制直线操作步骤步骤7

在【图层】面板中点击【添加图层蒙版】按钮，为直线所在的【形状1】图层添加蒙版。添加图层蒙版操作步骤步骤8

在工具箱中选择【渐变工具】，点击工具选项栏中的按钮，在弹出的【渐变编辑器】对话框中设置颜色属性，完成后点击【确定】按钮。#000000#ffffff#000000步骤9

在图像上按住【Shift】键的同时由直线起点向直线终点拖动鼠标，为直线添加渐变效果。操作步骤绘制渐变效果步骤10

将渐变后的直线移动到图像最顶端，并利用【横排文字工具】输入文字信息。操作步骤字体：宋体；大小：12点字体：DidotHIFM64Medium；大小：18点字体：方正兰亭黑；大小：14点输入文字步骤11

在工具箱中选择【直线工具】，利用步骤6～9中的操作方法，绘制2条垂直渐变直线，为文字做隔断。操作步骤绘制垂直渐变直线步骤12

打开本书配套素材【1.jpg】文件，将其中的二维码图像拖动到【店铺页尾.psd】图像窗口中。操作步骤复制素材文件步骤13

在工具箱中选择【直线工具】，在工具选项栏中设置填充颜色的色值为【#08f6ff】，【粗细】为【1像素】，然后在图像上绘制8条直线。操作步骤绘制直线步骤14

在工具箱中选择【横排文字工具】，在二维码图像下输入【扫扫有惊喜】文字内容，完成最终效果。最后按【Ctrl+Shift+S】组合键，将文件为JPEG格式。操作步骤输入文字店铺页尾模块已经制作好了，接下来要利用Dreamweaver软件制作店铺页尾模块的代码？具体操作步骤如下：步骤1

打开Dreamweaver软件，在【文件】面板中新建文件，并重命名为【店尾.html】。操作步骤新建文件步骤2

双击打开【店尾.html】文件，点击【代码】按钮，并删除代码区域内所有代码。删除全部代码步骤3

点击【设计】按钮，回到Dreamweaver软件设计操作页面，点击【表格】按钮，在弹出的【表格】对话框中设置属性，点击【确定】按钮创建表格。操作步骤创建表格步骤3

点击【设计】按钮，回到Dreamweaver软件设计操作页面，点击【表格】按钮，在弹出的【表格】对话框中设置属性，点击【确定】按钮创建表格。操作步骤插入图像步骤5

点击【设计】按钮，回到Dreamweaver软件设计操作页面，点击【表格】按钮，在弹出的【表格】对话框中设置属性，点击【确定】按钮创建表格。操作步骤更换图片地址因为该页尾模块不涉及到文字需要添加超链接的内容，所以只需要更换页尾模块图片的地址即可。页尾模块代码已经制作好了，那么如何将页尾模块展示给买家呢？具体操作步骤如下：步骤1

在淘宝网中进入【店铺装修】页面，在页面最底端的【店尾】内容区域内，新建【自定义内容区】模块，点击该模块中的【编辑】按钮。操作步骤步骤2

在弹出的【自定义内容区】对话框中设置【显示标题】为【不显示】，点击【源码】按钮，并将Dreamweaver软件【店尾】文件内