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