第四讲建立基本的网页——网页制作

1、1第4章 建立基本的网页4.1 一个新网页一个新网页4.2 段落格式化段落格式化4.3 字符格式化字符格式化4.4 项目列表项目列表4.5 使用使用HTML样式格式化文本样式格式化文本24.1 一个新网页【例【例4.1】用】用Dreamweaver建立一个基本的网页建立一个基本的网页启动启动Dreamweaver，创建一个新文档（可以执行创建一个新文档（可以执行File|New命令），单击工具栏设计视图（命令），单击工具栏设计视图（Show Design View）按钮按钮 ，切换到设计视图文档模式，切换到设计视图文档模式，在文档窗口中输入下列文字：金缕衣在文档窗口中输入下列文字：金缕衣劝君莫

2、惜金缕衣劝君莫惜金缕衣劝君惜取少年时劝君惜取少年时花开堪折直须折花开堪折直须折莫待无花空折枝每输入一行按一次回车键，这就是莫待无花空折枝每输入一行按一次回车键，这就是一个网页了。一个网页了。3然后执行然后执行File|Preview in Browser|iexplore命令或直接命令或直接按按F12键，可以在浏览器中预览这个网页的效果（见图键，可以在浏览器中预览这个网页的效果（见图4.1（a），），也可以执行也可以执行File|Save命令将其保存为文命令将其保存为文件。比如路径和文件名为件。比如路径和文件名为d:examplesexamples4-01.htm，则在浏览器的地址栏中直接输入

3、则在浏览器的地址栏中直接输入D:examplesexample4-01.htm，也可浏览页面效果也可浏览页面效果(见图见图4.1（b）)。图图4.1一个新网页这是一个最朴素的网页，没有任何修饰，一个新网页这是一个最朴素的网页，没有任何修饰，但却有网页文件的基本结构。切换到代码视图或代码但却有网页文件的基本结构。切换到代码视图或代码和设计视图，查看一下这个网页的和设计视图，查看一下这个网页的HTML源文件（见图源文件（见图4.2），），Dreamweaver自动为网页添加了相应的标记。自动为网页添加了相应的标记。可见，在用可见，在用Dreamweaver进行网页设计时，可以把精进行网页设计时，可

4、以把精力集中在页面的内容和版面设计上，而不必为各种力集中在页面的内容和版面设计上，而不必为各种HTML标记的用法费心。标记的用法费心。4图图4.15图图4.264.1.1设置页面标题设置页面标题标题是一个网页的题目，也是页面内容的简要概括。一标题是一个网页的题目，也是页面内容的简要概括。一个页面不必有标题，但为每一个页面添加一个标题是个页面不必有标题，但为每一个页面添加一个标题是一个好习惯，这样做不仅可为浏览者了解网页的主题一个好习惯，这样做不仅可为浏览者了解网页的主题提供方便，也可为设计者规划和管理网站带来好处。提供方便，也可为设计者规划和管理网站带来好处。Dreamweaver为每个页面设

5、置了默认标题为每个页面设置了默认标题Untitled Document，这实际上是没有标题。这实际上是没有标题。要设置页面标题，在工具栏要设置页面标题，在工具栏Title后面的文本框中输入后面的文本框中输入“唐诗唐诗金缕衣金缕衣”按回车。注意按回车。注意Dreamweaver标题标题栏的页面标题域和代码视图中的栏的页面标题域和代码视图中的Title标记间的标记间的Untitled Document均已改为页面标题均已改为页面标题“唐诗唐诗金缕衣金缕衣”（见（见图图4.3）。要修改标题仍可以在工具栏）。要修改标题仍可以在工具栏Title后的文本框后的文本框中进行。中进行。7图图4.384.1.2

6、 设置基础设置基础URL地址地址URL地址分为绝对地址和相对地址。绝对地址包括协议、地址分为绝对地址和相对地址。绝对地址包括协议、域名或域名或IP地址、路径和文件名，如地址、路径和文件名，如http:/ 打开打开Head(头部头部)对象面板；对象面板； 单击对象面板上的单击对象面板上的Insert Base（插入基地址）按钮插入基地址）按钮 ，出现如图出现如图4.4所示的对话框；所示的对话框； 在在Href文本框中输入基础文本框中输入基础URL地址，也可以单击地址，也可以单击Browse按钮，选择基地址路径，这实际上设置的是按钮，选择基地址路径，这实际上设置的是HTML标记的标记的Href 属

7、性；属性； 在在Target下拉列表框中，可以选择链接文档在哪个框架下拉列表框中，可以选择链接文档在哪个框架集中被打开，这实际上设置的是集中被打开，这实际上设置的是标记的标记的Target 属性值。可选项有以下几种。属性值。可选项有以下几种。10图图4.411_blank: 表明在新窗口中展开链接指向的页面。表明在新窗口中展开链接指向的页面。_self: 在当前文档的框架集中展开页面。在当前文档的框架集中展开页面。_parent: 在当前文档的父级框架集中展开页面。在当前文档的父级框架集中展开页面。_top: 在链接所在的完整窗口中展开页面。在链接所在的完整窗口中展开页面。不选任何参数表示在当

8、前框架打开页面。不选任何参数表示在当前框架打开页面。例例4.2操作生成语句：操作生成语句：。要编辑基础要编辑基础URL地址，执行地址，执行View|Head Content（头部头部内容）命令或按内容）命令或按Ctrl+Shift+W组合键，打开头部信息组合键，打开头部信息按钮栏（见图按钮栏（见图4.5）。从文档的头部信息按钮中，选中）。从文档的头部信息按钮中，选中基地址按钮，会打开基地址属性面板（见图基地址按钮，会打开基地址属性面板（见图4.6），这），这时就可在属性面板上修改相应的属性值了。要删除基时就可在属性面板上修改相应的属性值了。要删除基地址标记，在头部信息按钮中单击基地址按钮，然后

