如何制作淘宝网店的模板!!不会的请看过来!!!!
[size=4][color=#ff0000]1。首先需要有耐心,做宝贝描述是一件费时费力的事情,如果你没有很多时间或者耐心,建议请买个宝贝描述,又快又好,如果你先做自己特色的,那么接下去看咯[/color][/size][size=4][color=#ff0000]2。制作宝贝描述的步骤[/color][/size]
[size=4][color=#ff0000]1,先去各大素材网下载素材图片,图片的格式一般是jpeg和ai 格式的,我建议选ai格式的,是矢量图,放大不会失真,用photoshop或illutrate打开,fireworks是不能打开ai格式的图片的。[/color][/size]
[size=4][color=#ff0000]2,打开图片选择需要的部分,如下图[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/1428440.jpg[/img][/color][/size]
[size=4][color=#ff0000]不知道如何选择看下图[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/1428441.jpg[/img][/color][/size]
[size=4][color=#ff0000]选择这个工具,拖拉一个框就可以选择一个区域了,然后复制(ctrl+c),新建一个文件,大小一般是(宽:600~800象素,高1000象素以上)[/color][/size]
[size=4][color=#ff0000]粘贴上刚才复制的图片,并且按键盘的ctrl+t来调整大小(快捷键是很有用的哦)[img=48,48]http://www.dzz.cc/upimg/allimg/070324/1428442.gif[/img],如下图放置[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/1428443.jpg[/img][/color][/size]
[size=4][color=#ff0000]新建立一个图层,点选垃圾桶左边的图标就可以新建立一层[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/1428444.jpg[/img][/color][/size]
[size=4][color=#ff0000]用选择工具拉出一个矩形在新建立的图层里面,然后选择工具栏里的油漆桶倒上想要的颜色,按住alt键,拖拉刚才的矩形,就变成了2个矩形,要将2个矩形分别放在图片的2边,形成了边框,如下图[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/1428445.jpg[/img][/color][/size]
[size=4][color=#ff0000][/color][/size]
[size=4][color=#ff0000]然后选择工具栏中的钢笔工具[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/1428446.jpg[/img][/color][/size]
[size=4][color=#ff0000]钢笔工具是photoshop中比较难使用的工具,只有用多了才能比较完成曲线的绘制,也可以去photoshop联盟的论坛寻找相关的帖子。这个我实在是很难讲好,对不住拉[img=48,48]http://www.dzz.cc/upimg/allimg/070324/1428447.gif[/img][/color][/size]
[size=4][color=#ff0000]新建立一层,钢笔选取一个封闭区间,然后点右键,选择建立选取,倒上喜欢的颜色就可以了[/color][/size]
[size=4][color=#ff0000]选取 工具栏上的矩形工具[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/1428448.jpg[/img][/color][/size]
[size=4][color=#ff0000]新建立一层。在图片的适当地方画上圆角矩形,并用文字工具写上文字,请下载好看的字体,增加美感,并且调整透明度80%可以了。[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/1428449.jpg[/img][/color][/size]
[size=4][color=#ff0000]新建立一层,然后在适当地方写上文字[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/14284410.jpg[/img][/color][/size]
[size=4][color=#ff0000]是不是很简单,下面就是切片工作,是非常精细的工作哦[img=48,48]http://www.dzz.cc/upimg/allimg/070324/14284411.gif[/img][/color][/size]
[size=4][color=#ff0000]选择切片工具[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/14284412.jpg[/img][/color][/size]
[size=4][color=#ff0000]在图片上拖拉就可以完成切片工作,请将图片放大200%或者300%进行切片,这样可以更精细,切完如下图[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/14284413.jpg[/img][/color][/size]
[size=4][color=#ff0000]13, 18 ,21 ,23切片是以后的文字编辑区所以单独切出来,还有按钮也要单独切出来,可以伸长的地方要单独切下,比如边框,这样在dreamweaver里面编辑的时候不会撑破表格时候使样子变得很难看。[/color][/size]
[size=4][color=#ff0000]切好后,点文件,储存为web所有格式,选择jpeg,在不失真厉害的情况下输出大小么尽量小。然后点save[/color][/size]
[size=4][color=#ff0000][img]http://www.dzz.cc/upimg/allimg/070324/14284414.jpg[/img][/color][/size]
[size=4][color=#ff0000]all slices一定要选择的,输出后有一个网页文件和一个文件夹(里面就是刚才切下的图片)[/color][/size]
[size=4][color=#ff0000]好了,上半部分说完了,要注意的是是输出大小尽量要小哦[img=48,52]http://www.dzz.cc/upimg/allimg/070324/14284415.gif[/img],[/color][/size]
[size=4][color=#ff0000][/color][/size]
[size=4][color=#ff0000][/color][/size]
[size=4][color=#ff0000][/color][/size]
[size=4][color=#ff0000][b]上一篇讲到保存为web所有格式的图片 有点问题,准确的 图片如下,也就是储存为1个文件夹,一个网页文件.[/b][/color][/size]
[size=4][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/1437070.jpg[/img][/b][/color][/size]
[size=4][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/1437071.jpg[/img][/b][/color][/size]
[size=4][color=#ff0000][b]其实这样双击打开网页文件就可以看到模版的效果了,首先你会觉得怎么整个页面靠左,不太好看,那么我们[/b][/color][/size]
[size=4][color=#ff0000][b]现在打开dreamweaver2004来改一下 ,dreamweaver到google baidu搜一下就可以下载了,而且还是很大[img=48,48]http://www.dzz.cc/upimg/allimg/070324/1437072.gif[/img][/b][/color][/size]
[size=4][color=#ff0000][b]双击打开dreamweaver,然后文件,打开刚才的网页文件(我的是"未标题-1.html"[img]http://www.dzz.cc/upimg/allimg/070324/1437073.gif[/img],dreamweaver是可视化网页编辑软件,制作起来直观方便,是制作模版,修改网页必备良药......[img=48,48]http://www.dzz.cc/upimg/allimg/070324/1437074.gif[/img][/b][/color][/size]
[size=4][color=#ff0000][b]点击上方的[/b][/color][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/1437075.jpg[/img][/b][/color][color=#ff0000][b]中的拆分,看到代码了吧,别慌,html的代码简单好学(比其他计算机语言好学多了)[/b][/color][/size]
[color=#ff0000][size=4][b]查找[/b]如图[img]http://www.dzz.cc/upimg/allimg/070324/1437076.jpg[/img][/size][/color]
[color=#ff0000][b][size=4]之前填加div align="center"有没有点英语基础呀,有的话就知道什么意思了,然后查找[/size] [/b][/color]
[size=4][/size]
[size=4][/size]
[size=4][/size]
[size=4][/size]
[size=4][/size]
[size=4][/size]
[size=4][color=#ff0000][b]下面是填加按钮的链接,也是非常简单[/b][/color][/size]
[size=4][color=#ff0000][/color][/size]
[size=4][color=#ff0000][b]点击"逛逛店铺",[img]http://www.dzz.cc/upimg/allimg/070324/1437077.jpg[/img]看看下面的属性面板[/b][/color][/size]
[size=4][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/1437078.jpg[/img][/b][/color][/size]
[size=4][color=#ff0000][b]在圈中填加要链接的URL,什么是URL......就是网页地址咯[/b][/color][/size]
[size=4][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/1437079.jpg[/img][/b][/color][color=#ff0000][b]右键点自己店铺里面如圈中的地方,属性中复制下[url]http://......[/url]一大串的东东然后粘贴到刚才的链接中,ctrl+s保存下,按f12,看下效果,点点看按钮是否有效[/b][/color][/size]
[size=4][color=#ff0000][b]其他的按钮也是这样做.[/b][/color][/size]
[size=4][color=#ff0000][b]接下来是把可以编辑文字或者边框的地方的图片删去[/b][/color][/size]
[size=4][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/14370710.jpg[/img][/b][/color][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/14370711.jpg[/img][/b][/color][/size]
[size=4][color=#ff0000][b]删掉后 点击单元格,也就是表格中被删掉的地方,编辑下属性面板中的背景,里面填的就是刚才你删掉的图片地址,去images文件夹里面找哦[/b][/color][/size]
[size=4][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/14370712.jpg[/img][/b][/color][/size]
[size=4][color=#ff0000][/color][/size]
[size=4][color=#ff0000][b]为什么要这样做呢,因为你宝贝的描述也好,图片也好,长度是不定的,这样编辑,就不会撑坏表格,也就是要伸缩的地方都变为背景,hoho,ctrl+s保存下,f12看下效果咯[/b][/color][/size]
[size=4][color=#ff0000][b]其实这样已经差不多做好了,可是切片的图片在你的硬盘上面,别人可是看不到的哦,找个网络空间(网上太多了)[/b][/color][/size]
[size=4][color=#ff0000][b]传上去,传好后,看下属性里面的URL地址,然后分别将原来网页里面的图片替换掉,要做到不按f12的时候一个图片都看不到哦,然后ctrl+s保存,f12完全看出你的宝贝描述的时候,90%的工作已经完成了,我承认很费时间,但是为了给顾客好的印象,大家努力吧[img=54,48]http://www.dzz.cc/upimg/allimg/070324/14370713.gif[/img][/b][/color][/size]
[size=4][color=#ff0000][b]然后点击[/b][/color][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/14370714.jpg[/img][/b][/color][color=#ff0000][b]代码,ctrl+a全选,ctrl+c,粘贴到自己的宝贝描述,也可以粘在文本里面以后方便复制用[/b][/color][/size]
[size=4][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/14370715.jpg[/img][/b][/color][/size]
[size=4][color=#ff0000][b]点击编辑源文件,把刚才复制的东西贴进去,ok已经做好了,点击使用编辑器来填加文字或图片,会word操作吗,[/b][/color][/size]
[size=4][color=#ff0000][b]以后就简单了,[img=58,50]http://www.dzz.cc/upimg/allimg/070324/14370716.gif[/img]累啊。[/b][/color][/size]
[align=center][align=center][size=4][/size]
[size=4][color=#ff0000][b][img]http://www.dzz.cc/upimg/allimg/070324/14370717.jpg[/img][/b][/color][color=#ff0000][b]后面填加/div然后点下网页空白的地方,看到了吧,居中了[/b][/color][/size]
[/align][size=4]"然后点下网页空白的地方,看到了吧,居中了[/size] [size=4][/size]
[size=4][color=#ff0000][b](超级简单)[img=51,67]http://www.dzz.cc/upimg/allimg/070324/14370718.gif[/img][/b][/color][/size]
[/align] 太好了,收藏,ZZ辛苦了 能帮我做就好了,[em112] 收藏。LZ好样的
[em104] 大家一起努力,呵呵,加油,相信明天你会更棒的!![em128]
页:
[1]