第4章 制作文本ppt课件（完整版）.pptx

《第4章 制作文本ppt课件（完整版）.pptx》由会员分享，可在线阅读，更多相关《第4章 制作文本ppt课件（完整版）.pptx（43页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4章 制作文本ppt课件（完整版）第4章制作文本制作文本第 4 章本书编写组网页设计与制作（微课版第3 版）第4章制作文本4.1创建文档4.2文本编辑4.3项目符号和编号4.4水平线、网格与标尺4.5综合实训案例：制作文本第4章制作文本学习目标 学习在网页中创建文档、保存文档的方法；学习在网页中创建文档、保存文档的方法； 能够编辑网页文档中的文本内容、设置文本格式；能够编辑网页文档中的文本内容、设置文本格式； 能够在文档设计中应用项目符号与编号；能够在文档设计中应用项目符号与编号； 能够使用水平线、网格与标尺等对页面进行布局能够使用水平线、网格与标尺等对页面进行布局。网站网站是由一个个网页文

2、档构成的，文档是网站的基本表现形式，在制作是由一个个网页文档构成的，文档是网站的基本表现形式，在制作网页时必须先了解网页文档的基本组成和基本操作。本章详细介绍网页网页时必须先了解网页文档的基本组成和基本操作。本章详细介绍网页文档的创建、保存、打开，网页文档中文本的输入，文本格式、段落格文档的创建、保存、打开，网页文档中文本的输入，文本格式、段落格式、项目符号和编号的设置，特殊符号、水平线的插入，页面属性的设式、项目符号和编号的设置，特殊符号、水平线的插入，页面属性的设置等基本操作置等基本操作。第4章制作文本4.1创建文档4.1.1 4.1.1 新建文档新建文档启动启动Dreamweaver C

3、S6Dreamweaver CS6后将出现图后将出现图4-14-1所示的起始页面，在所示的起始页面，在“新建新建”选选项下单击所需创建的文档类型，就能创建一个文档。如在起始页面中项下单击所需创建的文档类型，就能创建一个文档。如在起始页面中单击单击“HTML”HTML”，就能创建一个，就能创建一个HTMLHTML格式的网页文档。格式的网页文档。4.1.2 4.1.2 保存保存文档文档文档创建完成之后，在菜单栏中选择文档创建完成之后，在菜单栏中选择“文件文件”“”“保存保存”命令，就可命令，就可以弹出以弹出“另存为另存为”对话框。对话框。此时选择保存路径，将文件命名为适合页此时选择保存路径，将文件

4、命名为适合页面内容的名称面内容的名称。第4章制作文本4.1创建文档4.1.3 4.1.3 打开打开文档文档如果要打开已经存在的网页文档，可以使用以下方法。如果要打开已经存在的网页文档，可以使用以下方法。启动启动Dreamweaver CS6Dreamweaver CS6，在菜单栏中选择，在菜单栏中选择“文件文件”“”“打开打开”命令，命令，在弹出的对话框中选择需要打开的文件，单击在弹出的对话框中选择需要打开的文件，单击“打开打开”按钮，网页按钮，网页文档即可在窗口中打开。文档即可在窗口中打开。在在站点窗口的列表文件中选择要打开的网页文档，双击即可打开站点窗口的列表文件中选择要打开的网页文档，双

5、击即可打开。第4章制作文本4.2文本编辑4.2.1 4.2.1 输入输入文本文本文本是网页的基本组成部分，人们通过网页了解的信息大部分是从文文本是网页的基本组成部分，人们通过网页了解的信息大部分是从文本对象中获得的。虽然图像等多媒体在网页应用中所占的比例越来越本对象中获得的。虽然图像等多媒体在网页应用中所占的比例越来越高，但由于文本所占的存储空间非常小，以文字为主体的网页下载速高，但由于文本所占的存储空间非常小，以文字为主体的网页下载速度很快，可以提高网络工作效率，因此文本仍然是信息传递的主体。度很快，可以提高网络工作效率，因此文本仍然是信息传递的主体。只有将文本格式处理好，才能使网页更加美观

