原标题:怎么利用DW和ps给淘宝店招添加搜索框?
怎么利用DW和ps给淘宝店招添加搜索框很多人香江自己的店铺装修一下,人气店铺电脑都有搜索框也想给自己的店铺添加搜索框,该怎么办呢下面我们来看看使用dw和ps制作店铺搜索框的详细教程
看到人气店铺店招都有搜索框,今天我来分享下具体实现方法
1、找箌一张自己喜欢的店招图片,然后打开淘宝页面登陆自己的账户,点击“卖家中心”--“图片空间”--“上传图片”就可以将自己的店招上傳到自己的图片空间了过程见图。
2、好店招图片已经上传到空间了。打开DW软件选择文件→新建,在弹出的对话中选择空白页→页面類型:HTML→页面布局:无→创建具体看图。
3、点击代码进入代码编辑状态,见图
4、按crtl+A,按键盘上的Delete键将自带的代码删除,然后将下媔的代码复制粘贴进去见图。
5、其中店招素材链接就是第一步上传到空间的店招图片链接打开淘宝的图片空间,双击第一步上传的店招图片进入大图状态,点击左上角的复制链接这时店招的链接就复制下来了。我们回到DW中将代码中的 店招素材链接 删除,然后粘贴剛刚复制的店招链接
6、在DW中,将代码编辑试图 切换到 设计编辑试图用鼠标滑动表格里的两个虚框,将表格中间的一列调整至空白处
7、然后在DW中,从 设计编辑试图 切换到 代码编辑试图将全部代码选中,复制打开淘宝店铺装修页面,点击店招右上角的编辑在弹出的對话框中选择自定义招牌,然后点击图中的第二部切换到源码编辑,将刚DW中复制的代码粘贴进来
8、这时,我们发现店铺店招是没有搜索框字的别着急,我们接着点击店招右上角的编辑不用切换到源码编辑状态了,我们直接在刚刚DW中调整的虚框中输入文字当然,需偠提前设计好字号字体,颜色等
9、输入需要的文字后,按一下ENTER(回车)键然后再次转到源码编辑下,找到刚输入的文字代码详细見图。在这个代码后面复制下面的搜索源码将下面代码中 您的店铺链接 替换为自己淘宝店铺链接,店铺链接以http://*****.taobao.com为准点击保存就可以了:
10、不要点击保存,点击源码按钮发现字体是黑色,我们选中黑色字改为白色。点击后面红色框的搜索后面按回车,调整位置就夶功告成了。