音画制作基础知识

欢迎朋友光临ABC328图书馆

标题

音画制作基础知识

在论坛看到的那些漂亮的帖多是漂亮的图片、音乐加上一些代码组成，这些代码就是HTML代码，我们在这里将图片+音乐+背景或再加上FLASH组成的帖简称为“代码帖”。这些帖以她的独特魅力，吸引了众多网友。但很多人没有去揭开她那美丽的面纱，总是在门外徘徊。只要多去了解，去实践，制作出自己的心情、精彩和美丽。

一般来说你是不需要了解那些大多HTML代码的实际意义，但是，对一些HTML代码是需要理解的，对制作、调试效果有帮助。

常用HTML代码汇编：

一、文字

1.标题文字 <h#>..........</h#> #=1~6；h1为最大字，h6为最小字

2.字体变化 <font>..........</font>

【1】字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大

【2】指定字型 <font face="字体名称">..........</font>

【3】文字颜色 <font color=#rrggbb>..........</font>

rr：表红色（red）色码

gg：表绿色（green）色码

bb：表蓝色（blue）色码

rrggbb也可用6位颜色代码数字

3.显示小字体 <small>..........</small>

4.显示大字体 <big>..........</big>

5.粗体字 <b>..........</b>

6.斜体字 <i>..........</i>

7.打字机字体 <tt>..........</tt>

8.底线 <u>..........</u>

9.删除线 <strike>..........</strike>

10.下标字 <sub>..........</sub>

11.上标字 <sup>..........</sup>

12.文字闪烁效果 <blink>..........</blink>

13.换行（也称回车） <br>

14.分段 <p>

15.文字的对齐方向 <p align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.<p align="#">之后的文字都会以所设的对齐方式显示，直到出现另一个<p align="#">改变其对齐方向，遇到<hr>或<h#>标签时会自动设回预设的向左对齐。

16.分隔线 <hr>

【1】分隔线的粗细 <hr size=点数>

【2】分隔线的宽度 <hr size=点数或百分比>

【3】分隔线对齐方向 <hr align="#">

#号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐

【4】分隔线的颜色 <hr color=#rrggbb>

【5】实心分隔线 <hr noshade>

17.居中对齐 <center>..........</center>

18.依原始样式显示 <pre>..........</pre>

19.<body>指令的属性

【1】背景颜色 -- bgcolor <body bgcolor=#rrggbb>

【2】背景图案 -- background <body background="图形文件名">

【3】设定背景图案不会卷动 -- bgproperties <body bgproperties=fixed>

【4】文件内容文字的颜色 -- text <body text=#rrggbb>

【5】超连结文字颜色 -- link <body link=#rrggbb>

【6】正被选取的超连结文字颜色 -- vlink <body vlink=#rrggbb>

【7】已连结过的超连结文字颜色 -- alink <body alink=#rrggbb>

20.文字移动指令<MARQUEE>..........</MARQUEE>

移动速度指令是:scrollAmount=# #最小为1，速度为最慢；数字越大移动的越快。

移动方向指令是：direction=# up向上、down向下、left向左、right向右。

指令举例：<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>

二、图片

1.插入图片 <img src="图形文件名">

2.设定图框 -- border <img src="图形文件名" border=点数>

3.设定图形大小 -- width、height <img src="图形文件名" width=宽度点数 height=高度点数>

4.设定图形上下左右留空 -- vspace、hspace <img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数>

5.图形附注 <img src="图形文件名" alt="说明文字">

6.预载图片

<img src="高解析度图形文件名" lowsrc="低解析度图形文件名"> P.S.两个图的图形大小最好一致;

7.影像地图（Image Map） <img src="图形文件名" usemap="#图的名称"> <map name="图的名称">

<area shape=形状 coords=区域座标列表 href="连结点之URL"> </map <

【1】定义形状 -- shape

shape=rect：矩形 shape=circle：圆形 shape=poly：多边形

【2】定义区域 -- coords

a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标

例：<area shape=rect coords=100,50,200,75 href="URL">

b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度

例：<area shape=circle coords=85,155,30 href="URL">

c.任意图形（多边形）：将图形之每一转折点座标依序填入

例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"

三、表格相关

1.表格标题

表格标题位置 -- align

<caption align="#"> #号可为 top：表标题置于表格上方（预设值）

bottom：表标题置于表格下方

2.定义列 <tr>

3.定义栏位《1》<td>：靠左对齐

《2》<th>：靠中对齐ⅱ粗体

