注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

曲水流觞

 
 
 

日志

 
 

做音画或写日志怎样添加制作边框 2011年10月15日  

2013-08-29 15:24:49|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 

做音画或写日志怎样添加制作边框

2011年11月02日 - 杨东 - 杨东小园

  

制作边框的第一步

一、以下是一层边框的代码,将边框代码复制粘贴第一次,在图片地址处粘贴图片地址,将边框的单元格距离设定为30( cellSpacing=30 )是边框的外露部份,(说明:这单元格距离30部份,要加上第二层才能显现出来,边框的宽度设定为750(width=750),(说明:边框的宽度能大能小,这里是特意设定为750.但是在实际写日志时最大宽度可以设置为900.)详见以下代码实样;

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width=750 align=center bgColor=#ffffff background=在此添加第一层图片地址 border=0>
<TBODY>
<TR>
<TD>

纯红色图片实样怎样制作边框 2011年10月15日 - 杨东 - 杨东小园这张原图片的宽100高为100

纯红色图片地址:http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg

代入图片后的代码

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>

代入纯红色图片后的效果如下

代入纯红色图片后的效果


制作边框的第二步

二、在第一层纯红色图片的基础上,依然将开始那段边框代码复制粘贴第二次,第二次用纯绿色图片,地址处粘贴代码中,将整个边框的宽度(width=)在第一层700的基础上设为(width="100%"),(注:边框的宽度能大能小,除了第一层要用数值控制之外,从第二层开始,只要用百分比来控制,《width="100%"》)并将第二层单元格距离cellSpacing的值设为10,

插入的纯绿色图片实样怎样制作边框 2011年10月15日 - 杨东 - 杨东小园这张原图片的宽为60高为60

纯绿色图片地http://img154.ph.126.net/AYYRuGi9QEwHDfQcC_0idw==/2265029137592186421.jpg

代入图片地址后的代码如下;

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img154.ph.126.net/AYYRuGi9QEwHDfQcC_0idw==/2265029137592186421.jpg border=0>
<TBODY>
<TR>
<TD>

 

第二次看效果:

加了第二层图片后的效果

制作边框的第三步

三、为了能让朋友们充分理解,现在依然将第一层的代码复制后,粘贴到第二层的下边作为第三层处理,将整个边框的宽度(width)在第一层700的基础上,第三层的宽度也要设定为width="100%",将cellSpacing的值设为10,修改后新组成的代码如下;

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img154.ph.126.net/AYYRuGi9QEwHDfQcC_0idw==/2265029137592186421.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>

第三次看看效果:

加了第三层图片后的效果


制作边框的第四步

四、依然将开始那段边框代码复制粘贴第四次,在图片地址处粘贴纯色图片地址,将整个边框的宽度(width)设为640,将cellSpacing的值设为10,看看效果怎样;

第四张图片作为写日志用的背景底版面图片,故而就用淡色的怎样制作边框 2011年10月15日 - 杨东 - 杨东小园此图片的宽为60高为26.

图片地址 http://img.bimg.126.net/photo/UGR4La40Nb_kLkNgtUeGdQ==/3113394717397305237.jpg

第四次代码

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img154.ph.126.net/AYYRuGi9QEwHDfQcC_0idw==/2265029137592186421.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img.bimg.126.net/photo/UGR4La40Nb_kLkNgtUeGdQ==/3113394717397305237.jpg border=0>
<TBODY>
<TR>
<TD>

第四次效果

加了第四层背景图片后的效果


小 结

1、从以上实验来看,写日志采用做任何边框,实际上就是做表格框的代码.由不同颜色的表格框架,分层次叠加而成,四周没有被遮盖的部分就形成了边界;2、做几层边框你就把同一个边框代码复制粘贴几次,然每个层次只要修改一下单元格 cellSpacing=? 外露部份宽度、变换一下不同颜色或不同花色的背景图片地址background=?,边框无论加多少层次,从第二层开的宽度只要用百分比控制 width="100%" 就行了; 3、从以上可见,边框只限宽度,高度没有特别的控制,这原因是只要你把日志内容写进去,高度就会无限的增长,是看来这个四层的边框很小,但只要一把内容放进去,它就会扩大了。内容放得越多,边框就会自动撑得越大。

总结以上资料解析
现在用一组由六个层面的实用代码
制作完整的框架实样如下


 

由六个层面组建的实样


以上由六个层面组建的模型代码如下

<P align=center>
<TABLE borderColor=#cccccc cellSpacing=5 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img319.ph.126.net/x3jVDN0HOzMUsjLud15skg==/3825807883451405866.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=26 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img.ph.126.net/5-JvzuYXK19f2B9UpGGVZA==/3224295858221899188.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=5 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img319.ph.126.net/x3jVDN0HOzMUsjLud15skg==/3825807883451405866.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img.ph.126.net/Kw0exm1Cu71ypvjVSy9Bdw==/2783224569731803869.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img764.ph.126.net/jQoAU6c1xw-IflOTfVeH5w==/2979131153506663753.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=25 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img306.ph.126.net/fWDr2KwAQ1RP8bh2hRMpEA==/3869999454795603069.jpg border=0>
<TBODY>
<TR>
<TD>
<P align=center></P>
<DIV style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 40%; FONT-FAMILY: 华文彩云" FONT scrollAmount="8">
<P align=center><FONT face=黑体><B>由六个层面组建的实样</B></FONT></P></DIV><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
<P></P><BR></TBODY></TABLE></P>

简 要 说 明

单从这组代码看,第一层的宽度width=750 这是最外层的边缘宽度,(符加说明:一般实用时,最外层的宽度可以设定为880或890,这里设定的750是为写此博,能让朋友们容易理解而特意缩小的) 然而这个单元格距离cellSpacing=5 是指第一层面最外边所显现的一条框架装饰部份为5,是很细的外边。然后第二层的cellSpacing=26这是一个能转动的动态轴图片,这图片自身的宽度为26,为了能让这个动态图片充分发挥作用所以设定为26,第三层是同第一层同样的图片,也设定为cellSpacing=5 第四层是一张闪光图,这张图片是杨东小园自制的,原图宽34,没有全部利用,,第五层是一根动态直条,第六层是写博的底版层面.cellSpacing=20这是为了在写入日志文字时,促使所写入的文字左右二边不顶足边缘所设定的空隙距离.

可见以上这六个层面中每个层面都是用的同一个框图代码,但是不同之处是每个层面用的图片有所不同也有相同的,层次的距离数值有所不同也有相同的,另外相同之处是除了第一层面的宽长限止为750以外,其他的五个层面都用"100%" 来规范,这是因为从第二层到第六层,是在第一层面的基础上确定的,不需要求再用量化来处理的结果.

 

编后申明

  本作品制作虽拙劣粗糙,但从构思创意、精心编著都纯属原创.目的是为了与爱好博客写作的朋友们学习探索,如若此作品,有错误之处,恳请朋友们在以下评论栏中提出赐教指正意见,或良好的改进建议.杨东为此不胜铭感,特此申明,深表谢意.

 

相关链接怎样制作边框 2011年10月15日 - 杨东 - 杨东小园如何取得《图片或相片》的地址

相关链接怎样制作边框 2011年10月15日 - 杨东 - 杨东小园如何设置改善扩展日志页面的方法

怎样制作边框 2011年10月15日 - 杨东 - 杨东小园怎样制作边框 2011年10月15日 - 杨东 - 杨东小园怎样制作边框 2011年10月15日 - 杨东 - 杨东小园

怎样制作边框 2011年10月15日 - 杨东 - 杨东小园

怎样制作边框 2011年10月15日 - 杨东 - 杨东小园

怎样制作边框 2011年10月15日 - 杨东 - 杨东小园

怎样制作边框 2011年10月15日 - 杨东 - 杨东小园

怎样制作边框 2011年10月15日 - 杨东 - 杨东小园

 

 

 

 

  评论这张
 
阅读(32)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017