9、地址标记，在头部信息按钮中单击基地址按钮，然后按按Del键。键。12图图4.513图图4.614注意：注意：头部信息按钮的数量与添加的头部标记数有关，每添加头部信息按钮的数量与添加的头部标记数有关，每添加一项标记，就增加一个按钮，每删除一项标记，就减一项标记，就增加一个按钮，每删除一项标记，就减少一个按钮；少一个按钮；图图4.5所示的其他头信息标记的修改方法与所示的其他头信息标记的修改方法与相同。相同。4.1.3 设置关键词和描述设置关键词和描述 关键词（关键词（Keyword）是网页内容所涉及相关领域的关键是网页内容所涉及相关领域的关键性词语，描述（性词语，描述（Description）指对

10、网页的简短说明，指对网页的简短说明，它们和其他描述网页的信息一起称为元数据（它们和其他描述网页的信息一起称为元数据（Meta data）。）。这些信息可以传送给这些信息可以传送给Web服务器，来激活客服务器，来激活客户端的特殊功能，用于浏览者或其他软件系统快速了户端的特殊功能，用于浏览者或其他软件系统快速了解或查询网页。解或查询网页。15标记是实现元数据的主要标记，能够提供文档的标记是实现元数据的主要标记，能够提供文档的关键字、作者、描述等多种信息，在关键字、作者、描述等多种信息，在HTML的头部可以的头部可以包括任意数量的包括任意数量的标记。标记。标记是单标记，标记是单标记，包括如下属性。包

11、括如下属性。name=string: 用于定义一个元数据属性的名称，其中用于定义一个元数据属性的名称，其中string 是用于表示名称的字符串。是用于表示名称的字符串。content=cdata: 用于定义元数据的属性值，其中用于定义元数据的属性值，其中cdata 表示相关数据。表示相关数据。有些搜索引擎使用关键字和描述来进行搜索，在文档中有些搜索引擎使用关键字和描述来进行搜索，在文档中可以提供如下语句：可以提供如下语句：。用。用Dreamweaver操作如下：操作如下：161. 插入关键词插入关键词单击单击Head对象面板上的对象面板上的Insert Keywords （插入插入关键词）按钮

12、关键词）按钮 ，出现如图，出现如图4.7 所示的对话框，所示的对话框，在文本框中输入关键词信息，多个关键词之间在文本框中输入关键词信息，多个关键词之间可以使用逗号隔开；可以使用逗号隔开；2. 插入描述信息插入描述信息单击单击Head对象面板上的对象面板上的Insert Description （插插入描述）按钮入描述）按钮 。打开。打开Insert Description对对话框，形式与图话框，形式与图4.7相同。在文本框中输入描述相同。在文本框中输入描述信息，按信息，按OK按钮。按钮。注意：注意： 关键词和描述的修改方式与基地址相同。关键词和描述的修改方式与基地址相同。4.1.4 页面自动刷

13、新页面自动刷新 17图图4.718【例【例4.3】自动转向其他页面】自动转向其他页面单击单击Head对象面板上的对象面板上的Insert Refresh （插入刷新）按插入刷新）按钮钮 ，打开，打开Insert Refresh对话框（见图对话框（见图4.8），在），在Delay.seconds文本框中，可以输入网页刷新的时间文本框中，可以输入网页刷新的时间间隔，单位为秒；在间隔，单位为秒；在Action（动作）区域设置刷新的动作）区域设置刷新的动作，可以指定在指定的时间间隔后跳转到某个页面动作，可以指定在指定的时间间隔后跳转到某个页面上上(Go To URL)，或是仅仅重新刷新自身或是仅仅重新

14、刷新自身(Refresh This Document)。自动刷新特性目前已经被越来越多的网页所使用。例如，自动刷新特性目前已经被越来越多的网页所使用。例如，可以首先在一个页面上显示欢迎信息，经过一段时间，可以首先在一个页面上显示欢迎信息，经过一段时间，自动跳转到指定的网页上。另外一种使用自动刷新功自动跳转到指定的网页上。另外一种使用自动刷新功能的原因是网站地址的迁移，这时可以首先在原先网能的原因是网站地址的迁移，这时可以首先在原先网址的主页上显示新的网址信息，以通知访问旧网址的址的主页上显示新的网址信息，以通知访问旧网址的用户，然后经过一段时间，再自动跳转到新地址上。用户，然后经过一段时间，再

15、自动跳转到新地址上。19图图4.8 提示：提示： 自动刷新参数的修改方式与基地址相同。自动刷新参数的修改方式与基地址相同。204.1.5 页面属性设置页面属性设置文档的页面属性包括文档的标题、文档正文中各个元文档的页面属性包括文档的标题、文档正文中各个元素的颜色等。比如素的颜色等。比如4.1节开头的网页，并没有设置节开头的网页，并没有设置文字的颜色，只显示为黑色，这是文档默认的文文字的颜色，只显示为黑色，这是文档默认的文本颜色，可以通过页面属性改变默认文本的颜色。本颜色，可以通过页面属性改变默认文本的颜色。正确设置文档属性，是成功编写网页的必要前提。正确设置文档属性，是成功编写网页的必要前提。

