当前位置:首页 >> 实用素材 >> 网页制作知识 >> 〓新手学贴的请进来〓
    
  双击自动滚屏  
〓新手学贴的请进来〓

发表日期:2008年9月10日  出处:转帖  本页面已被访问 5540 次

〓新手学贴的请进来〓


新手学贴









效果:





帖子的文章加图片






原代码如下:
<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产生左右变换。
我爱牧文财经!
我爱牧文财经!



  双击自动滚屏  
  相关评论:    

 没有相关评论

  发表评论:    

用 户 名:
电子邮件:
评论内容:
(最多评论字数:500)

心缘之梦 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 |

联系人:“心缘之梦”微信群yueyuanzhongqiu20080815