6、、易读、赏心悦目，激只有将文本格式处理好，才能使网页更加美观、易读、赏心悦目，激发用户浏览的兴趣。在编辑文本框中可以直接输入文本，并可以对输发用户浏览的兴趣。在编辑文本框中可以直接输入文本，并可以对输入的文本进行剪切、复制、粘贴等基本操作入的文本进行剪切、复制、粘贴等基本操作。第4章制作文本4.2文本编辑4.2.1 4.2.1 输入输入文本文本1 1插入文本插入文本将鼠标指针移至页面中需要输入文本的位置并单击，此时窗口中就会将鼠标指针移至页面中需要输入文本的位置并单击，此时窗口中就会出现光标，光标停留的位置表示输入文字的起始位置，然后选择合适出现光标，光标停留的位置表示输入文字的起始位置，然后

7、选择合适的输入法，即可在网页中输入文字；另外，在的输入法，即可在网页中输入文字；另外，在Dreamweaver CS6Dreamweaver CS6中，也中，也可以从其他应用程序中复制文本，将插入点定位在可以从其他应用程序中复制文本，将插入点定位在“文档文档”窗口的窗口的“设计设计”视图中，然后在菜单栏中选择视图中，然后在菜单栏中选择“编辑编辑”“”“粘贴粘贴”命令；还命令；还可以在菜单栏中选择可以在菜单栏中选择“文件文件”“”“导入导入”命令导入已有的命令导入已有的WordWord文档文档。第4章制作文本4.2文本编辑4.2.1 4.2.1 输入输入文本文本2 2插入日期插入日期Dreamw

8、eaver CS6Dreamweaver CS6提供了一个方便的日期对象，该对象使用户可以以任提供了一个方便的日期对象，该对象使用户可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以）。在菜单栏何喜欢的格式插入当前日期（包含或不包含时间都可以）。在菜单栏中选择中选择“插入插入”“”“日期日期”命令，在弹出的对话框命令，在弹出的对话框“插入日期插入日期”中选中选择需要的格式。需要注意，择需要的格式。需要注意，“插入日期插入日期”对话框中显示的日期和时间对话框中显示的日期和时间不是当前日期和时间，也不是用户在浏览站点时所看到的日期和时间，不是当前日期和时间，也不是用户在浏览站点时所看到的日期

9、和时间，这里的日期和时间只是说明此信息的显示方式。如果希望在每次保存这里的日期和时间只是说明此信息的显示方式。如果希望在每次保存文档时都更新插入的日期和时间，可选择文档时都更新插入的日期和时间，可选择“存储时自动更新存储时自动更新”选项，选项，此后在保存文件时，其日期和时间也将同步更新此后在保存文件时，其日期和时间也将同步更新。第4章制作文本4.2文本编辑4.2.1 4.2.1 输入输入文本文本3 3文本格式的分类文本格式的分类网页文档中的文本分为标题和段落两种格式。在设置文本的具体格式网页文档中的文本分为标题和段落两种格式。在设置文本的具体格式时，需要打开时，需要打开“属性属性”面板。在面板

10、。在Dreamweaver CS6Dreamweaver CS6中，中，“属性属性”面板主面板主要是用来设置选择对象的属性的，并且会根据选择对象的不同而改变要是用来设置选择对象的属性的，并且会根据选择对象的不同而改变所需要设置的内容。所需要设置的内容。“属性属性”面板一般会显示在当前文档的底部，可面板一般会显示在当前文档的底部，可以通过菜单栏以通过菜单栏“窗口窗口”“”“属性属性”命令打开。如果想要使页面显示区命令打开。如果想要使页面显示区域更大一些，可以单击域更大一些，可以单击“属性属性”面板右上角的关闭按钮，将暂时不需面板右上角的关闭按钮，将暂时不需要的要的“属性属性”面板关闭，需要时可再