16、执行执行Modify|Page Properties(修改修改|页面属性页面属性)命令，命令，或是在文档窗口中单击鼠标右键，然后从快捷菜或是在文档窗口中单击鼠标右键，然后从快捷菜单中选择单中选择Page Properties（页面属性）。打开如页面属性）。打开如图图4.9 所示的所示的PageProperties（页面属性）对话页面属性）对话框，在该对话框中可以设置页面的整体属性。框，在该对话框中可以设置页面的整体属性。21图图4.922Title（标题）：标题）： 在该文本框中，可以输入文档的页在该文本框中，可以输入文档的页面标题，它实际上是输入位于面标题，它实际上是输入位于HTML头部头部

17、和和标记之间的内容，在浏览页面时，会显示标记之间的内容，在浏览页面时，会显示在浏览器的标题栏上，页面标题也可以在工具栏的在浏览器的标题栏上，页面标题也可以在工具栏的Title项中设置。项中设置。Background Image（背景图像）：背景图像）： 设置用作网页设置用作网页背景图像的路径和文件名称，单击背景图像的路径和文件名称，单击Browse（浏览）浏览）按钮，可以从磁盘上选择图像文件。按钮，可以从磁盘上选择图像文件。注意：注意： 这里不仅可以输入本地图像文件的路径和文这里不仅可以输入本地图像文件的路径和文件名称，也可以用件名称，也可以用URL的形式输入其他位置的图像的形式输入其他位置的

18、图像名称，实际上可以是名称，实际上可以是Internet上任何一台上任何一台Web服务服务器上的图像文件。器上的图像文件。Background（背景）：背景）： 为文档页面指定背景颜色，为文档页面指定背景颜色，设置设置HTML中中标记的标记的bgcolor属性。属性。23Text（文本）：文本）： 设置文档页面中文字的前景颜色，设置设置文档页面中文字的前景颜色，设置标记的标记的text属性。属性。Links（链接）：链接）： 设置文档页面中尚未访问过的超链接文设置文档页面中尚未访问过的超链接文字颜色，设置字颜色，设置标记的标记的link属性。属性。Visited Links（访问过的链接）：访

19、问过的链接）： 设置文档页面中已经设置文档页面中已经访问过的超链接文字颜色，实际上设置的是访问过的超链接文字颜色，实际上设置的是标标记的记的vlink属性。属性。Active Links（正在访问的链接）：正在访问的链接）： 设置文档页面中正设置文档页面中正在访问的超链接文字颜色，实际上设置的是在访问的超链接文字颜色，实际上设置的是标标记的记的alink属性。属性。Left Margin（左边距）、左边距）、Top Margin（上边距）、上边距）、Margin Width（页边宽度）和页边宽度）和Margin Height（页边页边高度）：高度）： 用于设置页面文字同页面边缘的间距，分别用于

20、设置页面文字同页面边缘的间距，分别对应对应标记的标记的leftmargin 、topmargin 、marginwidth 和和marginheight 属性。属性。24Document Encoding（文档解码方式）：文档解码方式）： 选择当前文选择当前文档页面的文字解码方式，对于中国大陆使用的中文网档页面的文字解码方式，对于中国大陆使用的中文网页，应该选择页，应该选择Simplified Chinese （GB2312）。）。如果如果这里没有满足需要的解码方式，可以从列表中选择这里没有满足需要的解码方式，可以从列表中选择Other，这时，页面会使用浏览器运行环境的解码方式。这时，页面会使

21、用浏览器运行环境的解码方式。Tracing Image（草稿图）：草稿图）： 指定一幅图像作为网页创指定一幅图像作为网页创作时的临时用图，显示在文档窗口的背景上，便于在作时的临时用图，显示在文档窗口的背景上，便于在网页创作时进行定位和安放对象。但它并不在实际生网页创作时进行定位和安放对象。但它并不在实际生成网页中显示。成网页中显示。Image（图像）：图像）： 拖动该滑块，可以改变草稿图的透明拖动该滑块，可以改变草稿图的透明程度，使用适当的透明程度可以避免干扰网页的编辑，程度，使用适当的透明程度可以避免干扰网页的编辑，Transparent表示全透明，表示全透明，Opaque表示完全不透明。表

22、示完全不透明。254.2 段落格式化4.2.1 定义段落定义段落在在HTML中，段落主要由标记中，段落主要由标记和和定义。在定义。在Dreamweaver的文档窗口中，每按下一次回车键，的文档窗口中，每按下一次回车键，即可将之定义为一个段落，即可将之定义为一个段落，Dreamweaver会自动会自动为段落文字两端添加上为段落文字两端添加上和和标记。段落中的标记。段落中的内容可以是文本，也可以是图像等其他类型的对内容可以是文本，也可以是图像等其他类型的对象。浏览器在处理象。浏览器在处理标记时，通常将它所包容的标记时，通常将它所包容的段落同上一段落之间用一个空行隔开。图段落同上一段落之间用一个空行

23、隔开。图4.10是两是两个段落的代码和设计效果。个段落的代码和设计效果。26图图4.1027一般来说，段落中文本的换行是自动进行的，在大多数一般来说，段落中文本的换行是自动进行的，在大多数情况下，由浏览器的窗口大小来决定。在浏览网页时，情况下，由浏览器的窗口大小来决定。在浏览网页时，不同的窗口大小，可能导致段落中换行位置发生变化。不同的窗口大小，可能导致段落中换行位置发生变化。同样在文档窗口中，窗口的大小也会影响段落的显示。同样在文档窗口中，窗口的大小也会影响段落的显示。图图4.11和图和图4.12显示了当改变浏览器窗口大小时，其中显示了当改变浏览器窗口大小时，其中段落文本换行的情形。段落文本

