darky_5418

转自清风论坛.供大家一起交流学习.感谢原作者gift530:以下内容为转贴内容




学前育成：
本来这些不该是我讲的，因为这些算是很基础的吧，可能还是有人不知道，就重复一次吧
一.清风论坛的编辑模式：清风的编辑模式有两种，姑且称简洁模式和高级模式吧，在高级模式下，就可以发html贴
二.关于剪切，复制，和粘贴
新手大多是喜欢用右键，但是不是什么时候都能用右键的，请熟练操作快捷键——
复制：ctrl+c  ;'C:Ssx
剪切：ctrl+x _+~c*EhD"
粘贴：ctrl+v
全选：ctrl+a
撤消：ctrl+z
三.关于换行，高级模式下换行有两种
1.直接敲回车键，可以达到换行的效果，但实际上是分段！下面的一行字会和上面的一行有距离的 zB>^k/En 05==Gj5
hjc< .!9
2.shift+会车，这个才是真正的换行，两行紧密排在一起！
四.有关html代码，html代码由标签构成。常见的有段落，文字，图片，多媒体，表格等等
接下来逐一的介绍这些标签的用法

第一讲：文字标签
基本语法： <font>文字〈/font〉
可通过参数改变文字的大小，颜色，字体，粗细等等，如
————————————————传说中的分隔线————————————————
<FONT style="FONT-SIZE: 18px; COLOR: red; FONT-FAMILY: 黑体">文字</FONT>
效果：文字
注解：
style=" ; ",这里是设置文字的样式，各属性用分号隔开即可 *2 Gp &7.
font-size:字的大小，px是像素，说明文字大小18像素 dS$wg??P
color：这个不用多说了是颜色，可以用英文（red，blue,black,white,..）表示,同样可以用16进制格式表示color:#ffffff(#号加6位数字) f q|=%`){M
font-family:看都看得出是字体了
————————————————传说中的分隔线————————————————
同样还有简易的方法，如
<FONT color=#cfcf88 size=7>文字</FONT>
效果：文字
可以简单的不用style直接用以上的来设置文字的颜色和大小 )i?_cy9Hf
size:字号，1到7可以选择
————————————————传说中的分隔线————————————————
加粗，倾斜，下划线，删除线
放在<font></font>标签中间
加粗： <b></b>或者<strong></strong>
如: <FONT style="FONT-SIZE: 20px"><STRONG>文字</STRONG></FONT>
效果：文字
————————————————传说中的分隔线————————————————
倾斜： <i></i>或<EM></EM>
下划线： <u></u>
删除线： <STRIKE></STRIKE>


[ 本帖最后由 darky_5418 于 2007-2-4 13:38 编辑 ]

darky_5418

第二讲：段落
标签： <p></p>
可以设置段落的样式，对齐方式如
<P align=right>文字</P>
效果：

文字

注解：align为对齐方式，可选left，center，right，justify

讲到这就要和上面讲到的换行对应一下，回车符对应的是<p></p> |3<xoqD0 fb&QBsm.e@
而shift+回车对应的则是换行符<br>

第三讲：图片标签

基本语法： <img src=图片地址> （这是个不成对出现的标签）

原始图片<IMG src="http://img141.imageshack.us/img141/2446/111ff7.jpg">

————————————————传说中的分隔线————————————————

可以通过属性设置图片的大小：

通过样式控制大小

<IMG style="WIDTH: 96px; HEIGHT: 92px" src=http://img141.imageshack.us/img141/2446/111ff7.jpg>

————————————————传说中的分隔线————————————————

另外还可以还可以直接设置图片大小：

<IMG width=50 height=50 src=http://img141.imageshack.us/img141/2446/111ff7.jpg>

第四讲：超级连接标签

语法： <A href="地址">连接对象</A>

————————————————传说中的分隔线————————————————

如： <A href=http://bbs.breezecn.com>清风论坛</A>

效果：清风论坛

————————————————传说中的分隔线————————————————

同样连接对象也可以是图片

如： <A href=http://bbs.breezecn.com><IMG width=50 height=50 src=http://img141.imageshack.us/img141/2446/111ff7.jpg></A>

效果：

darky_5418

