做音乐帖简明教程（为思雨1234制作高手莫入）(页 3) - 音乐天地 - 音画专区 - IT家园 IT998.com,流浪者家园,电脑技术论坛

wzyh 发表于 2007-12-20 21:48

wzyh 发表于 2007-12-20 21:50

wzyh 发表于 2007-12-20 21:52

<P class=tred align=center><FONT color=#ff0000 size=5>一.表格初步</FONT></P>
<P><FONT color=#0033ff size=4>    表格是在论坛做帖的重要武器。这原因是，论坛里提供给用户操作的区域是非常有限的，用户只能在论坛程序框架好的body区域里的某个区域施展身手，不能修改body的背景色，更不能介入head的定义，因此，诸如让自己的帖子有底色、底图之类的修饰，用户只能通过表格来实现。表格是一个可自定义的容器，因而它就是我们用以实现帖子构设的利器。</FONT></P>
<P><FONT color=#0033ff size=4>    把表格称作容器缘于表格的装载特性。表格是用于装载数据的，与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格，知道表格有表头、表体、单元格、行、列等等概念，它们并不难理解。而在HTML里，我们对表格的理解和运用可能会增加一些概念，但并非复杂，在学习本教程的过程中，通过领会和实践，相信是很容易掌握的。</FONT></P>
<P><FONT color=#0033ff size=4>    表格不仅仅只能装载数据，它还被广泛地应用于网页的布局，这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。表格用于网页布局过去非常流行，现在仍然深受欢迎，它在论坛做帖也起到不可估量的作用，帖子的页面布局将因使用了表格而可以随心所欲地排版。</FONT></P>
<P><FONT color=#0033ff size=4>    现在我们来看看表格的基本代码构成。以下是一个完整的表格标签代码框架，为了能够一目了然，各元素尚未引入它们的属性：</FONT></P>
<P class=red><FONT color=#0033ff size=4><FONT color=#ff0000><table><BR></FONT><FONT color=#00ff00>  <tbody></FONT><BR>   <FONT color=#ff00ff> <tr></FONT><BR>       <td><SPAN class=green twffan="done">内容</SPAN></td><BR>   <FONT color=#ff00ff> </tr></FONT><BR>  <FONT color=#00ff00></tbody><BR></FONT><FONT color=#ff0000></table></FONT></FONT></P>
<P><FONT color=#0033ff size=4>    说明：</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done"><table>：</SPAN>表格的起始符。任意一个表格的开始都必须以它开头，且必须有终止符<SPAN class=red twffan="done"></table></SPAN>。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done"><tbody>：</SPAN>表体的起始符。紧跟在<SPAN class=red twffan="done"><table></SPAN>之后，表示表体开始。必须有结尾符，放在<SPAN class=red twffan="done"></table></SPAN>之前。在纯网页中可以不要tbody元素，但在论坛一定要使用，否则，当帖子用到较多的表格时，论坛的自动填充功能将可能会导致代码出错。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done"><tr>：</SPAN>tr的作用是规定表格的行，其中，t是table，r是row（行）。有多少组tr，这张表格就有多少行。<SPAN class=red twffan="done"><tr></SPAN>紧跟在<SPAN class=red twffan="done"><tbody></SPAN>之后。必须有终止符<SPAN class=red twffan="done"></tr></SPAN>。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done"><td>：</SPAN>td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格就有多少列。第一个<td><SPAN twffan="done"></SPAN>紧跟在<SPAN class=red twffan="done"><tr></SPAN>之后。终止符为<SPAN class=red twffan="done"></td></SPAN>。td与tr配合构成单元格。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done"></td>、</tr>、</tbody>、</table>：</SPAN>这些都是相应元素的终止符，表示相应元素所规范的内容结束。必须注意它们的排列顺序，不能有错。</FONT></P>
<P><FONT color=#0033ff size=4>    从表格的代码框架分析得出：表格标签里，所有元素都成对出现，而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大，它占在起始和终结的位置，tbody是老二，tr是老三，td最小，它在最里层。</FONT></P>
<P><FONT color=#0033ff size=4></FONT></P>
<P><FONT color=#0033ff size=4></FONT></P>
<P class=tred align=center><FONT color=#ff0000 size=4>二.表格属性设置</FONT></P>
<P><FONT color=#0033ff size=4>    本节所指的表格属性设置其概念等同于在本论坛"即见即所得"编辑器的表格属性设置，在“即见即所得”模式下，通过点击位于工具栏上的图标<IMG class=Dvbbs_Ico height=16 src="http://www.0086516.com/images/post/table.gif" width=16 twffan="done" unselectable="on">，可以方便地设置表格的属性，只是，它没有通过代码设置来的的灵活多变。</FONT></P>
<P><FONT color=#0033ff size=4>    我们先看看<SPAN class=green twffan="done"><table></SPAN>标签里都有哪些需要设置的属性。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">border：</SPAN>此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">cellspacing：</SPAN>单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing了，如若表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">cellpadding：</SPAN>单元格衬距。指该单元格里的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">width：</SPAN>表格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800×600的显示分辨率下，如果表格设置成1000个像素的宽度，那么，得出的效果将导致IE的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，所以建议在设置表格的宽度时充分考虑显示分辨率问题。<SPAN class=red twffan="done">width</SPAN>的取值还可以使用百分比，如widht="100%"，这种赋值法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">height：</SPAN>表格的高度，取值方法同width。提示：如果不是特别需要，建议不用设置表格的高度，系统会根据表格的内容自动设置高度。所谓特别的需要，是指一些特殊的情形下，需要表格的高度精确，比如，当我们通过表格的背景来发一张图片时，如果表格的高度不精确定义，图片就不可能完整或完美地显示。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">bgcolor：</SPAN>表格的背景色。取值方法举例：bgcolor=#ff0000或bgcolor=red。单元格<td>也可有此属性，如果设置了表格的背景色，又设置表格单元格的背景色，得出的效果将是值得试试的，这种情况主要用于多单元格的表格。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">background：</SPAN>表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突，也建议这么做，这样，当图片不能显示时，表格的外观依然是好看的。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">bordercolor：</SPAN>表格的边框颜色，当border值不为0时设置此值有效。取值同bgcolor。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">bordercolorlight：</SPAN>亮边框颜色，当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">bordercolordark：</SPAN>暗边框颜色，当border值不为0时设置有效。暗边框指表格的右边和下边的边框。</FONT></P>
<P><FONT color=#0033ff size=4>    <SPAN class=red twffan="done">align：</SPAN>表格的对齐方式，值有left（左对齐，默认）、center（居中）以及right（右对齐）。align定义的是表格自身的位置，这是一个很有用的属性，强烈建议使用它来规定表格的对齐方式，尽量不要使用<p align=?>表格</p>、<div align=?>表格</div>和<center>表格</center>之类的标签来规定表格的位置，因为这么做将导致论坛添加许多废码！此外，当表格的宽度设置为100%，或者，表格的宽度设置成了占满它所在的容器的宽度，没有必要定义align属性。</FONT></P>
<P><FONT color=#0033ff size=4>    表格标签的属性较多，使得本节有一定的难度，需要悉心领会并一一记住。</FONT></P>
<P><FONT color=#0033ff size=4>    下面给出一个表格式样和代码，表格中有一些简单的说明。</FONT></P><FONT color=#0033ff size=4>
<P align=center>
<TABLE borderColor=#ff0000 cellSpacing=16 cellPadding=8 width=400 align=center bgColor=#cc9968 border=1>
<TBODY>
<TR>
<TD>
<P align=center><FONT size=4>本表格的属性设置：<BR>边框大小：border=1<BR>边框颜色：bordercolor=#ff0000<BR>背景色：bgcolor=#cc9968<BR>表格宽度：width=400<BR>单元格间距：cellspcing=16<BR>单元格衬距：cellpadding=8<BR>表格的对齐方式（居中）：align=center<BR><BR>注：其他属性未设置。</FONT></P></TD></TR></TBODY></TABLE></P>
<P align=left>
<P>代码：</P>
<P class=red><table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center><BR>  <tbody><BR>    <tr><BR>      <td><SPAN class=green twffan="done">表格里的内容写在这里面</SPAN></td><BR>    </tr><BR>  </tbody><BR></table></P></FONT>
<P><FONT color=#0033ff size=4></FONT></P>
<P class=tred align=center><FONT color=#ff0000 size=5>三.单元格属性设置</FONT></P>
<P><FONT color=#0033ff size=4>    在上一节对表格属性设置的介绍中，我们提到，有一些属于表格的属性单元格也有，比如，背景色、宽度和高度等等。本节我们学习单元格的属性设置，但这回我们采用不那么正规的讲述方法来介绍单元格的属性设置。</FONT></P>
<P><FONT color=#0033ff size=4>    从表格的整体外观上看，单元格是表格的基本构成单元，一张表格至少要有一个单元格。单元格由<SPAN class=green twffan="done"><tr><td></td></tr></SPAN>共同组成，但在一组tr里，可以拥有多组td，我们前面说过，有多少组td该表格就有多少列；同样，一张表格可以拥有多组tr，表格有多少组tr就有多少行。显而易见，构成表格最小单元的td，它的属性设置是不可忽视的。</FONT></P>
<P><FONT color=#0033ff size=4>    单元格的属性设置主要体现在<SPAN class=green twffan="done"><td></SPAN>里，除了我们在上一节学到的bgcolor等之外，还有许多属性需要掌握，令人高兴的是，很多属性的设置方法都是和<table>属性设置一样的，如width、height、bordercolor等。关于width，我们在此着重讨论一下。好的习惯是，如果是一个单元格的表格，假设我们在<table>里设置了其宽度，那么，就不必再设置<td>的宽度了，因为这是多余的，且这么设置：<td width="100%">，显然只是增加了帖子的代码量，它没有任何作用——当有了表格宽度，单元格的宽度会自动占满表格的宽度。但是，在多列表格里，<td>的宽度就应该设置，如若不设置，系统会自动按各单元格里的内容的占位情况自行分配宽度，效果是可想而知的。</FONT></P>
<P><FONT color=#0033ff size=4>    单元格的bordercolor设置有些讲究，主要用于实现单像素的表格边框——要实现这种效果，要求表格的border为1，且<table>里设置了bordercolor颜色值，cellpadding和cellspacing都设置为0，然后将<td>的bordercolor颜色值设置为与<td>的背景色相一致。</FONT></P>
<P><FONT color=#0033ff size=4>    单元格的最为重要的属性应该为align和valign，align规范单元格里的内容的水平对齐方式，valign则规定垂直方向的对齐方式——请特别注意：它们规定的对齐方式是单元格里面的内容，而不象表格里的align那样定义自身的位置！align取值方法和前面介绍的一样，valign的取值方法主要有：left（左对齐）、middle（居中）、top（靠顶）、bottom（靠底）等。</FONT></P>
<P><FONT color=#0033ff size=4></FONT></P>

