• 自己动手做边框(一)

    先从信纸说起。

    腾讯公司为QQ空间的使用者提供了信纸,有免费的,有会员专用的,有静态的,有动态的。还别说,使用了信纸后,至少从形式上看,日志就好看多了。那么,这信纸到底是什么东西呢?其实,信纸就是个边框,在边框里添加了背景颜色或者图片,当边框的宽度设置为0时,你看不到边框,只看到边框里的背景颜色或图片。

    记得上小学时 ,老师给我几支粉笔,要我出黑板报。我很快就把黑板报做了,心想这事情还是蛮容易的。可是当我后退几步,再看黑板时,心里开始犯嘀咕了:为什么我做的黑板报不如人家做的漂亮呢?经过比较,发现人家做的黑板报都要弄些花边、图案、插图,而我做的黑板报太简单了,就是在光秃秃的黑板上写满字而已。发现了问题马上解决,后来我做的黑板报也不难看了。现在想来,那些花边、图案就相当如QQ空间日志的边框。

    一篇日志做得好不好,我认为应该从两个方面来评判,一是内容,二是形式。

    内容是主要的。每个人的生活环境、家庭背景、成长经历、受教育程度都不尽相同,因此对于生活和周围事物的感悟也不一样,写出来的日志当然会不一样。但是,不管你写的是什么,应该是对读者有用的,至少也应该能够感染读者,让读者在读完后,能够有所回味、有所思考、有所收获。所以说,空间日志以内容为王,这话太正确了。

    形式也是很重要的,起到锦上添花的作用,就象是一个人的服装和饰物。我这里说的形式,是指日志的编辑形式,主要包括图像处理、边框的制作和使用、音乐的选择等。

    我最近看了很多人的日志,有些日志很漂亮,主要是因为边框做得好。有些边框看上去很简单,而有些的看上去很复杂,其实不管是复杂的还是简单的,都是由表格或者表格嵌套产生的效果。

    一、单表格一个单元格做成的边框。例如下面这个表格:

    这个表格的代码为:

     

    下面这组代码是一张动态水珠图片,把它做到上面的表格里去,形成表格的背景图片.

    style="BACKGROUND-IMAGE:url(http://a2.qpic.cn/psb?/V13gCi0...
    http://a2.qpic.cn/psb?/V13gCi010M6wSC/OdevEsU4GaSk.zZHqyIIYFUQqsw2vQI1NKqe1IN36Ws!/b/dPx6d29kNwAA&bo

    =LgIsAQAAAAACFDE!

    &rf=viewer_4); PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;BORDER-SPACING:0px;PADDING-RIGHT:0px;BORDER-COLLAPSE:collapse;PADDING-TOP:0px" border="0" cellpadding="0" cellspacing="0">

    点开编辑器的“高级功能”,再点开“HTML”把上面的边框代码复制上去,点保存,便得到了边框。如果表格高度不够,看不到背景里的水珠,那不要紧,重新编辑一下,把表格拉高点,就看到了。

    这个表格的宽度一开始就设置为700(width="700" ),如果要用它,把700改为876就可用了(width="876" )。

    二、单表格多个单元格做成的边框。例如本篇日志的边框。

    首先做一个表格,一列三行,并获取代码。宽度暂设为760,全部做好后改为876。三个方法可以获得表格代码:

    1:自己写;

    2:用网页编辑器;

    3:使用软件,比如Dreamweaver。

    下面为表格样式,因为表格边框宽度了为0,实际上是看不到线条的,为了能直观的看到表格式样,我把表格边框宽度设为1了。

    代码为:

     
     
     

    三组背景图片代码:用下面三组代码分别替换掉表格代码中的红色部分

    style="BACKGROUND-IMAGE:url(

    =LgIsAQAAAAACFDE!

    &rf=viewer_4); PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;BORDER-SPACING:0px;PADDING-RIGHT:0px;BORDER-COLLAPSE:collapse;PADDING-TOP:0px" border="0" cellpadding="0" cellspacing="0">

    上面这组代码里,括号里面的代码就是背景图片的地址,替换成别的图片地址,背景也就会跟着变化。但是图片只能是相册里的,外网的图片不能用。 操作方式:把上面背景图片代码替换掉表格代码中红色的那部分,形成了一组新代码,这就是我们要的边框代码。代码如下:

    style="BACKGROUND-IMAGE:url(http://a2.qpic.cn/psb?/V13gCi0...

    bAMkAAAAAAAFB28!

    &rf=viewer_4); PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;BORDER-SPACING:0px;PADDING-RIGHT:0px;BORDER-COLLAPSE:collapse;PADDING-TOP:0px" width="870" height="36" border="0" align="center" cellpadding="0" cellspacing="0"> 

    style="BACKGROUND-IMAGE:url(http://a2.qpic.cn/psb?/V13gCi0...

    bAOMAAAAAAAFB8c!

    &rf=viewer_4); PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;BORDER-SPACING:0px;PADDING-RIGHT:0px;BORDER-COLLAPSE:collapse;PADDING-TOP:0px" border="0" cellpadding="0" cellspacing="0"> 

    style="BACKGROUND-IMAGE:url(http://a2.qpic.cn/psb?/V13gCi0...
    http://a2.qpic.cn/psb?/V13gCi010M6wSC/4sb*VyXisBj5iKZxHkqvuDiLWb4Vp1EeLddv.*xPwe4!/b/dBsBAAAAAAAA&bo=

    bAMkAAAAAAAFB28!

    &rf=viewer_4); PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;BORDER-SPACING:0px;PADDING-RIGHT:0px;BORDER-COLLAPSE:collapse;PADDING-TOP:0px" width="870" height="36" border="0" align="center" cellpadding="0" cellspacing="0"> 

    在这里写日志

    bAMkAAAAAAAFAGg!

    &rf=viewer_4); PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;BORDER-SPACING:0px;PADDING-RIGHT:0px;BORDER-COLLAPSE:collapse;PADDING-TOP:0px" width="870" height="36" border="0" align="center" cellpadding="0" cellspacing="0">

    下面就是做好的边框,看起来不完整, 是因为宽度设为760的原因,改为876后,就完整了。但是为了在写日志时方便编辑,在这个边框里最好再嵌入一个表格,表格宽度为760,边框宽度为0。

    在这里写日志

    把完整的代码写在下面,宽度已经改为876了,可直接使用。

    2015/7/11 21:37:48
    举报不良信息

     

     大  小