打印

【设计】HTML帖子制作教程

七郎仔

三司

Rank: 4 Rank: 4

发短消息
加为好友
当前离线

1^# 大中小发表于 2010-2-23 17:44 只看该作者

【设计】HTML帖子制作教程

追求完美的你，不可能只留恋于像编辑Word文档一样编辑你的帖子，也不会满足于使用有限的UBB语法来制作你的帖子，“盗用”别人的代码也不是长久之计。看到别人那些精美无比的HTML帖子，你早已跃跃欲试了！
如果是这样，那么，本教程就是为你准备的！
本教程主要适合于HTML论坛新手和初中级水平的水手参考使用，对于拥有Web管理网站的朋友，本教程也很有指导意义。而对于想学习HTML的朋友，这也是一个不错的教程。总之，黑马尽量使用最通俗易懂的方式介绍HTML帖子的相关语法和制作方法、技巧。
或许你已经是HTML帖子的制作高手了，那么，如果你有耐心一章一节地看下去，说不准也对你有所帮助——里面的内容，极可能有些是你未接触过或者不太熟悉的；如果你是教授级别的，那么，浏览一下也无妨，你可以给黑马提提意见，让本教程对大家的帮助达到最佳效果。

TOP

有法律问题请直接向专家提问>>>

焊线

二司

Rank: 5 Rank: 5 Rank: 5

发短消息
加为好友
当前离线

2^# 大中小发表于 2010-2-23 17:45 只看该作者