24、换行的情形。图图4.12浏览器窗口大的浏览效果有时候希望将一组文字浏览器窗口大的浏览效果有时候希望将一组文字设置为一个段落，但是又希望在其中某个位置强制换设置为一个段落，但是又希望在其中某个位置强制换行，这时可以在代码窗口中使用行，这时可以在代码窗口中使用标记。它用于在标记。它用于在段落中指定位置将文字断行，但是上下两块文字仍然段落中指定位置将文字断行，但是上下两块文字仍然属于同一个段落。换句话说，对于换行位置上面的文属于同一个段落。换句话说，对于换行位置上面的文字设置的段落格式同样会影响到换行位置下面的段落字设置的段落格式同样会影响到换行位置下面的段落格式。格式。28图图4.1129图图4.

25、1230注意：文字换段后，两段之间有空行，而使用强制换注意：文字换段后，两段之间有空行，而使用强制换行标记行标记后，前后行之间无空行；后，前后行之间无空行；在在HTML源代码中，仅仅按下回车键是无法实现换行源代码中，仅仅按下回车键是无法实现换行的目的的。在设计窗口中，按下回车键可以实现换的目的的。在设计窗口中，按下回车键可以实现换行，但是这实际上生成的是新段落（换段）。行，但是这实际上生成的是新段落（换段）。4.2.2 设置标题设置标题标题是表明一段或几段文字内容的简短文字。在标题是表明一段或几段文字内容的简短文字。在HTML中，按字号大小不同定义了中，按字号大小不同定义了6 级标题，从级标题

26、，从1到到6级，各级标题的字号大小依次递减，但每级标题级，各级标题的字号大小依次递减，但每级标题的大小并没有一个固定的值，而是由浏览器所决定。的大小并没有一个固定的值，而是由浏览器所决定。为标题定义的级别只决定了标题之间的相对大小。为标题定义的级别只决定了标题之间的相对大小。31定义标题使用定义标题使用和和标记。采用标题的形式，也标记。采用标题的形式，也可以定义段落；或者说，一个标题也是一个段落。例可以定义段落；或者说，一个标题也是一个段落。例如，将一行文字设置为标题如，将一行文字设置为标题1 格式，实际上是在格式，实际上是在HTML中将该行文字两端添加中将该行文字两端添加和和标记，它一方面标

27、记，它一方面定义了该行文字的标题级别，另一方面定义该行文字定义了该行文字的标题级别，另一方面定义该行文字为一个段落。为一个段落。在在Dreamweaver中设置标题，将插入点放到要设置标题中设置标题，将插入点放到要设置标题的段落中，通常该段落是一行文字。如果希望将多个的段落中，通常该段落是一行文字。如果希望将多个段落设置为标题，则可以选中多个段落，然后打开段落设置为标题，则可以选中多个段落，然后打开Text菜单，选择菜单，选择Format，再选择相应的标题级别菜单再选择相应的标题级别菜单项（项（Heading 1Heading 6）(见图见图4.13)。也可以使用。也可以使用属性面板上的属性面

28、板上的Format下拉列表（见图下拉列表（见图4.14），然后从），然后从菜单上选择相应的菜单上选择相应的Heading 1、Heading 2等菜单项，等菜单项，即可将当前插入点所在位置的文本设置为相应级别的即可将当前插入点所在位置的文本设置为相应级别的标题标题(图图4.15)。32图图4.1333图图4.1434图图4.15354.2.3 定义预格式化文本定义预格式化文本在在HTML的文本中，对文字中连续多个空格，浏览时只能的文本中，对文字中连续多个空格，浏览时只能识别一个。例如，如下两行的显示效果是一样的：识别一个。例如，如下两行的显示效果是一样的：红楼梦三国演义西游记红楼梦三国演义西游

29、记红楼梦三国演义西游记红楼梦三国演义西游记这样有时候在显示一些这样有时候在显示一些需要特殊格式的文本时（例如诗歌），就显得非常不需要特殊格式的文本时（例如诗歌），就显得非常不便。在便。在HTML中，可使用预格式标记中，可使用预格式标记和和来来解决这个问题。解决这个问题。所谓预格式化，即用户预先对所谓预格式化，即用户预先对和和之间的文字之间的文字进行格式化，浏览器在显示其中的内容时，会完全按进行格式化，浏览器在显示其中的内容时，会完全按照其原来的格式显示。比如，原封不动地保留文档中照其原来的格式显示。比如，原封不动地保留文档中的空格、制表符等。这样一来，下面两条语句的显示的空格、制表符等。这样一

30、来，下面两条语句的显示效果是不一样的。效果是不一样的。36红楼梦红楼梦 三国演义三国演义 西游记西游记红楼梦红楼梦 三国演义三国演义 西游记西游记注意：注意： 预格式化文本保留预格式中的空格、制表符、预格式化文本保留预格式中的空格、制表符、换行等预格式，即使一行文字很长，也不会自动换换行等预格式，即使一行文字很长，也不会自动换行。因此，除非特别需要，尽量不要使用预格式化行。因此，除非特别需要，尽量不要使用预格式化文本。文本。技巧：技巧： 如果需要使用多个连续的空格，可以在代码如果需要使用多个连续的空格，可以在代码视图中插入多个视图中插入多个“&nbsp”；每个将显示一个空格。每个将显示

