网店美工赢家宝典(第9章)营销宣传不可少之自定义页面

营销宣传不可少之自定义页面第9章Areyouready?第9章营销宣传不可少之自定义页面打破束缚的自定义页面设计单独的促销活动页9.19.2随着淘宝店铺装修自由度地不断开放，越来越多的卖家追求更个性化的店铺装修设计，为了满足这部分卖家的需求，自定义页面应运而生！淘宝是视觉营销的时代，卖家必须重视图片的力量，质感漂亮的图片才能引起买家的共鸣，当然只有质感漂亮的图片也是远远不够的，在淘宝自定义页面中也要结合营销进行规划设计才可以。下面来看几组自定义页面的设计效果。很多卖家看到其他店铺的大卖家可以自定义做活动，也想能够拥有这样的页面，却不知道如何去实现，为了能让卖家们方便、快速地掌握步骤技巧。下面具体讲解一下自定义页面的操作流程。操作步骤步骤1

进入淘宝【店铺装修】页面，将鼠标移至【页面装修】按钮上，在弹出的下拉菜单中选择【页面管理】命令。步骤2

进入【页面管理】页面，点击【新建页面】按钮。操作步骤步骤3

在弹出的【新建页面】中可以选择的页面位置为【电脑端页面】或者【多端同步页面】。其中，【电脑端页面】指的是只有用电脑查看时才显示的页面；【多端同步页面】指的是电脑端、iPad、手机端等都可以显示的页面。在这里，我们选择【电脑端页面】，根据文字提示设置页面信息。新建页面操作步骤步骤4

在弹出的【新建页面】中可以选择的页面位置为【电脑端页面】或者【多端同步页面】。其中，【电脑端页面】指的是只有用电脑查看时才显示的页面；【多端同步页面】指的是电脑端、iPad、手机端等都可以显示的页面。在这里，我们选择【电脑端页面】，根据文字提示设置页面信息。高级页面设置操作步骤步骤5

设置好后，点击【保存】按钮，进入新建的页面中，本例将进入【优米设计品牌故事】页面，根据所需内容对页面进行编辑即可。编辑新建页面页面导航不能删除，不能低于30像素；导航+店招不能超过150像素；自定义页面不支持添加设计师模块。自定义页面提供了个性化装修的功能，使用场景丰富多样。针对淘宝活动的不同需求，自定义页面已成为淘宝卖家们的新阵地，单独的促销活动页面自然成了可以分区域推广的不二选择。促销活动页面可以展现的内容也有很多，如热卖区、上新区、促销活动区等，下面以【圣诞节活动促销页】为例具体讲解。具体操作步骤如下：圣诞活动促销页操作步骤步骤1

打开本书配套素材【1.psd】文件，在【图层】面板中可以看到，该文件的图层大多数处于隐藏状态。图层显示标志，点击该区域，当其呈标志时，可显示该图层中的对象。打开素材文件及【图层】面板操作步骤步骤2

在【图层】面板中点击鼠标右键，在弹出的菜单中选择【显示/隐藏所有其他图层】命令，再点击当前图层左侧的区域，既可以将海报中所有隐藏图层显示出来。显示所有图层操作步骤步骤3

执行【图像】丨【图像大小】命令，快捷键为【Alt+Ctrl+I】。选择【图像大小】命令步骤4

在弹出的【图像大小】对话框中勾选【缩放样式】【约束比例】选项，设置【宽度】为【950像素】，点击【确定】按钮。操作步骤步骤5

弹出【AdobePhotoshopCS6Extended】对话框，点击【全是】按钮。完成图片缩小尺寸操作步骤步骤6

执行【文件】丨【新建】命令，新建一个名称为圣诞节活动页面，尺寸为950×1050像素的空白文档，然后为背景图像填充颜色，色值为【#3d0107】。新建文档并填充背景操作步骤步骤7