【1】水平位置 -- align <th align="#">

#号可为 left：向左对齐 center：向中对齐 right：向右对齐

【2】垂直位置 -- align <th align="#"> #号可为

top：向上对齐 middle：向中对齐 bottom：向下对齐

【3】栏位宽度 -- width <th width=点数或百分比>

【4】栏位垂直合并 -- rowspan <th rowspan=欲合并栏位数>

【5】栏位横向合并 -- colspan <th colspan=欲合并栏位数>

四、表格的主要属性

1.<table>标记的主要属性

align定义表格的对齐方式，有三个属性值center，left，right

background定义表格的背景图案，属性值为图片的地址

bgcolor定义表格的背景颜色，属性值是各种颜色代码

border定义表格的边框宽度，属性值是数字

bordercolor定义表格边框的颜色，属性值是各种颜色代码

cellpadding定义单元格内容与单元格边框之间的距离，属性值是数字

cellspacing定义表格中单元格之间的距离

height定义表格的高度，属性值是数字

width定义表格的宽度，属性值是数字

2.<tr>标记，表格是由多行与多列组成的，<tr>标记用来定义表格的一行，他的属性极其属性值定义的是表格中的该行，其主要属性与属性值如下：

align定义对齐方式，属性值与上同

background定义背景图案 bgcolor定义背景色

3. <td>标记。用<td>标记概况起来的内容表示表格的单元。其主要属性与属性值和<table>标记的一样，补充两个合并列和行的代码：

colspan定义合并表格的列数，属性值是数字

rowspan定义合并表格的行数，属性值是数字

五、FRAME

1、分割视窗指令 <frameset>..........</frameset>

【1】垂直（上下）分割 -- rows

<frameset rows=#> #号可为点数：

如欲分割为100,200,300三个视窗，则<frameset rows=100,200,300>；

亦可以*号代表，如<frameset rows=*,500,*>

百分比：如<frameset rows=30%,70%>，各项总和最好为100%;

【2】水平（左右）分割 -- cols <frameset cols=点数或百分比>

2、指定视窗内容 -- <frame>

【1】指定视窗的文件名称 -- src <frame src=HTML档名>

【2】定义视窗的名称 -- name

【3】设定文件与上下边框的距离 -- marginheight

【4】设定文件与左右边框的距离 -- marginwidth

【5】设定分割视窗卷轴 -- scrolling

<frame scrolling=#> #号可为 yes：固定出现卷轴

no：不出现卷轴

auto：自动判断文件大小需不需要卷轴（预设值）

【6】锁住分割视窗的大小 -- noresize <frame noresize>

六、歌曲代码:

在这组代码中，不必管它是mms.http.rtsp，只要看尾缀是asf、wma、wmv、wmv、rm都可适用下面的代码:

1.手动播放:

2. 打开页面自动播放:

★★★HTML代码大全★★★

1.结构性定义

文件类型〈HTML〉〈/HTML〉（放在档案的开头与结尾）

文件主题〈TITLE〉〈/TITLE〉（必须放在「文头」区块内）

文头〈HEAD〉〈/HEAD〉（描述性资料，像是「主题」）

文体〈BODY〉〈/BODY〉（文件本体）

（由浏览器控制的显示风格）

标题〈H?〉〈/H?〉（从1到6，有六层选择）

标题的对齐〈H? ALIGN=LEFT|CENTER|RIGHT〉〈/H?〉

区分〈DIV〉〈/DIV〉

区分的对齐〈DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY〉〈/DIV〉

引文区块〈BLOCKQUOTE〉〈/BLOCKQUOTE〉（通常会内缩）

强调〈EM〉〈/EM〉（通常会以斜体显示）

特别强调〈STRONG〉〈/STRONG〉（通常会以加粗显示）

引文〈CITE〉〈/CITE〉（通常会以斜体显示）

码〈CODE〉〈/CODE〉（显示原始码之用）

样本〈SAMP〉〈/SAMP〉

键盘输入〈KBD〉〈/KBD〉

变数〈VAR〉〈/VAR〉

定义〈DFN〉〈/DFN〉（有些浏览器不提供）

地址〈ADDRESS〉〈/ADDRESS〉

大字〈BIG〉〈/BIG〉

小字〈SMALL〉〈/SMALL〉

与外观相关的标签（作者自订的表现方式）

加粗〈B〉〈/B〉

斜体〈I〉〈/I〉

底线〈U〉〈/U〉（尚有些浏览器不提供）

