SINOFACE|海华网

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 1961|回复: 5

音画贴入门(继续添加中)

[复制链接]
发表于 2007-10-15 11:34:55 | 显示全部楼层 |阅读模式

HTML标签做帖攻略

$ p8 G; Z. P+ [

论坛在用HTML做帖时与其它论坛大同小异,只有些许的不同而已,但同样可以做出漂亮的帖子来,同样都是由简单的HTML语法来实现的,一般也不用了解太多HTML代码的意义,但是想要做出漂亮有风格的帖子,一些简单的代码还是要理解的,这里我就提供一些简单的HTML语法的解释和使用方法,想要了解更多的可以参照有关这方面的相关教程。

/ L. |& T8 h# f' H$ S; V

一:背景

8 E) E" B8 ~* U+ z& e

效果如:

' G! A& v" ]! o( |5 ~& K

0 x2 A0 u; T% i8 B; T: V

9 k8 P. R$ j. g4 n3 J+ H% [. |5 }/ m% e1 B. u6 @8 P X9 U' e" x

% l& F4 A! v# b$ N l) X

原代码如下:

) P% L( U2 C( g' C* Q6 Q# i
9 ^9 H( i3 s* D, I. j
3 I; }* {! Y$ \. Q/ u! c

<TABLE align=center background="帖子背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="100%" > <TBODY> <TR> <TD>

5 q& Z. m& c; t; X% m

帖子内容,文字或图片.....

) k4 o: z) b) q; v% I

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