11、次通过面板关闭，需要时可再次通过“窗口窗口”菜单打开。菜单打开。第4章制作文本4.2文本编辑4.2.1 4.2.1 输入输入文本文本4 4添加新的字体添加新的字体在设置字体时应注意，在设置字体时应注意，Dreamweaver CS6Dreamweaver CS6默认使用的是默认使用的是“默认字体默认字体”。如果选择如果选择“默认字体默认字体”，那么在浏览网页时，显示的文字字体就是浏，那么在浏览网页时，显示的文字字体就是浏览器默认的字体。在览器默认的字体。在Dreamweaver CS6Dreamweaver CS6中，预设的可供选择的字体组合中，预设的可供选择的字体组合一共有一共有1313种。

12、种。如果需要使用这如果需要使用这1313种字体组合外的字体，则需要编辑新的字体组合。种字体组合外的字体，则需要编辑新的字体组合。单击单击“属性属性”面板的面板的“页面属性页面属性”按钮，打开按钮，打开“页面属性页面属性”对话框，对话框，打开打开“外观（外观（CSSCSS）”的的“页面字体页面字体”下拉列表框，选择下拉列表框，选择“编辑字体列编辑字体列表表”命令，弹出命令，弹出“编辑字体列表编辑字体列表”对话框，在其中进行编辑即可对话框，在其中进行编辑即可。第4章制作文本4.2文本编辑4.2.1 4.2.1 输入输入文本文本5 5设置更多的文本属性设置更多的文本属性如果需要对当前页面中不同的文本

13、设置不同的字体格式、颜色、大小如果需要对当前页面中不同的文本设置不同的字体格式、颜色、大小等属性，可单击等属性，可单击“属性属性”面板中的面板中的“CSS”CSS”按钮，通过建立按钮，通过建立CSSCSS的方式，的方式，为当前页面的指定文字设置字号、颜色、对齐方式等样式，具体内容为当前页面的指定文字设置字号、颜色、对齐方式等样式，具体内容请参考本章中请参考本章中CSSCSS设置的相关内容。设置的相关内容。第4章制作文本4.2文本编辑4.2.2 4.2.2 设置文本设置文本格式格式1 1通过通过HTMLHTML设置文本格式设置文本格式HTMLHTML对文本格式的设置主对文本格式的设置主要是通过要

14、是通过HTMLHTML的的，标签来实现的，其基标签来实现的，其基本表达方式本表达方式如图所示。如图所示。第4章制作文本4.2文本编辑4.2.2 4.2.2 设置文本设置文本格式格式2 2通过通过Dreamweaver CS6Dreamweaver CS6设置文本设置文本格式，如图所示。格式，如图所示。第4章制作文本4.2文本编辑4.2.3 4.2.3 设置文本设置文本样式样式1 1通过通过HTMLHTML设置文本样式设置文本样式HTMLHTML对文本样式的设置主要对文本样式的设置主要是通过是通过HTMLHTML的的标签标签来实现的来实现的，文本，文本的字体属性的字体属性faceface用来设定

15、文本的字体，用来设定文本的字体，其属性值有其属性值有“宋体宋体”“”“黑黑体体”“”“楷体楷体”“”“仿宋仿宋”等。等。基本格式为基本格式为font face=其其基本基本表达方式如表达方式如图所示。图所示。第4章制作文本4.2文本编辑4.2.3 4.2.3 设置文本设置文本样式样式文本文本的大小属性的大小属性sizesize用来设用来设定文本的字号，其属性值是定文本的字号，其属性值是从从1 1到到7 7，或是从，或是从+1+1到到+7+7，或是从或是从1 1到到7 7。文本的字。文本的字号没有绝对意义上的大小，号没有绝对意义上的大小，只是相对于默认字体而言的只是相对于默认字体而言的大或小。基