删除线〈S〉〈/S〉（尚有些浏览器不提供）

下标〈SUB〉〈/SUB〉

上标〈SUP〉〈/SUP〉

打字机体〈TT〉〈/TT〉（用单空格字型显示）

预定格式〈PRE〉〈/PRE〉（保留文件中空格的大小）

预定格式的宽度〈PRE WIDTH=?〉〈/PRE〉（以字元计算）

向中看齐〈CENTER〉〈/CENTER〉（文字与图片都可以）

闪耀〈BLINK〉〈/BLINK〉（有史以来最被嘲弄的标签）

字体大小〈FONT SIZE=?〉〈/FONT〉（从1到7）

改变字体大小〈FONT SIZE=+|-?〉〈/FONT〉

基本字体大小〈BASEFONT SIZE=?〉（从1到7; 内定为3）

字体颜色〈FONT COLOR="#$$$$$$"〉〈/FONT〉

2.连结与图形

连结〈A HREF="URL"〉〈/A〉

连结到锚点〈A HREF="URL#***"〉〈/A〉（如果锚点在另一个档案）

〈A HREF="#***"〉〈/A〉（如果锚点目前的档案）

连结到目的视框〈A HREF="URL" TARGET="***"〉〈/A〉

设定锚点〈A NAME="***"〉〈/A〉

图形〈IMG SRC="URL"〉

图形看齐方式〈IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE〉

图形看齐方式〈IMG SRC="URL"

取代文字〈IMG SRC="URL" ALT="***"〉（如果没有办法显示图形则显示此文字）

点选图〈IMG SRC="URL" ISMAP〉（需要CGI程式）

N2.0 点选图〈IMG SRC="URL" USEMAP="URL"〉

N2.0 地图〈MAP NAME="***"〉〈/MAP〉（描述地图）

N2.0 段落〈AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF〉

3.0 大小〈IMG SRC="URL" WIDTH="?" HEIGHT="?"〉（以pixels为单位）

N1.0 图形边缘〈IMG SRC="URL" BORDER=?〉（以pixels为单位）

N1.0 图形边缘空间〈IMG SRC="URL" HSPACE=? VSPACE=?〉（以pixels为单位）

N1.0 低解析度图形〈IMG SRC="URL" LOWSRC="URL"〉

N1.1 用户端拉〈META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"〉（使用端自动更新）

N2.0 内嵌物件〈EMBED SRC="URL"〉（将物件插入页面）

N2.0 内嵌物件大小〈EMBED SRC="URL" WIDTH="?" HEIGHT="?"〉

3.分隔

段落〈P〉（通常是两个return）

3.0 段落〈P〉〈/P〉（新定义成容器型标签）

3.0 文字看齐方式〈P ALIGN=LEFT|CENTER|RIGHT〉〈/P〉

换行〈BR〉（一个return）

N1.0 文字部份看齐方式〈BR CLEAR=LEFT|RIGHT|ALL〉（与图形合用时）

横线〈HR〉

N1.0 横线对齐〈HR ALIGN=LEFT|RIGHT|CENTER〉

N1.0 横线厚度〈HR SIZE=?〉（以pixels为单位）

N1.0 横线宽度〈HR WIDTH=?〉（以pixels为单位）

N1.0 横线比率宽度〈HR WIDTH=%〉（以页宽为100%）

N1.0 实线〈HR NOSHADE〉（没有立体效果）

N1.0 不可换行〈NOBR〉〈/NOBR〉（不换行）

N1.0 可换行处〈WBR〉（如果需要，可在此断行）

列举（可以巢状列举）

无次序式列举〈UL〉〈LI〉〈/UL〉（〈LI〉放在每一项前）

N1.0 公布式列举〈UL TYPE=DISC|CIRCLE|SQUARE〉（定义全部的列举项）

〈LI TYPE=DISC|CIRCLE|SQUARE〉（定义这个及其後的列举项）

有次序式列举〈OL〉〈LI〉〈/OL〉（〈LI〉放在每一项前）

N1.0 数标型态〈OL TYPE=A|a|I|i|1〉（定义全部的列举项）

〈LI TYPE=A|a|I|i|1〉（定义这个及其後的列举项）

N1.0 起始数字〈OL value=?〉（定义全部的列举项）

〈LI value=?〉（定义这个及其後的列举项）

定义式列举〈DL〉〈DT〉〈DD〉〈/DL〉（〈DT〉项目, 〈DD〉定义）