wzyh 发表于 2007-12-20 21:54

<P><FONT color=#0033ff size=4></FONT></P>
<P class=tred align=center><FONT color=#ff0000 size=5>四.表格组合</FONT></P>
<P><FONT color=#0033ff size=4>    表格组合不是一个轻而易举的技术，所以，我们极少见到论坛各种精美的帖子会用到它，但表格组合技术是一个很有趣的技术，掌握它具有一定的挑战性，所以，如果你觉得不需要，可以跳过这一节。</FONT></P>
<P><FONT color=#0033ff size=4>    表格组合更多的用于布局，当然，也有少数情形需要用到它。本节不想探讨什么时候用到表格组合，只从实现手段方面进行讨论。</FONT></P>
<P><FONT color=#0033ff size=4>    要顺利地实现N张表格的纵向组合，至少有三种方法：一是，令参与排列的表格都居中（即在<table>里加入align=center），上例就是；二是，不定义表格的对齐属性，即<table>里没有align属性，这样给出的N张表格代码，它们都是上下排列的，表格的自身位置全是左对齐（但若定义了align=left，情形不是这样，大家可以用论坛的表格设置功能试试）</FONT></P>
<P><FONT color=#0033ff size=4>    表格的水平排列更需要精确地计算参与排列的表格的宽度，它们的宽度的总和不能超过其所属容器所能装载的宽度，表格和其他元素的混排情形下更应该严格考虑。</FONT></P>
<P><FONT color=#0033ff size=4>    一个好的习惯是，还是用一张表格来规范并列组合的表格，这张表格，最好宽度设置为100%，然后将里面要并列组合的表格通通设置为左对齐（但注意：它们的宽度总和不能超过可显示的宽度）。<BR></FONT></P>
<P><FONT color=#0033ff size=4>    本节从某个角度分析了表格的组合问题，它是一个主要用于排版的技术，要求计算精确，并不十分适用于论坛。只是起个抛砖引玉的作用。</FONT></P>
<P><FONT color=#0033ff size=4></FONT></P>
<P class=tred align=center><FONT color=#f70968 size=5>五.多单元格表格</FONT></P>
<P> <FONT color=#0033ff size=4>   在页面布局方面，比起表格组合，多单元格更能灵活和方便地进行控制，为此，使用多单元格布局帖子是一个不错的习惯。</FONT></P>
<P><FONT color=#0033ff size=4>    我们前面提过，表格代码里，有多少组<tr>...</tr>，表格就有多少行，有多少组<td>...</td>，表格就有多少列。为此，在代码里，我们将根据需要利用表格代码里的<tr><td>...</td></tr>来创建单元格。我们先来制作一个1×3即一行三列的表格。</FONT></P>
<P><FONT color=#0033ff size=4>    代码：</FONT></P>
<P><FONT color=#0033ff size=4><table border=1 cellpadding=0 cellspacing=0 width=450 align=center><BR>  <tbody><BR>    <tr><BR>      <td align=center>单元格一（即列1）</td><BR>      <td align=center>单元格二（即列2）</td><BR>      <td align=center>单元格三（即列3）</td><BR>    </tr><BR>  </tbody><BR></table></FONT></P>
<P><FONT color=#0033ff size=4>    效果：（1×3表格）</FONT></P>
<P align=center>
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1>
<TBODY>
<TR>
<TD align=middle>单元格一（即列1）</TD>
<TD align=middle>单元格二（即列2）</TD>
<TD align=middle>单元格三（即列3）</TD></TR></TBODY></TABLE></P>
<P align=left>
<P align=left><FONT color=#0033ff size=4>   在上述示例里，只有一组<tr>，故而表格只有一行，<tr>...</tr>里有三组td，因此，表格有三列，这就是所谓的1×3表格。现在我们把代码扩展一下，即增加一组tr，请看代码和效果：</FONT></P>
<P><FONT color=#0033ff size=4>    代码：</FONT></P>
<P><FONT color=#0033ff size=4><table border=1 cellpadding=0 cellspacing=0 width=450 align=center><BR>  <tbody><BR>    <tr><BR>      <td align=center>单元格一（即列1）</td><BR>      <td align=center>单元格二（即列2）</td><BR>      <td align=center>单元格三（即列3）</td><BR>    </tr><BR>    <tr><BR>      <td align=center>单元格四（即列4）</td><BR>      <td align=center>单元格五（即列5）</td><BR>      <td align=center>单元格六（即列6）</td><BR>    </tr><BR>  </tbody><BR></table></FONT></P>
<P><FONT color=#0033ff size=4>    效果：（2×3表格）</FONT></P><FONT color=#0033ff size=4>
<P align=center>
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1>
<TBODY>
<TR>
<TD align=middle>单元格一（即列1）</TD>
<TD align=middle>单元格二（即列2）</TD>
<TD align=middle>单元格三（即列3）</TD></TR>
<TR>
<TD align=middle>单元格四（即列4）</TD>
<TD align=middle>单元格五（即列5）</TD>
<TD align=middle>单元格六（即列6）</TD></TR></TBODY></TABLE></P>
<P align=center>
<P align=left>我们可以定义<td>里的宽度和高度值，从而让表格以我们的预设在其所在区域进行布局，以便达到有效的排版目的。在多行多列的表格里，当某一列的第一个单元格已经定义了宽度，那么，往下各单元格的宽度将跟它一致，如果同一列的所有单元格都设置了宽度，该列的最终宽度以width值最大的那个单元格为标准，——可见，我们只需设置某列的第一个单元格的宽度即可，其他同列的<td>不必给出width属性，这样一可以节省代码,二不会出现无效设置；表格的行的高度情形也是一样：当定义了某一行头一个单元格的高度之后，该行其他单元格会自动得到相同的高度值，不必再一一设置<td>的height属性。尽量减少代码量总是一个好习惯，一来可以节省空间，二来打开速度也会得到改善——代码越多，系统处理代码的时间就越长，同时也更耗可贵的系统资源。</P>
<P>    我们还应该注意的是，如果不设置<td>的width和height属性，表格各单元格将根据里面的内容的占位情况拓宽自己，表格给各单元格的宽度分配将由系统自动进行，这样就容易出现不合理的情况，因此，应该根据需要设置单元格的高度和宽度。</P>
<P>    多单元格表格里一个有趣的问题是单元格合并，其概念与Excel的合并单元格是一致的，只是实现方法不同。在HTML代码里，我们用colspan属性合并左右单元格，记作：colspan=数值，“数值”即为需要合并的单元格总数；而rowspan属性则合并上下单元格，记作：rowspan=数值。</P>
<P>    让我们用上面的第二组示例表格来加工一下。先看合并左右的单元格——</P>
<P>    代码：</P>
<P><table border=1 cellpadding=0 cellspacing=0 width=450 align=center><BR>  <tbody><BR>    <tr><BR>      <td align=center colspan=2>1，2单元格合并了</td><BR>      <td align=center>3</td> <BR>    </tr><BR>    <tr><BR>      <td align=center>4</td><BR>      <td align=center>5</td><BR>      <td align=center>6</td><BR>    </tr><BR>  </tbody><BR></table></P>
<P>    效果：</P>
<P align=center>
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1>
<TBODY>
<TR>
<TD align=middle colSpan=2>1，2单元格合并了</TD>
<TD align=middle>3</TD></TR>
<TR>
<TD align=middle>4</TD>
<TD align=middle>5</TD>
<TD align=middle>6</TD></TR></TBODY></TABLE></P>
<P align=left>下面是表格的上下单元格合并——</P>
<P>    代码：</P>
<P><table border=1 cellpadding=0 cellspacing=0 width=450 align=center><BR>  <tbody><BR>    <tr><BR>      <td align=center rowspan=2>1,4单元格合并了</td><BR>      <td align=center>2</td><BR>      <td align=center>3</td><BR>    </tr><BR>    <tr><BR>      <td align=center>5</td><BR>      <td align=center>6</td><BR>    </tr><BR>  </tbody><BR></table></P>
<P>    效果：</P>
<P align=center>
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1>
<TBODY>
<TR>
<TD align=middle rowSpan=2>1,4单元格合并了</TD>
<TD align=middle>2</TD>
<TD align=middle>3</TD></TR>
<TR>
<TD align=middle>5</TD>
<TD align=middle>6</TD></TR></TBODY></TABLE></P></FONT>
<P><FONT color=#0033ff size=4>通过HTML代码实现单元格的合并略显抽象一些，你可以研究本示例代码和第二组代码（2×3表格）的区别并比较两组表格的样式来慢慢领会，要完全掌握这一技术，你还需要亲自做些尝试。最后顺便提一下：有些论坛可能不支持表格单元格的合并。</FONT></P>
<P><FONT color=#0033ff size=4></FONT></P>
<P class=tred align=center><FONT color=#ff0000 size=5>六.表格嵌套</FONT></P>
<P><FONT color=#0033ff size=4>    论坛所有精美的帖子，几乎无一例外地都用到表格的嵌套技术，其中的原因，如前所述，论坛中给用户提供施展身手的余地十分有限，只有通过表格的修饰，帖子才能既成为独立的显示单位，又达到如纯完整的Web页一样有着自己的装饰。表格的可分割性和容器特征在帖子制作中充当着重要的角色，兼管帖子的布局的同时还承载着表达帖子信息元素的重任。</FONT></P>
<P><FONT color=#0033ff size=4>    作为容器，表格可以往里放置可以放置的元素。表格也是一个元素，故而表格放在表格里是合理的，因此就有了表格的嵌套。表格的嵌套还可以是另外的形式，那就是，一个表格的单元格里还有表格。不论是哪种形式的嵌套，理论上嵌套的层可以是无穷尽的，但现实中并不会这么做，我们总是根据需要有限制地使用嵌套，不会没完没了。</FONT></P>
<P><FONT color=#0033ff size=4>    表格嵌套其实也不复杂。如果你能够独立用代码做一张表格（强烈建议练出这样的本事），那么，你就可以做一个两张表格的嵌套，很简单，把代码复制一下，粘贴在原代码的<td>和</td>之间（亦即在“和”的位置）。试看以下代码和两个表格的嵌套效<FONT color=#0033ff>果</FONT>：</FONT></P>
<P><FONT color=#0033ff size=4><FONT color=#ff0000><table</FONT> border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center><FONT color=#ff00ff><tbody></FONT><BR><FONT color=#669900> <tr><BR>   <td></FONT>表一<BR>   </FONT><FONT size=4><FONT color=#0033ff><SPAN class=green twffan="done"> <FONT color=#ff00ff> <table</FONT> border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center><FONT color=#000000><tbody><BR></FONT>      <tr><BR>        <td>表二</td><BR>      </tr><BR>   <FONT color=#660000> </tbody></FONT><FONT color=#ff00ff></table></FONT></SPAN><BR><FONT color=#669900> </td><BR> </tr><BR></FONT><FONT color=#ff00ff></tbody></FONT></FONT><FONT color=#ff0000></table></FONT></FONT></P><FONT color=#ff0000 size=4>
<P align=center>
<TABLE height=200 cellSpacing=0 cellPadding=0 width=450 align=center border=1>
<TBODY>
<TR>
<TD>表一
<TABLE height=200 cellSpacing=0 cellPadding=0 width=450 align=center border=1>
<TBODY>
<TR>
<TD>表二</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>
<P align=left><FONT color=#0033ff>  从上面的表格效果上看，如果我们把文字“表一”删除掉，表格的嵌套将是非常完好的。如果再定义边框大小和颜色、cellpadding和cellspaing为其他值，加上背景色和背景图，或通过其他手段来修饰，那么，里表和外表之间，就会出现非常漂亮的边框，帖子的外框就这么搞掂了。当然，这是一个细活，你需要做反复的尝试，直到效果满意为止。或许你还需要更多层的嵌套，这就看你的想象力了——实现手段是不难的，因为你已经会了第一层的嵌套，第二层、第三层……第N层，无非就是如此。</FONT></P>
<P><FONT color=#0033ff>    现在我们来看看多单元格表格中，在单元格是嵌入表格的示例。先看代码：</FONT></P>
<P><FONT color=#0033ff><table border=1 cellpadding=0 cellspacing=0 width=450 align=center><tbody><BR> <tr><BR>  <td class=red>单元格一：无表格嵌套</td><BR>  <td><BR>   </FONT><FONT color=#0033ff><SPAN class=green twffan="done"><table border=1 bgcolor=#ccc1cc width="100%"><tbody><BR>    <tr><td class=red>我嵌套在单元格二里</td><BR>   </tr></tbody></table></SPAN><BR>  </td><BR> </tr><BR></tbody></table></FONT></P>
<P><FONT color=#0033ff>    以下是效果：</FONT></P><FONT color=#0033ff>
<P align=center>
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1>
<TBODY>
<TR>
<TD class=red>单元格一：无表格嵌套</TD>
<TD>
<TABLE width="100%" bgColor=#ccc1cc border=1>
<TBODY>
<TR>
<TD class=red>我嵌套在单元格二里</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>
<P>    上面的两个例子里，都将处于外层的表格（即外表）的宽度设置为450个像素，这是由于本页面的限制。在实际制作中，我们可以充分考虑未来浏览者的显示器的分辨率和论坛提供的可显示宽度来决定取值。好的习惯仍然是取绝对值，因为，你的帖子里边的内容宽度非常可能是绝对的，譬如图片有着自己固定的宽度， Flash影片也是使用绝对的width值，为了不让正文四周出现太多的空余，采用绝对值规范外表的宽度是有必要的。当然，还有一个好的做法，那就是，根本不用规定外表的宽度，而是让里边的内容自行撑宽外表，这么做至少要求我们注意两个方法的问题：一是，利用cellpadding或border的合理值来让外表的边缘显示外表的既设背景，二是，外表里面的诸元素的宽度要相对统一。任何一种实现方式都还有其自身的奥妙，不是用语言能够一一道明的，只有在不断地实践中才能逐一领悟和掌握。</P>
<P>    当今用户的的显示器分辨率有两大标准：800×600和1024×768，这两种分辨率下，用户发帖后帖子可显示的区域宽度是有区别的。为此，你需要通过尝试获知具体宽度，从而制作出的帖子不至于出现浏览者不能完整欣赏的现象。过宽的帖子，比如超过510个像素的宽度，分辨率设置为800×600的浏览者将看不到帖子右边的内容，而太小的宽度，又可能令帖子显得小里小气，也不理想。</P>
<P>
<P class=tred align=center><FONT color=#ff0066>深入学习表格</FONT></P>
<P>    表格还有一些重要的内容需要彻底弄懂。实际上，这些内容，前面几节我们已经接触过，但我们还需要进一步去探讨一下。</P>
<P>    我们先来做个实验。</P>
<P>    下面给出一条长度为450个像素的分隔线，然后在分隔线下面放置一张表格，其宽度亦为450个像素：</P>
<P>
<HR align=center width=450 color=#dd2525 SIZE=2>

