[清音教程]教你如何开始做音画(二)

查看完整版本: [-- [清音教程]教你如何开始做音画(二) --]

九月论坛 -> 「乐迷交流」 -> [清音教程]教你如何开始做音画(二) [打印本页]

登录 -> 注册 -> 回复主题 -> 发表主题

㈠

㈢

㈥

㈦

何西尼

2007-02-08 09:46

根据自己学习制作音画贴的体会，总结了几点学习方法仅供大家参考：
　　1.对于难记的属性不必强行记忆，在用到的时候翻一下语法手册，多用几次就会熟练掌握了。
　　2.刚开始，可以先选择几个不错的网页形式加以模仿，照猫画虎的完成自己的作品。
3.看到好的网页，可以在浏览器的“编辑”菜单中选择“源文件”，这时我们就可以看到源程序，学习别人制作网页的一些方法和技巧了，有时候通过这种办法可以学到书本上没有的东西，一些新出现的功能也可以率先出现在你的网页中了。

大家看到的那些漂亮的贴图多是加了一些代码，这些代码就是html代码，一般是不需要了解这些html代码的意义，但是最简单的一些html代码是需要理解的，对调试特殊效果有帮助，这里我提供一些简单的html代码解释和使用方法，需要了解更多可以参照有关这方面的教程。最简单的编辑软件是Frontpage,OFFICE自带的。

　　HTML文件由标记和被标记的内容组成，标记的格式用“<"表示一个标记的开始，”>“表示一个标记的结束这两个字符必须同时出现，表示这是HTML代码。

<table>标记的主要属性：

center 表格居中对齐，同类属性还有：left（向左对齐）right （向右对齐）

border="1" 边框厚度不同浏览器有不同的内定值,故请指明.　

width="300" 边框宽度属性值是数字　接受绝对值（如 80）及相对值（如 80%）

height="300" 边框高度　属性值是数字

cellspacing="10" 单元格内容与单元格边框之间的距离　表格格线的厚度，属性值是数字

cellpadding="2" 文字与格线的距离，即表格中单元格之间的距离

bgcolor="#FF0000" 表格的背景颜色RGB,如果有背景图片可不用,即与 background 不要同用

background="rotile2.jpg" 表格的背景图片，与 bgcolor 不要同用。

bordercolor="#FFFF00" 表格边框颜色，NC 与 IE 有不同的效果。

bordercolorlight="#00FF00" 表格边框向光部分的颜色。

bordercolordark="##0000FF" 表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark

时 bordercolor 将会失效。<br> 换行代码

下面以《心中的玫瑰》作品为例，对HTML代码多层背景演示，效果全景图：

心中的玫瑰

代码如下：<center><table cellSpacing="40" cellPadding="0" width="600" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b1.jpg" border="0"><tbody><tr><td width="80%"><table cellSpacing="3" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b3.jpg" border="0"><tbody><tr><td width="100%"><table cellSpacing="40" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b6.jpg" border="0"><tbody><tr><td width="100%"><table cellSpacing="3" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b3.jpg" border="0"><tbody><tr><td width="100%"><table cellSpacing="20" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b7.jpg" border="0"><tbody><tr><td width="100%"><table cellSpacing="3" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b3.jpg" border="0"><tbody><tr><td width="100%"><table cellSpacing="35" cellPadding="0" width="100" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b5.jpg" border="0"><tbody><tr><td width="100%"><table cellSpacing="3" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b3.jpg" border="0"><tbody><tr><td width="100%"><table cellSpacing="8" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b2.jpg" border="0"><tbody><tr><td width="100%"></center> <center><img src="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b8.jpg" width="300" height="300"><p><font color="#FFFFFF" size="7" face="黑体">心中的玫瑰</font></p></center><BR><center></center> <center><img src="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b4.jpg" width="315" height="88"><p>　</p> <p>　</p><p></center><center><img src="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b4.jpg" width="315" height="88"></center><BR></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></td></tr></tbody></table> </td></tr></tbody></table> </div></td></tr></tbody></table></center>

这是一个共有九层背景组成的网页套装，用了六张背景图片。

第一层背景代码：

效果图（一）

第二层背景代码：

效果图（二）

第三层背景代码：

效果图（三）

第四层背景代码：

效果图（四）

第五层背景代码：

效果图（五）

第六层背景代码：

效果图（六）

第七层背景代码：

效果图（七）

第八层背景代码：

效果图（八）

第九层背景代码：

效果图（九）