让我们首先从字体设置开始。
在HTML代码里，字体的定义并不是很难，我们只需用<font>标签即可定义字体、字号、字体颜色等。<font> 标签原则上要求成对出现，即在被修饰的字体前使用<font>引导，在被修饰的文字后用</font>结尾。下面给出例子和效果及相关说明：
语法：<font face=黑体 size=4 color=red>黑马在线动力</font>
效果：黑马在线动力
说明：<font>标签里，face为字体名称，“=黑体”即表示被修饰的文字即“黑马在线动力”的字体为黑体，至于定义为什么字体，看你的喜好了，如果你所设置的字体不存在，系统自动使用默认字体显示（如中文Windows平台下宋体就是默认字体）；size表示字号，论坛里可用字号是1号到7号，通常数字越大字号也就越大（也有的论坛相反），如果用户定义的字号超过7号则以7号显示（但还有其他方法突破7号字体，稍后我们会讨论到的）；color用来定义文字的显示颜色，其值放在和前面的各元素一样放在等号的后面，颜色的表示方式可用少量的颜色英文明文，也可用Web色码方式，如#ff0000，色码表请参阅黑马在线动力提供的色码表。
size还有一种赋值方法，形式如下：
<font size=+1>黑马在线动力</font>
这类表达式适用于未使用CSS设定的页面，它表示被修饰的文字在默认字号基础上加大一号。
字体修饰还用到其他的标签，分别介绍如下：
粗体：<b>文字</b>  （例：文字）
加重：<strong>文字</strong> (例：文字）
上标：<sup>文字</sup>  （例：文字）
下标：<sub>文字</sub>  （例：文字）
斜体：<i>文字</i>  （例：文字）
下划线：<u>文字</u>  （例：文字）
提示：连同<font>标签一块，以上这些修饰方法，只要不相互冲突就可以结合起来使用。
标题修饰：<hx>文字</hx>。其中，x为1到6的数字。以下是h1到h6的标题式样效果，我们可以看到，字号是逐渐变小的：
标题一
标题二标题三
标题四
标题五
标题六
最后讲讲突破7号字大小问题：
我们需要以嵌套方式调用CSS样式来定义字体，这种方法可以让我们最大限度地设置字号大小，实现方法也很简单，只需在<font>标签里用以下代码替换纯HTML原来的元素即可。请看以下代码和效果：
代码：<font color=#ff0000 style="font-size: 100pt;font-family:华文行楷,隶书,黑体">春天</font>
效果：
春天
CSS扩展了HTML功能，它能够令帖子和网页的可控制程度更高。更多的CSS知识我们将在后面陆续介绍，你也可以阅读这个了解和学习一下CSS滤镜修饰字体的强大功能。

TOP

有法律问题请直接向专家提问>>>

淡无盐

三司

Rank: 4 Rank: 4

发短消息
加为好友
当前离线

3^# 大中小发表于 2010-2-23 17:46 只看该作者

分隔符标签详解
从代码结构来看，HTML帖子实际上就是一个去头去尾的Web页面，原帖和回复置于<body>和</body>之间，我们可以把原帖和回复帖分开来看，这样，每一个帖子实际上就相当于Web页面的正文了。正文的行与行之间、段与段之间甚至上一个显示元素和下一个显示元素之间，如若我们不刻意去把它们分隔开来，情形会怎么样呢？显然会是一团糟，你的帖子将是一个大团块，阅读起来将十分不便。
为此，学习和掌握HTML语法中的分隔标签非常有必要，娴熟地应用分隔标签，将能令你制作的帖子可读性强、外观整洁漂亮。
强行换行：<br>
在需要处打上<br>标签，<br>后面的内容将强行换到下一行。Web页会根据自己的可显示宽度自动换行（除非定义为不换行，不换行标签是<nobr>），但有些情况下，我们需要强行换行（比如诗歌、歌词等的编排），此时<br>标签就能派上用场。<br>可以连续使用，如果<br>后面没有内容，它将表示一个空行。<br>是独立使用的标签，没有终止符，</br>是错误的！
强行分段：<p>内容</p>
与换行不同，p用来强行分段，它是成对出现的标签，即以起始符<p>引导被修饰的段落，以</p>结束该段。在HTML页面里，段与段之间的距离相当于一个空行，并不像Word里用回车分段得出的效果那样。默认情况下用两个<br>也得到分段的效果，但这样可能会存在一些问题：一是，假设预定义了行高，那么，两个<br>造成的两个段落的上下间距可能与用p的不同；二是，像动网论坛那样，用<br>来给一系列超级链接分行，不管连续用多少个<br>，<br>都极可能被吞掉，结果是，那些超级链接外观上将是连在一起的，分辩起来哪是哪比较困难，所以建议用p标签来给它们分段（当然还有其他的手段）。
类似p标签的还有div，记作：<div>内容</div>。严格来说div不是一个分段标签，它和span等元素一样，属于网页布局元素，用于网页制作的布局、定位、色块等设计，但在论坛里，div的作用非常类似于p，不过，它分出的段落间距不一定与标签p一致。
分隔线：<hr>
分隔线标签<hr>也是独立使用的，它将令Web页出现一条线条。如果不需要特别的装饰，直接用<hr>即可，也可以修饰分隔条，让它和你的帖子更协调地配合起来。<hr>标签可定义元素主要有：
size — 厚度，即分隔线的粗细，默认为1；
color — 颜色，记作：color=颜色值；
width — 宽度，可用实数值表示，也可用百分比；
align — 对齐方式。居中：center，左对齐：left，右对齐：right。默认为居中；
<hr>标签还有一些诸如title（标题）、noshade（无阴影）等元素，这里就不一一介绍了。

TOP

有法律问题请直接向专家提问>>>

ycfbjx

三司

Rank: 4 Rank: 4

发短消息
加为好友
当前离线

4^# 大中小发表于 2010-2-23 17:47 只看该作者

排版标签详解
   HTML的排版不同于Word的直观排版概念，它不是所见即可得的。但是，最终追求的结果是一样的：令终端页面的外观像我们预设的一样显示出来。
在支持HTML论坛里，排版可分为常规排版和非常规排版两种，后者属于较为高深的内容，出于学习的循序渐进要求，我们在本节只介绍常规排版。
一、格式预设：<pre>内容</pre>
这是非常有用的一个标签，它可以使得最终显示效果以原始格式实现。请看以下代码和效果：
代码：
<pre>
1236
  -1207
--------
   29
</pre>

效果：
1236
  -1207
--------
   29
论坛里，有时我们需要精确地对齐某些元素，pre标签能够帮上大忙，它能令效果比在“设计”模式下用空格符移动显示符号更准确。
二、对齐：align
   align作为一个元素放置在相应标签里令被该标签修饰的显示单元按指定方式对齐或在图文混排时定义图片与文字的对齐方式。
   先介绍前者  即被修饰单元的对齐方式。这种情形，align通常有三个值可以选择：left（左对齐）、center（居中）、right （右对齐），记作align=值。align不能独立使用，它要放在相应的标签里，如放在<table ...>里，则令表格按取值情况对齐，<table ... align=center>一句，将令表格居中；再如放在<p>标签里，则令<p>...</p>里面的内容按指定值对齐，<p laign=right>文字</p>将使“文字”右对齐。align的这种用法还可以用于<div>、<hr>等标签里。
而当align用于<img>（图像标签）里时，它所指的是图片与文字的对齐方式，其值比较多，现解释如下：
left：图片位于文字的左边。
right：图片位于文字的右边。
top：后面的文字与图片的顶站对齐。
bottom：后面的文字与图片的底部对齐。
middle：后面的文字与图片的中间对齐。
absmiddle：后面的文字与图片的绝对中间对齐。
更多的img标签里的align元素请参阅其他资讯。
三、缩进：<blockquote>
blockquote将例被修饰的对象往右边缩退，记作<blockquote>内容</blockquote>，以下效果是这样的语法实现的（用了两个缩进单位）：<blockquote><blockquote>黑马在线动力……</blockquote></blockquote>
当然，你也可以用空格符号实现缩进（代码记作：），但它只管左边的，对右边没有影响，而blokcquote标签是有的。
四、居中对齐：<center>内容</center>
这个很简单，成组使用即可，不多说什么了。
五、其他排版方式：表格
用表格来实现网页布局一直被大量使用。在论坛里发帖，有些需要居中的地方，我们不妨用用表格，它得出的效果会比用center标签好得多。试看以下例子：
为了那一夏的热烈
爱需要蛰居多久

在漫长的暗无天日的日子里
一切早已精心策划
单等风和日丽之时破土而出
而后羽化成歌

烈日下本就炽热的爱必须张扬
让正午的阳光更为燥热
让黄昏的空气鼓动起来
让爱肆无忌惮

当爱成为阳光下的风景
曾经的等待又何需忆起

如果我们将表格的边框设置为0，那么，看表将看不到，文字的居中效果就非常理想了。

TOP

卡多佐

二司

Rank: 5 Rank: 5 Rank: 5

发短消息
加为好友
当前离线

5^# 大中小发表于 2010-2-23 17:47 只看该作者

图像标签
或许贴图是论坛里最容易的事情。黑马当初玩论坛就爱上论坛的原因就是发图太简单了。复制→粘贴就可以发一张图片，这是动网论坛的便利。用HTML方式贴图，它的语法也是很简单。
基本语法：<img src=图片地址 border=数值 align=对齐方式>
我们看到，img标签没有终止符。其常用参数也不太多，非常容易记住。
src：图片地址。在论坛里，强烈建议使用图片的完整地址也就是绝对地址，若是上传到论坛的图片，可以使用相对地址，一般从upload一节开始。
border：图片的边框。取值范围为正整数，边框颜色不可改变（黑色）。多数论坛里的图片都会链接到自身，当用户点击过它，它的边框颜色通常就是默认的蓝色，故为美观起见，建议设置为0。
align：图片与文字的位置关系。这个内容，我们在上一节已经讲过。
img标签还有其他的参数：
alt、title：说明、标题。都是当鼠标移到图片时弹出的文字。下面是使用效果，请将鼠标指针分别移到图片上看看发生什么：

hspace、vspace：图文混排时图片与左右、上下物件的距离。取值为正整数。
width、height：图片的宽度、高度。如果图片的高与宽未做设置，系统会按照图片的原本高宽显示出来，但不少论坛并非这样，论坛系统嵌入了一组js代码对图片的尺寸进行处理：如果图片的宽度超过300个像素则以300个像素显示，为止设置图片的高度宽度在这些论坛没有意义；也有的论坛支持用户设置，这类论坛就需要我们对一些尺寸不合要求的图片做一下设置了。是的，图片不一定按原来的尺寸显示，可以通过设置width、height值做必要的调整。

TOP

日光兰

二司

Rank: 5 Rank: 5 Rank: 5

发短消息
加为好友
当前离线

6^# 大中小发表于 2010-2-23 17:48 只看该作者

超级链接
在很多论坛里，我们在Design（设计）编辑模式下输入或复制一个网址或其他地址，论坛系统自动令其成为超级链接模式，即发布后，一点击这个地址，浏览器会打开该地址。这是因为，论坛系统在后台给出了超级链接标签。在HTML编辑模式下，我们得自己编写超级链接代码，否则输入的链接是点不了的。
语法：<a href=地址 target=数值>文字或图像</a>
地址没什么可说，只要是完整有效的网址即可。
target是连接目标，它实际上指链接的打开方式，它的值有好几个，但在论坛里我们只用到_blank这个值，记作：target=_blank，意思是将在新页面打开目标链接。如果省略掉target元素，系统默认为在本页打开目标链接，即当前页面的内容将跳转为目标链接指向的内容。一些论坛用不用target都视为开启新页面打开目标链接，这里因为预设定了的缘故，比如，在系统调用的INC之类的文件里有那么一句，它的作用就是所有的链接都指向新页面：<base target="_blank"> 。这种环境下，我们对target元素没有操作权限了。
<a href>标签还有title、name等属性，但在论坛里可操作性不强甚至没有用处，这里就不多说了，感兴趣的朋友可以查阅其他资讯。
现在我们要讨论的是超级链接的字体颜色问题。我们知道，论坛都预定义了字体颜色，超级链接样式的字体颜色也一样规定好了。这样就可能存在一个问题：当我们的帖子设定了背景颜色，原论坛的超级链接颜色式样可能不适用，会出现链接看不到的情形。比如黑马就常用黑色背景，而黑色的链接字体颜色显然是不能在黑色的背景里显现出来的。我们必须处理这个问题。
我曾考虑使用嵌入式CSS样式表来批量自定义超级链接的字体颜色，一直弄不出来，也看到过有人在<table>标签里做文章，尝试过，没有效果。简单的方法还是在链接宿的文字前后使用<font>标签，语法样式如下：
<a href=地址 target=_blank><font color=white>文字</font></a>
这样一来，显示是不成问题了，只是，当链接很多时，工作量还是挺大的，所以，还是应该寻求其他的方法，比如，研究一下论坛代码，它可能会提供几个样式的超级链接的字体颜色，通常在<head>和</head>之间可以查找得到，在CSS代码里，它们标志为a:link之类的。如果有也能找出就非常方便了，我们只需要在诸如表格的<td>标签里加入 class=lnk1 就行了（lnk1是假设的一个名称）。

TOP

wuyangbo11

三司

Rank: 4 Rank: 4

发短消息
加为好友
当前离线

7^# 大中小发表于 2010-2-23 17:49 只看该作者

媒体标签
图文并茂的帖子还需要有音乐、影像等媒体做衬托，帖子的整体效果才达到极致。虽然论坛一般都提供插入媒体文件的方法，但那是很有局限的，并不能满足特殊的要求。为此，有必要学习和掌握媒体标签的使用方法。
首先我们先了解一下三种主要的音乐格式。这些音乐格式都是当前网络上较为流行的，它们更被广泛地应用于论坛。
出于编写代码的要求，我们这里以支持这些音乐的播放机为划分音乐格式的依据，这种划分方法以前也是有人使用过的。
第一种：WMP格式。
WMP即为Windows Media Player的缩写，是微软公司的媒体播放机，它集成在Windows系统里，可以格外免费升级（网上一般都有下载链接）。其网络ActiveX插件为Windows Media Player。当前WMP所支持的音乐及影像媒体文件的格式主要有（仅介绍网络上常用的格式，下同）：
MP3（音频）、WMA（音频）、WMV（视频）、AVI（视频）、MPEG（电影）、WAV（音频）、MIDI（音频）、ASF（视频）、AIFF（音频）、AU（音频）、wpl文件（WMP播放列表文件）、m3u文件（Winamp的播放列表文件）等。
第二种：RP格式。
这是有着悠久历史的一种媒体格式，宽带普及以前的网络媒体文件的老大，由RealNetworks公司开发。它当前的网络ActiveX插件是Real Player G2 Control。常见文件后缀名为：
rax、ram、rmm、rsml、rvx、rmj、rmx、rjt、rm
REAL也支持MP3、MIDI、Wav等格式的媒体文件，但它的播放效果没有WMP的好，所以我们不把它列入RP格式。
第三种：Flash格式。这是Macromedia公司开发的结合音频视频在一块的媒体格式。其插件为Shock Wave。文件后缀名为.swf。
弄清楚以上文件格式后，我们就可以使用<embed>标签来编写播放媒体文件的代码了。语法：
格式一：<embed src=地址 autostart=值 loop=值 widht=值 height=值 type=值>
格式二：<embed src=地址 autostart=值 loop=值 hidden=true type=值>
格式一适用于显示播放界面的情形，格式二适用于隐藏播放界面的情形。
下面分别讲解各参数的取值规定和要求。
src：媒体音乐地址。地址要完整、有效。如果文件名包含非英文字符，建议整个地址用小角双引号引起来。
autostart：是否自动播放（即一打开帖子就播放与否）。true为自动，false为手动。
loop:是否循环播放。true为循环，false只播放一次；也可用正整数表示播放多少次，比如等于3表示播放3次。
width:播放界面的宽度。建议在300到500之间。
height:播放界面的度度。这个很讲究。针对音频文件，视频界面是没有必要出现的，为此，WMP播放机设置为45非常合适，RP播放机为85较好；有视频的则根据情况设置。
hidden:是否隐藏播放界面。格式二语法式样中设置为true，即不可见，如果设置为false，则表示可见，但若不设置width和height，它的样子是不好看的。有不少人也用width=0 height=0来隐藏播放机的播放界面，其是这样是隐藏不了的，WMP有一个点，RP有一条竖线。
type:这是一个重要的值，用于指播放机的插件类型，一些论坛会根据有效的src自动给出type类型（这类论坛我们编写代码时可以省略type），但也有的论坛不会自动给出类型，需要用户指定。type的取值依据和取值规定是：
WMP类：audio/mpeg (wma的可用audio/x-ms-wma，不过都一样)
RP类：application/octet-stream
Flash：application/x-shockwave-flash
注：Flash还可指定wmode=transparent表示背景透明，quality=high表示以高档画质播放，pluginspage=http://www.macromedia.com/go/getflashplayer指定插件下载地址（可省略）。
类型的指定尽量不要弄错，否则极可能出现有些朋友访问你的帖子时不能正常欣赏到音乐和影像媒体。
对于支持object的论坛，建议使用object来播放媒体文件，它得到的效果更能令人满意。因其代码较多，不便记忆，这里就不介绍了，但你可以通过FP或DW插入Web组件的方法并对ActiveX控件进行相应的设置得到完整的代码。

TOP

涵冰

三司

Rank: 4 Rank: 4

发短消息
加为好友
当前离线

8^# 大中小发表于 2010-2-23 17:50 只看该作者

marquee标签详解
◇ 黑马
在论坛默认的编辑状态下，我们可以通过UBB语法的move和fly语句让对象动起来，但功能很简单，只是平行地移动。而我们使用HTML的Marquee语句则可以产生更多的移动效果：向左、向右、向上、向下。再嵌套使用marquee语句，效果就更加丰富了。
marquee的基本语法：<marquee> ... </marquee>

说明：与大多数HTML语法元素一样，它也是成双出现的，被修饰对象就放在起始符和终止符之间。请看如下例子：
<marquee> 啦啦啦，真的会动耶！</marquee>
啦啦啦，真的会动耶！
瞧，简单吧？不过，以上例子只是使用了marquee的默认用法。我们加入相应的参数，它的移动方法就有所不同了。
参数一：direction。direction的英文意思就是方向。这个参数的取值有四个：left（左)、right(右)、up(上)、down(下)。
例：<marquee direction=up>向上移动</marquee>
向上移动
参数二：behavior。移动方式。值：scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。
例：<marquee direction=left behavior=alternate>哈哈，我来回走！</marquee>
哈哈，我来回走！
<marquee direction=left behavior=slide>累！我只走一次！</marquee>
累！我只走一次！
参数三：loop。循环。若未指定则循环不止(infinite)，其值取数值。例：
<marquee loop=3>我只走三次哦</marquee>
我只走三次哦
参数四：scrollamount。移动速度。值取正整数。数值越大，速度越快。例：
<marquee scrollamount=25>看，我走多快！</marquee>
看，我走多快！
参数五：scrolldelay

