dreamweaver第三章 在网页中使用文字.docx

其结构如下所示：

　　

• 第一项

  　　

• 第二项

  　　

• 第三项

  　　

　　例如下面这段代码。

　　

　　这是一个无序列表：

　　国际互联网提供的服务有：

　　

• WWW服务

  　　

• 文件传输服务

  　　

• 电子邮件服务

  　　

• 远程登录服务

  　　

• 其它服务

  　　

　　3.1.9　序号列表

　　序号列表和无序号列表的使用方法基本相同，它使用标签

每个项目都有前后顺序之分，多数用数字表示。

其结构如下所示：

　　

1. 第一项

   　　

2. 第二项

   　　

3. 第三项

   　　

　　例如下面这段代码。

　　

　　这是一个有序列表：

　　国际互联网提供的服务有：

　　

1. WWW服务

   　　

2. 文件传输服务

   　　

3. 电子邮件服务

   　　

4. 远程登录服务

   　　

5. 其它服务

   　　

　　3.2　在Dreamweaver中插入文本

　　Dreamweaver是“所见即所得”的网页编辑器，插入文本非常方便，直接在文档窗口中输入文本，或者把其他应用程序（如Word、IE等）中的文本粘贴到文档窗口中即可。

需要注意的是，原有文本中的换行符将被忽略。

　　文本是网页中最基本的元素。

虽然向网页中添加文本非常简单，但是要组织协调它们并不容易，这个工作就是格式化文本。

Dreamweaver提供了两种方法对文本进行格式化，一种是使用文本的属性标签，另一种是使用样式表。

后者的功能远远强于前者，但只有高版本的浏览器才能支持。

　　3.2.1　使用文本的属性标签

　　首先在文档窗口中输入一些文字，在输入文本时需要注意以下两点。

（1）使用键盘的“Enter”键对文本分段，即“Enter”键与

和

（2）使用“Shift+Enter”组合键可以使文本强制折行，但文本仍属于同一段，即“Shift+Enter”组合键与
标签对应。

用这种方式换行的行间距比用“Enter”键小，但如果不使用样式表来格式化文本，行间距是不可调整的。

先输入两行文本。

　　下面就来设置这两个段落文字的属性。

如果屏幕下方的“属性”面板没有展开，可选择“窗口”菜单的“属性”命令，打开“属性”面板。

“属性”面板上各项目的操作对象是不同的，有时会对整个段落操作，有时仅对选中的文字进行操作。

　　设置属性的操作主要有以下几种。

　　1.用“格式”下拉框设置文字大小

　　在“属性”面板中有两个输入框可以指定文字的大小，一个是“格式”的下拉框，其中可以选择“标题1”～“标题6”，标题1最大，标题6最小。

“格式”框对文本光标所在的整个段落起作用，例如把文本光标移到第1行中间，然后在“格式”下拉框中选择“标题1”，这时整个第1段都会变大。

　　2.用“大小”下拉框设置文字大小

　　用“大小”下拉框也可以设置文本大小。

与使用“格式”框不同，“大小”框设定的数据仅对选中的文字起作用。

选取文字的方法是先将鼠标指针移动到操作对象的开始位置，然后按下鼠标左键并拖拽鼠标，使一些文字高亮显示，然后释放鼠标，这时就选中了高亮显示的文字。

把一些文字选中，然后在“大小”框中选择“36像素”。

　　3.设置段落的对齐方式

　　除了可以设置整个段落的文字大小之外，还可以通过面板上的

、

和

3个按钮设置段落的对齐方式。

这3个按钮的作用分别是使一个段落向左、居中、向右对齐。

　　4.设置文字的加粗、倾斜和颜色属性

　　选中一些文字，按下

按钮可以使选取的文字加粗，按下

按钮可以使文字倾斜，按下

，可以在出现的颜色选择板中选择文字的颜色。

　　5.设置文字的字体列表

　　拉开“属性”面板中

的下拉框可以设置选中的文本的字体列表。

　　6.创建列表

　　单击

按钮或

按钮可以创建列表，实际上就是在一段文本前加上一个列表符号。

　　使用

按钮创建的清单是有序的，每一行文本前有一个序号，而使用

按钮创建的清单是无序的，每一行文本前的项目符号是相同的，相信使用过Word的读者对它们不会陌生。

　　3.3　实践与练习：

一封家书

　　这个练习的任务是在Dreamweaver中输入并修改文本的属性，包括文字的粗斜体切换、修改文字颜色以及对文字进行换行等知识。

（1）首先运行程序Dreamweaver8，然后选择菜单栏“文件→新建”命令。

在弹出的“新建文档”对话框中，在“类别”列表中选择“基本页”，然后从右侧的列表中选择要创建的文档类型“HTML”。

（2）选择了文档类型后，单击“创建”按钮，新文档就会在文档窗口中打开。

　　（3）创建好新文档之后，在文档窗口内单击鼠标左键，确认文本光标在文档区域内闪烁。

接着就可以直接在文档区域内输入相关的文字信息。

这里先输入称呼。