插入图片代码：
<center>
<table cellSpacing="40" cellPadding="0" width="600" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b1.jpg" border="0"><tbody><tr><td width="80%">
<table cellSpacing="3" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b3.jpg" border="0"><tbody><tr><td width="100%">
<table cellSpacing="40" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b6.jpg" border="0"><tbody><tr><td width="100%">
<table cellSpacing="3" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b3.jpg" border="0"><tbody><tr><td width="100%">
<table cellSpacing="20" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b7.jpg" border="0"><tbody><tr><td width="100%">
<table cellSpacing="3" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b3.jpg" border="0"><tbody><tr><td width="100%">
<table cellSpacing="35" cellPadding="0" width="100" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b5.jpg" border="0"><tbody><tr><td width="100%">
<table cellSpacing="3" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b3.jpg" border="0"><tbody><tr><td width="100%">
<table cellSpacing="8" cellPadding="0" width="100%" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b2.jpg" border="0"><tbody><tr><td width="100%"></center> <center>
<img src="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b8.jpg" width="300" height="300"><p><font color="#FFFFFF" size="7" face="黑体">心中的玫瑰</font></p></center><BR><center></center> <center>
<img src="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b4.jpg" width="315" height="88"><p><font color="#FF0000" face="华文行楷" size="5">依依制作</font></p><p></center><center>
<img src="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/b4.jpg" width="315" height="88"></center><BR></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></td></tr></tbody></table> </td></tr></tbody></table></div></td></tr></tbody></table></center>

以上就是用HTML做贴子的语言，请注意在每张图片层的结尾处都不要忘了收尾

</TD></TR></TBODY></TABLE>

如果有N层这样的背景结构就要有N层这样的“收尾”代码

以上用了九个<TABLE＞就要有九个</TABLE＞来结尾。

插入图片效果图(十)

心中的玫瑰

九月清音

贴图效果（一） <center> <table border="1" width="400" id="table1" height="300"background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/1.jpg" cellspacing="10"><tr>
<td>　</td>
</tr>
</table>
</center>

代码：

注意:这个边框大小一定要合图片的大小。

图上做字效果

<center><table border="1" width="300" id="table1" height="300" cellspacing="10" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/2.jpg">
<tr>
<td>
<br>
<p align="center"><font color="#FF0000" size="6">依依花园欢迎您!</font></p></td>
</tr>
</table>
</center>

贴图效果(二)

代码:<center>
<table border="10"bordercolorlight="#ff0000" bordercolordark="#ff0000">
<td bordercolor="#008000"><img src="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/3.jpg" width="400" height="300"></td>
</tr>
</table>
</center>

贴图效果(三)

代码:： <center>
<table border=0><td><img src="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/4.jpg"width=300 height=300 style=filter:Alpha(opacity=100,style=2)>
<td></table> </center>

贴图效果(四)

依依花园欢迎您！

代码:：<div align="center">
<table border="1" width="73%" id="table1" height="469" background="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/rotile2.jpg">
<tr>
<td>
<div align="center">
<p>　</p>
<p><font color="#FF0000" size="6">依依花园欢迎您！</font><br><br> </p>
<table border="10" bordercolorlight="#FF0000" bordercolordark="#FF0000">
<td bordercolor="#008000"><img src="http://www.shaowu.gov.cn/person/yiyi/yiyi/01/5.jpg" width="300" height="300"></td>
</tr>
</table>
<p>　</div> </td>
</tr>
</table>
</div>

说明:background=“图片链接地址”——表格的背景图片 src=“图片链接地址”

贴图效果(五)

下雨的前景效果　

代码:： <CENTER><FONT face=隶书 color=#FF0000 size=6>下雨的前景效果</FONT></CENTER>
<CENTER><TABLE bgColor=#d4d2d7 border=1 borderColor=#000088 cellPadding=3 cellSpacing=2 width="500"><TBODY><TR><TD background=http://www.shaowu.gov.cn/person/yiyi/yiyi/01/7.jpg ><EMBED height=330 pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.shaowu.gov.cn/person/yiyi/flash/001.swf type=application/x-shockwave-flash width=500 wmode="transparent" quality="high"></EMBED></TD></TR></TBODY></TABLE></CENTER>
　

九月清音欢迎您！

代码：

如何应用多层背景（实例讲解）

查看完整版本: [-- [清音教程]教你如何开始做音画(二) --] [-- top --]
Powered by PHPWind v6.3.2 Code © 2003-08 PHPWind
Time 0.089412 second(s),query:3 Gzip enabled

You can contact us