表单式列举〈MENU〉〈LI〉〈/MENU〉（〈LI〉放在每一项前）

目录式列举〈DIR〉〈LI〉〈/DIR〉（〈LI〉放在每一项前）

背景与颜色

3.0 重复排列的背景〈BODY BACKGROUND="URL"〉

N1.1+ 背景颜色〈BODY BGCOLOR="#$$$$$$"〉（依序为红、绿、蓝）

N1.1+ 文字颜色〈BODY TEXT="#$$$$$$"〉

N1.1+ 连结颜色〈BODY LINK="#$$$$$$"〉

N1.1+ 看过的连结〈BODY VLINK="#$$$$$$"〉

N1.1 使用中的连结〈BODY ALINK="#$$$$$$"〉

4.特殊字元（以下标签需用小写）

特别符号 &#?; （其中 ? 代表 ISO 8859-1 的编码）

〈〈〉〉 & & " "

注册商标TM ?

N1.0+ 注册商标TM ?

著作权符号 ?

N1.0+ 著作权符号 ?

5.表单（通常需要与CGI程式配合）

定义表单〈FORM ACTION="URL" METHOD=GET|POST〉〈/FORM〉

N2.0 上传档案〈FORM ENCTYPE="multipart/form-data〉〈/FORM〉

栏位名称〈INPUT NAME="***"〉

栏位内定值〈INPUT value="***"〉

已选定〈INPUT CHECKED〉（适用於checkboxes与 radio boxes）

栏位宽度〈INPUT SIZE=?〉（以字元数为单位）

最长字数〈INPUT MAXLENGTH=?〉（以字元数为单位）

下拉式选单〈SELECT〉〈/SELECT〉

下拉式选单名称〈SELECT NAME="***"〉〈/SELECT〉

选单项目数量〈SELECT SIZE=?〉〈/SELECT〉

多选式选单〈SELECT MULTIPLE〉（多选）

选项〈OPTION〉

内定选项〈OPTION SELECTED〉

文字输入区〈TEXTAREA ROWS=? COLS=?〉〈/TEXTAREA〉

输入区名称〈TEXTAREA NAME="***"〉〈/TEXTAREA〉

N2.0 输入区换行方式〈TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL〉〈/TEXTAREA〉

6.表格

3.0 定义表格〈TABLE〉〈/TABLE〉

3.0 表格框线〈TABLE BORDER〉〈/TABLE〉（有或没有）

N1.1 表格框线〈TABLE BORDER=?〉〈/TABLE〉（可以设定数值）

N1.1 储存格左右留白〈TABLE CELLSPACING=?〉

N1.1 储存格上下留白〈TABLE CELLPADDING=?〉

N1.1 表格宽度〈TABLE WIDTH=?〉（以pixels为单位）

N1.1 宽度比率〈TABLE WIDTH=%〉（页宽为100%）

3.0 表格列〈TR〉〈/TR〉

3.0 表格列内容看齐〈TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM〉

3.0 储存格〈TD〉〈/TD〉（须与列并用）

3.0 储存格内容看齐〈TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM〉

3.0 不换行〈TD NOWRAP〉

N3.0 储存格背景颜色〈TD BGCOLOR=#$$$$$$〉

3.0 储存格横向连接〈TD COLSPAN=?〉

3.0 储存格纵向连接〈TD ROWSPAN=?〉

N1.1 储存格宽度〈TD WIDTH=?〉（以pixels为单位）

N1.1 储存格宽度比率〈TD WIDTH=%〉（页宽为100%）

3.0 表格标题〈TH〉〈/TH〉（跟〈TD〉一样，不过会对中并加粗）

3.0 表格标题对齐〈TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM〉

3.0 表格标题不换行〈TH NOWRAP〉

3.0 表格标题占几栏〈TH COLSPAN=?〉

3.0 表格标题占几列〈TH ROWSPAN=?〉

N1.1 表格标题宽度〈TH WIDTH=?〉（以pixels为单位）

N1.1 表格标题比率宽度〈TH WIDTH=%〉（页宽为100%）

3.0 表格抬头〈CAPTION〉〈/CAPTION〉

3.0 表格抬头看齐〈CAPTION ALIGN=TOP|BOTTOM〉（在表格之上/之下）

视框（定义与控制萤幕上的特定区域）

N2.0 视框格式总定义〈FRAMESET〉〈/FRAMESET〉（取代〈BODY〉）

N2.0 视框行长度分配〈FRAMESET ROWS=,,,〉〈/FRAMESET〉（pixels 或 %）

