博客制作教程
设计制作博客模块背景边框图例详解
编写：山间溪流
网易博客的“风格自定义工具”是一款功能强大的博客模板设计工具，通过这个工具几乎可以制作出90%以上的现有网易官方主题风格。除了可以设置制作更换顶栏图片、导航、中区、底区、页面背景和浏览器背景外，还可以精心雕琢风格各个细节， 如：博客标题文字大小位置、按钮、导航当前项和鼠标滑过项、以及模块花边等等……
设计制作模块背景边框（或称模块花边）是精心雕琢风格的很重要的内容，好的模块背景边框可以给博客增光添彩，大大提高博客的艺术性和观赏性。为了帮助一些新手朋友更好理解和应用本教程的内容，现在我们首先介绍一下有关模块的知识。
我想重点说两个问题：
1：在点击“风格自定义工具”上的“模块”后，操作界面上很醒目的出现了“九个区”，这九个区是什么意思呢？它的意思就是说：一个模块是由九个部分组成的。如果你要用“自定义工具”制作模块的背景边框图，你首先就要把设计好的模块背景边框图分割成九部分，这就是素材的准备，要制作好九个小区的背景图片素材。然后，再按照顺序一个一个上传到模块区域内，最后才能组成一个完整的模块背景边框。本教程就是按照这个意思和思路进行操作的。
2：在博客上，虽然各个模块的背景边框都是相同的，但由于的位置和内容的不同，模块显示出的大小又不尽相同，这就是说，模块的尺寸大小是可以自动变化的。这种变化是依靠“2、5、8小区”的自由变化实现的。所以在选择“平铺方式”时，与其他小区是不同的，你在阅读下面的内容时稍加注意就能发现。
下边我以设计制作圆角四边形模块背景边框为例，介绍一下利用“风格自定义工具”设设计制作模块背景边框的方法步骤。
第一步：在现有博客中区的背景上（可以把背景用截图工具截下来），利用图片处理软件制作出如下图所示的圆角四边形模块背景边框图。(如图1所示）
第二步： 对上图进行剪裁，剪裁后如下图所示：
第三步：将图2分割成9部分，如图3所示：
图3：将背景边框图进行分割
第四步：点击“换风格”→ “自定义风格”→ “修改”，进入博客“风格自定义工具”操作页面， 点击上方导航栏中的“模块”→ “背景”→ “1区”→ “选图”，从电脑中选取“1区”的图片，载入图片后，“平铺方式”选择“不平铺”，并设置调整该区的尺寸，操作设置与效果如图4所示：
图4：载入并设置1区图片的过程和效果图
第五步：点击“2区”→ “选图”，从电脑中选取“2区”的图片，载入图片后，“平铺方式”选择“水平平铺”，并设置调整该区的尺寸，操作设置与效果如图5所示：
图5：载入并设置2区图片的过程和效果图
第六步：点击“3区”→ “选图”，从电脑中选取“3区”的图片，载入图片后，“平铺方式”选择“不平铺”，并设置调整该区的尺寸，操作设置与效果如图6所示：
图6：载入并设置3区图片的过程和效果图
第七步：点击“4区”→ “选图”，从电脑中选取“4区”的图片，载入图片后，“平铺方式”选择“垂直平铺”，并设置调整该区的尺寸，操作设置与效果如图7所示：
图7：载入并设置4区图片的过程和效果图
第八步：点击“5区”→ “选图”，从电脑中选取“5区”的图片，载入图片后，“平铺方式”选择“水平+垂直平铺”，并设置调整该区的尺寸，操作设置与效果如图8所示：
图八：载入并设置5区图片的过程和效果图
第九步：点击“6区”→ “选图”，从电脑中选取“6区”的图片，载入图片后，“平铺方式”选择“垂直平铺”，并设置调整该区的尺寸，操作设置与效果如图9所示
图9：载入并设置6区图片的过程和效果图
第十步：点击“7区”→ “选图”，从电脑中选取“7区”的图片，载入图片后，“平铺方式”选择“不平铺”，并设置调整该区的尺寸，操作设置与效果如图10所示：
图10：载入并设置7区图片的过程和效果图
第十一步：点击“8区”→ “选图”，从电脑中选取“8区”的图片，载入图片后，“平铺方式”选择“水平平铺”，并设置调整该区的尺寸，操作设置与效果如图11所示：
图11：载入并设置8区图片的过程和效果图
第十二步：点击“9区”→ “选图”，从电脑中选取“9区”的图片，载入图片后，“平铺方式”选择“不平铺”，并设置调整该区的尺寸，操作设置与效果如图12所示：
图12：载入并设置9区图片的过程和效果图
第十二步：点击“模块”→ “文字”，设置模块标题文字、重要文字、次要文字、链接文字的颜色，并调整模块标题文字的位置。
图13：设置模块文字的颜色和位置
第十四步：点击“模块”→ “边框”，在边框类型选项中选择“无边框”。去掉原来的边框线。
图14：设置模块的边框：去掉原来的边框线
第十五步：模块背景边框最终的效果图如15图所示：
图15：模块背景边框最终的效果图
山间溪流日志《专版导航》
转发至微博 
