编辑的好帮手网页文字的处理技巧-黑马建站宝典(www.heima123.com)

　　众所周知，网页文字的排版设计对于页面的整体效果有着非常重要的影响。就象传统的报刊杂志一样，我们将网页看作一张报纸、一本杂志来进行文字的排版处理，针对不同的需要，有可能需要使用一些特殊的文字排版技巧。比如做一个介绍古文的网页时，我们可能会用到文字竖排、文字从右读起的效果以增强页面表现力；做一个新闻页面，可能会用到段落首字下沉等效果，用以强调某条新闻。

　　在一张报纸上、一本杂志上要实现这些效果并不难，但是我们如何在网页上实现这样的效果呢？下面就向大家介绍几种文字排版处理的技巧。

　　1、段落首行自动缩进

　　每个段落的首行要缩进两个汉字大小是众人皆知的常识，我们通常在每个段落首行加上多个“ ”标签来实现缩进，这样虽然能够达到目的，但是却过于麻烦。其实我们只要运用一些简单的CSS语法就可以一劳永逸地在一个页面中实现首行缩进。

＜style type="text/css"＞
p{text-indent: 2em}
＜/style＞

　　通过上面的样式，页面中每段包含在标签＜p＞和＜/p＞之间的段落都会自动缩进两个汉字字符大小。

　　2、段落首字下沉

　　我们阅读传统媒体时，经常看到如图1的效果，通过使用样式，我们也可以很轻松地实现类似效果。
编辑的好帮手网页文字的处理技巧

图1 很常见的段落首字下沉效果

＜style＞
#chr:first-letter{font-size: 24pt;left: 0px; float: left;position: absolute }
＜/style＞

　　上面这段代码定义了一个首字大小为24pt的缩进，使用时我们只要在某个段落的标签中添上一个“id=chr”就可以了，例如下面的段落：

＜p id=chr＞柳永(987?-1053?)字耆卿，福建崇安人。……＜/p＞

　　3、文字竖排效果

　　如下面的一段诗文，在网页上显示时文字呈竖直排布，非常适合诗词的文字编排。

＜div style="line-height: 18px; text-align: center; writing-mode: tb-rl"＞
＜pre＞
长恨歌(片段)＜br＞白居易＜br＞
汉皇重色思倾国，御宇多年求不得。
杨家有女初长成，养在深闺人未识。
天生丽质难自弃，一朝选在君王侧。
……
＜/pre＞＜/div＞

代码

　　标签中的样式规定了文字的竖直排布，并且每行的间距为18像素，文字为中间对齐。网页读取时都会自动将空格去除后才显示，在诗文内容开始和结束部分分别加上标签＜per＞和＜/per＞，可以使诗文内容按照自己的意愿精确显示，其效果如图2。
编辑的好帮手网页文字的处理技巧

图2 文字竖排效果
　　4、文字从右读起

　　古文的文字编排也通常用到从右读起的效果，下面的代码就可以实现这个效果（如图3）：
编辑的好帮手网页文字的处理技巧

图3 文字从右读起
＜div style="width:260px;direction: rtl; unicode-bidi: bidi-override"＞
长恨歌(片段) ＜br＞
白居易＜br＞
汉皇重色思倾国，御宇多年求不得。
杨家有女初长成，养在深闺人未识。
天生丽质难自弃，一朝选在君王侧。
……
＜/div＞

　　＜div＞标签中的样式规定了一块260像素宽的区域，其中的文字从右边开始。样式中宽度的设置非常重要，必须设置刚好的宽度来容纳内容，否则诗文的显示效果可能就不是一行一段了。

　　5、文字强制对齐

　　我们来比较一下图4和图5两种文字编排方式，图4是使用了文字强制对齐的效果，图5只是普通的编排。图4的文字首尾很整齐，而图5的文字行落则参差不齐，有长有段。显然，图4的效果更加美观，特别是对于英文的段落。通过如下的代码，我们就可以轻松实现文字的强制对齐：
编辑的好帮手网页文字的处理技巧

图4 使用文字强制对齐的效果
编辑的好帮手网页文字的处理技巧

图5 普通的编排显得参差不齐
＜div style="font-size:12px;width:300;text-align:justify"＞
The United States is an industrial country ……
＜/div＞

　　代码

　　标签中的样式规定了一个300像素宽的区域，“text-align:justify”规定了其中的文字行落强制对齐。

　　通过以上的一些技巧，我们就可以很灵活的根据需要进行网页文字的编排！

上一篇：中国首页四大特色：长闪挤花
下一篇：网页设计中打造细边表格的三种方法

编辑的好帮手 网页文字的处理技巧

编辑的好帮手网页文字的处理技巧