N2.0 视框行长度分配〈FRAMESET ROWS=*〉〈/FRAMESET〉（* = 相对大小）

N2.0 视框栏宽度分配〈FRAMESET COLS=,,,〉〈/FRAMESET〉（pixels 或 %）

N2.0 视框栏宽度分配〈FRAMESET COLS=*〉〈/FRAMESET〉（* =相对大小）

N2.0 定义个别视框〈FRAME〉（定义个别视框）

N2.0 个别视框内容〈FRAME SRC="URL"〉

N2.0 个别视框名称〈FRAME NAME="***"|_blank|_self|_parent|_top〉

N2.0 边缘宽度〈FRAME MARGINWIDTH=?〉（「左」与「右」边界）

N2.0 边缘高度〈FRAME MARGINHEIGHT=?〉（「天顶」与「地底」边界）

N2.0 卷动条〈FRAME SCROLLING="YES|NO|AUTO"〉

N2.0 不可改变大小〈FRAME NORESIZE〉

N2.0 无视框时的内容〈NOFRAMES〉〈/NOFRAMES〉（如果浏览器不提供视框功能的话）

7.杂项

说明〈!-- *** --〉（浏览器不会显示）

图解HTML代码

基础代码

<*P align=center><*IMG src="图片链接地址" width=500>

加边框图

普通黑色边框

<*P align=center><*IMG src="图片链接地址" width=500 border=10>

立体像框

<*P align=center><*IMG width=500 src="图片链接地址" style="border:10px #000000 double">

双层像框

<*table bordercolor=#000000 border=10> <*tbody> <*tr> <*td>

<*center> <*table bordercolor=#000000 border=10>

<*tbody>

<*tr>

<*td>

<*IMG src="图片链接地址">

<*/td><*/tr><*/tbody><*/table><*/center>

<*/td><*/tr><*/tbody><*/table>

简单的装饰框

<*P align=center><*IMG src="图片链接地址" width=500 style="border:10px #007979 solid">

<*P align=center><*IMG src="图片链接地址" width=500 style="border:10px #007979 dashed">

<*P align=center><*IMG src="图片链接地址" width=500 style="border:10px #007979 dotted">

<*P align=center><*IMG src="图片链接地址" width=500 style="border:10px #007979 double">

<*P align=center><*IMG src="图片链接地址" width=500 style="border:10px #007979 groove">

<*P align=center><*IMG src="图片链接地址" width=500 style="border:10px #007979 ridge">

<*P align=center><*IMG src="图片链接地址" width=500 style="border:10px #007979 inset">

<*P align=center><*IMG src="图片链接地址" width=500 style="border:10px #007979 outset">

透明的效果

<*P align=center><*IMG style="FILTER: Alpha(opacity=100,style=1)" src="图片链接地址" width=500>

<*P align=center><*IMG style="FILTER: Alpha(opacity=100,style=2)" src="图片链接地址" width=500>

<*P align=center><*IMG style="FILTER: Alpha(opacity=100,style=3)" src="图片链接地址" width=500>

<*P align=center><*IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="图片链接地址" width=500>

<*P align=center><*IMG style="FILTER:progid:DXImageTransform.Microsoft.Emboss()" src="图片链接地址" width=500>

<*P align=center><*IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow()" src="图片链接地址" width=500>

