成就商城感觉 -- 淘宝店铺装修三步曲

成就商城感觉--淘宝店铺装修三步曲

点击查看 “店铺效果”，有兴趣的朋友可以加旺旺：衣年服，或QQ：610338260（一方优品）交流。

整体效果图

相信有很多做淘宝的朋友都会碰到一个比较大的问题就是店铺装修了，因为这跟我们实体店铺的装修是一样的，不同的是顾客在街边看到，而淘宝店铺是通过网络看到，如果店铺的装修得好一些，给用户的体验（UED）好一些，那购买力也相应的也会好一些。

下面就来说说店主自己的一些经验，可能不是特别地好，还请大家别丢砖头啊。先说一下淘宝店铺的设计流程（个人经验）。

1.通过设计软件设计好页面图片。

2.把设计的图片切片然后布局成网页。

3.再到淘宝装修页面添加相应模板，把布局好的网页代码粘贴到模块里面即可。

Notes:关于设计、切片软件，请看附录：推荐设计软件。

现在我们一步一步来介绍怎么装修吧。

第一步：首先设计网页图片，这一块涉及得是最广的，因为这在关于你自己的店铺销售的产品、定位、色调等等一系列的因素。关于设计网页图片，作者只说几点自己认为比较重要的吧。

1.销售产品，根据店铺销售的产品来做相应的设计风格。比如：作者的店铺是专业做家居这一块的产品，相应的设计风格就会有家居的感觉。

2.店铺定位，在店铺开始做的时候，作者相信首先第一个概念，卖什么产品。卖给什么样的人。这也就是一个初步的定位了。比如作者的店铺就是就定位于家居产品，目标消费群众就是生活居家的人。

3.色调，一般学设计或画画的人都会知道有三原色的概念,分别是：红、黄，蓝。然而我们在设计的时候也是基于这三原色去设计的。比如：像作者的店铺，本身定位就在家居这一块，所以使用了很多暖色、亮色调，这样给人的的感觉很暖和，视觉冲击力比较强。

4.设计注意事项，设计不要有过多的色调，因为这样会感觉比较花（当然这也跟店铺定位有关系）。少使用一些闪动的效果。

第二步：把图片切片布局成网页，这一块怕是很多人都最担心的一块了。要写代码？好难哦，好高深。其实不然。因为淘宝在设计装修模块的时候就有考虑到这一块的问题，所有的布局对表格（<table>）的支持是非常好的（如果有幸让专业人士看到，可能会觉得用表格布局大没技术含量了，而且多浏览的兼容性也不好，当作者看到别人用表格布的时候也是这么想的，后面到我自己装修的时候发现，淘宝在对代码解析的时候对<div>的支持并不好，而且只支持行内样式（CSS），不支持内嵌、链接样式，所以这点大家一定要记住）。表格相信是大家非常熟悉的了,生活之中随处都可以看得到。最能代表的就算是Office里面的Excel了。现在开始学切片吧。

安装好FireWorks以后打开的界面就如图1所示：

图1 FireWorks打开界面

可以图片中画红线的部分，都标明是那些区域（其实只用得到几个地方而已）。

现在我们来打开一个文件，看看怎么开始切图片。我们在切片的时候，基本上就用FireWorks中的两个工具。图2中用红线标明出来的。

图2打开文件后

在图片中用红线标明出来的有两个工具，这也是我们切片常用到的工具：

切片工具：把图片按特定大小（自定义）的区域保存成单独的一张图片。

放大缩小工具：对整张图片放大或缩小，这个主要是因为我们切片的时候选择特定地方，有可能会看不清楚或精确的时候放大一些会看得更清楚。

现在我们来试一下切片工具，看图3所示

图3选择切片

在图中可以看出有三个步骤，分别是：

1.选择“切片工具”。

2.选择想要的区域。

3.右击选择的区域,选择“导出所选切片”。Notes:记住一定是“右击”。

4.选择以后，就会弹出咱们都非常熟悉的保存文件对话框了（看图4）。输入合适的文件名字。保存，切片就算完工了。

图4保存文件对话框

Notes:在切片的时候，如果在选择切片区域的时候，看不清或是不确定所选区域的精确底，可选择放大工具，把图片放大，小提示：缩小图片是按住“ALT”点击，即可缩小。

把图片切成功以后就可以用<table>布局了哦。店主将以分类，做为示例来介绍：

先上分类的设计图,看图5。

图5分类设计图

看了上图，就开始想要，应该要把这张图切成那几个部分来布局呢。这个问题在切片的时候一定要想清楚哦，把部分想清楚了才可以进行下一步的布局工作哦。

关于具体的切片操作，这里就不重复了，可以看看上面是怎么操作的（1.选择切片工具，2.选择要切片的区域，3.导出所选切片）。下面就把我们切好的图片放在图6上面。

图6选择切片的图片

可以看到上面，把刚刚的分类切成了7张图片，所有的图片都切好了。现在就来学学怎么写代码吧。一般在淘宝上面都只用表格去布局，表格用HTML代码的代表是：table标签。但HTML有个特点就是，大部分的标签都是成对出现的，比如需要一个表格，用HTML代码就要写成<table></table>。注意看的朋友可能就看出来了，结束标签是用/斜杠来表示的。表格里面的一行用<tr></tr>来表示，列用<td></td>来表示（具体想学表格的教程可以看这个网址：http://www.w3school.com.cn/tags/tag_table.asp）

店主来做个小示例吧：布一个三行两列的表格的代码：

<table>

<tr>

<td>第一行-第一列</td>

<td>第一行-第二列</td>

</tr>

<tr>

<td>第二行-第一列</td>

<td>第二行-第二列</td>

</tr>

<tr>

<td>第三行-第一列</td>

<td>第三行-第二列</td>

</tr>

</table>

现在看出来了吧。非常简单的。分类的代码具体实现，感兴趣的朋友可以下载附件中的文件来看看，这里就不要贴子里面贴出来了。

评论内容：发表评论不能请不要超过250字；发表评论请自觉遵守互联网相关政策法规。

用户名(*)