宝贝描述区代码制作 旺铺装修宝贝描述模板代码制作教程(2)

发布时间:2014/10/8 21:04:48

市面上网店模板非常多,比较出名的当属templatemonster(怪兽模板),怪兽模板起源于美国,很快风靡世界。其网站上提供了很多CMS网站模板,包括joomla,WordPress,magento,drupal,mambo等,以及设计精美的ZenCart,magento,oscommerce网店系统的模板。

宝贝描述区代码制作:

1、找到我们上次保存HTML文件及image文件夹,如图所示:

2、用Dreamweaver8.0打开“促销区.html”文件。并切换到“拆分”模式。在此模式下,上半部分为代码区,下半部分为设计区。

3、单元格背景制作:由于宝贝展示区、宝贝描述区、买家必读区、付款方式区及联系我们都要添加内容,为了避免使用层,就必须把文字内容区的图片设为单元格背景,这样就可以保证不管添加多少内容,都可以让宝贝描述模版自动延伸。用鼠标在设计区点击宝贝展示区图片及文字出现区。如图所示:

然后,将鼠标点击代码区如上图所示红方框前的<td>单元格标记的td之后。

此时可以看到在屏幕下方出现单元格背景框。在背景框内填入images/宝贝描述_11.gif,并在左边设置宽为740,高为104,设置完毕之后,删除单元格中的图片,也即删除<img src= “images/宝贝描述_11.jpg” width = “740” height = “104” alt=””>这一段代码。最终如下图所示:

当然,如果亲们对Html语言熟悉的话,就可以直接手工改写代码了。利用同样的方法处理宝贝描述区、买家必读区、付款方式区及联系我们单元格图片。

4、保存修改后的网页内容。

5、上传图片。由于淘宝不支持本地图片,所以为了宝贝描述模版的图片能正常显示,我们要将images文件夹下的图片全部上传到自己申请的空间当中。

6、用上传的图片替换促销代码中本地图片。这里以上传到www.51.com空间为例来说明如何替换。

登录51空间,找到自己上传的图片。(以宝贝描述_01.jpg为例.)

在此图下方有一个复制按钮,点击复制,就会得到宝贝描述_01.jpg图片的网络地址。然后在Dreamweaver8.0中点击“编辑”菜单,并选择“查找和替换”。

出现如下对话框:

在查找框中输入“images/宝贝描述_01.jpg”,在替换框中粘贴刚才所复制的宝贝描述_01.jpg图片的网络地址。

点击“替换”按钮即可完成宝贝描述_01.jpg本地图片的网络替换。然后用同样的方法,把所有的本地图片全部用网络地址替换过来。全部替换完毕后注意保存。

7、当所有工作完毕后,在Dreamweaver8.0的代码区里,将<!-- ImageReady Slices-->和<!-- End ImageReady Slices -->之间的代码全部选定,并复制下来,然后用记事本新建一个文本文档,并将所复制代码粘贴到新建文本中,以txt格式保存备用。

到此为止我们的宝贝描述模版制作大功告成。

上一篇:独特风格的名片设计 淘宝宝贝图片怎么加水印|淘宝店铺宝贝图片添加水印教程

下一篇:促销区代码制作 旺铺装修促销区模板代码制作教程

推荐货源
微商厂家直供货源
推荐资讯
最新资讯
分类栏目
新手开店 开店经验 淘宝推广
进货技巧 淘宝故事 网店装修
图片处理 网购技巧 行业新闻
创业项目 淘宝考试 品牌排行
微信开店 品牌百科 微商货源