/ s9 n% x( P: a- l6 C
$ p$ i6 s/ j( C \8 c( R; H4 C

<TABLE> 的参数设定(常用):

2 M4 i; H5 M8 T3 N3 s+ f8 I: d

<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

, `% R4 Q0 H4 \ e

注解:

$ t: t' b! N) U+ [

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

! I3 k% ?& V. P7 [* C6 S

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

9 @, ?, p7 x" Y# ^0 o

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

& C& @/ ?" E% J e. R7 d4 H

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

, i& s' s% ?! u; [* A0 e- l

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

5 H& r6 o' ]& |4 g% r( M! u

background="myweb.gif" 表格的背景图片,与 bgcolor 不要同用。

, ]( _$ {" ]: K, e- M1 l% U

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

# D+ w5 e) [% i5 C

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

1 T# S5 U2 u- X" e( s% D

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

* B: @& g( c$ g9 u* j, w$ P

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

! B- i7 a) o& I( K( Y

cols="2" 表格栏位数目,只是让浏览器在下载表格时先画出整个表格而已。

; ^, ~( K" S7 O l) K7 [. S, K. |# y$ l C [ 本帖最后由 蓝蓝 于 2007-10-15 12:48 编辑 ]
 楼主| 发表于 2007-10-15 11:37:29 | 显示全部楼层
/ k$ T6 {, S4 _0 ]2 G" X5 p+ D

帖图格式:

- w( V7 r0 w- c7 c- m
<IMG src="图片连接URL地址">
8 B5 J. L, F0 Q. K Z$ v; ?6 j( m$ Z! v

<IMG> 称图形标记,主要用来插入图形标记。

0 A# s! t+ A* i1 g! k) h

<IMG> 的一般参数设定:

) N0 d8 _9 [+ ~2 q. n

  例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

6 B9 G% r6 K& y) f$ c( Y6 e

src="logo.gif" 图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行已久,后者则由 96 年开始发展, 于未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称,否则 必须加上正确的路径,相对或绝对均可。

% G3 K7 o( k. ^- T# X

width=100 height=100 设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实 大小,以免失真,若需要改图片大小最好使用图像编辑工具。(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)

7 K- `) {- w* Y& [2 t1 d# F( D C

hspace=5 vspace=5 设定图片边沿空白,以免文字或其它图片贴近。hspace 是设定图片左右的空间, 是设定图片上下的空间,高度采用 pixels 作单位。

- w' m- _4 h2 L

border=2 图片边框厚度

& S0 j4 y0 r( g% h

align="top" 调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底部、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom, texttop 表示图片和文字依顶线对齐, baseline 表示图片对齐到目前文字行底线值, absmiddle 表示图片对齐到目前文字行绝对中央, absbottom 表示图片对齐到目前文字行绝对底部,(绝对底部是指它考虑到比如 y 、g、q 等字的下边)。

. [& z( j9 J5 O( X4 j& R- a6 z

alt="Logo of PenPal Garden" 这是用以描述该图形的文字,若使用文字浏览器,由于不支持图片,这些文字 将会代替图片被显示。若支持图片的浏览器,当鼠标移至图片上该文字也会显示。

/ ?8 r7 H3 C+ A X6 b3 G( |$ P# I- Z0 v5 m

lowsrc="pre_logo.gif" 设定先显示低解析度的图片,若加入的是一张很大的图片,下载要很长的时间,这张低 解析度的图片会先被显示以免浏览者失去兴趣,通常是原图的黑白版本。

( v( c1 P+ ] }/ A9 ^ / C! |* V* {3 S[ 本帖最后由 蓝蓝 于 2007-10-15 13:08 编辑 ]
 楼主| 发表于 2007-10-15 11:42:14 | 显示全部楼层

文字设制

( a" q' V6 p7 E6 W" p# ?. _! m; H

一,文字基本设制

" e6 J0 L* ~+ b% Z1 ~( {& I

基本代码如下:

% F$ T9 \1 E! K7 N9 k5 v5 y" T

<p align=center><FONT color=#0066ff face=隶书 size=5>插入文字</FONT></P>

: f5 q+ W) a$ M

align=center 表示字体居中,可选值为居右(right)居左(left)

color=颜色代码 具体颜色代码可参照:颜色选取<<点击查看 & F, W- A( x" D

face=字体 常用字体为:宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等

: {! J0 D- C, u! D

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

0 @5 d' h7 R1 x

二,大字体文字

7 q% Y {/ m" o8 R! ?

效果:

欢迎光临 2 N0 t! R% ?1 I8 q7 [, ^8 r* |4 a* q% C

源代码:

- Q; b& k- U6 o1 ~, O

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

3 Y( s& m/ @3 o2 O2 s3 s

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

- O; X' }" M5 _3 [" a- z

三,移动文字设置:

9 Z a% H8 ]+ M

基本代码1:

( o9 Y9 a# S- {! B( m2 O6 k

<marquee direction=移动方向 scrollamount=移动速度数值>插入文字</marquee>

$ o0 b8 t- t+ S6 m+ H

说明:direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)

/ y) P- Y+ J) g2 f. [0 Q5 t

基本代码2:

# C3 p5 f4 _+ a, o- Z0 `

<marquee behavior=移动效果>插入文字</marquee>

' q# I( {- g4 F; p9 v" ~, A

说明:

2 w) J& R7 w, ^/ z; x

behavior=scroll 一圈一圈绕着走 

; j# V" U" s! W

behavior=slide

) r }6 }8 c8 H

只走一次 behavior=alternate 来回走

: h- N1 T8 k# J% C

停停走走:

: ~) u4 r) d2 K' {

效果如:

I" ]# Z" y) B. H9 F) b2 {7 N

6 ?0 C$ R2 P6 {. |, V欢迎光临

- w% y- P6 q7 `: w9 n

代码如下:

5 n! V6 x+ ?5 ~+ N+ ~6 x' J( M6 o

<marquee scrolldelay=500 scrollamount=100>插入文字</marquee>

8 U' f+ t" q# q* X* D' ^

四,文字特效显示:

u) X6 S, E! ^ \+ e" O

效果一:

2 B& i- }3 O* r! }4 Z
欢迎光临
C* `) d' D4 ?) ^

源代码:

0 g: r! X: O6 J# Y) U" Z

<CENTER><FONT style="COLOR: #e4dc9b; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临</B></FONT></CENTER>

5 M3 B" y- N% U

效果二:

5 U1 D3 N: U" `$ y4 |4 {
欢迎光临
- b0 Q. I H7 g/ a. i1 M2 _* d+ b. m

源代码:

' J5 x9 ^" w! F9 K+ U: e* j

<CENTER><FONT style="COLOR: #e4dc9b; FILTER: glow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临</B></FONT></CENTER>

2 I5 O N+ G# V4 S, \

效果三:

7 S" D' K6 e5 f' {5 @
欢迎光临
) E4 a/ a/ u5 \9 A" a' C, B1 T: n

源代码:

- N1 K6 V) h& b z) }4 V) |

<CENTER><FONT color=#0099ff style="FILTER: blur(add=1, direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; POSITION: relative; WIDTH: 450px">欢迎光临</FONT></CENTER>

3 b) h- j% S$ C5 @