延时。数值。例：
<marquee scrolldelay=1000>我走一走，停一停</marquee>
我走一走，停一停
参数六：bgcolor

底色。例：
<marquee bgcolor=pink>看到了吧？有底色！</marquee>
看到了吧？有底色！
参数七：width和height。就是移动的宽度与高度了。例：
<marquee width=200 height=200 bgcolor=pink direction=down>这个面积不够我移动！</marquee>
这个面积不够我移动！
其他参数：空白(Margins)<hspace=数值 vspace=数值>；对齐方式(Align) <align=top/ middle/bottom>
我们在本节所举的例了当中，marquee所移动的对象都是文字，其实呢，凡可视对象，只要有足够的区域，marquee都能令它们移动。

TOP

小七哥

二司

Rank: 5 Rank: 5 Rank: 5

发短消息
加为好友
当前离线

9^# 大中小发表于 2010-2-23 17:51 只看该作者

表格属性设置
本节所指的表格属性设置其概念等同于诸如FP的“设计”编辑模式下的表格属性设置，在“设计”模式下，通过点击鼠标，可以方便地设置表格的属性，只是，它没有通过代码设置的灵活。
我们先看看<table>标签里都有哪些需要设置的属性。
border：此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框。
cellspacing：单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing了，如若表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。
cellpadding：单元格衬距。指该单元格里的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。
width：表格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800

