网页制作与开发教程 教学课件 张强 高建华 温谦 第2章 网页中的文字.pdfVIP

第2章 网页中的文字 2.1 理解与文字相关的HTML标签 2.2 在Dreamweaver 中插入文本 2.3 实践与练习：一封家书 2.4 实践与练习：使用项目列表和编号列表 2.5 实践与练习：输入带有下标的公式 2.6 使用CSS格式化文本 2.7 在Dreamweaver 中用样式表进行文本格式化 2.8 实践与练习：在文档中设置使用CSS 小结 网页中最基本也最常用的是文字。因此 在这一章，开始讲解如何在网页中使用文 字以及设置文字的方法。本章将首先介绍 使用HTML对文本进行设置的方法，然后初 步介绍使用CSS进行文本格式化的方法。 由于CSS在网页设计中具有十分重要的作 用，在本书后续章节中，还会对CSS的使 用进行更为深入的介绍。 2.1 理解与文字相关的HTML标签 本书对很多内容的介绍都遵循先讲解 HTML标签，再讲解如何在Dreamweaver 使用它。例如，本节先脱离Dreameaver环 境，用手工编写一些非常简单的HTML网页， 目的是使读者理解HTML语言的原理。然后 再介绍如何使用Dreamweaver来实现，以 提高制作网页的工作效率。 2.1.1 文字排版的简单操作 图2-1 未使用“换行”标签的效果 【例2-1 】 文字排版示例图2-1 未使用“换行” 标签的效果 html head title无换行示例/title /head body 登鹳雀楼　白日依山尽，黄河入海流。 欲穷千里目，更上一层楼。 /body /html 其效果如图2-1所示。 2.1.2 换行标签 在编写HTML文件时，我们不必考虑太 细的设置，也不必理会段落过长的部分会 被浏览器切掉。因为，在HTML语言规范里， 每当浏览器窗口被缩小时，浏览器会自动 将右边的文字转至下一行。 如果未到换行的位置，就希望强制换行， 编写者可以在需要换行的地方，加上“br” 标签。 图2-2 使用“换行”标签后的效果 【例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”标签还有一个属性“ALING”，它 用来指明字符显示时的对齐方式，一般值 有“CENTER”、“LEFT”、“RIGHT”3种。 下面，我们用例2-3和例2-4来说明这个 标签的用法。 图2-3 例2-3显示效果 【例2-3 】 段落标签示例1 html head title段落标签/title /head body P ALIGN=CENTER浣溪沙 P一曲新词酒一杯，去年天气旧亭台， 夕阳西下几时回。 P无可奈何花落去，似曾相识燕归来。 小园香径几徘徊。/P图2-3 例2-3显示效