31、一个空格。【例【例4.4】使用预格式化文本】使用预格式化文本 将插入点放置到要设置预格式化的段落中，如果将插入点放置到要设置预格式化的段落中，如果要将多个段落设置为预格式化，可以选中这多个段要将多个段落设置为预格式化，可以选中这多个段落；落；37 打开打开Text菜单，选择菜单，选择Format，再选择再选择Preformatted Text（预格式化文本）命令，也可以在属性面板上打预格式化文本）命令，也可以在属性面板上打开开Format下拉列表，选择下拉列表，选择Preformatted； 如果必要，可以继续对文档设计窗口中的文本进行像如果必要，可以继续对文档设计窗口中的文本进行像操作纯文本

32、一样的格式化操作，预格式化的文本在代操作纯文本一样的格式化操作，预格式化的文本在代码窗口和设计窗口中的显示是一样的码窗口和设计窗口中的显示是一样的(图图4.16)。4.2.4 段落对齐段落对齐段落的对齐方式是段落相对文档窗口（或浏览器窗口）段落的对齐方式是段落相对文档窗口（或浏览器窗口）在水平位置的对齐方式，分为左对齐、居中和右对齐。在水平位置的对齐方式，分为左对齐、居中和右对齐。【例【例4.5】设置对齐方式】设置对齐方式 将插入点放置到要设置对齐方式的文档中，如果要设将插入点放置到要设置对齐方式的文档中，如果要设置多个文档段落的对齐方式，可以选中这些段落；置多个文档段落的对齐方式，可以选中这

33、些段落；38图图4.1639 打开打开Text菜单，选择菜单，选择Alignment（对齐），再选择相对齐），再选择相应的对齐方式菜单项：应的对齐方式菜单项：Left（左对齐）、左对齐）、Center（居居中）、中）、Right（右对齐）。右对齐）。也可以使用属性面板完成相应功能。单击属性面板上的也可以使用属性面板完成相应功能。单击属性面板上的对齐按钮，即可为当前段落设置对齐方式，如图对齐按钮，即可为当前段落设置对齐方式，如图4.17所示。图所示。图4.18是各种对齐方式的效果。是各种对齐方式的效果。提示：提示： 在浏览器中改变窗口大小时，段落同窗口的相对在浏览器中改变窗口大小时，段落同窗口的

34、相对位置保持不变。位置保持不变。4.2.5 段落缩进段落缩进【例【例4.6】段落缩进】段落缩进 将插入点放置到要设置缩进的段落中，如果希望缩进将插入点放置到要设置缩进的段落中，如果希望缩进多个段落，可选中多个段落；多个段落，可选中多个段落；40图图4.1741图图4.1842 打开打开Text菜单，选择菜单，选择Indent（缩进），即可将当缩进），即可将当前段落往中间缩进一段位置（一般是前段落往中间缩进一段位置（一般是2个图个图4.19属属性面板缩进按钮性面板缩进按钮汉字的位置）。选择汉字的位置）。选择Outdent（伸出），即可将当前伸出），即可将当前段落向两边伸展一段位置。段落向两边伸展

35、一段位置。Indent和和Outdent是一是一对互为相反的命令。对互为相反的命令。利用属性面板也可以完成文档的缩进操作：单击属性利用属性面板也可以完成文档的缩进操作：单击属性面板上的缩进和伸出按钮（图面板上的缩进和伸出按钮（图4.19），即可实现当），即可实现当前段落的缩进和伸出。前段落的缩进和伸出。使用快捷键实现缩进更为简单，按使用快捷键实现缩进更为简单，按Ctrl+键执行一次键执行一次缩进操作，按缩进操作，按Ctrl+键进行一次伸出操作。图键进行一次伸出操作。图4.20是不同缩进量的效果。是不同缩进量的效果。43图图4.1944图图4.2045注意：缩进在注意：缩进在HTML中用中用和和

36、标记实现，但并没有伸出标记，它标记实现，但并没有伸出标记，它只是只是Dreamweaver为方便操作而设置的；为方便操作而设置的；缩进和伸出操作可以重复。缩进标记可以嵌套，以实缩进和伸出操作可以重复。缩进标记可以嵌套，以实现不同的缩进量。缩进最窄不低于一个字符宽度，现不同的缩进量。缩进最窄不低于一个字符宽度，最宽不超过浏览窗口宽度。最宽不超过浏览窗口宽度。4.2.6 强制换行强制换行使用定义新段落的方法实现换行效果会产生一个空行使用定义新段落的方法实现换行效果会产生一个空行大小的间距。有时候希望文字在段落中的指定位置大小的间距。有时候希望文字在段落中的指定位置换行，图换行，图4.21字符对象面

37、板的换行按钮如果用段落字符对象面板的换行按钮如果用段落的方法，则会产生一个空行，达不到设计目的，会的方法，则会产生一个空行，达不到设计目的，会影响文本的美观。强制换行功则能解决这一问题。影响文本的美观。强制换行功则能解决这一问题。46图图4.2147先将插入点放置到段落中要换行的位置，然后执行先将插入点放置到段落中要换行的位置，然后执行Insert Line Break命令，也可以单击字符命令，也可以单击字符（Characters）对象面板上的对象面板上的Insert Line Break（插入换行）插入换行） 按钮（图按钮（图4.21），或直接按），或直接按组合键。图组合键。图4.22是换段

