第3章文字与段落



文字与段落是整个HTML知识体系中最为基础的一项知识内容。任何网页的实现都是以文字和段落为基本元素的。通过对文字与段落属性的设置，可以使文字呈现不同的表现形式，提高网页文件的可读性和观赏性。因此，学好文字和段落的设置是学习网页设计的重要起步。
本次实验将学习： 
（1） 标题字标记的应用。
（2） 普通文字标记的使用。
（3） 段落标签<p>的使用。
（4） 文字修饰标签<b>，<i>，<u>，<center>和<font>等标记的使用。
（5）  文字和段落样式属性的修饰定义。
【实验目标】
（1） 掌握定义标题、段落及标记文字的显示格式等常用标记。
（2） 掌握文字段落排版的基本规则。
（3） 能够完成文本型页面的设计与实现。

3.1讲述和示范

一直以来，文字能最有效地传递信息。把文字置入页面是一个简单的工作，但是把它设计成美观大方和赏心悦目的网页却是一项挑战性的要求。
实验3-1网页欣赏
文字是体现网页内容的主体，是一个网页的灵魂。文字排版的好坏将直接影响版面的视觉效果。因此，文字设计是增强视觉传达效果，提高版面审美度的一种重要技术。文字的设计与排版看似简单，却蕴涵很多的技巧。下面首先欣赏几个优秀的利用文字进行排版的页面。
图3-1所示的页面是Legistyles公司的一个页面截图。Legistyles是一个基于纯文字进行排版设计的网站。在它的主页中没有任何图片出现，设计者充分运用了各种字体的大小、间距、类型、色彩和对齐方式等属性进行页面设计，达到了简约而美观的视觉效果。


图3-1http://www.legistyles.com


图3-2是著名的禅意花园网站的一个案例，它通过字体、字号和颜色的变化将标题和内容做了有效的区分，并使用了首字符放大的效果对内容的不同部分做了分隔。



图3-2禅意花园网站的一个案例


一般而言，在进行文本内容的设计时需要注意以下几个问题。
1. 字体
font-family属性可以设置文本的字体。通常系统中都提供了很多字体供选择，例如中文字体就包括宋体(SimSun)、黑体(SimHei)、幼圆和琥珀等，但是网页中的字体正常显示依赖于浏览器所在的系统中是否安装相应的字库，如果没有安装，浏览器就会显示为默认的字体。目前国内的用户多数还是在XP系统下，因此微软雅黑(Microsoft YaHei)、宋体、黑体是相对比较安全的。其中黑体适合做表现标题，而宋体一般用于正文。
2. 字号
font-size可以设置文本的大小。文字字体、字号的正确选择是确保信息能够准确、清晰地在网页上呈现的首要考虑条件。通常标题和正文的大小以2∶1比较合适。具体到不同的内容应当选择多大的尺寸，应当结合具体网页的设计效果而定。
3. 字符间距
字符间距的变化也会对文本的可读性产生很大影响。一般而言，字符的间距应当以能够保证阅读的连续性为宜。letter-spacing和word-spacing可以用来调整字间距和词间距。
4. 行间距
一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10∶12，即用字10点，则行距12点。line-height可以用来调整行高。
5. 段落间距
不同于行间距，段落间距更多地用于区分正文内容中的不同部分，保持文章阅读时的节奏。在设计时，可以通过修改p标签的margin属性或者padding属性来修改段落间距。相比较而言，段落间距占据一行文字的距离或者1.2倍的距离还是比较合理的。
6. 颜色
颜色的运用除了能够起到强调整体文字中特殊部分的作用之外，对于整个文案的情感表达也会产生影响。例如，对于重点强调的文字可以采用醒目的颜色。
7. 文字的图形化
在文字的整体编排上，也可以使用很多技巧达到排版的目的。例如，可以对文字进行艺术化设计，将文字变为图形化的元素来使用，既体现了语义的功能，又可以一种更富创意的形式表达出深层的设计思想，克服网页的单调与平淡，体现出美学的效应。可以看到，通过对文字的灵活使用，可以创建界面优美、性能优良且具有强大生命力的网站。
实验3-2唐诗页面设计
【实验要求】
下面是一首唐诗的素材，这是一种正文内容较少的页面，要求综合运用字体、字号、字间距、行间距、颜色和对齐方式等属性的设计，用一个独立的页面设计一个有良好视觉效果和阅读效果的网页。




