C第3章Dreamweaver网页的内容编辑(29-45)ok.doc

47第3章 网页的内容编辑第二篇 网页制作技术Dreamweaver网页是互联网信息的载体，网页中的对象有字符、表格、图形、声音、影视、超链接等。本章将介绍在网页中建立、插入、编辑和格式化网页对象的基本方法，介绍运用表格实现对象布局的方法。3.1 页面属性的总体设置图3.1.1 设置标题页面的总体设置就是对作用于整个网页的属性进行设置，包括设置标题、网页头，页面属性等。页面属性主要有的默认字体、背景色、超链接等。3.1.1 设置页面标题和头内容 1设置标题图3.1.2 文件头设置菜单网页标题可以是中文、英文或符号，它将显示在浏览器的标题栏中。设置标题可直接在设计窗口上方的文档工具栏中题栏内输入或更改即可，如图3.1.1所示。 2设置页面头内容 网页的头内容包含了网页的一些重要信息，如关键字、描述文字等，还可以实现一些非常重要的功能，如自动刷新功能。头的内容在浏览器中是不可见的。在插入工具栏中选按钮，展开HTML工具栏，单击最左边按钮的下拉钮，弹出一个下拉菜单，在下拉菜单中列出了文件头的设置项，如图3.1.2所示。选中其中一项，就可以对该项头内容进行设置。现分述如下：图3.1.3 插入关键字 (1) 插入关键字 关键字用于协助网络中的搜索引擎寻找网页而设置的。为了提高查询效率，关键字应当能代表文档的特征，且避免与其他大量文档的关键字重复。设置关键字的方法如下：单击下拉菜单中的“关键字”选项（见图3.1.2），弹出“关键字”对话框（图3.1.3），在该对话框中输入关键字即可。 (2) 插入META标记图3.1.4 设置META信息 META标记用于记录当前网页的备查信息，如编码，作者，版权等信息。在图3.1.2 所示下拉菜单中选“META”项，弹出“META”对话框（图3.1.4），在对话框的“属性”下拉列表中选择“名称”属性，在“值”文本框中输入相应的值，就可以定义相应的信息，。例如要设置网页作者信息，可在“值”文本框中输入“网页作者”，在“内容”文本框中输入作者信息即可。(3)插入说明图2.1.5 设置刷新头信息中的说明，是在网页中插入对该网页的说明内容。在图3.1.2中选“说明”选项，弹出“说明”对话框，在该对话框中填入说明文字即可。 (4)插入刷新在图3.1.2中选“刷新”选项，弹出“刷新”对话框（见图3.1.5），在该对话框中设置刷新。可设置网页经过多少秒刷新一次，还可设置刷新网页时转到URL。3.1.2设置页面属性 单击“属性”面板下部的“页面属性”按钮，可打开“页面属性”对话框，如图3.1.6所示。“页面属性”按钮的位置可参见图2.1.7。 通过“页面属性”对话框可以设置页面的外观、链接、标题等属性。图3.1.6页面属性对话框1设置外观设置网页外观就是设置页面文本的默认字体、字号、文本颜色、背景颜色和背景图像等基本属性。它是在“页面属性”对话框中选“外观”选项完成的，如图3.1.6所示。2设置链接在“页面属性”对话框的“分类”列表中选择“链接”，则对话框如图3.1.7所示。在这个对话框中可以进行一些与页面的链接效果有关的设置。“链接颜色”定义超链接文本默认状态下的字符颜色，“变换图像链接”定义鼠标放在链接字符上时字符的颜色，“已访问链接”定义访问过的链接的文本颜色 ，“活动链接”定义活动链接的颜色，“下划线样式”可以定义链接的下划线样式。3设置标题图3.1.8 设置标题格式对话框图3.1.7设置页面链接在“页面属性”对话框的“分类”列表中选择“标题”选项，对话框如图3.1.8所示，运用这个对话框可以设置各级标题的外观样式。3.2 文本的插入与编辑 文本携带信息量大，占用空间小，显示时间快，是网页中的基本元素。3.2.1 插入文本 向网页中添加文本的方法有三：，直接在Dreamweaver“文档”窗口中键入文本，用“剪切粘贴”的方法插入文本，从Word文档导人文本。 将插入点移到文档中待插入文本的位置（用鼠标在该点单击），这就在窗口中设定了文字的起始位量，便可将文字素材插入到该文档中。3.2.2 编辑文本格式 网页的文本分为段落和标题两种格式。图3.2.1页面属性对话框 在文档编辑窗口中选中一段文本，在“属性面板”的“格式”下拉列表框中选择“段落”，可把选中的文本设置成段落格式，若选择“标题1”到“标题6”某级标题，则可将文本设置成该级标题的格式。设置方法请参见图3.2.1。对于段落和标题文本，都可以在“属性”面板中定义文字的字号、颜色、加粗、倾斜、水平对齐等格式。3.2.3编辑字体列表只有在字体列表中有的字体才可以使用，如果要使用某一中文字体，则必须将它添加到列表中。编辑字体列表的步骤如下； 图3.2.3“编辑字体列表”对话框 在“属性”面板中单击“字体”栏后的下拉钮，则弹出字体列表（见图3.2.2）。由图可见，表中只有6种西文字体和一个中文宋体可用。图3.2.2 字体列表 在图3.2.2所示列表中单击 “编辑字体列表”，则弹出“编辑字体列表”对话框（图3.2.3）。 在“编辑字体列表”对话框中，选中“在以下列表中添加字体”，再从“可用字体”列表框中选择想要的字体，例如选“方正舒体”，再单击旁边的“添加”按钮，该字体就可以加到字体列表中。 单击“确定”钮，则完成字体添加。关闭对话框。3.2.4文本的其他设置1文本换行图3.2.4 设置连续空格输入在文本编辑中，按Enter键换行的行距较大（在代码区生成标签），按Enter+ Shift键换行的行间距较小（在代码区生成标签）。2在文档中输入连续空格在默认情况下，给文档中一处输入连续多个空格，但文档只保留一个空格。如果要保留多个空格则需按以下步骤设置： 选菜单命令“编辑首选参数”，则弹出“首选参数”对话框，如图3.2.4所示。 在对话框的“分类”列表中选“常规”选项，然后勾选“允许多个连续的空格”复选框(图3.2.4)。 单击“确定”钮，则完成输入连续空格设置，关闭对话框。此后可以直接按“空格”键给文本添加空格了。3特殊字符向网页中插入特殊字符的步骤如下：图3.2.5插入特殊字符 在插入工具栏选择“文本”，则切换到字符插入栏，如图3.2.5所示。 单击文本插入栏的字符按钮的下拉钮（图3.2.5右端），则弹出如图3.2.5右侧所示的下拉列表。下拉列表中列出了可输入的特殊字符。 按照下拉列表的提示，向网页中插入特殊符号。4插入列表列表分为两种，项目列表和编号列表。项目列表没有顺序，每一项前边都以项目符号打头，如图3.2.6上部所示；编号列表前边的每一项有序号引导，如图3.2.6下部所示。插入列表的步骤如下： 在文档编辑窗口中选中需要设置的文本。 在“属性”面板中单击项目列表钮，则选中的文本被设置成项目列表，单击编号列表钮，则被设置成编号列表。5插入水平线水平线在文档中可以起到分隔文本的排版作用。插入水平线的步骤如下： 在插入工具栏选择“HTML”项。 将光标移到文档中待插入水平线的位置。 在插入工具栏单击水平线按钮，则在插入点插入了一条水平线。 选中插入的水平线，在“属性”面板中对水平线的其它属性完成设置。6插入日期步骤如下： 将插入工具栏切换为“常用”项，常用工具栏如下： 在文档编辑窗口中，将插入点移到要插入日期的位置。 单击常用工具栏中的“日期”按钮，则弹出的“插入日期”对话框（见图3.2.7）。项目列表编号列表图3.2.6 插入列表图3.2.7 插入日期对话框 选择相应的日期格式，再按确定钮，则当前日期插入到插入点。在网页中，可以实现如字幕一样的滚动文字，以增强网页活力。在“设计”视图下将光标定位在滚动文字的位置，切换到“代码”视图，在文字前添加标记，在文字后添加标记，预览网页就可以看到文字从左向右滚动的效果。可以按以下格式设置滚动字幕的效果。 标记中的参数说明如下：Direction：用于设置滚动的方向，取值可以是left、right、up或down，分别代表向左、向右、向上、向下运动。Scrollamount：用于设置滚动的速度。Behavior:用于设置滚动的方式，scroll代表循环滚动，slide代表只滚动一次，altemate代表来回滚动。例如，设置滚动字幕方向为向左，速度为5，循环滚动，在文字前添加以下代码：还可以对滚动字幕添加动作。例如，希望当鼠标指向滚动字幕时字幕停止；离开时继续滚动。应设置代码如下：从右向左滚动的效果 3.3插入图像图像快速形象地传递信息，能赋予网页更多的新鲜感与活力。然而，若插入的图像容量太大，就会影响浏览速度，令用户无法容忍。但是图像太小，又会降低图像质量，这就要求在容量和质量之间权衡。 在Dreamweave网页中插入图像的格式通常是GIF、JPEG或PNG。3.3.1 插入图像 在制作网页时，先构想好网页布局，并在图像处理软件中将需要插入的图片进行处理，然后存放在站点根目录下的文件夹里。插入图像时，先将插入点移到网页中，再使用菜单命令“插入图像”，或使用“常用”工具栏中选择“图像”按钮，都可弹出“选择图像源文件”对话框，在该对话框中选择要插入的图像文件，单击“确定”按钮，就可把图像插入到网页中。【例3.3.1】向网页中插入一位歌手图像。操作如下： 将歌手图像复制到网站根目录下的PIC文件夹中，并另存为GIF格式。 将插入点移到网页中待插入图像的位置。图3.3.1 “选择图像源文件”对话框 选菜单命令“插入图像”，则弹出“选择图像源文件”对话框，如图3.3.1所示。图3.3.2 图像标签辅助功能属性对话框 在对话框的“查找范围”栏指定图像文件所在的路径，这里选“G:Site1picSinger”,在“文件名称”栏指定图像的文件名。这里选“宋祖英”。按“确定”钮，弹出如图3.3.2所示“图像标签辅助功能属性”对话框。 在对话框的“替换文本”栏输入替换图像的文本。当图像无法显示时，将显示替换图像的文本。这里输入“宋祖英”。 按“确定”钮，关闭对话框，则图像插入到网页中。则插入图像完成。 将指针移到图像的控点上，调整到适当大小，直至满意为止。图3.3.3 图像属性面板 如果在网页中选中插入的图像，则在属性面板中显示图像的属性，如图3.3.3所示。在图像属性面板的左上角，显示当前图像的缩略图，同时显示图像的大小。在缩略图右侧有一个文本框，在其中可以输入图像标记的名称。图像的尺寸大小是可以改变的，当对图像进行缩放等处理时，属性栏中“宽”和“高”的数值会以粗体显示，并在旁边出现一个弧形箭头，单击它可以恢复图像的原始大小。 “水平边距”和“垂直边距”文本框用来设置图像左右和上下与其他元素的距离。“边框”文本框是用来设置图像边框的宽度，默认的边框宽度为0。在属性面板中第3行的右端有3个对齐按钮，可分别设置图像在浏览器中的水平位置：左对齐、居中对齐、居右对齐。在这3个按钮的下方，是“对齐”设置栏，单击其下拉列表钮，可弹出一个列表。列表中共有10个选项，可用来设置图像与文本相互对齐方式，从而灵活实现文字与图片的混排效果。3.3.2插入图像占位符选菜单命令“插入图像对象”，可弹出下级子菜单，如图3.3.4所示。在子菜单中有 “图像占位符”、“鼠标经过图像”和“导航条”等项目。选择不同的子菜单项可以插入不同的图像元素。在布局页面时，如果要在网页中插入一张图片，可以先不制作图片，而是使用占位符来代替图片位置。插入占位符的步骤如下： 执行菜单命令“插入图像对象图像占位符”，则弹出“图像占位符”对话框，如图3.3.5所示。 在对话框中，设置占位符的宽度、高度、占位符的名称和替换字符。占位符的名称必须以字母打头，其后是字母或数字。图3.3.插入其他图像元素的菜单命令图3.3.5 图像占位符对话框 按“确定”钮，则占位符插入完成。3.4 插入表格表格不仅可以按照一定的格式，简洁、准确地显示数据。而在网页制作中，表格的另一个重要用途是实现网页元素的布局。表格是最常用的排版方式之一。 3.4.1 插入表格1插入表格插入表格的步骤如下： 在文档窗口中，将插入点移到需要创建表格的位置。 选菜单命令“插入表格”，或单击常用工具栏中的“表格”按钮，弹出“表格”对话框（如图3.4.1所示）。 在对话框中指定表格的属性。表格的属性有表格的行数、列数、宽度、标题等。 “表格宽度”：设置表格的宽度。可以填人数值，其后的下拉钮用来选择宽度的单位：百分比和像素。其中百分比是指表格宽度占浏览器窗口宽度的百分比。“边框粗细”：设置表格边框的宽度。“单元格边距”：设置单元格中内容与单元格边框间的距离（见图3.4.2）。“单元格间距”：设置单元格与单元格间的距离（见图3.4.2）。“页眉”定义页眉样式，可以在四种样式中选择一种。“标题”定义表格的标题，即表达式名，图3.4.3中的“歌手信息表”就是标题。“对齐标题”定义表格标题的对齐方式。“摘要”可以在这里对表格进行注释。 单击“确定”钮，则表格插入完成。图3.4.1 插入表格对话框图3.4.2 图像占位符对话框单元格单元格中的内容单元格间距单元格中的内容单元格单元格边距插入的表格如图3.4.3所示。图3.4.3 插入成功后的表格 3.4.2表格的格式编辑 1选择表格、区域、单元格要想对表格进行编辑，必须先在表格中选择待编辑的范围：表格、区域、单元格。选择表格范围的方法如下：（1) 选择整个表格。方法有三：方法1：把鼠标指针放在表格边框的任意处，指针变成形或形时单击；方法2：在表格内任意处单击，然后在状态栏选中标签即可方法3：在表格同任意处右击，在弹出的快捷菜单中选择“表格选择表格”即可。将鼠标指针移动到单元格的水平边框上，指针变成形，沿着箭头方向上、下拖动指针，可调整行高。（2) 选择单元格、行、列按住Ctrl键单击一单元格即可选中该单元格；按住左键在表格中从一个单元格拖到另一个单元格，即可选中以这两单元为对角线的一个距形区域内的所有单元格。将光标移动到行左侧，当指针变为形时单击即可选择一行；将光标移动到列上方，当指针变为形时单击即可选择某一列。将鼠标指针移动到单元格的竖直边框上，指针变成，沿水平方向拖动指针，可调整列宽。2设置表格属性选中表格，则属性面板显示为表格属性面板，若选中单元格，则显示单元格属性面板。运用这两个属性面板可以分别设置表格与单元格的属性。（1）设置表格属性图3.4.4 表格属性面板表格选中后，属性面板就成了表格属性面板，如图3.4.4所示。可用它设置表格属性。表格属性面板中主要选项说明如下：图3.4.5 经编辑后的表格 “填充”：用于设置单元格边距。 “间距”：用于设置单元格间距。 “对齐”：用于设置表格中对象的对齐方式，默认的对齐方式为左对齐。 “边框”：用于设置表格边框的宽度。 “背景颜色”：用于设置表格的背景颜色。 “背景”：用于设置表格的背景图像。设置背景图像的方法有二：一是在文本框输入背景图像的路径；二是单击“背景”文本框右侧的“单元格背景URL”按钮，在弹出的“选择图像源文件”对话框（见图3.4.5）中指定填充表格的图像。图3.4.6 是完成格式设置后的表格。【例3.4.1】将歌手的头像设为表格的背景图像。现运用方法2完成，操作如下： 选择待添加背景图像的表格（图3,4,5）。图3.4.7 设置完成后的表格图3.4.6 “选择图像源文件”对话框 在表格属性面板中单击“背景”文本框右侧的“单元格背景URL”按钮，则弹出的“选择图像源文件”对话框（见图3.4.6） 在对话框中的“查找范围”栏指定图像文件名。在对话框的右部显示图像的预览。 单击”确认”按钮，则设置完成。设置完成后的表格如图3.4.7所示。（2）设置单元格属性图3.4.8 单元格属性面板把光标移动到某个单元格内，“属性”面板就成了单元格的属性面板，如图3.4.8所示。可用它设置单元格的属性。单元格“属性”面板中主要选项说明如下：“水平”：用来设置单元格内元素的水平位置，有居左、居右或是居中。“垂直”：用来设置单元格内的垂直排版方式，有顶端对齐、底端对齐或是居中对齐。“不换行”：用于设置单元格中较长的文本不换行。“标题”：使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示。“背景”文本框用来设置表格的背景图像。（3）行和列操作右击表中的一个单元格，将弹出图3.4.9所示快捷菜单。运用这个快捷菜单可以方便地完成添加行或列，删除行或列，增减行宽列高的操作。（4）拆分与合并单元格 拆分单元格时，将光标放在待拆分的单元格内，单击单元格属性面板中的“拆分”按钮，则弹出“折分单元格”对话框，如图3.4.10所示。运用这一对话框可完成拆分操作。图3.4.10拆分单元格按钮及对话框图3.4.9完成行和列操作的快捷菜单选中要合并的单元格，单击属性面板中的“合并”按钮，可将所选定的区域合并成一个单元格。2.4.3 表格的自动格式化 Dreamweaver预设了很多外观已格式化的样式表格，这些样式表格结构清新，色彩搭配自然。选定一个样表来自动格式化已设计的表格，称为表格的自动格式化。采用表格的自动格式化，可以提高表格的制作效率和质量，并能使同一类表格保持外观一致。 【例3.4.2】对已插入到网页中的表格完成自动格式化。步骤如下： 将光标移到待格式化的表格中。 选菜单命令“命令格式化表格”，弹出“格式化表格”对话框，如图3.4.9所示。 对话框的左上角列出了样表的名称，样表名的右边是选定的样表的预览。例如选样表名是“AltRows range”。这里，还可以自己设定相应的参数值。图3.4.11 “格式化表格”对话框 单击“确定”，则选定表格按“AltRows Orange”样表的外观被格式化。格式化后的表格如图3.4.11所示。3.5插入多媒体元素向网页中插入Flash动画、音频、视频等多媒体插件，能极大地丰富网页的表现内容，增强网页的显示效果和表现力，。向网页中设置超链接，可以方便地接连到其他网站，极大地扩展网站的信息空间。3.5.1 插入Flash 在网页中插入动画使网页更具动感。Flash动画是一种文件体积小、效果生动的矢量动画，是网上最流行的动画格式。1在网页中插入Flash动画步骤如下： 将光标移到要插入Flash动画的位置，选“常用”工具栏中的插入“媒体按钮的下拉钮，弹出一下拉菜单，如图3.5.1所示。 在下拉菜单中选“Flash”，弹出“选择文件”对话框，对话框如图3.5.2所示。 在对话框中，选择一个Flash文件，其扩展名为swf的文件。 单击“确定”按钮，则Flash动画插入到网页中。 设置Flash文件的属性。图3.5.2“选择文件”对话框图3.5.1下拉菜单图3.5.3插入到网页中的动画插入的Flash动画在文档窗口中显示带有字母“f”的灰色框，如图3.5.3所示。Flash文件的属性是在属性面板中设置的，属性面板如图2.5.4所示。Flash文件的属性面板中主要设置项如下： “循环”：选中时影片将连续循环播放，否则影片在播放一次后自动停止。 “自动播放”：用于设定Flash文件在页面加载时就播放。 “品质”：可以选择Flash影片的画质，若以最佳状态显示，就选择“高品质”。图3.5.4 Flash动画属性面板图3.5.5 窗口模式设为透明 “对齐”：用来设置Flash动画的对齐方式， 【例3.5.1】将Flash的背景变为透明。 将Flash的背景变为透明，能保证在任何背景下，Flash动画都能避免背景干扰，衬托出动画主题。设置步骤如下： 打开Flash属性面板。 在属性面板中单击“参数”按钮，则打开“参数”对话框，如图3.5.5所示。 设置“参数”为wmode，“值”为transparent。 按“确定”钮，则关闭对话框，完成设置。由图3.5.1所示下拉菜单可以看出，在网页中还可以插入Flash文本、Flash按钮、FlashPaper、Flash Video等，其操作方法基本相同。2插入Flash文本步骤如下： 在图3.5.1所示下拉菜单中选“Flash文本”项，则弹出的“插入Flash文本”对话框，可插入Flash文本。对话框如图3.5.5 所示，可在对话框中设置文本格式和编辑文本。对话框中各主要设置项如下： “转滚颜色”：设定鼠标放在Flash文字上方时的颜色。 “文本”：填写文本。 “显示字体”：如选择该复选框，可以在文本窗口中看到字体的效果。 “链接”：为Flash文本设置链接。 “目标”：设置打开链接的窗口。 “背景色”：设置Flash文本的背景颜色。 “另存为”：设置当前Flash文件保存的文件名和路径。设置中，按“应用”钮可观看设置效果；按“确定”钮完成设置，Flash文本即出现在编辑窗口中。Flash文本文件必须和链接项的文件处于同一级目录下。3创建Flash按钮Flash按钮是用flash制作出来的，点击后将触发某一事件的。多个按钮组合在一起，可以创建网页的导航条。图3.5.7“插入Flash按钮”对话框图3.5.6“插入Flash文本”对话框在3.5.1所示下拉菜单中选“Flash按钮”选项，则弹出的“插入Flash按钮”对话框，可插入Flash按钮。“插入Flash按钮”对话框如图3.5.7所示。“插入Flash按钮”对话框中各项内容说明如下。“样式”：选择按钮的外观。“按钮文本”：用于输入按钮上的文字。 “链接”：输入按钮的链接。可以单击“浏览”按钮找到链接的文件。 “目标”：设置打开链接的窗口。 “另存为”：设置按钮保存的文件名和路径。 设置时可以随时单击“应用”按钮观看设定的效果，设置完毕后单击“确定”钮应完成设置。 如果需要修改Flash按钮对象，可以先选中它，然后在属性面板中单击“编辑”按钮，会自动弹出“插入Flash按钮”对话框，在对话框中更改它的设置。4插入FlashPaperFlashPlayer是一款高性能的、极具表现力的客户端运行的播放器。它能够在各种主流操作系统、浏览器、移动电话和移动设备上提供功能强大的Flash播放。可以在Web页中插入FlashPaper文档。步骤如下。在3.5.1所示下拉菜单中选“FlashPaper文档”项，将弹出的“插入FlashPaper文档”对话框，对话框如图3.5.8所示。在对话框中，浏览到一个FlashPaper文档并将其选定。如果需要，通过输入宽度和高度（以像素为单位）指定FlashPaper对象在Web页上的尺寸。FlashPaper将缩放文档以适合宽度。单击“确定”，则FlashPaper文档插入到页面中。插人FlashPaper文档后，页面上将出现一个Flash占位符。选中该占位符，再单击“属性”面板中的“播放”按钮，可预览FlashPaper文档；单击“停止”可以结束预览。5插入Flash视频图3.5.8 插入FlashPaper文档”对话框图3.5.9 “插入Flash视频”对话框在3.5.1所示下拉菜单中选“Flash视频”项，将弹出的“插入Flash视频”对话框，对话框如图3.5.9所示。在对话框中，从“视频类型”下拉列表中选择视频类型。在“URL”右边文本框中输入Flash视频文件的相对或绝对路径。从“外观”下拉列表中选择Flash视频外观，设置播放方式。设置完成后单击“确定”按钮，则Flash视频插入到网页中。3.5.2在网页中插入音频声音能烘托页面的氛围，网页中常见的声音文件有WAV、MP3、MIDI、AIF、Real Audio格式。1添加背景音乐页面中的背景音乐多以MP3、MIDI文件为主，添加背景音乐有两种方法，一是通过编写代码实现，二是通过行为实现。在HTML语言中，通过标记可以嵌入多种格式的音乐文件。方法如下： 切换到“代码”视图，将光标定位到 之前的位置 输入代码：如果希望循环播放音乐，将以上语句修改为以下语句即可： 按下F12键，在浏览器中查看效果，可以听见背景音乐声。2向页面添加声音向页面添加音频文件有两种方法，一是链接到音频文件，二是嵌入声音文件。（1）链接到音频文件步骤如下： 选择指向音频文件的链接对象（文本或图像）。 在属性面板中，单击文件夹图标选择音频文件，或者在属性面板的“链接”文本框中键入音频文件的路径和名称，即可创建音频文件的链接。【例3.5.2】将网页中的字符“天路”设为超链接热字，当点击“天路”时，播放歌曲天路。步骤如下： 在网页中标记字符“天路”。 在属性面板中点击链接栏后的浏览图标，则弹出“选择文件”对话框。 按照文件所在路径找到歌曲天路并选中。 按“确定”钮，则设置完成。 按F12键，则在浏览器模式下显示网页。“天路”两字呈蓝色，表明为超链接。 点击超链接“天路”，则听到歌曲天路。（2）嵌入声音文件嵌入音频就是将音频文件并人页面中。步骤如下： 将插入点移到网页中要嵌入声音文件的位置。 在“常用”工具栏中单击“媒体”图标，然后选择“插件”。或选菜单命令“插入媒体插件”，则弹出图3.5.10所示“选择文件”对话框。 在对话框中，选择声音文件，如本例中选定“相约在月圆时节”。 单击“确定”按钮，则声音文件插入到网页中。图3.5.11 插入超链接和嵌入音频文件图3.5.10 “选择文件”对话框网页中嵌入音频文件后，在网中将显示声音文件占位符，如图3.5.11所示。在浏览器端安装了所选声音文件的适当插件后，声音便可播放。音频文件占位符若要设置播放器的属性，选中声音文件占位符，在“属性”面板中完成。选中音频文件占位符，则显示播放器属性面板如图3.5.12所示。要实现自动播放，可在播放器属性面板中单击“参数”按钮，然后在弹出的“参数”对话框的“参数”列中输入autostart，在“值”中输入true，单击“确定”按钮即可，如图3.5.13所示。按F12键，打开浏览器预览，这个页面实现了嵌入音乐的效果，在浏览器里显示播放插件。图3.5.12 设置播放器属性2.5.3创建超级链接现介绍三种创建超链接的方法。（1）使用“属性”面板创建超链接步骤如下。 选定要创建超链接的对象。例如选定网页中的歌曲名“山路十八弯”。图3.5.13 循环播放音乐 单击属性面板中“链接”文本框右侧的“文件夹”图标，弹出“选择文件”对话框，对话框如图3.5.14所示。图3.5.14 选择链接的目标文档 在对话框中选择一个要链接的文件。在“文件名”输入目标文件名。例如“山路十八弯”URL栏输入目标文件的路径。如。Music是网站根目录Site下子目录。图3.5.15 锚点文字“山路十八弯”呈蓝色 在对话框按“确定”钮，则超链接建立完成。网页中的锚点文字“山路十八弯”呈蓝色，如图2.5.15所示。（2）使用“指向文件”图标创建超链接“指向文件”图标在属性面板“链接”文本框的右侧 。步骤如下。 选择要创建超链接的对象，例如。 将拖动“指向文件”图标拖到文件面板中的目标文件“相约在月圆时节”，随着拖动指针，显示出一根带箭头的直线从“指向文件”图标指向文件面板中的目的文档，如图3.5.16所示图3.5.16拖动“指向文件”图标创建超链接 释放鼠标，则完成链接建立。锚点文本“相约在月圆时节”呈蓝色。（3）使用“超链接”命令创建超链接例如，点击超链接“韩红”，链接到韩红唱歌的图片。步骤如下： 选择要创建超链接的对象。例如选“韩红” 选掼菜单命令“插入超链接”，或点击“常用”工具栏中的“超链接”按钮，都可显示“超级链接”对话框。如图3.5.17所示。图3.5.18 选择链接目标文件图3.5.17“超级链接”对话框 在对话框中点击链接栏后的浏览安钮，则弹出“选择文件”对话框，如图3.5.18所示。 在“选择文件”对话框中选中图片“韩红”，按“确定”钮，回到“超级链接”对话框。 点“目标”栏的下拉钮，弹出如下4个选项的下拉列表，从中选“_self”。这4个选项如下，用来指定链接的文档打开的位置。l “_blank”：将链接的文档载入一个新的、未命名的浏览器窗口。l “_parent”：将链接的文档载人该链接所在框架的父框架或父窗口。如果包含链接的框架而不是嵌套框架，则所链接的文档载入整个浏览器窗口。l “_self”：将链接的文档载入链接所在的同一框架或窗口。此项是默认值。l “_top”：将链接的文档载入整个浏览器窗口，从而删除所有框架。 按“确定”钮，则完成超链接建立。4创建热点链接热点链接是指，在一张图片上划分多个区域，当指向不同区域时就可以实现与不同目标文档的链接。现以例3.5.1为例说明创建热点链接和方法。【例3.5.3】 在一张中国地图上，点击不同的省份，将会弹出该省的一位歌手图像，并播放这位歌手的歌曲。这其实是一个典型的热点链接问题，在各省区域内都建立一个热点，当点击不同的热点时就会链接到不同的文档和图片。创建热点链接的步骤如下： 制作一幅中国分省地图，地图可从网上下载后稍经加工得到。制作完成的地图如图3.5.22所示。 将地图图片插入到布局单元格中。方法是：l 在插入工具栏中打开“布局”工具栏如图3.5.19所示。l 点击“布局表格”按钮，指针成“”，在网页中拖动指针，画一个布局表格。l 点击“绘制布局单元格”按钮，用相同方法在布局表格中绘制一个，布局单元格。l 将插入点移到布局单元格中，选“插入图像”命令，弹出“选择图像源文件”对话框（图3.5.20）。布局工具栏 布局表格 绘制布局单元格图3.5.19 布局工具栏图3.5.20 “选择图像源文件”对话框l 在对话框中选文件“中国地图”，按“确定”钮，则地图图片插入到布局单元格中。热区绘制工具图3.5.21 “热点”面板与热点绘制工具 选中地图图片，则属性面板改成“热点”属性面板。热点属性面板如图3.5.21所示。图3.5.22 在西藏绘热点图3.5.23 “热