CH3 网页文本处理.ppt

通过本章学习 应该掌握以下内容 HTML及其功能利用HTML创建和测试Web页的方法利用HTML设置标题和文字利用HTML设置段落利用HTML进行文本格式的处理利用Dreamweaver处理文本 第3章网页文本的处理 3 1利用HTML处理文本 3 1 1HTML基础 一名网页设计高手 就必需掌握HTML语言 HTML是网络的通用语言 它允许设计者建立文本与图像相结合的复杂页面 这些页面可以被网上任何人浏览 无论使用的是什么类型的电脑或浏览器 HTML作为一种网页编辑语言 易学易懂 能制作出精美的网页效果 其他的专用网页编辑器 如FrontPage Dreamweaver 都是以HTML为基础的 1 标记符 标记符又称标签 HTML是影响网页内容显示格式的标记符集合 浏览器根据标记符决定网页的实际显示效果 在HTML中 所有的标记符都用尖括号括起来 例如 表示HTML标记符 绝大多数标记符都是成对出现的 包括开始标记符和结束标记符 开始标记符和相应的结束标记符定义了标记符所影响的范围 结束标记符与开始标记符的区别是有一个斜线 如 属性是用来描述对象特征的特性 在HTML中 所有的属性都放置在开始标记符的尖括号里 属性与标记符之间用空格分隔 属性的值放在相应属性之后 用等号分隔 而不同的属性之间用空格分隔 格式为 受影响的内容HTML属性通常也不区分大小写 为了区分标记符及其属性 将标记符用大写字母表示 而属性用小写字母表示 HTML标记符是不区分大小写的 但通常约定标记符使用大写字母 这有利于HTML文档的维护 2 HTML文档的基本结构 文本标题文本内容 这两个标记符是HTML文档的标记符 处于文档的最前端 表示文档的开始 即浏览器从开始解释 而则位于文件的最后一行 这样的结果表示这一整份的文档都是HTML语法的文档 1 HTML标记符 是HTML文件头标记符 用来描述HTML首部的内容 说明文档的整体信息 所有首部信息并不会出现在利用WWW浏览器所看到的窗体中 通常与某些标记符一起使用 如标记符 2 HEAD标记符 3 TITLE标记符指的是一份文档的标题 通常来说 每一份文档都应该有一个标题来简述这一份文档的特色或是主题 对于WWW浏览器而言 标题所在的位置虽然依照浏览器的不同而不同 但是大部分都位于浏览器的最上方 4 BODY标记符指的是定义出一个HTML文档的体部 位于首部下面 在标记符内的文字 所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中 也是一个建议选项 3 创建和测试Web页 1 创建Web页由于HTML文件的实质就是文本文件 因此可以用任何文本编辑器编辑HTML文件 通常可以使用Windows系统中的 记事本 程序 2 测试Web页保存了Web页之后 在所选择的文件夹中将包含所创建的Web页 该Web页文件左边有一个图标 表示可以由IE将其打开 找到刚创建的Web页并用鼠标左键双击 则可以自动启动IE浏览器 此时所创建Web页中的内容将在浏览器中显示 3 1 2标题处理 在HTML中 用户可以通过Hn标记符来标识文档中的标题和副标题 其中n是1到6的数字 表示最大的标题 表示最小的标题 使用标题样式时 必须使用结束标记符 标题文字标记符的格式 标题文字属性align用来设置标题在页面中的对齐方式 left 左对齐 center 居中 或right 右对齐 3 1 3段落处理 在HTML中段落处理是通过段落标记来完成的 常用的段落标记符有 注释标记符 强制换行标记符 强制换段标记符 分区显示标记符和水平线等 HTML的注释标记符的格式为 注释并不局限于一行 长度不受限制 结束标记符不必与开始标记符在同一行 注释的内容不在浏览器中显示 1 注释标记符 2 强制换行标记符 强制换行标记符为 放在一行的末尾 可以使后面的文字 图片 表格等显示于下一行 而又不会在行与行之间留下空行 即强制文本换行 强制换行标记符的格式为 文字浏览器解释时 从该处换行 换行标记符单独使用 可使页面清晰 整齐 3 强制换段标记符 换段标记符有两个 一个为强制换段标记符 另一个为设置段落标记符 强制换段标记符的格式为 文字标记不但能使后面的文字换到下一行 还可以使两段之间多一空行 设置段落标记符的格式为 文字其中属性align用来设置段落的对齐方式 可以为left center或right 分别表示居左 居中 居右 默认方式为left 4 显示预排格式标记符 如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式 可以使用标记符将预先排好的格式保留下来 显示预排格式标记符的格式为 预先排好的格式在预排格式中 仍可以用HTML语言对文字的格式进行设置 如文字的颜色 大小等 5 分区显示标记符 分区显示标记符的格式为 文本或图像 6 水平线 在页面中插入一条水平标尺线 可以使不同功能的文字分隔开 看起来整齐 明了 水平线标记符的格式为 在网页中为了增强页面的层次 其中的文字可以用不同的大小 字体 字型和颜色 通常用FONT标记符来完成 FONT标记符设置格式为 被设置的文字 3 1 4文本格式处理 1 文字设置 1 size属性 size属性是字号属性 用于控制文字的大小 它的取值既可以是绝对值 也可以是相对值 使用绝对数值时 字号属性的值可以从1到7 3是默认值 值越大 显示的文字越大 使用相对数值时 可以用 或 来指定相对于当前默认值的字号 例如 1表示比当前默认字号大1号 2 face属性 face属性是字体标记符 用来指定字体样式 字体样式也就是通常所说的 字体 例如 常用的英文字体有 TimesNewRoman Arial 等 常用的中文字体有 宋体 楷体 等 在编写网页时 通过在FONT标记符中指定face属性 用户可以指定一个或几个字体名称 用逗号隔开 3 color属性 FONT标记符的color属性可用来控制文字的颜色 属性值可以是颜色名称或十六进制值 2 格式处理 HTML中的格式标记符有 这些标记符都是在标记符中的 1 设置页面背景颜色在标记符中使用bgcolor属性可以为网页设置背景颜色 有16种标准颜色可供选择 2 设置页面背景图像单纯使用一种颜色作为背景显然有些单调 网页设计者也可选择特定图案作为页面的背景 使用BODY标记符的background属性即可 HTML语句为 3 设置页面属性 3 设置文字和超链接的颜色在设置了背景图案或背景颜色后 常常需要更改正文字符和超链接的颜色 以便与背景相适应 设置正文和超链接颜色时 可以使用BODY标记符的text link vlink和alink属性 其中 text属性用于设置正文的颜色 link属性用于设置未被访问的超链接的颜色 vlink用于设置已被访问过的超链接的颜色 alink用于设置活动超链接 即当前选定的超链接 的颜色 1 自动换行 在输入文字时 若某一行的长度超过了DreamweaverMX窗口的显示范围 文字将自动换到下一行 2 利用 Enter 换行 在输入文字后按 Enter 键 文字成段 且上下段之间空一行 3 利用 Shift Enter 键换行 如果想要将文字手动换行 中间又不能出现空白行 可以按 Shift Enter 键 3 2利用Dreamweaver处理网页文本 3 2 1输入文本 1 换行 有时为了内容的需要 要在网页中插入一些键盘上没有的特殊字符 在Dreamweaver中 这些特殊字符不仅可以通过 插入 菜单下的 特殊字符 命令来插入 还可以通过插入 字符 面板来直接插入 2 插入特殊的字符 DreamweaverMX中 在文本开始处按空格键是不会输入空格的 在文字之间按空格键可以输入半个空格 如果要在网页中输入空格 可以采用如下三种方法 1 按住 Ctrl Shift 键 按一次空格键 键入半个空格 2 将输入法由半角状态切换到在全角状态 按一次空格键 键入一个空格 3 将编辑窗口切换到代码视图 在要输入空格的地方输入代码代码 产生半个空格 3 输入空格 在网页中加入适当的注释文字 可以为日后修改 管理网页提供方便 由于批注只有在编辑网页时或查看原代码时才能看到 所以不必担心批注文字会破坏版面 将光标移到想要插入的注释地方 然后在插入 常用 面板中单击 注释 按钮 或选择 插入 注释 命令 弹出 注释 对话框 再单击 确定 按钮即可 4 加入注释文字 5 插入水平线 在页面中插入水平线的方法如下 首先确定插入水平线的位置 然后单击插入面板上 HTML 选项卡中的按钮 或选择 插入 水平线 菜单命令 则可在页面中插入了一条水平线 选中水平线 打开水平线属性面板 可以设置水平线的属性 如果要在文档中查找或替找某个文字 可利用Dreamweaver提供的查找和替换功能 选择 编辑 查找和替换 命令 打开 查找和替换 对话框 在该对话框中进行查找和替换操作 3 2 2查找 替换文本的内容 在Dreamweaver中设置文本格式可以通过属性面板 类似于MicrosoftWord中对文本的属性设置 包括段落的格式 字体 字号 字的颜色 字体加粗 倾斜 对齐方式 左对齐 居中 右对齐 文字所链接的路径或URL等 3 2 3设置文本格式 3 2 4添加和删除中文字体 在Dreamweaver英文版中 默认状态只有西文的字体可供选择 要使用中文字体可以事先将计算机里的中文字体添加到Dreamweaver的字体列表中 在创建文档前或创建文档后 还需要对页面的属性进行必要设置 设定一些影响整个网页的参数 设置页面属性时 选择 修改 页面属性 命令 出现 页面属性 对话框中进行页面属性的设置 3 2 5设置页面的属性 1 操作要求 1 输入文本打开 课堂实践 网站中文件夹 02文本操作 中的网页文档 02 html 输入标题 湘江谷 然后输入正文内容 这些文字内容存储在文件夹 02文本操作 中子文件夹 text 的文本文件 02 txt 中 课堂实践 2 插入一条 水平线 和日期 3 设置 主要景点 为列表格式 4 设置文本格式 将网页02 html中标题 湘江谷 格式设置为 标题1 字体设置为