网店模板设计（如何制作淘宝上的门面模版）
本文目录
如何制作淘宝上的门面模版
1。软件工具：要自己制作宝贝模板，首先要选择网页工具，目前业界最流行得就是dreamweaver了，用老微的frontpage也可以。想自己做的朋友最好选择前者，frontpage我以前也用过，后来很少用，主要还是觉得dreamweaver使用更加方便，功能更加强大，毕竟是专门以这个起家的嘛。需要dreamweaver软件的朋友可以从网络上下载，下载方法：在google搜索栏中输入“dreamweaver软件下载”就可以找到很多下载网站了！，其它工具软件你都可以这样搜索到，下载就可以了。不过，记得下载完了一定要先杀毒哦，对我们这些店家来讲，安全是非常重要得。
2。网页制作之前，首先要考虑自己模板的基本布局。先不要着急用dreamweaver开始，正式之前我建议朋友们多看一些别人的作品，总结出宝贝描述模板的大体布局方法，需要的各个选项！最好的办法就是先纸上谈兵，在纸上用笔先勾画出描述模板的布局，注明需要做的一些工作等。不过，宝贝模板的主要模块我总结就是以下就是几块
A.商品的大图B。商品的描述C买家事宜D配送方法E店铺分类F店铺连接
可以在纸上粗粗描绘一下大体的布局，然后再开始下面的工作。
3。准备素材。做网页不能没有素材，素材就是指一些养眼的图片，文字，背景等资源。还有最重要的，也最可能用到的就是你店铺的logo，宝贝的图片，文字介绍跟店铺商品有关的一切了。把这些素材都统统归到一个目录下面（真正正规的方法是按照文件夹来组织自己的素材），方便以后寻找。另外，为了做出更好的效果，可能还要动用一下photoshop这个工具，特别对图片处理都离不开它。下载的方法象上面所说的就可以了。
4。现在基本的东西已经准备好了。那么就开始做吧。
A。首先打开Dreamweaver，新建一个html网页。这个时候工作台上你看到一个白色的区域，就是区域了。
B。添加表格进行布局。这一点很重要，因为表格能够比较方便的让我们进行布局的分配，以及以后各种素材的定位。有了表格，我们心里面就对布局基本有数了。在表格里面可以添加我们的素材，文字，更改背景等。这些文字一般是通用的文字，固定不变的，不会随着宝贝的不同而变化，比如【买家事宜】，【配送方法】等标题性和说明性的文字。这个时候我们还要留出放置宝贝图片，和宝贝描述的位置，这些都是会变化的，因为每个宝贝的图片，和描述都是不同的。因此一定要留出这个位置。龚树华的淘巧网
提示：这一步之前首先要把需要用到的图片上传网络上去，我推荐给大家这个网站。首先上传有一个好处，以后在使用图片的时候，直接可以找到图片，然后复制下该图片的连接添加到图像占位符的来源上面就可以了，不用再一边上传图像，一边网页。
C。在需要添加图片的位置上，添加一个图像占位符，记住，宝贝描述模板中所有的图像都一定是一个图像占位符，不能直接图像。添加完后我们看到一个断裂的方块，证明该对象是个图像占位符。淘巧
【重点理解】为什么不直接插入图像呢？直接插入图像在淘宝里面是无法显示的。在要放置图像的地方，包括背景图等都要使用图像占位符。有了图像占位符，等于是先占好了这个位置，然后在这个位置上添加相应的图片连接地址，这样当在浏览器中查看网页的时候，浏览器自己按照图片的连接地址下载图像，就可以显示出自己想要的图片了。这点很重要哦。
D。在其它位置上也添加一些图像占位符，比如店铺logo，店铺分类等等，这些位置可以为你以后操作带来方便。
E。把图像占位符的地方填好图片的网络连接地址，具体到每个商品图片时候，我们在淘宝里宝贝器中再填进来。在淘宝的宝贝描述器里，我们找到该商品的图片连接地址，填到图像占位符的图片来源上就可以了。这样的话，只需要改动商品图片图像占位符的图像来源地址，就可以显示我们想要的图片了。
6。以上如果不出所料，按照自己的设计，基本上可以算完工了。具体美不美观要自己慢慢调整。现在最重要的就是在Dreamweaver中切换到代码窗口，CTRL+a选中所有代码，选择复制，然后选择一个宝贝，在淘宝里面该宝贝，在宝贝器里面，选择源文件，这个时候就切换到代码窗口了。将先前复制的代码粘贴到该窗口，然后选择模式，切换到图形模式。这个时候你就发现，以前你设置的图像占位符现在都显示成图片了。如果不能显示，就证明该处没有图像连接地址。敢紧选择该图像占位符，然后点击插入/图像按钮，输入相应的图片连接地址就可以了。特别要提示的是：修改宝贝描述主要是能够直接显示宝贝的大图。这个时候一定要更改宝贝图片占位符，把该占位符的图像来源改成是当前宝贝的图片连接地址就可以了。内容来自淘巧网
点击一下预览，可以看看的效果，有什么不满意的，只能以后慢慢修改了。
切换宝贝器到代码模式，选择所有代码复制并拷贝到一个TXT文本文件中保留，以后每个宝贝都可以用到。新建一个宝贝的时候将这些代码在代码模式下面直接拷贝过来，然后切换回图像模式改变对应的宝贝图片就可以了。
怎么样，一切都很简单吧。
下面的图是dreamweaver中图形模式下的宝贝模板的布局，红色字体说明部分是常用到的哦，一定要多加留意。
具体的效果大家可以到我的店铺里面随便点击一个宝贝看下就可以。还有很多地方要完善的，请大家多多指教。有什么问题可以一起探讨噢。只能算是抛砖引玉。希望高手们把你们的设计经验跟大家交流一下。
补充说明一下,在宝贝器中可以使用热点连接这个功能来创建图像上的直接连接功能.比如我的模板上面店铺介绍,逛逛本店,信用评价这些文字上面都使用了连接功能.这个连接功能怎么实现的呢?方法如下:
选中你需要做连接的图片，图像占位符也是支持的。然后这个时候你发现dreamweaver左下脚有一些绿色的小图标。这些是用来在图片上画出一些方形，圆形或其它形状区域，在浏览器中，鼠标经过这些区域的时候就会变成小手的形状，这些区域就是热区。鼠标点击这一热区的时候就会连接到相应的网页。
赶快在图上画一个区域，然后在dreamweaver左下角连接地址中输入你想要连接的网页地址。
将代码考到宝贝器，然后预览一下，当鼠标放到这些区域上的时候，就会变成小手的形状。点击一下，就会连接到相应的网页了。
怎么设计淘宝装修模板
第一你所说的第一印象应该是宝贝详情
在宝贝详情之前，你还需要注意以下几点（关于第一印象的）
首先是主图，因为通过搜索点击宝贝进来后，第一个映入视野的是宝贝的主图
接着是店招
在然后才是宝贝详情
第二。个人建议自己去尝试着做，一个简单的PS教程完全够你用了，因为只有我们自己去设计时，才可以把自己的效果做出来；找别人不论花钱多少，主要是效果真的很难达到。
第三、第一印象中我们首先要从主色彩上来说，看你做的是什么产品，那么针对需求这类产品的人群他们喜欢什么样的颜色，既然他们喜欢，你害怕她没有印象吗？
接着你要考虑的是文字和素材，相同的理论这些需求者有什么样的喜爱和习惯，只要抓住了这两点，你怎么装修，怎么做都可以让其留下印象
网店模版怎么自己制作
一、建立FW文档
打开fireworks，点击界面右侧的新建FIREWORKS文档（绿色方框内），建立一个宽度为800，高度可以视情况而定的画布，建议颜色为“透明”或“白色”。
在界面的左上角处点击文件－导入找到自己要用的背景图片，打开。（如果大家没有合适的背景图片的话，可以去我的店铺里面看看，有许多精品模板图都没加水印的，大家可以右键图片另存为到自己的电脑上。）这时会出现一个类似“「”的光标，通过它可以将导入图片在整个画布中的位置确定。
你也可以在界面的左下角找到四个数值填入框，其中宽度和高度表示的是导入图片的大小，而“X”表示的是导入图片的最左边距整块画布最左边的距离（太过直白，也有点拗口，呵呵），“Y”表示的就是导入图片的最上边距整块画布最上边的距离。填入你需要的数值，确定图片在整图中的位置。
特别说明：因为考虑到部分用户的显示器分辨率为800*600，所以我们建的画布宽度为800，高度1000也是可以要据制作中的实际情况改变的。另外，导入的图片宽度必须≤800。如果图片宽度大于800，可以先在点击左上角处的文件－打开，找到图片在FW中打开，然后在界面上方找到修改－画布－图像大小，再将像素尺寸的宽度改为你想要的尺寸，记得一定要约束比例，要不图片就变形了。
二、改变背景色
把画布的颜色改为导入图片的背景色，这会使画布跟导入图片看起来更像一张完整的图片。方法：点击界面上方的修改－画布－画布颜色，在弹出窗口中选择自定义，并在如图所示的颜色定义框内点击一下，出现一个类似笔的形状，将它在导入图片的背景颜色处点击一下，然后确定。现在画布的背景色就协调了。
三、加入文字
根据你自己的布局构思，在适当的地方用文本工具加入店名、店铺链接（逛逛本店）、店铺介绍等文字，一定要考虑好整体布局哦～
点击文本工具，在图片中你想要的位置拖动鼠标后会出现一个矩形框，然后你可以在操作界面的下方看到属性选项调整好文字大小，颜色，字体等，之后在矩形框内输入你的文字
另外，记得在宝贝展示、宝贝描述文字下分别留出一定的空白地方来，不需要太多。
小提示，类似买家须知这种固定条款，可以直接在图片上制作出来，单独切片（马上会讲到），以免每次填入这么麻烦。
四、加入热点
在需要添加链接的文字上加入热点。
点击如下图所示的热点工具之后，在文字上面拖动矩形框，得到一个热点框。如果未覆盖到文字上，可直接用鼠标拖到文字上并覆盖住。
加入矩形热点工具后，选定这个矩形热点，界面下方如图所示的地方会有链接网址的设定，“替代”指的是当鼠标放在所做的矩形热点上时会出现的文字。目标指网址打开方式，_blank指在新窗口打开。
五、切片
把所有的热点都做好之后，就要开始切片程序了。切片工具的位置在上图中已做说明。
切片的时候要注意，有热点的部分和各个文字部分要单独切出来。（这一步如有不懂的地方，可以问偶。因为有些东东偶也不晓得如何表达）
点击矩形切片工具，（用鼠标按住切片工具，会出来两个选择，选矩形切片工具就OK了）会出现在一个十字架状的光标，然后将整张图一点点的切出来。
在界面下方的如图所示的框一内，“切片”二字下方的框表示的是你所选中的切片的命名，宽度和高度就表示的
是所选中的切片的大小，然后X,Y也是定义此切片在整图中的位置的。框二中，类型选择为图像，图像格式选择为
“JPEG－较高品质”。
六、导出为HTML文件
点击操作界面左上角“文件－导出”
文件名可自行设定，导出－HTML和图像，导出切片，一定要包括无切片区域并将图片放入子文件夹，最后导出。
以下为DW应用部分，可能米米在此表述的不是很清楚，做为菜鸟，又想DIY做模板的话，可能不容易沟通，所以对于那些这或那的规矩，米米并没有去框定，只是把步骤简单的给列了出来。我会尽快想办法，把下面的叙述部分描述得更清楚，如果有不懂的，敬请跟贴提问。
七、打开HTML文件(请详细看看此步中，后来加上去的红色字体部分）
打开DW工具，单击“打开”菜单，找到刚刚保存好的HTML文件，打开。
会看到有“代码、拆分、设计”三个选项，选择“拆分”。现在在界面中，上面部分就是HTML代码，下面部分就是图片模式了。
找到宝贝展示字样的下的空白图片的切片，选中它之后，上面的代表这个切片的代码部分会被蓝色覆盖，将鼠标移到代码部分，将此部分代码“src="图片位置"”中的图片位置复制下来
如何自己设计装修淘宝店铺模板
如何自己设计装修淘宝店铺模板。在装修中的设计一般是指以下设计原则：1.装修风格要与店铺装修风格一致，如果是一家设计公司自立门户，那么在这里面店铺的装修肯定是一个比较大的工程，但是有个小小的问题也不能忽视，就是因为店铺装修风格会影响到店铺的销售情况。因此设计师应该要注意店铺的装修风格，因为设计师会在店铺的前期就设定店铺的主题风格。2.店铺的装修风格要合适的店铺装修风格一定要与店铺的内在气质相匹配，并符合店铺所销售的产品，才能让店铺的销售业绩翻倍。3.商店中的装修风格要协调，避免装修中的杂乱。店铺的装修风格要协调，避免装修中的冲突。风水要应用适当的空间和位置。
PS如何做淘宝店的宝贝描述模板
淘宝店的宝贝描述模板设计如下：
1.用photoshop设计出模版JPGE图片
宝贝模板的主要模块总结就是以下就是几块：A商品的大图、B.商品的描述、C.买家须知、D.配送方法、E.店铺分类、F.店铺连接；
2.切片（核心）
为了打开网页时加快模版显示出来的速度，需要把模版切成一片片，分别上传到相册上，这样打开网页，每个模版切片同时显示，大大减少了页面打开的时间，买家也不会等到不耐烦了，下面是把模版切片操作：
1.虽然photoshop也有切片工具，但往往要切割得很准确图片才不裂开，如使用ImageReady来切片就不会有这样的困扰了。在模版图片打开的状态下，切换ImageReady进行切片处理；
2.切片是有讲究的，凡是需要放入图片文字的地方都必须单独切为一片，这里选择水平划分为10片；
3.点击切片工具，移动到图中黄色小点上鼠标会变为箭头状，拉动切割线调整到适当的位置；
4.划分好后返回photoshop，选中左边工具栏的切片工具就能看到分区，下来就是将切片存储；
5.操作然后存储；要选择JPG格式的这个要注意；
6.然后保存，即可生成一个存放切片的文件夹和一个模版html网页。
3.用dreamweaver把模版转换为代码（关键）
第一，打开Dreamweaver，打开模版；
第二，进入设计操作页面；
选择热点选择要做链接的部分。
4.点击宝贝展示下的切片图，因为这里要插宝贝细节图，需要把它转换成表格形式，这样不管插入的图片多大，表格都会像一张画布一样撑开。
5.输入表格宽度
注意：请忽略下图中“选择菜单栏”的说明，因为在上图已经操作有插入表格。
6.输入高度，填充表格背景
完成后，同样按照以上4到6的步骤将需要修改的切片进行表格转换，按照这个步骤把其他的要加图片或者文字的地方都都把切片转换成表格。
7.切入代码页面，复制代码到淘宝描述的代码器中
把所有的代码都复制下来，如果复制到宝贝描述里面，然后再把里面本地的链接地址换成刚才把切片上传的图片空间里面的地址，这个很重要如果不换的话是不会成功的是没效果的。
然后输入所有的有效链接地址，就可以在刚才们换成表格的地方插入图片和文字了，点击预览就能看到一个精美的宝贝描述模版。
怎么制作淘宝店铺模板
可以自己用用photoshop适合你宝贝风格的页面；也可以在卖家服务市场找适合你的装修软件，直接套图，很多现成的模板可以使用。
请看教程讲解：
第一步：先备份一下我们当前的已经修改过的模版：
1.点击模版进入页面，然后点击备份：
然后我们进入【我备份的模版】这一栏查看：
第二步：我们进入【我购买的模版】然后点击应用，这样直接应用后，就是恢复到出厂设置了，但不要坚上面我们备份了的，先看教程吧：
现在看下如何查看自己买到的模版：
1.点击模版：进入页面，然后点击我购买到的模版 本文来自快乐网
找到以后，点击应用，应用后，就能找到您之前不小心删除的模块了 。
这时这个模块，然后点击 ，进入源代码 ，然后把代码复制下来 ，放到记事本内保存起来 ，一会要用！（这一步很重要哦！）
这时，我们再重复上面备份的操作，进入刚刚备份好的模版，我们再次应用刚才备份好的模版 ，应用后，是不是又返回之前的状态了？ 不要紧，因为刚刚我们已经保存好丢失的代码了。
我们现在在丢失过的地方，添加一个自定义模块，然后插入代码就可以了，跟刚刚复制代码一样操作粘贴即可。
