[另类奇思] →[教程]新手制作html 实例讲解![让你一分钟成为搞图高手在23楼]

豹子头林冲

很多新朋友很想学音画,可是一看那些代码就头疼,鱼鱼初接触音画也是一样的感觉,不知道从何下手,现在我以实例来简单讲解一下!

豹子头林冲

Design（设计）、UBB（一般不需要）和HTML（代码）三种模式：可能很多人都没能了解他们之间的区别，现作细解

★所有的使用动网程序论坛都支持三种编辑模式：Design、UBB和HTML，这三种编辑模式各有其功能和特点，鉴于有些网友常常混淆编辑模式，此贴加以说明，希望大家看了能够对论坛的三种编辑模式做到心中有数。

1、Design编辑模式：

Design的英文含义是“设计”，这里指半可视化的与Word相类似的编辑模式。用户可以在这个编辑模式下直接输入文字并进行修饰，其效果是“所见即所得”的(What you see is what you want)，你还可以在这里充分利用编辑框上方的工具栏进入诸如插入图片、插入媒体音频/视频文件、插入超级链接乃至取消等等操作，不同的是，当你插入上述内容时，它的可视化并不太理想——你不一定能够看到实际内容，而可能只是一些UBB语法格式的文字(我们下面会谈及UBB语法的)。不过Design编辑模式也有“预览”功能哦——当你在HTML下编写完一段完整的代码后，你试试切换到Design编辑模式，你会发现，你所编辑的HTML代码在这里可以看出效果来的(虽然这个效果不完全是真正发布后的效果)，这对你编写帖子和查看帖子效果无疑是有一定的帮助意义的。

论坛默认的编辑模式就是Design模式。当你发布新帖或回复别人的帖子时，你首先进入的编辑模式都是Design模式。如果你需要进入别的编辑模式，那么，在如下三种情形下你可以单击编辑框下方的相应按钮进行切换：

1）发表新帖时；
2）打开一个帖子然后点击该帖子稍右上方的“回复”按钮时；
3）引用别人的话时。

Design编辑模式支持UBB语法，就是说，在Design编辑模式下，如果你直接使用UBB语法编辑帖子，论坛系统也是接受的。不过，由于“自动格式”等原因，有时在Design模式下使用UBB的一些语句会出现问题(如系统会加入<a href=...>...</a>、<font=...>...</font>之类的HTML代码)，造成所编辑的帖子发布后效果不如人意。

2、 UBB编辑模式：

UBB是早期一些论坛为了支持部分HTML特效而设计的语法标签，这些特定的语法语句通过论坛的特殊程序将其转换成HTML效果显示出来，至今大多数论坛程序仍然使用。UBB语法就是中括号语法，每条语句的语法标识符放在中括号里，和HTML语法一样，也定义了起始符，成双成对出现。比如，令文字颜色为红色，我们用如下语法格式(*号用时去掉，下同)：

[*color=red]我喜欢天涯情感社区[*/color]

效果：我喜欢天涯情感社区

下面列举一些常用的UBB语法：

[*B]文字[*/B]：在文字的位置可以任意加入您需要的字符，显示为粗体效果。

[*I]文字[*/I]：在文字的位置可以任意加入您需要的字符，显示为斜体效果。

[*U]文字[*/U]：在文字的位置可以任意加入您需要的字符，显示为下划线效果。

[*align=center]文字[*/align]：在文字的位置可以任意加入您需要的字符，center位置center表示居中，left表示居左，right表示居右。

