第2章 文本课件）-高二《网页设计与制作》同步教学（人民邮电版）

本章简介： 文本是网页设计中最基本的元素。本章主要讲解文本的输入和编辑、水平线与网格的设置。通过这些内容的学习，可以充分利用文本工具和命令在网页中输入和编辑文本内容，设置水平线与网格，运用丰富的字体和多样的编排手段，表现出网页的内容。 第2章 文本 课堂学习目标 掌握输入和编辑文本的方法 掌握设置页边距和插入换行符的方法 掌握水平线的设置方法 掌握显示和隐藏网格的方法和技巧 2.1 编辑文本格式 输入文本 设置文本属性 输入连续空格 设置是否可见元素 设置页边距 插入换行符 课堂案例—青山别墅网页 2.1.1 输入文本 应用Dreamweaver CS6编辑网页时，在文档窗口中光标为默认显示状态。要添加文本，首先应将光标移动到文档窗口中的编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在光标后面输入文本即可。 2.1.2 设置文本属性 利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。 选择“窗口 > 属性”命令，或按Ctrl+F3组合键，弹出“属性”面板，在HTML和CSS属性面板中都可以设置文本的属性。 “属性”面板 2.1.3 输入连续空格 在默认状态下，Dreamweaver CS6只允许网站设计者输入一个空格，要输入连续多个空格则需要进行设置或通过特定操作才能实现。 （1）选择“编辑 > 首选参数”命令，弹出“首选参数”对话框。 （2）在“首选参数”对话框左侧的“分类”列表中选择“常规”选项，在右侧的“编辑选项”选项组中选择“允许多个连续的空格”复选框，单击“确定”按钮完成设置。此时，用户可连续按Space键在文档编辑区内输入多个空格。 2.1.4 设置是否可见元素 显示或隐藏某些不可见元素的具体操作步骤如下。 （1）选择“编辑 > 首选参数”命令，弹出“首选参数”对话框。 （2）在“首选参数”对话框左侧的“分类”列表中选择“不可见元素”选项，根据需要选择或取消选择右侧的多个复选框，以实现不可见元素的显示或隐藏，单击“确定”按钮完成设置。 最常用的不可见元素是换行符、脚本、命名锚记、层和表单隐藏区域，一般将它们设为可见。 2.1.5 设置页边距 按照文章的书写规则，正文与页面之间的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下，html文档的上、下、左、右边距不为零。修改页边距的具体操作步骤如下。 修改页边距的具体操作步骤如下。 （1）选择“修改 > 页面属性”命令，或按Ctrl+J组合键，弹出“页面属性”对话框。 （2）根据需要在对话框的“左边距”“右边距”“上边距”“下边距”选项的数值框中输入相应的数值。 2.1.6 插入换行符 为段落添加换行符有以下几种方法。 ①选择“插入”面板的“文本”选项卡，单击“字符”展开式工具按钮 ，选择“换行符”按钮 。 ② 按Shift+Enter组合键。 ③选择“插入 > 字符 > 换行符”命令。 在文档中插入换行符的操作步骤如下。 （1）打开一个网页文件，输入一段文字。 （2）按Shift+Enter组合键，光标换到另一个段落。按Shift+Ctrl+Space组合键，输入空格，输入文字。 2.1.7 课堂案例—青山别墅网页 使用“页面属性”命令，设置页面外观、网页标题效果；使用“首选参数”命令，设置允许多个连续空格。 效果图 2.2 水平线与网格 水平线 显示和隐藏网格 课堂案例——休闲度假村网页 2.2.1 水平线 1. 创建水平线 （1）选择“插入”面板的“常用”选项卡，单击“水平线”工具按钮 。 （2）选择“插入 > 水平线”命令。 2. 修改水平线 在文档窗口中，选中水平线，选择“窗口 > 属性”命令，弹出“属性”面板。 2.2.2 显示和隐藏网格 使用网格可以更加方便地定位网页元素，在网页布局时网格也具有至关重要的作用。 1. 显示和隐藏网格 选择“查看 > 网格设置 > 显示网格”命令，或按Ctrl+Alt+G组合键，此时处于显示网格的状态，网格在“设计”视图中可见。 2.设置网页元素与网格对齐 选择“查看 > 网格设置 > 靠齐到网格”命令，或按Ctrl+Alt+ Shift+G组合键，此时，无论网格是否可见，都可以让网页元素自动与网格对齐。 2.2.2 显示和隐藏网格 3.修改网格的疏密 选择“查看 > 网格设置 > 网格设置”命令，弹出“网格设置”对话框。在“间隔”选项的文本框中输入一个数字，并从下拉列表中选择间隔的单位，单击“确定”按钮关闭对话框，完成网格线间隔的修改。 4.修改网格线的形状和颜色 选择“查看 >