第 5 章 文本 文本在网络上传输速度较快，用户可以很方便地 浏览和下载文本信息，故其成为网页主要的信息 载体。整齐划一、大小适中的文本能够体现网页 的视觉效果。因而文本处理是设计精美网页的第 一步。本章将结合具体实例介绍在 Dreamweaver CS4 中如何插入文本，对文本进行排版及一些文 本辅助功能。

Presentation on theme: "第 5 章 文本 文本在网络上传输速度较快，用户可以很方便地 浏览和下载文本信息，故其成为网页主要的信息 载体。整齐划一、大小适中的文本能够体现网页 的视觉效果。因而文本处理是设计精美网页的第 一步。本章将结合具体实例介绍在 Dreamweaver CS4 中如何插入文本，对文本进行排版及一些文 本辅助功能。"— Presentation transcript:

1 第 5 章 文本 文本在网络上传输速度较快，用户可以很方便地 浏览和下载文本信息，故其成为网页主要的信息 载体。整齐划一、大小适中的文本能够体现网页 的视觉效果。因而文本处理是设计精美网页的第 一步。本章将结合具体实例介绍在 Dreamweaver CS4 中如何插入文本，对文本进行排版及一些文 本辅助功能。

2 5.1 插入文本 Dreamweaver CS4 提供了多种插入文本的 方法供读者选择。 标题、栏目名称等少量文本，可以选择直 接在文档窗口中键入；段落文本，可以选 择从其它文档中复制粘贴；整篇文章或表 格，可以选择导入 Word 、 Excel 文档。

3 5.1.1 将文本添加到文档 在 Dreamweaver CS4 中输入文本与 Word 略有不同，下面 通过实例来说明。要注意不换行空格、换行符的插入，文 本添加效果如下图所示。 插入 “ 不换行空格 ” 方法： 1 ） “ 插入 ” 面板 ->“ 文本 ” 面板 -> 字符 -> 不换行空格 2 ）在 html 代码中输入 “ ” 3 ） 把中文输入法变成全角形 式，然后按空格键

4 5.1.2 插入特殊字符 Dreamweaver CS4 提供了丰富的特殊字符插入功能，可 以插入如注册商标、版权、货币符号等特殊符号。下面 以网页中经常用到的版权符号为例，演示如何在文档中 插入特殊符号。具体操作步骤如下：

5 5.1.2 插入特殊字符 插入特殊字符的方法： 方法 1 ： “ 插入 ” 面板 ->“ 文本：面板 ”-> 字符 方法 2 ：使用中文输入法的软键盘来插入特殊 字符

6 实训 1 1 、仿照 文本实训 1 示例图.jpg 文件所示的页面 对 5_1.html 插入文本，请分别把相应的文本 插入到该网页表格中的第 2 列和第 3 列。

7 实训 1 2 、把左边的文本设置为 5 个段落，并在相应位 置插入空格及其他特殊符号（提示：特殊符 号的输入使用中文输入法的软键盘）。

8 实训 1 3 、在右边的文本中，把诗的标题作为第 1 个段落显 示（注意：在名称和作者之间输入空格），诗的 内容作为第 2 个段落（段落内部以换行符进行换 行），版权说明作为第 3 个段落（注意插入版权符 号）。

9 5.1.3 导入数据文档 除了直接键入文本和复制粘贴文本以外， Dreamweaver CS4 还可以直接将表格式文档、 Word 文档、 Excel 文档导 入到当前文档，省去了复制粘贴的麻烦。下面通过实例演 示如何导入 Excel 表格，最终效果如下图所示。 方法 : “ 文件 ” 菜单 -> 导入 -> 选 择要导入的文档

10 5.1.4 插入日期 在网页中经常需要插入日期，比如网页的更新日期，文章 的上传日期等。 Dreamweaver CS4 提供了日期对象，可 以方便地插入当前日期。下面这个例子就是利用 “ 日期 ” 按 钮插入更新时间，效果如下图所示，更新时间显示为当前 编辑文档的时间。 方法 : “ 插入 ” 面板 ->“ 常用 ”-> 日期

