SINOFACE|海华网

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 1957|回复: 5

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

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

HTML标签做帖攻略

9 A, j% }% l+ H( M ~& `0 q' Q: G

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

- g: X4 Q) \0 s

一:背景

( b5 a, Z4 A) w- V$ v+ T5 q: Z9 f& i% I

效果如:

2 k& ?& B( F; l0 U( @# U7 T ^! J5 @

. R4 H1 [: U# V

; w3 f" Z2 ~! O' Y, @8 t/ |: R; e1 D% s9 p0 K: p3 f3 Y' n) Q; V" K! K2 U6 k0 H+ {

8 E+ W& @# M+ e1 m u" V

原代码如下:

8 j6 U; {, Q6 G' Q8 D. `4 Y
, @' j( o! K" z3 W5 \" C
1 H; S! t) m6 |9 _% H |. ^$ b/ \. i

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

0 R6 J" p0 j& k* k, n3 j5 X/ H: H

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

% r/ ~2 ?$ {# y* x4 u5 W9 O

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

+ T3 q5 G# y E$ }! @6 L
7 E9 I6 U0 h5 j; z2 M( e Z

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

4 v3 P% T) F& X$ H! U' C* a& j! A5 i

<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">

6 u! E- ~$ ]( L

注解:

) \5 ^1 O# n, |

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

( \" a( i/ ]' u4 }! h6 l

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

$ J. K( t o" l+ V" N6 G

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

* [4 u: k1 D; S# y+ M8 P

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

/ m* b* @3 x# @9 R0 ~- J

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

4 E: D6 s7 @* l6 I$ |/ s6 K& @

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

0 d2 C2 s7 ~) E" [' o: \

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

9 S" l L# m2 `' |2 Y8 p

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

) o) _$ H/ t' ~- Z1 o0 w

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

6 e; n' u6 o9 L# u* o

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

$ l6 F) I4 c# {* Z) L+ c

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

6 M# R4 k, E2 G( X( K* j0 q 9 }. I4 [; S/ @3 ?' W& I$ }8 M[ 本帖最后由 蓝蓝 于 2007-10-15 12:48 编辑 ]
 楼主| 发表于 2007-10-15 11:37:29 | 显示全部楼层
* C7 T% M1 a4 ]

帖图格式:

2 q3 Y$ A; }/ Y4 @0 E' u" G/ H. F7 J
<IMG src="图片连接URL地址">
+ Z/ C6 r2 ~& F+ ^( J& D$ k2 x

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

: p6 u. ]% m9 t4 g; [, Z( N

<IMG> 的一般参数设定:

8 y8 b; l5 g5 h& O

  例如 <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">

" G# Q. Q6 ?, O A9 ^- B

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

) h( U) N7 i9 Y6 O* x

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

1 V" J( u K' R+ y

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

6 q/ g% {2 ]; Z, ]- e

border=2 图片边框厚度

5 y0 j9 c- F% s6 m, |

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

- n( X& H; i d* d' ?

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

3 f2 x) H# c8 W( ]; X1 o

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

! B" a6 x( w# m) h. t, s' R3 C& H; K4 B3 s/ q [ 本帖最后由 蓝蓝 于 2007-10-15 13:08 编辑 ]
 楼主| 发表于 2007-10-15 11:42:14 | 显示全部楼层

文字设制

% C t1 v& H/ w# N: O6 z

一,文字基本设制

% F/ m- e! H4 F

基本代码如下:

: f+ q1 B) i/ h. h

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