TOP

粉妮

二司

Rank: 5 Rank: 5 Rank: 5

发短消息
加为好友
当前离线

10^# 大中小发表于 2010-2-23 17:52 只看该作者

单元格属性设置
◇ 黑马
在上一节对表格属性设置的介绍中，我们提到，有一些属于表格的属性单元格也有，比如，背景色、宽度和高度等等。本节我们学习单元格的属性设置，但这回我们采用不那么正规的讲述方法来介绍单元格的属性设置。
从表格的整体外观上看，单元格是表格的基本构成单元，一张表格至少要有一个单元格。单元格由<tr><td></td></tr>共同组成，但在一组tr里，可以拥有多组td，我们前面说过，有多少组td该表格就有多少列；同样，一张表格可以拥有多组tr，表格有多少组tr就有多少行。显而易见，构成表格最小单元的td，它的属性设置是不可忽视的。
单元格的属性设置主要体现在<td>里，除了我们在上一节学到的bgcolor等之外，还有许多属性需要掌握，令人高兴的是，很多属性的设置方法都是和<table>属性设置一样的，如width、height、bordercolor等。关于width，我们在此着重讨论一下。好的习惯是，如果是一个单元格的表格，假设我们在<table>里设置了其宽度，那么，就不必再设置<td>的宽度了，因为这是多余的，但我经常看到不少朋友的代码就是重复设置的，且这么设置：<td width="100%">，显然只是增加了帖子的代码量，它没有任何作用——当有了表格宽度，单元格的宽度会自动占满表格的宽度。但是，在多列表格里，<td>的宽度就应该设置，如若不设置，系统会自动按各单元格里的内容的占位情况自行分配宽度，效果是可想而知的。
单元格的bordercolor设置有些讲究，主要用于实现单像素的表格边框——要实现这种效果，要求表格的border为1，且<table>里设置了bordercolor颜色值，cellpadding和cellspacing都设置为0，然后将<td>的bordercolor颜色值设置为与<td>的背景色相一致。
单元格的最为重要的属性应该为align和valign，align规范单元格里的内容的水平对齐方式，valign则规定垂直方向的对齐方式——请特别注意：它们规定的对齐方式是单元格里面的内容，而不象表格里的align那样定义自身的位置！align取值方法和前面介绍的一样，valign的取值方法主要有：left（左对齐）、middle（居中）、top（靠顶）、bottom（靠底）等。以下是<td>的两个对齐属性的不同设置所产生的效果示例：
默认对齐（不设置）
水平：居中
垂直：靠顶
代码：<td align=center valign=top>

