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

欢迎!天快亮了!

公民的个人权利不容侵犯!

 
 
 

日志

 
 
关于我

积德虽无人见 行善自有天知

网易考拉推荐

教你制作音画(一)  

2008-11-08 15:49:29|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

HTML-


        1.两层
<P ALIGN=CENTER>
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0>
<TBODY><TR><TD>加入内容</td></tr></tbody></table></td></tr></tbody></table>
        2.八层
<TABLE cellSpacing=0 cellPadding=4 width="95%" align=center background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=315 cellSpacing=0 cellPadding=15 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=355 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=387 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=365 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=15 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE height=362 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE height=361 cellSpacing=0 cellPadding=4 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=204 cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD>
加入内容
</TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

        3.两层
<CENTER><TABLE cellSpacing=10 cellPadding=2 width=450 bgColor=#000000 border=1><TR><TD><TABLE cellSpacing=8 cellPadding=10 width=450 bgColor=#000000 border=1><TR><TD>内容部分</TD></TR></TABLE></TD></TR></TABLE>
        4.一层
<TABLE cellSpacing=1 cellPadding=0 width="100%" align=center background=http://pugongyingw.51.net/image/bj/10.jpg border=5>
<TBODY>
<TR>
<TD>加入内容</TD></TR></TBODY></TABLE>

        5.两层
<CENTER>
<TABLE borderColor=#0000ff cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width=480 border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=5 width=430 align=center background=http://znrs.2000y.net/UploadFile/2004-6/200467181958882.jpg border=0>
<TBODY>
<TR>
<TD>
加入内容
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</CENTER>

 

      (一)准备工作(了解最起码的html语法)
          温馨提示:嘿嘿!这个可以跳过去不看它,直接看步骤吧......等到要用的时候再来查也不迟。

        1.<p>.....</p>
       <p>标志对是用来创建一个段落,在此标志对之间加入的文本 将按照段落的格式显示在浏览器上。另外,<p>标志还可以使用align属性,它用来说明对齐方式,语法是:<p align=center></p> ,align可以是Left(左对齐)、 Center(居中)和Right(右对齐)三个值中的任何一个。
       </p>表示标志对中的文本使用居中的对齐方式。align 表示位置。

       2.<br>是一个很简单的标志,它没有结束标志,因为它用来创建一个回车换行。

       3.<table>表格(我们可以把他理解为桌面或一个工作面)<table>开始,</table>结束。

       4. <tr>说明表格的一个行,表有多少行就有多少个<tr>(简单理解为横向)。

       5. <td>则填充(简单的理解为纵向)。

       6. cellpadding=文本与表框的距离用(使用阿拉伯数字)。

       7. <font></font>它可以对输出文本的字体大小,其语法通常有:size=字体大小号码 color =颜色常量名,face=选用的字体。

       8. <img>标志对的src属性赋值在图片中应用。

       9. <hr>标志是在Html文档中加入一条水平线,它可以直接使用。

       10. <body></body>是Html文档的主体部分。

       11. <bgcolor=...>背景颜色通常使用
      <body bgcolor="....">就是主体背景颜色(通常我们说的大背景颜色)。

       12. <body text="....">设置主体文本颜色。
      <body link="...."> 设置链接颜色。

       13. <border="边框大小">表示边框。

       14. <background=> 背景通常使用为背景图片的连接地址。

       15. <borderColorLight=#颜色>边框相临两边的颜色及内置相对两边的颜色(左相临及对应右相临)。

      16. <orderColorDark=#颜色>边框相临两边的颜色及内置相对两边的颜色。

       17. cellSpacing=边框与内置边框的宽度。

       18. width=宽度 height=高度。


      (二)实用举例说明步骤:

      一.选边框.

      现选两层的边框,代码如下:
<P ALIGN=CENTER>
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0>
<TBODY><TR><TD>加入内容</td></tr></tbody></table></td></tr></tbody></table>

      二.选内容.

     选边框有一层FLASH图片,代码如下:
<TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://www.xiangfan.org/htdocs/dvbbs/UploadFile/2004-6/200462095958665.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://www.cn898.net/bg/6.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </P></TD></TR></TBODY></TABLE>

      三.把边框里加入内容这四个字删掉,换成图片代码。

      为了明显,我用蓝色表示边框,用红色表示图片内容部分:
