第3章文字与段落 文字与段落是整个HTML知识体系中最为基础的一项知识内容。任何网页的实现都是以文字和段落为基本元素的。通过对文字与段落属性的设置，可以使文字呈现不同的表现形式，提高网页文件的可读性和观赏性。因此，学好文字和段落的设置是学习网页设计的重要起步。 本次实验将学习： (1) 标题字标记的应用。 (2) 普通文字标记的使用。 (3) 段落标记

的使用。 (4) 文字修饰样式属性的使用。 (5) 文字和段落样式属性的修饰定义。 实验目标： (1) 掌握定义标题、段落及标记文字的显示格式等常用标记。 (2) 掌握文字段落排版的基本规则。 (3) 能够完成文本型页面的设计与实现。 3.1讲述与示范 一直以来，文字能最有效地传递信息。把文字置入页面是一个简单的工作，但是把它设计成美观大方和赏心悦目的网页却是一项挑战性的工作。 实验1： 网页欣赏 文字是体现网页内容的主体，是一个网页的灵魂。文字排版的好坏，将直接影响版面的视觉效果。因此，文字设计是增强视觉传达效果，提高版面审美度的一种重要技术。文字的设计与排版看似简单，却蕴含很多的技巧。下面首先欣赏几个优秀的利用文字进行排版的页面。 图31是著名的CSS设计网站禅意花园网站的官网，其主要是基于文字进行排版设计的首页。在它的首页中，几乎没有图片出现，设计者通过字体、字号和颜色的变化，将标题和内容做了有效的区分，并充分运用了间距、留白和对齐方式等属性的设置和变化进行页面布局，达到了简约而美观的视觉效果。 图31CSS设计网站禅意花园官网 图32是一张基于文字内容的个人简介的页面布局。这张页面充分运用了对比强烈的黑白色背景和具有冲击力字体的组合，形成层次分明的区域间隔，在有限的空间中尽可能多地呈现了内容信息。 图32文本布局的一个页面案例 一般而言，在进行文本内容的设计时，需要注意以下问题。 1. 字体 fontfamily属性可以设置文本的字体。通常系统中都提供了很多字体可供选择，例如，中文字体就包括宋体(SimSun)、黑体(SimHei)、幼圆和琥珀等，其中，黑体适合用作标题，而宋体一般用于正文。但是网页中的字体正常显示依赖于浏览器所在的系统中是否安装相应的字库，如果没有安装，浏览器就会显示为默认的字体。除此之外，还包含一些不常用但也很重要的字体： 英文字体(Typeface)。英文字体是一个总称，在这个大类之下，主要分为以下几类。衬线体： 该字体中在笔画边缘的装饰部分就是衬线，可以清楚地标明笔触的末端。特别注意的是，中文字体也有衬线字体，如宋体。等宽字体： 该字体只针对西文字体，因为英文字母的宽度各不相同。编程过程中如果字母不等宽那么排版就会很难看。我们常用的DOS窗口中的命令行就是等宽字体。手写体： 此类字体主要是手写风格的字体，也称为书法字体。 2. 字号 字号主要是设置文本内容的大小，不同位置或者不同功能的文本有着不同的显示样式，这就需要调整对应的字号大小。fontsize可以设置文本的大小，其正确的选择是确保信息能够准确、清晰地在网页上呈现给用户和使用者的有效前提。 3. 字符间距 在网页页面中，文本的友好显示方式可以给用户和使用者带来赏心悦目的感觉。适当的字符间距，可以有效地避免造成拥挤和紧密的排版效果。字符间距的变化也会对文本的可读性产生很大影响。一般而言，字符的间距应当以能够保证阅读的连续性为宜。letterspacing和wordspacing可以用来调整字间距和词间距。 4. 行间距 行间距同字符间距性质一样，前者是调整文本内容各行之间的间距，后者是调整每一行内字符之间的间隔。行间距是纵向宏观调整排版效果，字符间距是横向微观改变显示效果。一般情况下，接近字体尺寸的行间距设置比较适合正文。行间距的常规比例为10∶12，即用字10点，则行间距12点。lineheight可以用来调整行高。 5. 段落间距 段落间距和前两者之间有所区别。没有专有属性来设置段落间距，实际使用中采用的是设置段落p的内边距padding或者外边距margin来实现。段落间距选取合理数值有助于整体页面的美观和阅读。 6. 颜色 颜色是通过设置color属性来实现对文本或背景等元素控制。其属性值可以采用6位十六进制数来表示，如红色可表示为#FF0000，也可简写为#F00。除此之外，也可采用颜色名称，例如绿色可以写成green。有些情况下写成RGB(255,0,0)也可表示红色，此类情况是调用RGB()函数。颜色的运用除了能够起到强调整体文字中特殊部分的作用之外，对于整个文案的情感表达也会产生影响。例如，对于重点强调的文字可以采用醒目的颜色。 7. 文字的图形化 在文本内容整体排版中，文字图形化是一种具有艺术表现力的文字编排形式。目前国际平面设计界以平面设计中文字的图形化表现为切入点，对文字图形化的表现形式和表现手法以及在平面设计的应用进行探讨性分析，挖掘出了文字与图形化设计的更多表现形式。一些常用的文字图形化方法包括替换法、共用法、叠加法、分解重构法等。 对文字进行艺术化设计，将文字变为图形化的元素来使用，既体现了语义的功能，又可以一种更富创意的形式表达出深层的设计思想，克服网页的单调与平淡，体现出美学的效应。可以看到，通过对文字的灵活使用，可以创建界面优美、性能优良且具有强大生命力的网站。 实验2： 唐诗页面设计 实验要求： 下面是一首唐诗的素材，这是一种正文内容较少的页面，要求综合运用字体、字号、字间距、行间距、颜色和对齐方式等属性的设计，用一个独立的页面设计一个有良好视觉效果和阅读效果的网页。 早发白帝城 李白 朝辞白帝彩云间， 千里江陵一日还。 两岸猿声啼不住， 轻舟已过万重山。 【简析】诗是写景的。唐肃宗乾元二年(759年)，诗人流放夜郎，行至白帝遇赦，乘舟东还江陵时而作此诗。诗意在描摹自白帝至江陵一段长江，水急流速，舟行若飞的情况。首句写白帝城之高； 第二句写江陵路遥，舟行迅速； 第三句以山影猿声烘托行舟飞进； 第四句写行舟轻如无物，点明水势如泻。全诗锋棱挺拔，一泻直下，快船快意，令人神远。难怪乎明人杨慎赞曰： "惊风雨而泣鬼神矣!" 实验分析： 对于这样的素材，可以看出，整个内容可以分为两个部分： 一个是诗的正文，一个是诗的简析，因此，在结构上可以将页面分为上下两个部分，其中上方作为正文使用，以突出页面主题。 正文内容是整篇文字的主题，在表现时可以通过字体字号的设计予以突出，另外由于内容并不是很多，因此在设计上可以通过字符间距和行间距在文字和段落中保持适当的间隙达到平衡。 简析部分由于是该诗的讲解部分，因此在设计上不应喧宾夺主。具体来讲，可以通过用较小的字号来突出正文。另外，也可以通过色彩来区别，例如正文采用较吸引人的亮色，简析采用暗色等。 实验步骤： 通过上述的分析，从材料内容上看，可以分为几种情况： 标题字、作者、正文、简析。因此可以针对这几部分分别定义它们的显示风格。 步骤1： 创建页面结构，完成内容的基本布局 页面通过引入一个能够生成一个矩形框的标记

