|
首先，和大家说明一下，这个装修方法是用在自定义内容区的，没有开通旺铺(扶持版适用)的朋友就不用看了
表格的应用能实现什么，给大家举个例子，就用自己小店的图片排版吧，大家别介意~~![]()
可能一些新手有郁闷过这种情况，装修的时候，添加了一张图片，想在图片右边写一些文字，确只能写在最底下，右边有一大片空白地方无法写入内容，如图：
...................................................................................分割线.........................................................................................
这是什么原因，别人怎么实现呢？其实这个用表格就可以实现的。
表格在哪里？好的，做表格需要软件的，建议大家使用微软的Frontpage~比较适合新手哦~
给个地址给大家下载：
有朋友说之前提供的下载地址有毒，大家等我给找到一个安全的再发上来，或者大家可以自己去搜索一下"Frontpage 2003"的下载。
其实也可以用DW这些东西做，但是我就不介绍了，而且我也不是很懂。所以还是向大家介绍这个吧~
下载ing..........................
下载完成...............................
安装.............................
...................................................................................分割线.........................................................................................
大家安装好这个软件之后，打开它~图标是这样的~~  ![]()
打开之后界面如下，大家请看。
...................................................................................分割线.........................................................................................
OK，开始。
一.建立表格
点击工具栏上的“表格”-选择“插入表格”-选择“表格”。之后弹出如下窗口
框框部分是需要修改的，最好按我这个设置吧（当然需要多少行和多少列的表格，是按您的具体情况决定的哦，我这里设置的是一行，四列，具体一行四列是什么样的看下面你就知道了）淘宝自定义区宽度全满是750，所以我这里设置的宽度是750，其他的设置大家稍微看一下，或者都试一下修改，相信你会明白的！![]()
...................................................................................分割线.........................................................................................
大家看到，表格已经建立出来了，一行四列，大家可以看得懂吧？！
接下来要在表格中插入图片咯~往下看，先选中第一个格子(术语为单元格)
...................................................................................分割线.........................................................................................
点击工具栏上的“插入”-选择“图片”-选择“来自文件”
...................................................................................分割线.........................................................................................
框框部分填入图片地址，然后点击插入！插入之后，就可以看到第一张图片了，看下图
...................................................................................分割线.........................................................................................
看到第一张插入的图了，但是大家也许会奇怪，为什么其他列的格子都往后缩了？这个不要紧，调整每个格子的大小就行了，就像我这里，第一张图片分辨率是190*190，那我就把第一个单元格的宽高调整为190*190，调整方法请往下看
...................................................................................分割线.........................................................................................
对着要调整的格子点鼠标右键，选择“单元格属性”
...................................................................................分割线.........................................................................................
弹出这个窗口，框框那里就填入190*190（这个根据你图片大小来填写哦，因为我插入的图片是190*190）
...................................................................................分割线.........................................................................................
看到了吧？调整好之后，自动适应了~如上图
其他图片按相同方法插入，还有调整单元格大小，也按相同方法的~
（提示：插入的图片最后高度都要一直，不然一张显示高一点，一张低一点，表格会自动变高到最高那张图片的高度哦~这样其他矮的图片上下方都有空白出来了）
（![]() 我觉得我这样解释怪怪的，不知道大家听不听得懂- -）
好了，三张图片插入。最后一个格子我是放店铺的联系方式，这里要说明了，因为我这个格子顶上添加有一张图片，图片下方才是输入联系方式的，大家继续看下去~要耐心哦
...................................................................................分割线.........................................................................................
...................................................................................分割线.........................................................................................
接着选择按行，分两行出来，因为是上下两行嘛！
...................................................................................分割线.........................................................................................
接着在这两行的上行插入“联系我们”的图片
（这张图片制作方法有帖子的，也是我写的，呵呵，帖子地址在这里：http://bbs.taobao.com/catalog/thread/154503-7940197.htm）
添加图片进去之后如下图，大家发现，图片上下部分是空白的，怎么样让它适应图片呢？
一样和前面说的一样，调整格子大小~这次我们可以调整下行的大小
...................................................................................分割线.........................................................................................
调整下行大小一样可以限制上行大小的，大家看下图
对着下行点右键，选择“单元格属性”，然后看下图
...................................................................................分割线.........................................................................................
这里要注意了，宽高的设置到低是什么样，请看图片中的说明
...................................................................................分割线.........................................................................................
这样设置之后，请看下图，格子自动适应了
...................................................................................分割线.........................................................................................
接着是什么？当然简单咯，下行空白的格子输入自己的内容，可以是店铺公告文字啊，旺旺联系之类，我这里是旺旺联系，跟大家说明一下制作方法，看下去![]()
...................................................................................分割线.........................................................................................
接着输入文字，如下图
...................................................................................分割线.........................................................................................
接下来是要添加旺旺在线的效果了，添加这个是要代码的，具体代码获取教程大家可以参考我另一个帖子的底部
帖子地址：http://bbs.taobao.com/catalog/thread/154503-7940197.htm
明白怎么获取代码之后，回到软件，如下图，切换到代码区
...................................................................................分割线.........................................................................................
如下图，把旺旺在线的代码加入到各个不同人的后面，粘贴进去即可。
...................................................................................分割线.........................................................................................
代码插入完成之后，切换回到设计视图，如下图（这里我没有加入旺旺代码，做演示而已）
...................................................................................分割线.........................................................................................
大家看到，效果已经完成了！呵呵~~满意了就复制它到店铺吧！
...................................................................................分割线.........................................................................................
最后一步，复制到店铺自定义区！
...................................................................................分割线.........................................................................................
教程到此结束
|