效果四:

" O8 i& z( M2 g3 f0 G" Y% F4 \ - L1 v8 d1 G: K/ L8 p1 Y欢迎光临 - A6 ?7 ~" r- ~6 o' ?3 c

源代码:

6 x% S( I4 S8 P0 p4 G) l3 X+ @

<MARQUEE behavior=alternate direction=up height=150 scrollAmount=5><MARQUEE behavior=altrnate scrollAmount=2 width=460 <IMG src="http://www.east128.com/bbs/UploadFile/2003-9/20039251018214901.gif"><FONT color=red face=楷体_gb2312 size=7>我是心跳,嘿嘿</FONT></MARQUEE></MARQUE></MARQUEE>

/ Q/ b( z0 x; M

效果五:

: i) R7 o" A$ {! X/ {- B: O' y" c 欢迎你朋友9 o' x3 p; R# d0 S1 t 友朋你迎欢 : T; s; L# F' R8 _ F3 b( x5 f5 q

源代码:

% P3 ], T4 F( J X+ c2 e) }" C' |

<FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=240>欢迎你朋友</FONT></MARQUEE><FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=240>友朋你迎欢</MARQUEE></FONT></FONT>

0 n6 z/ {3 X% d, v# H

注明:在用这种效果时,文字移动范围的宽width的取值很重要,两段文字移动范转的width取值和一定要小于背景层width的取值

" O# c e) K8 D. S" ?3 } 9 B8 J) V% H0 C0 c+ k9 k2 c [ 本帖最后由 蓝蓝 于 2007-10-15 13:33 编辑 ]
 楼主| 发表于 2007-10-15 11:56:51 | 显示全部楼层

阴文字效果:

