第 4 章 在网页中插入基本元素

第第 44 章 在网页中插入基本元素章 在网页中插入基本元素

本章学习目标 本章学习目标 熟悉普通文本、特殊文本的插入方法，熟悉普通文本、特殊文本的插入方法，项目列表和文本格式化的方法项目列表和文本格式化的方法 ;;

掌握图像插入、属性设置的方法和网站掌握图像插入、属性设置的方法和网站相册的制作。相册的制作。

掌握各种媒体的插入方法、不同媒体相掌握各种媒体的插入方法、不同媒体相关参数的具体设置、系统集成关参数的具体设置、系统集成 FlashFlash 按按钮和文本的插入以及加入音乐的技巧。钮和文本的插入以及加入音乐的技巧。

4.14.1 文本元素的插入文本元素的插入

4.1.1 4.1.1 文本元素的插入文本元素的插入

11．普通文本的插入．普通文本的插入

22．特殊文本的插入．特殊文本的插入

3. 3. 在字符之间添加空格在字符之间添加空格

4.1.2 4.1.2 格式化文本格式化文本 DreamweaverDreamweaver 中的文本格式设置与使用中的文本格式设置与使用

标准字处理程序类似。标准字处理程序类似。 可以为文本块设置默认格式化样式（段可以为文本块设置默认格式化样式（段

落、标题 落、标题 11 、标题 、标题 22 等），更改所选文等），更改所选文本的字体、大小、颜色和对齐方式，或本的字体、大小、颜色和对齐方式，或者应用文本样式（如粗体、斜体、等宽者应用文本样式（如粗体、斜体、等宽字体和下划线等）。字体和下划线等）。

对字体的属性进行设置一般有属性面板法和菜对字体的属性进行设置一般有属性面板法和菜单命令两种方法，使用菜单命令时，只需要选单命令两种方法，使用菜单命令时，只需要选择“文本”菜单下的相应命令，然后进行具体择“文本”菜单下的相应命令，然后进行具体的设置即可。的设置即可。

““ 文本”属性面板中各选项含义及设置方法如下。文本”属性面板中各选项含义及设置方法如下。 格式格式。。设置所选文本（一般是标题文本）的段落样式。设置所选文本（一般是标题文本）的段落样式。 样式。样式。显示当前应用于所选文本的类样式。显示当前应用于所选文本的类样式。 粗体。粗体。将将 <b><b> 或或 <strong><strong> 标签应用于选定的文本，即对所选标签应用于选定的文本，即对所选

文本加粗。文本加粗。

斜体。斜体。将将 <i><i> 或或 <em><em> 标签应用于选定的文本，即对所选文标签应用于选定的文本，即对所选文本进行倾斜设置。本进行倾斜设置。

字体。字体。对所选的文本进行字体设置，默认情况下中文字体是对所选的文本进行字体设置，默认情况下中文字体是“宋体”。要设置文本的“字体”，在“字体”下拉列表中选择“宋体”。要设置文本的“字体”，在“字体”下拉列表中选择一种字体即可。一种字体即可。

大小。大小。对所选文本进行字体大小的设置。对所选文本进行字体大小的设置。

颜色。颜色。 ““ #00ff00”#00ff00” 形式的颜色代码是形式的颜色代码是 RGBRGB 颜色，必须以“颜色，必须以“＃”字符开头。 ＃”字符开头。

对齐方式对齐方式。。对文本段落进行对齐设置。对文本段落进行对齐设置。

链接。链接。对所选的文本建立超级链接。对所选的文本建立超级链接。

4.1.3 4.1.3 项目列表项目列表 11 ．有序列表．有序列表 有序列表又称为编号列表，是有一定排列顺序的列表有序列表又称为编号列表，是有一定排列顺序的列表

，一般前面有数字前导字符，也可以是阿拉伯数字、，一般前面有数字前导字符，也可以是阿拉伯数字、英文字母、罗马数字等符号。 英文字母、罗马数字等符号。