<P ALIGN=CENTER>
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0>
<TBODY><TR><TD>
<TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://www.xiangfan.org/htdocs/dvbbs/UploadFile/2004-6/200462095958665.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://www.cn898.net/bg/6.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </P></TD></TR></TBODY></TABLE>
</td></tr></tbody></table></td></tr></tbody></table>

      四、实际使用可以用没有颜色的,就是默认的黑色。

      代码如下:
<P ALIGN=CENTER>
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0>
<TBODY><TR><TD><TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://www.xiangfan.org/htdocs/dvbbs/UploadFile/2004-6/200462095958665.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://www.cn898.net/bg/6.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </P></TD></TR></TBODY></TABLE>
</td></tr></tbody></table></td></tr></tbody></table>

      如果你想使用带颜色的,请点击以下站点选择,并把代码中的#000000替换。

      http://df-wang2008.blog.163.com/blog/static/8605067820089931358351/edit/

      五.查看边框效果

      把你整合好的代码复制下来,在写日志页面再点“<>”进入正常编辑模式就可查看效果。

      六.效果如下:

 

      七.修饰你的代码

       这些贴子的图和边框宽度,一定不合你的意,怎么办?就把边框(宽度width=480)(高度height=300)改大或小一点。提示:如果你作的帖子是用在论坛或发给好友的,如果留言板宽度小于450,超过部分会自动削掉右边部分。直到你满意为止,图片地址可以换上你喜欢的那个图片。怎么样,不错吧!

      八.增加其它内容

       想一想,既然可以加入图片,那么是不是也可以用同样的方法加入音乐、播放器和其它呢?呵呵,对了,就都放在内容部分,在边框代码<td></td>之间。还等什么,即可动手试试看吧~~~

      

     (三)代码分析

       代码如下:(符号“//”后面是注释)


<CENTER>
<TABLE height=267 cellSpacing=5 borderColorDark=#502f2e cellPadding=0 width="80%" borderColorLight=#985252 background=http://www.vicn.net/UploadFile/2004-4/200443071233119.gif border=1>
      //最外层表格的定义
<TBODY>                              
<TR>
<TD width="100%" height=259>
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#543636 cellPadding=0 width="100%" borderColorLight=#a57372 background=http://www.vicn.net/UploadFile/2004-4/200443071250124.gif border=1>        //第二层表格定义
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#a57372 cellPadding=0 width="100%" borderColorLight=#543636 background=http://www.vicn.net/UploadFile/2004-4/200443072033179.gif border=1>       //第三层表格定义
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width="80%" background=http://www.vicn.net/UploadFile/2004-4/200443071137932.gif border=0>
                         //第四层表格定义

<TBODY>                                       //表格内容开始

<TR>                                               //换行符
<TD width="100%">                     //内容占满,下面开始是表格的内容
<DIV align=center>                       //表格内容居中
<TABLE cellSpacing=0 cellPadding=0 width="99%" background=http://www.vicn.net/UploadFile/2004-4/200443072033179.gif border=0>
<TBODY>       
 //第五层表格定义

<TR>
<TD width="100%">
<DIV align=center>                        //居中
<TABLE cellSpacing=5 borderColorDark=#a57372 cellPadding=0 width="80%" borderColorLight=#543636 background=http://www.vicn.net/UploadFile/2004-4/200443071250124.gif border=1>        //第六层表格定义

<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 cellPadding=0 width="100%" background=http://www.vicn.net/UploadFile/2004-4/200443072033179.gif border=0>
<TBODY>         //最外层表格定义
<TR>
<TD width="100%">
<P align=center>                        
//居中

<IMG src="http://www.vicn.net/UploadFile/2004-4/200443071212420.gif" ></P>
                                                    
//下面是表格的最后收尾,千万别忘记哦,html是成对

                                                     //标签语言,有头必然有尾。

</TD></TR></TBODY></TABLE></DIV>         //最内层的表格收尾

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE>                     //最外层的表格收尾

</CENTER>

 


!
!

 

 

 

  欢 光 我 博 迎 临 的 客

 

 

  评论这张
 
阅读(524)| 评论(17)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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