|
写完上一篇教程，就有朋友提到了“文绕图”的问题。虽然这个问题看似很难，但在 MSN Space 编辑器中很容易就能做到这一点。下面我就介绍一下实现“文绕图”，以及“首字下沉”的排版方法。 
（一）图片在左侧或右侧的“文绕图”排版方法
① 先写好一段文字，再根据教程（七）中给出的图片插入方法（二）或（三），将所需图片插入到这段文字中。
② 鼠标右键点击所插入的图片，在菜单中选择“水平对齐方式”，然后如果选择左对齐，则图片在左边，如果选择右对齐，则图片会到右边。这时你就可以看到“文绕图”的效果了。
下面是左、右文绕图效果的具体实例：
图在文字左边的文绕图效果 图在文字左 边的文绕图效果 图在文字左边的文绕图效果 图在文字左边的文绕图效果 图在文字左边的文绕图效果 图在文字左边的文绕图效果。 |
图在文字右边的文绕图效果 图在文字右 边的文绕图效果 图在文字右边的文绕图效果 图在文字右边的文绕图效果 图在文字右边的文绕图效果 图在文字右边的文绕图效果。 |
③ 图片的大小和位置，可以用鼠标左键点中后拖动来改变，请参考教程（七）中的动画。
④ 如果点击<HTML>模式转换按钮，可以看到上述步骤实际上实在<IMG>语句中，添加了一个参数：align=left 或 align=right，从而达到“文绕图”的效果。
⑤ 在本教程第三部分，还给出了一种通过<SPAN style=......>语句来实现“文绕图”的办法。
（二）图片在文字环绕四周的“文绕图”排版方法
想取得图片在文字正中的效果，可以利用表格<TABLE>语句来完成。请看下面这个例子：
| 图上的文字 图上的文字 图上的文字 图上的文字 图上的文字 图上的文字 图上的文字 图上的文字 |
| 图左边的文字 图左边的文字 图左边的文字 图左边的文字 |
 |
图右边的文字 图右边的文字 图右边的文字 图右边的文字 |
| 图下的文字 图下的文字 图下的文字 图下的文字 图下的文字 图下的文字 图下的文字 图下的文字 |
这是一个 3 X 3 的表格做出来的效果，图片被放在了正中的单元格中，造成文字环绕的效果。具体代码如下：
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 rules=no width=260>
<TBODY>
<TR align=left>
<TD colSpan=3>图上的文字 ......</TD></TR>
<TR align=middle>
<TD>图左边的文字 ......</TD>
<TD><IMG height=38 src="http://spaces.msn.com/rte/emoticons/star.gif" width=38></TD>
<TD>图右边的文字 ......</TD></TR>
<TR align=left>
<TD colSpan=3>图下的文字 ......</TD></TR>
</TBODY></TABLE></DIV>
（三）“首字放大下沉”的排版方法
“首字放大下沉”的效果，常见于书本杂志，其特点就是文章的第一个字大小一般是正文的两倍，甚至更大。如果我们把首字做成艺术字的图片，就完全可以采用上述方法（一）中“文绕图”方式来达到“首字放大下沉”的效果。如果我们不把首字做成图片，就需要用代码来完成，实例如下：
|
首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首字放大下沉效果 首 |
具体代码如下：
<DIV style="FONT-SIZE: 12px; LINE-HEIGHT: 14px"><SPAN style="FONT-SIZE: 24px; LINE-HEIGHT: 28px; FLOAT: left;"><B>首</B></SPAN>字放大下沉效果 首字放大下沉效果 ......</DIV>
其中蓝色数字可根据自己的需要调整字体的大小。
另外，如果将代码<B>首</B>换成图片语句，比如：<IMG height=38 src="http://spaces.msn.com/rte/emoticons/star.gif" width=38>，那么也能形成“文绕图”的效果，感兴趣的朋友可以试一试。
希望这篇教程中的几种排版效果能有助于美化你的 MSN Space ！
（本日志修改于2005年8月15日） |
Tools 