22 ．无序列表 ．无序列表 无序列表又称为项目列表，是一系列无顺序级别关系无序列表又称为项目列表，是一系列无顺序级别关系

的项目文本组成的列表，一般前面是用项目符号作为的项目文本组成的列表，一般前面是用项目符号作为前导字符。前导字符。

33 ．定义列表 ．定义列表 定义列表不使用项目符号或数字这样的前导字符，通定义列表不使用项目符号或数字这样的前导字符，通

常用在词汇表或说明书中。 常用在词汇表或说明书中。 44 ．用现有文本创建列表 ．用现有文本创建列表 55 ．创建嵌套列表 ．创建嵌套列表 66 ．列表属性设置 ．列表属性设置 使用“列表属性”对话框可以设置整个列表或个别列使用“列表属性”对话框可以设置整个列表或个别列

表项的外观，如设置编号样式、重置计数、设置个别表项的外观，如设置编号样式、重置计数、设置个别列表项或整个列表的项目符号样式选项。列表项或整个列表的项目符号样式选项。

列表类型列表类型。。指定列表属性；指定列表属性； 列表项目列表项目。。指定列表中的个别项。使用弹出式菜单选择项指定列表中的个别项。使用弹出式菜单选择项

目符号、编号、目录或菜单列表。根据所选的“列表类型”，对目符号、编号、目录或菜单列表。根据所选的“列表类型”，对

话框中将出现不同的选项；话框中将出现不同的选项； 样式样式。。确定用于编号列表或项目列表的编号、项目符号的样确定用于编号列表或项目列表的编号、项目符号的样

式。所有列表项都将具有该样式，除非为列表项指定新样式； 式。所有列表项都将具有该样式，除非为列表项指定新样式； 开始计数开始计数。。设置第一个编号列表项的值。设置第一个编号列表项的值。

4.1.4 4.1.4 插入文本及美化插入文本及美化 在本例中，将在已有在本例中，将在已有

基本框架的“科技学基本框架的“科技学院招生网”网站的首院招生网”网站的首页页面中添加一些文页页面中添加一些文本、项目列表，并对本、项目列表，并对它们进行设置，如缩它们进行设置，如缩进、加粗、倾斜、大进、加粗、倾斜、大小、颜色等，最终效小、颜色等，最终效果如图所示。 果如图所示。

4.2 4.2 图像元素图像元素 在网页的制作中图像的格式有一定的要在网页的制作中图像的格式有一定的要

求，一般用于网页的图像要求是求，一般用于网页的图像要求是 GIFGIF 、、JPEGJPEG 或或 PNG 3PNG 3 种格式中的一种。种格式中的一种。

4.2.2 4.2.2 插入图像插入图像 11 ．直接插入图像．直接插入图像 22 ．用占位符插入图像 ．用占位符插入图像

4.2.3 4.2.3 插入插入 FireworksFireworks 图片图片 FireworksFireworks 可以将优化后的图像和可以将优化后的图像和 HTMLHTML 文件导文件导

出并保存到所需的出并保存到所需的 DreamweaverDreamweaver 站点文件夹中。 站点文件夹中。 4.2.4 4.2.4 实例实例 1212 ：制作网站相册：制作网站相册 在在 DreamweaverDreamweaver 中内置了创建网站相册的命令，中内置了创建网站相册的命令，

但此命令实际是调用了但此命令实际是调用了 FireworksFireworks 的图片处理功的图片处理功能，因此，如要创建网站相册，必须先安装能，因此，如要创建网站相册，必须先安装 FirewFireworksorks 软件。另外，为了创建网站相册，还需收集软件。另外，为了创建网站相册，还需收集建立相册的图片。在开始创建相册之前，将相册建立相册的图片。在开始创建相册之前，将相册的所有图像放置在一个文件夹中（该文件夹不必的所有图像放置在一个文件夹中（该文件夹不必位于站点中）。另外，确保图像文件名是以位于站点中）。另外，确保图像文件名是以 .gif.gif、、 .jpg.jpg 、、 .jpeg.jpeg 、、 .png.png 、、 .psd.psd 、、 .tif.tif 或或 .tiff.tiff 为扩为扩展名，并不能以中文命名。展名，并不能以中文命名。

