《网页中的文字》课件

1、在Dreamweaver中插入文本 2.5实践与练习：使用项目列表和编号列表 2.3实践与练习：一封家书2.2理解与文字相关的HTML标签 2.1第3讲 网页中的文字实践与练习：输入带有下标的公式 2.4小结 在Dreamweaver中插入文本 2.5实践与练习：使用项 网页中最基本也最常用的是文字。因此在这一章，开始讲解如何在网页中使用文字以及设置文字的方法。本章将介绍使用HTML对文本进行设置的方法。 网页中最基本也最常用的是文字。因此在这一2.1 理解与文字相关的HTML标签2.1.1 换行标签 2.1 理解与文字相关的HTML标签2.1.1 换行标签换行示例登鹳雀楼 白日依山尽， 黄河

2、入海流。 欲穷千里目， 更上一层楼。 2.1.32 段落标签 为了使文字段落排列得整齐，在文字段落之间，我们常用“”和“”来做标签。 注意：其中“”标签是可以省略的，因为下一个“”标签的开始就意味着上一个“”标签的结束。2.1.32 段落标签 为了使文字段落排列 “”标签还有一个属性“ALING”，它用来指明字符显示时的对齐方式，一般值有“CENTER”、“LEFT”、“RIGHT”3种。 . “”标签还有一个属性“ALING”图2-3 例2-3显示效果图2-3 例2-3显示效果段落标签浣溪沙 一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。 无可奈何花落去，似曾相识燕归来。小园香径几徘徊。

3、2.1.3字体设置标签设置字体标签设置字体大小.“SIZE”属性的有效值范围为17，其中默认值为3。我们可以在“SIZE”属性值之前加上“”、“”字符，来指定相对于字号初始值的增量或减量。 2.1.3字体设置标签设置字体标签/fon图2-5 设置文字大小图2-5 设置文字大小文字的字体与样式 HTML提供了定义字体的功能，使用“”标签的“face”属性来完成这个工作。“face”的属性值可以是本机上的任一字体类型，但要注意的是，只有对方的计算机中装有相同的字体才可以在对方的浏览器中出现你预先设计的风格。.文字的字体与样式 HTML提供了定义字体的 文字的颜色 文字颜色设置格式如下： 现在通过例

4、2-8来看看文字颜色设置的效果。 文字的颜色 文字颜色设置格式如下：图2-8 设置文字颜色图2-8 设置文字颜色 例如在HTML语言规范中，可以通过两种方式指定颜色：（1）一种方式是以定义好的颜色名称表示，具体的颜色名称针对不同的浏览器也有所不同；（2）另一种方式通过一个以“#”开头的6位十六进制数值表示一种颜色，6位数字分为3组，每组两位，依次表示红、绿、蓝3种颜色的强度。 例如在HTML语言规范中，可以通过两种方颜 色 名 称十六进制数颜 色 名 称十六进制数颜 色 名 称十六进制数Black#000000White#FFFFFFPurple#800080Green#008000Yello

5、w#FFFF00Teal#008080Silver#C0C0C0Maroon#800000Fuchsia#FF00FFLime#00FF00Navy#000080Aqua#00FFFFGray#808080Red#FF0000Olive#808000Blue#0000FF表2-1 颜色名称及其对应的十六进制数表 颜 色 名 称十六进制数颜 色 名 称十六进制数颜 色 名 （1）“”和“”：粗体。（2）“”和“”：斜体。（3）“”和“”：加下划线。（4）“”和“”:大型字体。（5）“”和“”:小型字体。其他字体设置标签（1）“”和“”：粗体。其他字体设置标签图2-7 设置文字样式图2-7 设置文

6、字样式2.1.4 位置控制 通过“ALIGN”属性可以选择文字或图片的对齐方式，“LEFT”表示向左对齐，“RIGHT”表示向右对齐，“CENTER”表示居中。基本语法如下： . 2.1.4 位置控制 通过“ALIGN”属图2-9 设置文字位置图2-9 设置文字位置位置控制你好! 你好! 你好! 2.1.6 无序号列表标签 无序号列表使用的一对标签是“”和“”，每一个列表项前使用“”。其结构如下所示： 第一项 第二项 第三项 2.1.6 无序号列表标签 无序号列表使图2-10 不带有序号的列表图2-10 不带有序号的列表 第一项 第二项 第三项 例如例2-10所示的代码。【例2-10】 无序号

