*文学风

一帘幽梦过,思念瘦多少,却都随秋雨寥寥,泪痕湿眼角.写的真不错,欣赏!

结 束 语
首先，如果你不是一开始就打开这个结束语，那么，我非常想知道你到底学的怎么样——当你看完一个教程，如果什么都没学到，我会非常失望的。这说明我及我写的教程对朋友们并没多大帮助，白白地费了论坛的有限空间！
在论坛做HTML帖子是一项颇具挑战性的创作活动。比起建立一个HTML页面而言，做帖的受限性更大，我们可以认为，做帖子与戴着脚镣跳舞没什么两样。在局限太多的环境下以完美的形式艺术地将你的思想和意志展现出来，没有一定的功底是难以完成的。为此，本教程更大程度上着重于对HTML语法的介绍和技术的剖析，读者在阅读每一节的时候应该能够感受到这一点，同时也极可能觉得教程的趣味性程度不够，有点枯燥——这是没办法的，语法和技术，开始接触时就这样，只有当你掌握了，你才领略到其中的味道。或许你需要再次阅读其中的某些内容，你会发现还有意外的收获。
我的这个教程并非完美，但对于抱着做好论坛帖子这一目的的读者来说，它应该是很有用的。各位如果觉得教程有需要修正或补充、增加的地方，请给留言，我将视情况作些必要的修改。...

四 图框制作
4 图框解析
这里将较详细地刨析较复杂的图框的结构和制作。
先看下面的简单例子：

欢迎大家学代码！

它的代码为：

欢迎大家学代码！

我们不难看到：
这里有4个TABLE 开头的“段”，因此它就由4个表格组成，其中：
第一个（最外面的）为：

即：

这里有两个数字：一个是“38”，它表示**********************************；第2个是“100%”，即宽度与该贴的外表框一样；
第2个为：

即（加高了）：

1
2
3
第3个为：

即：

1
2
3
第4个（最里面的）为：

即：

1
2
3

文字部分是我们可以再增添的内容（如图片、文字等）

熟能生巧，要多加练习哦！

四 图框制作
3 表格应用示例
表格应用示例1：

表 格 应 用 示 例 代 码 之 一

本节黑马举一个表格嵌套的示例向大家展示帖子的制作过程。以下是本示例的参考代码，
这些代码得出的是本示例的整体外观效果，内容需要你自己往里添加，黑马添加的是此说明和本示例的代码，纯文字。 标 题 内容

如果你还没有熟悉到一看代码就明白，你有必要看一下下面的分析。
本例有四层表格的嵌套，总共使用了六张表格。最里层是三张表格上下排列，属表格组合。我们从外往里分析代码。
最外层的表格，我们设置边框值为1并定义其颜色，这样，配合 的边框颜色能够起到外边缘呈现出立体的感觉。外表的单元格衬距（cellpadding）为20，它恰好形成了帖子外边框。外表的宽度为600个像素，这是根据本页面而设置的，你可以在实际使用时更改。
第二层表格的原理和外层的差不多，只是，我们更改了各元素的颜色，单元格衬距也调小了，cellpadding赋值为10。
第三层表格没有做太多的设置，我们仅令其背景色为白色、单元格衬距为10，这样得出一个白色的边框。...

四 图框制作
2 表格组合
表格组合技术是一个很有趣的技术，掌握它具有一定的挑战性，所以，这里愿意花一节的篇幅专门讲它，如果你觉得不需要，可以跳过这一节。
表格组合更多的用于布局，当然，也有少数情形需要用到它。本节不想探讨什么时候用到表格组合，只从实现手段方面进行讨论。
（1）上下排列的表格
要顺利地实现N张表格的纵向组合，至少有三种方法：
一是，令参与排列的表格都居中（即在 里加入align=center）
例；
表一 表二
显示结果：

表一

表二
二是，不定义表格的对齐属性，即 里没有align属性，这样给出的N张表格代码，它们都是上下排列的，表格的自身位置全是左对齐（但若定义了align=left，情形不是这样，大家可以在FP或DW里试试）。
例：
表三 表四
显示结果：

表三

表四...