单元格元素中，<tr>也有些属性设置，因在论坛中作用不是很大，这里就不介绍了。但有一个有趣的不属于“属性”的情况这里格外提一下：<tr>后面可以有文字，以下的示例的“表一”和“表二”就是放在<tr>和<td>之间的：
表一水平：居中
垂直：默认
表二水平：右对齐
垂直：靠底
代码：<td align=right valign=bottom>

通过探索，我们还有可能发现更多的书上没有介绍的东西。建议大家安装可以自动填充代码的网页编辑器（如FP2003），这样，当我们在“代码”编辑模式下编写代码时，就会看到，有很多属性或其他内容自动弹出来，我们可以做些尝试，然后通过预览看看是什么样的效果。

TOP

蓝色海域

三司

Rank: 4 Rank: 4

发短消息
加为好友
当前离线

11^# 大中小发表于 2010-2-23 17:53 只看该作者

表格组合
◇ 黑马
表格组合不是一个轻而易举的技术，所以，我们极少见到论坛各种精美的帖子会用到它，但表格组合技术是一个很有趣的技术，掌握它具有一定的挑战性，所以，黑马愿意花一节的篇幅专门讲它，如果你觉得不需要，可以跳过这一节。
表格组合更多的用于布局，当然，也有少数情形需要用到它。本节不想探讨什么时候用到表格组合，只从实现手段方面进行讨论。
先讲上下排列的表格组合。先看例子：
表一
表二

