当前位置:

旺宝神器 > 卖家学院 > 旺铺知识 > 正文

【晒旺铺】史上最详尽的免费装修教程 内附有视频教程

时间:12/05/02小编:[随机用户名]来源:http://www.6299.cc/人气:

写在前面的话:小店新装修了!旺旺现在几乎都是老板娘在上了,她不懂这个滴~。。。。。

所以有什么问题需要咨询的可以加我们的新浪微博:_Suki_June

 

视频教程更新啦,视频包含了以下三大部的整个实时过程。

http://www.tudou.com/programs/view/dXN1mICUzUc/

 

【软件问题】可以百度一下绿色软件站,上面有的,可以做学习之用。

【常咨询的问题】自己的铺子是不是标准版可以在店铺任何页面最下方看到。

                            软件的安装破解等问题可以百度一下。

                            很多问题其实认真看完帖子和视频以后,就不再是问题了。

 为了避免大家找那三个帖子麻烦,我把本帖改为了那三个帖子的整体流程  先看看最新的店铺效果吧 

 

 第一大步:准备工作}如何在首页添加自定义区

 

自定义区的添加首先需要确认你是否有旺铺,扶植版及以上都是可以添加的。

(1)先登录你的帐号,并进入店铺首页。点击右侧的按钮“装修此页面”按钮,如下图所示:

 

 

(2)点击后,页面变为装修下的状态,在页面底部找到并点击“在此处添加新模块”。

{标准版可以分侧栏(就是下图中左侧蓝色部分)与主栏添加模块。拓展版可以整栏添加模块。}

 

 

(3)点击后,会弹出如下对话框,基础模块中,按蓝色”添加“按钮,添加自定义内容区。

 

 

(4)添加后,在首页会多出如下图的一块。到此首页添加完成。下面介绍如何利用自定义区做简单装修。

 

 

2、我们来看看如何将Dreamweaver(简称DW)软件用进来。(在已有自定义区的基础上)

(1)选中自定义区,点击右侧编辑。会弹出一个如下图的对话框。最右侧的按钮是我们要用到的“编辑HTML源码”按钮,点击后,下面的内容区就可以编辑代码了。

 

 

(2)这里需要用到DW软件了,在DW中做好需要的页面后,如下图所示:

 

 

(3)设计完成后,我们所需要的就是代码区里的部分代码。如果是以表格设计的,我们需要的代码就是这部分 以”<table...>“开头到</table>结束的代码。

 

 

将复制的代码粘贴到2(1)中提到的自定义区中,注意粘贴代码前,一定要先点击“编辑HTML源代码”按钮后,再粘贴。

 

 

再次点击“编辑HTML源代码”按钮后,即回到可见即可得编辑状态下,可以马上看到和在DW设计区中看到的页面一样,如下图。

 

保存,然后发布你的店铺。OK了。

 

第二大步:图片处理}如何在Photoshop中完成图片的一些处理

我使用的是Photoshop CS4版本。

下面先简单介绍一下软件的操作界面,如下图所示:

图中标出了一些区域,与常用的选项。

 

好的,简单介绍后,下面开始傻瓜式一图一图一步一步完成从白纸到导出所有切片的过程。

还是以DW中用到的下面的这个切片图为例子来说明。

 

1、如何使用插入图像、文字与图块等

(1)新建图像

点击最上方菜单栏的“文件”->“新建...”,进入如下对话框进行设置。这里分辨率一般设置为72。这里图片大小设置宽度为950,高度为580.

 

(2)放入素材

这里绿色准线的放入:需按Ctrl+R键,可显示标尺。需要准线就从标尺处按住左键不放拖出。

图片中文字可能不清楚,或被水印挡住。 文字内容如下: 首先将主要素材放到新建的白板上来,并将拖出两条标尺(图中绿线),以确定侧栏190像素,与主栏10像素的间隔,和主栏750像素宽度的间隔。

(3)添加背景色

 

(4)添加文字

 

(5)完成色块绘制与字体添加。

 

2、如何划分切片并导出

完成上诉切片后,点击菜单栏“文件”->“存储为WEB格式...”,弹出如下对话框,选择“JPEG”、"Very high"。这里版本不同,可能是中文哈。选择完成后点击“Save”按钮。保存。OK!

 

最后在你保存的位置下会生成一个文件夹,里面就有所有已切片后的小图啦~! 注意这里保存下来的不是整幅大图! 一步一步做,是不是很容易喃?

 

 

第三大步:网页代码导入}如何在首页添加自定义区

 

