设为首页 友情链接
在线留言 发表文章
加入收藏 广告联系

刺猬首页

| 专案技术 | 网络技术 | 图形图象 | 网络编程 | 网页设计 | 操作系统 | 服务器 | 技术白皮书 | 在线实验室 | 刺猬论坛 |
  | 数据库 | 设计赏析 | 存储频道 | 网络安全 | 私服架设 |  Solaris | 网站评估 | PC维护技巧 | 下载中心 | 博 客 |
专题: | Linux | java | cisco | 防病毒 | 刀片 | SOA | iscsi | ASP.NET | SQL | Oracle |
您现在的位置: IT公社 IT community >> 网页设计 >> 网页制作技巧 >> 教程正文 用户登录 新用户注册
专 题 栏 目
最 新 热 门
最 新 推 荐
相 关 文 章
突破在线编辑器任意设置…
快速调用记事本编辑网页…
Textarea标签封装为Web在…
在IE中调用 Dreamweaver…
Dreamweaver快速编辑网页…
Dreamweaver MX 2004 代…
设Fireworks为Dreamweav…
在Dreamweaver中编辑Fir…
Dreaweaver常用网页编辑…
仿DW8代码折叠的HTML编辑…
  编辑的好帮手 网页文字的处理技巧           
编辑的好帮手 网页文字的处理技巧
 

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

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

  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”规定了其中的文字行落强制对齐。

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

频道声明:本频道的文章除部分特别声明禁止转载的专稿外,可以自由转载.但请务必注明出出处和原始作者 文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意。

原始作者:佚名 录入时间:2006-9-11
信息来源:不详 投稿信箱:itqoo@126.com
教程录入:admin    责任编辑:admin 
  • 上一个教程:

  • 下一个教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    - 关于我们 - 合作伙伴 - 友情链接 - 广告刊登 - 投稿热线 - 在线留言版权声明联系方式 -
    IT公社版权所有 粤ICP备05127012号
    Copyrigh@2005-2006 itqoo.com.Inc All Rights Reserved  推荐分辨率 1024*768
    联系站长:E-Mail:itqoo@126.com     MSN:urchincc@hotmail.com    QQ:点击这里给我发消息
    特别感谢:亿太网络提供空间支持