Dreamweaver-CC网页设计与应用-(2课件.ppt

1、第2章 文本 本章简介：本章简介：文本是网页设计中最基本的元素。文本是网页设计中最基本的元素。本章主要讲解文本的输入和编辑、水平本章主要讲解文本的输入和编辑、水平线与网格的设置。通过这些内容的学习，线与网格的设置。通过这些内容的学习，可以充分利用文本工具和命令在网页中可以充分利用文本工具和命令在网页中输入和编辑文本内容，设置水平线与网输入和编辑文本内容，设置水平线与网格，运用丰富的字体和多样的编排手段，格，运用丰富的字体和多样的编排手段，表现出网页的内容。表现出网页的内容。 课堂学习目标 掌握输入和编辑文本的方法掌握输入和编辑文本的方法掌握设置页边距和插入换行符的方法掌握设置页边距和插入换行符

2、的方法掌握水平线的设置方法掌握水平线的设置方法掌握显示和隐藏网格的方法和技巧掌握显示和隐藏网格的方法和技巧2.1 编辑文本格式 输入文本输入文本设置文本属性设置文本属性输入连续空格输入连续空格设置是否可见元素设置是否可见元素设置页边距设置页边距插入换行符插入换行符课堂案例课堂案例轩宇门窗网页轩宇门窗网页2.1.1 输入文本 应用应用Dreamweaver CCDreamweaver CC编辑网页时，在文档窗口中光标为默编辑网页时，在文档窗口中光标为默认显示状态。要添加文本，首先应将光标移动到文档窗口中的认显示状态。要添加文本，首先应将光标移动到文档窗口中的编辑区域，然后直接输入文本，就像在其他

3、文本编辑器中一样。编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光标置于其中，然打开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在光标后面输入文本即可后在光标后面输入文本即可。2.1.2 设置文本属性 利用文本属性可以方便地修改选中文本的字体、字号、样式、对利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。齐方式等，以获得预期的效果。选择选择“窗口窗口 属性属性”命令，或按命令，或按Ctrl+F3Ctrl+F3组合键，弹出组合键，弹出“属性属性”面板，在面板，在HTMLHTML和和CSSCSS属性面板中都

4、可以设置文本的属性。属性面板中都可以设置文本的属性。 “属性”面板 2.1.3 输入连续空格 在默认状态下，在默认状态下，Dreamweaver CCDreamweaver CC只允许网站设计者输入一个只允许网站设计者输入一个空格，要输入连续多个空格则需要进行设置或通过特定操作才能空格，要输入连续多个空格则需要进行设置或通过特定操作才能实现实现。（1 1）选择）选择“编辑编辑 首选项首选项”命令，弹出命令，弹出“首选项首选项”对话框。对话框。（2 2）在）在“首选项首选项”对话框左侧的对话框左侧的“分类分类”列表中选择列表中选择“常常规规”选项，在右侧的选项，在右侧的“编辑选项编辑选项”选项组

5、中选择选项组中选择“允许多个连续允许多个连续的空格的空格”复选框，单击复选框，单击“确定确定”按钮完成设置。此时，用户可连按钮完成设置。此时，用户可连续按续按SpaceSpace键在文档编辑区内输入多个空格键在文档编辑区内输入多个空格。2.1.4 设置是否可见元素 显示或隐藏某些不可见元素的具体操作步骤如下显示或隐藏某些不可见元素的具体操作步骤如下。（1 1）选择选择“编辑编辑 首选项首选项”命令，弹出命令，弹出“首选项首选项”对话框对话框。（2 2）在在“首选项首选项”对话框左侧的对话框左侧的“分类分类”列表中选择列表中选择“不不可见元素可见元素”选项，根据需要选择或取消选择右侧的多个复选框

6、，选项，根据需要选择或取消选择右侧的多个复选框，以实现不可见元素的显示或隐藏，单击以实现不可见元素的显示或隐藏，单击“确定确定”按钮完成设置按钮完成设置。最常用的不可见元素是换行符、脚本、命名锚记、层和表单最常用的不可见元素是换行符、脚本、命名锚记、层和表单隐藏区域，一般将它们设为可见。隐藏区域，一般将它们设为可见。2.1.5 设置页边距 按照文章的书写规则，正文与页面之间的四周需要留有一定的距离，按照文章的书写规则，正文与页面之间的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下，这个距离叫页边距。网页设计也如此，在默认状态下，htmlhtml文档的上、文档的上、下、左

7、、右边距不为零。修改页边距的具体操作步骤如下下、左、右边距不为零。修改页边距的具体操作步骤如下。修改页边距的具体操作步骤如下。修改页边距的具体操作步骤如下。（1 1）选择选择“修改修改 页面属性页面属性”命令，或按命令，或按Ctrl+JCtrl+J组合键，弹出组合键，弹出“页面属性页面属性”对话框对话框。（2 2）根据需要在对话框的根据需要在对话框的“左边距左边距”、“右边距右边距”、“上边距上边距”、“下边距下边距”选项的数值框中输入相应的数值。选项的数值框中输入相应的数值。2.1.6 插入换行符 为段落添加换行符有以下几种方法。为段落添加换行符有以下几种方法。选择选择“插入插入”面板的面板

8、的“文本文本”选项卡，单击选项卡，单击“字符字符”展开展开式工具按钮式工具按钮 ，选择，选择“换行符换行符”按钮按钮 。 按按Shift+EnterShift+Enter组合键。组合键。选择选择“插入插入 字符字符 换行符换行符”命令命令。 在文档中插入换行符的操作步骤如下。在文档中插入换行符的操作步骤如下。 （1 1）打开一个网页文件，输入一段文字。打开一个网页文件，输入一段文字。 （2 2）按按Shift+EnterShift+Enter组合键，光标换到另一个段落。按组合键，光标换到另一个段落。按Shift+Ctrl+SpaceShift+Ctrl+Space组合键，输入空格，输入文字。组

9、合键，输入空格，输入文字。2.1.7 课堂案例轩宇门窗网页使用使用“属性属性”面板，改变文本颜色、大小和粗细。面板，改变文本颜色、大小和粗细。效果图2.2 水平线与网格 水平线水平线显示和隐藏网格显示和隐藏网格课堂案例课堂案例休闲度假网页休闲度假网页2.2.1 水平线 1. . 创建水平线创建水平线（1）选择“插入”面板的“常用”选项卡，单击“水平线”工具按钮 。（2）选择“插入 水平线”命令。2. 2. 修改水平线修改水平线在文档窗口中，选中水平线，选择“窗口 属性”命令，弹出“属性”面板。2.2.2 显示和隐藏网格 使用网格可以更加方便地定位网页元素，在网页布局时网格也具有至关重要的作用。

10、1. 显示和隐藏网格显示和隐藏网格选择“查看 网格设置 显示网格”命令，或按Ctrl+Alt+G组合键，此时处于显示网格的状态，网格在“设计”视图中可见。2.设置网页元素与网格对齐设置网页元素与网格对齐选择“查看 网格设置 靠齐到网格”命令，或按Ctrl+Alt+ Shift+G组合键，此时，无论网格是否可见，都可以让网页元素自动与网格对齐。2.2.2 显示和隐藏网格 3.修改网格的疏密修改网格的疏密选择“查看 网格设置 网格设置”命令，弹出“网格设置”对话框。在“间隔”选项的文本框中输入一个数字，并从下拉列表中选择间隔的单位，单击“确定”按钮关闭对话框，完成网格线间隔的修改。4.修改网格线的

11、形状和颜色修改网格线的形状和颜色选择“查看 网格设置 网格设置”命令，弹出“网格设置”对话框。在对话框中，先单击“颜色”按钮并从颜色拾取器中选择一种颜色，或者在文本框中输入一个十六进制的数字，然后单击“显示”选项组中的“线”或“点”单选项，最后单击“确定”按钮，完成网格线颜色和线型的修改。2.2.3 课堂案例休闲度假网页使用水平线命令在文档中插入水平线，使用属性面板取消使用水平线命令在文档中插入水平线，使用属性面板取消水平线的阴影，使用代码改变水平线的颜色。水平线的阴影，使用代码改变水平线的颜色。效果图课堂练习休闲旅游网页 使用使用“项目列表项目列表”按钮，设置项目列表效果；使用按钮，设置项目列表效果；使用“CSSCSS样式样式”命令，改变文字的颜色。命令，改变文字的颜色。 效果图课后习题有机果蔬网页 使用使用“页面属性页面属性”命令，设置页面边距和命令，设置页面边距和标题；使用标题；使用“首选参数首选参数”命令，设置允许多个命令，设置允许多个空格。空格。 效果图