<P>
<P align=center>
<TABLE borderColor=#353535 cellSpacing=8 cellPadding=15 width=450 align=center bgColor=#998877 border=1>
<TBODY>
<TR>
<TD class=main>border=1<BR>cesllpadding=15<BR>cellspacing=8<BR>width=450</TD></TR></TBODY></TABLE></P>
<P align=center>   现在，我们看到，表格的总宽度仍然是450个像素（它没有超越分隔线），因此，我们可以得出这样的结论：表格的border、cellpadding和cellspacing虽然都是占位元素，但它们不会使得表格变得更宽，换一个更生动的说法，表格的这些元素是往里占位的，而不是往外占位。</P>
<P>    第二个实验：设定表格的宽度为400个像素，然后在里面放置一个可视元素，令其宽度为450，看看表格的总宽度发生了什么。我们依然用一条长度为450个像素的分隔分做参照。</P>
<P align=center>
<TABLE cellPadding=10 width=400 align=center bgColor=#77b577 border=0>
<TBODY>
<TR>
<TD class=white>
<HR width=450>

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

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

wzyh 发表于 2007-12-20 21:55

<STRONG><FONT face=黑体 color=#ff00ff size=7>框(表格)的制作</FONT></STRONG><FONT size=2> <BR><BR><BR>表格的主要功能是做各种列表,我在这章里只谈与做音画帖有关的内容.<BR>主要讲边框做法,背景图处理方法和内容的排列要点. <BR><BR><B><FONT color=orange>一.表格的基本语法</FONT>.</B> <BR><BR>先看一个最简单的表格:<BR><BR></FONT>
<TABLE borderColor=#6b8e23 height=350 cellSpacing=10 cellPadding=10 width=450 align=center bgColor=#55632f border=18 valign="middle">
<TBODY>
<TR>
<TD>文字和图片</TD></TR></TBODY></TABLE><BR><BR>代码为: <BR><table width="450" height="350" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#55632F" bordercolor=#6b8e23><tr><td>文字和图片</td></tr></table> <BR><BR>代码里的:<BR><table.........><tr><td>文字和图片</td></tr></table> <BR>就组成表格的基本语法:开始标签,内容,结束标签.<BR><BR>这三个标记<table><tr><td>是定义表格的最重要的标记，可以说只学这三个己足够了.<BR><BR>先看懂这个代码:<BR>table <BR>这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里,<BR>tr <BR>描述列的元素.<BR>td <BR>描述格的元素.<BR>列就是从上到下的行,格就是每行里的格(大概意思)这些知道就行了,不在学习范围内. <BR><BR>它的属性常用的有:<BR>width= <BR>表格宽度，接受绝对值（如180）及相对值（如 80%,相对可显示的宽度）<BR>height=<BR>表格高度，接受绝对值（如 180）<BR>border= <BR>表格框的厚度.<BR>cellspacing= <BR>表格格线离边框距离<BR>cellpadding=<BR>文字图片离格线的距离.<BR>align= <BR>表格的摆放位置（水平），可选值为： left, right,center(左，右，中心)<BR>valign= <BR>表格内字画等的摆放贴位置（垂直）可选值为： top, middle, bottom。(顶，中间，底部 ) <BR>background=<BR>表格的背景图，与 bgcolor 不要同用。<BR>bgcolor=<BR>表格背景颜色，与background 不要同用.<BR>bordercolor=<BR>表格边框颜色.<BR>bordercolorlight= <BR>表格边框向光部分的颜色.<BR>bordercolordark= <BR>表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效)<BR><BR>

