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

玫瑰花的梦670903 的博客

 
 
 

日志

 
 

【转载】音画 边框  

2012-10-02 20:09:00|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自冬韵如歌《音画 边框》

 

音画 边框 

冬韵如歌

 

 边框

 前面我们讲的是针对单图加音乐、文字、FLASH,是最基本的代码组合,画面显得过于单调,怎么在单图上加入修饰呢?边框的运用在音画作品中是经常使用也是行之有效的装饰方法,下面我们就开始讲述边框的使用:

边框---顾名思义就是在图片外围加入框边,通过代码表格的方法加入修饰边框来突出画面,使得画看起来面更加饱满丰富耐看。上节课讲的单图是靠

<TABLE id=table0 style="LEFT: 左右距px; WIDTH: 总宽度px; POSITION: relative; TOP: 顶部距离px" borderColor=#FF0000 width=图宽  cellSpacing=25 background=图片地址  height=图高 border=5>

这组代码实现的,这组代码的基本定义就是确定作品的最大尺寸、上下左右的距离,明确这点后,我们来试想下,如果图中再套入一张图将会是什么样?答案是盖住了前一张图,那么把第二张图缩小些呢,这样第二张图的四边就会露出第一张图来,露出部分就形成了边框(露出部分的多少由cellSpacing=25来调整,这个值的含义为距下一层图的距离为25Px),我们称其为---底层图。

图片的叠加代码如下:

<TBODY>

<TR>

<TD width="100%">

<TABLE borderColor=#424200 cellSpacing=5 borderColorDark=#FFFFFF cellPadding=0 width="100%" background=边框图片地址  border=1>

那么在此基础上我们可以得到很多的边框,每增加一组边框就是图片再叠加的一次的重复过程,靠重复上面这组表格代码来实现,我们称其为---第一层边框。按此思路继续往下,你可以根据画面的需要增加很多的图层表格,二、三、四、五......至n层。调整每层距下一层不同的距离,可以达到不同的效果。

综上所诉,我们归纳出如下代码:

<TABLE id=table0 style="LEFT: 左右距px; WIDTH: 总宽度px; POSITION: relative; TOP: 顶部距离px" borderColor=#FF0000 width=图宽  cellSpacing=25 background=背景图片地址  height=图高 border=5>

第一层边框

<TBODY>

<TR>

<TD width="100%">

<TABLE borderColor=#424200 cellSpacing=5 borderColorDark=#FFFFFF cellPadding=0 width="100%" background=边框图片地址  border=1>

第二层边框

<TBODY>

<TR>

<TD width="100%">

<TABLE borderColor=#424200 cellSpacing=5 borderColorDark=#FFFFFF cellPadding=0 width="100%" background=边框图片地址  border=1>......

第n层边框

<TBODY>

<TR>

<TD width="100%">

<TABLE borderColor=#424200 cellSpacing=5 borderColorDark=#FFFFFF cellPadding=0 width="100%" background=边框图片地址  border=1>

边框结束后下面进入主题部分:首先是加入文字

<TBODY>

<TR>

<TD align=middle>

<DIV style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 楷体_GB2312"><B>中 国 音 画</B></DIV>

其中:

FONT-SIZE: 30pt表示字号, 

FILTER: shadow(color=black阴影颜色)表示字体有阴影,不要阴影可以取消这组代码,

COLOR: #e4dc9b表示字体颜色,

FONT-FAMILY: 楷体_GB2312表示字体

根据文字内容自行调整字号字色.

下面是主题图片了,在这里我们使用这组代码:

<P align=center>

<IMG width=指定图片宽度 src="主题图片地址" height=指定图片高度></P>

其中<P align=center>表示限定图片居中显示.

图片结束后要有落款署名文字层,再增加一组文字代码:

<TBODY>

<TR>

<TD align=middle>

<DIV style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 楷体_GB2312"><B>雨打芭蕉</B></DIV>

下面再加入透明FLASH及音乐,带边框的音画作品就完成了......

FLASH:

<EMBED style="LEFT: 150px; POSITION: absolute; TOP: 150px" align=right src=透明FLASH地址 width=宽 height=高 type=application/x-shockwave-flash quality="high" wmode="transparent"> </CENTER>

播放器:

<embed width=宽 height=高 style=filter:xray src=音乐地址  type=audio/mpeg autostart=1 panel=0 loop=true></embed>

最后加入截止符:记住前面使用多少<TBODY><TR><TD>后面就要用多少</TD></TR></TBODY></TABLE>来终止,宁可多加但不可少,再加上不可缺少的空行符<BR><BR><BR><BR><BR><BR>这是为了防止遮住管理键.

参阅下图:.

【转载】音画 边框 - 花落无声 - 玫瑰花的梦670903 的博客

此帖是由下面这几张图片组合构成:

底层图

【转载】音画 边框 - 花落无声 - 玫瑰花的梦670903 的博客

第一层边框

【转载】音画 边框 - 花落无声 - 玫瑰花的梦670903 的博客

第二层边框

【转载】音画 边框 - 花落无声 - 玫瑰花的梦670903 的博客

第三层边框

【转载】音画 边框 - 花落无声 - 玫瑰花的梦670903 的博客

第四层边框

【转载】音画 边框 - 花落无声 - 玫瑰花的梦670903 的博客

 

第五层边框

【转载】音画 边框 - 花落无声 - 玫瑰花的梦670903 的博客

 请注意,如果使用单图请使用这组代码开头:

<TABLE style="BORDER-RIGHT: #CAC9B7 25px ridge; BORDER-TOP:  #8E8B78 25px ridge; LEFT: -200px; BORDER-LEFT: #CAC9B7 25px ridge; WIDTH: 800px; BORDER-BOTTOM: #8E8B78 25px ridge; POSITION: relative; TOP: 200px; HEIGHT: 760px" cellSpacing=5 cellPadding=0 background=底层图片地址>

 这组代码可以使底层图加上边框

 其中:BORDER-RIGHT: #CAC9B7 25px 是调整四边的颜色及宽度

 

 

 

【转载】音画 边框 - 花落无声 - 玫瑰花的梦670903 的博客

 

http://blog.163.com/xw_zn/

 

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

历史上的今天

评论

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

页脚

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