将更改好尺寸的【1.psd】文件中的所有图像拖动到【圣诞节活动页面.psd】图像窗口中，并将其放置在最顶端的位置。复制文件操作步骤步骤8

打开本书配套素材【2.psd】文件，将其中的商品图拖动到【圣诞节活动页面.psd】图像窗口中。复制素材文件操作步骤步骤9

打开本书配套素材【2.psd】文件，将其中的商品图拖动到【圣诞节活动页面.psd】图像窗口中。输入文字字体：方正兰亭细黑；大小：43.86点；颜色值：#ffffff字体：方正兰亭细黑；大小：27.75点；颜色值：#48dbeb字体：方正兰亭中黑；大小：22.54点；颜色值：ffffff字体：方正兰亭中黑；大小：52.28点；颜色值：dbff00操作步骤步骤10

利用【矩形工具】绘制两个矩形，分别设置填充颜色的色值为【#e343a7】和【#f6d003】，然后利用【横排文字工具】

在矩形上输入文字。绘制矩形并输入文字操作步骤步骤11

在工具箱中选择【直线工具】，在工具选项栏中设置【填充颜色】的值为【#d23149】，【粗细】为【1像素】，然后在图像上绘制1条直线。在【图层】面板中点击【添加图层蒙版】按钮，为直线所在的图层添加蒙版。绘制直线操作步骤步骤12

在工具箱中选择【渐变工具】，为直线添加黑白黑线性渐变，制作光效风格线条。制作光线操作步骤步骤13

打开本书配套素材【3.psd】文件，将其中的商品图像拖至【圣诞节活动页面.psd】图像窗口中。在这里，只放入两款圣诞节促销商品，卖家们可以根据自己的需求进行放置。复制素材文件操作步骤步骤14

根据步骤9～10中的操作方法，利用【横排文字工具】和【矩形工具】

在图像上绘制矩形并输入文字。至此，圣诞节活动页面就制作完成了，将文件保存为JPEG格式。绘制矩形并输入文字圣诞节活动页已经制作好了，接下利用Dreamweaver软件为页面添加超链接，并且生成代码。具体操作步骤如下：操作步骤步骤1

进入Dreamweaver软件，在【文件】面板中新建文件，并将其重命名为【促销活动页.html】。新建文件步骤2

双击打开【促销活动页.html】文件，点击【表格】按钮，在弹出的【表格】对话框中编辑表格内容，编辑好后点击【确定】按钮。操作步骤步骤3

根据促销活动页的尺寸，在【属性】面板中输入对应的高度数值。操作步骤步骤4

根据步骤3中的操作，建立了一个和图片尺寸相同的表格，点击【图像】按钮，在弹出的【选择图像源文件】对话框中选择已制作好的【圣诞节活动页面.jpg】，点击【确定】按钮，再依次点击【否】【取消】按钮，完成插入。操作步骤插入图像步骤5

点击【图像】按钮右侧的下拉三角按钮，在弹出的下拉列表中选择【绘制矩形热点】命令，然后在图像上绘制热点区域，让其覆盖到图片所需的超链接范围。操作步骤绘制热点区域步骤6

点击选中制作好的热点区域，在【属性】面板中添加商品的超链接地址，并设置【目标】为【_blank】。操作步骤步骤7

根据步骤5～6中的操作方法，为促销活动页的其他商品添加商品的超链接地址即可完成操作。促销活动页的代码制作好后，如何将代码放入店铺展示给买家呢？具体操作步骤如下：步骤1

在Dreamweaver页面中点击【代码】按钮，将代码中所有【Map】属性改成自己喜欢的属性名字，如【hd01】。操作步骤编辑代码步骤2

将【Map】区域内的代码全部选中，执行【剪切】命令，然后【粘贴】到【img】段落后面。操作步骤剪切代码粘贴代码步骤3

将【table】区域内所有的代码全部选中并复制。操作步骤复制全部代码步骤4

进入淘宝【店铺装修】页面，新建【自定义内容区】模块，点击模块中的【