　　（4）因为在这个文档里需要写的是一封家书，所以写完称呼之后，按键盘上的“Enter”键进行段落之间的换行，继续书写正文。

　　（5）接下来继续换行输入正文，在第4步中使用的是“Enter”键进行段落换行，可以发现行与行之间的间隔比较大。

现在使用键盘上的“Shift+Enter”组合键对文字进行正常换行，换行之后继续正文的书写。

　　（6）通过上述步骤的操作，一封家书就书写完成。

接下来打开属性面板，准备修改文字的属性。

属性面板一般位于文档窗口的下方，如果该面板未被打开，可以选择菜单栏“窗口→属性”命令，将其打开。

　　（7）打开属性面板后，将鼠标指针放置到书信的第一行字的最前端并单击左键，然后按住鼠标不放，接着向后拖拽鼠标到第一行的最后一个字再松开鼠标，即可将第一行文字全部选中。

即选中称呼和问候语，当文字被选中之后，该行文字的背景颜色会以黑色显示。

　　（8）选中首行文字后，在属性面板中，单击“粗体”按钮，将文字切换为粗体，如图3.27所示。

完成该项操作之后，在正文的任意位置上单击鼠标左键，取消文字的选中状态，然后观察被加粗后的文字效果。

　　（9）接下来按照第7步中的方法选中第二行文字，然后在属性面板中单击“斜体”按钮，将选中的文字切换为斜体。

　　（10）选中正文中的“其实我很想家”字样，然后在属性面板下单击“文本颜色”颜色块，在弹出的颜色列表中为选中的文字任选一种颜色，作为对文字的强调。

这里选择红色。

　　（11）完成上述操作之后，按照第7和第8步中的方法，将最后一句祝颂语也切换为粗体字。

　　（12）接下来为正文的首行文字添加空格，正常情况下，不能在首行文字前直接按键盘上的“空格键”来为文字添加空格。

此时只需要任意打开一种输入法，将输入法的半角状态切换成全角状态。

　　（13）切换好输入法的全角状态后，再在首行文字前按两下“空格键”，才能为首行文字添加两个空格。

　　（14）下面将鼠标指针移动到祝颂语的最后位置上并单击左键，然后按键盘上的“Enter”键进行段落换行。

然后在新行中输入书信人的名称。

　　（15）完成名称的输入之后，再次使用键盘上的“Shift+Enter”组合键换行，然后单击“插入”栏内的“日期”按钮，此时会弹出“插入日期”对话框，从该对话框中选择一种常用的日期格式。

　　（16）选择好日期格式之后，单击“确定”按钮，即可以文档窗口的光标所在处插入一个当前日期。

　　（17）同时选中书信人称呼和日期，接着在属性面板中单击“右对齐”按钮，使被选中的文字处于整个文档的右对齐状态。

　　（18）最后选择菜单栏“文件→保存”命令，在弹出的“另存为”对话框中，将文档存储到指定的目录文件夹下面，注意文件名称要避免使用中文。

保存后预览该文档，一封家书就制作完成。

　　3.4　实践与练习：

直接导入word文档

　　本练习在Dreamweaver中导入Word文档，然后修改导入到新文档中的文本属性，并对导入的文本进行重新排版等操作。

（1）本例来学习如何在Dreamweaver8中导入Word文档。

在导入之前首先要确定已经制作好了一个Word文件。

例如这里有一word文档格式的歌词，读者可以打开光盘文件：

CD-Rom\CH03\3.4\歌词.doc。

（2）选择菜单栏“文件→保存”命令，将该Word文件存储到指定的目录文件夹下方，文件的后缀名称为“.doc”，完成后关闭Word程序。

　　（3）接下来运行程序Dreamweaver8，然后选择菜单栏“文件→新建”命令，在弹出的“新建文档”对话框中，在“类别”列表中选择“基本页”，然后从右侧的列表中选择要创建的文档类型“HTML”，创建一个新的文档窗口。

　　（4）创建好新文档之后，选择菜单栏“文件→导入→Word文档”命令，在弹出的“导入Word文档”对话框，选择在第2步中保存过的Word文档，然后单击“打开”按钮，将Word文档导入至文档窗口中。

　　（5）观察文档窗口中的歌词，可以发现歌词的部分格式未被完全导入，还需要重新进行设置。

　　（6）选择歌词的标题，然后打开属性面板。

如果属性面板未被打开，可选择菜单栏“窗口→属性”命令将其打开。

　　（7）在打开的属性面板中，将文字的颜色修改为桔红色，接着再将它切换为粗体字，再适当调整字体的大小，这里将它的“大小”选择为6。

　　（8）接下来选中歌词的前半段即正文部分，然后在属性面板中将它们的颜色修改为红色。

用同样的方法将歌词的后半段即重复部分选中，并把它们的颜色修改为灰色。

　　（9）最后选择菜单栏“文件→保存”命令，在弹出的“另存为”对话框，为文档进行命名后保存到指定的目录文件夹下。

最后预览网页效果。

　　3.5　实践与练习：