4.3 4.3 交互对象交互对象

4.3.14.3.1 各种媒体的来源 各种媒体的来源 11 ．系统集成 ．系统集成 22 ．网络下载 ．网络下载 33 ．从素材库导入 ．从素材库导入 44 ．自己制作 ．自己制作

4.3.2 4.3.2 FlashFlash 动画动画 11 ．插入．插入 FlashFlash影片 影片

““FlashFlash影片”属性面板影片”属性面板

FlashFlash 。。用于设置用于设置 FlashFlash 影片的名称，以便在脚本中引用。影片的名称，以便在脚本中引用。 宽和高宽和高。。用于设置用于设置 FlashFlash 影片的宽度和高度。影片的宽度和高度。 文件文件。。用于设置用于设置 FlashFlash 影片文件的路径。影片文件的路径。 源文件源文件。。用于指定用于指定 FlashFlash 影片源文件。 影片源文件。

对齐对齐。。用于设置影片的对齐方式。 用于设置影片的对齐方式。

背景颜色背景颜色。。用于设置影片区域的背景颜色。用于设置影片区域的背景颜色。

垂直边距和水平边距垂直边距和水平边距。。用于设置影片上下和左右空白区用于设置影片上下和左右空白区域的像素值，可以在数值框中输入单位是像素的间距值。域的像素值，可以在数值框中输入单位是像素的间距值。

品质品质。。用于设置用于设置 FlashFlash 影片的显示质量。影片的显示质量。 比例比例。。用于设置用于设置 FlashFlash 影片的显示比例。有“全部显示”、“影片的显示比例。有“全部显示”、“

无边框”和“严格匹配”无边框”和“严格匹配” 33 个选项。个选项。

选中该复选框，则影片会循环播放。选中该复选框，则影片会循环播放。

选中该复选框，则当装载网页时即自动播放动画。选中该复选框，则当装载网页时即自动播放动画。

单击该按钮将自动打开单击该按钮将自动打开 FlashFlash 软件对源文件进行软件对源文件进行处理，但要确定有源文件，并已经在源文件属性中指定处理，但要确定有源文件，并已经在源文件属性中指定了其路径。了其路径。

用于恢复用于恢复 FlashFlash影片的原始尺寸。影片的原始尺寸。 用于在设计视图中播放用于在设计视图中播放 FlashFlash影片。影片。 用于打开“参数”对话框，在该对话框中可以输用于打开“参数”对话框，在该对话框中可以输

入一些附加参数。入一些附加参数。 类类。。用于为用于为 FlashFlash影片提供一种样式。影片提供一种样式。 22 ．插入．插入 FlashFlash按钮 按钮 33 ．插入．插入 FlashFlash 文本 文本

4.3.3 4.3.3 插入其他动态元素插入其他动态元素

11 ．插入．插入 ShockwaveShockwave 影片 影片 22 ．插入．插入 Applet Applet

33 ．插入．插入 ActiveXActiveX 控件 控件 44 ．插入插件 ．插入插件

4.3.4 4.3.4 为网页加入音乐为网页加入音乐

11 ．背景音乐 ．背景音乐 （（ 11 ）添加背景音乐代码）添加背景音乐代码（（ 22 ）通过插入插件来添加背景音乐）通过插入插件来添加背景音乐

22 ．页面音乐的链接和嵌入 ．页面音乐的链接和嵌入 （（ 11 ）在页面中单击要链接声音文件的网页元素，例如：）在页面中单击要链接声音文件的网页元素，例如：

文本或图像等。 文本或图像等。 （（ 22 ）在属性面板中的）在属性面板中的 LinkLink 文本框中输入声音文件即可。文本框中输入声音文件即可。

4.3.4 4.3.4 实例实例 1313 ：插入：插入 FLASHFLASH按钮按钮