要顺利地实现N张表格的纵向组合，至少有三种方法：一是，令参与排列的表格都居中（即在<table>里加入align=center），上例就是；二是，不定义表格的对齐属性，即<table>里没有align属性，这样给出的N张表格代码，它们都是上下排列的，表格的自身位置全是左对齐（但若定义了align=left，情形不是这样，大家可以在FP或DW里试试），例子请看表三和表四；三是把参与排列的表格放在一张表格里，这张作为容器的外表宽度不限，且里面的表格也不设置align属性——大家都看得出来，其实，它只是第二种实现方法的扩展，其目的是为了让参与排列的表格随心所欲地设置水平对齐，换句话说，外表的作用是为了实现自定义的对齐方式，示例为表五和表六。第三种方法虽然源于第二种，但使用它是个绝好的主意，这个，在使用表格排版过程中，相信大家会慢慢体会到的。
表三
表四
↓我叫表五表六右对齐表五
表六

下面看水平排列的表格。
表格的水平排列更需要精确地计算参与排列的表格的宽度，它们的宽度的总和不能超过其所属容器所能装载的宽度，表格和其他元素的混排情形下更应该严格考虑。
一个好的习惯是，还是用一张表格来规范并列组合的表格，这张表格，最好宽度设置为100%，然后将里面要并列组合的表格通通设置为左对齐（但注意：它们的宽度总和不能超过可显示的宽度）。试看以下两个示例：
外表宽度为100% align=left
width=150
align=left
width=150
align=left
width=150

外表居中，宽度为450 align=left
width=150
align=center
width=150
align=right
width=150

本节从某个角度分析了表格的组合问题，它是一个主要用于排版的技术，要求计算精确，并不十分适用于论坛。但如果你是一个不怕挑战的人，那么，本节所讨论的内容或许对你来说还远远不够，好在聪明的你会自己去尝试，本节若能起到抛砖引玉的作用就已经达到目的了。谢谢阅读！

TOP

spybot

三司

Rank: 4 Rank: 4

发短消息
加为好友
当前离线

12^# 大中小发表于 2010-2-23 17:54 只看该作者

表格嵌套
论坛所有精美的帖子，几乎无一例外地都用到表格的嵌套技术，其中的原因，如前所述，论坛中给用户提供施展身手的余地十分有限，只有通过表格的修饰，帖子才能既成为独立的显示单位，又达到如纯完整的Web页一样有着自己的装饰。表格的可分割性和容器特征在帖子制作中充当着重要的角色，兼管帖子的布局的同时还承载着表达帖子信息元素的重任。
作为容器，表格可以往里放置可以放置的元素。表格也是一个元素，故而表格放在表格里是合理的，因此就有了表格的嵌套。表格的嵌套还可以是另外的形式，那就是，一个表格的单元格里还有表格。不论是哪种形式的嵌套，理论上嵌套的层可以是无穷尽的，但现实中并不会这么做，我们总是根据需要有限制地使用嵌套，不会没完没了。
表格嵌套其实也不复杂。如果你能够独立用代码做一张表格（强烈建议练出这样的本事），那么，你就可以做一个两张表格的嵌套，很简单，把代码复制一下，粘贴在原代码的<td>和</td>之间（亦即在“和”的位置）。试看以下代码和两个表格的嵌套效果：
<table border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center><tbody>
<tr>
<td>表一
   <table border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center><tbody>
   <tr>
      <td>表二</td>
   </tr>
</tbody></table>
</td>
</tr>
</tbody></table>
表一表二

从上面的表格效果上看，如果我们把文字“表一”删除掉，表格的嵌套将是非常完好的。如果再定义边框大小和颜色、cellpadding和cellspaing为其他值，加上背景色和背景图，或通过其他手段来修饰，那么，里表和外表之间，就会出现非常漂亮的边框，帖子的外框就这么搞掂了。当然，这是一个细活，你需要做反复的尝试，直到效果满意为止。或许你还需要更多层的嵌套，这就看你的想象力了——实现手段是不难的，因为你已经会了第一层的嵌套，第二层、第三层……第N层，无非就是如此。
现在我们来看看多单元格表格中，在单元格是嵌入表格的示例。先看代码：
<table border=1 cellpadding=0 cellspacing=0 width=450 align=center><tbody>
<tr>
  <td class=red>单元格一：无表格嵌套</td>
  <td>
<table border=1 bgcolor=#ccc1cc width="100%"><tbody>
<tr><td class=red>我嵌套在单元格二里</td>
</tr></tbody></table>
  </td>
</tr>
</tbody></table>
以下是效果：
单元格一：无表格嵌套我嵌套在单元格二里

上面的两个例子里，黑马都将处于外层的表格（即外表）的宽度设置为450个像素，这是由于本页面的限制。在实际制作中，我们可以充分考虑未来浏览者的显示器的分辨率和论坛提供的可显示宽度来决定取值。好的习惯仍然是取绝对值，因为，你的帖子里边的内容宽度非常可能是绝对的，譬如图片有着自己固定的宽度， Flash影片也是使用绝对的width值，为了不让正文四周出现太多的空余，采用绝对值规范外表的宽度是有必要的。当然，还有一个好的做法，那就是，根本不用规定外表的宽度，而是让里边的内容自行撑宽外表，这么做至少要求我们注意两个方法的问题：一是，利用cellpadding或border的合理值来让外表的边缘显示外表的既设背景，二是，外表里面的诸元素的宽度要相对统一。任何一种实现方式都还有其自身的奥妙，不是用语言能够一一道明的，只有在不断地实践中才能逐一领悟和掌握。
当今用户的的显示器分辨率有两大标准：800