直接打开Word生成的HTML文件

　　本例练习在Dreamweaver中直接打开由Word生成的HTML文档，这样原文档中的信息将没有任何损失。

（1）要在Dreamweaver中引用由Word生成的HTML文档，首先要确定已经制作好了一个Word文件。

例如这里有一首word文档格式的歌词，读者可以打开光盘文件：

CD-Rom\CH03\3.5\歌词3.doc。

（2）选择菜单栏“文件→另存为”命令，在弹出的“另存为”对话框中，将“保存类型”选择为“网页”类型。

　　（3）选择了“网页”类型后，再为文档重新命名，这里保存默认状态即可。

另外还要为该文档指定存放地点，完成后即可退出Word程序。

　　（4）将Word文档保存为网页格式之后，可以在该文档所存的目录下，发现已经生成了HTM文件。

　　（5）接下来运行程序Dreamweaver8，然后选择菜单栏“文件→打开”命令，在弹出的“打开”对话框中，找到第2步中保存过的HTM文件。

然后单击“打开”按钮将其打开。

　　（6）观察文档中的文件，发现该文件的信息没有任何损失，同时也可以发现在文字周边出现虚线表格，它们是“div”标签。

关于标签的概念和用法将在后面的章节中详细讲解。

　　（7）由Word生成的HTM文件在Dreamweaver中打开后，可以对该文件再次进行编辑，这里在标题与歌词之间增加一个段落换行符。

　　（8）再次保存该文档，然后对其进行预览。

　　3.6　实践与练习：

制作通知

　　本练习的目的掌握如何在正文之间添加换行符，了解在正文之间换行和段落换行之间的区别，另外还要掌握对文本进行缩进的方法以及段落对齐方法等。

（1）运行程序Dreamweaver8，选择菜单栏“文件→新建”命令，在弹出的“新建文档”对话框中，在“类别”列表中选择“基本页”，然后从右侧的列表中选择要创建的文档类型“HTML”，创建一个新的文档窗口。

（2）创建好新的文档窗口之后，在文档中直接输入一段相关的文字信息，这里输入的是一段通知。

　　（3）完成文字的输入之后，将鼠标指针放置到通知标题上的任意位置上并单击左键，然后打开属性面板，在该面板下单击“粗体”按钮和“居中对齐”按钮。

　　（4）启用“居中对齐”按钮之后，标题被自动放置到了文档的居中位置上。

　　（5）接下来将鼠标指针放置到通知日期的任意位置上并单击左键，在属性面板下启用“右对齐”按钮，将日期放置到文档的右侧位置上。

　　（6）接下来打开任意一种输入法，将输入法的半角模式切换为全角模式。

切换为输入法的全角模式，是准备为正文的首行添加空格。

　　（7）切换好输入法的全角模式之后，将鼠标指针放置到正文首行的第1个文字之前并单击左键，然后按两次键盘上的“空格键”，即可为文字的首行添加两个空格，后面一个段落也用同样的方法来实现首行空格。

　　（8）通过上述步骤的操作，一个通知文档就基本完成，接下来再进行一些排版操作。

将鼠标指针放置到第一段正文的任意位置上并单击左键，然后在属性面板中单击“文本缩进”按钮。

　　（9）启用了“文本缩进”按钮后，可以发现正文由两侧向中间缩进了一段距离。

　　（10）对正文进行了缩进操作之后，可以发现第二段正文也跟着进行了缩进。

这是因为这两段之间用换行符进行的换行，如果正文之间使用的是段落换行，就不会相互影响了。

　　（11）使用第7步中的方法，再次为第二段正文的开头添加两个空格，完成整个文档的排版操作。

　　（13）最后选择菜单栏“文件→保存”命令，将制作好的文档保存到指定的目录文件夹下。

最后预览文档效果。

　　3.7　实践与练习：

使用项目列表和编号列表

　　本实例通过制作一个文档来学习项目列表和编号列表的使用方法。

使用项目列表可以使同级的目录显得规则整齐，而且容易看懂；使用编号列表可以使各个项目次序井然，条理清晰。

（1）运行程序Dreamweaver8，选择菜单栏“文件→新建”命令，在弹出的“新建文档”对话框中，在“类别”列表中选择“基本页”，然后从右侧的列表中选择要创建的文档类型“HTML”，创建一个新的文档窗口。

（2）创建好新文档之后，在文档窗口内直接输入正文。

这里的文本属性保持默认状态即可。

　　（3）接着将鼠标指针放置到最后一行文字的尾端并单击左键，然后按键盘上的“Enter”键插入一个段落换行符。

　　（4）确认鼠标指针放置在新行上并单击左键，然后打开属性面板。

在该面板下单击“项目列表”按钮，为文档窗口中光标所在的位置插入一个列表符号。

　　（5）完成第4步中的操作之后，观察光标所在位置，可以发现多出一个黑色圆点，此点即为列表符号。

　　（6）插入列表符号之后，在列表符号后面继续输入该项目文字。

注意在插入了项目列表符号后，该行