: {( I: v7 d9 @7 w& i
q3 o& O; g' d2 C# q 3 A/ R* ~) Y- I: q/ N5 e% v+ O+ L( d- X- p0 P5 `: r' Y: e
福建人在线
% u( @& Y8 j+ h4 p5 [


代码:
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#a09261) shadow(color=#000000,direction=135) chroma(color=#a09261)" align=middle>
<FONT style="FONT-SIZE: 56pt; WIDTH: 100%; COLOR: #000000; LINE-HEIGHT: 150%; FONT-FAMILY: 黑体"><B><I>福建人在线</I></B></FONT>
</TD></TR></TBODY></TABLE>
( X& V( f* W6 y! j
 
9 ^0 |$ q4 M) l: I5 E2 y" X
 
, P {0 A+ y; R; D, E: V! d
 
4 A; u3 w" F' V& |, ^, j
 
$ C# V/ W% J0 [( ~+ G2 B
) f; s' p# A7 `
* l, K* h4 k% A& {! T

齿边字效果:

' i" {9 b8 i" e7 |2 z! G0 P 5 \' _ Z* R0 p' _7 _$ v4 Q- r8 {6 O, i3 a& B7 q8 C, c
福建人在线
/ |: c$ p7 T% z9 p8 [. J t

代码:

6 H$ }2 }& Q/ O- @4 }

<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: glow(strength=10) mask(color=blue)" align=middle>
<FONT style="FONT-SIZE: 68pt; WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 黑体"><B><I>福建人在线</I></B></FONT>
</TD></TR></TBODY></TABLE>

6 R9 C" _, e4 m7 V) E; b% ~" g# q $ l, R' C7 F' e; e3 h[ 本帖最后由 蓝蓝 于 2007-10-15 13:04 编辑 ]
 楼主| 发表于 2007-10-15 12:01:06 | 显示全部楼层
多媒体标记 # W% L5 n* a7 t5 h: h. J7 R
9 C, F$ H3 j9 V( i$ ?4 y0 `

/ s' w, X& A9 C

. U( P, w; L5 g: a) w: S/ L) @3 Y0 v. W4 z t2 X9 {9 _" F f! _9 k, G) q; [/ V* c* h5 f2 H
* d. ?' j% [4 p' g$ ?8 r u$ s

多媒体标记<BGSOUND><EMBED>

. s, Q+ J8 g2 P" C5 I( ` 5 v$ Z, y" V6 |9 Z3 k- v1 V0 t+ O+ N0 @1 E4 ~$ {+ P7 s( K1 _4 }
■ <BGSOUND>:
<BGSOUND>插入背景音乐,但只用于IE,且只可在<head></head>中使用其参数设定不多。如下 <BGSOUND src="http://....../noname.mp3" autostart=true loop=infinite> src="http://....../noname.mp3" 设定音乐格式及路径,在绝美图库主要使用绝对路径,即以http://或者mms://或者rtsp://等开头的地址。 autostart=true 是否在音乐传送完后,就自动播放音乐。true表示是,false表示。loop=infinite 是否自动重复播放。LOOP=2 表示重复两次,Infinite或者-1表示重复多次。 2 y! a2 K0 p d % T5 j% {3 j' K; R2 E/ Q' N9 n) G- ]4 m) r" C" `3 x1 e) Z/ b+ u( e9 B2 V
■ <EMBED>:
<EMBED>是用以插入各种多媒体,格式可以是 midi、wav、wma、rm等等,并且因为音乐格式的不同,可能会有不同的控制面板出现。多种浏览器者支持。其参数设定较多。如下 <EMBED src="http://....../noname.mp3" autostart="true" loop="true" hidden="true"> : C( M8 Y- W/ l! g8 Q/ o8 ?& T4 b
    / z* C5 c( p$ V& k: ]
  • src="http://....../noname.mp3" 设定音乐格式和路径,用法同上。 " v$ Y$ k- _+ V e: `- N
  • autostart=true 是否在音乐传送完后,就自动播放音乐。true表示是,false表示。 4 v/ J N* c) K: w1 u
  • loop="true" 是否自动重复播放。loop=2 表示重复两次,true表示是,false表示否。 hidden="true" 是否完全隐藏控制面板,true表示是,no表示否。 B0 a' I5 }8 ?, p! A$ S
  • starttime="分:秒" 设定歌曲开始播放的时间。如 starttime="00:30" 表示从第30秒开始播放。 / c# a; M: X f
  • volume="0-100" 设定音量的大小,数值是0到100之间。注意不得故意将音量定得过大惊吓看贴人,否则一定给予严厉惩罚。 ( {! |% Y( Q7 H3 ? z9 b$ ^! p
  • width=" " 和 height=" " 设定控制面板的宽度和高度。 : P, W2 b* c- g& w/ T3 w
  • align="center" 设定控制面板和文字的对方式,其值可以是 top(顶部)bottom(底部)center(居中)baselineleft(居左)right(居右)texttop(文本顶部)middleabsmiddleabsbottomcontrols="smallconsole" 设定控制面板的外貌。预设值是console。 1 r2 m8 @, P0 q) f
      3 s1 h" A) v6 D J, P
    • console 一般正常的面板    / M$ Y# P% ?, [4 h
    • smallconsole 较小的面板    . h" ^: w0 H7 m: `0 ]9 G9 T1 H
    • playbutton 只显示播放按钮    " O `6 Z; `7 ]- [! `8 ^
    • pausecutton 只显示暂停按钮    " L5 \% e) B# P
    • stopbutton 只显示停止按钮    ; o: Z/ R* f3 I* m( b1 c
    • volumelever 只显示音量调整钮

 楼主| 发表于 2007-10-15 13:05:48 | 显示全部楼层

:lol

2 Q5 S% [( [0 ~( x% A" b- { S : v2 g: f; g/ d* l+ X3 b [ 本帖最后由 蓝蓝 于 2007-10-27 23:26 编辑 ]
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|SINOFACE|海华网  

GMT-5, 2024-6-10 12:21

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表