只给新手看,前辈不要介意小弟班门弄斧。
看上去长、很麻烦,只要你一步一步照着试做一下,你也能做出漂亮的宝贝描述模板了。
能者不难、难者不能。先试着简单的,熟悉流程后,再做复杂的。
小弟这应该是最细致的教程了。融入点自己的感觉,你甚至可以做一般的网页了。呵呵,很简单,建议新手都试一下,毕竟找别人做或网上下载模板,都没有自己做的有成就感以及符合自己店的特色。
小弟也是新开的店铺,看到别的店宝贝描述很美观,总想让自己的宝贝描述也做得美观点。大家也知道网店的页面,就好比线下的产品,美观与否决定了这商品能不能吸引和留住顾客的眼光。在网上找类似的模板,可要不是花钱、要不就是不能完全达到自己想要的感觉以及不能完全体现自己的特色。最后下定决心自己做,小弟也只有一点皮毛的经验,在此分享给广大同是新手的朋友们。觉得好,你顶一下。觉得小儿科,请你绕道,毕竟这是给广大想小弟这样的新手看的。
第一、确定自己店铺的风格,可以去别的店找找灵感,脑子里要有基本的构思(做成什么样,什么色调等等)
第二、资料准备。可以网上寻找相关图片,有一点ps技术的可以自己作图
第三、软件准备。至少准备两款软件,我用的是:Photoshopcs2(图片制作软件)和DreamweaverMX2004V7.01(网页制作软件)
下面正式进入:
1、打开PS软件,新建(如果你的宝贝描述左面有分类那一栏,那么宽度最好就是740像素或750像素)高度可以随便,能空出一定的地方添加文字就可以了。我这选择的800像素。
2、把网上下载的图片用ps打开并拖移到刚建立的图层,然后美化一下做好布局。当然你也可以自己做,我的是自己做的。在此就不一一列举作图的过程了。注意,一定要空出添加文字的地方,以方便下一步切片。
3、相当重要的一步,切片。好比咱们玩的拼图游戏,切片就是要把一张图片分成N个图片。切片是个需要耐心的活,大家可以找新图片练练手。哪些地方你需要加超链接,你都要切出来。当然,不切也可以,在DreamweaverMX2004V7.01里可以设置图片热区也能达到效果,但很多新手不太了解DreamweaverMX2004V7.01的使用,小弟就切片教大家吧。
然后保存为web格式
这时会弹出对话框,你点击确定
4、进入网页制作阶段,打开DreamweaverMX2004V7.01,然后打开刚刚你保存的HTML文件
这时图片在页面的左边,别慌进入下一步
5、让网页图片居中,点击代码,在图中所示地方加上divalign="center",注意一定要在引号后,括号前加上这个代码。
再点击设计,你看看图片是不是居中了呢~~呵呵。
6、找到构图时设计的以后宝贝文字输入区那个切片,delete键删除,然后找到下方编辑区有个背景,点击,找到刚刚删除的那个图片,并打开。
再在文字输入区输入几个便于以后记忆的文字
以此类推,把所有文字输入区的图片换成图片背景的形式。
7、制作链接。找到你想把它设置成超链接的图片并点击图片,然后在下方编辑区找到链接,输入想要链接到的网页地址。
输入完链接地址后在链接下面的目标下拉菜单中选择_beank
这样链接的网页是以新页面的形式打开,若不选此项,是默认的在当前页打开,即把现在浏览的页面换成链接的页面,这样容易把买家搞晕——刚刚我浏览的宝贝去哪了?
以此类推,把所有你设计的链接图片都加上超链接。注意在制作过程中常按F12键保存,选“是”,也可以预览你编辑的效果。
8、这些做好后,你F12看看,效果怎么样,以及点超链接看看是否正确,若都正确,效果也还不错,咱们进入下一步——上传图片。找一个你常用而且安全且支持外链的相册,我用的是又拍图片管家,VIP客户。网络相册很多,有免费的也有收费的,你自己选择,比如51相册这些都不错,收费的相对安全性好点。把你保存图片为web时生成的文件夹中的图片全部上传到相册中。
注意:分隔符也要上传
9、这一步也需要耐心,把网页制作里图片的地址全换成你网络相册里对应图片的地址。因为网页制作软件里链接的是本地图片,一旦上网别人会看不到的。这很需要耐心,如果你切片的图片过多,那更需要时间,我共切了30几个图片,有点累啊。注意,一定要一一对应,不然就乱了,所以不要去修改上传图片的名字,便于好找。你可以随便按F12预览。替换图片可以在代码里完成,即点击代码,然后一一替换,一定要把网络相册图片地址替换到引号内。
也可以在设计里,点击图片,然后在下方编辑栏里把源文件换成网络相册的图片地址
注意:用这种方法,一定要替换成网络地址后点击一下其他空白区,再按F12看效果,不然你看到的还是链接本地图片的效果。
注意:分隔符也要换,这只能在代码里完成。
10、此时你F12看看效果,是否满意。注意,在网页制作软件里,页面会变成这样:
这很正常,因为全部替换了网络地址,按F12预览看就好了。
好了,模板制作成功了。下面是更新到宝宝贝描述的过程。
11、效果不错后,就复制全部代码,点击代码,把里面的代码全部复制,记住是全部复制。
12、如果你已经上传了宝贝那么卖家中心——出售中的宝贝——编辑。新上传宝贝就直接在编辑时注意这一步。在编辑栏里点击换成HTML编辑格式,把以前的代码全替换成你刚复制的代码。我用的是淘宝助理,其实编辑栏一样的。大家看~~
再切换成正常编辑模式,看看,是不是已经有宝贝模板了
这时留给文字描述的地方可能会凸出,这没有关系,只要你制作时预览没有凸出就可以了。然后添加上相应的文字和宝贝描述中的图片,预览宝贝描述看看效果怎么样。改好后就上传宝贝。OK啦~~~
大功告成了。
好累。第一次写教程,希望能给像小弟这样的新手一点点帮助~~~
过程就这样,各位再慢慢试着做一下,有些地方可以再加优化代码,如,滚动文字等。有不太明白的地方,欢迎大家旺我(旺旺号:1孑然一身),咱们一起进步。
页面效果预览:http://ejxdian/