四 图框制作
1 表格初步
(1)基本概念
表格是在论坛做帖的重要武器。这原因是，论坛里提供给用户操作的区域是非常有限的，用户只能在论坛程序框架好的body区域里的某个区域施展身手，不能修改body的背景色，更不能介入head的定义，因此，诸如让自己的帖子有底色、底图之类的修饰，用户只能通过表格来实现。表格是一个可自定义的容器，因而它就是我们用以实现帖子构设的利器。
把表格称作容器缘于表格的装载特性。表格是用于装载数据的，与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格，知道表格有表头、表体、单元格、行、列等等概念，它们并不难理解。而在HTML里，我们对表格的理解和运用可能会增加一些概念，但并非复杂，在学习本教程的过程中，通过领会和实践，相信是很容易掌握的。
表格不仅仅只能装载数据，它还被广泛地应用于网页的布局，这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。表格用于网页布局过去非常流行，现在仍然深受欢迎，它在论坛做帖也起到不可估量的作用，帖子的页面布局将因使用了表格而可以随心所欲地排版。...

本音画贴由下列部分组成：
一 图框（也叫边框）
二 图片
三 特效
四 音乐
下面一一说明：
一 图框
图框可以自己制作（以后讲），也可以利用网上现成的。本贴是选用的自己发的一个（见本论坛

添加内容

图框起这样几个作用：
1 是使帖子美观
可以根据自己所选的图片、文字等选择合适的（图框的总体色调、背景、图案等），以便渲染帖子的视角效果。由于本贴所选用的图片大多属于“夜色”的，因此个人选了这个背景为黑色的图框；

1111111111

又由于需要增添点“喜庆”气氛，所以选用了带这种花和表格线的图框：

添加内容

同时在帖子的最下面的签名处选了较鲜艳的“分割线”和签名.

背景图片往上很多，可以根据自己的需要选用。如我们论坛里：
我们论坛里也有已做好的很漂亮的一些图框，如：
漂亮的边框素材：
背景素材：
更多的可以参看这里：
关于“分割线”，它的作用主要的是将图框（这个大箱子）分割成若干个小块（小分割箱），以便将不同类型的“物品”（图片、文字等）放如不同的小块中。同时也可以起到美观的作用。
分割线网上也有很多，我们论坛里也有，如：
美丽的分割线：
2 是起一个“箱子”的作用，可以将自己所要的所有内容都装进去；
拿到一个图框后，如何向里面装东西呢？
一是将鼠标光标放到图框内（在图框内点一下），在图框内直接输入、粘贴。
二是将图片等单独做好，而后再放进去。在不太熟练的情况下，一般要这样做。这也就相当于，把整体分成部分，将难度大的整体贴分成难度相对小的个别小块来一一地加工。象本贴的12个图片就是一个一个做好后复制进去的。特别是那10个带特效的图片，若直接一次做出来，那是需要有相当高的水平的！我们这些非专业人员一般达不到这水平。...

关于教材前三部分的综合说明
下面以该音画贴为例，将前一段所讲内容（及补充）说明如何做个自己喜欢的（图、音、字并茂）帖子。先将帖子重发在这里：为使大家看的更清楚，制作说明发在下一楼！

编辑：没起名

三 音乐处理
1 播放和播放器
　　（１）播放设置
1）自动（手动）播放
　　论坛里播放音乐，一般有两种选择：一是“自动播放”，即打开该贴音乐就开始播放，在这种情况下可以不显示出播放器；二是“手动播放”，即看贴人若想听该贴里的音乐，必须点播放器上的“播放”按扭，音乐才能播放。当然，在该模式下必须要显示出不妨器！
　　点论坛编辑框上面的按扭，注意那里有３个，其中两个是音乐的（rm的、其它的），一个是flash的。在点出的画面上有关于“自动播放”或“手动播放”的选项。但论坛带的播放器从颜色到效果上不一定适合个人要求（尽管可以调整播放器的大小）。因此，往往需要自己制作一个漂亮的播放器。
先以一例说明播放设置：
自动播放：

自动播放：

自动播放：

手动播放：

区别仅为AutoStart= 1 还是 0 。
另外，代码中有音乐地址、播放器的宽与高（自己可改）。
2）连续播放
我们知道，若不加设置，用论坛播放器播放音乐，当音乐播放完（一次）后就自动停止再播放了。若想再听一次就必须点“播放”按扭，给我们带来不便。如何人是音乐连续不断地一遍一遍地播放呢？
连续播放：...