16、本格式为大或小。基本格式为font ”。第4章制作文本4.2文本编辑4.2.3 4.2.3 设置文本设置文本样式样式文本的颜色属性文本的颜色属性colorcolor用来设定文本用来设定文本的颜色，其属性值由十六进制数来表的颜色，其属性值由十六进制数来表示红、绿、蓝（示红、绿、蓝（RGBRGB），每个颜色的），每个颜色的最低值为最低值为0 0（十六进制为（十六进制为0000），最高），最高值为值为255255（十六进制为（十六进制为FFFF）。十六进）。十六进制数的写法为制数的写法为“#”#”号后跟三位或六号后跟三位或六位十六进制数符。三位数表示法为位十六进制数符。三位数表示法为#RGB#RGB

17、，转换为六位数表示为，转换为六位数表示为#RRGGBB#RRGGBB。属性值不仅可以是十六进制代码，也属性值不仅可以是十六进制代码，也可以是表示颜色的英文单词。基本格可以是表示颜色的英文单词。基本格式为式为font color”。第4章制作文本4.2文本编辑4.2.3 4.2.3 设置文本设置文本样式样式2 2通过通过Dreamweaver CS6Dreamweaver CS6设置文本样式。利用设置文本样式。利用Dreamweaver CS6Dreamweaver CS6可以很容可以很容易地设置文本样式。可以选易地设置文本样式。可以选中文本后单击鼠标右键，在中文本后单击鼠标右键，在弹出的快捷菜

18、单中利用弹出的快捷菜单中利用“样样式式”子菜单进行子菜单进行设置，如图设置，如图所示。所示。第4章制作文本4.2文本编辑4.2.3 4.2.3 设置文本设置文本样式样式3 3通过通过CSSCSS设置文本样式设置文本样式CSSCSS是一系列格式设置规则，它们可以用来控制网页页面内容的外观。在使用是一系列格式设置规则，它们可以用来控制网页页面内容的外观。在使用CSSCSS设置文本样式时，内容和表现形式是相互分离的设置文本样式时，内容和表现形式是相互分离的。第4章制作文本4.2文本编辑4.2.3 4.2.3 设置文本设置文本样式样式在菜单栏中选择在菜单栏中选择“窗窗口口”“”“CSSCSS样式样式”

19、命令，命令，打开打开“CSSCSS样式样式”面板，面板，单击面板底部右侧的单击面板底部右侧的“新建新建CSSCSS规则规则”按钮，按钮，将弹出将弹出“新建新建CSSCSS规则规则”的对话框，在对话框中的对话框，在对话框中可以做相应的设置与修可以做相应的设置与修改，如改，如图所图所示示。第4章制作文本4.2文本编辑4.2.3 4.2.3 设置文本设置文本样式样式在在“新建新建CSSCSS规则规则”对话框中，选择对话框中，选择“选择器类型：选择器类型：”中的中的“类（可应类（可应用于任何用于任何HTMLHTML元素）元素）”选项，一般选项，一般该选项默认是选择的。该选项默认是选择的。在在“选择器名

20、称：选择器名称：”文本框中输入文本框中输入“.text”.text”，要确保在单词，要确保在单词“text”text”前输入英文句号前输入英文句号“.”.”，在此需要注，在此需要注意的是所有类样式必须以英文句号意的是所有类样式必须以英文句号开头。单击开头。单击“确定确定”按钮后弹出按钮后弹出图图所所示的对话框。示的对话框。第4章制作文本4.2文本编辑4.2.3 4.2.3 设置文本设置文本样式样式在在“.text.text的的CSSCSS规则定义规则定义”对话框中执行如下操作。对话框中执行如下操作。打开打开“Font-family”Font-family”下拉列表框，使用上文介绍的添加字体列表

21、的方法下拉列表框，使用上文介绍的添加字体列表的方法添加添加“微软雅黑微软雅黑”字体。字体。在在“Font-size”Font-size”文本框中输入或选择需要设置的字号文本框中输入或选择需要设置的字号“12”12”，并在右边，并在右边的下拉列表框中选择的下拉列表框中选择“px”px”。在在“Line-height”Line-height”文本框中输入文本框中输入“18”18”，表示，表示CSSCSS规则的行高是规则的行高是1818，并，并在右边的下拉列表框中选择在右边的下拉列表框中选择“px”px”。在在“Font-weight”Font-weight”中选择中选择“bold”bold”选项。