38、和换行效果的对比。是换段和换行效果的对比。484.3 字符格式化4.3.1设置字体设置字体1. 设置字体要为字符设置字体，首先选中要设置字设置字体要为字符设置字体，首先选中要设置字体的文字，然后打开体的文字，然后打开Text(文本文本)菜单，选择菜单，选择Font(字体字体)，再选择相应的字体菜单项即可（见图，再选择相应的字体菜单项即可（见图4.23）。如果希望设置为默认字体（对于简体中文）。如果希望设置为默认字体（对于简体中文环境来说，一般是宋体），则可以选择环境来说，一般是宋体），则可以选择Default Fonts（默认字体）。默认字体）。利用属性面板，也可以设置字符字体。选中文本，利用

39、属性面板，也可以设置字符字体。选中文本，打开属性面板上的字体列表，选择相应字体项即打开属性面板上的字体列表，选择相应字体项即可，如图可，如图4.24所示。图所示。图4.25是几种字体效果。是几种字体效果。49图图4.2350图图4.2451图图4.2552有时想使用的字体可能没在字体列表中显示出来，特有时想使用的字体可能没在字体列表中显示出来，特别是在安装后第一次使用别是在安装后第一次使用Dreamweaver时，这时时，这时可以使用字体列表最下边的可以使用字体列表最下边的Edit Font List（编辑编辑字体列表）命令。字体列表）命令。2. 编辑字体列表编辑字体列表【例【例4.7】编辑字

40、体列表】编辑字体列表 打开打开Text菜单，选择菜单，选择Font，再选择再选择Edit Font List（编辑字体列表）命令；也可以从图编辑字体列表）命令；也可以从图4.24所示属性所示属性面板上的菜单列表中选择面板上的菜单列表中选择Edit Font List命令，打命令，打开开Edit Font List(编辑字体列表编辑字体列表)对话框（见图对话框（见图4.26）；）；Font List列出当前字体列表中的字体，列出当前字体列表中的字体，Available Fonts列出当前列出当前Windows系统中可用的系统中可用的字体，字体，Chosen Fonts列出当前选择的字体；列出当前

41、选择的字体；53图图4.2654 添加字体。在添加字体。在Available Fonts（可用字体）列表中选可用字体）列表中选择一种字体，按择一种字体，按“”按钮，字体显示在按钮，字体显示在Chosen Fonts框中，再按框中，再按“+”按钮，则将字体添加到按钮，则将字体添加到Dreamweaver可用的字体列表中；可用的字体列表中； 删除字体。在删除字体。在Font List （字体列表）选择一种字体，字体列表）选择一种字体，字体显示在字体显示在Chosen Fonts框中，按框中，按“-”按钮，则将按钮，则将字体从字体从Dreamweaver可用的字体列表中删除。可用的字体列表中删除。注

42、意：注意：一个段落中可以有不同的字符格式化效果，只要选中相一个段落中可以有不同的字符格式化效果，只要选中相应文字，设置字体即可（图应文字，设置字体即可（图4.27）；）；在文档中所能够使用的字体种类通常和在在文档中所能够使用的字体种类通常和在Windows系统系统中安装的字体有关。如果没有安装其他字体，则在中安装的字体有关。如果没有安装其他字体，则在Availables Fonts(可用字体可用字体)列表中只有宋体、黑体、列表中只有宋体、黑体、楷体、仿宋楷体、仿宋4种字体；种字体；55图图4.2756网页中可显示的字体与浏览该网页用户的计算机中安装网页中可显示的字体与浏览该网页用户的计算机中安

43、装的字体有关，如果用户计算机中没有安装你设置的字的字体有关，如果用户计算机中没有安装你设置的字体，则浏览器以默认字体（通常是宋体）显示，因此体，则浏览器以默认字体（通常是宋体）显示，因此建议在网页中尽量使用建议在网页中尽量使用Windows安装的安装的4种字体。如种字体。如果为了美观，需要使用其他字体，则可以将使用特殊果为了美观，需要使用其他字体，则可以将使用特殊字体的文字制作成图像，然后插入到网页中，这样即字体的文字制作成图像，然后插入到网页中，这样即使系统中没有安装该字体，也能正常浏览网页，看到使系统中没有安装该字体，也能正常浏览网页，看到丰富的图文效果。丰富的图文效果。4.3.2 设置字

44、号设置字号字号指的是字符的大小。网页中的字号没有绝对的大小字号指的是字符的大小。网页中的字号没有绝对的大小标准，只是相对大小。系统默认字号为标准，只是相对大小。系统默认字号为3号，号，1号和号和2号号字比默认字体要小一些，字比默认字体要小一些，4号和号和5号字比默认字体要大号字比默认字体要大一些。一些。要在要在Dreamweaver中设置字符的字号，操作如下：中设置字符的字号，操作如下：57 选中要设置字号的文字；选中要设置字号的文字； 打开打开Text菜单，选择菜单，选择Size（大小），然后根据需要的大小），然后根据需要的大小，选择从大小，选择从1到到7（见图（见图4.28）。如果希望使用

45、默认）。如果希望使用默认字体大小，可以从菜单中选择字体大小，可以从菜单中选择Default（默认）；默认）； 如果希望以默认字符大小为基准，设置字符相对默认如果希望以默认字符大小为基准，设置字符相对默认字符大小的增减量，可以在字符大小的增减量，可以在Text菜单中选择菜单中选择Size Change（改变大小）项，然后选择要增减的级别。改变大小）项，然后选择要增减的级别。+n表示增加表示增加n号，号，-n表示减小表示减小n号。号。利用属性面板也可以完成字号设置。打开属性面板上用利用属性面板也可以完成字号设置。打开属性面板上用于于Size(字号字号)下拉列表下拉列表(见图见图4.29)，选择需要

