新手开店教你自己动手制作简单精美的店铺装修的方法Word下载.docx

新手开店教你自己动手制作简单精美的店铺装修的方法Word下载.docx

《新手开店教你自己动手制作简单精美的店铺装修的方法Word下载.docx》由会员分享，可在线阅读，更多相关《新手开店教你自己动手制作简单精美的店铺装修的方法Word下载.docx（21页珍藏版）》请在冰豆网上搜索。

把刚才那个模板编辑下 

选取你需要的内容 

进行裁剪 

大小为750*45 

标准版自定义页面最大750宽

得到这个图片 

750*45像素

接下来用到神兵利器DW

下载地址

创建一个新的HTML

选择布局按钮,

首先选择布局按钮旁边那个布局表格按钮 

在空白处拖动鼠标绘制一个750*420的表格 

大小可以直接在下方工具栏处输入数字调整 

。

然后点击布局表格按钮旁边那个绘制布局单元格按钮 

在刚刚画好的表格内拖动鼠标绘制单元格 

首先在最顶端绘制一个750*45的单元格用于放顶端那个掌柜推荐 

其次在其下方绘制4个180*300的单元格用于放产品图片每个与每个之间留有一点空隙 

最后在再4个单元格下方绘制4个180*75的小单元格用于写产品描述 

绘制好后如下图

然后用美图秀秀打开你想要放入的图片 

对该图片进行编辑把其大小调整为180*300（避免广告嫌疑，图片随便找的）

点击右上角的尺寸调整图片大小

然后再DW中插入图片 

在下面这个选项框中选否 

此时会得到如下效果图

点图片下方那个180*70的单元格 

然后调整其背景色

在该单元格中输入产品名称和价格

然后进入自己的图片空间

将刚才插入的图片上传到图片空间，选择好你要放入的分类，以后方便查找，点击添加图片，选择上传的图片

然后复制该图片在图片空间中的连接代码

回到DW中点击 

点击图片，（点击过图片后，变黑的那段代码就是图片的信息，包括图片的地址和宽高）然后点击代码

进入到代码编辑器中 

替换图片的位置 

将<

imgsrc="

给这里加上刚在图片空间复制的那个代码"

width="

180"

height="

300"

复制好后如下图

怎样利用淘宝助理批量上传图片到空间 

并替换代码见这个帖子

咱们继续 

代码替换后回到设计界面如下图 

刚刚的图片已经被图片占位附所替代

然后按照刚刚的步骤将图片分别插入单元格，并替换图片在淘宝空间中的代码，并在单元格下方输入宝贝信息 

，在顶端拆入刚刚截图的那个“掌柜推荐”做好后如下图 

图片因为已经不再本地保存，所以显示为图片占位符。

当把代码复制粘贴到淘宝页面后，就会如期显示图片，请放心。

然后回到代码编辑器中全选代码然后复制 

进入店铺装修页面添加新的自定义页面

点击编辑对自定义内容区进行编辑

选择HTML代码编辑 

将刚才在DW中复制的代码粘贴进去 

然后点发布就能看到了别急还没完 

我们是要做山寨拓展版的 

现在只完成了一半

我们再次在DW中新建一个HTML 

然后制作一个和刚才那个同样高的表格180*430 

，只有同样高才能看起来像是一个整体，这里要注意同样高（整个页面总共宽是930，主页面占750是固定，所以左侧栏只能有180宽，高度和主页面同高。

）

然后按照刚才的方法，再做1、顶端单元格180*45 

2、1个图片展示单元格180*300 

3、产品描述单元格180*75

按照刚才的方法加入图片和产品描述如下图

然后复制代码，在左侧栏新建一个自定义模板 

同样按照刚才的方法将代码粘贴过去 

此时我们的掌柜推荐就做好了 

效果如下