您好!欢迎您光临新手必看(图音制作基本知识)_梅香阁—音画网!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>小梅专栏>>>小梅音画>>>新手必看(图音制作基本知识)
新手必看(图音制作基本知识)
发表日期:2005/7/8 6:49:00 出处:未知 作者:未知 发布人:晴天一啸 已被访问 10941


新手学贴









效果:





帖子的文章加图片






原代码如下:
<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>

帖子的文章加图片

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


注意:前边用了多少<table......><tr><td>后面就要有多少</td></tr></table>收尾。



常用的参数设定及注解:

<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">

width="400"
表格宽度,接受绝对值(如 500)及相对值(如 80%)。

border="10"
表格边框的厚度。

cellspacing="2"
表格格线的厚度

cellPadding=5 表格格线内厚度


align="CENTER"
表格的摆放位置(水平),可选值为:左: left, 右: right, 居中: center

valign="TOP".
表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。   

background="背景图片网址"
表格的背景图片,与 bgcolor 不要同用。

bgcolor="#0000FF"
表格的底色,与 background 不要同用

bordercolor="#CF0000"
表格边框颜色

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

bordercolordark="#00FFFF"
表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。



二.文字应用

1.文字基本设制


基本代码如下:

<P align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字</FONT></P>


<P align=center>表示居中,<P align=left>表示居左,<P align=right>表示居右。

face=字体 常用字体为:宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等

size=字体大小,这里的最大值为7 取值越大文字就越大

另一种贴法:

<font style=font:40pt face=新宋体 color=#ff0000>插入文字</font>

font:40pt 数值越大文字就越大。

color=颜色代码。



三.贴图

1.基本代码:


<img src=图片网址 width=图片宽度 height=图片长度>

注意:设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小,以免失真,若需要改图片大小最好使用图像编辑工具(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)。图片的居中,居左,居右上面已经介绍了,这里不再重复。。。。。

2.给图片加边框

效果:



基本代码:

<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://wanglirong.nease.net/luanyun/x3.jpg width=600 height=407></td></table>

说明:

border="6" 表格边框的厚度,不同浏览器有不同的内定值。

cellspacing="2" 表格格线的厚度

cellPadding=1 表格格线内厚度

borderColor=#841A00 边框色彩



四.透明FLAH的应用

1.常用效果:





代码如下:

<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#84B98D background=图片><TBODY><TD><EMBED src=http://www.flashsky.com/20020915_cao/17884/ye.swf width=590 height=400 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></TD></TBODY></table></center>

注意:长和宽的设定要根据图片的实际大小来设定



五.贴歌代码

1.背景音乐(适合 mid wma等格式)
<bgsound src=音乐网址 Loop=-1>



2.音频(适合MP3 WMA RM等很多格式)



代码如下:
<embed src=音乐网址 type=audio/x-pn-realaudio-plugin controls=ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=40>

3.视频
<embed src=视频网址 type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400>

4.FLASH
<embed src=网址 width=400 height=400>



说明:AutoStart=true 表示是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为true

Loop=true 表示设定播放重复次数,LOOP=3表示重复3次,true表示无限次播放,FALSE播放一次即停止。

width=宽度 height=高度 可以设定控制播放器面板的大小,如果都设置为0就可以把播放器隐藏了。



用CSS滤镜修饰文字

用CSS滤镜修饰文字

CSS是Cascadin Style Sheets的简称,中文意思是“串联式排版样式”,也称“串接样式表”。它是统一HTML标准的“W3C”的工业合作组织于1996年5月制定的第一个排版样式标准,是对HTML功能的补充。CSS并非一种程序设计语言,它只是一种用于页面设计的、由设计者提供的手段,其主要功能是通过对HTML标记进行设定,对网页中的对象进行有效控制,使网页能够按照设计者的意愿来显示。

本文将介绍几个CSS滤镜(用来修饰文本),以此向大家展示CSS的强大功能。读者将在阅读代码和观赏文本特效中为CSS所制作出的文字特效而心动不已。请记住:CSS滤镜只不过是CSS众多的功能之一,可谓冰山一角而已,更多的功能请查阅有关CSS教程。

一、Alpha滤镜

请先观察以下效果:

我喜欢梅香阁!

代码:

<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>梅香阁!</B></FONT>

从效果中我们可以看出,Alpha滤镜使对象呈渐变透明的效果,其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中:

opacity属性:设置透明度,取值0至100之间的任意数值,100表示完全不透明;
style属性:设置渐变风格,0表示均匀渐变,1表示线性渐变,2表示放射渐变,3表示直角渐变。

而width:100%则表示参与渐变的对象的宽度,通常都设置为100%。

二、Motion Blur滤镜

Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标,其值为0和1,0表示“否”,用于文字,1表示“是”,用于图像;Direction属性是模糊移动的角度,其值为0至360度;Strength属性是模糊移动的距离。

以下是实例和代码:

我喜欢梅香阁!

<FONT style="FONT-SIZE:30pt;filter:blur(add=1,direction=30,strength=5);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我喜欢梅香阁!</B></FONT>

三、Drop Shadow滤镜

Drop Shadow滤镜主要产生重叠效果。其属性为:

color属性:设置影子文本的颜色;
offX和offY属性:影子文本下落的位移值;
Positive属性:指定透明象素阴影,布尔型,0为是,1为否。

实例代码及效果:

我喜欢梅香阁!

<FONT style="FONT-SIZE:30pt;filter:dropshadow(color=lightgreen,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我喜欢梅香阁!</B></FONT>


四、Shadow滤镜

与Drop Shadow的影子特性不同,Shadow滤镜产生一种阴影效果,它的属性比较简单:

color属性:阴影颜色;
direction属性:阴影角度,值取0至360度。

实例:

我喜欢梅香阁!

<FONT style="FONT-SIZE:30pt;filter:shadow(color=black,direction=180);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我喜欢梅香阁!</B></FONT>

五、Wave滤镜

此滤镜对过滤对象生成正弦波变形,造成一种变幻效果。内嵌属性:

add属性:布尔型,0或1,0表示将原始对象加入最后效果中,1则反之;
freq属性:决定显示的频率,即应出现多少个波形;
phrase属性:决定波形的形状,值取0至360之间;
strength属性:决定波形的振幅。

实例代码与效果:

我爱牧文财经!
<FONT style="FONT-SIZE:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我喜欢梅香阁! </B></FONT>

六、Glow滤镜

Glow滤镜生成一种光晕效果。属性:

color属性:光晕颜色;strength:光晕的厚度。

实例代码与效果:

我喜欢梅香阁!
<FONT style="FONT-SIZE:30pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我喜欢梅香阁!</B></FONT>

七、Flip滤镜

Flip滤滤镜主要是产生两种变换效果,即上下变换和左右变换。FlipV产生上下变换,FlipH产生左右变换。
我喜欢梅香阁!
<FONT style="FONT-SIZE:30pt;filter:FlipV(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我喜欢梅香阁!</B></FONT>


我喜欢梅香阁!
<p align=right><FONT style="FONT-SIZE:30pt;filter:FlipH(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我喜欢梅香阁!</B></FONT></p>



===============================
效果如下:

用CSS滤镜修饰文字

CSS是Cascadin Style Sheets的简称,中文意思是“串联式排版样式”,也称“串接样式表”。它是统一HTML标准的“W3C”的工业合作组织于1996年5月制定的第一个排版样式标准,是对HTML功能的补充。CSS并非一种程序设计语言,它只是一种用于页面设计的、由设计者提供的手段,其主要功能是通过对HTML标记进行设定,对网页中的对象进行有效控制,使网页能够按照设计者的意愿来显示。

本文将介绍几个CSS滤镜(用来修饰文本),以此向大家展示CSS的强大功能。读者将在阅读代码和观赏文本特效中为CSS所制作出的文字特效而心动不已。请记住:CSS滤镜只不过是CSS众多的功能之一,可谓冰山一角而已,更多的功能请查阅有关CSS教程。

一、Alpha滤镜

请先观察以下效果:

我喜欢梅香阁!

代码:

我喜欢梅香阁!

从效果中我们可以看出,Alpha滤镜使对象呈渐变透明的效果,其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中:

opacity属性:设置透明度,取值0至100之间的任意数值,100表示完全不透明;
style属性:设置渐变风格,0表示均匀渐变,1表示线性渐变,2表示放射渐变,3表示直角渐变。

而width:100%则表示参与渐变的对象的宽度,通常都设置为100%。

二、Motion Blur滤镜

Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标,其值为0和1,0表示“否”,用于文字,1表示“是”,用于图像;Direction属性是模糊移动的角度,其值为0至360度;Strength属性是模糊移动的距离。

以下是实例和代码:

我喜欢梅香阁!

我喜欢梅香阁!

三、Drop Shadow滤镜

