《网页中的文字》课件.ppt

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

2、的方法。2.1 理解与文字相关的理解与文字相关的HTML标签标签2.1.1 换行标签换行标签 换行示例换行示例登鹳雀楼登鹳雀楼 白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲穷千里目，欲穷千里目，更上一层楼。更上一层楼。2.1.32 段落标签段落标签 为了使文字段落排列得整齐，在文字为了使文字段落排列得整齐，在文字段落之间，我们常用段落之间，我们常用“”和和“”来做标签。来做标签。注意注意：其中：其中“”标签是可以省略的，标签是可以省略的，因为下一个因为下一个“”标签的开始就意味着上标签的开始就意味着上一个一个“”标签的结束。标签的结束。“”标签还有一个属性标签还有一个属性“ALING”，

3、它用来指明字符显示时的对齐方式，一般它用来指明字符显示时的对齐方式，一般值有值有“CENTER”、“LEFT”、“RIGHT”3种。种。.图图2-3 2-3 例例2-32-3显示效果显示效果段落标签段落标签浣溪沙浣溪沙 一曲新词酒一杯，去年天气旧亭台，夕阳一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。西下几时回。无可奈何花落去，似曾相识燕归来。小园无可奈何花落去，似曾相识燕归来。小园香径几徘徊。香径几徘徊。2.1.3字体设置标签字体设置标签设置字体标签设置字体标签设置字体大小设置字体大小.“SIZE”属性的有效值范围为属性的有效值范围为17，其中默，其中默认值为认值为3。我们可以在。我们可以

4、在“SIZE”属性值之前属性值之前加上加上“”、“”字符，来指定相对于字符，来指定相对于字号初始值的增量或减量。字号初始值的增量或减量。图图2-5 2-5 设置文字大小设置文字大小文字的字体与样式文字的字体与样式 HTML提供了定义字体的功能，使用提供了定义字体的功能，使用“”标签的标签的“face”属性来完成这属性来完成这个工作。个工作。“face”的属性值可以是本机上的属性值可以是本机上的任一字体类型，但要注意的是，只有对的任一字体类型，但要注意的是，只有对方的计算机中装有相同的字体才可以在对方的计算机中装有相同的字体才可以在对方的浏览器中出现你预先设计的风格。方的浏览器中出现你预先设计的

5、风格。.文字的颜色文字的颜色 文字颜色设置格式如下：文字颜色设置格式如下：现在通过例现在通过例2-8来看看文字颜色设置的来看看文字颜色设置的效果。效果。图图2-8 2-8 设置文字颜色设置文字颜色 例如在例如在HTML语言规范中，可以通过两语言规范中，可以通过两种方式指定颜色：种方式指定颜色：（1）一种方式是以定义好的颜色名称表示，）一种方式是以定义好的颜色名称表示，具体的颜色名称针对不同的浏览器也有具体的颜色名称针对不同的浏览器也有所不同；所不同；（2）另一种方式通过一个以）另一种方式通过一个以“#”开头的开头的6位十六进制数值表示一种颜色，位十六进制数值表示一种颜色，6位数字位数字分为分为

6、3组，每组两位，依次表示红、绿、组，每组两位，依次表示红、绿、蓝蓝3种颜色的强度。种颜色的强度。颜颜 色色 名名 称称十六进制数十六进制数颜颜 色色 名名 称称十六进制数十六进制数颜颜 色色 名名 称称十六进制十六进制数数BlackBlack#000000#000000WhiteWhite#FFFFFF#FFFFFFPurplePurple#800080#800080 GreenGreen#008000#008000YellowYellow#FFFF00#FFFF00TealTeal#008080#008080 SilverSilver#C0C0C0#C0C0C0MaroonMaroon#80

7、0000#800000FuchsiaFuchsia#FF00FF#FF00FF LimeLime#00FF00#00FF00NavyNavy#000080#000080AquaAqua#00FFFF#00FFFF GrayGray#808080#808080RedRed#FF0000#FF0000OliveOlive#808000#808000BlueBlue#0000FF#0000FF表表2-12-1 颜色名称及其对应的十六进制数表颜色名称及其对应的十六进制数表（1）“”和和“”：粗体。：粗体。（2）“”和和“”：斜体。：斜体。（3）“”和和“”：加下划线。：加下划线。（4）“”和和“”:大

8、型字体。大型字体。（5）“”和和“”:小型小型字体。字体。其他字体设置标签其他字体设置标签图图2-7 2-7 设置文字样式设置文字样式2.1.4 位置控制位置控制 通过通过“ALIGN”属性属性可以选择文字或可以选择文字或图片的对齐方式，图片的对齐方式，“LEFT”表示向左对齐，表示向左对齐，“RIGHT”表示向右对齐，表示向右对齐，“CENTER”表示居中。基本语法如下：表示居中。基本语法如下：.图图2-9 2-9 设置文字位置设置文字位置位置控制位置控制你好你好!你好你好!你好你好!2.1.6 无序号列表标签无序号列表标签 无序号列表使用的一对标签是无序号列表使用的一对标签是“”和和“”，

9、每一个列表项前使用，每一个列表项前使用“”。其结构如下所示：。其结构如下所示：第一项第一项 第二项第二项 第三项第三项 图图2-10 2-10 不带有序号的列表不带有序号的列表 第一项第一项 第二项第二项 第三项第三项 例如例例如例2-10所示的代码。所示的代码。【例例2-10】无序号列表示例无序号列表示例 无序列表无序列表 这是一个无序列表：这是一个无序列表：图图2-10 不带有序号的列表不带有序号的列表 国际国际Internet提供的服务有：提供的服务有：WWW服务服务 文件传输服务文件传输服务电子邮件服务电子邮件服务 远程登录服务远程登录服务 其他服务其他服务 2.1.7 序号列表（有序

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

