2.2 设置文本格式
文本通常是网页中的重要组成部分。在Dreamweaver的文档窗口中，可以在页面上输入或者粘贴文本内容，然后对文本的格式进行设置。
2.2.1 输入文本
Dreamweaver CS3是一款所见即所得的网页设计工具，它提供了十分直观的文本编辑功能，在文档窗口的设计视图和代码视图中都可以直接输入文本。
在网页中输入文本的操作方法如下。
（1）在文档窗口中，开始输入文本。若要输入中文字符，可选择一种中文输入法。
（2）若要插入特殊字符，可以执行下列操作之一。
● 打开中文输入法的软键盘，然后从软键盘上选择所需要的字符，如图2-16所示。
图2-16 利用中文输入法的软键盘插入特殊字符
● 在Dreamweaver插入栏的【文本】类别中单击【字符】按钮旁边的箭头，然后从弹出菜单中选择所需要的字符，如图2-17所示。
● 若要插入【字符】弹出菜单中所没有的特殊字符，可从该菜单中选择【其他字符】，并在【插入其他字符】对话框中选择所需要的字符，然后单击【确定】按钮，如图2-18所示。
（3）使用键盘可以插入段落标记、换行符和不换行空格。
● 要生成新的段落（<p>标记），可按Enter键；
● 要插入换行符（<br />标记），可按Shift+Enter组合键；
● 要插入不换行空格（ ）可按Ctrl+Shift+Space组合键。
图2-17 利用【字符】插入特殊字符
图2-18 【插入其他字符】对话框
2.2.2 设置字体、字号和颜色
页面文本的字体、大小和颜色，可以使用HTML语言中的<font>标记来设置，也可以使用CSS属性来设置。
1.利用<font>标记设置字体、字号和颜色
在HTML语言中，使用<font>标记来设置文本的字体、字号和颜色，语法如下：
<font face="字体1, 字体2, …" size="数字" color="颜色">文本内容</font>
除了通用属性之外，font元素具有以下属性。
● face属性：指定一种字体或一个字体列表，字体名称之间用半角逗号分隔，浏览器使用用户计算机系统上安装的字体组合中的第一种字体；如果该字体未安装，则使用第二种字体，依次类推；如果未安装字体组合中的任何一种，则使用默认字体。
● size属性：指定字号的大小，取值从1～7，数值越大，字体越大；也可以使用“+”或“-”来指定相对大小。
● color属性：指定文本的颜色，可以使用颜色名称或十六进制颜色值。
例2-4 利用<font>标记设置页面字体、字号和颜色，网页效果如图2-19所示。
图2-19 利用<font>标记设置字体、字号和颜色
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-04.html，把网页标题设置为“设置字体、字号和颜色示例”。
2 切换到代码视图，在<body>标记之后编写以下HTML代码：
<font face="宋体" color="#000000" size="2">宋体 黑色 尺寸2</font><br />
<font face="黑体" color="#FF0000" size="3">黑体 红色 尺寸3</font><br />
<font face="华文隶书" color="#0000FF" size="4">华文隶书 蓝色 尺寸4</font><br />
<font face="华文行楷" color="purple" size="5">华文行楷 紫色 尺寸5</font><br />
<font face="华文新魏" color="orchid" size="6">华文新魏 淡紫 尺寸6</font><br />
<font face="方正静蕾简体" color="skyblue" size="7">方正静蕾简体 天蓝 尺寸7</font>
3 在浏览器中查看网页效果。
2.利用属性检查器设置字体、字号和颜色
在Dreamweaver CS3中，可以利用属性检查器通过CSS类样式来设置文本的字体、字号和颜色，操作方法如下。
1 在文档窗口中，选取要设置格式的文本。
2 设置字体。从属性检查器的【字体】列表框中选择一种字体，如图2-20所示。
3 编辑字体列表。若所需的字体没有出现在【字体】列表框中，可从该列表框中选择【编辑字体列表】项来添加字体。
图2-20 利用属性检查器设置文本的字体、大小和颜色
4 设置字体大小。在【大小】列表框中选择或输入一个数字，然后从相邻的列表框中选择所需要的单位，可供选择的单位包括：像素（px）、点数（pt）、英寸（in）、厘米（cm）、毫米（mm）、字体高（em）等。
5 若设置颜色，可执行下列操作之一。
● 单击颜色框，然后从颜色选择器上选择一种网页安全色，如图2-21所示。
● 在相邻的文本框中输入颜色名称或十六进制的颜色值（例如#FF0000）。
图2-21 从调色板中选取颜色
利用属性检查器设置设置字体、字号和颜色之后，Dreamweaver将在文档首部生成一个CSS样式。例如：
<style type="text/css">
<!--
.STYLE1{ /＊ 定义一个CSS类样式，其名称以句点“.”开头 ＊/
font-family:"方正静蕾简体"; /＊ 设置字体 ＊/
font-size:36px; /＊ 设置字号（以像素为单位） ＊/
color:#FF3333; /＊ 设置颜色 ＊/
}
-->
</style>
此时，Dreamweaver将对所选定的文本添加<span>标记，并且把该标记的class属性设置为上述CSS类样式名称，从而把字体、字号和颜色应用于文本。例如：
<span class="STYLE1">Dreamweaver CS3 Ajax网页设计</span>
在HTML语言中，<span>标记用于定义一个行内的文本容器，其语法如下：
<span id="标识符" class="CSS类样式" style="CSS样式">文本内容</span>
<span>标记定义了一个通用行内元素，它不需要另起一行呈现。<span>标记本身并没有结构含义，纯粹是为了应用样式。当其他行内元素都不合适时，可以考虑使用<span>标记。<span>标记有一个重要而实用的特性，即它什么事情也不会做，其唯一的作用就是围绕HTML代码中的文本或其他页面元素，以便可以为它们指定CSS样式。
<span>标记不仅在CSS样式表的应用方面特别有用，在Ajax网页设计中也经常用到。在HTML网页中用<span>标记定义一个行内元素并为其设置标识符id，编写JavaScript脚本时，可以利用id来引用此页面元素，并通过innerHTML属性动态设置其显示内容，通过className属性或style属性动态设置其显示格式，以达到页面局部刷新的目的。
在1.2.3中创建Ajax网页时，就多次用到<span>标记。从HTML代码角度来看，一个Spry验证文本域构件就是通过在外层<span>标记中放置<input type="text">标记和另一些<span>标记而组成的。外层<span>标记定义了构件的容器，<input type="text">标记定义了文本框，内部<span>标记用于显示出错信息。此外，还通过手动编码方式在网页中添加了<span>标记，以便通过此页面元素显示动态信息。
在文档首部定义一个CSS类样式之后，其名称将被添加到属性检查器的【样式】列表框中，从而可以在网页中多次应用，这也是用CSS设置文本格式的优点之一。若要将CSS类样式应用于页面中的其他文本，可以选定文本，然后从【样式】列表框中选择该样式名称；若对网页内的普通文本应用了CSS类样式，Dreamweaver将自动对选定的文本添加上<span>标记。若要清除所应用的CSS样式，从【样式】列表框中选择【无】即可。
例2-5 利用属性检查器设置字体、字号和颜色，网页效果如图2-22所示。
图2-22 利用属性检查器设置字体、字号和颜色
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-05.html，把网页标题设置为“利用属性检查器设置字体、字号和颜色示例”。
2 在页面中输入张继的《枫桥夜泊》诗。
3 在页面上分别选取标题文字、作者名字和诗的正文，并利用属性检查器设置字体、字号和颜色。
4 切换到代码视图，可以看到在文档首部生成了三个CSS样式，源代码为：
<style type="text/css">
<!--
.STYLE1{
font-family:"方正粗活意简体";
font-size:36px;
color:#CC3333;
}
.STYLE2{
font-family:"方正启体简体";
font-size:24px;
color:#663366;
}
.STYLE3{
font-family:"方正黄草简体";
font-size:32px;
color:#6633FF;
}
-->
</style>
在网页正文部分对选定的文字添加<span>标记并应用了CSS样式，源代码为：
<span class="STYLE1">枫桥夜泊</span>
<span class="STYLE2">张 继</span><br />
<span class="STYLE3">
月落乌啼霜满天，江枫渔火对愁眠。<br />
姑苏城外寒山寺，夜半钟声到客船。
</span>
在浏览器中查看网页效果。
2.2.3 设置字符样式
比较常用的字符样式是粗体、斜体和下画线。此外，还有其他各种样式，例如删除线、代码、变量、范例、键盘、引用定义、上标、下标、大字体及小字体等。用于设置字符样式的HTML标记在表2-1中列出。
表2-1 字符样式标记
在Dreamweaver CS3中，可以利用属性检查器或菜单命令来设置字符的样式。
（1）在文档窗口中选择文本。若未选择文本，更改将应用于随后键入的文本。
（2）执行下列操作之一。
● 若要将所选文本设置为粗体或斜体，可在属性检查器中单击【粗体】按钮
或【斜体】按钮
。
● 若要设置更多的文本样式，可在【文本】菜单中指向【样式】命令，然后从子菜单中选择所需字符样式。
● 在代码视图中，直接使用HTML标记来设置字符样式（如上标和下标）。
例2-6 设置字符样式，网页效果如图2-23所示。
图2-23 设置字符样式示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-06.html，把网页标题设置为“设置字符样式示例”。
2 在页面上输入一些文字，然后选取不同部分，利用属性检查器、菜单命令或直接使用HTML标记来设置字符样式。<body>与</body>之间的源代码如下：
<strong>粗体ABC</strong> <em>斜体ABC</em>
<u>下画线ABC</u> <s>删除线ABC</s><br />
<sub><small>下标ABC</small></sub>正常文本ABC
<sup><small>上标ABC</small></sup> <big>大字体ABC</big>
3 在浏览器中查看网页效果。
2.2.4 分段与换行
在HTML语言中，段落是用<p>标记来定义的。p元素是一个块级元素，在不同段落的文本之间会以一个空行来分隔。<p>标记的语法格式如下：
<p align="对齐方式">段落文本内容</p>
除了通用属性之外，p元素具有align属性，用于设置段落的对齐方式，取值可以是lef（t默认值）、center、right或justify，分别表示左对齐、居中对齐、右对齐和两端对齐。
假如只是想让文本换到下一行显示，而不希望在网页中产生新的段落，则应在文本内容后面添加一个换行标记<br />，语法格式如下：
文本内容<br />
在Dreamweaver中，每当在文档窗口的设计视图中按Enter键时，都会在HTML源代码中添加一个<p>标记，从而产生一个新的段落，而且会自动在该段落中包含一个不换行空格（ ）。如果只是换行，可以按下Shift+Enter组合键，这将在网页中生成一个换行标记（<br />）。
也可以使用属性检查器对文本应用段落标记，操作方法如下。
（1）在文档窗口中，选择要应用段落标记的文本。
（2）在属性检查器中，从【格式】列表框中选择【段落】，如图2-24所示。
图2-24 利用属性检查器对文本应用段落标记
（3）若要清除先前应用的段落标记，可从该列表框中选择【无】。
（4）若要设置段落的对齐方式，可单击【左对齐】按钮
、【居中对齐】按钮
、【右对齐】按钮
或【两端对齐】按钮
，这将对<p>标记的align属性进行设置。
（5）若要对段落应用CSS类样式，可单击【样式】列表旁边的向下箭头
并选择所需要的样式名称。
（6）若要对段落设置标识符，可以执行下列操作之一：
● 切换到代码视图，在<p>标记中设置id属性。
● 利用标签选择器选择该段落的<p>标记，然后在标签检查器中设置其id属性，如图2-25所示。
例2-7 设置段落格式和添加换行符，网页效果如图2-26所示。
图2-25 利用标签检查器设置段落的标识符
图2-26 设置段落格式与文本换行
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-07.html，把网页标题设置为“设置段落格式与文件换行”。
2 在页面上输入一行文字，利用属性检查器将其设置为段落。
3 按Enter键以生成第二个段落，输入文字并将对齐方式设置为居中对齐。
4 按Shift+Enter键以生成换行符，输入文字。
5 按Enter键，生成第三个段落，输入文字并将对齐方式设置为“右对齐”。
6 利用标签检查器将三个段落的标识符分别设置为p1、p2和p3。
7 切换到代码视图，可以看到在<body>与</body>之间生成了以下HTML代码：
<p id="p1">这是一个段落，其对齐方式为默认的左对齐。</p>
<p id="p2" align="center">
这是另一个段落，其对齐方式设置为居中对齐。<br />
在这里添加了一个换行符。</p>
<p id="p3" align="right">这是第三个段落，其对齐方式设置为右对齐。</p>
8 在浏览器中查看网页效果。
2.2.5 设置块级容器
如果要将文档中的多个段落设置成相同的对齐方式，可以通过分别设置每个<p>标记的align属性来实现，但这样做比较麻烦。在这种情况下，可以将这些段落置于<div>和</div>标记之间组成一个块级容器，然后使用align属性来统一设置所有段落的对齐方式。
<div>标记也称为分区标记，其语法格式如下：
<div id="标识符" align="对齐方式" class="CSS类样式" style="CSS样式">
要控制的文档内容（文本、段落、表格或图像等）
</div>
<div>标记指定一个呈现HTML内容的通用块级容器，呈现时需要另起一行，其内容可以是行内元素和块级元素。<div>标记在网页布局中得到了广泛应用。在例2-2中，HTML网页的CSS布局就是通过<div>标记来实现的。使用<div>标记实现页面布局的优点在于，加载内容后能够立即显示出来，而使用表格则要等到全部加载完毕才能显示出来
比较<span>、<div>和<p>标记。<span>标记定义的是行内元素，呈现时不需要另起一行；<div>和<p>定义的都是块级元素，呈现时需要另起一行；两个<div>元素之间不用空行来分隔，两个<p>元素或<p>与<div>元素之间通过一个空行来分隔。
不过，行内元素和块级元素也不是一成不变的。通过应用CSS规则“display:block;”，可以把<span>元素转换为块级元素；通过应用CSS规则“display:inline;”可以把<div>元素和<p>元素转换为行内元素；通过应用CSS规则“margin-top:0px; margin-bottom:0px;”还可以取消两个段落之间的空行。
在Dreamweaver中，可以使用菜单命令或插入栏添加<div>标记，操作方法如下。
（1）把插入点定位到在添加<div>标记的地方。
（2）执行下列操作之一：
● 选择【插入】→【布局对象】→【Div标签】命令。
● 在插入栏的【类别】中单击按钮【插入Div标签】按钮，如图2-27所示。
（3）当出现如图2-28所示的【插入Div标签】对话框时，设置以下选项。
图2-27 利用插入栏添加<div>标记
图2-28 设置<div>标记的位置、类和标识符
● 从【插入】列表中选择<div>标记出现的位置，例如选择【在插入点】。
● 从【类】列表中选择要应用于<div>标记的CSS类样式。
● 在【ID】框中指定其标识符，或者选择以“#类名”形式定义的CSS样式。
完成设置后，单击【确定】按钮。
（4）如果插入<div>标记时未指定类和ID，也可以利用属性检查器设置这些属性，如图2-29所示。
图2-29 利用属性检查器设置<div>标记的ID和CSS类样式
（5）若要通过align属性设置<div>元素的对齐方式，可在文档窗口选取该标记，并利用标签检查器设置align属性，如图2-30所示。
在Dreamweaver中，当通过属性检查器对位于段落之外的普通文本设置对齐方式时，会使用<div>和</div>标记将文本括起来，并对align属性设置对齐方式。
例2-8 利用<div>标记定义块级容器，网页效果如图2-31所示。
图2-30 利用标签检查器设置<div>元素的对齐方式
图2-31 利用<div>标记定义块级容器
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-08.html，把网页标题设置为“div、span和p标记应用示例”。
2 在页面上插入一个<div>标记并命名为div1，利用标签检查器将其对齐方式设置为居中对齐。
3 在div1容器虚线边框内，分三行（即三个段落）来输入王之涣的《登鹳雀楼》诗。
4 利用属性检查器分别设置标题、作者名字及诗正文的字体、字号和颜色。
5 切换到代码视图，可以看到在文档首部生成了以下CSS样式：
<style type="text/css">
<!--
.STYLE1{
font-family:"方正黄草简体";
font-size:28px;
color:#CC3300;
}
.STYLE2{
font-family:"方正舒体";
font-size:24px;
color:#0066FF;
}
.STYLE3{
font-family:"方正启体简体";
font-size:22px;
color:#99CC00;
} -->
</style>
在网页正文部分生成了以下HTML代码：
<div id="div1" align="center">
<p><span class="STYLE1">登鹳雀楼</span>
<span class="STYLE2">王之涣</span></p>
<p class="STYLE3">白日依山尽，黄河入海流。</p>
<p class="STYLE3">欲穷千里目，更上一层楼。 </p>
</div>
6 在浏览器中查看网页效果。
2.2.6 设置标题格式
这里所说的标题是指网页内的文字标题，而不是用<title>标记设置的网页标题。
在HTML语言中，可以使用<h1>～<h6>标记在页面中设置标题，语法格式如下：
<h1 align="对齐方式">标题文本</h1>
<h2 align="对齐方式">标题文本</h2>
……
<h6 align="对齐方式">标题文本</h6>
h1～h6元素均为块级元素。除了通用属性之外，它们都有一个align属性，用于指定标题的对齐方式，属性值与<p>标记中相同。默认情况下标题总是用粗体字来显示。
在Dreamweaver中，可以使用属性检查器来设置标题，操作方法如下。
1 在文档窗口中，选择要应用标题标记的文本。
2 从文本属性检查器的【格式】列表框中选择所需要的标题标记，例如“标题3”对应于<h3>...</h3>标记，如图2-32所示。
图2-32 利用属性检查器设置标题格式
3 若要清除先前应用的标题格式，从列表中选择【无】即可。
4 设置标题文本的字体、字号和颜色。这将在标题标记之间添加<font>标记。
提示 也可以利用【页面属性】对话框来设置各级标题的字体、字号和颜色，这将使用CSS样式来重新设置相应标题标记的属性。请参阅2.1.4节“设置页面属性”。
5 设置标题文本的对齐方式（align属性）。
若要设置应用于标题的CSS类样式（class属性），可单击【样式】列表旁边的向下箭头
并从列表中选择所需要的类样式名称。
7 若要设置标题的id和style属性，可通过标签检查器来实现。
例2-9 在网页中设置标题格式，网页效果如图2-33所示。
图2-33 在网页中设置标题格式
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-09.html，把网页标题设置为“设置标题格式示例”。
2 在页面上输入6个段落，然后把它们分别设置标题1～标题6格式。
3 对第三行和第四行，设置为居中对齐。
4 对第五行和第六行，设置为右对齐。
5 切换到代码视图，可以看到在文档正文部分生成了以下HTML代码：
<h1>这是一级标题（h1)，默认左对齐</h1>
<h2>这是二级标题（h2），默认左对齐</h2>
<h3 align="center">这是三级标题（h3），居中对齐</h3>
<h4 align="center">这是四级标题（h4），居中对齐</h4>
<h5 align="right">这是五级标题（h5），右对齐</h5>
<h6 align="right">这是六级标题（h6），右对齐</h6>
6 在浏览器中查看网页效果。
2.2.7 插入水平线
在HTML语言中，可以使用<hr>标记在网页中插入一条水平线，并使后面的文本在此处换行，从而可以起到分隔文档内容的作用。<hr>标记的语法格式如下：
<hr align="对齐方式" size="数字" width="数字" color="颜色" noshade="noshade" />
hr元素为块级元素。除了通用属性之外，该元素具有以下属性。
● align属性：指定水平线的对齐方式，取值可以是left、center或right，分别表示左对齐、居中对齐和右对齐。默认值为center。
● size属性：指定水平线的粗细（以像素为单位），默认值为2。
● width属性：指定水平线的宽度，单位为像素或百分比（相对于当前窗口），默认值为100%。
● color属性：指定水平线的颜色，默认值为灰色。
● noshade属性：为可选项，取消水平线的阴影。默认情况下水平线显示阴影。
在Dreamweaver中，可以通过以下操作插入水平线并设置其属性。
1 在文档窗口中，把插入点放置在要插入水平线的位置。
2 选择【插入】→【HTML】→【水平线】命令，此时一条水平线插入页面中。
3 选择所插入的水平线，在属性检查器中对其以下属性进行设置，如图2-34所示。
图2-34 利用属性检查器设置水平线的属性
● 在【水平线】文本框中输入一个标识符（如hr1），在脚本程序中可以通过该标识符（id属性）引用此水平线。
● 在【宽】文本框中输入一个数字，然后在右边相邻的列表框中选择【%】或【像素】，以设置width属性。
● 在【高】文本框中输入一个数字，以设置size属性。
● 从【对齐】列表中选择一种对齐方式，可选择的项有【默认】、【左对齐】、【居中对齐】和【右对齐】，以设置align属性。
● 若要取消水平线的阴影效果，可清除对【阴影】复选框的选择。
● 若要把某个CSS类样式应用于水平线，可从【类】列表中选择所需要的类样式。
4 若要设置水平线的线条颜色或其他属性，可从【窗口】菜单中选择【标签检查器】命令，然后在页面上选定该水平线，并在标签检查器中设置这些属性，如图2-35所示。
图2-35 利用标签检查器设置水平线的属性
例2-10 在网页中插入水平线并设置其属性，网页效果如图2-36所示。
图2-36 插入和设置水平线
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-10.html，把网页标题设置为“插入和设置水平线示例”。
2 在页面上输入4行文字，分别在每行文字下方插入一条水平线。
3 利用属性检查器或标签检查器对这些水平线的属性进行设置。
● 第一条水平线：id设置为hr1，保留所有默认属性。
● 第二条水平线：id设置为hr2，宽度为300像素，左对齐，取消阴影，线条颜色设置为红色。
● 第三条水平线：id设置为hr3，宽度为68%，取消阴影，线条颜色为#3366FF。
● 第四条水平线：id设置为hr4，宽度为300像素，高度为36，保留阴影。
4 在代码视图下，可以看到在文档正文部分生成了以下HTML代码：
1. 以下水平线具有默认属性值，id为hr1
<hr id="hr1" />
2. 设置以下水平线，id为hr2，宽度为300像素，左对齐，无阴影，红色
<hr id="hr2" align="left" width="300" size="1" noshade="noshade" color="#FF0000" />
3. 设置以下水平线，id为hr3,宽度为68%，高度20，居中对齐（默认），无阴影，颜色为#3366FF
<hr id="hr3" width="68%" size="20" noshade="noshade" color="#3366FF" />
4.设置以下水平线，id为hr4，右对齐，有阴影，高度36
<hr id="hr4" align="right" width="300" size="36" />
5 在浏览器中查看网页效果。
2.2.8 设置列表格式
在网页中可以通过列表形式显示一组相关的信息条目。列表分为有序列表和无序列表，前者带有序号标记（如数字或字母），后者带有项目符号（如●或■）。
在HTML语言中，有序列表用<ol>和<li>标记定义，语法格式如下。
<ol type="1|A|a|I|i" start="int">
<li>条目1</li>
<li>条目2</li>
……
</ol>
除通用属性之外，ol元素具有以下属性。
● type属性：指定序号的类型。有以下取值：“1”表示数字（默认值），“A”表示大写字母，“a”表示小写字母，“I”表示大写罗马数字，“i”表示小写罗马数字。
● start属性：指定列表条目的起始序号。
无序列表用<ul>和<li>标记定义，语法格式如下。
<ul type="disc|circle|square">
<li>条目1</li>
<li>条目2</li>
……
</ul>
除了通用属性之外，ul元素有一个type属性，用于指定项目符号的类型，有以下取值：“disc”表示实心圆（●），“circle”表示空心圆（○），“square”表示方块（■）。
ol和ul元素均为块级元素，它们前后都有一个空行，以便与其他页面元素分隔。
在Dreamweaver中，借助属性检查器可以使用新输入的文本或现有文本创建有序列表或无序列表，操作方法如下。
（1）在页面上，选择一系列段落组成一个列表，或者把插入点放在要添加列表的位置。
（2）在属性检查器中，单击【编号列表】按钮
或【项目列表】按钮
，如图2-37所示。
图2-37 设置列表格式
（3）若要创建新的列表项，可键入条目文本并按Enter键。
（4）若要完成列表，可连续按两次Enter键。
（5）若要设置序号或项目符号的类型，可在标签检查器中对<ol>或<ul>标记的type属性进行设置。
（6）若要设置序号的起始值，可在标签检查器中对<ol>标记的start属性进行设置。
例2-11 在网页中设置有序列表和无序列表，网页效果如图2-38所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-11.html，把网页标题设置为“设置列表格式示例”。
2 输入“Ajax技术组成”，在其下方创建一个无序列表，并利用标签检查器把<ul>标记的type属性设置为square。
3 输入“服务器端技术”，在其下方创建一个有序列表，并利用标签检查器把<ol>标记的type属性设置为I。
图2-38 设置有序列表和无序列表
4 在代码视图下，可以看到在文档正文部分生成了以下HTML代码：
Ajax技术组成
<ul type="square">
<li>HTML/XHTML、CSS</li>
<li>DOM</li>
<li>XML和XSLT</li>
<li>XMLHttpRequest对象</li>
<li>JavaScript</li>
</ul>
服务器端技术
<ol type="I">
<li>ASP</li>
<li>JSP</li>
<li>PHP</li>
<li>ASP.NET</li>
</ol>
5 在浏览器中查看网页效果。