22、选项。在在“Color”Color”文本框中输入文本框中输入“#09F”#09F”或者打开色彩面板选择合适的颜色。或者打开色彩面板选择合适的颜色。单击单击“确定确定”按钮。按钮。第4章制作文本4.2文本编辑4.2.3 4.2.3 设置文本设置文本样式样式单击单击“CSSCSS样式样式”面板中的面板中的“全部全部”按钮。可以看到，按钮。可以看到，Dreamweaver CS6Dreamweaver CS6已经已经将将“text”text”样式添加到当前的样式表中。这时如果在样式添加到当前的样式表中。这时如果在“所有规则所有规则”面板中单面板中单击击“text”text”规则，那么该规则的属性将会

23、出现在规则，那么该规则的属性将会出现在“属性属性”面板中。面板中。4 4对网页中的文字应用样式对网页中的文字应用样式如果要将已经设置好的样式应用到网页页面中去，首先选中需要设置为如果要将已经设置好的样式应用到网页页面中去，首先选中需要设置为“text”text”样式的文本，然后在页面下方的样式的文本，然后在页面下方的“属性属性”面板中单击面板中单击“HTML”HTML”按钮，按钮，在在“类类”的下拉列表框中选择的下拉列表框中选择“text”text”，此时选中的文本就被指定为，此时选中的文本就被指定为“text”text”样式了。样式了。第4章制作文本4.2文本编辑4.2.4 4.2.4 设置

24、设置段落段落1 1通过通过HTMLHTML设置段落设置段落在在HTMLHTML中，中，标签用来表示段落，标签用来表示段落，与与标签就是用来定义段落的，相标签就是用来定义段落的，相当于在文本中添加了一个回车符。当两个段落之间的间距较大时，就相当于当于在文本中添加了一个回车符。当两个段落之间的间距较大时，就相当于插入一个空白行。插入一个空白行。标签的主要属性如下。标签的主要属性如下。alignalign：用来设定段落对齐方式，其属性值有居中对齐：用来设定段落对齐方式，其属性值有居中对齐centercenter、左对齐、左对齐leftleft、右对齐、右对齐rightright。class/idcl

25、ass/id：用来设定应用类：用来设定应用类/id/id。第4章制作文本4.2文本编辑4.2.4 4.2.4 设置设置段落段落2 2通过通过Dreamweaver Dreamweaver CS6CS6设置段落设置段落使用使用Dreamweaver CS6Dreamweaver CS6也也可以设置段落的对齐方可以设置段落的对齐方式。方法为选中需要对式。方法为选中需要对齐的段落，单击鼠标右齐的段落，单击鼠标右键，在弹出的快捷菜单键，在弹出的快捷菜单中选择具体的对齐中选择具体的对齐方式。方式。第4章制作文本4.2文本编辑4.2.5 4.2.5 在页面中添加其他在页面中添加其他元素元素1 1内容注释内

26、容注释“!-”-!”标签是用来添加内容注释的，标签中间就是注释内容。标签是用来添加内容注释的，标签中间就是注释内容。注释通常可以插在文本的任何地方，但是在浏览网页时，注释内容不会显示。注释通常可以插在文本的任何地方，但是在浏览网页时，注释内容不会显示。2 2图像在图像在网页中插入图像，实际上就是在网页文件中插入一个链接网页中插入图像，实际上就是在网页文件中插入一个链接。在。在HTMLHTML中，图像由中，图像由标签定义标签定义。是单独的标签，没有闭合标签，只包含属性，并且要在页面上显示图是单独的标签，没有闭合标签，只包含属性，并且要在页面上显示图像，需要使用源属性像，需要使用源属性srcsrc