wzyh 发表于 2007-12-20 22:14

<FONT size=2><STRONG><FONT color=#ffa500>二.边框的制作</FONT>.</STRONG> <BR><BR></FONT><FONT size=3>1.颜色框:</FONT><FONT size=2> <BR><BR>简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height 就会显示一个你所指定的颜色框.据此写一个代码:<BR><BR><table bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和图片</td></tr></table><BR><BR>显示效果为:<BR><BR></FONT>
<TABLE borderColor=#00ff00 height=250 cellSpacing=0 width=360 border=8>
<TBODY>
<TR>
<TD>文字和图片</TD></TR></TBODY></TABLE><BR><BR>这里多写了一个格线属性cellspacing=0,格线就是那根细线(打表格用的)不写格线属性浏览器就默认为1.我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的.<BR><BR>下面讲几个有关框的常识问题. <BR><BR><FONT color=red>居中:</FONT>将位置属性<FONT color=red>align=center</FONT>放到开始标签里,这个框就居中了: <BR><BR><table<FONT color=red> align=center</FONT> bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和图片</td></tr></table><BR><BR>显示效果为:<BR><BR>
<TABLE borderColor=#00ff00 height=250 cellSpacing=0 width=360 align=center border=8>
<TBODY>
<TR>
<TD>文字和图片</TD></TR></TBODY></TABLE><BR><BR><FONT color=red>定好尺寸的框仍会被撑大:</FONT>框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.例如还是上面那个尺寸的框,放进一张大的图片: <BR><BR><table align=center bordercolor=#00FF00 border=8<FONT color=red> width=360  height=250 </FONT> cellspacing=0><tr><td><BR><img src=<FONT color=#ff0000><FONT color=#ff0000><FONT color=blue>http://img.tomgame.com/news/1000009053/2005109155734143.jpg</FONT>  </FONT></FONT><FONT color=red>width=500</FONT>><BR></td></tr></table><BR><BR>显示效果为:<BR><BR>
<TABLE borderColor=#00ff00 height=250 cellSpacing=0 width=360 align=center border=8>
<TBODY>
<TR>
<TD><IMG src="http://img.tomgame.com/news/1000009053/2005109155734143.jpg" width=500 twffan="done"></TD></TR></TBODY></TABLE><BR><BR>这个原理要注意两点:<BR>a.有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大. <BR>b.因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.(所以,上面代码里不写<FONT color=yellow><FONT color=red>width=360 </FONT> </FONT><FONT color=red>height=250</FONT>效果是一样的) <BR><BR>

wzyh 发表于 2007-12-20 23:12

2.素材框:<FONT size=2> <BR><BR>利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果.<BR>边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里.<BR>要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大,<BR>在<A href="http://www.3lian.com/gif/more/03/0301.html"><FONT color=#800080>http://www.3lian.com/gif/more/03/0301.html</FONT></A><FONT size=2>选了几款: </FONT>
<P><FONT size=2><IMG src="http://img4.3lian.com/sucai2/bj/123.gif" border=0></FONT></P>
<P><FONT size=2><IMG src="http://img4.3lian.com/sucai2/bj/115.gif" border=0></FONT></P>
<P><FONT size=2><IMG src="http://img4.3lian.com/sucai2/bj/110.gif" border=0></FONT></P>
<P><FONT size=2><IMG src="http://img4.3lian.com/sucai2/bj/124.gif" border=0><BR></FONT></P>
<P><FONT size=2>用第一张做背景图:<BR><table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://img4.3lian.com/sucai2/bj/123.gif"><tr><td>图与文字</td></tr></table> <BR></P></FONT></FONT>用第一张做背景图:
<TABLE cellSpacing=10 cellPadding=0 width="90%" align=center background=http://img4.3lian.com/sucai2/bj/123.gif border=0>
<TBODY>
<TR>
<TD>图与文字</TD></TR></TBODY></TABLE>
<P> </P>
<P>说明:<BR>代码中设了格线cellspacing="10",这在下一张背景图放进去后才能看到,<BR>表格宽用了相对值90%,相对可显页面的90%. <BR><BR>下面把第二张做背景图,将格线设为5,width="100%". <BR><FONT color=blue><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://img4.3lian.com/sucai2/bj/115.gif"><tr><td>图与文字</td></tr></table> <BR><BR></FONT>将它放到前一张里: <BR><BR><table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"><tr><td> </P>
<P><FONT color=yellow><FONT color=blue><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://img4.3lian.com/sucai2/bj/115.gif"><tr><td>图与文字</td></tr></table> <BR></FONT></FONT><FONT color=yellow> </FONT></td></tr></table> <BR></P>
<TABLE cellSpacing=10 cellPadding=0 width="90%" align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/115.gif border=0>
<TBODY>
<TR>
<TD>图与文字</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>同理再将第三张放进去(格线为2): <BR>
<TABLE cellSpacing=10 cellPadding=0 width="90%" align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/115.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=2 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/110.gif border=0>
<TBODY>
<TR>
<TD>图与文字</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>再将第四张放进去(格线为6): <BR>
<TABLE cellSpacing=10 cellPadding=0 width="90%" align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/115.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=2 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/110.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=6 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/124.gif border=0>
<TBODY>
<TR>
<TD>图与文字</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P> </P>
<P>放一张图片进去看看效果: <BR></P>
<P> </P>
<TABLE cellSpacing=10 cellPadding=0 width="90%" align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/115.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=2 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/110.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=6 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/124.gif border=0>
<TBODY>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle><A href="http://www.ttmn.com/Product/cppic.asp?CurPage=3196" target=_top><IMG src="http://www.ttmn.com/main/UploadFiles/u03/20051226982063534.jpg" align=top border=0></A><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

