[第2章网页中的文字.ppt

第2章网页中的文字 网页中最基本也最常用的是文字。因此在这一章，开始讲解如何在网页中使用文字以及设置文字的方法。本章将首先介绍使用HTML对文本进行设置的方法，然后初步介绍使用CSS进行文本格式化的方法。由于CSS在网页设计中具有十分重要的作用，在本书后续章节中，还会对CSS的使用进行更为深入的介绍。 2.1 理解与文字相关的HTML标签 本书对很多内容的介绍都遵循先讲解HTML标签，再讲解如何在Dreamweaver使用它。例如，本节先脱离Dreameaver环境，用手工编写一些非常简单的HTML网页，目的是使读者理解HTML语言的原理。然后再介绍如何使用Dreamweaver来实现，以提高制作网页的工作效率。 2.1.1 文字排版的简单操作 【例2-1】 文字排版示例图2-1 未使用“换行”标签的效果 html head title无换行示例/title /head body 登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 /body /html 其效果如图2-1所示。 2.1.2 换行标签 在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转至下一行。 如果未到换行的位置，就希望强制换行，编写者可以在需要换行的地方，加上“br”标签。 【例2-2】 文字换行示例 html head title换行示例/title /head图2-2 使用“换行”标签后的效果 body 登鹳雀楼 br白日依山尽， br黄河入海流。 br欲穷千里目， br更上一层楼。 /body /html 其效果如图2-2所示。 2.1.3 段落标签 为了使文字段落排列得整齐，在文字段落之间，我们常用“P”和“/P”来做标签。段落的开始用“P”标签，段落的结束用“/P”标签。其中“/P”标签是可以省略的，因为下一个“P”标签的开始就意味着上一个“P”标签的结束。 “P”标签还有一个属性“ALIGN”，它用来指明字符显示时的对齐方式，一般值有“CENTER”、“LEFT”、“RIGHT”3种。 下面，我们用例2-3和例2-4来说明这个标签的用法。 【例2-3】 段落标签示例1 html head title段落标签/title /head body P ALIGN=CENTER浣溪沙 P一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。 P无可奈何花落去，似曾相识燕归来。小园香径几徘徊。/P图2-3 例2-3显示效果 /body /html 其效果如图2-3所示。 【例2-4】 段落标签示例2 html head title段落标签/title /head body 登鹳雀楼图2-4 例2-4显示效果 P白日依山尽， br黄河入海流。 br欲穷千里目， br更上一层楼。 /P /body /html 其效果如图2-4所示。 2.1.4 文字的大小设置 提供设置字号大小的是“FONT”标签，“FONT”标签有一个属性“SIZE”，通过指定“SIZE”属性就能设置字号大小。“SIZE”属性的有效值范围为1～7，其中默认值为3。我们可以在“SIZE”属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。 【例2-5】 文字大小设置示例 html图2-5 设置文字大小 head title字号大小/title /head body font size=7这是size=7的字体/fontP font size=6这是size=6的字体/fontP font size=5这是si