淘宝描述模版制作 图文并茂.docx
《淘宝描述模版制作 图文并茂.docx》由会员分享,可在线阅读,更多相关《淘宝描述模版制作 图文并茂.docx(18页珍藏版)》请在冰豆网上搜索。
淘宝描述模版制作图文并茂
第一步:
打开已经装有的软件AdobephotoshopCS2。
点击:
“文件/新建(Ctrl+N)”,新建一个800*1200的白色空白文档。
第二步:
点击“文件/打开”找到事先准备好的图片。
这里啰嗦一下,最好是事先找到适合自己产品的图片。
让买家一看到你的商品就会想购买的欲望,不要简单的找个图片就做上去了。
这样效果可不太好哦!
接着就把它复制到新建的800*1200的文档里去。
按Ctrl+A全选,
这时会出现一条长方形的虚线。
证明被全部选择了,然后复制Ctrl+C。
第三步:
然后回到我们最前面新建的800*1200的文档上,按下“Ctrl+V”(粘贴),图片就被粘贴到文档中了。
如果位置不合适的话,可以点击左边的“移动工具”,将图案拖动到合适的位置上。
如果图片太大的话可以按Ctrl+T,然后通过周边的点,来缩小复制进来的这个图片。
以达到自己想要的效果。
图片调整完毕后,如果想让图片看起来更加完美,可以再加上一两个图片。
做法和上面粘贴主图片一样。
这里就不重复说了。
第四步:
现在我们来做个公告栏:
首先点击“圆角柜形工具”然后在合适的位置上面画一个长方形,大小根据要放在图片位置设置了,底色设置为白色,不透明度设置为50%,这样可以与北景图更好的融合。
看起来会自然些。
第五步:
再下来我们把要做的连接写上去,一般是“逛逛店铺”“信用评价”“收藏店铺”“店铺介绍”。
好了。
等会可以做切片。
用相同的方法再加下宝贝描述分类:
“宝贝展示”、“付款方式”“邮资说明”“品牌介绍”等!
顺便在上面加上店铺名称哦!
可以防止被人盗用。
第六步:
现在到了做切片的时候了。
要仔细学哦,这个步骤很重要哦!
以前没有做过切片的朋友,在做切片的时候可能会遇到一些问题,不要放弃,多试几次一定可以学会的。
下面我们就把之前准备的文字和公告栏全部分开做切片。
以便以后期做连接。
下面我们要做的就是保存,点击“文件—保存为Web所用格式”,把我们所设计的模板存为在网页使用的格式。
注意他的保存类型,保存后我们会发现有两个文件,一个是HTML文件和一个图象文件夹。
Photoshop的工作到这里就完成了。
大家学会了吧。
呵呵……加油哦!
第七步:
现在轮到Frontpage工作了。
大家要看仔细哦!
首先打开FrontPage,选择“文件—打开”,把刚刚从Photoshop里保存的html格式的文件打开。
打开后我们可以看到,左下角有四个选项。
如果你选取中的是“设计”模板的样子就呈现在我们眼前了。
在模版的任一位置点击右键,选择“表格属性”,在弹出的对话框中将“对齐方式”改为“居中”,然后确定。
第八步:
下面我们来处理一下公告栏。
首先在放公告文字的地方点击右键,选择“图片属性”,选择“常规”选项卡,选中并复制图片的文件名到记事本里,然后点击确定。
然后在放置公告的地方点左键,出现一个黑色点框,按下键盘上的Del键,上面的被删删除后那部分内容就变为空白的了:
然后在空白处点击右键,选择“单元格属性”,在弹出对话框中勾选“使用背景图片”,再在下边的空白处将先前复制在记事本里的图片文件的名称填上,然后点击确定,先前删除的图片又出现了。
这个过程其实就是把这块图片放到将要插入文字的下面(作为文字背景)。
下面的工作就是把公告的文字输入进去,左键点击公告栏,在菜单栏选择“插入--Web组件”,在弹出对话框中选择“字幕”,点击完成。
在弹出对话框中,在“文本”右边的空白处输入你的店铺公告的内容。
如果店铺公告需要分段的话,就要在要分段的地方加上一个“”。
通过调整“延迟”和“数量”来设置文字移动的快慢,延迟的数值越大、数量的数值越小,文字滚动得越慢。
设置完毕后点击确定。
在公告文字上点击左键,会发现出现一个黑色的边框。
这个边框的大小就是公告文字滚动范围的大小。
拖动边框的四周的黑点将它拉大,使它和周围的虚线边框平行即可,不要超过虚线边框的范围。
否则模板会出现断裂。
如果现在预览的话文字是从右向左移动,我们要将文字下而上移动。
因为这样效果会好很多。
下面我们就开始,点击Frontpage左下角的“代码”,切换到代码页面,在“marquee”后边加上“direction="up"”这样文字就变为自下而上滚动了。
注意哦,添加的“up”必须带上引号。
现在我们来预览一下吧!
哈哈……现在从下往上滚动了吧?
点击左下角的“设计”回到模版设计页面,然后按照前边处理公告栏的方法将“宝贝展示”下边准备添加图片的那一条图案先Del,然后再点开“单元格属性”,和前边一样,设置上背景图片,也可以设置成其他的颜色。
这个地方是放产品图片的,而图片的位置也可以自己要求设置,这里我把图片“水平对齐方式”设置为“居中”,把“垂直对齐方式”设置为“相对垂直居中”,然后点击确定。
用同样的方法处理其他各项,不同的是,像“宝贝描述”“邮资说明”“品牌介绍”等需要放置文字的地方应选择“水平对齐方式”应选择“左对齐”,而“垂直对齐方式”应选择“顶端对齐”。
这里再说明一下空白位置的问题。
大家分发现经过上面一番修改以后,准备放文字或者图片的地方,就是“宝贝展示”等下面按下DEL键后变得比以前小了好多。
不要担心添加的文字太多会放不下。
模版做好以后这些地方都是可以根据内容大小自动伸缩的。
大家完全可以在输入文字的时候让它们自动变长。
然后就可以把“宝贝展示”部分的文字写上啦~~同样的,再把后边的“”、“邮资说明”和“付款方式”“品牌介绍”下边的东西都写上。
接下来还有一项工作没有做。
那就是依次将“逛逛店铺”“信用评价”等做上连接。
首先选中要加连接的图块,点击菜单栏“插入-----超连接”输入想要连接的地址,然后点击确定。
、复制到宝贝编辑器里发布后就可以直接点击连接进入相应的地区了。
好了,模板基本完成了。
现在点击“预览”看一下效果吧!
觉得效果不好就再重新修饰一下吧。
文字或图片都可以随时修改的哦!
第九步:
最后我们将做好的模板代码保存起来。
点击Frontpage左下角的“代码”选项。
按Ctrl+A把所有代码内容选择,然后按Ctrl+C复制烤贝下来。
打开一个空白记事本,按Ctrl+V将所有的代码粘贴下来。
最后将记事本内容保存。
保存后就可以随时在淘宝使用了。
呵呵……(具体使用大家可以在论坛找到使用的贴子。
好多的,这里主要讲如何制作,就不讲解了)
Frontpage的工作到此也就完成了,关掉之前记得点下“保存”
打开存放模版HTML文件的文件夹,会发现有一个名字为“image(图象)”的文件夹。
打开我们可以看到,里面有好多图片,都是模版上边的,有小块的、有大块的。
下面我们要做的就是找一个非常稳定的像册,这里我给大家推荐一个非常不错的像册,把“图象”文件夹里面的所有图片都上传到像册里。
第十步:
累晕了,回到刚才我们保存过的那个记事本代码文件,把所有图片在记事本里面的地址都替换为上传网络以后的http地址。
在做这项工作的时候一定要细心,不能漏掉任何一个图片,也不要把图片在记事本里的地址和网络上的地址对应错误。
(万一弄错了,可以重新找到地址再改一下,就可以解决了)还有要注意的就是:
每个地址都要用""包括起来。
少了可不行哦!
好了。
到这里。
终于大功告成了。