[[i] 本帖最后由 wzyh 于 2007-12-20 23:15 编辑 [/i]]

wzyh 发表于 2007-12-20 23:18

<TABLE id=table1 style="LEFT: -220px; WIDTH: 1000px; POSITION: relative; TOP: 40px" cellSpacing=10 cellPadding=0 width="90%" align=center background=http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/115.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=2 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/110.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=6 cellPadding=0 width="100%" align=center background=http://img4.3lian.com/sucai2/bj/124.gif border=0>
<TBODY>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle><A href="http://www.ttmn.com/Product/cppic.asp?CurPage=3196" target=_top><IMG src="http://www.ttmn.com/main/UploadFiles/u03/20051226982063534.jpg" align=top border=0></A><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<P> </P>
<P>代码: <BR><BR><table align="center" border="0" cellpadding="0" cellspacing="10" background="http://img4.3lian.com/sucai2/bj/123.gif"><tr><td><FONT color=yellow><FONT color=magenta><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://img4.3lian.com/sucai2/bj/115.gif"><tr><td></FONT> <FONT color=#d65c5d><table align="center" border="0" cellpadding="0" cellspacing="2" width="100%" background="http://img4.3lian.com/sucai2/bj/110.gif"><tr><td> <FONT color=#00ff00><table align="center" border="0" cellpadding="0" cellspacing="6" width="100%" background="http://img4.3lian.com/sucai2/bj/124.gif"><tr><td> <FONT color=beige><img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=460></FONT></FONT></FONT></FONT></P>
<P><FONT color=yellow><FONT color=#d65c5d><FONT color=#00ff00> </td></tr></table> </FONT></td></tr></table> </FONT><FONT color=magenta></td></tr></table></FONT> </FONT></td></tr></table> <BR><BR>注:对应的颜色就是表格对应的开始标签和收尾标签. <BR></P>
<P> </P>

[[i] 本帖最后由 wzyh 于 2007-12-20 23:27 编辑 [/i]]

wzyh 发表于 2007-12-20 23:38

<P><STRONG><FONT color=#ffa500>三.背景图的特点及处理方法</FONT>.</STRONG> <BR><BR>这里讲的背景图是指最后一层显示的,在它上面可以放文字,图片,FLASH等等. <BR><BR>用表格做的背景图,它的显示特点是:<BR>当表格尺寸大于背景图原始尺寸时,会复制背景图.<BR>当表格尺寸小于背景图原始尺寸时,只显示背景图左上一部分.<BR>为了看清楚效果,选一张人物图片做背景图:<BR><A href="http://msn.list.taobao.com/browse/2201/t-2-false---------------g,giydanbqhi3danjyha--g,giydanbqhldkjnx3--------2048------------y-40-grid-coefp-160-all-2201.htm" target=_top><IMG src="http://img03.taobao.com/bao/uploaded/i3/20070506/2f1/T1Q.dXXduqNdz1upjX.jpg_m.jpg" align=top border=0></A><BR> (原始尺寸为<FONT color=red>120X120</FONT>) </P>
<P>注:找图片原始尺寸的方法:鼠标右键点图片,出现菜单,左键点[属性]就看到了. <BR><BR>将它做背景图以后的效果: <BR></P>
<TABLE height=230 cellSpacing=0 cellPadding=0 width=390 background=http://img03.taobao.com/bao/uploaded/i3/20070506/2f1/T1Q.dXXduqNdz1upjX.jpg_m.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<P> </P>
<P>代码：</P>
<P><TABLE height=230 cellSpacing=0 cellPadding=0 width=390 background=http://img03.taobao.com/bao/uploaded/i3/20070506/2f1/T1Q.dXXduqNdz1upjX.jpg_m.jpg border=0><BR><TBODY><BR><TR><BR><TD></TD></TR></TBODY></TABLE></P>
<P> </P>
<P> </P>
<TABLE height=90 cellSpacing=0 cellPadding=0 width=90 background=http://img03.taobao.com/bao/uploaded/i3/20070506/2f1/T1Q.dXXduqNdz1upjX.jpg_m.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<P> </P>
<P>代码：</P>
<P><table border="0" cellpadding="0" cellspacing="0" width="90" height="90" background="<A href='http://img03.taobao.com/bao/uploaded/i3/20070506/2f1/T1Q.dXXduqNdz1upjX.jpg_m.jpg"><tr><td></td></tr></table'>http://img03.taobao.com/bao/uploaded/i3/20070506/2f1/T1Q.dXXduqNdz1upjX.jpg_m.jpg"><tr><td></td></tr></table</A>> <BR></P>

wzyh 发表于 2007-12-20 23:41

<P><FONT size=2>处理背景图的方法: <BR><BR>1.选择花纹素材,如: </FONT></P>
<P><IMG src="http://img3.3lian.com/2006/015/08/335.jpg"><BR></P>
<TABLE class=center_tdbgall borderColor=#999999 cellSpacing=0 cellPadding=0 width=980 align=center border=0>
<TBODY>
<TR>
<TD height=16></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD vAlign=center align=middle colSpan=3 height=99>
<SCRIPT src="http://pstatic.xunlei.com/js/webThunderDetect.js"></SCRIPT>

<SCRIPT src="http://www.3lian.com/js/base64.js"></SCRIPT>

<SCRIPT>
url=location.search.substring(8,location.search.length);
//url=url.replace(/3lian.com/, "3lian.com:8880")
//document.write('<img src="../ziti/zt1/down.gif" width="18" height="13">  <a href="'+url+'" thunderHref="' + ThunderEncode(url) + '" thunderPid="06132" thunderType="" thunderResTitle="图片下载" onClick="return OnDownloadClick_Simple(this)" oncontextmenu="ThunderNetwork_SetHref(this)" class=apx14><b>迅雷专用高速下载此图片</b></a><br><br>');
document.write("<a href="+url+" target=_blank><IMG border=0 src="+url+"></a><br>");
document.write('<br><img src="../ziti/zt1/down.gif" width="18" height="13">  <a href="'+url+'" thunderHref="' + ThunderEncode(url) + '" thunderPid="06132" thunderType="" thunderResTitle="'+url+'" onClick="return OnDownloadClick_Simple(this)" oncontextmenu="ThunderNetwork_SetHref(this)" class=apx14><b>迅雷专用高速下载此图片</b></a><br>');