TOP

梦的忧伤

二司

Rank: 5 Rank: 5 Rank: 5

发短消息
加为好友
当前离线

13^# 大中小发表于 2010-2-23 17:55 只看该作者

深入学习表格
◇ 黑马
表格还有一些重要的内容需要彻底弄懂。实际上，这些内容，前面几节我们已经接触过，但我们还需要进一步去探讨一下。
我们先来做个实验。
下面黑马给出一条长度为450个像素的分隔线，然后在分隔线下面放置一张表格，其宽度亦为450个像素：

border=1
cesllpadding=15
cellspacing=8
width=450

现在，我们看到，表格的总宽度仍然是450个像素（它没有超越分隔线），因此，我们可以得出这样的结论：表格的border、cellpadding和cellspacing虽然都是占位元素，但它们不会使得表格变得更宽，换一个更生动的说法，表格的这些元素是往里占位的，而不是往外占位。
第二个实验：设定表格的宽度为400个像素，然后在里面放置一个可视元素，令其宽度为450，看看表格的总宽度发生了什么。我们依然用一条长度为450个像素的分隔分做参照。

本表格设定宽度为400个像素，但因表格里的分隔线宽度为450个像素，表格的实际显示宽度发生了变化。

现在我们看到，虽然在<table>标签里设定了width=400,但表格的总宽度并不是400个像素，而是被表格里面的那条分隔线的实际宽度（450个像素）撑宽了。你可能会觉得奇怪：为什么表格总宽度超过了450个像素呢？道理是这样：表格设置了cellpadding值为10，cellpadding区域是不可放进任何可视内容的。细心比较一下，你将发现，表格宽出的部分正是留空的部分，即表格的单元格衬距。
可见，表格里面的内容会影响到表格的宽度。实际上，如果我们设置好表格里面的内容的宽度，表格的width值是完全可以不设置的，但这不是一个好的习惯，我们通常仍然需要合理地设置表格的宽度，但必须留意一个问题：表格的总体宽度是否超过了可显示的范围。
实验三：设定一个450个像素宽度的表格，表格的边框、单元格间距和衬距都为实值，该表格有三个单元格，每个单元格设定宽度为150（加起来恰好的450个像素），看看表格的实际宽度是否发生变化。这个实验仍然使用450个像素宽度的分隔线作参照。

width=150width=150width=150

上面的表格，我们设置border=1，cellpadding=10，cellspacing=6，三个单元格的宽度均为150个像素，结果是：表格的总体宽度未发生变化。由此我们得出结论：多单元格表格里，只要各单元格的宽度相加起来不超过<table>里的宽度赋值，它们不会因表格边框、单元格间距和单元格衬距都为实值而撑宽表格。
本节通过实验的方式，从表格的宽度角度剖析了表格的一些深层特征，估计这些知识和体验从其他的教程中或许是得不到的。它并不是很抽象，加上黑马创造的用分隔线做对照标准和耐心的讲解，悉心阅读和比较后，你会很容易掌握的。

TOP

梦的忧伤

二司

Rank: 5 Rank: 5 Rank: 5

发短消息
加为好友
当前离线

14^# 大中小发表于 2010-2-23 17:57 只看该作者

表格应用示例二
◇ 黑马
以下是悠悠然的一个作品的框架。出于讲解方便，黑马在不改变原貌的情况下对原作品作了些改动。
此处放一幅与标题相关的图片
标题
分隔图标
【正文，由六幅图和五段诗文组成】
分隔图标
签名
小图修饰+音乐标签

这个作品的框架用了八张嵌套的表格，每一张表格都有背景图片。其中外表是黑马添加上去的，其作用是替代原来的body区域里的背景图，而原作品中的两张用于设置帖子正文处的表格略显多余，黑马已经将其删除，仅保留七张表格。下面给出上面帖子框架的代码并作简单的分析。
<table border=0 cellpadding=20 cellspacing=0 background="yyr/lvsedw.jpg" align=center><tbody><tr><td>
<table border=1 cellPadding=20 cellSpacing=6 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 width=84% align=center><tbody><tr><td>
<table border=1 cellPadding=0 cellSpacing=0 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 width="100%"><tbody><tr><td>
<table border=0 cellPadding=8 cellSpacing=8 background=yyr/lvsesb3.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=8 cellSpacing=8 background=yyr/fawnbkgtile2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table background=yyr/lvsedn.jpg width=350><tbody><tr><td>
<p align=center>此处放一幅与标题相关的图片</p>
<p align=center>标题</p>
<p align=center>分隔图标</p>
<p align=center>【这里是正文，由六幅图和五段诗文组成】</p>
<p align=center>分隔图标</p>
<p align=center>签名</p>
<p align=center>小图修饰+音乐标签</p>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
从代码上看，这并不是一个很复杂的构架，它只是一个多重嵌套的方式。为更能直观地查看各表格定义了背景图后的效果，黑马将各层表格拆开来让大家看看：
表一
表二
表三
表四

表五
表六
表七
表八