三 音乐处理
2 音乐贴的制作
（1）知道音乐地址
网上的音乐一般可以找到其地址，比如在“试听”时，在播放器的下部点右键---属性，出来的画面上就有。要把该音乐发到论坛里就很容易，前面已说过。这里不重述。
（2）没有音乐地址
比如自己已下载了，用自己电脑里的播放器可以播放；或者是自己的“翻唱”已存到电脑里，怎么样把它象“知道音乐地址”时那样发到论坛里和朋友们共享呢？
显然，如何把该音乐传到网上是关键。但一般非专业论坛的“上传”文件类型里没有音乐格式的。另外，论坛为了节省空间，在“上传”设置里一般限定了文件大小（大小没有一支音乐文件那么大！）。对于论坛所限制的上传文件大小，我们（一般地）没法变动，这除非由管理员专门开绿灯给你去后台加大。否则，我们这里说的作废！
个别需要者，我可帮忙。
第二个问题是，就是在允许上传大小范围内，怎么去传论坛不允许的音乐格式的文件呢？
大家知道，jpg格式（图片）的文件是允许上传的。那么，我们就来改音乐文件格式。方法如下：...

最钟爱这个，富于动感，希望早些学会！

二 图片加工
6 在图片中加入透明FLASH
如何在一张图片上加入透明的FLASH呢？下面以例说明：
基本格式：

该格式中没明显设置出FLASH的宽度和高度，只是用了width= 100% 和hight= 100% 意思是FLASH的大小与图片一样（width=640 ；height=500 ）。
举一例：
　
上述代码的显示为：

以上是在图片上加入一个FLASH，当然，我们可以在一张图片上加入多个FLASH。

例：

更多个就是红色（一个）部分的重复（当然要换FLASH）

　　透明FLASH可以从网上找，如：

箭头左右穿梭 kiss day” love you垂直降落 线条变形 七彩光8字形旋转
更多的就到百度（
练习：自己选择一个图片，加上你选的FLASH。
熟能生巧，要多加练习哦！

二 图片加工
5 改变图片的显示效果
有时我们需要把图片溶入到背景中，例如：
原图片：

若把它放在现在帖子的背景中，从上面可看出该图片与背景色调差别太大。为了是它融合在该背景中，我们可以用HTML代码先将该图片加工一下。如：

代码如下：

在这组代码里opacity=100是图片的通明度（即色调的深浅），可以设置；style=3中数字可选取0、1、2或3，数字不同，显示的效果也不一样，下面将给出例子；height=374 width=500 图片的高度与宽度，可根据自己的需要任意改动（不一定是原图片的尺寸！）；代码中图片地址可换成自己选用的。其它部分不变！
将3改成2的效果：

将3改成1的效果：

将3改成0的效果：（即原图）

将透明度100改成20的原图效果：

由于原图片的总体是黑色背景，将它放到黑色背景下更能显示出上述效果。参见：
中年
在线
小技巧：使图片上下翻转

代码如下：

练习：自己选择个图片，按上面的方法做一下。
熟能生巧，要多加练习哦！

二 图片加工
4 图片的动画效果
（1）效果代码: type= fade :图片变化属性=值值:fade 图片渐显渐隐barWipe 图片从左到右拉开ClockWipe 图片像钟表一样旋转拉开barnDoorWipe 图片从中间向两边拉开slideWipe 图片右往左边拉开irisWipe 图片正中矩形向外扩散snakeWipe 图片蛇形展开ellipseWipe 图片正中小圆向外扩散spiralWipe 图片螺旋显示pushWipe 图片右往左像推箱子一样
（2.定位代码: width:550px; height:413px:定显示的宽和高,（原图片的尺寸是：550×413）top:0px; left:0px;;定该显示离顶和左边的距离。
举例如下：
原图：

代码：

显示效果图：

将ellipseWipe依次换成其它变化属性（代码的其它部分不变！）：fade、barWipe、ClockWipe、barnDoorWipe、slideWipe、irisWipe、snakeWipe、spiralWipe、pushWipe的显示效果图如下：...

帘幕,好浪漫啊!你真是个惹人怜爱的小女人,呵呵!

二 图片加工
3 运动的图片
（1）单一图片
以由下向上运动的图片为例加以说明。

代码如下：