</SCRIPT>
</TD></TR></TBODY></TABLE><FONT size=2>做背景后效果: </FONT><BR>
<TABLE height=230 cellSpacing=0 cellPadding=0 width=390 background=http://img3.3lian.com/2006/015/08/335.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<P> </P>
<P>这样的图做背景被复制后不会变样. <BR>素材库里这种类型的素材是很多的. <BR><BR>2.有时我们看到很漂亮的图片,想完整显示做背景,怎么处理呢? <BR><BR>根据背景图的特点,唯一的办法就是将将表格的尺寸设置得和图片的原始尺寸一致.<BR>而且放进去内容的大小必须小于他,以免撑大. <BR><BR>如果图片的原始尺寸不满意,也只能改变它的原始尺寸.方法如下: </P>
<P><IMG src="http://834243.jingdian.kooxoo.com/pic/558/2f656f0fc7f6f7fd03ecb52d14046e2a/1.jpg"></P>
<P> </P>
<P>这张图的原始尺寸是 800X600 ,要把它改小. </P>
<P>先下载到自己电脑的图片收藏夹里, <BR>找到画图软件(每个电脑都有)把这个图片打开,点上面的[图像(I)],点[拉伸/扭曲],出现如下对话框,将水平和垂直按同样比例扩大或缩小,点确定就可以了. <BR>结果满意后,再点[文件],点[另存为],写上文件名点[保存]就完成了.注意图片格式为:jpg或gif. <BR>下面是按55%缩小后的大小(<FONT color=red>440X330</FONT>): <BR><BR></P>
<P><IMG src="http://up1.googletounion.com/data/aa/71/97/7/a/07/51/20071221_41d077f4e1f6cb5000ebU70GpQyaXKUl.jpg"></P>
<P> </P>
<P>用它做背景图,放一张图和几个字上去，表格也设为:<FONT color=#000000>（</FONT> <FONT color=red>width=440 height=330</FONT>) <BR></P>
<P> </P>
<P> </P>
<TABLE borderColor=#00ff00 height=330 cellSpacing=6 width=440 align=center background=http://up1.googletounion.com/data/aa/71/97/7/a/07/51/20071221_41d077f4e1f6cb5000ebU70GpQyaXKUl.jpg border=9>
<TBODY>
<TR>
<TD>
<P align=center><IMG src="http://club.lywww.com/attachments/day_070809/16O4ow==_hGCrnDOdE1yx.jpg" width=160> ></P><BR><BR><BR><BR>
<P align=center><FONT style="FONT-SIZE: 20pt" color=#b22222><B><PRE>  <FONT color=red> 祝:
思雨1234万事如意吉祥幸福</FONT></PRE></B></FONT></TD></TR></TBODY></TABLE>
<P> </P>
<P>代码 <BR><TABLE borderColor=#00ff00 height=330 cellSpacing=6 width=440 align=center background=http://up1.googletounion.com/data/aa/71/97/7/a/07/51/20071221_41d077f4e1f6cb5000ebU70GpQyaXKUl.jpg border=9><BR><TBODY><BR><TR><BR><TD><BR><P align=center> </P><BR><P align=center><IMG src="<A href="http://club.lywww.com/attachments/day_070809/16O4ow==_hGCrnDOdE1yx.jpg">http://club.lywww.com/attachments/day_070809/16O4ow==_hGCrnDOdE1yx.jpg</A>" width=160> ></P><BR><BR><BR><BR><BR><P align=center><FONT style="FONT-SIZE: 20pt" color=#b22222><B><PRE>  <FONT color=red> 祝:<BR> 思雨1234万事如意吉祥幸福</FONT></PRE></B></FONT></TD></TR></TBODY></TABLE></P>

[[i] 本帖最后由 wzyh 于 2007-12-21 00:28 编辑 [/i]]

wzyh 发表于 2007-12-21 00:30

<FONT size=2><FONT color=#ffa500>四.图和文字放进框里的方法及注意点:</FONT> <BR><BR><table ......><tr><td>内容</td></tr></table> <BR>将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里. <BR>代码安放的一些注意点: <BR><BR>1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高. <BR>凡是要空行的地方可用换行标签<br>来设定,不够可以多加几个<br>,到满意为止, <BR>也可用分段标签<p>......</P>,不够再加<br>, <BR><BR>2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边. <BR>再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点. <BR>图片宽度好设定,文字一般也用<br>分行的方法来限定它的宽度 <BR><BR>3.内容居中:将位置属性<FONT color=lime>align=center</FONT>放到最后一层表格的<td>标签里,框里的内容就会都居中了: <BR><table ......><tr><td<FONT color=lime> align=center</FONT>>内容</td></tr></table> <BR><BR><BR><FONT color=orange>五.做表格最容易犯的错误</FONT> <BR><BR><table ......><tr><td>内容</td></tr></table> <BR><BR>音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾</td></tr></table>,使得整个帖变形. <BR>所以,做了几个表格,就必须有几组收尾标签,多一个少一个都不行. </FONT><BR><BR><BR>

[[i] 本帖最后由 wzyh 于 2007-12-21 00:31 编辑 [/i]]

wzyh 发表于 2007-12-21 00:33

<P align=center><FONT color=red size=5><STRONG>用工具做代码贴</STRONG></FONT></P>
<P align=center><STRONG><FONT color=#ff0000 size=4>用一个实例讲一下利用FrontPage做贴的过程</FONT></STRONG></P>
<P> </P>
<P><FONT color=#ff0000 size=4><STRONG>实例:</STRONG></FONT></P>
<P><STRONG><FONT color=#ff0000 size=4></FONT></STRONG> </P>
<DIV align=center twffan="done">
<TABLE id=table1 borderColor=#33cccc cellSpacing=1 width=600 bgColor=#ffffff border=3>
<TBODY>
<TR>
<TD>
<DIV align=center twffan="done">　
<P><FONT face=华文行楷 color=#33cccc size=7><IMG height=48 src="http://bbs.366tian.net/attachments/day_050628/flower34_lW561Fz9BKBI.gif" width=46 border=0 twffan="done"> 一生的守侯 <IMG height=48 src="http://bbs.366tian.net/attachments/day_050628/flower34_lW561Fz9BKBI.gif" width=46 border=0 twffan="done"></FONT></P>
<TABLE id=table2 borderColor=#33cccc height=313 cellSpacing=1 width=450 bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD><IMG height=338 src="http://bbs.366tian.net/attachments/day_050628/newtin.20050626070758_QilbhhVQFC1W.jpg" width=450 border=0 twffan="done"></TD></TR></TBODY></TABLE>
<P><FONT face=华文行楷 color=#33cccc size=4>盼着天快黑　在梦里和你相对<BR>没有那流言　没有那是非<BR>爱变得纯粹<BR><BR>你吻着我的嘴　眼里留下的泪<BR>滋润了玫瑰　爱的花蕊<BR>咸的爱情不会虚伪<BR><BR>等到天亮后　梦破碎<BR>难把你找回<BR>恨自己为何不能爱你到绝对<BR><BR>好想陪你到白头　一生和你永相守<BR>害怕梦醒后　你飞走<BR>不明白相爱的人还是要分手<BR><BR>好想厮守到白头　永远相偎不分手<BR>今生来世放弃所有<BR>不愿错过爱的人　一生守候</FONT></P>
<DIV align=center twffan="done">
<TABLE id=table3 borderColor=#33cccc cellSpacing=1 width=400 bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD rowSpan=2>　<EMBED src=http://www.ts49z.com/grzy/zl/wodeyinyue/陈淑桦-一生守侯.MP3 width=191 height=30 type=audio/x-pn-realaudio-plugin controls="ControlPanel" autostart="1"></TD>
<TD>　<FONT face=华文行楷 color=#33cccc size=3>下载</FONT></A> </TD></TR>
<TR>
<TD><FONT face=华文行楷 color=#33cccc size=3>编辑:</FONT></TD></TR></TBODY></TABLE></DIV>
<P>　</P></DIV></TD></TR></TBODY></TABLE></DIV>
<P><BR> </P>
<P><FONT color=#008000>一、打开FrontPage ，选择设计模式，如图1<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap1_yCXi4XbXtpaR.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap1_yCXi4XbXtpaR.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><BR>二、表格——插入——表格，出现下图对话框，修改大小，布局等，如图2，点确定，出现图3模式<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap2_BhMRnGAKKLlf.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap2_BhMRnGAKKLlf.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap3_tY4v62D6Ci7G.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap3_tY4v62D6Ci7G.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><BR>三、重复第2步，再插入个表格，如图4设置（注意指定高度和宽度为即将插入图片的高与宽），点确定后出现两表格如图5<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap4_vdFLDoBXdhNp.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap4_vdFLDoBXdhNp.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap5_Wy1cLh9b1Mqr.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap5_Wy1cLh9b1Mqr.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><BR>四、光标位于小表格中，插入——图片——来自文件（选择你要放入的图片），如图6<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap6_P8f3ENZQ6X4q.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap6_P8f3ENZQ6X4q.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><BR>五、光标位于大表格中，上下添加文字，字体，字号，字色的更改如图7，添加完毕如图8<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap7_SotPSUq8NupC.jpg');}" alt="Click here to open new window
CTRL+Mouse wheel to zoom in/out" src="http://bbs.366tian.net/attachments/day_050628/Snap7_SotPSUq8NupC.jpg" width=716 onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done" resized="true"> <BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap8_oawuvKDvKx3K.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap8_oawuvKDvKx3K.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><BR>六、光标位于文字下，表格——插入——表格（设置如图9，关键是1行2列），点确定，出现图10式样<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap9_h5GtT5vSMnwG.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap9_h5GtT5vSMnwG.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap10_HN4prdWhlh1S.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap10_HN4prdWhlh1S.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><BR>七、右键点击右边的那列——插入单元格，设置如图11，点确定出现图12<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap11_yUNKpDGhQKcN.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap11_yUNKpDGhQKcN.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap12_JbYax2zJlKAg.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap12_JbYax2zJlKAg.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><BR>八、光标位于左边那列，点击最下端的代码，如图13，这时出现大片代码，别急，在这片代码中找到光标的位置，直接插入<*EMBED src= </FONT><A href="http://www.ts49z.com/grzy/zl/wodeyinyue/" target=_blank><FONT color=#0000ff size=3>http://www.ts49z.com/grzy/zl/wodeyinyue/</FONT></A><FONT color=#008000 size=3>陈淑桦-一生守侯.MP3 width=191 height=30 type=audio/x-pn-realaudio-plugin controls="ControlPanel" autostart="1">，这是试听代码（使用时去＊）。<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap13_6mBubbgHqn0Z.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap13_6mBubbgHqn0Z.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><BR>九、回到设计模式，光标点击位于右边的上列，再点击代码格式，用样在大片代码当中找到光标的位置，插入<*A href=" </FONT><A href="http://www.ts49z.com/grzy/zl/wodeyinyue/" target=_blank><FONT color=#0000ff size=3>http://www.ts49z.com/grzy/zl/wodeyinyue/</FONT></A><FONT color=#008000 size=3>陈淑桦-一生守侯.MP3" target=_blank><*FONT face="华文行楷" color="#33CCCC" size="4" >下载<*/FONT><*/A> 这是下载链接代码（使用时去＊），如图14<BR><BR><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.366tian.net/attachments/day_050628/Snap14_mToloMM5gyBk.jpg');}" alt="" src="http://bbs.366tian.net/attachments/day_050628/Snap14_mToloMM5gyBk.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0 twffan="done"> <BR><BR><BR>十、再次回到设计模式，在右边的下列，添加文字</FONT></P>
<P><FONT color=#008000 size=3>十一、现在你就可以点击代码模式，把那些令你头痛的代码复制粘贴到论坛，就ok啦。</FONT></P>