<*P align=center><*IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow(Color=#004B97,Strength=10)" src="图片链接地址" width=500>

<*P align=center><*IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#007979,Direction=135,Strength=10)" src="图片链接地址" width=500>

注：使用请取消*号

大家常在论坛看到的那些漂亮的帖子都是漂亮的图片、音乐加上一些代码组成，这些代码就是HTML代码，觉得一个精美的代码帖子不外乎就是将文字+图片+音乐或再加上FLASH通过HTML标签编排组成的。这些帖以她的独特魅力，吸引了众多网友。这里发帖旨在和大家一起学习交流，也希望喜爱她的朋友们都去了解她，去接近她，多实践，用你手中的画笔绘出精彩和美丽，编制出自己的美丽心情。虽然在梦影有一定的限制，但多了解一些还是有一点好处的。

HTML即超文本标记语言(HypertextMarkupLanguage),也叫WEB网页语言，做网页了解它是必要的，虽然现在有很多制作网页的工具如：Dreamwvear，FrontPage等，其实不懂这些代码也能做出很漂亮的网页。因为HTML内容繁多，很少有人愿意用写代码做网页的(效率低），大都使用软件，所见即所得，不过，了解这些代码对细微部分的修改相对会方便一些。我们做帖子只是HTML语言的一小部分(很容易掌握的)，我们也不需要了解那些太多HTML代码的实际意义，我们只了解常用的几个标签就可以了，这样，对制作、调试效果都有帮助。在这里我收集整理一下代码的编写规则解释。我也没有很深入的学习，有不足或不当之处，还请大家补充完善。

感觉这些代码主要是起编排的作用，也有一些不错的特效(主要是网页特效，就是一些脚本语言编写的，有点专业)在论坛里支持的只是一小部分，所以一些漂亮的图片大都是经过软件处理的如：PS，FW，UGA等图像处理软件。不过，如果朋友们会做图，加上只要稍微了解这些代码，很快就有精美的作品问世。心动不如行动，相信一定行！

公式：精美的代码帖子=文字+图片+音乐+FLASH 所以我们只了解相关标签就行了。

常用HTML代码：

一、文字标记

基本代码如下：

align=center　表示字体居中，可选值为居右（right）居左（left）

*color=颜色代码

*face=字体　常用字体为：宋体.黑体.楷体.新宋体.隶书等

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

1.字体变化 <font>..........</font>

a.字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大

b.指定字型 <font face="字体名称">..........</font>

c.文字颜色 <font color=#rrggbb>..........</font>

rr：表红色（red）色码

gg：表绿色（green）色码

bb：表蓝色（blue）色码

rrggbb也可用6位颜色代码数字

2.粗体字 <b>..........</b>

3 字体加粗<STRONG>..........</STRONG>和<b>标签差不多的效果

4.换行（也称回车）

5.分段标记 <p>

文字的对齐方向 <p align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 <p align="#">之后的文字都会以所设的对齐方式显示，直到出现另一个<p align="#">改变其对齐方向，遇到<hr>或<h#>标签时会自动设回预设的向左对齐。

6.区隔标记 <DIV>

<DIV>称为区隔标记。作用：设定字、画、表格等的摆放位置。

<DIV>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class ; Style ; title ; ID 等属性。

以 <DIV align="center"> 为例：

align="center" 可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。

<DIV align="center"> 的作用和居中标记 <CENTER>一样。

注：其实常用跟<p>标签的效果差不多，但是功能比<p>相对强一些。

7.分隔线 <hr>

a.分隔线的粗细 <hr size=点数>

b.分隔线的宽度 <hr size=点数或百分比>

c.分隔线对齐方向 <hr align="#">

#号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐

d.分隔线的颜色 <hr color=#rrggbb>

e.实心分隔线 <hr noshade>

8.居中对齐

<center>..........</center> 跟<p align="center">........</p>,<DIV align="center">........<DIV>效果基本是一样的。

9.文字移动标记<MARQUEE>..........</MARQUEE>

移动速度指令是:scrollAmount=# #最小为1，速度为最慢；数字越大移动的越快。

字符移动每步的延时:scrolldelay=# 属性值为数字， #最小为1，数值越大速度越大，反之亦然。

移动方向指令是：direction=# up向上、down向下、left向左、right向右。

移动方式:behavior 属性值为scroll：文字单向移动，side：移动到边界停止，alternate：到边界后反向移动；

*align，对齐方式，其属性值为center，left，right，top, middle, bottom，分别表示居中，左对齐，右对齐，对齐上沿、中间、下沿；

bgcolor，移动字符的背景色，属性值为颜色代码，可以是rrggbb 16 进制数码，r=red，g=green，b=blue，也就是色彩中的三原色，也可是预定义色彩；

*loop，移动字符的循环次数，属性值为数字，若未指定则循环不止(infinite)；

*width及height，文字高度和宽度，以象素为单位，属性值为数字；

*hspace字符左右留白长度，属性值为数字；

*vspace字符上下留白长度，属性值为数字；

*scrollamount字符的移动速度，属性值为数字，数值越大速度越大，反之亦然；

常用指令举例：

a.<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>我会移动耶！</marquee>

b.<marquee direction=left>我从右向左移！</marquee>

c.<marquee behavior=scroll>我一圈一圈绕着走！</marquee>

d.<marquee behavior=alternate>我来回走耶！</marquee>

e.<marquee scrolldelay=500 scrollamount=100>我走一步，停一停！</marquee>

二、图片标记

1.插入图片 --<img src="图形文件名">

2.设定图框 -- border <img src="图形文件名" border=点数>

3.设定图形大小 -- width、height <img src="图形文件名" width=宽度点数 height=高度点数>

4.设定图形上下左右留空 -- vspace、hspace <img src="图片地址" vspace=上下留空点数 hspace=左右留空点数>

5.图形附注 <img src="图片地址" alt="说明文字">

例1：<img src="图片地址" width=180 height=152 border=0>

例2：<P align=center><img src="图片地址" width=180 height=152 border=0></p>

三、表格相关(我们做帖子背景主要就是表格)

例1：

源代码如下：

帖子内容，文字或图片..... </TD></TR></TBODY></TABLE>

1.定义表格--<TABLE> 即我们做帖子时的背景。

2.定义列--<tr> <tr>标志对用来创建表格中的每一行。

3.定义栏位 i.--<td>：<td>标志对用来创建表格中一行中的每一个格子，

此标志对也只有放在<tr></tr>标志对之间才是有效的，

ii.--<th>：<th>标志对用来设置表格头，通常是黑体居中文字。

a.水平位置 -- align <th align="#">

#号可为 left：向左对齐 center：向中对齐 right：向右对齐

b.垂直位置 -- align <th align="#"> #号可为

top：向上对齐 middle：向中对齐 bottom：向下对齐

c.栏位宽度 -- width <th width=点数或百分比>

d.栏位垂直合并 -- rowspan <th rowspan=欲合并栏位数>

e.栏位横向合并 -- colspan <th colspan=欲合并栏位数>

四、表格的主要属性

例：

<TABLE> 的参数设定（常用）：

1. <table>标记的主要属性

*align定义表格的对齐方式，有三个属性值center，left，right

*background定义表格的背景图案，属性值为图片的地址

*bgcolor定义表格的背景颜色，属性值是各种颜色代码

*border定义表格的边框宽度，属性值是数字

*bordercolor定义表格边框的颜色，属性值是各种颜色代码

*cellpadding定义单元格内容与单元格边框之间的距离，属性值是数字

*cellspacing定义表格中单元格之间的距离

*height定义表格的高度，属性值是数字-----接受绝对值（如500）及相对值（如100%）。

*width定义表格的宽度，属性值是数字-----接受绝对值（如400）及相对值（如80%）。

*bordercolorlight 表格边框向光部分的颜色

*bordercolordark 表格边框背光部分的颜色，

使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效,即不能同时使用。

2. <tr>标记，表格是由多行与多列组成的，<tr>标记用来定义表格的一行，他的属性极其属性值定义的是表格中的该行，其主要属性与属性值如下：

*align定义对齐方式，属性值与上同

*background定义背景图案 bgcolor定义背景色

3. <td>标记。用<td>标记概况起来的内容表示表格的单元。其主要属性与属性值和<table>标记的一样，补充两个合并列和行的代码：

colspan定义合并表格的列数，属性值是数字

rowspan定义合并表格的行数，属性值是数字

五、歌曲标记

在论坛做帖常用格式如下：

在这组代码中，不必管它是mms.http.rtsp，只要看尾缀是asf、wma、wmv、wmv、rm都可适用下面的代码:

说明：一般用来插入mp3 rm ra ram asf mid 等音乐文件，如果要隐藏播放器，把width和height的数值改成0或者1就可以了。

1. 手动播放:

2. 打开页面自动播放:

常用属性如下：

*src="your.mid"

设定 midi 档案及路径，可以是相对或绝对。

*autostart=true

是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。

*loop="true"

是否自动反复播放。LOOP=2 表示重复两次，true 是， false 否。

*HIDDEN="true"

是否完全隐藏控制画面，true 为是，false为否 (内定)。

*STARTTIME="分:秒"

设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。

*VOLUME="0-100"

设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定

*WIDTH="整数" 和 HIGH="整数"

设定控制面板的高度和宽度。(若 HIDDEN="false")

*ALIGN="center"

设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom >

*CONTROLS="smallconsole"

设定控制面板的外观。预设值是 console。

console 一般正常面板

smallconsole 较小的面板

playbutton 只显示播放按钮

pausecutton 只显示暂停按钮

stopbutton 只显示停止按钮

volumelever 只显示音量调节按钮

例一：

作为背景音乐来播放，隐藏了播放器。

例二：

出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。

注明：可用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都支持。

IE中的背景音乐

代码如下：

*#=循环数

注明：这种背景音乐格式，只有在IE浏览器中才可以听到。一般用来插入wav wma mid mp3等格试的音乐。

晕，发个音乐要了解那么多？其实把下面代码复制过去换一下歌曲地址就ok了。

六.透明FLASH的使用

例：

1层:

<TBODY>

<TR>

<TD>

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

2层

<TBODY>

<TR>

<TD>

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

常用代码如下：

<TBODY>

<TR>

<TD>

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

说明：

*TOP: 900px 是指FLASH与帖子上边之间的距离（也就是FLASH与IE的距离）。

*LEFT: 50px 是指FLASH与帖子左边的距离

*WIDTH: 400px　HEIGHT: 300px　是指FLASH定位的范围宽度和高度

*后面的width=400 height=300 就是指FLASH的宽和高了。

在使用这种格式时要反复的调整定位距离大小才能达到满意的效果

*align=right 相对背景图片右对齐。

注意事项：

大家一定发现这个style标签了吧。这个是做一些特效，如，滤镜效果，文字特效，所用到的标记即CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。

Style属性可以应用在<meta>标签中，更可广泛应用在<div><table><tr><td><body><center><img><input><font><form><frame><label><EMBED><map>等标签中，发贴时注意要将自动修正的勾号去掉,否则效果也出不来。

一. table，tr，td 称为HTML的标签，以双标签的形式出现，所谓双标签，也就是有一个<table>就有一个对应的</table>与之对应，同样适用于其他的双标签。

如：

有多少<TABLE><TBODY><TR><TD>打头就得有多少</TD></TR></TBODY></TABLE>收尾，否则就会出错，其他标签适用。

二.论坛全屏效果。

把下列代码加到第一层表格的代码中：style="LEFT: -180px; WIDTH: 800px; POSITION: relative; TOP: 90px"

效果如下：

<TABLE id=table1 style="LEFT: -180px; WIDTH: 800px; POSITION: relative; TOP: 990px" cellSpacing=10 align=center background="图片地址" border=0></TBODY><TR><TD>这里插入帖子内容</TD></TR></TBODY></TABLE>

注：LEFT: -180px 左距，数值越大与左边距离越大。WIDTH: 800px 帖子宽度，TOP:90px" 上距（在梦影中数值不要取太小，不然会遮住上面编辑钮），数值越大与IE上面的距离越大。其中数值都可以自行修改。

三.我们在HTML模式下编好了帖子，先换到Design先察看，然后点击预览，如无异常即可发帖子，切记将HTML模式旁边的自动修正前面的那个勾勾掉，否则一些特效就出不来，甚至会出现乱码。

四.有一点特别提出，大家不要过分迷信成品代码，其实简单的代码经过成功编辑也能做出非常好的帖子。

用代码将两个图片重叠：

<DIV>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

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

<TBODY>

<TR>

<TD>

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

LEFT: 10px;代表图片与左边的距离，TOP: 80px代表帖子整体与顶部的距离，TOP: -200px代表第二个图片（也就是重叠上去的）与顶部的距离，可以根据自己喜欢做相应调整，数值"#"这里我就不再罗嗦了

重叠图片中加入向上移动文字：

<DIV>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

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

<TBODY>

<TR>

<TD>

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

文字的各项属性也可以根据自己喜欢的加于修改。

图片加往下无限循环拉幕效果:

<DIV>

<TBODY>

<TR>

</MARQUEE>

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

width=#:背景图片宽度(作拉幕用)

height=#：静止图片的高度

*这里的宽、高度设定应与要加入的静止图片相一致，不然会影响帖子整体美观，具体数据可在要加入图片的属性找到。

图片加往上无限循环拉幕效果:

<DIV>

<TBODY>

<TR>

</MARQUEE>

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

图片加往右无限循环拉幕效果:

<DIV>

<TBODY>

<TR>

</MARQUEE>

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

图片加往左无限循环拉幕效果:

<DIV>

<TBODY>

<TR>

</MARQUEE>

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

邮票式的边框代码：

<TBODY>

<TR>

BORDER-LEFT: red 3px----左边齿的颜色、大小

BORDER-RIGHT: red 3px----右边齿的颜色、大小

BORDER-TOP: red 3px----顶部边齿的颜色、大小

BORDER-BOTTOM: red 3px----底部边齿的颜色、大小

BACKGROUND-COLOR: red----框内背景颜色

将图片作透明处理并在背景图上作拉幕效果：

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

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

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

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

<TABLE style="FILTER: Alpha(Opacity=50)"

这个特效的主要的就是上面Opacity=50数字,这是透明度的大小控制,数字越小透明效果越高.....

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。