其实很简单！你只需在选择HTML的情况下，加入以下代码就可以轻松实现。
注1：图片地址是指图片在网上的真实地址(例如下列图片的地址是： 。
注2：代码中的参数可以自行设置，最主要的几个参数是：
a.高度(height)－你可以根据图片大小来设置合适的数值;
b.方向(direction)-向上(up);向下(down);向左(left);向右(right).
c.移动速度（srcollamount）写入的数字越大速度越快。
d.滚动延时scrolldely（ms）一般取10

注1：图片地址是指图片在网上的真实地址(例如下列图片的地址是： 。
注2：代码中的参数可以自行设置，最主要的几个参数是：
a.高度(height)－你可以根据图片大小来设置合适的数值;
b.方向(direction)-向上(up);向下(down);向左(left);向右(right).
c.移动速度（srcollamount）写入的数字越大速度越快。...

二 图片加工
2 在图片内加文字
（1）基本格式
有的内容在前面已涉及过，现在详细讲解如下。
前面我们已经知道：
文字水平方向即左中右的代码： 向左对齐 表示居中 向右对齐
垂直方向的位置可以用换行 符号处理。
那么，如何在一张图片上加入所要的文字呢？
基本格式为：

说明：1 输入代码后切换至编辑状态，在编辑状态下打字；
2 这样输入的文字垂直位置是居中的，左右位置是靠左的（可以用空格调整左右位置！）
例如居中加上“祝你生日快乐！”为：

祝你你生日快乐！
代码为：
祝你你生日快乐！
将文字分别放在图片的左上、居中、右下为：

祝你生日快乐！
祝你生日快乐！
没起名
代码为：
祝你生日快乐！ 祝你生日快乐！ 没起名
（2）在图片内加入移动的文字 （2）在图片内加入移动的文字
这里依靠图片左边、由下向上移动的一段文字为例加以说明。

不理你 ，

不理你，

就是不理你！
代码如下：
不理你 ， 不理你， 就是不理你！
若使文字居中，在编辑状态下把文字选定，再点框上面的“居中”
即可。...

二 图片加工
1 图片标签
把网上现成的图片拿来发到论坛，是论坛里最容易的事情。原因就是发图太简单了。复制→粘贴就可以发一张图片，这是我们论坛的便利。用HTML方式贴图，它的语法也是很简单。
基本语法：
我们看到，img标签没有终止符。其常用参数也不太多，非常容易记住。
src：图片地址。在论坛里，建议使用图片的完整地址也就是绝对地址，若是上传到论坛的图片，可以使用相对地址，一般从upload一节开始。

这时发出的图片默认位于左上角。是最基本、最简单的贴图代码。如：

代码为：
若要使图片居中，只须加居中的命令（前面已讲过）。如：

代码为：

如要给图片加个边框，只须加将基本语法改为：

其中：
border：图片的边框。取值范围为正整数，边框颜色不可改变（黑色）。多数论坛里的图片都会链接到自身，当用户点击过它，它的边框颜色通常就是默认的蓝色，故为美观起见，建议设置为0。
如：给加个边框 代码分别如下：

IMG标签还有其他的参数：
alt：当鼠标移到图片时弹出的文字。下面是使用效果，请将鼠标指针分别移到图片上看看发生什么：...

小结

现将 部分小结如下，看看你掌握了哪些？若还有生疏的，可要加班补上呦！红色部分是可改动的。

一 文字设置三要素：

格式如下：
再学习
字体大小：style=font:30pt 字体：face=隶书 字的颜色：color=#ff0000

二 文字显示位置的控制

水平方向（align）：left（左对齐） CENTER（居中） RIGHT（右对齐）
垂直方向：top（靠顶） bottom（靠底）
格式如下：
向左对齐

三 文字移动属性的设置

基本格式： 内容文字或图片
移动属性值主要的有几个内容： 移动方向 速度 方式 循环 延时 方向和速度。移动方向 direction=left 从右向左移direction=right 从左向右移direction=down 从上向下移direction=up 从下向上移
格式如下：
文字从右向左移

文字来回走耶！

四 文字编辑几种常用代码语句

换行标记：一个 令文字显示于下一行，二个 留一空白行。 文字编辑...

一 文字处理
5 几种特殊字
（1）颜色“渐变”的文字
我们虽然可以用字的颜色代码社顶字的颜色，达到渐变的效果。但当文字较多时，这样就很麻烦。先举个例子：
欢迎朋友们参与一步一步学代码！
对于这15个字（符号），我们很难直接用颜色代码规定每个字的颜色。但网上给我们提供了操作十分简便小软件（彩色字）现在上传于此，可下载（30K）
viewFile.asp?ID=74
使用方法：
1 将“欢迎朋友们参与一步一步学代码！”用鼠标选定（点着鼠标从头向后拉），而后用键盘，按“Ctrl+C”双键（作用是复制，软件操作不支持正常的复制、粘贴！）；
2 打开系统里的“彩色字”软件，在框里按“Ctrl+V”双键（粘贴），这样“欢迎朋友们参与一步一步学代码！”就被输入到画面了。
当然也可以直接打开该软件，在里面直接输入所要的文字！
3 点画面下面的“起始颜色”选定后点下面的“确定”；再点“结束颜色”并确定；
4 点画面右下角的“转换”，这样框里就已将字的颜色一一设定了，并全部被选上；
5 按“Ctrl+C”，回到论坛发话框，按“Ctrl|+V”；
6...

一 文字处理
4 文字编辑几种常用代码语句
掌握HTML语法中的分隔标签非常有必要，娴熟地应用分隔标签，能令帖子可读性强、外观整洁漂亮。

文字编辑常用代码语句：
换行标记一个 令文字显示于下一行，二个 留一空白行。 文字编辑 段落标记 令文字之间留一空白行。用键盘的空格可令文字之间留一空隔。 令字体加粗 （双标签） 令文字加上底线 （双标签） 居中 令字、画、表格等显示于中间 （双标签）
对 换行标记，即强行换行指令的认识。下面这首李白的诗，在输入编辑时虽然有分行，但无用强行换行 标签，由于系统有顺延功能作用，所以仍然是从左侧顺延联成一片显示出来。
先看文字设置无换行标记的一组代码：

《 望庐山瀑布》 李 白日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。
显示效果是联成一片。
《 望庐山瀑布》 李 白日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。

再看文字编辑时，在要断行的地方加入 分隔标签的一组代码：
《 望庐山瀑布》 李 白 日照香炉生紫烟，遥看瀑布挂前川。 飞流直下三千尺，疑是银河落九天。
显示效果:
《 望庐山瀑布》...

一 文字处理
3 文字移动属性的设置
内容文字或图片 上面是最简单的移动标签。把它复制粘贴发表结果如下：
内容文字或图片

移动属性值主要的有几个内容： 移动方向 速度 方式 循环 延时 方向和速度。移动方向 direction=left 从右向左移direction=right 从左向右移direction=down 从上向下移direction=up 从下向上移
移动代码:-文字从右向左移 文字从右向左移！
显示效果：
文字从右向左移！移动方向-文字从左向右移的代杩。

文字从左向右移！！
显示效果：
文字从左向右移！
移动方向-文字从上向下移的代码：。

文字从上向下移！！
显示效果：

文字从上向下移！！
移动方向-文字从下向上移！的代码：。

文字从下向上移！！！
显示效果：

文字从下向上移！！

文字来回走代码:

文字来回走耶！！！
显示效果：
文字来回走耶！！移动速度 移动速度设置数值小就走得慢的代码： 移动速度设置数值小就走得慢！！
显示效果：
移动速度设置数值小就走得慢！！移动速度设置数值大就走得快！的代码：...

一 文字处理
2 文字显示位置的控制
文字显示位置分别为：水平方向（align），垂直方向（valign）
水平方向即左中右：left（左对齐）CENTER（居中）RIGHT（右对齐）
垂直方向即靠顶和靠底.top（靠顶）、bottom（靠底）等。

举例如下：

水平方向即左中右的代码： 向左对齐
显示效果如下：
向左对齐 表示居中
显示效果如下：
表示居中
向右对齐
显示效果如下：
向右对齐
应用举例

祝你进步
祝你幸福！
没起名

代码如下：
祝你进步 祝你幸福！ 没起名

垂直方向valign）靠顶的代码： 居左靠顶 居中靠顶 居右靠顶
垂直方向valign）靠底的代码： 居左靠底 居中靠底 居右靠底
文字输出位置垂直方向的代码是设置在单元格里（TD），方便易用。
应用举例：

居左靠顶的代码

代码如下：

居左靠顶的代码

文字（或图片）放置的地位，还可以用空格和空行（BR）等办法调整。

练习:
1...

谢谢老师！