wzyh 发表于 2007-12-21 00:51

<P align=center><STRONG><FONT face=楷体_GB2312 color=#c211ee size=6>各式各样的播放器</FONT></STRONG></P>
<P><FONT color=#ff0066 size=5>提醒各位兄弟注意!!!复制代码试贴时一定要将播放器设为手动!!!否则</FONT></P>
<P><FONT color=#ff0066 size=5>一旦播放器多了会产生一片嘈杂的声音,而且延缓网页打开的速度,切记!!!</FONT></P>
<P><FONT color=#ff0066 size=5></FONT></P>
<P align=center><STRONG><FONT size=3><FONT color=#ff0066><SPAN class=tpc_title twffan="done">几款最常用的播放器效果与代码</SPAN><BR></FONT><BR></FONT></STRONG><SPAN class=tpc_content id=text0 twffan="done"><FONT color=#330000>
<P align=center><BR><BR><STRONG><FONT color=#0909f7 size=3><EMBED src=http://www1.blog.163.com/article/歌曲地址 width=300 height=45 type=audio/mpeg volume="0" autostart="FALSE" loop="-1"></FONT></STRONG></P></FONT>
<P align=left><FONT color=#0909f7 size=3>代码如下<BR><EMBED src="歌曲地址" width=300 height=50 type=audio/mpeg loop="-1" autostart="FALSE" volume="0"></FONT></P>
<P align=center><FONT color=#0909f7 size=3><EMBED style="FILTER: invert()" src=http://www1.blog.163.com/article/歌曲地址 width=300 height=50 type=audio/mpeg volume="0" autostart="false" loop="true"> </FONT></P>
<P align=left><FONT color=#0909f7 size=3>代码如下<BR><EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50 type=audio/mpeg volume="0" autostart="TRUE" loop="true"></FONT></P>
<P align=center><FONT color=#0909f7 size=3><EMBED style="FILTER: xray(); WIDTH: 300px; HEIGHT: 50px" src=http://www1.blog.163.com/article/歌曲 type=audio/mpeg autostart="FALSE" loop="-1" volume="1"></FONT></P>
<P align=left><FONT color=#0909f7 size=3>代码如下<BR><EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05 type=audio/mpeg loop="-1" autostart="false" volume="0"></FONT></P>
<P align=center><FONT color=#0909f7 size=3><EMBED style="FILTER: GRAY()" src=http://www1.blog.163.com/article/歌曲地址 width=300 height=45 type=audio/mpeg volume="0" autostart="true" loop="-1"> </FONT></P>
<P align=left><FONT color=#0909f7 size=3>代码如下<BR><EMBED style="FILTER: GRAY()" src="歌曲地址" width=300 height=45 type=audio/mpeg loop="-1" autostart="true" volume="0"></FONT></P>
<P align=left><FONT color=#ff0066 size=3>重要提示：<BR><BR>1 .WIDTH代表播放器宽度，HEIGHT代表高度，后面的数值可依自己喜好进行调整。<BR>2. AUTOSTART="TRUE" 这里TRUE代表自动播放，如果换成FALSE则代表手动播放。</FONT></P></SPAN>

wzyh 发表于 2007-12-21 00:52

<P align=center><FONT color=#330000 size=2><FONT color=#f70938 size=4>装饰美化你的播放器</FONT></FONT></P>
<P align=left><FONT color=#3d11ee size=3>有了基本的款式后，我们就可以根据自己的想象力，巧用HTML的表格，根据自己的图片素材，装饰美化自己的播放器啦。只要你有足够的创意，调整代码，就可以得到各式各样的播放器。这里抛砖引玉先介绍几款。</FONT></P>
<P align=center><FONT color=#330000><FONT color=#3d11ee size=3>首先我们可以为黑色播放器加上一个边缘<BR>(中间红色的部分为原黑色播放器代码)</FONT><BR><BR>　</FONT></P>
<P>
<TABLE id=table2 style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP: #000000 3px dashed; BORDER-LEFT: #000000 3px dashed; BORDER-BOTTOM: #000000 3px dashed" cellSpacing=0 cellPadding=0 bgColor=#000000>
<TBODY>
<TR>
<TD>
<TABLE id=table3 borderColor=#000000 align=center border=1>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#330000><EMBED style="FILTER: Xray" src=http://cherry.jazzsky.com/LIU/all_about_you.wma width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"> </FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>
<P>
<P align=left><FONT color=#1111ee size=3><TABLE style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP: #000000 3px dashed; BORDER-LEFT: #000000 3px dashed; BORDER-BOTTOM: #000000 3px dashed" cellSpacing=0 cellPadding=0 bgColor=#00000><BR><TBODY><BR><TR><BR><TD><BR><TABLE borderColor=#000000 align=center border=1><BR><TBODY><BR><TR><BR><TD><p  align=center><FONT color=#ff0033><EMBED style="FILTER: Xray" src=http://cherry.jazzsky.com/LIU/all_about_you.wma width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="- 1"></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></FONT></P>

wzyh 发表于 2007-12-21 00:54

wzyh 发表于 2007-12-21 00:55

<P><FONT color=#ff6699 size=5><FONT color=#0909f7>还可以将播放器置于一个单独的表格里，并加上表格的透明特效，播放器上的花纹就是表格的底图。<BR><BR></FONT><FONT color=#330000 size=2>　</FONT></FONT></P>
<P>　</P>
<P>
<TABLE id=table6 borderColor=#4f3256 align=center background=http://upload.yourblog.org/20057/kaka967.20050722115212.png border=1>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=200,style=3)">
<P align=center><FONT color=#330000 size=2><EMBED src=http://www1.blog.163.com/article/歌曲地址 width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="-1"></FONT></P></TD></TR></TBODY></TABLE>　 </P>
<P>
<P align=left><FONT color=#0909f7 size=3>代码如下:<BR><TABLE borderColor=#4f3256 align=center background=http://upload.yourblog.org/20057/kaka967.20050722115212.png border=1><BR><TBODY><BR><TR><BR><TD style="FILTER: alpha (opacity=50,style=3)"><BR><p  align=center> <EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE></FONT></P>

