Dreamweaver CS5 网页的设计与应用（第2版）第2章文本.pptx

第2章 文本 本章简介： 文本是网页设计中最基本的元素。本章主要讲解文本的输入和编辑、水平线与网格的设置。通过这些内容的学习，可以充分利用文本工具和命令在网页中输入和编辑文本内容，设置水平线与网格，运用丰富的字体和多样的编排手段，表现出网页的内容。 课堂学习目标 掌握输入和编辑文本的方法 掌握设置页边距和插入换行符的方法 掌握水平线的设置方法 掌握显示和隐藏网格的方法和技巧 2.1 编辑文本格式 输入文本 设置文本属性 输入连续空格 设置是否可见元素 设置页边距 插入换行符 课堂案例——顶级数码产品网 2.1.1 输入文本 应用Dreamweaver CS5编辑网页时，在文档窗口中光标为默认显示状态。要添加文本，首先应将光标移动到文档窗口中的编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在光标后面输入文本即可。 2.1.4 设置是否可见元素 显示或隐藏某些不可见元素的具体操作步骤如下。 （1）选择“编辑 首选参数”命令，弹出“首选参数”对话框。 （2）在“首选参数”对话框左侧的“分类”列表中选择“不可见元素”选项，根据需要选择或取消选择右侧的多个复选框，以实现不可见元素的显示或隐藏，单击“确定”按钮完成设置。 最常用的不可见元素是换行符、脚本、命名锚记、层和表单隐藏区域，一般将它们设为可见。 2.1.5 设置页边距 按照文章的书写规则，正文与页面之间的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下，html文档的上、下、左、右边距不为零。 修改页边距的具体操作步骤如下。 （1）选择“修改 页面属性”命令，弹出“页面属性”对话框。 （2）根据需要在对话框的“左边距”、“右边距”、“上边距”、“下边距”选项的数值框中输入相应的数值。这些选项的含义如下。 “左边距”、“右边距”：指定网页内容浏览器左、右页边的大小。 “上边距”、“下边距”：指定网页内容浏览器上、下页边的大小。 2.1.6 插入换行符 为段落添加换行符有以下几种方法。 ① 选择“插入”面板的“文本”选项卡，单击“字符”展开式工具按钮 ，选择“换行符”按钮 。 ② 按Shift+Enter组合键。 ③ 选择“插入记录 HTML 特殊字符 换行符”命令。 在文档中插入换行符的操作步骤如下。 （1）打开一个网页文件，输入文字。 （2）按Shift+Enter组合键，光标换到另一个段落 。继续输入文字。 2.1.7 课堂案例——顶级数码产品网 使用属性面板改变文本颜色和样式。 效果图 2.2 水平线与网格 水平线 显示和隐藏网格 课堂案例——美食回味网 2.2.1 水平线 1. 创建水平线 选择“插入记录 HTML 水平线”命令。 2. 修改水平线 在文档窗口中，选中水平线，选择“窗口 属性”命令，弹出“属性”面板，如图2-21所示，可以根据需要对属性进行修改。 2.2.2 显示和隐藏网格 使用网格可以更加方便地定位网页元素，在网页布局时网格也具有至关重要的作用。 1. 显示和隐藏网格 选择“查看 网格设置 显示网格”命令，此时处于显示网格的状态，网格在“设计”视图中可见。 2. 修改网格线的形状和颜色 选择“查看 网格设置 网格设置”命令，弹出“网格设置”对话框，在对话框中，先单击“颜色”按钮并从颜色拾取器中选择一种颜色，或者在文本框中输入一个十六进制的数字，然后单击“显示”选项组中的“线”或“点”单选项，最后单击“确定”按钮，完成网格线颜色和线型的修改。 2.2.3 课堂案例——美食回味网 使用水平线命令在文档中插入水平线，使用属性面板取消水平线的阴影，使用代码改变水平线的颜色 效果图 课堂练习——健康食品网 使用属性面板改变文本颜色和大小。 效果图 课后习题——养生食品网 使用水平线命令插入水平线。 效果图