第2篇 静态网页制作篇
第3章 快速掌握Dreamweaver CS5设计基本网页
本章导读
Dreamweaver CS5提供了更加完善的网页编辑功能，并在管理站点方面有了很大的改善。它提供了非常完善的站点管理机制，创建完Dreamweaver站点以后，就可以轻松地创建和管理站点中的文件或文件夹。文本是网页中最重要的元素，是网页的主体，负责传达信息。虽然利用多媒体的影音效果也可以达到同样的目的，但是网页文字的优势很难被取代。Dreamweaver提供了强大的文本处理和网页设计功能，可以很容易地运用文本设计网页。
内容要点
◎ 熟悉Dreamweaver CS5
◎ Dreamweaver CS5的工作界面
◎ 创建和管理站点
◎ 掌握插入文本
◎ 掌握使用列表
◎ 掌握在网页中插入文件头部内容
◎ 插入日期
◎ 插入水平线
◎ 创建本地站点实例
◎ 创建基本文本网页实例
学习流程
3.1 Dreamweaver CS5简述
Dreamweaver CS5是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论直接编写HTML代码的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供帮助良多的工具，丰富你的Web创作体验。Dreamweaver的设计和整合功能以CSS为基础，强大而稳定，可帮助设计和开发人员轻松地创建并管理任何站点。
利用Dreamweaver中的可视化编辑功能，可以快速创建Web页面而无须编写任何代码。可以查看所有站点元素或资源，并将它们从易于使用的面板直接拖到文档中。可以在Fireworks或其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver，从而优化开发工作流程。Dreamweaver还提供了其他工具，可以简化向Web页中添加Flash资源的过程。
为迎合现代网站的开发要求，Dreamweaver在动态网站建设的功能上做了很大的改进。在界面功能的设计方面，Dreamweaver对使用方便性也做了相当大的调整，给用户耳目一新的感觉。
若要从使用Dreamweaver CS5的经验中最大程度地获益，应了解Dreamweaver工作区背后的基本概念，并且了解如何选择选项、如何使用检查器和面板，以及如何设置最适合工作风格的首选参数。Dreamweaver CS5的工作界面如图3-1所示，包括菜单栏、文档工具栏、文档窗口、属性面板和面板组。
图3-1 Dramweaver CS5工作界面
3.2 Dreamweaver CS5的工作界面
Dreamweaver CS5是Dreamweaver CS4的升级版本，较前一版本在界面和功能上都有较大幅度的改进，尤其是在编辑窗口方面有了很大的改变，下面就来认识它的工作界面。
3.2.1 菜单栏
标题栏下方显示的是菜单栏，它包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式” “命令”、“站点”、“窗口”和“帮助”10个菜单项，如图3-2所示。
图3-2 菜单栏
● 文件：用来管理文件，包括创建和保存、导入与导出、预览和打印文件等。
● 编辑：用来编辑文本，包括撤销与恢复、复制与粘贴、查找与替换、首选参数设置和快捷键设置等。
● 查看：用来查看对象，包括代码的查看、网格线与标尺的显示、面板的隐藏及工具栏的显示等。
● 插入：用来插入网页元素，包括插入图像、多媒体、AP Div、框架、表格、表单、电子邮件链接、日期、特殊字符及标签等。
● 修改：用来实现对页面元素修改的功能，包括页面元素、面板、快速标签编辑器、链接、表格、框架、导航条、对象的对齐方式、层与表格的转换、模板、库及时间轴等。
● 格式：用来对文本进行操作，包括字体、字形、字号、字体颜色、HTML/CSS样式、段落格式化、扩展、缩进、列表、文本的对齐方式和检查拼写等。
● 命令：收集了所有的附加命令项，包括应用记录、编辑命令清单、获得更多命令、插件管理器、应用源代码格式、清除HTML/Word HTML、设置配色方案、格式化表格、表格排序等。
● 站点：用来创建与管理站点，包括站点显示方式、新建、打开与自定义站点、上传与下载、登记与验证、查看链接和查找本地/远程站点等。
● 窗口：用来打开与切换所有的面板和窗口，包括插入栏、“属性”面板、站点窗口、CSS面板等。
● 帮助：内含Dreamweaver联机帮助、注册服务、技术支持中心和Dreamweaver的版本说明。
3.2.2 插入栏
插入栏包含用于创建和插入对象的按钮。当鼠标移到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。单击该按钮即可插入相应的元素，如图3-3所示。
3.2.3 浮动面板
Dreamweaver中的面板被组织到面板组中，每个面板组都可以展开折叠，并且可以和其他面板组停靠在一起或取消停靠。面板组还可以停靠到集成的应用程序窗口中，这使得用户能够很容易地访问所需的面板，如图3-4所示。
图3-3 “插入”面板
图3-4 浮动面板
3.2.4 “属性”面板
“属性”面板显示了文档窗口中所选中元素的属性，并允许用户在“属性”面板中对元素属性直接进行修改，选中的元素不同“属性”面板中的内容也不同。
在“属性”面板右侧有一个三角形标记，单击该标记可以展开属性面板，将出现更多的扩展性，显示较多的属性设置内容。当展开“属性”面板时，右下角的三角标记变为指向上方的箭头，单击该标记又可以重新折叠“属性”面板，恢复原先的样式，如图3-5所示。
图3-5 “属性”面板
3.2.5 文档窗口
文档窗口如图3-6 所示，显示当前创建和编辑的网页文档。可以在设计视图、代码视图、拆分视图和实时视图中分别查看文档。
● 设计视图：一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。
● 代码视图：一个用于编写和编辑HTML、JavaScript、服务器语言代码的手工编码环境。
● 拆分视图：可以在一个窗口中同时看到同一文档的代码视图和设计视图。
● 实时视图：与设计视图类似，实时视图更逼真地显示文档在浏览器中的表示形式。
图3-6 文档窗口
3.3创建和管理站点
在制作网页前，应该先在本地创建一个网站，用以实现整个站点。这是为了更好地利用站点对文件进行管理，也可以尽可能地减少错误，如路径出错、链接出错等。新手做网页，条理性、结构性需要加强，往往一个文件放这里，另一个文件放那里，或者所有文件都放在同一文件夹内，这样显得很乱。建议建立一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类，如图片文件放在images文件夹内，HTML文件放在根目录下。如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。站点制作完毕后，通过测试，确保网站没有断链或其他问题的情况下，就可以上传网站了。
3.3.1 上机练习——创建本地站点
站点是存放和管理网站所有文件的地方，每个网站都有自己的站点。在使用Dreamweaver创建网站前，必须创建一个本地站点，以便更好地创建网页和管理网页文件。创建本地站点的具体操作步骤如下。
（1）启动Dreamweaver，执行“站点”|“管理站点”命令，弹出“管理站点”对话框，在对话框中单击“新建”按钮，如图3-7所示。
（2）弹出“站点设置对象”对话框，在对话框中选择“站点”选项，在“站点名称”文本框中输入名称，可以根据网站的需要任意起一个名字，如图3-8所示。
图3-7 “管理站点”对话框
图3-8 设置站点名称
（3）单击“本地站点文件夹”文本框右侧的浏览文件夹按钮，弹出“选择根文件夹”对话框，选择站点文件，如图3-9所示。
图3-9 “选择根文件夹”对话框
（4）单击“选择”按钮，选择站点文件后如图3-10所示。
（5）单击“保存”按钮，更新站点缓存，如图3-11所示。
图3-10 指定站点位置
图3-11 更新站点缓存提示框
（6）弹出“管理站点”对话框，其中显示了新建的站点，如图3-12所示。
（7）单击“完成”按钮，此时在“文件”面板中可以看到创建的站点文件，如图3-13所示。
图3-12 “管理站点”对话框
图3-13 “文件”面板
3.3.2 上机练习——管理本地站点
利用站点窗口，可以对本地站点进行创建、删除、移动和复制等操作。
1.打开站点
当运行Dreamweaver CS5后，系统会自动打开上次退出Dreamweaver CS5时正在编辑的站点。如果想打开另外一个站点，在文档窗口右边的“文件”面板中左边的下拉列表中将会显示已定义的所有站点，如图3-14所示。在列表中选择需要打开的站点，即可打开已定义的站点。
2.编辑站点
在创建站点以后，可以对站点进行编辑，具体操作步骤如下。
（1）执行“站点”|“管理站点”命令，弹出“管理站点”对话框，在对话框中单击“编辑”按钮，如图3-15所示。
（2）弹出“站点设置对象效果”对话框，在“高级设置”选项组中可以编辑站点的相关信息，如图3-16所示。
图3-14 打开站点
图3-15 “管理站点”对话框
图3-16 编辑站点
（3）编辑完毕后，单击“确定”按钮，返回到“管理站点”对话框，单击“完成”按钮，即可完成站点的编辑。
3.删除站点
如果不再需要站点，可以将其从站点列表中删除，删除站点的具体操作步骤如下。
（1）执行“站点”|“管理站点”命令，弹出“管理站点”对话框，在对话框中单击“删除”按钮，如图3-17所示。
（2）系统弹出提示对话框，询问用户是否要删除本地站点，如图3-18所示。单击“是”按钮，即可将本地站点删除。
图3-17 “管理站点”对话框
图3-18 提示对话框
提示
该操作实际上只是删除了Dreamweaver同该站点之间的关系，但是实际本地站点内容，包括文件夹和文档等，仍然都保存在磁盘相应的位置，可以重新创建指向其位置的新站点，重新对其进行管理。
4.复制站点
有时候希望创建多个结构相同或类似的站点，可以利用站点的复制功能，复制站点的具体操作步骤如下。
（1）执行“站点”|“管理站点”命令，弹出“管理站点”对话框，在对话框中单击“复制”按钮，即可将该站点复制，新复制出的站点名称会出现在“管理站点”对话框的站点列表中，如图3-19所示。
（2）在“管理站点”对话框中单击“完成”按钮，完成对站点的复制。
图3-19 复制站点
3.4 插入文本
文本处理是整个网页设计中最简单、最容易的一部分，学习网页设计也应该从基本的文本处理开始。只有将文本内容处理好，才能使网页更加美观易读，使访问者在浏览时赏心悦目，激发浏览的兴趣。在文档窗口中首先将光标定位在要添加文本的位置，然后输入文本即可，也可以将其他应用程序中的文本复制到相应的位置。
3.4.1 上机练习——插入普通文本
下面通过实例讲述如何在网页中输入文字，效果如图3-20所示，具体操作步骤如下。
图3-20 输入文字效果
CD-ROM/实例素材/练习文件/03/3.4.1/index.htm
CD-ROM/实例素材/完成文件/03/3.4.1/index1.htm
（1）打开网页文档，如图3-21所示。
图3-21 打开网页文档
（2）将光标置于要输入文本的位置，输入文本，如图3-22所示。
图3-22 输入文本
（3）保存文档，按【F12】键在浏览器中预览，效果如图3-20所示。
3.4.2 设置文本属性
网页中的文本有许多不同的表现形式，这是通过编辑文本实现的。在Dreamweaver CS5中的文本“属性”面板中，可以设置文本的各项属性。如设置字符格式、字体、文本大小、文本颜色和段落格式等。
1. 设置字体
在“字体”下拉列表中可以设置所选的文本字体，默认情况下字体是“宋体”。
（1）选中要设置属性的文字，在“属性”面板中的“字体”下拉列表中选择“编辑字体列表”选项，弹出“编辑字体列表”对话框，如图3-23所示。
（2）在对话框中的“可用字体”列表框中选择“宋体”，单击
按钮，添加到“选择的字体”列表框中，如图3-24所示。
图3-23 “编辑字体列表”对话框
图3-24 选择需要的字体
2.设置文字大小
选择一种合适的字号，是决定网页美观、布局合理的关键。在设置网页时，应对文本设置相应的字号，具体操作步骤如下。
（1）选中要设置字号的文本，在“属性”面板中的“大小”下拉列表中选择字号的大小，或者直接在文本框中输入相应大小的字号，如图3-25所示。
图3-25 设置字体大小
（2）弹出“新建CSS规则”对话框，在对话框中的“选择器类型”中选择“类”，在“选择器名称”中输入名称，在“规则定义”中选择“仅限该文档”，如图3-26 所示。单击“确定”按钮，完成字号的设置。
图3-26 “新建CSS规则”对话框
3.4.3 上机练习——插入特殊字符
特殊字符包括换行符、不换行空格、版权信息、注册商标等，这些都是网页中经常用到的特殊符号，当在网页中插入特殊符号时，在代码视图中显示的是特殊字符的源代码，在设计视图中显示的则是一个标志。
下面通过实例讲述如何在网页中插入特殊字符，效果如图3-27所示，具体操作步骤如下。
图3-27 插入特殊字符效果
CD-ROM/实例素材/练习文件/03/3.4.3/index.htm
CD-ROM/实例素材/完成文件/03/3.4.3/index1.htm
（1）打开网页文档，如图3-28所示。
图3-28 打开网页文档
（2）将光标置于要插入特殊符号的位置，执行“插入”|“HTML”|“特殊字符”|“版权”命令，如图3-29所示。
图3-29 选择“版权”命令
（3）选择命令后，即可插入版权字符，如图3-30所示。
图3-30 插入版权字符
（4）保存文档，按【F12】键在浏览器中预览，效果如图3-27所示。
3.5 使用列表
为了更有效地排列网页上的文字，常用设置列表的方式来呈现多行文字。列表分为项目列表和编号列表两种，项目列表可以排列一组没有顺序的文本，而编号列表将以数字编号排列一组有顺序的文本。
3.5.1 插入项目列表
项目列表中各个项目之间没有顺序级别之分，通常使用一个项目符号作为每条列表项的前缀。插入项目列表的具体操作步骤如下。
（1）打开网页文档，选中文本，执行“格式”|“列表”|“项目列表”命令，如图3-31所示。
图3-31 执行“项目列表”命令
（2）选择命令后，即可插入项目列表，如图3-32所示。
图3-32 插入项目列表
提示
单击“属性”面板中的“项目列表”按钮
，也可以插入项目列表。
3.5.2 插入编号列表
编号列表通常使用阿拉伯数字、英文字母、罗马数字等符号来编排项目，各个项目之间通常有一种先后关系。
打开网页文档，选中文本，执行“格式”|“列表” | “编号列表”命令，插入编号列表，如图3-33所示。
图3-33 插入编号列表
提示
单击“属性”面板中的“编号列表”按钮
，也可以插入编号列表。
3.6 在网页中插入文件头部内容
文件头标签也就是通常说的META标签，文件头标签在网页中是看不到的，它包含在网页中<head>...</head>标签之间。所有包含在该标签之间的内容在网页中都是不可见的。
文件头标签主要包括标题、META、关键字、说明、刷新、基础和链接，下面介绍常用的文件头标签的使用。
3.6.1 插入META信息
META对象常用于插入一些为Web服务器提供选项的标记符，方法是通过http-equiv属性和其他各种在Web页面中包括的、不会使浏览者看到的数据。设置META的具体操作步骤如下。
（1）执行“插入”|“HTML”|“文件头标签”|“META”命令，弹出“META”对话框，如图3-34所示。
图3-34 “Meta”对话框
在“META”对话框对话框中主要有以下设置：
● 在“属性”下拉列表中可以选择“名称”或“http-equiv”选项，指定META标签是否包含有关页面的描述信息或HTTP标题信息。
● 在“值”文本框中指定在该标签中提供的信息类型。
● 在“内容”文本框中输入实际的信息。
（2）设置完毕后，单击“确定”按钮即可。
提示
单击“常用”插入栏中的
按钮，在弹出的下拉列表中选择“META”选项，也可以弹出“META”对话框，插入META信息。
3.6.2 设置基础
“基础”定义了文档的基本URL地址，在文档中，所有相对地址形式的URL都是相对于这个URL地址而言的。设置基础元素的具体操作步骤如下。
（1）执行“插入”|“HTML”|“文件头标签”|“基础”命令，弹出“基础”对话框，如图3-35所示。
图3-35 “基础”对话框
在“基础”对话框中可以设置以下参数。
● HREF：基础URL。单击文本框右侧的“浏览”按钮，在弹出的对话框中选择一个文件，或在文本框中直接输入路径。
● 目标：在其下拉列表中选择打开链接文档的框架集。这里共包括以下4个选项。
空白：将链接的文档载入一个新的、未命名的浏览器窗口。
父：将链接的文档载入包含该链接的框架的父框架集或窗口。如果包含链接的框架没有嵌套，则相当于_top，链接的文档将被载入整个浏览器窗口。
自身：将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。
顶部：将链接的文档载入整个浏览器窗口，从而删除所有框架。
（2）在对话框中进行相应的设置，单击“确定”按钮，设置基础。
提示
单击“常用”插入栏中的按钮，在弹出的下拉列表中选择“基础”选项，也可以弹出“基础”对话框。
3.6.3 插入关键字
关键字也就是与网页的主题内容相关的简短而有代表性的词汇，这是给网络中的搜索引擎准备的。关键字一般要尽可能地概括网页内容，这样浏览者只要输入很少的关键字，就能最大程度地搜索网页。插入关键字的具体操作步骤如下。
（1）执行“插入”|“HTML”|“文件头标签”|“关键字”命令，弹出“关键字”对话框，如图3-36所示。
（2）在“关键字”文本框中输入一些值，单击“确定”按钮即可。
图3-36 “关键字”对话框
提示
单击“常用”插入栏中的按钮，在弹出的下拉列表中选择“关键字”选项，也可以弹出“关键字”对话框，插入关键字。
3.6.4 插入说明文字
插入说明的具体操作步骤如下。
（1）执行“插入”|“HTML”|“文件头标签”|“说明”命令，弹出“说明”对话框，如图3-37所示。
（2）在“说明”文本框中输入一些值，单击“确定”按钮即可。
图3-37 “说明”对话框
提示
单击“常用”插入栏中的按钮，在弹出的下拉列表中选择“说明”选项，也可以弹出“说明”对话框，插入说明。
3.6.5 设置刷新
设置网页的自动刷新特性，使其在浏览器中显示时，每隔一段指定的时间，就跳转到某个页面或是刷新自身。插入刷新的具体操作步骤如下。
（1）执行“插入”|“HTML”|“文件头标签”|“刷新”命令，弹出“刷新”对话框，如图3-38所示。
图3-38 “刷新”对话框
在“刷新”对话框中可以进行以下设置。
● 在“延迟”文本框中输入刷新文档要等待的时间。
● 在“操作”区域中，可以选择重新下载页面的地址。选择“转到URL”单选按钮时，单击文本框右侧的“浏览”按钮，在弹出的“选择文件”对话框中选择要重新下载的Web页面文件。选择“刷新此文档”单选按钮时，将重新下载当前的页面。
（2）设置完毕后，单击“确定”按钮即可。
提示
单击“常用”插入栏中的按钮，在弹出的下拉列表中选择“刷新”选项，也可以弹出“刷新”对话框。
3.7 插入其他对象
在网页中除了插入文本外，还可以插入时间和水平线等其他的对象。
3.7.1 上机练习——插入日期
当需要在网页的指定位置插入准确的日期资料时，可以执行“插入”|“日期”命令来实现。添加日期的好处是：既可以选用不同日期格式，规范而准确地表达日期，同时该命令还可以设置自动更新，让网页显示当前最新的日期和时间。
CD-ROM/实例素材/练习文件/03/3.7.1/index.htm
CD-ROM/实例素材/完成文件/03/3.7.1/index1.htm
下面通过实例讲述如何在网页中插入日期，效果如图3-39所示，具体操作步骤如下。
图3-39 插入日期效果
（1）打开练习网页文档，如图3-40所示。
图3-40 打开网页文档
（2）将光标置于要插入日期的位置，执行“插入”|“日期”命令，如图3-41所示。
图3-41 执行“插入”| “日期”命令
（3）选择命令后，弹出“插入日期”对话框，在对话框中的“星期格式”下拉列表中选择“星期四”，在“日期格式”列表框中选择“1974年3月7日”，在“时间格式”文本框中输入“22:18”，勾选“储存时自动更新”复选框，如图3-42所示。
（4）单击“确定”按钮，插入日期，将“对齐”设置为右对齐，如图3-43所示。
图3-42 “插入日期”对话框
图3-43 插入日期
（5）保存文档，按【F12】键在浏览器中预览，效果如图3-39所示。
3.7.2 上机练习——插入水平线
很多网页在其下方会显示一条水平线，以分割网页主题内容和底端的版权声明等，根据设计的需要，也可以在网页任意位置加入水平线，达到区分网页中不同内容的目的。
下面通过实例讲解如何在网页中插入水平线，效果如图3-44所示，具体操作步骤如下。
图3-44 插入水平线效果
CD-ROM/实例素材/练习文件/03/3.7.2/index.htm
CD-ROM/实例素材/完成文件/03/3.7.2/index1.htm
（1）打开网页文档，如图3-45所示。
图3-45 打开网页文档
（2）将光标置于要插入水平线的位置，执行“插入”|“HTML”|“水平线”命令，如图3-46所示。
图3-46 选择“水平线”命令
（3）选择命令后，即可插入水平线，如图3-47所示。
图3-47 插入水平线
（4）选中插入的水平线，执行“窗口”|“属性”命令，打开“属性”面板，可以设置水平线的属性，如图3-48所示。
图3-48 水平线“属性”面板
水平线“属性”面板中主要有以下参数。
● 宽：在其文本框中输入水平线的宽度值，默认单位是像素，也可以选择百分比。
● 高：在其文本框中输入水平线的高度值，它的单位只能是像素。
● 对齐：在其下拉列表中包括4种对齐方式，分别是“默认”、“左对齐”、“居中对齐”和“右对齐”，表示水平线在表格内的不同对齐方式，可根据需要进行选择。
● 阴影：勾选此复选框，则水平线将产生阴影效果。
（5）选中插入的水平线，打开代码视图，在代码视图中输入color="#FFCC99"，设置水平线的颜色，如图3-49所示。
图3-49 输入代码
（6）保存文档，按【F12】键在浏览器中预览，效果如图3-44所示。
3.8 实例精讲
本章主要讲述了基本文本网页的创建，创建站点、输入文本、设置文本格式、创建项目列表和编号列表、设置头信息等，下面通过两个实例巩固一下本章所学知识。
实例1——创建本地站点实例
站点是存放和管理网站中所有文件的地方，每个网站都有自己的站点。在使用Dreamweaver创建网站前，必须创建一个本地站点，以便更好地创建网页和管理网页文件。创建本地站点的具体操作步骤如下。
（1）启动Dreamweaver，执行“站点”|“管理站点”命令，弹出“管理站点”对话框，在对话框中单击“新建”按钮，如图3-50所示。
（2）弹出“站点设置对象”对话框，在对话框中选择“站点”选项，在“站点名称”文本框中输入名称，可以根据网站的需要任意起一个名字，如图3-51所示。
图3-50 “管理站点”对话框
图3-51 设置站点名称
（3）单击“本地站点文件夹”文本框右侧的浏览文件夹按钮，弹出“选择根文件夹”对话框，选择站点文件，如图3-52所示。
（4）单击“选择”按钮，选择站点文件后如图3-53所示。
图3-52 “选择根文件夹”对话框
图3-53 指定站点位置
（5）单击“保存”按钮，更新站点缓存，如图3-54所示。
（6）弹出“管理站点”对话框，其中显示了新建的站点，如图3-55所示。
（7）单击“完成”按钮，在“文件”面板中可以看到创建的站点文件，如图3-56所示。
图3-54 更新站点缓存提示框
图3-55 “管理站点”对话框
图3-56 “文件”面板
实例2——创建基本文本网页实例
本章主要讲述了创建网页文本的基本知识，下面通过实例讲解如何创建图3-57所示的基本文本网页的效果，具体操作步骤如下。
图3-57 创建基本文本网页效果
CD-ROM/实例素材/练习文件/03/3.8.2/index.htm
CD-ROM/实例素材/完成文件/03/3.8.2/index1.htm
（1）打开网页文档，如图3-58所示。
图3-58 打开网页文档
（2）将光标置于相应的位置，输入文字，如图3-59所示。
图3-59 输入文字
（3）将光标置于文字开头，按住鼠标的左键向下拖动至文字结尾，选中所有的文字，如图3-60所示。
图3-60 选中文字
（4）打开“属性”面板，单击“字体”右边的下拉列表，弹出“新建CSS规则”对话框，在对话框的“选择器名称”中输入名称，如图3-61所示。
图3-61 “新建CSS规则”对话框
（5）单击“确定”按钮，设置字体，如图3-62所示。
图3-62 设置字体
（6）在“大小”下拉列表中选择合适的字体大小，如图3-63所示。
图3-63 设置字体大小
（7）单击“颜色”按钮，在弹出的颜色列表中选择字体的颜色，如图3-64所示。
图3-64 设置字体颜色
（8）单击“保存”按钮，保存文档，按【F12】键在浏览器中预览，效果如图3-57所示。