* O( a5 B4 K6 T* i: W' l

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

color=颜色代码 具体颜色代码可参照:颜色选取<<点击查看 8 C1 f1 V6 q! J% Z; P1 K4 v

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

: \& q- y/ S1 X3 g& C& Y3 o5 @

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

" y+ Q+ o# I3 \1 O3 z/ o) @7 }

二,大字体文字

6 V b+ p, u Y! {- Y" ?' t

效果:

欢迎光临 2 @; s& B5 v5 J! z

源代码:

0 Y, n( b5 M' D% l \

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

! g$ |( `+ o0 v

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

+ `4 U7 N- s$ |! T9 b8 j3 C: J& e& R

三,移动文字设置:

( f; @7 m E; j, u3 }- a. c

基本代码1:

; p7 u( g( m0 {: D5 e1 n5 Z) {

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

1 d: F( C) h* q

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

! B* ]$ A2 B+ ~0 L5 [. q$ A, y

基本代码2:

( g$ l7 r- N" p \1 O. T$ ^

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

z; @; J" h$ f, {2 ~* X; d: z5 w8 Z

说明:

* D% ~# N" Z) k7 M

behavior=scroll 一圈一圈绕着走 

2 \2 K4 d0 X) u8 C7 P3 e

behavior=slide

. w- ~' C- y ^$ v% S. f: u" t6 `' y

只走一次 behavior=alternate 来回走

. g. d8 d" x2 e: V- }( q# e3 `

停停走走:

; z. q% o$ q( ?) u1 P. J

效果如:

0 L0 s. W3 U- ?# t- U$ `2 [

5 L! n, ^; b. `7 q, [4 ^/ ^ B 欢迎光临

w* {$ L- v4 M1 ? `- ] c

代码如下:

3 x! _5 o# `! J# k1 n4 P

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

( w& x& M3 }. u s

四,文字特效显示:

; d1 J+ F0 n3 f* R% N# U& B

效果一:

: U6 P3 Y2 q# z6 d# [) ^
欢迎光临
& M% v. M- ]% O" c$ j% b

源代码:

- h( {* i# ~, L5 x1 G

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

5 m: J. B* \% Z: N

效果二:

. h/ H0 c3 x9 G
欢迎光临
: x0 x4 D' J+ m& h* y, R+ @

源代码:

9 o @. t8 H, j; g7 |3 k

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

5 ^+ U) z. u' V+ h- c

效果三:

3 E$ S: h7 J6 K( O
欢迎光临
0 I5 P; w( D9 D

源代码:

. K0 W$ f( E+ m$ S3 p" [

<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>

+ A0 C( O$ o* r4 o" U

效果四:

2 D6 N% K' C0 `- {: c# R$ s5 X, L$ Z3 s$ w. ? 欢迎光临 ( F+ G8 ^+ b8 t

源代码:

8 D7 R6 l2 Q& J& k/ a7 `7 ^( M

<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>

4 R$ l. |9 n! z

效果五:

5 u6 Z6 M6 L9 ?8 h& ~ 欢迎你朋友2 N' K9 [, K2 O9 L& j 友朋你迎欢% g! `. Y2 f" N% k0 p6 p0 R

源代码:

4 z8 [4 W3 S$ o% I8 Y4 @( e

<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>

7 N% S% }+ I# ` A/ E

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

! a4 l4 _2 b- ~1 z$ ? $ D4 q3 }# w0 \6 ~3 X: @ [ 本帖最后由 蓝蓝 于 2007-10-15 13:33 编辑 ]
 楼主| 发表于 2007-10-15 11:56:51 | 显示全部楼层

阴文字效果:

0 H; e) j; f0 A0 I" |1 [
5 ?/ D9 j8 ?) G ' V0 d. k0 \* _0 ?5 P1 p( w9 p1 c; T% l# m7 R, M2 w* \3 {! U. v0 B% ]# P+ d) b3 h
福建人在线
- f5 R2 Z0 v8 p) w( e


代码:
<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>
- M9 l4 m5 Y7 Z4 o) p
 
) t" D* r& W/ F- i
 
1 [( u k6 a* b1 R6 D
 
" ^% M# q4 C; w; B' a8 A$ M H
 
Z/ ^1 V2 t/ ?: P
, ]' Y. f ]1 t/ Z$ R
( Q8 } e6 C' T. f% _

齿边字效果:

; X% u0 o2 b' ~% o6 y; E + g8 ]; e, o$ T6 V. D: {! t3 _+ ]) O D" `$ k0 `& j6 e, R
福建人在线
f+ n. g0 j) F4 u% o* {/ r: m

代码:

+ c+ L) }3 {9 U+ B

<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>

# X3 \0 {: @# _+ f! B5 z ' W, n! d7 @) b- ?6 A7 v, Q[ 本帖最后由 蓝蓝 于 2007-10-15 13:04 编辑 ]
 楼主| 发表于 2007-10-15 12:01:06 | 显示全部楼层
多媒体标记 % ^0 ~% `7 ^2 a( Z. E# m
/ Q0 J8 G8 W; @1 n& A

5 h- n% G/ ?& C* @4 K2 m7 ?

2 N+ D4 _- I: b! g& \+ M- m+ K7 b0 Z$ Z. _( R8 R O; p6 `% a( S- w( P- }9 J& Y! p- r/ x7 _0 p5 a n: j
s+ e' I% e3 a) o4 p* t# z

多媒体标记<BGSOUND><EMBED>

& D5 Z) d: d# O0 b) t- X! h4 `' ?" |1 A8 u! M/ _4 a+ K7 t( V/ \! \8 S- {+ b9 ~' [! e/ K% w t1 ^
■ <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表示重复多次。 9 g( H0 G% a# q8 T7 r- F# o; s4 B ; m* N& y! B w7 Z: Q @+ s9 q# i( D3 Z' K7 y* ]6 W7 g0 Y9 L Y" P4 @3 S
■ <EMBED>:
<EMBED>是用以插入各种多媒体,格式可以是 midi、wav、wma、rm等等,并且因为音乐格式的不同,可能会有不同的控制面板出现。多种浏览器者支持。其参数设定较多。如下 <EMBED src="http://....../noname.mp3" autostart="true" loop="true" hidden="true"> $ E# z( g; T# f0 s
    % y' F$ ^) E0 \/ b- W2 V$ [
  • src="http://....../noname.mp3" 设定音乐格式和路径,用法同上。 " P4 }# x2 g4 l, T( q' Y
  • autostart=true 是否在音乐传送完后,就自动播放音乐。true表示是,false表示。 # {/ f2 ^! l/ }2 D* X3 }$ c: X
  • loop="true" 是否自动重复播放。loop=2 表示重复两次,true表示是,false表示否。 hidden="true" 是否完全隐藏控制面板,true表示是,no表示否。 0 `. F5 G4 k7 _5 B8 L u5 L
  • starttime="分:秒" 设定歌曲开始播放的时间。如 starttime="00:30" 表示从第30秒开始播放。 ( z5 L8 E. C' z& p4 O
  • volume="0-100" 设定音量的大小,数值是0到100之间。注意不得故意将音量定得过大惊吓看贴人,否则一定给予严厉惩罚。 {4 @8 f; z Q
  • width=" " 和 height=" " 设定控制面板的宽度和高度。 / G. k: o" L# C5 N' W
  • align="center" 设定控制面板和文字的对方式,其值可以是 top(顶部)bottom(底部)center(居中)baselineleft(居左)right(居右)texttop(文本顶部)middleabsmiddleabsbottomcontrols="smallconsole" 设定控制面板的外貌。预设值是console。 - B2 ^& w% x* W3 i
      8 J: P1 n0 N/ |
    • console 一般正常的面板    & F2 p! P+ C# _7 |
    • smallconsole 较小的面板    / s8 [( L8 a; h3 F1 W: n; |
    • playbutton 只显示播放按钮    # }+ Q; L0 E5 ~
    • pausecutton 只显示暂停按钮    5 I6 r- g1 [! E
    • stopbutton 只显示停止按钮    # r2 |& ?' D+ m b6 W
    • volumelever 只显示音量调整钮

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

:lol

; a. ?! }+ q1 {3 C) r6 t d6 E. g) v3 [* a: c( `4 P- \% F [ 本帖最后由 蓝蓝 于 2007-10-27 23:26 编辑 ]
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

GMT-5, 2024-5-26 03:58

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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