Drop Shadow滤镜主要产生重叠效果。其属性为:

color属性:设置影子文本的颜色;
offX和offY属性:影子文本下落的位移值;
Positive属性:指定透明象素阴影,布尔型,0为是,1为否。

实例代码及效果:

我喜欢梅香阁!

我喜欢梅香阁!


四、Shadow滤镜

与Drop Shadow的影子特性不同,Shadow滤镜产生一种阴影效果,它的属性比较简单:

color属性:阴影颜色;
direction属性:阴影角度,值取0至360度。

实例:

我喜欢梅香阁!

我喜欢梅香阁!

五、Wave滤镜

此滤镜对过滤对象生成正弦波变形,造成一种变幻效果。内嵌属性:

add属性:布尔型,0或1,0表示将原始对象加入最后效果中,1则反之;
freq属性:决定显示的频率,即应出现多少个波形;
phrase属性:决定波形的形状,值取0至360之间;
strength属性:决定波形的振幅。

实例代码与效果:

我喜欢梅香阁!
我喜欢梅香阁!

六、Glow滤镜

Glow滤镜生成一种光晕效果。属性:

color属性:光晕颜色;strength:光晕的厚度。

实例代码与效果:

我喜欢梅香阁!
我喜欢梅香阁!

七、Flip滤镜

Flip滤滤镜主要是产生两种变换效果,即上下变换和左右变换。FlipV产生上下变换,FlipH产生左右变换。
我喜欢梅香阁!
我喜欢梅香阁!





朋友们如有疑问,
欢迎进入本站论坛进行讨论
晴天一啸

进入论坛

ffff00 ffff33 ffff66 ffff99 ffffcc ffffff
ffcc00 ffcc33 ffcc66 ffcc99 ffcccc ffccff
ff9900 ff9933 ff9966 ff9999 ff99cc ff99ff
ff6600 ff6633 ff6666 ff6699 ff66cc ff66ff
ff3300 ff3333 ff3366 ff3399 ff33cc ff33ff
ff0000 ff0033 ff0066 ff0099 ff00cc ff00ff
ccff00 ccff33 ccff66 ccff99 ccffcc ccffff
cccc00 cccc33 cccc66 cccc99 cccccc ccccff
cc9900 cc9933 cc9966 cc9999 cc99cc cc99ff
cc6600 cc6633 cc6666 cc6699 cc66cc cc66ff
cc3300 cc3333 cc3366 cc3399 cc33cc cc33ff
cc0000 cc0033 cc0066 cc0099 cc00cc cc00ff
99ff00 99ff33 99ff66 99ff99 99ffcc 99ffff
99cc00 99cc33 99cc66 99cc99 99cccc 99ccff
999900 999933 999966 999999 9999cc 9999ff
996600 996633 996666 996699 9966cc 9966ff
993300 993333 993366 993399 9933cc 9933ff
990000 990033 990066 990099 9900cc 9900ff
66ff00 66ff33 66ff66 66ff99 66ffcc 66ffff
66cc00 66cc33 66cc66 66cc99 66cccc 66ccff
669900 669933 669966 669999 6699cc 6699ff
666600 666633 666666 666699 6666cc 6666ff
663300 663333 663366 663399 6633cc 6633ff
660000 660033 660066 660099 6600cc 6600ff
33ff00 33ff33 33ff66 33ff99 33ffcc 33ffff
33cc00 33cc33 33cc66 33cc99 33cccc 33ccff
339900 339933 339966 339999 3399cc 3399ff
336600 336633 336666 336699 3366cc 3366ff
333300 333333 333366 333399 3333cc 3333ff
330000 330033 330066 330099 3300cc 3300ff
00ff00 00ff33 00ff66 00ff99 00ffcc 00ffff
00cc00 00cc33 00cc66 00cc99 00cccc 00ccff
009900 009933 009966 009999 0099cc 0099ff
006600 006633 006666 006699 0066cc 0066ff
003300 003333 003366 003399 0033cc 0033ff
000000 000033 000066 000099 0000cc 0000ff

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



wu1x8h9
(2008/1/17 21:40:00)

梅姐  我想学!


因为有你
(2006/5/24 15:08:00) [218.15.234.]

是的!我真的很想能学到,但看过代码真的好难懂,还有更好的方法教一下吗?



liang289
(2006/4/23 7:59:00)

我不懂

 发表评论:共有 3 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

梅香阁—音画网 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:总版主:何伟 联系人:小梅(qq:472630211)

琼icp备09005167