先说说Dreamweaver软件。我使用的是Dreamweaver 8 版本(较老的版本,不过功能够用,软件较小),现在的版本应该已经到CS5了吧。

 

点击进入软件后,会有如下一个导航窗口。点击HTML 创建一个新的网页。

 

网页创建完成后,会有如下窗口, 根据图片上的说明,现从上往下介绍需要用到和操作的按钮与区域。

常用选项:这里需要用到的是“插入表格“和”插入图片“按钮。

在代码区上方有三个按钮,分别是“代码”、“拆分”、“设计”,这个有什么用,自己点点就知道了。

接下来是代码区,这里我们只进行最后的复制时需要用到,大多数设计不需要自己手动编辑代码,我们只需要在下面的设计区添加我们所需要的元素即可。

 

到这里大家应该对此软件有了个大致的了解。下面将介绍本次教程的3个主要内容了。此处的例子是小店顶部主栏部分,具体效果可参看小店。

 

1、如何插入表格

 

(1)点击常用选项中的”插入表格“按钮。出现如下对话框,进行图片中的设置。行数

和列数根据需要设置。这里我们设置为2行1列。(图片中的行列数还没有改的哈)

 

 

完成设置后确认,会再弹出一个对话框,也点确定。然后会在设计区中得到相应表格,代码区中也会对应自动生成表格。

 

 

2、如何插入图片

在介绍如何插入图片前,先说明两个词汇”图片地址“、”网页地址“。

 

图片地址:图片地址是指网络中的图片所对应的地址,一般地址结尾为“.jpg”、".gif"、".bmp"、"png"。注意:在此软件中使用的图片地址一定要是网络上的图片,最好是自己购买的外链相册的稳定地址,如下图所示。

 

 

网页地址:网页地址是指我们浏览网页时,在浏览器地址栏中的完整地址,一般以"http://"打头,如下图红框中所示

 

好了,记住这两个地址的区别,今后用到的也就只有这两个需要自己去找的地址了。

下面介绍插入图片并添加链接的几个步骤:

 

(1)点击常用选项中的”插入图片“按钮,弹出如下对话框,将你所需要插入的图片的图片地址复制粘贴到下图红框处,点击确定按钮。(文件名处会自动生成,不需要自己添加)

 

 

好了,图片插入完成如下图所示,是不是很简单喃?

 

 

这里在介绍一下比较实用的一个东西:拆分表格。一般表格建立后,是一个规范的几行几列的形式。选中对应表格行后,如下图所示,点击拆分按钮,可以将改行拆分为需要的列数(也可以将相应的列拆分为需要的行数) 。在这里我们将已插入图片的下一行,拆分为四列。如下两图中的操作:

 

 

完成后,设计区中的表格应该如下图所示:

 

在四个拆分列中分别按照(1)的步骤再插入4副图片,完成后如下图所示。至此表格的使用基本完成,应该不算复杂吧。剩下的部分将介绍 如何添加图片链接与代码复制问题。

【关于图片链接】

一般旺铺里常见的链接有两种做法,一种是整幅图设计后,添加热区链接(就像本店铺的分类栏),另一种是,整幅图设计后,在Photoshop里切片,然后像本教程中以一块一块小图的插入后再添加图片链接的方法。各有使用的优缺点。刚开始制作的各位建议采用后者,比较简单方便,并且图片大小直接影响网页流览速度,切小后的图片更有利于流畅浏览的需要。(各位不希望买家还没有等你偌大的一幅图显示完成就关闭了你的店铺网页吧)

 

下面简单说明一下第二种链接制作的方法,接上面介绍的部分,选中其中一副小图,在设计区下面的属性部分中,会切换为该图片编辑用到的一些属性。简要说一下,红框上面的”源文件“对应的就是之前讲到的”图片地址“,我们需要做的就是把你希望点击该图片跳转到的网页的完整的网页地址复制粘贴到红框的“链接”框中即可。够简单了吧。

 

3、如何复制需要的代码到旺铺自定义区

在完成上述所有设计后,查看代码区中的代码,这时,代码区已经自动生成了许多行的代码,我们所需要复制到旺铺自定义区的代码如下图中所示。

好了,亲们,这次的教程结束。

本文提到的两种工具乃是最为基础实用的,迟早都要学的,不如就从看完本文后开始,学习学习PS,DW?   

 

    

让你的店铺也赶快美起来吧!

 

 

标签:

软件下载

注册送100积分,免费提升流量

  • 互动收藏
  • APP流量
  • 提升购物车