文绕图及首字下沉（SOS）

Lily 的个人资料白开水加柠檬片照片日志列表更多

工具

帮助

11月27日

文绕图及首字下沉（SOS）

（一）图片在左侧或右侧的“文绕图”排版方法

① 先写好一段文字，插入图片。

② 鼠标右键点击所插入的图片，在菜单中选择“水平对齐方式”，然后如果选择左对齐，则图片在左边，如果选择右对齐，则图片会到右边。这时你就可以看到“文绕图”的效果了。

下面是左、右文绕图效果的具体实例：

图在文字左边的文绕图效果图在文字左

边的文绕图效果图在文字左边的文绕图效果图在文字左边的文绕图效果图在文字左边的文绕图效果图在文字左边的文绕图效果。

图在文字右边的文绕图效果图在文字右

边的文绕图效果图在文字右边的文绕图效果图在文字右边的文绕图效果图在文字右边的文绕图效果图在文字右边的文绕图效果。

③ 图片的大小和位置，可以用鼠标左键点中后拖动来改变

④ 如果点击<HTML>模式转换按钮，可以看到上述步骤实际上实在<IMG>语句中，添加了一个参数：align=left 或 align=right，从而达到“文绕图”的效果。

（二）图片在文字环绕四周的“文绕图”排版方法

想取得图片在文字正中的效果，可以利用表格<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>，那么也能形成“文绕图”的效果，感兴趣的朋友可以试一试。

16:01 | 写入日志 | 幻想读书

若要添加评论，请使用您的 Windows Live ID 登录（如果您使用过 Hotmail、Messenger 或 Xbox LIVE，您就拥有 Windows Live ID）。登录

还没有 Windows Live ID 吗？请注册

	zzy发表: 都开始整高难的了，轻点折腾哈。 11 月 28 日
	球迷发表: hoho~ 学以致用~ 11 月 28 日
	drip发表: 回头有穿细教我! 11 月 28 日

引用通告

此日志的引用通告 URL 是：

http://hjr5311977.spaces.live.com/blog/cns!EE341EB06DB96F87!894.trak

引用此项的网络日志

日志

文绕图及首字下沉（SOS）

评论 (3)

引用通告