46、的字号大，选择需要的字号大小或直接在小或直接在Size文本框中输入数字（文本框中输入数字（17）按回车。）按回车。 图图4.30是不同字号大小的浏览效果。是不同字号大小的浏览效果。58图图4.2859图图4.29604.3.3 设置颜色设置颜色丰富的字符颜色能够极大地增强文档的表现力和感染力。丰富的字符颜色能够极大地增强文档的表现力和感染力。 选中要设置颜色的文字；选中要设置颜色的文字； 在属性面板上，单击在属性面板上，单击Text Color（文本颜色）按钮，文本颜色）按钮，打开如图打开如图4.31所示的颜色板。图所示的颜色板。图4.28用菜单设置字号用菜单设置字号这时鼠标光标变为吸管形状，

47、可以在这时鼠标光标变为吸管形状，可以在Dreamweaver窗口窗口中移动，在中移动，在Target后的颜色框中显示光标所到之处的后的颜色框中显示光标所到之处的颜色，单击鼠标选中该颜色。也可以直接在颜色，单击鼠标选中该颜色。也可以直接在Text Color按钮右方的文本框中，直接输入颜色的十六进制数值；按钮右方的文本框中，直接输入颜色的十六进制数值；技巧：技巧： 当鼠标指向文档窗口中的文本或图像时，可以设当鼠标指向文档窗口中的文本或图像时，可以设置与该文本或图像相同的颜色。置与该文本或图像相同的颜色。 如果希望取消颜色设置，可以单击颜色板右上角的如果希望取消颜色设置，可以单击颜色板右上角的De

48、fault Color(默认颜色默认颜色)按钮。按钮。61图图4.3062图图4.3163注意：注意：如果希望设置字符的默认颜色，可以执行如果希望设置字符的默认颜色，可以执行Modify|Page Properties（页面属性）命令，或是在文档中单击鼠页面属性）命令，或是在文档中单击鼠标右键，然后从快捷菜单中选择标右键，然后从快捷菜单中选择Page Properties命令，命令，在在Page Properties对话框中设置；对话框中设置；多次设置字符格式后，可能会产生类似如下的语句，多次设置字符格式后，可能会产生类似如下的语句， 丹唇未丹唇未启笑先闻启笑先闻 实际上实际上face和和co

49、lor可以合并可以合并一个一个font标记的两个属性，以减少代码量。所以在页面标记的两个属性，以减少代码量。所以在页面制作完成时，最好使用一下制作完成时，最好使用一下Dreamweaver的净化功能的净化功能（Commands|Clean up HTML），），以减少冗余代码。以减少冗余代码。644.3.4 设置常规字型设置常规字型字符的字型（字符的字型（style）有时候也称字符的风格、样式，有时候也称字符的风格、样式，指的是字符的显示方式，例如字符的加粗、倾斜和指的是字符的显示方式，例如字符的加粗、倾斜和下划线等。下划线等。选中要设置格式的字符，选择选中要设置格式的字符，选择Text|St

50、yle，打开如图打开如图4.32所示的菜单，从中选择所需的字型，即可将选所示的菜单，从中选择所需的字型，即可将选中的文字设置为相应的字符格式，相应的字型前面中的文字设置为相应的字符格式，相应的字型前面有选中标志（有选中标志（ ）。）。如果希望取消设置的字符格式，可以再次打开该菜单如果希望取消设置的字符格式，可以再次打开该菜单选择该菜单项，清除其选中的标志。选择该菜单项，清除其选中的标志。常用的字型格式是加粗常用的字型格式是加粗(Bold)和倾斜和倾斜(Italic)，这两种这两种字型可以很方便地从属性面板上设置，只需选定文字型可以很方便地从属性面板上设置，只需选定文本并单击相应的本并单击相应的

51、B（加粗）图标和加粗）图标和I（倾斜）图标即倾斜）图标即可。图可。图4.33是几种常用字型的效果。是几种常用字型的效果。65图图4.3266图图4.33674.4 项目列表4.4.1创建列表创建列表在在Dreamweaver中，可以在输入文字时创建项目列表，中，可以在输入文字时创建项目列表，也可以将现有段落转换为项目列表。也可以将现有段落转换为项目列表。【例【例4.8】创建新的项目列表】创建新的项目列表 先输入项目列表的第一行，将插入点放置到该行中；先输入项目列表的第一行，将插入点放置到该行中； 打开打开Text菜单，选择菜单，选择List（列表），打开列表菜单列表），打开列表菜单（见图（见图

52、4.34）；）； 选择要创建的列表类别：选择要创建的列表类别：Unordered List（无序列无序列表）、表）、Ordered List（有序列表）、有序列表）、Definition List（定义列表），被选择的列表类别前标有选中符号定义列表），被选择的列表类别前标有选中符号（对号）；（对号）；68图图4.3469 在第一行后面回车，继续输入项目中的其他内容，这在第一行后面回车，继续输入项目中的其他内容，这时项目前会出现相应的项目符号或编号；时项目前会出现相应的项目符号或编号； 如果希望结束项目列表，可以在最后一行之后连续按如果希望结束项目列表，可以在最后一行之后连续按下两次回车。下两次