27、。srcsrc是（源）是（源）sourcesource的缩写，源属性的值是图像的的缩写，源属性的值是图像的URLURL。定义。定义图像的图像的语法：语法： img src=url/第4章制作文本4.2文本编辑4.2.5 4.2.5 在页面中添加其他在页面中添加其他元素元素3 3网页背景网页背景在设定在设定标签属性的值时，还可以设定网页背景。标签属性的值时，还可以设定网页背景。一般设定网页背景有两种方式，一种是设定背景颜色，另一种是设定背景图一般设定网页背景有两种方式，一种是设定背景颜色，另一种是设定背景图像（用图像作为网页的背景）。像（用图像作为网页的背景）。设定设定背景颜色，如：背景颜色，如

28、：设定设定背景图像，如：背景图像，如：第4章制作文本4.2文本编辑4.2.5 4.2.5 在页面中添加其他在页面中添加其他元素元素4 4文字的修饰标签文字的修饰标签粗粗体标签体标签和和，其语法如下，其语法如下： b加粗字体加粗字体-b/b-b 加粗字体加粗字体-strong-strong斜体斜体标签标签、和和，其语法如下：，其语法如下：倾斜字体倾斜字体-i-i倾斜字体倾斜字体-em-em也是倾斜字体也是倾斜字体-cite/cite-cite 第4章制作文本4.2文本编辑4.2.5 4.2.5 在页面中添加其他在页面中添加其他元素元素4 4文字的修饰标签文字的修饰标签下划线下划线标签标签，其语法

29、如下，其语法如下： u下划线下划线-u-u删除线删除线标签标签和和，其语法如下，其语法如下： s删除线删除线-s-s删除线删除线-strike-strike水平线水平线标签标签。水平线标签。水平线标签也是一个比较特殊的标签，是单独也是一个比较特殊的标签，是单独的标签，但是可以添加附属属性的标签，但是可以添加附属属性。5 5插入空格插入空格当用户在当用户在HTMLHTML文档中输入文字时，只能在文字字符之间插入一个空格，在两文档中输入文字时，只能在文字字符之间插入一个空格，在两个字符之间插入空格后，无论再怎么按个字符之间插入空格后，无论再怎么按SpaceSpace键也不会产生新的空格。如果键也不

30、会产生新的空格。如果一定要使用多个空格，就必须使用不换行的特殊空格。一定要使用多个空格，就必须使用不换行的特殊空格。第4章制作文本4.2文本编辑4.2.5 4.2.5 在页面中添加其他在页面中添加其他元素元素5 5插入空格插入空格要插入连续空格，首先要确定插入空格的位置，然后使用以下两种方法之一要插入连续空格，首先要确定插入空格的位置，然后使用以下两种方法之一插入不换行的特殊空格。插入不换行的特殊空格。在菜单栏中选择在菜单栏中选择“插入插入”“”“HTML”“HTML”“特殊字符特殊字符”“”“不换行空格不换行空格”命令。命令。切换到切换到“代码代码”视图，在需要插入空格的位置输入代码视图，在

31、需要插入空格的位置输入代码“ ” ”。第4章制作文本4.2文本编辑4.2.5 4.2.5 在页面中添加其他在页面中添加其他元素元素6 6插入特殊字符插入特殊字符在在HTMLHTML文档中插入特殊字符有其独特的方法，因为特殊字符与普通文字不同，文档中插入特殊字符有其独特的方法，因为特殊字符与普通文字不同，它们不能通过键盘直接输入，而且许多特殊字符也不包含在当前文档的字符它们不能通过键盘直接输入，而且许多特殊字符也不包含在当前文档的字符编码中。编码中。Dreamweaver CS6Dreamweaver CS6中提供了常用的特殊字符，以便用户使用。插入中提供了常用的特殊字符，以