第五讲：播放器标签
播放器代码其实是很复杂的，这里就介绍最常用的简易标签
基本语法： <embed src=歌曲地址>
可设置参数：
width=300 Ff+HhV%
heigth=50（当然也可以通过style样式，来设置大小） ssK9]~7
loop=-1(循环次数，-1就是无限循环，1为播放一次结束) ky H{}Y,K
autostart=1/0(1为自动播放，0为手动开始) @+Ev(;mw
hidden=1/0（是否隐藏播放器） v@vC.XcFRa
showstatusbar=1/0（是否显示歌曲状态拦）
常见的就是上面的那些，具体的还有下面这些
    showcontrols 属性：是否显示控制栏（包括播放控件及可选的声音和位置控件）； D#M8
G4y
    showaudiocontrols 属性：是否在控制栏显示声音控件（静音按钮和音量滑块）； AXO&6 F&'
    showpositioncontrols 属性：是否在控制栏显示位置控件（包括向后跳进、快退、快进、向前跳进、预览播放列表中的每个剪辑）； /}2-L7
    showtracker 属性：是否显示搜索栏；  
naJl9%
    showdisplay 属性：是否显示显示面板（用来提供节目与剪辑的信息）； 5<-,/6UWT3
    showcaptioning 属性：是否显示字幕显示面板； ^eg8 g
    showgotobar 属性：是否显示转到栏； h .1hy+
    showstatusbar 属性：是否显示状态栏；
随便写一个：
<embed src=歌曲地址 width=300 height=48 showstatusbar=1 loop=-1 autostart=1>
这就是个长为300 高48 显示状态条 无限循环 自动的播放器

darky_5418

第六讲：移动效果（俗称走马灯）
语法： <marquee> 移动对象</marquee>
对象可是文字，图片，表格，播放器等等
同样可以通过设置图片大小的两种方法来设置对象活动的区域（注意，长和宽至少有一项是必须设置的）
width=300  height=300
或者style="width:300px;height:300px"
常用的参数可选的：
behavior：可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是slide，那么文本就移动到文档上，并停留在页边距上。如果设定为alternate，则文本从一边移动到另一边。如果设定为scroll，文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有：silide，alternate，scroll。　
direction：用于设定文本滚动的方向，可以设定的值有:left,right ,up,down。此属性不是必须使用的。
scrollamount：用于设定每个连续滚动文本后面的间隔，用来控制移动速度的，该间隔用像素表示。此属性不是必须使用的。
scrolldelay：用于设定两次滚动操作之间的间隔时间，该时间以毫秒为单位。同样是用来控制滚动速度的,数值越大，速度越慢，如无特别的需要，推荐使用上边的书香控制！
如： <marquee width=100  height=100 direction=up> 移动对象</marquee>
移动对象

第七讲：文本框标签（文本区）
基本语法： <TEXTAREA></TEXTAREA>
<TEXTAREA style="WIDTH: 100px; HEIGHT: 100px">文字</TEXTAREA>
好像清风里直接贴文本框有点小问题，请嵌入表格中使用...没有一定基础不推荐使用这组标签！！