wzyh 发表于 2007-12-21 00:56

<P align=center><FONT color=#1111ee size=4>还可以利用动态的GIF背景做成动态播放器</FONT></P>
<P>
<TABLE borderColor=#dee4fe cellSpacing=3 cellPadding=0 align=center background=http://img.mms.sohu.com/mms/1213/00/12500/p2.gif border=2>
<TBODY>
<TR>
<TD>
<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,style=3)">
<P align=center><EMBED style="FILTER: Xtray" src=http://www.26yy.com/music//520yya/0076/9.wma width=340 height=50 type=audio/mpeg volume="0" autostart="false" loop="1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>
<P> </P>
<P><FONT color=#3809f7 size=3><TABLE borderColor=#dee4fe cellSpacing=3 cellPadding=0 align=center background=http://img.mms.sohu.com/mms/1213/00/12500/p2.gif border=2><BR><TBODY><BR><TR><BR><TD><BR><TABLE align=center border=0><BR><TBODY><BR><TR><BR><TD style="FILTER: alpha(opacity=100,style=3)"><BR><p align=center><EMBED style="FILTER: Xtray" src=http://www.26yy.com/music//520yya/0076/9.wma width=340 height=50 type=audio/mpeg volume="0" autostart="false" loop="1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></FONT></P>

wzyh 发表于 2007-12-21 01:02

<P><FONT color=#ff6699 size=5><FONT color=#0909f7>一.歌曲的标记: <BR><BR><BR><EMBED SRC="音乐文件地址"><BR><BR>在论坛做帖常用格试如下：<BR><BR><EMBED src="歌曲地址" width=300 height=40 type=audio/mpeg loop="-1" autostart="FALSE" volume="0"></FONT><BR><BR><FONT color=#0909f7>二.说明：<BR><BR><BR>1. 手动播放: <BR><EMBED src="歌曲地址" width=300 height=40 type=audio/mpeg loop="-1" autostart="</FONT><FONT color=#ff0033>FALSE</FONT><FONT color=#0909f7>" volume="0"><BR><BR><BR>2. 打开页面自动播放: <BR><BR><EMBED src="歌曲地址" width=300 height=40 type=audio/mpeg loop="-1" autostart="</FONT><FONT color=#ff0033>TRUE</FONT><FONT color=#0909f7>" volume="0"><BR><BR><BR>三:常用属性如下：<BR><BR>src="your.mid" <BR>设定 midi 档案及路径，可以是相对或绝对。 <BR><BR>autostart=true <BR>是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。<BR><BR>loop="true" <BR>是否自动反复播放。LOOP=2 表示重复两次，true 是， false 否。 <BR><BR>HIDDEN="true" <BR>是否完全隐藏控制画面，true 为是，no 为否 (内定)。 <BR><BR>STARTTIME="分:秒" <BR>设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。 <BR><BR>VOLUME="0-100" <BR>设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定<BR><BR>WIDTH="整数" 和 HEIGHT="整数" <BR>设定控制面板的高度和宽度。<BR><BR>ALIGN="center" <BR><BR>设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom ><BR><BR>CONTROLS="smallconsole" <BR>设定控制面板的外观。预设值是 console。 <BR>console 一般正常面板　　<BR>smallconsole 较小的面板　　<BR>playbutton 只显示播放按钮　　<BR>pausecutton 只显示暂停按钮　　<BR>stopbutton 只显示停止按钮　　<BR>volumelever 只显示音量调节按钮 <BR><BR>例一：<BR><BR><EMBED SRC="midi.mid" autostart=true hidden=true loop=true><BR><BR>作为背景音乐来播放，隐藏了播放器。<BR><BR>例二：<BR><BR><EMBED SRC="midi.mid" loop=true width=280 height=40></FONT></FONT></P>
<P><EMBED src=midi.mid width=280 height=40 type="text/html; charset=iso-8859-1" loop="true"></P>
<P><BR><FONT color=#0909f7 size=3>出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。<BR><BR>注明：可用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都支持。<BR><BR>IE中的的背景音乐<BR><BR>代码如下：<BR><BR><bgsound src="音乐文件地址" loop=#> <BR><BR>#=循环数 <BR><BR>注明：这种背景音乐格式，只有在IE浏览器中才可以听到。一般用来插入wav wma mid mp3等格试的音乐。<BR><BR>发个音乐要了解那么多？呵呵，大家大可不必，想知道的可以了解一下，其实把上面代码复制过去换一下歌曲地址就ok了。。。<BR>同时注意根据需要将手动播放"FALSE"改为自动播放"TRUE"<BR><BR>三.REAL MEDIA播放器<BR>1,代码<BR><BR></FONT><FONT color=#0000ff size=3><EMBED src="<FONT color=#0909f7>音乐文件地址</FONT>" width=500 height=400 type=audio/x-pn-realaudio-plugin autostart="FALSE" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1"></EMBED></FONT></P>
<P><FONT color=#0000ff size=3></FONT></P>
<P><FONT color=#0000ff size=3></EMBED /></FONT></P>
<P><FONT color=#0909f7>2.代码:<BR><BR>简约型代码<BR><BR><EMBED align=middle src=音乐文件地址 width=39 height=18 type=audio/x-pn-realaudio-plugin loop="infinite" volume="100" controls="PlayButton" autostart="FALSE"></P></FONT>

[[i] 本帖最后由 wzyh 于 2007-12-21 21:46 编辑 [/i]]

憧憬人生 发表于 2007-12-21 11:54

一晚上发了这么多，楼主辛苦！:victory:

wzyh 发表于 2007-12-21 21:51

<P><EMBED style="FILTER: invert(); WIDTH: 400px; HEIGHT: 50px" src=歌曲地址 type=audio/mpeg volume="0" loop="true" autostart="false" ShowStatusBar="1"></P>
<P><FONT color=#3809f7 size=3>代码</FONT></P>
<P><FONT color=#3809f7 size=3><EMBED style="FILTER: invert(); WIDTH: 400px; HEIGHT: 50px" src=歌曲地址 type=audio/mpeg ShowStatusBar="1" autostart="false" loop="true" volume="0"></FONT></P>
<P><EMBED style="FILTER: Xray(); WIDTH: 400px; HEIGHT: 50px" src=http://mms.blog.xuite.net/cf/0e/13002692/blog_47432/dv/3615742/3615742.asx type=audio/mpeg volume="0" loop="true" autostart="TRUE" ShowStatusBar="1"></P>
<P> </P>
<P><FONT color=#3300ff size=3>代码:</FONT></P>
<P><FONT color=#3300ff size=3><EMBED style="FILTER: Xray(); WIDTH: 400px; HEIGHT: 50px" src=http://mms.blog.xuite.net/cf/0e/13002692/blog_47432/dv/3615742/3615742.asx type=audio/mpeg ShowStatusBar="1" autostart="TRUE" loop="true" volume="0"></FONT></P>
<P> </P>
<P><EMBED pluginspage=http://www.microsoft.com/windows/mediaplayer/download/default.asp width=400 height=172 type=application/x-mplayer2 PlayCount="1" AUTOSTART="false" SHOWGOTOBAR="1" SHOWDISPLAY="1" SHOWSTATUSBAR="1" SHOWCONTROLS="1" FileName="http://mms.blog.xuite.net/cf/0e/13002692/blog_47432/dv/3615742/3615742.asx"></P>
<P> </P>
<P><FONT color=#3d11ee size=3><EMBED pluginspage=http://www.microsoft.com/windows/mediaplayer/download/default.asp width=400 height=172 type=application/x-mplayer2 FileName="<A href='http://mms.blog.xuite.net/cf/0e/13002692/blog_47432/dv/3615742/3615742.asx"' target=_blank><FONT color=#003366>http://mms.blog.xuite.net/cf/0e/13002692/blog_47432/dv/3615742/3615742.asx"</FONT></A> SHOWCONTROLS="1" SHOWSTATUSBAR="1" SHOWDISPLAY="1" SHOWGOTOBAR="1" AUTOSTART="false" PlayCount="1"></FONT> </P>

页: 1 2 [3] 4 5

IT家园's Archiver