网店美工赢家宝典(第8章)

Transition Page过渡页1赢赢家家宝宝典典网 店 美 工 赢 家 宝 典Transition Page过渡页2 让店铺不再虎头蛇尾 之 页尾模块第第8 8章章Are you ready?Contents Page目录页第8章 让店铺不再虎头蛇尾之页尾模块公共区域的页尾模块页尾让店铺基本信息一目了然8.18.24公共区域的页尾模块8.1第8章 让店铺不再虎头蛇尾之页尾模块卖家们总以为页头很重要，往往忽视了店铺页尾模块的设计和利用。页尾模块是一个公用、固定的区域，无论点击哪个页面都会出现页尾模块，好的页尾模块不但可以增加店铺点击率，还可以起到引导买家快速搜索页面的作用。5第8章 让店铺不再虎头蛇尾之页尾模块8.1究究竟竟什什么么是是页页尾尾8.1.18.1.1公共区域的页尾模块淘宝店铺页尾模块是首页装修页面的最后一个自定义内容区，卖家可以自行设计相关图文和代码，布置在店铺页面的最下方。店铺页尾模块店铺页尾模块6第8章 让店铺不再虎头蛇尾之页尾模块8.1究究竟竟什什么么是是页页尾尾8.1.18.1.1公共区域的页尾模块淘宝对页尾模块的高度没有限制，个人建议不要超过500像素，天猫页尾模块的宽度为990像素，C店页尾模块的宽度为950像素。7第8章 让店铺不再虎头蛇尾之页尾模块8.18.1.28.1.2合合理理利利用用页页尾尾模模块块公共区域的页尾模块淘宝店铺页尾是一个不可忽视的地方，添加页尾模块的好处在于可以在所有页面显示，那么，我们应该如何合理利用页尾模块呢？第一：第一：为页尾模块添加买家须知、快递信息等内容，买家看到买家须知，就会减少向店铺客服咨询的数量。添加买家须知等内容8第8章 让店铺不再虎头蛇尾之页尾模块8.18.1.28.1.2合合理理利利用用页页尾尾模模块块公共区域的页尾模块第二：第二：为页尾模块添加客服中心，如果买家浏览到最后，想要咨询卖家，也可以直接点击客服中心即可咨询，即方便又简洁。添加客服中心9第8章 让店铺不再虎头蛇尾之页尾模块8.18.1.28.1.2合合理理利利用用页页尾尾模模块块公共区域的页尾模块第三：第三：为页尾模块添加底部导航信息，提高买家购买率。添加导航10第8章 让店铺不再虎头蛇尾之页尾模块8.18.1.28.1.2合合理理利利用用页页尾尾模模块块公共区域的页尾模块第四：第四：为页尾模块添加二维码，以便及时推送消息，增加客户群体。添加二维码118.2页尾让店铺基本信息一目了然第8章 让店铺不再虎头蛇尾之页尾模块页尾模块可以作为买家访问店铺的快速通道，合理地设置页尾信息可以使买家方便的从页尾模块跳回首页或分类信息页面，查看店铺的其他商品及信息。因此，提供清晰的页尾模块能够保证更多店铺页面被访问，使更多的商品被发现，极大地影响店铺的转化率。128.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然经过上节的介绍我们对店铺页尾有了初步的了解，那么如何制作一款视觉加营销两者都不缺的店铺页尾模块呢？首先页头和页尾相呼应，因为卖家与买家之间是在完全陌生的空间里进行交易，所以视觉沟通尤为重要，通过页头和页尾的呼应，能够让买家感觉到这是一家店铺的设计风格，而不是两个设计理念。其次要合理地运用页尾模块，掌握好设计的度，不要把所有信息都添加到页尾模块上，做到运筹帷幄才是最关键的。尾页效果尾页效果138.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然操作步骤步骤步骤1执行【文件】丨【新建】命令，新建一个名称为店铺页尾，尺寸为950190像素的空白文档，然后为背景图像填充颜色，色值为【#041540】。新建文档并填充颜色148.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然操作步骤步骤步骤2在【图层】面板中创建新图层，在工具箱中设置前景色的色值为【#1f3f91】。选择【画笔工具】，在工具选项栏中设置画笔【大小】为【20】，【硬度】为【0】，然后在图像上点击鼠标左键画一个点。绘制圆点158.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然操作步骤步骤步骤3执行【编辑】丨【自由变换】命令，快捷键为【Ctrl+T】，显示自由变换框，分别在左侧和右侧中间的控制点上拖动鼠标，变换图像。步骤步骤4调整满意后，按【Enter】键确定变换图像，然后将图像移动到文档的上方，露出变化图像的下半部。168.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然操作步骤步骤步骤5在【图层】面板中创建新图层，在工具箱中设置前景色的色值为【#567cdd】，利用步骤24中的操作方法，制作如下图所示的图像。制作发光图像178.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然操作步骤步骤步骤6在工具箱中选择【直线工具】，在工具选项栏中设置填充颜色值为【#a2bcff】，【粗细】为【1像素】，然后在图像上按住【Shift】键的同时拖动鼠标，绘制1条直线。绘制直线188.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然操作步骤步骤步骤7在【图层】面板中点击【添加图层蒙版】按钮 ，为直线所在的【形状1】图层添加蒙版。添加图层蒙版198.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然操作步骤步骤步骤8在工具箱中选择【渐变工具】，点击工具选项栏中的按钮 ，在弹出的【渐变编辑器】对话框中设置颜色属性，完成后点击【确定】按钮。#000000#ffffff#000000208.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然步骤步骤9在图像上按住【Shift】键的同时由直线起点向直线终点拖动鼠标，为直线添加渐变效果。操作步骤绘制渐变效果218.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然步骤步骤10将渐变后的直线移动到图像最顶端，并利用【横排文字工具】输入文字信息。操作步骤字体：宋体；大小：12点字体：Didot HIF M64 Medium；大小：18点字体：方正兰亭黑；大小：14点输入文字228.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然步骤步骤11在工具箱中选择【直线工具】，利用步骤69中的操作方法，绘制2条垂直渐变直线，为文字做隔断。操作步骤绘制垂直渐变直线238.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然步骤步骤12打开本书配套素材【1.jpg】文件，将其中的二维码图像拖动到【店铺页尾.psd】图像窗口中。操作步骤复制素材文件248.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然步骤步骤13在工具箱中选择【直线工具】，在工具选项栏中设置填充颜色的色值为【#08f6ff】，【粗细】为【1像素】，然后在图像上绘制8条直线。操作步骤绘制直线258.28.2.18.2.1第8章 让店铺不再虎头蛇尾之页尾模块利利用用P Ph ho ot to os sh ho op p制制作作店店铺铺页页尾尾页尾让店铺基本信息一目了然步骤步骤14在工具箱中选择【横排文字工具】，在二维码图像下输入【扫扫有惊喜】文字内容，完成最终效果。最后按【Ctrl+Shift+S】组合键，将文件为JPEG格式。操作步骤输入文字268.28.2.28.2.2第8章 让店铺不再虎头蛇尾之页尾模块为为页页尾尾模模块块制制作作代代码码页尾让店铺基本信息一目了然店铺页尾模块已经制作好了，接下来要利用Dreamweaver软件制作店铺页尾模块的代码？具体操作步骤如下：278.28.2.28.2.2第8章 让店铺不再虎头蛇尾之页尾模块为为页页尾尾模模块块制制作作代代码码页尾让店铺基本信息一目了然步骤步骤1打开Dreamweaver软件，在【文件】面板中新建文件，并重命名为【店尾.html】。操作步骤新建文件步骤步骤2双击打开【店尾.html】文件，点击【代码】按钮，并删除代码区域内所有代码。删除全部代码288.28.2.28.2.2第8章 让店铺不再虎头蛇尾之页尾模块为为页页尾尾模模块块制制作作代代码码页尾让店铺基本信息一目了然步骤步骤3点击【设计】按钮，回到Dreamweaver软件设计操作页面，点击【表格】按钮，在弹出的【表格】对话框中设置属性，点击【确定】按钮创建表格。操作步骤创建表格298.28.2.28.2.2第8章 让店铺不再虎头蛇尾之页尾模块为为页页尾尾模模块块制制作作代代码码页尾让店铺基本信息一目了然步骤步骤3点击【设计】按钮，回到Dreamweaver软件设计操作页面，点击【表格】按钮，在弹出的【表格】对话框中设置属性，点击【确定】按钮创建表格。操作步骤插入图像308.28.2.28.2.2第8章 让店铺不再虎头蛇尾之页尾模块为为页页尾尾模模块块制制作作代代码码页尾让店铺基本信息一目了然步骤步骤5点击【设计】按钮，回到Dreamweaver软件设计操作页面，点击【表格】按钮，在弹出的【表格】对话框中设置属性，点击【确定】按钮创建表格。操作步骤更换图片地址318.28.2.28.2.2第8章 让店铺不再虎头蛇尾之页尾模块为为页页尾尾模模块块制制作作代代码码页尾让店铺基本信息一目了然因为该页尾模块不涉及到文字需要添加超链接的内容，所以只需要更换页尾模块图片的地址即可。328.2将将页页尾尾模模块块放放入入店店铺铺展展示示8.2.38.2.3第8章 让店铺不再虎头蛇尾之页尾模块页尾让店铺基本信息一目了然页尾模块代码已经制作好了，那么如何将页尾模块展示给买家呢？具体操作步骤如下：338.2将将页页尾尾模模块块放放入入店店铺铺展展示示8.2.38.2.3第8章 让店铺不再虎头蛇尾之页尾模块页尾让店铺基本信息一目了然步骤步骤1在淘宝网中进入【店铺装修】页面，在页面最底端的【店尾】内容区域内，新建【自定义内容区】模块，点击该模块中的【编辑】按钮。操作步骤348.2将将页页尾尾模模块块放放入入店店铺铺展展示示8.2.38.2.3第8章 让店铺不再虎头蛇尾之页尾模块页尾让店铺基本信息一目了然步骤步骤2在弹出的【自定义内容区】对话框中设置【显示标题】为【不显示】，点击【源码】按钮，并将Dreamweaver软件【店尾】文件内的所有代码进行复制，然后粘贴到【自定义内容区】代码编辑区域内，点击【确定】按钮。操作步骤358.2将将页页尾尾模模块块放放入入店店铺铺展展示示8.2.38.2.3第8章 让店铺不再虎头蛇尾之