淘宝店铺标题栏自定义样式教程！

这次教大家深度使用表格工具！
大家先看看下面的效果，都是在表格的基础上做出来的，效果图有点粗糙，意在教大家方法，有兴趣的可以看一下！

效果一

                               
登录/注册后可看大图

效果二

                               
登录/注册后可看大图

效果三

                               
登录/注册后可看大图

效果四

                               
登录/注册后可看大图

还可以自定义背景图片

                               
登录/注册后可看大图

以上这些方块就是你的宝贝图片，全部加上对应的超链接就可以做出一个跟系统自带的宝贝推荐模块一样了！而且可以加上图片背景，更具个性！
下面开始简单的教程！
1、我们要用到的就是这个“自定义”模块

                               
登录/注册后可看大图

2、点击编辑该模块

                               
登录/注册后可看大图

3、这里有个插入表格按钮

                               
登录/注册后可看大图

废话一番（在网站建设中大家都知道，表格的重要性，可以说网页上所有的布局都是靠这个表格来定位排列的！但是这里对表格的编辑的功能很有限，只有大家看到的这些长度宽度和行列的数量之类的东西，很多功能都被埋没了！本来我打算在代码中直接教大家修改的，但是考虑到一部分新手没有接触过代码这东西，所以我现在选择了用软件教大家，这样看起来更加直观易懂！）
二、首先大家要去下载Dreamweaver这款软件，我用的是Dreamweaver 8 ，虽然这个版本已经是被淘汰掉的东西，但是我个人比较偏爱这个版本的Dreamweaver，大家就将就着看吧，其它高版本的也是一样可以用的，需要的功能都可以找到！

                               
登录/注册后可看大图

1、我们打开这个软件

                               
登录/注册后可看大图

2、创建新项目，单击“HTML”

                               
登录/注册后可看大图

3、出现这个编辑区域，是不是跟自定义的工具栏很像呢？这里也有个“插入表格”

                               
登录/注册后可看大图

4、如果你打开的时候看不到这些工具，你可以在菜单栏上的窗口→插入和属性一起勾上！

                               
登录/注册后可看大图

5、要是上面显示的工具里没有表格这些工具，你就单击这里。

                               
登录/注册后可看大图

6、选为“常用”就有了，还是找不到的话你就在最上面的菜单栏中的插入→表格（快捷键：ctrl+alt+t）

                               
登录/注册后可看大图

7、接下来就开始插入表格，我是做宽为950的模块用的表格，所以我的宽是950，边框粗细一般填0，这样就看不到了，为了美观都是不需要的，个人喜欢，其它不变！

                               
登录/注册后可看大图

8、这样就插入一个表格了，这个表格在编辑中看是虚线的，实际是不显示的

                               
登录/注册后可看大图

9、我们拖动下面和右边的锚点可以改变表格的大小！

                               
登录/注册后可看大图

10、这些在淘宝那边也可以做到，下面的就是不能做到的了，我们现在合并左侧的单元格！
跟Word和Excel差不多，拖动鼠标选择它们。

                               
登录/注册后可看大图

11、然后单击属性栏中的合并按钮！

                               
登录/注册后可看大图

12、变成一块了！

                               
登录/注册后可看大图

13、然后我们在调整一下表格，大致是这样！

                               
登录/注册后可看大图

现在我们往表格中加图片，这些图片的大小也要跟你需要的图片大小一样，这样放进去表格就不会变形了，大了小了其实也不要紧，只是那样的话又要讲图片在拉小或拉大，表格也要再调了

14、插入图片的方法是单击你要插入图片的单元格，然后单击工具栏上的插入图片按钮。

                               
登录/注册后可看大图

15、然后就弹出这个选框，我们可以选择本地的图片也可以选择网络的图片！因为这是网络上用的，最后一定要转为网络图片的，这里编辑的时候可以不用网络图片，因为显示慢，所以用本地的，做好之后在替换就可以了！

                               
登录/注册后可看大图