11、务服务 文件传输服务文件传输服务 电子邮件服务电子邮件服务远程登录服务远程登录服务 其他服务其他服务 2.1.8 水平线标签水平线标签2.2 在在Dreamweaver中插入文本中插入文本 Dreamweaver是是“所见即所得所见即所得”的网页编辑器，插入的网页编辑器，插入文本非常方便。文本非常方便。在页面中插入文字的方法有三种。在页面中插入文字的方法有三种。第一种是直接输入，在文档窗口中，将光标定位到要输入第一种是直接输入，在文档窗口中，将光标定位到要输入文本的地方，直接输入文本即可。文本的地方，直接输入文本即可。注意：换行和分段注意：换行和分段第二种是粘贴法：先在其它文字编辑工具中复制要

12、输入的第二种是粘贴法：先在其它文字编辑工具中复制要输入的文本，然后在文档窗口的插入点单击鼠标右键，在弹出的文本，然后在文档窗口的插入点单击鼠标右键，在弹出的快捷菜单中选择快捷菜单中选择【粘贴粘贴】命令。命令。第三种是导入已第三种是导入已有的有的Word文档。文档。选择主菜单选择主菜单【文件文件】|【导入导入】|【Word文档文档】命令。命令。Dreamweaver提供了两种方法对文本提供了两种方法对文本进行格式化，一种是使用文本的属性标签，进行格式化，一种是使用文本的属性标签，另一种是使用样式表。另一种是使用样式表。文本格式化文本格式化图图2-13 “2-13 “属性属性”面板面板1 1用用“

13、格式格式”下拉框设置文字大小下拉框设置文字大小2 2用用“大小大小”下拉框设置文字大小下拉框设置文字大小3 3设置段落的对齐方式设置段落的对齐方式4 4设置文字的加粗、倾斜和颜色属性设置文字的加粗、倾斜和颜色属性5 5设置文字的字体列表设置文字的字体列表注意：鼠标指针和文本光标的区别注意：鼠标指针和文本光标的区别l 水平线的使用有助于协调安排页面信息。在页面水平线的使用有助于协调安排页面信息。在页面设计时使用水平线可以非常直观地将页面中不同设计时使用水平线可以非常直观地将页面中不同的内容进行分隔，使得页面内容更加分明、简洁。的内容进行分隔，使得页面内容更加分明、简洁。l 在要插入水平线的位置单

14、击鼠标。选择主菜单在要插入水平线的位置单击鼠标。选择主菜单【插入插入】|【HTML】|【水平线水平线】命令，即可插入命令，即可插入一条水平线。一条水平线。l 选中水平线对象，可以在属性面板中对水平线的选中水平线对象，可以在属性面板中对水平线的名称、宽高、对齐方式以及有无阴影等进行设置。名称、宽高、对齐方式以及有无阴影等进行设置。l 另外，也可以在插入工具栏中选择另外，也可以在插入工具栏中选择“HTML”类类别，用按钮插入水平线。别，用按钮插入水平线。补充内容补充内容1：插入水平线：插入水平线补充内容补充内容2：插入特殊字符：插入特殊字符 在输入文字的时候，有些特殊的字符在键盘在输入文字的时候，

15、有些特殊的字符在键盘中找不到，可以通过中找不到，可以通过Dreamweaver中输入中输入特殊字符的功能进行输入，在插入工具栏中特殊字符的功能进行输入，在插入工具栏中选择选择“文本文本”类别，选择字符按钮可以插入类别，选择字符按钮可以插入相应特殊字符。相应特殊字符。其中，其中，“换行符换行符”实质上是插入一个实质上是插入一个标标签，也可以用签，也可以用Shift+Enter组合键输入。组合键输入。“不不换行空格换行空格”用于在文档中插入一个不会中断用于在文档中插入一个不会中断两端内容联系的空格两端内容联系的空格(也可以用也可以用Ctrl+Shift+Space组合键输入组合键输入)。如果要插入

16、更多的字符，可以选择如果要插入更多的字符，可以选择“其它字符其它字符”，显示所示的对话框，选择需要的字符单击显示所示的对话框，选择需要的字符单击“确定确定”按钮即可。按钮即可。补充内容补充内容3：输入多个空格：输入多个空格 如何在输入文本时输入多个空格，需要做的如何在输入文本时输入多个空格，需要做的设置：选择编辑菜单设置：选择编辑菜单/首选参数，勾选允许多首选参数，勾选允许多个连续的空格选项。个连续的空格选项。2.3 实践与练习：输入带有下标的公式实践与练习：输入带有下标的公式 本练习通过制作一个带有下标的化学本练习通过制作一个带有下标的化学公式，掌握公式，掌握“”标签的使用方法。标签的使用方法。本例最终效果如图本例最终效果如图2-45所示。所示。图图2-45 2-45 完整的化学式完整的化学式小小 结结 在这一章中，学习了如何设置文字的在这一章中，学习了如何设置文字的格式。一个网页无论多么与众不同，它也格式。一个网页无论多么与众不同，它也不能少了文字的参与，因此必须掌握在网不能少了文字的参与，因此必须掌握在网页中插入文字及设置文字格式的方法。本页中插入文字及设置文字格式的方法。本章的重点是与文字相关的各种章的重点是与文字相关的各种HTML标签，标签，以及如何使用以及如何使用Dreamweaver 8设置网页上设置网页上的文字样式。的文字样式。