32、便用户使用。插入特殊字符的具体做法为：在文档中将插入点定位在要插入特殊字符的位置，特殊字符的具体做法为：在文档中将插入点定位在要插入特殊字符的位置，在菜单栏中选择在菜单栏中选择“插入插入”“”“HTML”“HTML”“特殊字符特殊字符”命令，选择要插入的字命令，选择要插入的字符名称。在当前菜单的最后一行还有符名称。在当前菜单的最后一行还有“其他字符其他字符”命令，以满足用户更多的命令，以满足用户更多的需求。需求。第4章制作文本4.3项目符号和编号项目符号是指放在列表项之前用来强调效果的圆点或其他特殊符号，项目符号是指放在列表项之前用来强调效果的圆点或其他特殊符号，也就是在各项目前所标注的符号。

33、在内容比较多的文档中使用项目符也就是在各项目前所标注的符号。在内容比较多的文档中使用项目符号，可以让文档结构更加清晰、有条理。在号，可以让文档结构更加清晰、有条理。在Dreamweaver CS6Dreamweaver CS6中，用户中，用户可以创建有序列表、无序可以创建有序列表、无序列表。列表。4.3.1 4.3.1 添加项目符号和编号添加项目符号和编号1 1通过通过HTMLHTML添加项目符号或编号添加项目符号或编号第4章制作文本4.3项目符号和编号2 2通过通过Dreamweaver CS6Dreamweaver CS6添加项目符号或编号。打开需要添加项目符添加项目符号或编号。打开需要添

34、加项目符号或编号的文档，选择需要向其添加项目符号或编号的列表项，然后号或编号的文档，选择需要向其添加项目符号或编号的列表项，然后在在“属性属性”面板上执行对应操作。如果想要向文档中添加项目符号，面板上执行对应操作。如果想要向文档中添加项目符号，那么可单击那么可单击“项目符号项目符号”按钮；如果想要添加编号，那么可单击按钮；如果想要添加编号，那么可单击“编编号号”按钮。此时项目符号或编号格式的默认值（或当前所选）将会添按钮。此时项目符号或编号格式的默认值（或当前所选）将会添加到列表项中，如加到列表项中，如图所图所示。示。第4章制作文本4.3项目符号和编号4.3.2 4.3.2 修改项目符号和修改

35、项目符号和编号编号项目符号或编号的格式编辑在项目符号或编号的格式编辑在“列表属性列表属性”对话框中进行。选择要设对话框中进行。选择要设置的文本，然后单击鼠标右键，选择置的文本，然后单击鼠标右键，选择“列表列表”菜单下的菜单下的“属性属性”命令，命令，在弹出的在弹出的“列表属性列表属性”对话框中进行设置，如对话框中进行设置，如图所示。图所示。第4章制作文本4.4水平线、网格与标尺4.4.1 4.4.1 水平线水平线1 1通过通过HTMLHTML设置水平线设置水平线水平线标签水平线标签可以用于在屏幕上显示一条水平线，以分隔页面中的可以用于在屏幕上显示一条水平线，以分隔页面中的不同部分。不同部分。标

36、签有以下几个属性。标签有以下几个属性。sizesize：用来设置水平线的高度，单位为像素，默认值是：用来设置水平线的高度，单位为像素，默认值是2 2。widthwidth：用来设置水平线的长度，可以用绝对值和相对值表示。绝：用来设置水平线的长度，可以用绝对值和相对值表示。绝对值用像素来表示，相对值用占屏幕宽度的百分比来表示。对值用像素来表示，相对值用占屏幕宽度的百分比来表示。alignalign：用来设置水平线的对齐方式，默认值是：用来设置水平线的对齐方式，默认值是centercenter，还可设置，还可设置为为leftleft、rightright。noshadenoshade：水平线无阴影

