《中文DreamWeaverMX 网页制作教程》课件第5章.pptVIP

*第5章购物流程页面——文本操作5.1文字内容的输入5.2设置文本格式5.3段落的格式文本是网页中一个重要的组成部分，起到了传达信息的作用。在本章中，将以“梦衣裳”电子商务主题网站购物流程页面(页面效果如图5-1所示，其文件为本书配套电子文档中的root/dinggou.htm)的制作为例，介绍网页中的文本操作。图5-1电子商务主题网站——购物流程页面

5.1.1普通文本的添加

普通文本的添加非常简单，只要将鼠标移动到“文档”窗口中单击，光标出现后选择输入法直接输入文字即可。5.1文字内容的输入5.1.2版权信息——特殊文本添加

通常，我们在制作网页时会在页面的底部加上一些版权信息，如图5-1中网页的最后一行“Copyright2003-2007版权所有?2007梦衣裳?”，除了普通文本以外，这里还插入了版权符号“?”和商标符号“?”，这些特殊文本的插入可以通过以下步骤进行操作：

(1)将光标移动到需要插入特殊字符的位置。

(2)在“插入”菜单中选择“HTML”子菜单项中的“特殊字符”，或在“插入”工具栏中的“文本”类别的最后一个下拉菜单中选择所需的字符，如图5-2、5-3所示。除版权符号和商标符号外，Dreamweaver还提供了其他一些特殊符号供用户使用。图5-2在“插入”菜单中插入特殊字符图5-3在“插入”工具栏中插入特殊字符5.1.3在字符之间添加空格

在Dreamweaver中使用空格远不如在Word中那么方便，段落首行无法空格，字符之间多于一个空格都无法输入，这些都是令初学者非常困惑的问题。要在Dreamweaver中自由插入空格，有以下两种方法：

方法一：使用全角空格。将输入法调整为中文输入法，并设置成全角输入，便可以在文档中插入空格了。

方法二：在需要插入空格的地方按下Ctrl+Shift+空格键来插入空格。图5-4购物流程页面的雏形

在如图5-1所示的效果图中，网页中文字的字体、大小、颜色等属性根据需要作了不同的设置，如为了突出标题使用了较为醒目的字体及颜色。下面就让我们共同来探讨网页中的文本格式。5.2设置文本格式5.2.1设置字体属性

选中文字后，在文本的“属性”面板中可以设置字体、文字大小及文字颜色等属性(如图5-5所示)。这里需要注意的是，Dreamweaver中字体的设置较为繁琐，在“属性”面板的字体列表中只能看到少数的几种字体(如图5-6所示)，更多的字体需要选择“编辑字体列表”，在弹出的“编辑字体列表”对话框(如图5-7所示)中添加新的字体到字体列表中，再作选择。下面，为了得到图5-1中的效果，我们将5-4中的文字进行进一步的文本格式设置，将标题“梦衣裳购物流程”设置为36像素红色黑体，小标题设置为16像素宋体，并在“属性”面板中按下 按钮将其字体设置为加粗显示，版权信息则设置为12像素宋体。图5-5文本属性图5-6字体列表图5-7“编辑字体列表”对话框5.2.2文本的换行

在前面的文字输入中，我们发现随着输入的字数增加，在达到页面宽度时文本将自动换行显示，但当输入的字符是不规则字符时，Dreamweaver的自动换行将失效，取而代之的是水平滚动条，这就影响了页面的美观，因此，有必要学习如何进行强制换行。执行强制换行命令，首先要将光标移动到需要强制换行的文本之后，然后在“插入”工具栏中的“文本”类别中单击其中的 换行符按钮即可，当然更快捷的方法是使用Shift+Enter快捷键。强制换行不仅可用于不规则字符的排版，更大的作用是可以让段落文本更美观，例如需要将同一段落的两行之间分隔一定的距离，可以使用两次强制换行，使两行之间留一空白行，从而达到美观的目的。

图5-8设置文本格式后的购物流程页面

5.3.1创建新段落

Dreamweaver中分段的方法很简单，只要在段尾直接按下回车键，Dreamweaver将自动空出一定距离作为段落之间的分隔。5.3段?落?的?格?式5.3.2对齐段落

和Word一样，Dreamweaver中的文本也有4种对齐方式，分别是左对齐、居中对齐、右对齐和分散对齐。将光标移动到需要设置的段落的任意行中，在属性面板中的4种对齐方式按钮中选择其中一种对齐方式即可。为了让页面更加美观大方，我们将第一行标题与最后一行版权信息作了居中对齐设置，其余段落默认为左对齐。在对段落设置对齐方式属性时，同一段落具有同一种对齐方式，即使是单行的段落也不例外，而强制分行的两行文字，即使相隔很