11 5.2 设置文本格式 5.1 节介绍了在网页中插入文本的几种方法， 由于插入的文本大小、字体格式不一致， 需要对文本属性进行设置，使其风格保持 统一。

12 5.2.1 关于设置文本格式 设置文本格式有两种方法：使用 HTML 标签格式化文本， 使用层叠样式表（ CSS ）。 使用 HTML 标签和 CSS 都可以控制文本属性，包括特定字 体和字大小；粗体、斜体、下划线；文本颜色等。两者区 别在于，使用 HTML 标签仅仅对当前应用的文本有效，当 改变设置时，无法实现文本自动更新。而 CSS 则不同，通 过 CSS 事先定义好文本样式，当改变 CSS 样式表时，所有 应用该样式的文本将自动更新。此外，使用 CSS 能更精 确地定义字体的大小，还可以确保字体在多个浏览器中的 一致性。 默认情况下， Dreamweaver CS4 使用 CSS 而不是 HTML 标签指定页面属性。 CSS 功能强大，除控制文本外， CSS 还可以控制网页中的其他元素。这里主要介绍使用属性检 查器设置文本属性的基本操作。

13 5.2.2 使用属性检查器设置文本属性 使用 “ 属性检查器 ” 可以方便地设置字体的类型、格式、大 小、颜色，对于初学者来说这种方法简单易用。下面结合 具体实例来学习如何使用 “ 属性检查器 ” 设置文本属性，效 果如下图所示。页面中的文本格式为段落，字体为宋体， 颜色为灰色，大小为 12 像素。

14 实训 2 在完成实训 1 的基础上，通过应用 CSS 规则，完 成如 文本实训 2 实例图.jpg 所示的网页。

15 实训 2 1 、对左边栏的诗词标题都设置为同一颜色。步骤： 1 ）选中第 1 个标 题 “ 【钗头凤】 ” 2 ）属性面板（ CSS 格式下） -> 选择一种文本颜色 3 ）新建 CSS 规则：选择器类型：类 -> 选择器名称：如输入 title2-> 确定 4 ）对其他几个诗词标题都应用同一个 CSS 规则：选中需设置的文 字；属性面板（ CSS 格式下） -> 目标规则：选择刚才新建的规则名称 （如 title2 ）

16 实训 2 2 、通过新建 CSS 规则，把右边栏的诗词标题和作者名设置为蓝色， 字体大小为 x-large ，以粗体显示。 步骤： 1 ）选中 “ 蝶恋花 柳永 ” 2 ）属性面板（ CSS 格式下） -> 选择一种文本颜色 （蓝色） 3 ）新建 CSS 规则：选择器类型：类 -> 选择器名称：如输入 title1-> 确定 4 ）把光标放置在该文字内，保证 “ 属性面板 ” 的 “ 目标规则 ” 下拉列表 中选中的是步骤 3 ）中建立的规则名称（如 title1 ），此时设置文字的 字体大小和粗体效果。

17 实训 2 3 、通过新建 CSS 规则，把右边栏的诗词内容设置成字体大小为 large 并以粗体显示。 步骤参照上一步。

18 5.3 设置段落格式 5.2 节介绍了使用属性检查器设置文本格式的方法及操作 步骤，本节将学习设置段落格式，包括对齐文本、缩进文 本、使用水平线等常用功能。 段落前空两格： 光标插入到段落前，切换到中文输入法，把 " 半角 " 的 输入方式切换为 “ 全角 ” 的输入方式，然后在段落之前按两 次空格键，即可在段落前空两格。

19 5.3 设置段落格式 设置段落的两种方法： 方法 1 ： “ 换行符 ” 段落：使用 “Shift+Enter” 组合键，此时， 段落之间不空行，在代码标签中以 表示。 方法 2 ：使用 “Enter” 键直接换行，此时，段落之间空一行， 在代码标签中以 表示。

20 5.3.1 对齐文本 在网页文字排版时，经常用到对齐文本功能。对齐文本方 式主要有四种：左对齐，居中对齐，右对齐，两端对齐。 操作步骤类似，下面以其中一种对齐方式 “ 右对齐 ” 为例来 说明如何操作。 方法：把光标放到文本 的任意位置 ->“ 格式 ” 菜单 ->“ 对齐 ”-> 选择一种对其 方式