第八讲：表格标签
终于讲到了这个，着是最复杂的一个了，不单是语法，更是效果最多样化的，可以说html贴最精华的部分也就在这了
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
可以看出是四层的标签
<td>这里控制单元格属性 jp)}:UA 8pw%t0t(S (O c`v)
<tr>控制行属性
KS2}Kd GsY7> K_N:hU=2!
<table>控制表格属性
width:宽度（适用于table和td） 5$4 >?`o' [i!3+;Rf 0 hxoG
height：高度（适用于table，tr，td） 8mh}mT Ge Ed32^(Ge [j7Dr}i
cellSpacing:单元间距，单元格与表格边线、两单元格之间的距离（适用与table） &h*}R5SV A~4'< W  =Ple T[9
cellPadding：单元边距，单元格内的内容距单元格边线的距离（适用于table） 0WKh.~ (\`[KILu kWB;R60p
border：边框厚度（适用于table） ?4bx!}0 2`J:R^Kj 8
V
^yMg
bgcolor:背景色（适用于table和td，两个可同时设置） 0J~ O5o8f .vF-Q3SS&^ hiyhb,0LD
background：背景图片（实用于table和td，两个可同时设置，不要与背景色重复使用）
————————————————传说中的分隔线————————————————
下面举几个简单的例子：
1.最简单的在图片上写字
<table bordercolor=#841a00 height=200 cellspacing=2 width=400 background=http://www.ne.jp/asahi/syaraku/kichinyado/hana/ayame1/ayame11/ayame12.jpg border=2>
<tbody>
<tr>
<td>输入文字 </td></tr></tbody></table>
效果：

输入文字

————————————————传说中的分隔线————————————————
如不需要边框的话 边框厚度设置成0就好了，就会出现下面的效果：
<table bordercolor=#841a00 height=200 cellspacing=2 width=400 background=http://www.ne.jp/asahi/syaraku/kichinyado/hana/ayame1/ayame11/ayame12.jpg border=0>
<tbody>
<tr>
<td>输入文字 </td></tr></tbody></table>

输入文字

————————————————传说中的分隔线————————————————
2.背景填充色：
<TABLE borderColor=gray height=150 cellSpacing=10 width=400 bgColor=yellow border=30>
<TBODY>
<TR>
<TD bgColor=green>输入文字</TD></TR></T></TBODY></TABLE>

输入文字

darky_5418

第九讲：对齐方式
讲了上面的那么多，大家应该注意到一个很重要的问题，就是对齐方式的问题，对齐方式会直接影响到实际效果：
align：横向对齐 常用到有left，right,center
因为适用对象很多（主要有<p>,<table><td>,<marquee>）,所以单独拿出来讲！
如： <p align=center>段落内容<p> Bf5]ssOd 3n
i'\:M
（段落内可以是任何内容，表格，文字，播放器，图片，走马灯，段落等等）
如放在 <talbe>内，则可以控制整个表格相对于外部的对齐方式 `?@ ~x!E\ b``^%ZFC2 VnG }^)0Z
放字<td>内则控制单元格内部的内容相对表格的对齐方式
————————————————传说中的分隔线————————————————
valign：纵向对齐  常用到的属性有top,center,bottom
适用对象(<table>,<td><marquee>)
如： <td valign=top>段落内容<td>
写到这，标签基本上算是讲完了！！！

第十讲：滤镜效果
帖子讲到这呢，才有点味道了，因为从这开始，才能出一些比较好看的效果！！
先从无参数的滤镜开始
————————————————传说中的分隔线————————————————
1.横向翻转
基本语法：style="filter: fliph()"
主要适用范围：文字<font>,图片<img>,播放器<embed>等等如：
<font style="filter: fliph(); width: 100px">大家一起学!</font>
效果：
大家一起学!
注意一下，给文字加滤镜时，样式里要给出文字区域的大小！！！
————————————————传说中的分隔线————————————————
2.纵向翻转
基本语法：基本语法：style="filter: flipv()"
主要适用范围：文字<font>,图片<img>,播放器<embed>等等如：
<IMG style="filter: flipv()" src=http://img246.imageshack.us/img246/5696/1111cs1.jpg>

————————————————传说中的分隔线————————————————
3.黑白效果
基本语法：style="filter: gray()"
主要适用范围：图片<img>,播放器<embed>，表格<table>，单元格<td>
例如： <embed  style="filter: xray()" width=300 height=28 autostart=false src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma>

————————————————传说中的分隔线————————————————
4.x光效果（黑白底片）
基本语法：style="filter: xray()"
主要适用范围：图片<img>,播放器<embed>，表格<table>，单元格<td>
例如： <IMG style="filter: xray()" src=http://img246.imageshack.us/img246/5696/1111cs1.jpg>

————————————————传说中的分隔线————————————————
5.反色效果（彩色底片）
基本语法：style="filter: xray()"
主要适用范围：图片<img>,播放器<embed>，表格<table>，单元格<td>
例如： <embed style="filter: invert()" src=http://file1.baizhao.com/hard0/user310/310483/mydisk/fenzhen.wma width=300 height=50 showstatusbar=true autostart=0>
效果：

上面讲到的都是些无参数的滤镜，下面将到的几个是才参数的滤镜
————————————————传说中的分隔线————————————————
6.羽化效果（半透明效果）
基本语法：style="filter: alpha(opacity=10,finishopacity=70,style=3)"
opacity属性：设置起始透明度，取值0至100之间的任意数值，100表示完全不透明；finishopacity属性为终止透明度，缺省为0 X7;S WMPBEy
I
style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变，缺省值为0。
主要适用范围：文字<font>,图片<img>,播放器<embed>，表格<table>，单元格<td>
如： <img style="filter: alpha(opacity=10,finishopacity=70,style=3)" src="http://img141.imageshack.us/img141/2446/111ff7.jpg">
效果：

————————————————传说中的分隔线————————————————
7.发光效果：
基本语法：style="filter:glow(color=red,strength=4)"
color属性：光晕颜色；strength：光晕的厚度。
主要适用范围：文字<font>,图片<img>,播放器<embed>，表格<table>
如： <FONT style="FILTER: glow(color=red,strength=4); WIDTH: 200px" color=white>大家一起学</FONT>
效果：[color=red,strength=4);]大家一起学
————————————————传说中的分隔线————————————————
8.阴影效果”
基本语法：style="filter:shadow(color=red,direction=40)"
color属性：阴影颜色；
D(V=P2{ - Av^*:C :nA'4WF{
direction属性：阴影角度，值取0至360度。
主要适用范围：文字<font>,图片<img>,播放器<embed>，表格<table>
如： <FONT style="FONT-SIZE: 15px; FILTER: shadow(color=red,direction=40); WIDTH: 150px; HEIGHT: 20px">大家一起学!</FONT>
效果：[color=red,direction=40);]大家一起学!
————————————————传说中的分隔线————————————————
9.模糊效果
语法：style="filter: blur(add=0,direction=30,strength=5)"
其add属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；direction属性是模糊移动的角度，其值为0至360度；strength属性是模糊的强度。
主要适用范围：文字<font>,图片<img>
如： <FONT style="FONT-SIZE: 30px; FILTER: blur(add=0,direction=30,strength=5); WIDTH: 186px; HEIGHT: 42px" color=#4229a3>大家一起学!</FONT>
效果：
大家一起学!
————————————————传说中的分隔线————————————————
10.波纹效果
语法：style="filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30)"
add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之； 4C`n2{i (-J0WJ
freq属性：决定显示的频率，即应出现多少个波形； BJr3/ ]r >itE/"$
phrase属性：决定波形的形状，值取0至360之间； ? /4%7V\ \M%wem
strength属性：形状变化的强度 Lm6U``2 g0;*A1V
lightstrength属性：光线变化的强度
主要适用范围：文字<font>,图片<img>
如: <FONT style="FONT-SIZE: 30px; FILTER: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30); WIDTH: 190px; HEIGHT: 44px" color=#c43cc4>大家一起学!</FONT>
效果： |K{5W(t. $sld_ ]F
大家一起学!
————————————————传说中的分隔线————————————————
11.透明效果（选色透明）
语法：style="FILTER:Chroma( Color=#CCCCCC)"
作用效果：如果滤镜中的像素有颜色与设定的颜色相同，则该像素变为透明（包括图片的像素）。例如使用的语句是 FILTER:Chroma( Color=#CCCCCC) ，则滤镜作用范围内所有颜色为“#CCCCCC”的像素都变为透明。
主要适用范围：文字<font>,播放器<embed>，
如： <embed  style="filter: Chroma(color=black)" width=300 height=28 autostart=false src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma showstatusbar=true >
效果： HE5%u}< PUt(hn> 7

darky_5418

第十一讲：运用实例
基本的一些标签及语法算是讲得差不多了，光说不练嘴把式，还得实战演练一番！！
这里先推荐一款功能在线编辑器：[url=http://gift530.xinwen365.net/gift/editor.txt][url=http://gift530.xinwen365.net/gift/editor.txt][url=http://gift530.xinwen365.net/gift/editor.txt][url=http://gift530.xinwen365.net/gift/editor.txt]http://gift530.xinwen365.net/gift/editor.txt[/url][/url][/url][/url]
功能比较强大，很多直接就可以编辑，不用到代码模式下修改！可以用它直接生成表格，图片，文本框，以及设置颜色，对齐格式！
首先要说的是个总规则：
1.代码模式下：标签内的属性控制该标签内的内容（如段落<p>标签里面的属性控制段落的属性，当然这个段落可以由“文字，图片，表格，播放器，走马灯，段落，或者这些任意组合”构成）
2.可视编辑模式下：请遵循先选取，后操作的原则，选区尤为重要，大多时候无法达到预期的效果，都是选区不正确。
3.如使用清风以外的在线编辑器的话，可视模式下选区比较重要，在完成编辑后，如果实在没有把握选中的话，请使用ctrl+a全部选中！
————————————————传说中的分隔线————————————————
例一：水纹倒影
效果：
hN{-OvK 0cc\g< 9z

首先我们解读一下：明显这是两张图片，上面的图片没有做什么效果。至于倒影，首先我们要给它来个纵向翻转，就可以把它倒过来了；接着呢，因为反射的关系，颜色会变淡，那么我们羽化一下，就可以让它变淡；最后一步，因为水波的关系，图片会有点波动，我们再做一个波形变化，就能实现下面一张图片的效果了，当然图片高度还得设置得比上面小一点！
怎么让两张图片紧密的排在一起呢，前面讲到了，换行就可以了 即<br>,那么全部的代码就是：
<IMG height=200 src=http://img141.imageshack.us/img141/2446/111ff7.jpg width=200 ><BR>
<IMG style="FILTER: Wave(Add=0, Freq=2, LightStrength=5, Phase=0, Strength=3) flipv() alpha(opacity=60,finishopacity=60,style=0)" height=150 src=http://img141.imageshack.us/img141/2446/111ff7.jpg  width=200>
————————————————传说中的分隔线————————————————
例二：播放器效果1

我们来解读一下：首先播放器显示的只有状态栏，那么我们要用showstatusbar="true"显示出状态栏，并且控制大小让它只现实状态栏，高度为24；接着我们让这个播放器变成透明的，那么加个透镜，让黑色变成透明的style="FILTER: Chroma(color=black)"，状态条的背景为black；最后呢在把这个播放器嵌入一个表格，那么给表格加个背景的话，就能显示出背景了！
解读之后，我们就可以写出以下的代码代码：
<TABLE cellSpacing=0 cellPadding=0 background=http://img1.3lian.com/img2008/03/020/gifbj071.gif border=0>
<TBODY>
<TR>
<TD><EMBED style="FILTER: Chroma(color=black)" src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma width=300 height=24 type=audio/x-ms-wma autostart="false" showstatusbar="true"> </TD></TR></TBODY></TABLE>
————————————————传说中的分隔线————————————————
例三：播放器效果2

我们来解读：首先播放器的基本设置和上面是一样的，那么怎么让播放器的字变成红色的呢？首先找到播放器原来字体的颜色#89A4FF（偶用抓色工具抓出来的），让这个颜色变成透明的FILTER: Chroma(color=#89A4FF)；那么背景是黑条怎么办呢，我们给播放器加个反色invert() ；最后把播放器嵌在一个红色背景的表格里，就能得到上面的效果了
我们就可以得到下面的一段代码：
<TABLE cellSpacing=0 cellPadding=0 bgColor=red border=0>
<TBODY>
<TR>
<TD><EMBED style="FILTER: Chroma(color=#89A4FF) invert()" src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma width=300 height=24 type=audio/x-ms-wma showstatusbar="true" autostart="false"> </TD></TR></TBODY></TABLE>
————————————————传说中的分隔线————————————————
例四：金属光泽

大家一起学

解读一下：很明显这里出现了一个颜色变化，我们怎么实现呢，可以用波形来实现， V_nW-(GI7X 5hq"o"|2 *oW7WRm
style="FILTER: wave(add=0,lightstrength=40,strength=0,freq=1,phrase=0)" ；我们把频率设置成1，那么就只会出现一次颜色变换，strength设置为0，那么形状不会发生改变，只要合理的设置颜色和光线变化强度的话就能实现以上的效果了
我们可以用以下代码实现上面的效果：
<TABLE style="FILTER: wave(add=0,lightstrength=40,strength=0,freq=1,phrase=0)" height=30 cellSpacing=0 cellPadding=0 width=300 bgColor=#c0c0c0 border=0>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#ff00ff>大家一起学</FONT></P></TD></TR></TBODY></TABLE>
————————————————传说中的分隔线————————————————
例五：立体边框表格
这个相对比较简单一点，发个代码解释一下就可以了
<table height=150 cellspacing=10 bordercolordark=#722c2e width=200 bordercolorlight=#e5bcbd  bgcolor=#B8E1D8 border=1>
<tbody>
<tr>
<td>输入文字</td></tr></tbody></table>

输入文字

bordercolordark:暗线颜色 B+<]CJmpEZ Lxi#NQ79i 1vB(T!9%
bordercolorlight:明线颜色
这两个颜色设置成一样的就和普通边框没什么区别，当设置深浅不一样，就会出现立体效果，当然不一定是要暗线的颜色一定更深，两个颜色对调的话，分别会出现镂刻和浮雕的效果。你们可以自己尝试一下！！

darky_5418

再占几个位置

darky_5418

首页占位 :lol

darky_5418

再占一个

darky_5418

最后一个

gehaobo1985

DK你好狠啊,从屋顶到地面,从沙发到板凳都给占了,偶连打地铺的地方都没了.........

hisazabi

我好想把我LS的贴删了然后自己占个位置

永恆De神話

要删吗?  交给我就行了 - -

darky_5418

谁敢删个我试试看?

伊贺丸

额      占楼  
对我这种用Dreamweaver的人来说 不学这个是不行的。。

虚空之男

不行呀....我试过了~~不行哦~~

猫行彼界

最后占一楼
好
发表下感言
。。。。。真8错;P

MT-大佬

还可以啦，都说出来了

Mythology

<TABLE borderColor=gray height=150 cellSpacing=10 width=400 bgColor=yellow border=30>
<TBODY>
<TR>
<TD bgColor=green>测试一下</TD></TR></T></TBODY></TABLE>

wym163

噢  有意义袄
级别太低了 罐吧