53、回车。提示：提示： 单击属性面板上的列表按钮（图单击属性面板上的列表按钮（图4.34）可以快速）可以快速创建无序列表和有序列表。创建无序列表和有序列表。如果希望将现有的段落文字转换为项目列表，可以选中如果希望将现有的段落文字转换为项目列表，可以选中要转换为项目列表的所有段落，然后打开要转换为项目列表的所有段落，然后打开Text菜单，菜单，选择选择List，再选择相应的列表类别：再选择相应的列表类别：Unordered List（无序列表）、无序列表）、Ordered List（有序列表）、有序列表）、Definition List（定义列表），或单击属性面板上的列定义列表），或单击属性面板上的

54、列表按钮。图表按钮。图4.35是各种列表的形式，其中定义列表伸是各种列表的形式，其中定义列表伸出的表示定义的项目，缩进的表示相应项目的解释。出的表示定义的项目，缩进的表示相应项目的解释。70图图4.3571如果想取消项目列表，可以选中要取消的列表项目（单如果想取消项目列表，可以选中要取消的列表项目（单项或多项），然后执行项或多项），然后执行Text|List(列表列表)|None(无无)，或，或直接单击属性面板上的列表按钮，使其处于弹起状态。直接单击属性面板上的列表按钮，使其处于弹起状态。4.4.2 嵌套列表嵌套列表项目列表可以进行嵌套，以实现多级项目列表的形式。项目列表可以进行嵌套，以实现多

55、级项目列表的形式。【例【例4.9】制作嵌套列表】制作嵌套列表 选中需要嵌套的列表项目（一项或多项）；选中需要嵌套的列表项目（一项或多项）； 打开打开Text菜单，选择菜单，选择Indent（缩进）缩进） ，如单击属性面，如单击属性面板上的板上的“缩进缩进”按钮，则被选项目右移一个层次（降按钮，则被选项目右移一个层次（降低级别）；低级别）； 如果执行如果执行Text|Outdent（伸出），则被选项目左移一伸出），则被选项目左移一个层次（提高级别）。个层次（提高级别）。图图4.36是各种嵌套的浏览效果。是各种嵌套的浏览效果。72图图4.36734.4.3 设置列表属性设置列表属性通过设置项目列表

56、的属性，可以修改项目列表的通过设置项目列表的属性，可以修改项目列表的类型、无序项目列表中项目符号的类型，或有类型、无序项目列表中项目符号的类型，或有序项目列表中项目编号的类型等。序项目列表中项目编号的类型等。 将插入点放到要设置属性的项目列表中任意位将插入点放到要设置属性的项目列表中任意位置。置。 打开打开Text菜单，选择菜单，选择List，再选择再选择Properties（属性）命令，打开如图属性）命令，打开如图4.37 所示的所示的List Properties（列表属性）对话框。列表属性）对话框。也可以通过单击属性面板上的也可以通过单击属性面板上的List Item（列表项）列表项）按

57、钮来打开列表属性对话框，要注意的是，必按钮来打开列表属性对话框，要注意的是，必须展开属性面板才可以看到该按钮（见图须展开属性面板才可以看到该按钮（见图4.38）。）。74图图4.3775图图4.3876 在在List Type（列表类型）下拉列表框中，可以选择列列表类型）下拉列表框中，可以选择列表类型。该选择将影响插入点所在位置整个项目列表表类型。该选择将影响插入点所在位置整个项目列表的类型，通常有的类型，通常有4种选择：种选择：Bulleted List（符号列表）是生成带有项目符号式样的符号列表）是生成带有项目符号式样的无序列表；无序列表；Numbered List（编号列表）是生成有序编

58、号列表）是生成有序列表；列表；Directory List（目录列表）是生成用于编排目目录列表）是生成用于编排目录的目录列表，是一种无序列表；录的目录列表，是一种无序列表；Menu List（菜单列菜单列表）是生成用于编排菜单的菜单列表，也是一种无序表）是生成用于编排菜单的菜单列表，也是一种无序列表。列表。 在在Style（样式）下拉列表中，选择相应的项目列表样样式）下拉列表中，选择相应的项目列表样式。该选择将影响插入点所在位置整个项目列表的样式。该选择将影响插入点所在位置整个项目列表的样式。式。如果列表类型选中的是如果列表类型选中的是Bulleted List （符号列表），则符号列表），则

59、可以选择项目列表的符号类型。可以选择项目列表的符号类型。Bulleted（球形）：球形）： 以实心圆作为无序列表的项目符号。以实心圆作为无序列表的项目符号。77Circle（环形）：环形）： 以空心圆作为无序列表的符号。以空心圆作为无序列表的符号。Square（矩形）：矩形）： 以实心矩形作为无序列表的符号。以实心矩形作为无序列表的符号。如果列表类型选中如果列表类型选中Numbered List（编号列表），则可编号列表），则可以选择编号的数字格式。以选择编号的数字格式。Number（数字）：数字）： 以阿拉伯数字作为有序列表的编号以阿拉伯数字作为有序列表的编号字符，如字符，如1，2，3，。R

60、oman Small（小写罗马数字）：小写罗马数字）： 以小写罗马数字作为以小写罗马数字作为有序列表的编号，如有序列表的编号，如i，ii，iii。Roman Large（大写罗马数字）：大写罗马数字）： 以大写罗马数字作为以大写罗马数字作为有序列表的编号，如有序列表的编号，如，。Alphabet Small（小写字母）：小写字母）： 以小写英文字母作为有以小写英文字母作为有序列表的编号，如序列表的编号，如a，b，c。Alphabet Large（大写字母）：大写字母）： 以大写英文字母作为有以大写英文字母作为有序列表的编号字，如序列表的编号字，如A，b，c。78如果列表类型选中如果列表类型选中Dire