21 5.3.2 缩进文本 在对网页中的段落进行排版布局时，经常会用到 “ 缩进文本 ” 命令，缩进页面两侧的文本长度，留 出一定的空白区域，使页面更美观。其操作步骤 如下：

22 5.3.2 缩进文本 文本缩进的方法：  方法 1 ：光标放置在文本任意位置； “ 格式 ” 菜单 ->“ 缩进 ”  方法 2 ：光标放置在文本任意位置； “ 属性 ” 面板（ html 格式） ->“ 缩进 ” 按钮 文本凸出的方法：  方法 1 ：光标放置在文本任意位置； “ 格式 ” 菜单 ->“ 凸出 ”  方法 2 ：光标放置在文本任意位置； “ 属性 ” 面板（ html 格式） ->“ 凸出 ” 按钮

23 5.3.3 使用水平线 使用水平线进行文本段落分割，也是常用的方法。例如， 在制作网页时，通常会在页面下部版权文字的上方插入一 条水平线，用以分隔文档内容，使文档结构清晰明确。效 果如下图所示。 方法： “ 插入 ” 面板 ->“ 常用 ”-> 水平线

24 实训 3 新建 html 网页，把实训 3 文本.txt 中的文本复制到该网页上， 通过把这些文本格式化为 4 个段落，并对相应的部分进行 缩进以及段前空两格的设置，两个主要部分之间用水平线 隔开（使用 “ 插入 ” 面板添加水平线）。如下图所示。

25 5.4 列表 在网页中使用列表将内容分级显示，使侧重点一目了然，内容更有条理性。 在 Dreamweaver CS4 中创建列表有两种方法：使用 “ 属性检查器 ” 或 “ 格式 ” 菜 单下的 “ 列表 ” 命令。 Dreamweaver CS4 中的列表主要分为项目列表，编号 列表，定义列表三种。搜狐网站中就同时应用了上述三种样式的列表，如 下图所示。

26 5.4.1 创建列表 创建列表有两种方式 : （ 1 ）创建新列表；（ 2 ）使用现有文本创建列表。两者创建 列表方式操作类似。 创建步骤：选中列表中的所有项目， 方法 1 ：属性面板（ HTML 格式） -> 项目列表按钮 / 编号列表按钮 方法 2 ： “ 格式 ” 菜单 ->“ 列表 ”-> 项目列表 / 编号列表 方法 3 ： “ 插入 ” 面板 ->“ 文本 ”->ul 项目列表 /ol 编号列表 撤销方法：选中需要撤销的列表项， “ 格式 ” 菜单 ->“ 列表 ”->“ 无 ” ， 或者再按一次属性面板或插入面板上的项目 / 编号列表按钮

27 5.4.1 创建列表 嵌套列表：利用缩进按钮建立嵌套列表 下面结合实例说明如何创建嵌套列表，效果如 下图所示。

28 5.4.2 设置列表属性 通过设置列表属性，可以改变列表的类型以及样 式。下面就以上一节创建的嵌套列表为例，改变 其属性。具体操作步骤如下： 菜单 “ 格式 ”|“ 列表 ”|“ 属性 ”

29 实训 4 把素材中的 5_4.html 制作成如下图所示的页 面：

30 5.5 检查拼写 在输入文本时，有时会遇到拼写错误。使 用 Dreamweaver CS4 的 “ 检查拼写 ” 命令， 可以自动检查出当前文档中文本拼写的错 误并将其更正，大大提高了工作效率。 “ 命令 ” 菜单 ->“ 检查拼写 ” 命令 或者按 “Shift+F7” 组合键

31 5.6 查找和替换文本 使用 Dreamweaver CS4 的 “ 查找和替换文本 ” 功能，可以在 文档或站点中方便地查找出指定的文本或代码，并进行替 换，省去了亲自动手查找修改的麻烦，大大提高了网页编 辑与修改的效率。下面举例来说明如何使用该功能。 “ 编辑 ” 菜单 ->“ 查找和替换 ” 命令