早发白帝城
李白
朝辞白帝彩云间，





千里江陵一日还。
两岸猿声啼不住，
轻舟已过万重山。
【简析】诗是写景的。唐肃宗乾元二年（759），诗人流放夜郎，行至白帝遇赦，乘舟东还江陵时而作此诗。诗意在描摹自白帝至江陵一段长江，水急流速，舟行若飞的情况。首句写白帝城之高； 二句写江陵路遥，舟行迅速； 三句以山影猿声烘托行舟飞进； 四句写行舟轻如无物，点明水势如泻。全诗锋棱挺拔，一泻直下，快船快意，令人神往。难怪乎明人杨慎赞曰： “惊风雨而泣鬼神矣！”



【实验分析】
对于这样的素材，可以看出，整个内容可以分为两个部分： 一个是诗的正文，另一个是诗的简析，因此在结构上可以将页面分为上下两个部分，其中上方作为正文使用，以突出页面主题。
正文内容是整篇文字的主题，在表现时可以通过字体字号的设计予以突出。另外，由于内容并不是很多，因此在设计上可以通过字符间距和行间距在文字和段落中保持适当的间隙达到平衡。
简析部分由于是该诗的讲解部分，因此在设计上不应喧宾夺主。具体来讲，可以通过用较小的字号来突出正文。另外，也可以通过色彩来区别，例如正文采用较吸引人的亮色，简析采用暗色等。
【实验步骤】
通过上述分析，从材料内容上看，可以分为几种情况： 标题字、作者、正文、简析几个部分。因此可以针对这几部分分别予以定义它们的显示风格。
1. 创建页面结构，完成内容的基本布局
页面通过引入一个能够生成一个矩形框的标记“<DIV>”，以便将内容全部放在此方框内。下面是页面的基本结构。

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html

head

style type="text/css"