，将内容全部放在此方框内，下面是页面的基本结构。
在页面的样式定义部分(style)，定义了页面中DIV标记应当使用的样式(通过设置class属性)，如下。 ．container{width:650px;margin:0 auto;text-align:center; background-color: #EFEFDA;padding: 20px;} 这里将矩形框的背景设置了特定的颜色，里面的文本内容通过“margin:0 auto;”设置为居中对齐，另外规定了矩形框的宽度为650px。这样的设置确保了将要显示的内容局限在一个矩形框内，并且居于页面的水平中央。 步骤2： 添加各部分的样式定义 在完成了基本的页面结构后，下面开始添加内容到页面。根据材料分析，可以采用上下结构来进行布局，上方为诗的正文，下方为诗的简析。由于正文内容较少，简析内容较多，但主题内容又在上方，因此，适当增大正文的字体、字号、字符间距和行间距保持和下文的平衡，进一步地通过将正文的颜色改变加大与简析部分的反差。下面分别定义了内容中关于标题、作者、正文和简析4个不同部分的使用样式。添加内容样式后的代码如下。
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是对应于上面设置的页面代码。

早发白帝城

李白

朝辞白帝彩云间，千里江陵一日还。
两岸猿声啼不住，轻舟已过万重山。

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

步骤4： 查看效果 图33是最终的实现效果。 图33唐诗页面的运行效果 从图33看出，为了保持页面平衡，采用了上半部的诗词部分和下半部的简析部分保持等宽的设计，通过较大的字体、扩大的字间距和行间距等设计正文，保证整个页面不至于显得头重脚轻。 标记分析： (1)
步骤2： 定义页面内容不同部分的样式
1） 定义文章标题样式 这里依然采用黑体，不同于实验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的最终代码如下。

圣诞节

摘自《假如给我三天光明》海伦·凯勒

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

莎莉文小姐来到塔斯甘比亚后的第一个圣诞节成为我的空前盛事。家里的每个人都在为我准备一些意想不到的礼物，而更令人兴奋的是我和莎莉文小姐也在为其他人准备意外的礼物。

我高兴得不得了，猜想着人们到底给我什么礼物。家人们也想尽办法逗引我，故意给我一星半点儿暗示，或者一句半句不连续的话语，让我猜测。我和莎莉文小姐就玩着这猜谜游戏，我从中学会了许多词的用法，比上课学到的还要多得多。

每天晚上，我们整夜都围坐在暖烘烘的火炉前玩着猜谜游戏。圣诞节一天天临近，我们也越来越兴奋。

…

一天早上，我把鸟笼放在窗台上，然后去打水给它洗澡。回来一开门，感觉到一只大猫从我的脚底下钻了出去。起初我并没在意，可是当我把一只手伸进笼子，没有摸到小蒂姆的翅膀，也没有触到它尖尖的小嘴时，我心里便明白了，我再也见不到我那可爱的小歌手了。

程序中对每一个段落都独立使用了

标记，这主要是为了使每一个段落都能够按照指定的段落样式进行排版。 步骤4： 查看效果 图34是页面的最终运行效果。 图34文章页面的最终运行效果 3.2理论解答题 1. 选择题 (1) 在HTML中，下面是段落标记的是()。 A. 与 B. 与 C. 与 D.

与

(2) HTML中，表示()。 A. 设置背景颜色 B. 设置文本颜色 C. 设置链接颜色 D. 设置已使用的链接的颜色 (3) 正确描述创建一个一级标题居中的句法是()。 A. heading text B.

heading text

C. heading text D. heading text (4) 下列选项中，（）是换行符标记。 A. B. C.
D.

(5) 在HTML中，标记的Size属性最大取值可以是()。 A. 5 B. 6 C. 7 D. 8 (6) 在HTML中，标记

的作用是()。
A. 标题标记  B. 预排版标记 
C. 转行标记 D. 文字效果标记 
(7) 在色彩的RGB系统中，6位十六进制数000000表示的颜色是()。
A. 白色        B. 红色           C. 黄色    D. 黑色 
(8) 要在文本的首行空两个汉字，就要插入()个空格。
A. 1  B. 2 C. 3      D. 4 
(9) 在文本的属性中，不能设置()。 
A. 背景色      B. 超链接在目标窗口打开的方式
C. 文本的无序列表和有序列表   D. 段落缩进
(10) 在网页的源代码中表示加粗文字显示的标记是()。 

A.                B. 
 
C.     D. 
 
(11) 缩进排列对应的源代码中的标记是()。 
A.            B. 
 
C.           D.  
(12) 在水平线属性面板中，不能设置水平线的是()。
A. 宽度      B. 高度  C. 颜色 D. 阴影
(13) 当网页既设置了背景图像又设置了背景色，那么()。 
A. 以背景图像为主            B. 以背景色为主
C. 产生一种混合效果       D. 冲突，不能同时设置
(14) 在HTML源代码中，图像用()标记来定义。 
A. picture       B. img 
C. pic D. image 
(15) 要想在HTML中显示一个尖括号<，需要用到的字符实体是()。
A. >  B. <       C.         D. "
(16) 在HTML文件中，水平线在默认的情况下是()，并随着窗口的宽度自动调整。
A. 800pixel   B. 1024pixelC. 80%D. 100%
2. 填空题
(1) 要设置一条1像素粗的水平线，应使用的HTML语句是。
(2) 在HTML文件中，版权符号的代码是。
(3) 使页面的文字居中的方法有。
(4) 标题字的标记是。
(5) 是在HTML代码中插入的描述性文本，用来解释该代码或提供其他信息。
(6) 在HTML文件中使用元素来定义文字字体，使用属性定义使用何种字体，使用属性定义字体大小，使用属性改变文字颜色。
(7) 在HTML文件中分别使用元素和元素来呈现下标和上标。
3.3学 生 实 验
1. 参照本章实验建立一个如图35所示的HTML文档。


图35诗词排版效果


2. 为自己设计一张名片，名片上应当包含姓名、通信地址、一两种联系方式等基本信息。设计好后，可以和你的同学互相交流，谈谈你的设计构思。