7、列表示例 无序列表 这是一个无序列表： 图2-10 不带有序号的列表 国际Internet提供的服务有： WWW服务 文件传输服务电子邮件服务 远程登录服务 其他服务 【例2-10】 无序号列表示例2.1.7 序号列表（有序列表标签） 序号列表和无序号列表的使用方法基本相同，它使用标签“”和“”，每一个列表项前使用“”。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：2.1.7 序号列表（有序列表标签） 序号 第一项 第二项 第三项 例如例2-11所示的代码图2-11 带有序号的列表图2-11 带有序号的列表【例2-11】 序号列表示例 有序列表 这是一个有序列表： 国际Intern

8、et提供的服务有： WWW服务 文件传输服务 电子邮件服务远程登录服务 其他服务 【例2-11】 序号列表示例2.1.8 水平线标签2.1.8 水平线标签2.2 在Dreamweaver中插入文本 Dreamweaver是“所见即所得”的网页编辑器，插入文本非常方便。在页面中插入文字的方法有三种。第一种是直接输入，在文档窗口中，将光标定位到要输入文本的地方，直接输入文本即可。 注意：换行和分段第二种是粘贴法：先在其它文字编辑工具中复制要输入的文本，然后在文档窗口的插入点单击鼠标右键，在弹出的快捷菜单中选择【粘贴】命令。第三种是导入已有的Word文档。 选择主菜单【文件】|【导入】|【Word文

9、档】命令。2.2 在Dreamweaver中插入文本 Dreamweaver提供了两种方法对文本进行格式化，一种是使用文本的属性标签，另一种是使用样式表。文本格式化 Dreamweaver提供了两种方法对文图2-13 “属性”面板图2-13 “属性”面板1用“格式”下拉框设置文字大小2用“大小”下拉框设置文字大小3设置段落的对齐方式4设置文字的加粗、倾斜和颜色属性5设置文字的字体列表注意：鼠标指针和文本光标的区别1用“格式”下拉框设置文字大小水平线的使用有助于协调安排页面信息。在页面设计时使用水平线可以非常直观地将页面中不同的内容进行分隔，使得页面内容更加分明、简洁。在要插入水平线的位置单击鼠

10、标。选择主菜单【插入】|【HTML】|【水平线】命令，即可插入一条水平线。选中水平线对象，可以在属性面板中对水平线的名称、宽高、对齐方式以及有无阴影等进行设置。另外，也可以在插入工具栏中选择“HTML”类别，用按钮插入水平线。补充内容1：插入水平线水平线的使用有助于协调安排页面信息。在页面设计时使用水平线可补充内容2：插入特殊字符在输入文字的时候，有些特殊的字符在键盘中找不到，可以通过Dreamweaver中输入特殊字符的功能进行输入，在插入工具栏中选择“文本”类别，选择字符按钮可以插入相应特殊字符。其中，“换行符”实质上是插入一个标签，也可以用Shift+Enter组合键输入。“不换行空格”用于在文档中插入一个不会中断两端内容联系的空格(也可以用Ctrl+Shift+Space组合键输入)。如果要插入更多的字符，可以选择“其它字符”，显示所示的对话框，选择需要的字符单击“确定”按钮即可。补充内容2：插入特殊字符在输入文字的时候，有些特殊的字符在键补充内容3：输入多个空格如何在输入文本时输入多个空格，需要做的设置：选择编辑菜单/首选参数，勾选允许多个连续的空格选项。补充内容3：输入多个空格如何在输入文本时输入多个空格，需要做2.3 实践与练习：输入带有下标的公式 本练习通过制作一个带有下标的化学公式，掌握“”标签的使用方法。本例最终效果如图2-45所示。2.3 实践与练习：输入带