37、属性，为实心水平线。：水平线无阴影属性，为实心水平线。colorcolor：用来设置水平线的颜色，默认值是：用来设置水平线的颜色，默认值是blackblack。第4章制作文本4.4水平线、网格与标尺4.4.1 4.4.1 水平线水平线2 2通过通过Dreamweaver CS6Dreamweaver CS6设置水平线设置水平线将鼠标指针定位到要插入水平线的位置，然后在菜单栏中选择将鼠标指针定位到要插入水平线的位置，然后在菜单栏中选择“插插入入”“”“HTML”“HTML”“水平线水平线”命令；或者单击命令；或者单击“插入插入”工具栏中的工具栏中的“常用常用”标签，然后单击标签，然后单击“水平线

38、水平线”按钮插入一条水平线。按钮插入一条水平线。第4章制作文本4.4水平线、网格与标尺4.4.2 4.4.2 网格与网格与标尺标尺在在Dreamweaver CS6Dreamweaver CS6中，可以在中，可以在“设计设计”视图中使用标尺和网视图中使用标尺和网格辅助网页布局。标尺一般从格辅助网页布局。标尺一般从上到下显示在编辑窗口的左边上到下显示在编辑窗口的左边和顶部，而网格显示在网页内和顶部，而网格显示在网页内容的下方。如果选择对齐网格，容的下方。如果选择对齐网格，那么在将内容放到网页上时，那么在将内容放到网页上时，该内容会自动与网格线对齐，该内容会自动与网格线对齐，在此也可以配置网格的间

39、距、在此也可以配置网格的间距、线条样式和线条颜色。线条样式和线条颜色。第4章制作文本4.4水平线、网格与标尺第4章制作文本4.4水平线、网格与标尺4.4.2 4.4.2 网格与网格与标尺标尺1 1显示或隐藏网格显示或隐藏网格在菜单栏中选择在菜单栏中选择“查看查看”“”“网格设置网格设置”“”“显示网格显示网格”命令，可以命令，可以在当前页面上显示网格。如果想要隐藏网格，那么可以再次选择该命在当前页面上显示网格。如果想要隐藏网格，那么可以再次选择该命令，取消该命令的选中状态。令，取消该命令的选中状态。2 2更改网格的设置更改网格的设置在菜单栏中选择在菜单栏中选择“查看查看”“”“网格设置网格设置

40、”“”“网格设置网格设置”命令，具体命令，具体如下图：如下图：第4章制作文本4.4水平线、网格与标尺第4章制作文本4.4水平线、网格与标尺4.4.2 4.4.2 网格与网格与标尺标尺3 3标尺的设置标尺的设置标尺可以用来测量文档内容的长度，网格可以用来对齐文档内容，以标尺可以用来测量文档内容的长度，网格可以用来对齐文档内容，以上这些都是非常实用的应用。如对齐，是页面排版的关键操作之一，上这些都是非常实用的应用。如对齐，是页面排版的关键操作之一，完成文档的编辑后，有些内容是否对齐可能无法用肉眼判断，此时就完成文档的编辑后，有些内容是否对齐可能无法用肉眼判断，此时就可以借助于标尺。可以借助于标尺。

41、在在Dreamweaver CS6Dreamweaver CS6的菜单栏中选择的菜单栏中选择“查看查看”“”“标尺标尺”“”“显示显示”命命令，标尺就会显示在令，标尺就会显示在Dreamweaver CS6Dreamweaver CS6窗口的窗口的“设计设计”视图中。视图中。第4章制作文本4.5综合实训案例：制作文本创建创建图所图所示的网页，示的网页，设置页面背景颜色，设置页面背景颜色，标题，段落格式，标题，段落格式，字体的颜色、大小字体的颜色、大小等，建立多级项目等，建立多级项目列表，并插入水平列表，并插入水平线线。第4章制作文本本章小结网页文档是网站信息的载体，文本则是网页文档中最重要的构成元素。网页文档是网站信息的载体，文本则是网页文档中最重要的构成元素。本章主要介绍了网页文档中文本内容的设置方法，以及辅助文本内容本章主要介绍了网页文档中文本内容的设置方法，以及辅助文本内容排版的常见应用，以使网页结构层次分明、内容清晰排版的常见应用，以使网页结构层次分明、内容清晰。