斗妻于晴下载:菜鸟也能做音画贴（二）——不用代码也能自己做边框

菜鸟也能做音画贴（二）——不用代码也能自己做边框   老力木头的空间_百度空间
（文/老力木头）
上次我们在《菜鸟也能做音画贴》里介绍一个了借用别人做好的现成边框的简单方法。但是，最好的办法还是自己学会做边框。
这次我们就介绍一个不用代码也能自己做边框的简单方法。
首先，我们体会一下边框的原理。根据我的体会，我们可以这样来理解：我们先放一张大的图片，然后在里面居中放上几张依次缩小的图片。那么，对于最上面的小图片来说，它下面那几张大图片露出的边沿，就是它的边框。你说是不是这个理？
那么在电脑上是怎么来体现这个理的呢？是用“嵌套表格”的方法来体现的。高手们用HTML代码制作的表格是网页上划分栏目区域，分类文字内容、拼嵌异形图片最基本的要素。制作表格是制作网页必不可少的技巧，几乎所有结构复杂、图文并茂，栏目众多，内容庞杂的网页都少不了用表格来实现。音画贴里华丽的边框正是用表格来实现的，是用一层套一层的表格（“嵌套表格”）做出来的。
所以，音画贴边框的原理可以概括为：
1、用平铺的图片作表格的背景，或者给表格设置背景颜色。
2、在表格中嵌套表格（矩形框里套矩形框）。因为里面的表格比外面的小，居中后，四周会露出外层表格的背景图案或背景颜色。
3、层层嵌套。多层表格，只有最里层的表格是用来显示帖子内容的，外层的表格都是装饰。
但是我们不会象高手们那样用HTML代码制作表格呀！别着急！懂了这个原理，我们不用代码也能做。
我们可以利用“html在线编辑器”来做。html在线编辑器是一个“所见即所得”的编辑器，非常直观。
下面是html在线编辑器的地址：（存到收藏夹里，方便经常打开用）
http://ny.xmu.edu.cn/editor.asp
请点击打开它看一看，然后回来看下面两个视频教程（主要看前面怎样做边框的一部分，后面如何放到博客去的部分不适合百度空间，可看可不看）。
',1)">
',2)">
看过了视频以后，我老力木头来归纳一下用html在线编辑器来做边框的具体方法：
我们先打开html在线编辑器，了解一下html在线编辑器的有关部分及其功能。

上图是编辑器界面的上端，在第三排图标中，第九个图标，你把鼠标对准它，就会出现字样：“插入表格”，这就是专门制作边框的图标，请牢记它，我们现在只用到它。其余图标现在不要管。
上图是编辑器界面的下端，主要注意第一至第三个图标：“编辑”、“源代码”、“预览”三项，其余图标和数据现在不要管。
开始做边框，先点编辑器界面下端的“编辑”，然后把光标定在编辑器界面最顶端，再点编辑器界面上端的“插入表格”，会出现一张图：

“表格属性”对话框的主要设置介绍如下（很重要，务请搞懂牢记）：
表格大小：
行数和列数都设为1。
表格布局：
对齐方式全部设为居中，熟记就行。
边框粗细（指边线粗细）可以根据需要调整，一般在0-5之间；有个1-2就可见一个细边条。一般设为0。
单元间距、单元边距主要是根据图片的完整体现进行宽、高度调整。如选用的图中的图案较大，为了完整体现图案，可以设置得大一些。大边一般在20-100，小边一般在1-20。
再下面的表格尺寸和表格样式的前三个都别去管它。
只要在表格样式的最后一个：“背景图片”中粘帖进所选好的一个图片地址（注意，这里随图片地址的变化，就会出现一层层的图片效果，可以是jpg静态图，也可以是gif动画图，如要效果好，一般多选用gif动画图）。
设置好了以后，点“确定”，就可见一层效果。
然后再点：“编辑”，把光标放在第一层的左端中间，再点编辑器界面上端的“插入表格”，出现一张图，进行设置后点“确定”，就可见二层效果。
以后每层都是在确定后见到效果，然后再点“编辑”---定光标--开始下一层的设置。
以上方法搞懂了，就可以举一反三，随心所欲地制作边框了。
现在给你下面这些素材，你来试一试：
第一层图片地址如下：
http://hiphotos.baidu.com/%EE%DA%CA%F7%C7%ED%BB%A8/pic/item/8463508a12d1a858c9fc7a1a.jpg
单元间距、单元边距设为40
第二层图片地址如下：
http://hiphotos.baidu.com/%EE%DA%CA%F7%C7%ED%BB%A8/pic/item/fe3761a8a5d6b8b61f17a2ca.jpg
单元间距、单元边距设为15
第三层图片地址如下：
http://hiphotos.baidu.com/%EE%DA%CA%F7%C7%ED%BB%A8/pic/item/78dfe9ee13e6e57dadafd5ca.jpg
单元间距、单元边距设为10
动手做一下，看看结果是不是下面这样的：

边框的层数可多可少。少则一层，多则十多层。一般建议在3-8层间，毕竟是边框，不能喧宾夺主。 好，一个简易边框就做成了。你还可以按照上面两个视频中讲的方法做一些调整，直到满意为止。
现在要作的是，怎么把做好的边框放到空间去呢？注意，上面两个视频中讲的方法是用代码贴进去，这是其他空间（如QQ、网易等）的方法。这是不适合百度空间的。因为百度空间不支持直接用代码。你可以用上次学到的“复制”“粘贴”的方法，在HTML编辑器中“全选”“复制”你做好的边框，然后“粘贴”到你的空间“写新文章”的窗口。
你也可以把做好的边框保存在你的电脑里，以后再用。方法是：点HTML编辑器左下方的“源代码”，就能看到边框的源代码。全选复制源代码。然后打开一个Windows记事本新空白文件，粘贴“源代码”到这个空白文件中，命名（如A1）保存文件。这时你得到的是一个txt格式的纯文本文件（A1.txt），保存的是你做的边框的源代码。再点击打开它，将文件“另存为”“A1.html”。这时你得到的是一个html格式的超文本文件。点击打开“A1.html”文件，你看到你做的边框就在这里，你随时可以使用它。
哈哈，原来菜鸟不但能够自己做边框，而且还能够自己编代码呀！是意外的惊喜吧？是不是提高了你进一步学代码的兴趣？咱们以后还会聊一聊学代码的体会。


老 力 木 头 的 空 间

类别：博客学苑 | |添加到搜藏 |分享到i贴吧 | 浏览(2018) |评论 (10)
上一篇：中国元素（精美图片）    下一篇：水墨漫画悟人生