分享

音画制作实例教程

 zc382 2011-03-15



一直都在想要怎样做教程大家才更容易理解,希望这次编辑的教程大家容易上手。请大家从简单到复杂一步一步慢慢来,不要心急,多给自己点信心多做练习,自然会有得心应手的一天。

  论坛制作代码帖是不需要用到任何网页编辑软件的,只需要理解一些简单的HTML语言就可以了,所以多看一些HTML语法教程才对做帖有最大的帮助。一定会有人问,不用网页软件那代码哪里来?呵,当然也不会让你一个一个的给背下来(想想也是不可能的),其实很简单,直接复制要用的HTML代码编辑就可以了。不然人家给出源码的目的是什么?我们又何必看到漂亮的效果就想方设法的去得到源码呢?而且制作网页与论坛做帖是有区别的,很多东西又是只能意会不能言传的,所以个中详情只有自己亲自试验才能拿捏得清楚。希望大家不要被一些功能强大的网页编辑软件迷惑,所谓网页编辑软件是用来编辑网页的,论坛里的帖子是网页吗?不是!在大家对代码有了一定的了解之后可以适当的选择一些网页编辑器使用,只有对网页语言有了一定的了解编辑软件才容易上手,才能达到使用软件的目的--便捷。

  大家也不要一味的只是看教程,教程里给出某段代码说是什么效果就是什么效果吗?你不自己试试看怎么知道到底是不是呢?试着把别人的源码拿来试着编辑,换换图片和文字在论坛里发表看看效果,做多了自然就懂了。学这东西是没有捷径可走的,只有不断的实践才能进步,知识是一点一点积累出来的。学到的东西是自己的,也不要一味的想着依赖别人,自己可以找到答案的问题就自己解决,一次不行就二次,一直试下去总会成功。

  制作一个独特的帖子最重要的是创意,一个人的风格也是由他的创意来定格的。创意这东西就不是可以随便学来的,所以大家只有多欣赏别人的帖子,多接触一些精美的网页,从中吸收别人的精华,以激发自己的灵感。

  最后就是学习的目的,一定要明确自己学做帖的目的。我们不管学什么都要摆明正确的学习态度,相信这个是大家都明白的道理吧。我当初学代码做帖,只是因为看到别人做的帖子漂亮,自己也要做漂亮的帖子;因为想要做出漂亮的帖子就要学习HTML语法,所以我学网页语言的目的是为我做帖子服务的;我学的东西是为了达到我的目的而学的。方法是死的,人的思维是活的,技能都只是用来为创意服务的。希望大家在学做帖前先想清楚为什么而学?

◆ 如果看完了上面的“废话”,就开始学做帖吧。

实例教程<一> --初级篇

 

 
 ◇ 效 果 预 览:

 

 ◆ 点击查看效果帖

 ◆ 点击查看使用的素材

 ◆ 点击查看记事本与论坛代码的对比

 

 ◇ 源 码 (注 释):

 

<html><head><!-- 标题(开始) --><title>童 话</title><!-- 标题(结束) --><!-- 音乐(开始) --><bgsound src="http://cry./web/css/bbsjc/images/tonghua.wma" loop=3><!-- 音乐(结束) --></head>

<!-- 内容(开始) --><body background="http://cry./sc/set/white/0515/kos_bg8.jpg">