接着把这些表格像搭积木一样一个一个地往里套，大致框架就有了，再在第八个表格放一些东西，一个完整的帖子就出笼了。请点击下面的链接查看全帖子的效果：
点击 → 小溪流水
最后给出该帖的核心代码。你应该发现，里面又多出了一些表格。是的，它们是简单的表格，作用仅为规范诗文的居中：每一段诗文使用一个表格，共五个。
《小溪流水》核心代码：
<table border=0 cellpadding=20 cellspacing=0 width="100%" background="yyr/lvsedw.jpg"><tbody><tr><td>
<table border=1 cellPadding=20 cellSpacing=6 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 width=84% align=center><tbody><tr><td>
<table border=1 cellPadding=0 cellSpacing=0 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 width="100%"><tbody><tr><td>
<table border=0 cellPadding=8 cellSpacing=8 background=yyr/lvsesb3.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=8 cellSpacing=8 background=yyr/fawnbkgtile2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table background=yyr/lvsedn.jpg width="100%"><tbody><tr><td>
<p align=center><img border=0 src=yyr/002.jpg width=340 height=224></p>
<p align=center><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 华文彩云; FONT-SIZE: 32pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>小溪流水</B></FONT></p>
<p align=center><img src=yyr/lvsefgx.jpg></p>
<p align=center><img src=yyr/bb001.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>涓涓细流，<BR>是淌过我心中的小溪。<BR>潺潺清悠，<BR>是萦绕我梦中的小溪。<BR>汨汨的清响，<BR>时常勾连起，緾绵的追忆。<BR>喃喃的絮语，<BR>时常叨击那干枯的心堤。<BR><BR>你是银河的映射，<BR>闪耀着星光的神奇；<BR>你是大海的浪花，<BR>颂扬着莽原的博击。<BR>你从崇山峻岭中走来，<BR>传递着洪荒的信息。<BR>你从百阻千障中游离，<BR>挣扎出怪石的绊羁。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb002.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>亘古的积雪，<BR>是你生命的源头；<BR>云雾的氤氲，<BR>是你络绎不绝的延续。<BR>你万绪千头，<BR>仿佛是树叶的纹理；<BR>你阡陌纵横，<BR>好似那血脉的毛细。<BR>丰厚的植被，<BR>将你酝酿成甘美的琼浆。<BR>错综的地貌，<BR>将你过滤成晶莹的玉液。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb003.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>弦月，为你拨响撩人的琴韵；<BR>和风，为你激荡动人的心语；<BR>阳光，为你补充醉人的弦律；<BR>落花，为你挥洒恋人的情意。<BR><BR>春洪秋讯，<BR>是你激情的泛滥；<BR>冰冻悬玉，<BR>是严寒试图阻止你和凡尘的联系。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb004.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>你为宇宙而生，<BR>你为生命而育，<BR>注定了要与<BR>宇宙的喜怒哀乐<BR>交织在一起。<BR><BR>雨儿，渗透到你的魂魄，<BR>雪花，亲吻着你的身躯。<BR>青春，追逐你游戏。<BR>羞涩，借助你轻灵。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb005.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>你一路轻歌，你一路逶迤，<BR>你放飞心怀，张扬着生命的节拍；<BR>你姿意颠波，坦荡着无瑕的心蒂。<BR><BR>为什么？我总是对你那么痴迷；<BR>为什么？我总和你有那么一段<BR> 割舍不断的情义。<BR>因为那里，也曾<BR>　截留下我青春的脚印，<BR>因为那里，也曾<BR>　伴随着我凄美的叹息。<BR>青春的矫情，承受了你的荡涤。<BR>似水的年华，定格成一个缩影。<BR>耳边时刻回荡着你的清音。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb006.gif border=0></p>
<p align=center><img src=yyr/lvsefgx.jpg border=0></p>
<p align=center>
<FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 华文彩云; FONT-SIZE: 20pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>文:太白金星<BR>编辑:悠悠然</B></FONT></p>
<p align=center><IMG src=yyr/lvsex.jpg border=0><img src=yyr/lvsex2.jpg border=0><img src=yyr/lvsex.jpg border=0><embed src=http://www.ewen.cc/res/mp3/cd/xiuxian/Track3.wma autostart=true loop=true hidden=true type=audio/x-ms-wma></p>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>

TOP

～太傻～

二司

Rank: 5 Rank: 5 Rank: 5

发短消息
加为好友
当前离线

15^# 大中小发表于 2010-2-23 17:57 只看该作者

表格应用示例三
◇ 黑马
本节要讲的一个表格应用示例比较简单：以表格为载体，在表格里面加入图片和Flash影片以期达到所需的动态效果。
这是很常见的一种做帖手段，其实现思路是：给表格加入一个背景图片，这样一来，表格仍然是可以装载占位元素的容器，因此，我们给已经有了背景图片的表格加载一个Flash影片就成为可能。
应该注意的是，表格要设置高度和宽度，且高、宽应与用作背景图的高、宽相一致，表格的border、cellpadding和cellspacing等值最好设置为 0（原因：为了使图片完美显示）。Flash影片也必须设置高度和宽度，设置为多高多宽应根据实际显示需要而定，但绝对不能大于表格的高度和宽度。
以下，是本示例将要用到的素材：一张图片和一个Flash影片。

通过查看桂林山水图片的属性（右击→属性），我们可以看到图片的尺寸为540

TOP