.container{width:650px;margin:0 auto;text-align:center;

background-color:#EFEFDA;padding: 20px;}

/style

/head

body

div class="container"	

--在此内部添加内容 --

/div

/body

/html

在页面的样式定义部分(style)定义了页面中DIV标记应当使用的样式(通过设置class属性)，如下。

.container{width:650px;margin:0 auto;text-align:center;

 background-color: #EFEFDA;padding: 20px;}

这里将矩形框的背景设置了特定的颜色，里面的文本内容通过“margin:0 auto;”设置为居中对齐，另外规定了矩形框的宽度为650px。这样的设置确保了将要显示的内容局限在一个矩形框内，并且居于页面的水平中央。
2. 添加各部分的样式定义
在完成基本的页面结构后，下面开始添加内容到页面。根据材料分析，可以采用上下结构来进行布局，上方为诗的正文，下方为诗的简析，需要突出的主题内容为诗的正文部分。由于正文内容较少，简析内容较多，因此需增大正文的字体、字号、字符间距和行距保持整体的协调，并通过将正文的颜色改变加大与简析部分的反差。下面分别定义了内容中关于标题、作者、正文和简析4个不同部分的使用样式。添加内容样式后的代码如下。

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html

head

style type="text/css"

.poemAuthor{font-family:宋体;font-size:14px;}

.poemText{font-family:宋体;font-size:24px;font-weight:bold;

 letter-spacing:12px;line-height:2.5;color:#B22222;}

.poemComment{font-family:宋体;font-size:14px;letter-spacing:3px;

 line-height:1.5;text-align:left;}

.emphasize{font-weight:bold;}

.container{width:650px;margin:0 auto;text-align:center;

background-color: #EFEFDA;padding: 20px;}

H1{font-family:黑体;font-size:44px;color:#B22222;

letter-spacing:12px;}

/style

/head

body

div class="container"

--在此内部添加内容 --

/div

/body

/html

1） 定义标题样式
通常标题适合选用黑体，由于诗词内容偏少，特别是主体内容偏少，因此采用较大的字号比较合适。具体地，页面为此标题定义了如下风格。

H1{font-family:黑体;font-size:44px;color:#B22222; letter-spacing:12px;}

这里为一级标题字H1定义了具体的风格，包括字体为黑体、字号为44像素、文字颜色、字符间距为12像素。
2） 定义作者样式
作者部分相对简单，只是简单地规定了其字体和字号。

.poemAuthor{font-family:宋体;font-size:14px;}

3） 定义正文样式
通常正文和标题的字号大小相差一倍左右为宜，这里选择了24px，字体风格采用了粗体，字符间距为12px，文本颜色和标题保持一致。

.poemText{ font-family:宋体;font-size:24px;font-weight:bold;


 letter-spacing:12px;line-height:2.5;color:#B22222;}

另外，为了加大正文的高度，这里特别增大了行高，设置为2.5倍大小。
4） 定义简析样式
简析部分作为相对次要的内容，字体采用标准宋体和较小的字号，这里选择了14px。另外，其文字内容较多，因此字符间距调整为3px，在对齐方式上采用左对齐的方式保持简析内容的规整。

.poemComment{font-family:宋体;font-size:14px;letter-spacing:3px;

 line-height:1.5;text-align:left;}

.emphasize{font-weight:bold;}

另外，为了强调简析部分，这里特意为“【简析】”这几个字定义了特殊的风格，主要是采用粗体显示。
3. 添加正文到页面，引入样式定义
程序3-1是对应于上面设置的页面代码。

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

<html>

<head>

<style type="text/css">

.poemAuthor{font-family:宋体;font-size:14px;}

.poemText{font-family:宋体;font-size:24px;font-weight:bold;

 letter-spacing:12px;line-height:2.5;color:#B22222;}

.poemComment{font-family:宋体;font-size:14px;letter-spacing:3px;

 line-height:1.5;text-align:left;}

.emphasize{font-weight:bold;}

.container{width:650px;margin:0 auto;text-align:center;

background-color: #EFEFDA;padding: 20px;}

 H1{font-family:黑体;font-size:44px;color:#B22222;

letter-spacing:12px;}

 </style>

</head>

<body>

<div class="container">	

<p><H1>早发白帝城</H1></p>

<p class="poemAuthor">李白</p>

<p class="poemText">

朝辞白帝彩云间，千里江陵一日还。

<br/> 

两岸猿声啼不住，轻舟已过万重山。

</p>

<p class="poemComment">

<span class="emphasize">【简析】</span>

诗是写景的。唐肃宗乾元二年（759），诗人流放夜郎，行至白帝遇赦，乘舟东还江陵时而作此诗。

诗意在描摹自白帝至江陵一段长江，水急流速，舟行若飞的情况。首句写白帝城之高； 

二句写江陵路遥，舟行迅速； 三句以山影猿声烘托行舟飞进； 

四句写行舟轻如无物，点明水势如泻。全诗锋棱挺拔，一泻直下，快船快意，令人神远。

难怪乎明人杨慎赞曰： “惊风雨而泣鬼神矣！”

</p>

</div>

</body>

</html>

4. 查看效果 
最终的实现效果如图3-3所示。


图3-3唐诗页面的运行效果


从图3-3看出，为了保持页面平衡，采用了上半部的诗词部分和下半部的简析部分保持等宽的设计，通过较大的字体、扩大的字间距和行间距等设计正文，保证整个页面不至于显得头重脚轻。
标签分析： 
（1） <style> 标签用于为 HTML 文档定义样式信息。这里在style部分分别规定了主要内容需要采用的样式定义。
（2） <div> 可定义页面文档中的分区或节（division/section），将它们划分为独立的、不同的部分。这里主要是通过该标记创建一个矩形区域，把诗的正文和简析部分包含进来。
（3） <p>是段落标记。这里对每一个部分都独立使用<p>标记是因为每个部分的样式都不同，通过对标记的class属性设置对应于<style>中定义的样式。
（4） <br>是换行标记。这里将这首诗通过换行符强制分为两行。
注意： 在样式定义中，这里使用了两种方式，一种是按照标记名称定义的样式，表示在页面中出现的此类标记都将自动应用定义的样式； 另外一种以圆点开头的，则当某个标记，如<P>使用时，通过设置该标记的class属性引入该样式。
实验3-3文章排版
【实验要求】
下面是海伦·凯勒的《假如给我三天光明》中的部分内容（参见本书配套资源），利用掌握的有关文本型页面设计的基本规则，用一个独立的网页把它表现出来。




 圣诞节
 摘自《假如给我三天光明》海伦·凯勒
【内容简介】《假如给我三天光明》是海伦·凯勒的散文代表作，她以一个身残志坚的柔弱女子的视角，告诫身体健全的人们应珍惜生命，珍惜造物主赐予的一切。此外，本书中收录的《我的人生故事》是海伦·凯勒的自传性作品，被誉为“世界文学史上无与伦比的杰作”。
莎莉文小姐来到塔斯甘比亚后的第一个圣诞节成为我的空前盛事。家里的每个人都在为我准备一些意想不到的礼物，而更令人兴奋的是我和莎莉文小姐也在为其他人准备意外的礼物。
我高兴得不得了，猜想着人们到底给我什么礼物。家人们也想尽办法逗引我，故意给我一星半点儿暗示，或者一句半句不连续的话语，让我猜测。我和莎莉文小姐就玩着这猜谜游戏，我从中学会了许多词的用法，比上课学到的还要多得多。
每天晚上，我们整夜都围坐在暖烘烘的火炉前玩着猜谜游戏。圣诞节一天天临近，我们也越来越兴奋。
 ……
 一天早上，我把鸟笼放在窗台上，然后去打水给它洗澡。回来一开门，感觉到一只大猫从我的脚底下钻了出去。起初我并没在意，可是当我把一只手伸进笼子，没有摸到小蒂姆的翅膀，也没有触到它尖尖的小嘴时，我心里便明白了，我再也见不到我那可爱的小歌手了。



【实验分析】
这是一篇不算很长的文章，因此不用考虑分出更多的层次。对于那些内容较多的，不足以在1~2个页面能够完成的文章，应当考虑建立起页面内部的导航来方便用户阅读。
从内容上分析，本文可以分为标题、来源、内容简介和正文4个不同的部分。在字体的选择上，标题依然可以采用传统的黑体，而其他部分可以采用宋体来表示； 在字号的大小方面，标题适当大些，保持为正文字号的两倍左右； 在颜色的设计上，由于文字内容较多，为了避免长时间阅读的视觉疲劳，因此正文字体的颜色可以适当采用较淡的颜色。
一般中文文章的段落通常需要段首缩进2个汉字，这个要求可以利用段落文字的缩进属性text-indent定义来实现，实践中常将其缩进值定义为段落文字字号大小的2倍。
文章排版需要注意的一个重要的问题就是段落的间距。如果文章较长，而且没有合适的段落间距，往往会造成阅读者心理上的压抑，恰当的段落间距会改善阅读时的节奏。
【实验步骤】 
根据上面的分析，并借鉴实验3-2过程，按以下步骤进行页面设计。
1. 创建页面结构，完成内容的基本布局
页面依然利用一个矩形框的标记<DIV>将内容全部放在此方框内，下面是页面的基本结构。

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html

head

style type="text/css"

 .container{ width:650px;margin:0 auto;text-align:left;

background-color: #EFEFDA;padding: 20px;}

/style

/head

body

div class="container"	

--在此内部添加内容 --

/div

/body

/html

2. 定义页面内容不同部分的样式

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html

head

style type="text/css"

H1{font-family:黑体;font-size:28px;color:#333333;

letter-spacing:5px;text-align:center;}

.author{font-family:宋体;font-size:14px;color: #9BA6B3;

text-align:center;}

.textBody{font-family:宋体;font-size:14px;letter-spacing:2px;

line-height:1.5;color:#333333;text-indent:28px;margin:10px 0;}

.abstract{font-family:宋体;font-size:14px;line-height:1.5;

text-align:left;color: #9BA6B3;}

.emphasize{font-weight:bold;}

.container{width:650px;margin:0 auto;text-align:left;

background-color: #EFEFDA;padding: 20px;}

/style

/head

body

div class="container"	

--在此内部添加内容 --

/div

/body

/html

1） 定义文章标题样式
这里依然采用黑体，不同于实验3-2，本文正文文字较多，因此不适宜采用较大的字号，采用2倍于正文字号即可。

H1{font-family:黑体;font-size:28px;color:#333333;letter-spacing:5px;

text-align:center;}

2） 定义作者部分的样式
作者部分不是文章的主题内容，因此采用较浅的颜色表示，形成和正文的一个反差，因此采用了以下的样式。

.author{font-family:宋体;font-size:14px;color:#9BA6B3;text-align:center;}

3） 定义内容简介的样式
内容简介的设计和作者部分的设计考虑是一样的，唯一的区别是其内容需要左对齐。

.abstract{font-family:宋体;font-size:14px;line-height:1.5;

text-align:left;color: #9BA6B3;}

4） 定义正文的样式
除了字体、字号和字符间距外，重要的设计是行高、段落间距和段首缩进。下面的样式是为每个段落定义的样式。

.textBody{font-family:宋体;font-size:14px;letter-spacing:2px;

  line-height:1.5;color:#333333;text-indent:28px;margin:10px 0;}

这里text-indent的值设计为28px，刚好是正文文字大小的2倍。另外，除了行间距设计为1.5倍之外，通过margin:10px 0额外为每个段落的上下方增加10px的空白来保持文章的阅读节奏。
3. 添加正文，在每个部分引入对应的样式
程序3-2的最终代码如下。

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html

head

style type="text/css"

H1{font-family:黑体;font-size:28px;color:#333333;

 letter-spacing:5px;text-align:center;}

.author{font-family:宋体;font-size:14px;color: #9BA6B3;

 text-align:center;}

.textBody{font-family:宋体;font-size:14px;letter-spacing:2px;

 line-height:1.5;color:#333333;text-indent:28px;margin:10px 0;}

.abstract{font-family:宋体;font-size:14px;line-height:1.5;

 text-align:left;color: #9BA6B3;}

.emphasize{font-weight:bold;}

.container{width:650px;margin:0 auto;text-align:left;

 background-color:#EFEFDA;padding: 20px;}

/style

/head

body

div class="container"	

pH1圣诞节/H1/p

p class="author"摘自《假如给我三天光明》海伦&middot凯勒/p

 p class="abstract"

span class="emphasize"【内容简介】/span

 《假如给我三天光明》是海伦&middot凯勒的散文代表作，她以一个身残志坚的柔弱女子的视角，告诫身体健全的人们应珍惜生命，珍惜造物主赐予的一切。此外，本书中收录的《我的人生故事》是海伦·凯勒的自传性作品，被誉为“世界文学史上无与伦比的杰作”。

/p

p class="textBody"

 莎莉文小姐来到塔斯甘比亚后的第一个圣诞节成为我的空前盛事。家里的每个人都在为我