<!-- 背景表格(开始) --><TABLE align=center background="http://cry./sc/set/white/0515/kos_bg5.jpg" border="1" cellPadding="0" cellSpacing="60" bordercolordark="#D66D31" bordercolorlight="#EF82BD" width="520"><TBODY><TR><TD align="center" width="100%" bgcolor="#Ffffff"><BR><!-- 分隔线1(开始) --><IMG src="http://cry./sc/set/white/0515/kos_line1.gif" width="343" height="77" border="0"><!-- 分隔线1(结束) --><BR><BR><!-- 主题文字(开始) --><FONT style="COLOR: #EF598C; FILTER: glow(color=#F7D75A); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>童 话</B></FONT><!-- 主题文字(结束) --><!-- 分隔线2(开始) --><IMG src="http://cry./sc/set/white/0515/kos_line2.gif" width="240" height="54" border="0"><!-- 分隔线2(结束) --><br><br><!-- 图片边框表格(开始) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD> <!-- 图片1(开始) --><IMG src="http://cry./web/css/bbsjc/images/pic00.jpg" width="260" height="377" border="0"><!-- 图片1(结束) --></TD></TR></TBODY></TABLE> <!-- 图片边框表格(结束) --><br><!-- 文字1(开始) --><font face=宋体 size=2 color=#DE3C73>忘了有多久<br>再没听到<br>你对我说你最爱的故事</font> <!-- 文字1(结束) --><br><br><!-- 以下部分图片和文字为重复使用相同代码(只是更换了图片地址和文字) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry./web/css/bbsjc/images/pic01.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73><br>我想了很久<br>我开始慌了<br>是不是我又做错了什么 </font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry./web/css/bbsjc/images/pic02.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73>你哭着对我说<br>童话里都是骗人的<br>我不可能是你的王子</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry./web/css/bbsjc/images/pic03.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73>也许你不会懂<br>从你说爱我以后<br>我的天空 星星都亮了</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry./web/css/bbsjc/images/pic04.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73>我愿变会变成童话里<br>你爱的那个天使<br>张开双手变成翅膀守护你</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry./web/css/bbsjc/images/pic05.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73><br>你要相信<br>相信我们会象童话故事里<br>幸福和快乐是结局 </font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry./web/css/bbsjc/images/pic06.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73><br>我会变会变成童话里<br>你爱的那个天使<br>一起写我们的结局</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry./web/css/bbsjc/images/pic07.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><!-- 图片和文字部分(结束) --><br><!-- 落款部分(开始) --><TABLE align=right width="302" height="189" border="0" cellPadding="0" cellSpacing="0"><TBODY><TR><TD align="left" width="100"><!-- 签名文字(开始) --><font face=宋体 size=2 color=#DE3C73>音乐:童话/光良<br><br>编缉:雪夜寒星<br><br></font> <!-- 签名文字(结束) --></TD><TD><!-- 底部装饰图(开始) --><IMG src="http://cry./sc/set/white/0515/kos_moon2.jpg" width="202" height="189" border="0"><!-- 底部装饰图(结束) --></TD></TR></TBODY></TABLE><!-- 落款部分(结束) -->

</TD></TR></TBODY></TABLE><!-- 背景表格(结束) -->

</BODY> <!-- 内容(结束) --></HTML>

 ◇ 制 作 步 骤:

 

 ◆ 1>准备工作: 先将做帖所需的图片和素材上传到有效空间(比如论坛),所需的文字用记事本保存到电脑文件夹中,以及音乐找到有效的连接地址.

 ◆ 2>用记事本编写代码: 首先请大家直接复制上面源码注释部分的代码到发帖栏点击预览看看是什么效果?那么,大家按照注释改变相应的图片或者文字再预览看看有什么不同了(编写代码时注释部分可以不要)。编写相应的代码并不是叫你一个一个符号的打出来,大家可以直接复制图片、文字等相应的HTML格式语法套入自己所用的图片和文字就可以了。再在电脑中新建一个记事本用来编写代码,把编写好的代码保存为文件名.html或者文件名.htm格式,在电脑中可以直接点击该文件查看效果(在效果页面上点击右键选择查看源文件就可以打开该页面的源码记事本)。之所以让大家用记事本编辑代码是由于网页中ENTER的换行不会影响最终效果,把各段代码间格开来大家看起来比较清晰,也方便编辑,而且保存到电脑里作为备份以免因为失误造成丢失。注明:编写代码请用英文打字法(大小写不限),文字部分就转换为中文(智能ABC、五笔或其它)打字法。

 ◆ 3>论坛发表帖子: 全选(Ctrl+A)记事本里的源码复制(Ctrl+C),粘帖(Ctrl+V)到论坛的发帖栏里。再把所有的空行和空格删除,以保持所有的代码连在一起(也就是不能有因敲击Enter回车键而造成的断行或空行)。写上主题,预览查看效果,如果没有问题就可以发表了。

 ◇ 源 码 解 析:(这里只是针对论坛做帖)

 

 ◆ 1>背景

<body background="http://cry./sc/set/white/0515/kos_bg8.jpg">内容部分</BODY>

<BODY> 常用参数解说:

background="bg1.gif"

设定背景墙纸。GIF 或 JPEG 皆可,可以是绝对途径或相对途径。

bgcolor="#FFFFFF"

设定背景颜色。当己设定背景墙纸时会失去作用,除非墙纸有透明部分。

text="#000000"

用以设定文字颜色。 #000000 代表黑色,亦可以采用颜色的名称,即 text="black"


 

 ◆ 2>表格

背景使用的表格:

<!-- 背景表格(开始) --><TABLE align=center background="http://cry./sc/set/white/0515/kos_bg5.jpg" border="1" cellPadding="0" cellSpacing="60" bordercolordark="#D66D31" bordercolorlight="#EF82BD" width="520"><TBODY><TR><TD align="center" width="100%" bgcolor="#Ffffff">内容部分</TD></TR></TBODY></TABLE><!-- 背景表格(结束) -->图片边框使用的表格:

<!-- 图片边框表格(开始) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD>内容部分</TD></TR></TBODY></TABLE><!-- 图片边框表格(结束) -->落款部分使用的表格:

<!-- 落款部分(开始) --><TABLE align=right width="302" height="189" border="0" cellPadding="0" cellSpacing="0"><TBODY><TR><TD align="left" width="100">文字格</TD><TD>图片格</TD></TR></TBODY></TABLE>><!-- 落款部分(结束) -->

<TABLE>相关参数解说:

<TR>

指表格列数

<TD>

指表格行数

align="center"

表格的摆放位置(水平),可选值为: left, right, center

background="kos_bg5.jpg"

表格的背景,与 bgcolor 不要同用。可以在<td>中与<TABLE>中分别使用。

border="1"

表格边框厚度,不同浏览器有不同的内定值,故请指明。

cellpadding="0"

文字与格线的距离

cellspacing="60"

表格格线厚度

bordercolordark="#D66D31"

表格边框背光部分的颜色。(效果帖中背景边框粉红色线部分)

bordercolorlight="#EF82BD"

表格边框向光部分的颜色。(效果帖中背景边框桔红色部分)

width="520"

表格宽度,接受绝对值(如 80)及相对值(如 80%)。可以在<td>中与<TABLE>中分别使用。

bgcolor="#Ffffff"

表格底色,与 background 不要同用。可以在<td>中与<TABLE>中分别使用

bordercolor="#F7D75A"

表格边框颜色

注明:有些参数在<TABLE>与<TD>中可以同用,产生不同效果。


 

 ◆ 3>文字

主题文字:

<!-- 主题文字(开始) --><FONT style="COLOR: #EF598C; FILTER: glow(color=#F7D75A); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>童 话</B></FONT><!-- 主题文字(结束) -->

相关参数解说:

COLOR: #EF598C 文字颜色

FILTER: glow(color=#F7D75A) 发光颜色

FONT-FAMILY: 华文彩云 文字字体

FONT-SIZE: 40pt 文字大小

LINE-HEIGHT: 150% 区域的高度

WIDTH: 100% 文字区域的宽度

注明:主题文字是用CSS滤镜实现的发光字效果与css语法和html语法的编写上有所区别,有关CSS滤镜效果将在以后的教程中作详细的说明。

<!-- 文字1(开始) --><font face=宋体 size=2 color=#DE3C73>忘了有多久<br>再没听到<br>你对我说你最爱的故事</font><!-- 文字1(结束) -->

<!-- 签名文字(开始) --><font face=宋体 size=2 color=#DE3C73>音乐:童话/光良<br><br>编缉:雪夜寒星<br><br></font><!-- 签名文字(结束) -->

相关参数解说:

face=宋体 字体

size=2 文字大小

color=#DE3C73 文字颜色


 

 ◆ 4>图片

实例中,分隔线、图片和装饰图都是应用的图片标签(废话,都是图片当然用图片标签),下面以内容图片做参照说明:

<!-- 图片1(开始) --><IMG src="http://cry./web/css/bbsjc/images/pic00.jpg" width="260" height="377" border="0"><!-- 图片1(结束) -->

相关参数解说:

src="pic00.jpg" 图片连接地址

width="260" 图片宽

height="377" 图片高


 

 ◆ 5>音乐

<!-- 音乐(开始) --><bgsound src="http://cry./web/css/bbsjc/images/tonghua.wma" loop=3><!-- 音乐(结束) -->

<BGSOUND> 是用以插入背景音乐,但只适用於 IE,其参数设定不多。

相关参数解说:

src="your.mid"

设定 midi 档案及路径,可以是相对或绝对。

autostart=true

是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。

loop=infinite

是否自动反覆播放。LOOP=2 表示重复两次,Infinite 表示重复多次。


 

 ◆ 6>总结

  除以上所说明的代码以外实例还用到了一个排版标记<br>,该标记称为换行标记。作用:令字、画、表格等显示于下一行。

  关与<!-- 以下部分图片和文字为重复使用相同代码(只是更换了图片地址和文字) -->注释部分,大家可以先编缉设定好一张图片和所配文字的代码,由于其它图片和文字所用到的效果相同,所以只用复制粘帖多次,把相应的图片和文字进行更换就可以了。

 



    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约