16、点确定的时候会有提示框，不用管，全选“确定”就可以了，这样这张图片就进来了！

                               
登录/注册后可看大图

17、继续将其它的也插入图片

                               
登录/注册后可看大图

18、然后在下方加上文字说明

                               
登录/注册后可看大图

19、居中：选择文字，然后单击下方属性窗口的居中！

                               
登录/注册后可看大图

20、接下来就是给图片和文字加上超链接，链接到你对应的宝贝页面就可以了，方法还是选中文字，然后在属性窗口的链接窗口中粘贴你的宝贝链接就可以了！

                               
登录/注册后可看大图

21、加了链接的字变成蓝色的了

                               
登录/注册后可看大图

22、接下来给图片加链接，方法是一样的，这样不管你单击文字或是图片都可以链接到对应的宝贝了！
字体的颜色大小样式都可以在属性框内设置，这些不难自己可以摸索！

23、另外我教大家加背景图片，首先要按下CTRL键，之后将鼠标移到表格最边的边看，这时整个表格会出现高显边框，点一下就选中整个表格了

                               
登录/注册后可看大图

24、这是属性框的内容就变成整个表格的属性了

                               
登录/注册后可看大图

25、我到百度找了一张天空的图片，将其地址放到“背景图像”里，按回车！

                               
登录/注册后可看大图

26、显示出全红的效果了。


27、上面依然可以写文字和加图片！这样的图片有些生硬，大家要是想结合的更好的话，我建议做透明的图片，也就是PNG图片，那样的话效果会更佳！

爱上E网 http://shop70889153.taobao.com

登录/注册后可看大图

28、这样给空白的背景添加了不少色彩，懂得用PS的朋友可以自己设计图片，然后结合图片的摆放达到更完美的效果就可以了！

29、我们再回到刚刚做的那个例子吧，这个简单的布局已经做好了，现在要做的就是将这些用到的图片全部换成网络的就可以了！方法就是将你所用到的图片都上传到你的图片空间去，然后替换就可以了！
这里有三个编辑模式，分别是：代码、拆分和设计！

                               
登录/注册后可看大图

设计模式就是我们一直在用的，可以很直观看到图片和变化的！
代码模式就是全数字的，没有这些图片和布局看的！
拆分模式就是这两种的结合！

30、我们用拆分的吧，两种都可以看到，大家就容易明白了！上面是代码，下面是设计！

                               
登录/注册后可看大图

31、接下来是替换图片，你只要用鼠标单击一下设计窗口中你要换的图片，上面代码也会跟着跳到对应的语句中！

                               
登录/注册后可看大图

32、我们只要换掉当中的图片连接就可以了。也就是src=" ",这对双引号里面的地址！

                               
登录/注册后可看大图

33、在这里我就不上传那些图片更换了，知道是怎么换就可以了！

34、全部换好之后就复制里面的代码，不用全复制，只要复制"

"中间这部分就可以了，其余的都删除！

登录/注册后可看大图

35、然后回到装修店铺页面，编辑自定义模块，将其转到“源码”编辑模式！

                               
登录/注册后可看大图

36、将刚刚复制的代码放进去点确定就OK了！

                               
登录/注册后可看大图

                               
登录/注册后可看大图

好了，这次的教程就到这里了！这个是教给不懂得PS的朋友用的，你懂得PS的话你也可以学我之前教的那个做店招导航的教程那样做也可以，做一张完整的图片，然后用切片工具切开，然后图片全换成网络图片，加上连接就可以了！其实PS保存下来的都是一样的，都是用到表格来布局，表格的作用是非常大的，大家可以多多学习一下！
还有忘记说一个重要的了，表格每一格都是可以分开定义背景色和背景图片的，只要在对应的单元格单击看属性就可以了！还有边框那些大家自己摸索一下吧！

注意：

　　1.如果在整修过程中遇到任何问题可以跟帖留言，我们有空会尽力帮你处理！

　　2.由于旺旺为工作所需，所有发到旺旺的信息都不会给予理睬，请谅解！谢谢支持！

[table=80]

                               
登录/注册后可看大图