第 10章 插入文本、图像及超级链接本章要点：
插入文本,特殊字符,日期,水平线
创建列表
设置文本属性
插入图像,鼠标经过图像,网站相册
设置图像属性
设置超链接,锚点链接
CSS样式
10.1 插入文本和对象
10.1.1 插入文本在网页中插入文本，可以有以下两种方式：
（ 1） 在文档编辑窗口中直接由键盘输入 。
（ 2）复制其他已有的文本。即：先选中要复制的文本，用 【 复制 】 命令或用快捷健 Ctrl+C复制，
然后切换到 Dreamweaver MX文档编辑窗口，将插入点设置到要放文本的地方，然后用 【 编辑 】 →
【 粘贴 】 命令或按快捷键 Ctrl+v。
10.1.2 插入特殊的文本字符
1．插入特殊字符操作步骤如下：
（ 1）在需要添加特殊字符的位置单击，设置插入点。
（ 2）选择,插入,面板的,字符,类别，然后选择所需特殊字符。
（ 3）若面板上没有所需字符，则单击面板最后的,其他字符,按钮。
（ 4）如果要在文档中插入象■、◆等这样的特殊符号，
就不能利用 Dreamweaver MX提供的方法了 。
2．插入空格选择 【 编辑 】 → 【 参数选择 】 菜单命令，打开
,参数选择,对话框，左边选择,常规,分类，
在右边将,允许多个连续的空格,复选框选中，
如图 10-3所示，这样在文档中就可以用空格键连续插入空格了。
3．插入换行符插入换行符的方式：首先将光标定位在要换行的位置，然后单击,字符,面板的,换行符,按钮。
10.1.3 设置文本属性
1．应用段落和标题格式在属性面板的,格式,文本框中可以设置文本的段落和标题字体。标题共分 6级，标题 1的字体最大，标题 6
的字体最小
2．修改文本字体通过单击字体列表文本框的下拉箭头，弹出字体列表，
如图 10-6所示，选择其中的字体类型，可以为所选择的文本修改字体类型。
3．设置字体的大小在属性面板的,大小,列表框中可以选择所需的字体的 大小。
4．设置文本颜色可以通过属性面板对文本的颜色进行设置，该颜色将覆盖,页面属性,中设置的文本颜色。
5．文本的对齐方式和缩进文本的对齐方式有四种：左对齐、居中对齐、右对齐和两端对齐。
6．设置文本的样式首先选中文本，然后选择 【 文本 】 → 【 样式 】 子菜单中的样式即可，这些样式可以随意组合。
10.1.4 插入更新日期在文档中插入当前日期的步骤如下：
（ 1） 在文档中将光标插入在要插入日期的位置 。
（ 2） 选择 【 插入 】 → 【 日期 】 菜单命令,或单击,插入,
面板上的,日期,按钮 。
（ 3）在弹出的,插入日期,对话框中选择日期格式，
在三个下拉列表中可分别选择星期、日期和时间的格式。如图,
10.1.5 插入水平线要插入水平线的方法如下：
（ 1） 将插入点放置在要插入水平线的位置 。
（ 2） 选择 【 插入 】 → 【 水平线 】 菜单命令,或单击
,插入,面板上的,水平线,按钮 。
（ 3）此时文档中就插入了一条水平线，选中该水平线，
在属性面板上可对其属性进行编辑。如下图所示
10.1.6 创建项目列表
1．创建项目列表
（ 1） 选中要设置为列表的文本,或将光标放置在要插入列表的行 。
（ 2） 在属性面板中单击,项目列表,按钮或,编号列表,按钮,或选择
【 文本 】 → 【 列表 】 菜单项,从扩展的子菜单中选择需要的列表类别 。
（ 3） 输入完整的列表项内容后,按回车键两次,即可完成整个列表的插入 。
2．创建嵌套项目列表
（ 1） 将光标放置在需要嵌套的列表项行中 。
（ 2） 在,属性,面板中按下,文本缩进,按钮,或者选择 【 文本 】 → 【 缩进 】 菜单命令,将列表项缩进 。 即可看到项目被嵌套了 。
（ 3）如果要将深级别的列表提高级别，可以单击,属性,面板的,文本凸出,按钮，或选择 【 文本 】 → 【 凸出 】 菜单命令。
3．设置项目列表属性列表属性可以决定整个列表和选定列表项的外观。可以通过设置列表的属性来选择列表的类型，从而控制列表的样子。
10.2 插入图像
10.2.1 插入图像在网页中可以插入 GIF,JPEG和 PNG格式的图像，
同时还可以在表格、层中插入图像。
提示：要插入的图像文件应该存放于当前站点的目录内 。 如果要插入的图像没有位于本地站点的目录中,则会出现一个对话框,询问是否要将该图像文件复制到本地站点中 。 选择,是,按钮将图像文件保存在本地站点内,以保证文档中对图像文件的正确引用 。
10.2.2 设置图像属性如果要调整图像的属性，选中图像，就可在,属性,面板上设置图像的相关属性。图像的属性面板如下图所示,
10.2.3 创建图像映射
1．建立图像映射要建立图像映射，也就是要在图像上建立热点。图像的热点工具在图像属性检查器上，有矩形、圆形和多边形三种。如下图所示,
2．修改图像热点可以很容易对在图像映射中所创建的热点进行编辑。可以移动热点，调整热点大小，或者在层之间向上或向下移动热点。还可以将含有热点的图像从一个文档拷贝到其他文档，或者拷贝某图像中的一个或多个热点，然后将其粘贴到其他图像上。
10.2.4 创建鼠标经过图像鼠标经过图像是在浏览器中当鼠标移到图像上时，会变化成另一幅图像。鼠标经过图像实际上由两个图像组成：主图像（当首次载入网页时显示的图像）和次图像（当鼠标移到主图像上时显示的图像）。
10.2.5 创建网站相册创建网站相册的操作步骤如下：
1）选择 【 命令 】 → 【 创建网站相册 】 菜单命令。
2）在,相册标题,文本域中输入一个标题。
3）单击,源图像文件夹,文本域旁的,浏览,
按钮，选择包含源图像的文件夹。
4）单击,目标文件夹,文本域旁的,浏览,按钮，选择（或创建）一个用来存放所有导出的图像和 HTML文档的目标文件夹，该文件夹必须位于站点内。
5）指定缩略图的显示选项
6）在,相片格式,中选择大尺寸图像的格式。大尺寸图像的格式可以不同于缩略图的格式。
7）选中复选框,为每张相片建立导览页面,
可以为每个源图像创建一个 Web页
8）单击,确定,以创建网站相册的 HTML
和图像文件。
10.3 超级链接
10.3.1 创建到文档的链接通过链接到 HTML文档，能从当前网页中的文本或图像等对象跳转到另一个网页中去。链接 HTML文档最常用也是最为方便的方法是使用“属性”面板。
1．从网页已有元素创建链接
2．直接创建链接
10.3.2 创建到文档的锚链接
“锚”又称作“书签”，指的是在网页中，
需要跳转到某 —特定的位置时，就需要在此位置建立一个位置标记，点击链接到这个位置标记的元素时，页面就跳转到该位置。
创建锚链接包含两个步骤,
1．创建命名锚记
2．创建锚链接
10.3.3 创建 E-mail链接
E-mail链接是一种特殊的链接,单击这种链接,不是跳转到相应的网页上,也不是下载相应的文件,而是启动浏览器默认的电子邮件处理程序,以便书写电子邮件,并发往指定的地址 。
创建电子邮件链接可以使用插入邮件链接命令，也可以使用属性面板来创建电子邮件链接。
10.3.4 创建空链接空链接也称为“无址链接”，是一个无指向的链接，它的含义同它的名字一样，不会跳转到任何地方。
创建空链接的操作步骤如下：
（ 1） 在文档窗口中选取文本,图像或对象 。
（ 2）在“属性”面板的“链接”框中键入一个数字 符号（＃），即可完成空链接的建立,
10.3.5 创建跳转菜单
1．创建跳转菜单
2．修改跳转菜单创建跳转菜单后，如果要对其修改，可以通过属性面板来进行。选中想要修改的跳转菜单，通过属性面板可以修改跳转菜单
10.4 CSS样式
10.4.1 CSS概述
CSS是 Cascading Style Sheets，也即,层叠样式表,的简称，利用它可以对网页中的文本内容进行精确的格式化控制。
10.4.2 CSS样式的基本操作
1,CSS样式面板可以按照以下方法打开 CSS样式面板：选择 【 窗口 】
→ 【 CSS 样 式 】 菜单命令，或按 Shift+F11快捷键。
打开的 CSS样式面板，如图
2．创建 CSS样式
提示：自定义样式的名称必须以句点开头,
可以包含任何字母和数字组合 。 如果没有输入开头的句点,Dreamweaver会自动加入 。
3．链接外部 CSS样式
4．应用自定义 CSS样式
5,编辑 CSS样式
10.4.3 设置 CSS样式格式
CSS样式定义对话框中可以定义样式的各种类型的参数设置，共有 8个分类：类型、
背景、区块、盒子、边框、列表、定位、
扩展。
提示：样式定义对话框中的大多数下拉列表框,实际上是下拉列表框和文本框的组合 （ 组合框 ）,既可以通过打开下拉列表选择设置,也可以直接在其中输入相应数值 。 如果将框内清空,
表明不进行这项设置,或使用这项设置的默认值 。
10.4.4 CSS样式应用实例
【 实例 1】 固定页面的背景图片。
【 实例 2】 美化超链接的文本样式。
a:link状态 a:hover状态
a:visited状态
10.5 小结本章介绍的内容很多，这些内容是进行网页设计必备的基础。主要包括：在文档中插入文本、特殊字符、日期以及水平线的方法以及如何设置文本的属性；
在文档中如何创建列表并进一步对列表进行修饰；在文档中插入图像以及设置图像属性的方式；建立网站相册；建立各种超链接的方式； CSS样式的建立及使用等内容。
插入文本,特殊字符,日期,水平线
创建列表
设置文本属性
插入图像,鼠标经过图像,网站相册
设置图像属性
设置超链接,锚点链接
CSS样式
10.1 插入文本和对象
10.1.1 插入文本在网页中插入文本，可以有以下两种方式：
（ 1） 在文档编辑窗口中直接由键盘输入 。
（ 2）复制其他已有的文本。即：先选中要复制的文本，用 【 复制 】 命令或用快捷健 Ctrl+C复制，
然后切换到 Dreamweaver MX文档编辑窗口，将插入点设置到要放文本的地方，然后用 【 编辑 】 →
【 粘贴 】 命令或按快捷键 Ctrl+v。
10.1.2 插入特殊的文本字符
1．插入特殊字符操作步骤如下：
（ 1）在需要添加特殊字符的位置单击，设置插入点。
（ 2）选择,插入,面板的,字符,类别，然后选择所需特殊字符。
（ 3）若面板上没有所需字符，则单击面板最后的,其他字符,按钮。
（ 4）如果要在文档中插入象■、◆等这样的特殊符号，
就不能利用 Dreamweaver MX提供的方法了 。
2．插入空格选择 【 编辑 】 → 【 参数选择 】 菜单命令，打开
,参数选择,对话框，左边选择,常规,分类，
在右边将,允许多个连续的空格,复选框选中，
如图 10-3所示，这样在文档中就可以用空格键连续插入空格了。
3．插入换行符插入换行符的方式：首先将光标定位在要换行的位置，然后单击,字符,面板的,换行符,按钮。
10.1.3 设置文本属性
1．应用段落和标题格式在属性面板的,格式,文本框中可以设置文本的段落和标题字体。标题共分 6级，标题 1的字体最大，标题 6
的字体最小
2．修改文本字体通过单击字体列表文本框的下拉箭头，弹出字体列表，
如图 10-6所示，选择其中的字体类型，可以为所选择的文本修改字体类型。
3．设置字体的大小在属性面板的,大小,列表框中可以选择所需的字体的 大小。
4．设置文本颜色可以通过属性面板对文本的颜色进行设置，该颜色将覆盖,页面属性,中设置的文本颜色。
5．文本的对齐方式和缩进文本的对齐方式有四种：左对齐、居中对齐、右对齐和两端对齐。
6．设置文本的样式首先选中文本，然后选择 【 文本 】 → 【 样式 】 子菜单中的样式即可，这些样式可以随意组合。
10.1.4 插入更新日期在文档中插入当前日期的步骤如下：
（ 1） 在文档中将光标插入在要插入日期的位置 。
（ 2） 选择 【 插入 】 → 【 日期 】 菜单命令,或单击,插入,
面板上的,日期,按钮 。
（ 3）在弹出的,插入日期,对话框中选择日期格式，
在三个下拉列表中可分别选择星期、日期和时间的格式。如图,
10.1.5 插入水平线要插入水平线的方法如下：
（ 1） 将插入点放置在要插入水平线的位置 。
（ 2） 选择 【 插入 】 → 【 水平线 】 菜单命令,或单击
,插入,面板上的,水平线,按钮 。
（ 3）此时文档中就插入了一条水平线，选中该水平线，
在属性面板上可对其属性进行编辑。如下图所示
10.1.6 创建项目列表
1．创建项目列表
（ 1） 选中要设置为列表的文本,或将光标放置在要插入列表的行 。
（ 2） 在属性面板中单击,项目列表,按钮或,编号列表,按钮,或选择
【 文本 】 → 【 列表 】 菜单项,从扩展的子菜单中选择需要的列表类别 。
（ 3） 输入完整的列表项内容后,按回车键两次,即可完成整个列表的插入 。
2．创建嵌套项目列表
（ 1） 将光标放置在需要嵌套的列表项行中 。
（ 2） 在,属性,面板中按下,文本缩进,按钮,或者选择 【 文本 】 → 【 缩进 】 菜单命令,将列表项缩进 。 即可看到项目被嵌套了 。
（ 3）如果要将深级别的列表提高级别，可以单击,属性,面板的,文本凸出,按钮，或选择 【 文本 】 → 【 凸出 】 菜单命令。
3．设置项目列表属性列表属性可以决定整个列表和选定列表项的外观。可以通过设置列表的属性来选择列表的类型，从而控制列表的样子。
10.2 插入图像
10.2.1 插入图像在网页中可以插入 GIF,JPEG和 PNG格式的图像，
同时还可以在表格、层中插入图像。
提示：要插入的图像文件应该存放于当前站点的目录内 。 如果要插入的图像没有位于本地站点的目录中,则会出现一个对话框,询问是否要将该图像文件复制到本地站点中 。 选择,是,按钮将图像文件保存在本地站点内,以保证文档中对图像文件的正确引用 。
10.2.2 设置图像属性如果要调整图像的属性，选中图像，就可在,属性,面板上设置图像的相关属性。图像的属性面板如下图所示,
10.2.3 创建图像映射
1．建立图像映射要建立图像映射，也就是要在图像上建立热点。图像的热点工具在图像属性检查器上，有矩形、圆形和多边形三种。如下图所示,
2．修改图像热点可以很容易对在图像映射中所创建的热点进行编辑。可以移动热点，调整热点大小，或者在层之间向上或向下移动热点。还可以将含有热点的图像从一个文档拷贝到其他文档，或者拷贝某图像中的一个或多个热点，然后将其粘贴到其他图像上。
10.2.4 创建鼠标经过图像鼠标经过图像是在浏览器中当鼠标移到图像上时，会变化成另一幅图像。鼠标经过图像实际上由两个图像组成：主图像（当首次载入网页时显示的图像）和次图像（当鼠标移到主图像上时显示的图像）。
10.2.5 创建网站相册创建网站相册的操作步骤如下：
1）选择 【 命令 】 → 【 创建网站相册 】 菜单命令。
2）在,相册标题,文本域中输入一个标题。
3）单击,源图像文件夹,文本域旁的,浏览,
按钮，选择包含源图像的文件夹。
4）单击,目标文件夹,文本域旁的,浏览,按钮，选择（或创建）一个用来存放所有导出的图像和 HTML文档的目标文件夹，该文件夹必须位于站点内。
5）指定缩略图的显示选项
6）在,相片格式,中选择大尺寸图像的格式。大尺寸图像的格式可以不同于缩略图的格式。
7）选中复选框,为每张相片建立导览页面,
可以为每个源图像创建一个 Web页
8）单击,确定,以创建网站相册的 HTML
和图像文件。
10.3 超级链接
10.3.1 创建到文档的链接通过链接到 HTML文档，能从当前网页中的文本或图像等对象跳转到另一个网页中去。链接 HTML文档最常用也是最为方便的方法是使用“属性”面板。
1．从网页已有元素创建链接
2．直接创建链接
10.3.2 创建到文档的锚链接
“锚”又称作“书签”，指的是在网页中，
需要跳转到某 —特定的位置时，就需要在此位置建立一个位置标记，点击链接到这个位置标记的元素时，页面就跳转到该位置。
创建锚链接包含两个步骤,
1．创建命名锚记
2．创建锚链接
10.3.3 创建 E-mail链接
E-mail链接是一种特殊的链接,单击这种链接,不是跳转到相应的网页上,也不是下载相应的文件,而是启动浏览器默认的电子邮件处理程序,以便书写电子邮件,并发往指定的地址 。
创建电子邮件链接可以使用插入邮件链接命令，也可以使用属性面板来创建电子邮件链接。
10.3.4 创建空链接空链接也称为“无址链接”，是一个无指向的链接，它的含义同它的名字一样，不会跳转到任何地方。
创建空链接的操作步骤如下：
（ 1） 在文档窗口中选取文本,图像或对象 。
（ 2）在“属性”面板的“链接”框中键入一个数字 符号（＃），即可完成空链接的建立,
10.3.5 创建跳转菜单
1．创建跳转菜单
2．修改跳转菜单创建跳转菜单后，如果要对其修改，可以通过属性面板来进行。选中想要修改的跳转菜单，通过属性面板可以修改跳转菜单
10.4 CSS样式
10.4.1 CSS概述
CSS是 Cascading Style Sheets，也即,层叠样式表,的简称，利用它可以对网页中的文本内容进行精确的格式化控制。
10.4.2 CSS样式的基本操作
1,CSS样式面板可以按照以下方法打开 CSS样式面板：选择 【 窗口 】
→ 【 CSS 样 式 】 菜单命令，或按 Shift+F11快捷键。
打开的 CSS样式面板，如图
2．创建 CSS样式
提示：自定义样式的名称必须以句点开头,
可以包含任何字母和数字组合 。 如果没有输入开头的句点,Dreamweaver会自动加入 。
3．链接外部 CSS样式
4．应用自定义 CSS样式
5,编辑 CSS样式
10.4.3 设置 CSS样式格式
CSS样式定义对话框中可以定义样式的各种类型的参数设置，共有 8个分类：类型、
背景、区块、盒子、边框、列表、定位、
扩展。
提示：样式定义对话框中的大多数下拉列表框,实际上是下拉列表框和文本框的组合 （ 组合框 ）,既可以通过打开下拉列表选择设置,也可以直接在其中输入相应数值 。 如果将框内清空,
表明不进行这项设置,或使用这项设置的默认值 。
10.4.4 CSS样式应用实例
【 实例 1】 固定页面的背景图片。
【 实例 2】 美化超链接的文本样式。
a:link状态 a:hover状态
a:visited状态
10.5 小结本章介绍的内容很多，这些内容是进行网页设计必备的基础。主要包括：在文档中插入文本、特殊字符、日期以及水平线的方法以及如何设置文本的属性；
在文档中如何创建列表并进一步对列表进行修饰；在文档中插入图像以及设置图像属性的方式；建立网站相册；建立各种超链接的方式； CSS样式的建立及使用等内容。