[*URL=http://2008wlkw.2000y.net]天涯在线管理[*/URL]：加入超级连接。

[*EMAIL=MAILThandanfang@163.net]写信给天涯管理[*/EMAIL]：有加入邮件连接。

[*img]图片地址[*/img]：在标签的中间插入图片地址可以实现插图效果。

[*flash]Flash连接地址[*/Flash]：在标签的中间插入Flash图片地址可以实现插入Flash。

[*code]文字[*/code]：在标签中写入文字可实现html中编号效果。

[*quote]引用[*/quote]：在标签的中间插入文字可以实现HTMl中引用文字效果。

[*list]文字[*/list] [*list=a]文字[*/list] [*list=1]文字[*/list]：更改list属性标签，实现HTML目录效果。

[*fly]文字[*/fly]：在标签的中间插入文字可以实现文字飞翔效果，类似跑马灯。

[*move]文字[*/move]：在标签的中间插入文字可以实现文字移动效果，为来回飘动。

[*glow=255,red,2]文字[*/glow]：在标签的中间插入文字可以实现文字发光特效，glow内属性依次为宽度、颜色和边界大小。

[*shadow=255,red,2]文字[*/shadow]：在标签的中间插入文字可以实现文字阴影特效，shadow内属性依次为宽度、颜色和边界大小。

[*color=颜色代码]文字[*/color]：输入您的颜色代码，在标签的中间插入文字可以实现文字颜色改变。

[*size=数字]文字[*/size]：输入您的字体大小，在标签的中间插入文字可以实现文字大小改变。

[*face=字体]文字[*/face]：输入您需要的字体，在标签的中间插入文字可以实现文字字体转换。

[*DIR=500,350]……[*/DIR]：为插入shockwave格式文件，中间的数字为宽度和长度。

[*RM=500,350,1]……[*/RM]：为插入realplayer格式的rm文件，中间的数字为宽度和长度，第三个数字取值为0和1，0表示手动播放，1表示自动播放。

[*MP=500,350,1]……[*/MP]：为插入为midia player格式的文件，中间的数字为宽度和长度，第三个数字取值为0和1，0表示手动播放，1表示自动播放。

[*QT=500,350]……[*/QT]：为插入为Quick time格式的文件，中间的数字为宽度和长度，第三个数字取值为0和1，0表示手动播放，1表示自动播放。

【说明】

1）有少数语法本论坛不一定支持。
2）查看本论坛的UBB语法模式会发现，它的语句模样其实是HTML格式的。

3、 HTML编辑模式：

这是论坛最高级的编辑模式，要求用户有一定的HTML语法知识，能够编写HTML代码。

HTML文件是标准的ASCII文件，它看起来象是加入了许多被称为链接签(tag)的特殊字符串的普遍文本文件。从结构上讲，HTML文件由元素(element)组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，有起始标记和结尾标记。元素的起始标记叫做起始链接签(start tag)，元素结束标记叫做结尾链接签(end tag)，比如我们经常使用的表格就是由<table>和</table>分别作起始标识符，<table>里面还有各种参数和属性设置，<table>和</table>之间还有一些成对出现的诸如<tbody>、<th>、<tr>、<td>等元素。

更多的HTML语法知识请参阅黑马的初学教程或其他网页提供的相关资料。

其实，如果你对HTML语法知识还不太了解的话，你还可以借助一些网页制作软件(如FrontPage、DreamWaver等)在可视化编辑状态下编写帖子，结束后再切换到HTML模式将相应代码复制到论坛上来。你也可以修改别人的代码，作为过渡阶段的学习手段，这是准许的。

最后切记：<table>...</table>之类的用<>包含起来的代码就是HTML代码，它们只有在HTML编辑模式下编辑，你想要的效果才会在发布后得以正确显示。

豹子头林冲

如何认识HTML语法？

第一讲：Hello Table

     用HTML代码能够更灵活地控制贴子的效果，但用HTML编辑表格确实有一定的困难，为此，将由浅入深，循序渐进地向大家介绍如何用HTML制作表格。

如果你是初学者，本贴将是适合你的；如果你掌握一定的HTML语言，阅读本贴也会对你有一些帮助；如果你已经是高手了，那么，请多多指导。

表格以<table>和</table>分别作起始标识符。其中，<table>里有一些必要的参数，为容易理解起见，在这里只介绍本节用到的参数，其他的参数今后将陆续提到。border参数定义表格边框的粗细，记为border=数值，数值取0，1，2，3等整数。width是我们要定义的参数，它规定表格的宽度，数值通常用100%，记作width=100%，值得注意的是，如果不设置width值，表格将根据单元格里的内容自动定义宽度。height参数规范表格的高度，通常可以不设置，而是让内容的多少让系统自行设定。

<table>和</table>之下，还需要由两个成对的标识符号定义表格的行、列，它们分别是<tr>……</tr>，<td>……</td>，tr标识符定义表中的行，td标识符定义数据表元，即每行中的每一列。<td>……</td>要包含在<tr>……</tr>里面。一张完整的表格全部语法如下：

<table border=2 width=80%>
    <tr>
      <td>Hello Table</td>
   </tr>
</table>

效果如下：

Hello Table（天涯管理在线）

豹子头林冲

第二讲：表格的修饰（一）

No.1  表格边框的修饰

     上一讲我们讲到border属性，border即为边框，除了有粗细的数值定义以外，还有其他的属性哦。我们先来看看亮边框的颜色和暗边框的颜色设置。亮边框记作bordercolorlight，暗边框记作bordercolordark。它们的数值可以用red、green、blue等表达，也可以用#11ee00这样的方式来表达，比如：bordercolorlight=red，bordercolorlight=#808000。请看下面的表格：




天涯在线


以上表格的全部代码清单如下：

<table border=6 width=100% bordercolorlight=#008000 bordercolordark=#808000>
  <tr>
   <td width=100%>天涯在线</td>
  </tr>
</table>

上表中，左、上边框是亮边框，右、下边框为暗边框。怎么样？这么一修饰就好看多了吧？

边框颜色方面还有一个属性：bordercolor。当同时设置了暗、亮边框的颜色，bordercolor的颜色设置是多余的，这一点应该注意。现在我们用bordercolor来设置一下表格边框，看看有什么效果：




Hello Table


代码清单：

<table border=10 width=100% bordercolor=#FF0000>
  <tr>
   <td width=100%>Hello Table</td>
  </tr>
</table>

上面我们学习的有关表格边框颜色的设置，下面继续跟落叶学习表格边框其他方面的知识。

内容不多了，还讲两个表格边框的属性：一是边框线（cellpadding）粗细和边框空白处的大小，取值范围从0开始，用正整数。下面是代码和表格效果：

<table border=2 cellpadding=2 cellspacing=8 width=100%>
  <tr>
   <td width=100%>Hello Table 边框线:2 ，边框空白处:8</td>
  </tr>
</table>




Hello Table 边框线:2 ，边框空白处:8

豹子头林冲

第三讲：表格的修饰（二）

No.2表格背景的修饰

默认情况下，HTML网页里表格的背景色是白色的。这显然不总是符合我们的要求，我们通常会设置各种背景颜色，以配合网页或贴子主题。

设置表格的背景色很简单，给其bgcolor属性赋值即可，写作bgcolor=数值，其数值取值方式和上一讲讲到的边框颜色是一致的，比如：bgcolor=black或bgcolor=#000000。bgcolor属性应该放置在表格初始符当中。下面举个实例，先是代码，后是效果：

背景色：bgcolor=#CCCC00 暗边框颜色：#008000 亮边框颜色：#008060

背景色：bgcolor=#CCCC00 暗边框颜色：#008000 亮边框颜色：#008060

[注一：代码中用上了设置字体对齐方式，在

豹子头林冲

第四讲：表格内容的编辑

由于本讲涉及到一些编辑排版、字体修饰等语法，偶先来简单介绍一下这些常用到的语法格式。


：强制换行，效果等价于在Design模式下的组合键 Shift+Enter。

：段落标志。等价于敲一次回车键。

…：字体加粗，与…效果一致。

…：下划线。

…：斜体字。

：对齐方式，值取left，right，center。

下面以一个实例代码和效果来演示如何在表格中编排内容。先来看看效果：

图一 图二 制作于XX

代码如下：

图一 http://www.h4.dion.ne.jp/~herb/kabe-1.gif> 图二 http://www.h4.dion.ne.jp/~herb/kabe-1.gif> 制作于XX

豹子头林冲

第五讲：表格的嵌套（一）

表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。

现从最简单的表格嵌套开始演示和讲解，不会太难的。

两张表格的嵌套：

Table No.1(Father Table) Table No.2(Son Table) Table No.1(Father Table)

代码如下（红色的为第二张表格的代码）：

Table No.1(Father Table) Table No.2(Son Table) Table No.1(Father Table)

从上面的代码中，我们看得出来，第二张表格代码包含在第一张表格代码中的

豹子头林冲

第五讲：表格的嵌套（二）

先来看看以下表格：



你应该可以看得出来，上表中有一个一级表格（父表格），里面有两个二级表格（子表格），二级表格一上一下，位置十分清楚。如果你愿意，你还可以在二级表格里再嵌套次级别的表格。

现在我们来看代码，每一种颜色的文字代码一个表格的完整代码，注意观察起始标识符号的前后关系。





这种方式的嵌套可以让你有更多的创意，比如，上面的二级表格里放置一个背景图并用透明Flash动画来修饰它，下面一个表格里放置滚动图文，总之，发挥你的想象力，充分利用这种格式制作出令人赞叹的效果来！

豹子头林冲

第五讲：表格的嵌套（三）



与上一讲的嵌套效果相比，我们可以明显地看到：上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢？

首先，在父表格里，我们用两次“

豹子头林冲

好好学习 借用借用借用 好好学习 天天向上 好好学习 借用借用借用 好好学习 天天向上