第三节 网页元素的添加
一、插入各种文本
文本是网页中不可缺少的内容之一,是网页中最基本的元素。在一些大型网站中,文字的主导地位是无法替代的。因为文字所占的存储空间非常小,所以以文字为主体的页面下载速度很快,可以最佳地利用网络带宽。而网页中的文本一般以普通文字、段落或各种项目符号等形式显示。
(一)输入文本
在网页中插入文本时,将光标定位于要插入文本的地方,切换输入法就可以直接输入文本。
另外,还可以通过菜单命令【文件】〉【导入】,把存放在Word文档、Excel文档中的信息直接导入到光标所在位置,只是导入的文本格式跟原文件类似。
(二)创建段落
段落指的是一段格式上统一的文本。在文档窗口中,每输入一段文字,按回车键后,已经输入的文字转换为段落,在光标后的内容也自动生成一个新段落。
将光标置于段落中,可在“属性”面板调整该段落的默认字体、对齐方式、缩进、列表类型等。
(三)创建项目列表
在Dreamweaver中包含两种项目列表,一种是有序项目列表(编号列表),另一种是无序项目列表。使用不同的列表形式,能够有效地将网页中相关的项目组织在一起。
创建项目列表有两种方法:
(1)直接创建项目列表。方法是单击【插入】工具栏上的【文本】选项卡,在其中选择项目列表按钮“ul”,在光标所在位置插入项目列表默认图标,接着输入文本后按回车键即可,如需结束列表输入,只要连续按两次回车键即可。
(2)将已有文本转换为项目列表。方法是先输入文本并分成不同的行或段落,选中所输入的文本,单击【插入】工具栏的【文本】选项卡中的项目列表按钮“ul”。
创建的项目列表符号在默认情况下以球形显示。要想更改项目符号的形状,或者将项目列表改为编号列表,可把光标置于列表段落中,单击【属性】面板的【列表项目】按钮并修改即可,如图4-13所示。
图4-13 修改列表项目
(四)插入特殊字符
某些特殊字符在 HTML 中以名称或数字的形式表示,它们被称为实体(entity)。例如,HTML在代码中使用尖括号 〈〉,但您可能需要用此符号表示大于或小于这样的特殊字符,而不希望 Dreamweaver 将它们解释为代码。在这种情况下,可以使用“>”表示大于“〉”,使用“<”表示小于“〈”。HTML 还包含版权符号“©”、“与”符号 “&”、注册商标符号“®”等字符的实体名称。每个实体都有一个名称(如—)和一个数字等效值(如—)。
执行【插入】〉【HTML】〉【特殊字符】子菜单并选择相应的字符名称就可以输入对应的实体。也可以在【插入】工具栏【文本】选项卡中找到位于最右边的“字符”下拉列表框进行选择。
(五)插入空格
如果要插入空格,可以将输入法切换到全角状态,然后按空格键输入。如果不切换,按组合键“Shift+Ctrl+空格”也可以输入。还可以用插入特殊字符“ ”,即“不换行空格”的方式来实现。
二、插入图像
虽然存在很多种图形文件格式,但网页中通常使用的只有三种,即 .gif、.jpeg和 .png。.gif 和 .jpeg 文件格式的支持情况最好,大多数浏览器都可以查看它们。
.gif 文件最多使用 256 种颜色,最适合显示色调不连续或具有大面积单一颜色的图像,例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。
.jpeg 文件格式是用于摄影或连续色调图像的较好格式,这是因为 .jpeg 文件可以包含数百万种颜色。随着 .jpeg 文件品质的提高,文件的大小和下载时间也会随之增加。通常可以通过压缩 .jpeg 文件在图像品质和文件大小之间达到良好的平衡。
.png 文件格式是一种替代 .gif 格式的无专利权限制的格式,它包括对索引色、灰度、真彩色图像以及 Alpha 通道透明度的支持。.png 是 Fireworks软件固有的文件格式。.png 文件可保留所有原始层、矢量、颜色和效果信息(例如阴影),并且在任何时候所有元素都是可以完全编辑的。文件必须具有 .png 文件扩展名才能被 Dreamweaver识别为 .png 文件。由于 .png 文件具有较大的灵活性并且文件较小,因此它们对于几乎任何类型的 Web 图形都是最适合的;但是,Microsoft Internet Explorer(4.0 和更高版本的浏览器)以及 Netscape Navigator(4.04 和更高版本的浏览器)只能部分地支持 .png 图像的显示。因此,除非您的设计所针对的特定目标用户是使用支持 .png 格式的浏览器,否则请使用 .gif 或 .jpeg 以迎合更多人的需求。
(一)插入普通图像
在制作网页时,先构想好网页布局,在图像处理软件中将需要插入的图片进行处理,然后存放在站点根目录下的文件夹里。
插入图像时,将光标放置在文档窗口需要插入图像的位置,然后单击常用插入栏的,并选择下拉菜单中的【图像】。接下来,在打开的对话框中选择图像来源,单击【确定】按钮就完成了图像的插入,如图4-14所示。
图4-14 选择图像源
(二)插入图像占位符
图像占位符是在准备好将最终图形添加到网页之前使用的图形。如果在设计网页时图像还没有制作好,可以使用图像占位符插入到需要插入图像的位置,等待图像制作完成后再替换掉。
插入图像占位符时,将光标放置在文档窗口需要插入图像的位置,然后单击常用插入栏的【图像】按钮,并选择下拉菜单中的【图像占位符】,将会打开如图4-15所示的对话框,可以在此设置占位符的名称、大小和颜色,并为占位符提供文本标签。
(三)插入背景图像
背景图像是网页中的另外一种图像显示方式,该方式显示的图像既不影响文本的输入,也不影响插入式图像的显示。
背景图像和背景颜色一样,都属于【页面属性】对话框中的选项,均可通过【属性】面板(见图4-16)中的【页面属性】按钮进行设置。如图4-17所示。
图4-15 图像占位符设置
图4-16 页面属性
图4-17 背景设置
(四)插入鼠标经过图像
鼠标经过图像是一种在浏览器中查看并在鼠标指针移过它时会发生变化的图像。必须用以下两个图像来创建鼠标经过图像:主图像(首次加载页面时显示的图像)和次图像(鼠标指针移过主图像时显示的图像)。鼠标经过图像中的这两个图像应大小相等;如果这两个图像大小不同,Dreamweaver 将调整第二个图像的大小,使之与第一个图像的属性匹配。
插入鼠标经过图像时,将光标放置在文档窗口需要插入图像的位置,然后单击常用插入栏的【图像】按钮,并选择下拉菜单中的【鼠标经过图像】。
图4-18 鼠标经过图像设置
(五)插入导航条
一个网站的不同页面通常使用统一导航条。通过统一导航条的方法,我们可以实现网站风格的统一,同时也方便了浏览者在不同页面间的跳转。
插入导航条时,将光标放置在文档窗口需要插入导航条的位置,然后单击常用插入栏的【图像】按钮,并选择下拉菜单中的【导航条】(见图4-19),打开如图4-20所示的对话框进行设置。
图4-19 选择【导航条】
图4-20 导航条设置
下面列出部分设置项目。
◇ 加号和减号按钮:单击加号按钮可插入元素;再单击加号按钮会再添加另外一个元素。要删除元素,请选择它,然后单击减号按钮。
◇ 项目名称键入导航条元件的名称(例如, Home. 每一个元件都对应一个按钮,该按钮具有一组图像状态,最多可达四个。元素名称在【导航条元件】列表中显示。用箭头按钮排列元件在导航条中的位置。
◇ 状态图像、鼠标经过图像、按下图像和按下时鼠标经过图像:浏览以选择这四个状态的图像。只需要状态图像;其他图像状态为可选状态。
◇ 替换文本:为该元件输入描述性名称。在纯文本浏览器或手动下载图像的浏览器中,替代文本显示在图像的位置。屏幕阅读器读取替换文本,而且有些浏览器在用户将鼠标指针滑过导航条元件时显示替换文本。
◇“按下时,前往的 URL”:单击“浏览”按钮,选择要打开的链接文件,然后指定是否在同一窗口或框架中打开文件。如果要使用的目标框架未出现在菜单中,可关闭【插入导航条】对话框,然后在文档中命名该框架。
◇ 预先载入图像:选择此选项可在下载页面的同时下载图像。此选项可防止在用户将鼠标指针滑过鼠标经过图像时出现延迟。
◇ 页面载入时就显示“鼠标按下图像”:对于您希望在初始时图像显示为“按下”状态,而不是以默认状态显示的元件,选择此复选框。例如,在第一次下载页面时,导航条上的“主页”元件应处于“按下”状态。在对元件应用此选项时,在【导航条元件】列表中,其名称后面将出现一个星号。
◇ 插入:指定是垂直插入还是水平插入各元件。
◇ 使用表格:选择以表格的形式插入各元件。
三、插入Flash 动画
(一)了解Flash
在网页中添加动态元素可使网页看起来更吸引人。Flash动画是网页中最常见的动态元素。Flash动画是一种矢量动画,它具有生成的动画文件较小、效果好、并能够实现交互等优点。要制作Flash动画,可以使用Macromedia公司出品的Flash软件。
在Dreamweaver中可以直接插入发布后的Flash动画(.swf文件),可插入的Flash动画包括Flash动画文件、flash按钮和flash文本等。
Flash文件中常用的主要有以下几种文件类型。
◇ Flash 视频文件格式(.flv):一种视频文件,它包含经过编码的音频和视频数据。
◇ Flash 文件(.fla):所有项目的源文件,在 Flash 程序中创建。此类型的文件只能在 Flash 中打开(而不是在 Dreamweaver 或浏览器中打开)。您可以在 Flash 中打开Flash 文件,然后将它导出为 .swf 或 .swt 文件以在浏览器中使用。
◇ Flash SWF 文件(.swf):Flash文件(.fla)的压缩版本,已进行了优化以便在 Web上查看。此文件可以在浏览器中播放并且可以在 Dreamweaver 中进行预览,但不能在Flash 中编辑此文件。这是在网页中使用 Flash 按钮和 Flash 文本对象时创建的文件类型。
◇ Flash 模板文件(.swt):这些文件使您能够修改和替换 Flash SWF 文件中的信息。这些文件用于 Flash 按钮对象,使您能够用自己的文本或链接修改模板,以便创建要插入在您的文档中的自定义 SWF文件。
(二)插入Flash按钮
在设计视图或代码视图中工作时,可以在文档中创建和插入 Flash 按钮。进行此操作时不要求安装 Flash,因为Flash 按钮对象是基于 Flash 模板的可更新按钮。
在Dreamweaver 中集成了许多精美的Flash按钮,这为增加网页动态效果提供了方便。在制作网页时可以将自己制作的Flash按钮插入到网页中,也可插入Dreamweaver 集成的按钮。
插入Flash按钮时,可通过菜单【插入记录】〉【媒体】〉【Flash按钮】,打开【插入Flash按钮】对话框。在【插入Flash按钮】对话框中可以选择按钮的样式、显示的文本、链接、背景色等属性。设置好然后单击【应用】或【确定】按钮,将 Flash 按钮插入窗口中。 如果单击“应用”按钮,则对话框会保持打开状态,并可以在文档中预览按钮。如图4-21所示。
图4-21 【插入Flash按钮】对话框
可以通过属性检查器或【插入Flash按钮】对话框来修改 Flash 按钮对象的属性和内容。 属性检查器会显示 Flash 按钮属性。您可以使用属性检查器指定按钮的 HTML物理属性,例如宽度、高度和背景颜色(单击右下角的展开箭头可以看到更多的属性),如图4-22所示。若要修改 Flash 按钮的其他内容属性(例如按钮文本和颜色以及单击按钮时浏览器打开的 URL),则可以使用【插入Flash按钮】对话框。
图4-22 属性检查器
其中主要属性说明如下。
◇ 名称:指定用来标识按钮以进行脚本撰写的名称。在属性检查器最左侧的未标记文本框中输入名称。
◇ 宽和高:指定对象的宽度和高度(以像素为单位)。在设计视图中,通过使用调整大小控制点可以很容易地调整对象的大小。也可以通过在属性检查器中单击【重设大小】按钮,将该对象恢复为其原始大小。
◇ 文件:指定指向 Flash 对象文件的路径。单击文件夹图标可浏览查找所需文件,或者键入路径。
◇ 编辑:单击此按钮打开【Flash对象】对话框,可以对选定的 Flash 对象进行编辑。
◇ 重设大小:单击此按钮将选定的对象重设为原始大小。
◇ 垂直边距和水平边距: 指定按钮上、下、左、右空白的像素数。
◇ 品质: 设置用于定义按钮的 object 和 embed 标记的 quality 参数。设置越高,Flash 内容的显示效果就越好;但这要求更快的处理器以使内容在屏幕上正确显示。【低品质】设置意味着更看重显示速度而非外观,而【高品质】设置意味着更看重外观而非显示速度。【自动低品质】意味着首先看重显示速度,但如有可能则改善外观。【自动高品质】意味着首先看重外观,但根据需要可能会因为显示速度而影响外观。
◇ 比例:设置用于定义按钮或文本对象的 object 和 embed 标记的 scale 参数。此参数定义 Flash 内容在由 width 和 height 值为该 SWF 文件定义的区域内显示的方式。选项有【默认(全部显示)】、【无边框】和【严格匹配】。全部显示会使在指定区域中可以看到整个 .swf文件,同时保持.swf文件的纵横比并避免扭曲;背景颜色的边框可以出现在.swf文件的两侧。无边框方式近似于全部显示方式,只是 .swf 文件的某些部分可能会被裁剪掉。使用“严格匹配”,整个 .swf 文件将填充指定区域,但不保持 .swf文件的纵横比,并且可能会出现扭曲。
◇ 对齐:定义对象在页面上的对齐方式。
◇ 背景颜色:指定对象的背景颜色。
◇ 播放/停止:在【文档】窗口中预览 Flash 对象。单击绿色的【播放】按钮可在播放模式下查看对象:单击红色的【停止】按钮可以停止对象播放,并能够编辑对象。
◇ 参数:打开一个对话框,可在其中输入附加参数。
(三)插入Flash文本
Flash 文本对象允许您创建和插入只包含文本的 Flash SWF 文件。这使您可以使用自己选择的设计器字体和文本创建较小的矢量图形影片。
插入Flash文本时,可通过菜单【插入记录】〉【媒体】〉【Flash文本】,打开【插入Flash文本】对话框。
图4-23 【插入Flash文本】对话框
填好【插入Flash文本】对话框,然后单击【应用】或【确定】按钮,将 Flash 文本插入窗口中。如果单击【应用】按钮,则对话框会保持打开状态,并可以在文档中预览文本。若要修改或播放 Flash 文本对象,所采用的步骤与对 Flash 按钮进行修改或播放所采用的步骤相同。
(四)插入Flash视频
插入Flash视频时,可通过菜单【插入记录】〉【媒体】〉【Flash视频】,打开【插入Flash视频】对话框。
图4-24 【插入Flash视频】对话框
Dreamweaver 提供了以下视频类型选项,用于将 Flash 视频传送给站点访问者。
◇ 累进式下载视频:将 Flash 视频(FLV)文件下载到站点访问者的硬盘上,然后播放。但是,与传统的“下载并播放”视频传送方法不同,累进式下载允许在下载完成之前就开始播放视频文件。
◇ 流视频:对 Flash 视频内容进行流式处理,并在一段可确保流畅播放的很短的缓冲时间后在 Web 页面上播放该内容。若要在网页上启用流视频,必须具有访问Adobe Flash Media Server 的权限,必须有一个经过编码的 Flash 视频(FLV)文件,然后才能在 Dreamweaver 中使用它。可以插入使用以下两种编码/解码器(压缩/解压缩技术)创建的视频文件:Sorenson Squeeze 和 On2。
插入 Flash 视频命令生成一个视频播放器 .swf 文件和一个外观 .swf 文件,它们用于在 Web 页面上显示 Flash 视频内容。这些文件与 Flash 视频内容所添加到的HTML 文件存储在同一目录中。当上传包含 Flash 视频内容的 HTML 页面时,Dreamweaver 将以相关文件的形式上传这些文件。
(五)插入图像查看器
Dreamweaver 包含一个可以用作 Web 相册的 Flash 图像查看器。图像查看器是可以调整大小的应用程序,用于加载和查看一系列 .jpeg 或 .swf 图像。图像查看器可以定义图像的列表,并为每个图像定义链接和题注。用户可以使用【上一个】和【下一个】按钮按顺序查看图像,也可以通过输入图像的编号跳到特定的图像,还可以将图像设置为用幻灯片放映格式播放。
插入图像查看器时,可通过菜单【插入记录】〉【媒体】〉【图像查看器】进行,主要操作流程如下:
(1)将插入点放置到页面中希望图像查看器出现的位置,并选择【插入记录】〉【媒体】〉【图像查看器】。
(2)在“保存 Flash 元素”对话框(见图4-25)中,浏览到站点中用于保存Flash元素的位置,输入名称并单击“保存”按钮。页面中将出现 Flash 元素占位符,并且标记检查器将打开。
图4-25 【保存Flash元素】对话框
注:最好将 Flash 元素保存到与要添加图像查看器的页面所在的站点相同的Dreamweaver站点中。
(3)如果尚未选择 Flash 元素占位符,请将其选定。
(4)在标记检查器中,单击 imageURLs 参数旁边的字段,然后单击行尾的“编辑数组值”按钮,打开对话框进行编辑,如图4-26所示。
图4-26 修改imageURLs
(5)在【编辑 imageURLs 数组】对话框中,单击减号按钮可删除占位符元素;若要添加图像,请单击加号按钮,并单击出现的空值行旁边的文件夹图标,然后选择要添加的图像。您可以添加 .jpeg 或 .swf 文件。
(6)单击【确定】按钮关闭【编辑 imageURLs 数组】对话框。
(7)(可选)使用标记检查器设置图像查看器的其他参数,也可以在属性检查器中设置图像查看器的属性。有关更多信息,请选择该 Flash 元素,然后单击属性检查器中的【帮助】按钮。
(8)选定图像查看器占位符后,单击展开的属性检查器中的【播放】按钮以启动图像查看器,并使用以下图像查看器控件查看图像:
◇ 单击【下一个】或【上一个】按钮查看顺序图像。
◇ 在文本框中输入一个数字以跳到特定的图像。
◇ 单击【播放】按钮以按照幻灯片放映格式查看图像。
◇ 单击【停止】按钮以停止幻灯片放映格式。
(9)单击展开的属性检查器中的【停止】按钮以停止播放图像查看器。
其他常用属性如表4.1所示。
表4.1 图像查看器属性表
(六)设置Flash背景透明
有时为了提高网页视觉效果,可在网页中插入背景图像,然后再在该网页中插入Flash影片,这时需要将Flash影片设置为背景透明,否则就看不见下面的背景图像。
使插入的Flash处于选择状态,单击属性面板中的【参数】,在随即弹出的参数表(见图4-27)中添加一行,参数名为“wmode”,值为“transparent”。使用此方法时注意,若页面中有人工输入的Flash ID,此ID将被删除,请在添加完参数后重新输入ID。
图4-27 Flash透明背景设置
四、插入音频和视频
(一)插入音频
音效在网页动画中有画龙点睛的作用,可以使网页给访问者留下深刻的印象。Dreamweaver提供了多种在网页中插入声音的方法,比如直接插入法、代码法以及插件法等。既可以把声音作为不受控制的背景音乐,也可以由用户自己控制插入的声音。
网页中常用的音频格式较多,通常使用的音频文件格式有 .mp3、.wav、.wma、.midi、.rm以及.aif等。其中,.midi文件一般只用来做网页的背景音乐。
1. 代码法
背景音乐是在浏览器中打开网页时听到的声音,它一般不需要去控制,播放的方式为循环播放。直接插入法是利用〈bgsound〉标记来实现的。一般直接把〈 bgsound 〉标记添加到网页文件中的〈head〉〈/head〉之间,并设置好背景音乐的存放路径就可以了。如果声音文件过大,为防止影响网页下载速度,也可以放置在网页结束标记〈/body〉之前。
例如以下代码:
〈head〉
〈title〉背景音乐〈/title〉
〈bgsound src="xxxx.mp3" loop="1" /〉
〈/head〉
〈body〉
〈/body〉
〈/html〉
其中src是做为背景音乐的音频文件路径,填写网络上的URL地址即可,loop设置的是循环次数,设置为1代表重复一次,如果改为0则是不重复,设置为−1就是无限重复。
2. 插件法
嵌入音乐可以让用户自己控制网页中的音频,但也有一定局限性,因为这种音频要求网页浏览器装有相应的插件。以插件法插入音频文件的具体操作如下:
(1)新建一个页面,将光标固定到要插入声音文件的位置。
(2)单击工具栏【插入】上【媒体】按钮边上的下拉箭头,选择最下面的【插件】(见图4-28),然后在选择对话框中选择要嵌入的音乐文件,最后单击“确定”按钮。
图4-28 插件使用
这样插入的音频是一个32×32像素的小图标,如果需要让它显示出开始、暂停按钮、声音控制和进度条,需要将它的尺寸改大一些,例如300×100像素就差不多了,将属性面板(见图4-29)中宽、高设置为300和100,保存后按F12键预览将会看到网页中调用相应插件播放选定的音频。
图4-29 插入音频属性设置
默认音频在打开网页时自动播放,如果不需要声音自动播放,单击已经嵌入的音频文件图标,在属性面板(见图4-30)中单击“参数”,单击参数下的框框,在autostart值处填写false即可。如需要自动播放,则可以设置autostart值为true。如果需要循环播放,加入参数loop=true。
图4-30 自动播放音频设置
(二)插入视频
1. 插件法
具体操作跟插入音频里的插入法完全一致。但通常只能支持Windows Media Player支持的格式,例如.wma、.wmv、.asf、.mpg、.avi等。
2. 利用Shockwave插入影片
Shockwave影片是网上交互多媒体的标准,是一种允许用Director软件创建的媒体文件,能够快速下载并能被大多数流行的浏览器播放。如果需要插入Shockwave影片,把光标放在网页中需要插入影片的位置,然后在常用工具栏中单击【多媒体】下拉箭头,选择【Shockwave】选项(见图4-31)。使用Shockwave可以播放Flash动画、.wmv和.rm格式的视频文件。
图4-31 插入Shockwave影片
3. 插入Flash Vidio视频
FLV流媒体是一种全新的视频格式,全称是Flash Video。它的出现有效解决了视频文件导入到Flash后,使导出的.swf文件体积庞大,不能在网络上很好使用等缺点,使我们可以享受到流媒体的好处,大大减少等待时间。如果需要插入Flash Video影片,把光标放在网页中需要插入影片的位置,然后在常用工具栏中单击【多媒体】下拉箭头,选择【Flash视频】选项,在打开的【插入Flash视频】对话框中选择.flv文件即可。
五、插入超级链接
网络中的所有资源都是通过超级链接联系在一起的。超级链接能使网页从一个页面跳转到另一个页面。成功地运用超级链接可以使网页变得更方便、更清晰和更富有灵性。
所谓超级链接,就是当鼠标移动到某些文字或者图片上时,单击就会跳转到其他的页面。这些文字或者图片称为热点,跳转到的目标称为链接目标,热点和链接目标相联系就是链接路径。链接路径分为绝对路径和相对路径。
绝对路径就是提供链接页面完整的URL地址以及所要用到的协议,比如从一个网站跳转到另一个网站。
相对路径就是在站点中创建的本地链路的路径,比如同一个网站中的不同网页之间的链接。
超级链接是一个网站的基本功能,也是与其他网站联系的桥梁。无论是何种形式的超级链接,其载体都是图像或者文本。
(一)超级链接载体
1. 设置文本超级链接
如果要为文本设置超级链接,应先在页面中输入文字,并选中此文字,然后执行菜单【插入记录】〉【超级链接】,系统将会弹出对话框,如图4-32所示。
图4-32 【超级链接】对话框
其中各参数含义如下。
◇ 文本:显示要设置超级链接的文本。
◇ 链接:显示超级链接的文件路径,单击后面的文件夹图标按钮,可以从打开的对话框中选择要链接的文件。
◇ 目标:单击其后面的向下箭头,在弹出的下拉列表中可以选择链接到的目标框架,有四个选项,各选项的含义如下:
■ _blank 将链接的文件加载到一个未命名的新浏览器窗口中。
■ _parent 将链接的文件加载到含有该链接的框架的父框架集或父窗口中。如果
包含链接的框架不是嵌套的,则链接文件加载到整个浏览器窗口中。
■ _self 将链接的文件加载到该链接所在的同一框架或窗口中。此目标是默认的,
所以通常不需要指定它。
■ _top 将链接的文件加载到整个浏览器窗口中,因而会删除所有框架。
◇ 访问键:在其中设置键盘等价键,以便在浏览器中选择该超级链接。
◇ Tab键索引:设置Tab键顺序的编号。
设置好各参数后,单击“确定”按钮就成功为文字添加了超级链接。可以看到文字颜色发生改变,并且下面也添加了一条下划线。
另外,通过在【插入】栏的【常用】类别中单击【超级链接】按钮,或在文字的【属性】面板中的【超级链接】项等方法也可以设置超级链接。
2. 设置图像超级链接
网页中的图像除了装饰效果外,也可以有添加超级链接的作用。
图片的链接方法简单,只要选中插入的图像后,在【属性】面板(见图4-33)中单击“链接”文本框右侧的“浏览文件”按钮,选择要链接的文件即可。为图像添加超级链接后,图像会自动添加蓝色边框。为了不影响拼图效果,必须把蓝色边框删除,方法是在【属性】面板中设置“边框”选项为0。
图4-33 “链接”及“边框”设置
(二)超级链接方式
虽然网页中的超级链接载体为文本和图像,但是链接文件不同,其链接方式也会有所不同。比如在同一个网页中实现链接,或者在一幅图像中实现局部链接,以及常见的邮件链接。
1. 锚点链接
创建锚点链接(简称锚点)就是在文档中设置标记,并在该位置设置一个名称以便引用。通过创建锚点,可以使链接指向当前文档或不同文档的指定位置。锚点常常被用来实现到特定的主题或者到文档顶部的跳转链接,使访问者能够快速浏览到指定的位置,加快信息检索速度。
创建锚点链接时,首先要设置一个命名锚点,该命名锚点就是链接目标,方法是将插入点放在需要命名锚记的地方,单击【常用】工具栏的【命名锚记】按钮,并设置【锚记名称】选项(见图4-34),即可在光标处看到锚点图标。设置好后,插入点处并没有显示锚记图标,可以选择菜单命令【查看】〉【可视化助理】〉【不可见元素】查看。
图4-34 添加及设置锚点标记
创建命名锚记后,就可以添加指向锚记的链接。在文档窗口中选中要为其添加锚记链接的文字或图片,在其【属性】面板中的【链接】文本框中输入符号“#”和锚记名称。例如图4-34设置的锚点名为“sdn”,所以在【链接】中应输入“#sdn”,如图4-35所示。如果需要链接到另一文档内的锚点,可在“#”号前添加文档名称,形如“xxxx.html#sdn”。
图4-35 创建锚点链接
2. 热点链接
普通的超级链接只能在一幅图像中添加一个链接。而要想在一幅图像中打开不同的网页,就需要在一幅图像中同时添加多个不同的超级链接,这时就会用到热点链接。热点链接的原理就是利用HTML语言在图片上定义出一些带有形状的区域,然后给这些区域加上链接,这些区域一般称为热区。
Dreamwaver提供了三种创建热区的工具,即“矩形热点”工具、“椭圆形热点”工具和“多边形热点”工具,根据编辑需要可以创建灵活多样的热区。
创建热点链接之前,首先要选定图像,在【属性】面板(见图4-36)中启动一种热点工具,例如【矩形热点】工具,然后在图像中选取需要的矩形区域,并设置“链接”属性。
图4-36 设置矩形热点
保存文档并在IE窗口中浏览,发现当鼠标指向矩形热区时单击能够打开链接,但鼠标指向图像其他未指定热点区域则无链接。
3. 特殊链接
在网络中还有两种较为特殊的超级链接,那就是电子邮件链接和下载链接。前者是一种联系方式,后者是将网络中文件下载到本地磁盘的方法。
(1)邮件链接
电子邮件已经是现代人最重要的联系方式之一,在网页中设置好邮件链接,当用户单击该邮件链接时,就会弹出邮件发送程序,并自动填写预定的联系人地址,用户只需填写标题及内容发送即可,给用户带来很多便利。
无论是文本还是图像,都可以作为电子邮件链接的载体,其创建方法也相同。也就是选中载体后,然后选择【插入】〉【超级链接】,系统会弹出【超级链接】对话框,如图4-37所示。在【链接】文本框中输入 E-mail地址,地址格式为“mailto:name@server.com”,其中name@server.com将作为邮件的收件人自动填写,因此应为实际存在的有效E-mail地址。
图4-37 设置邮件链接
完成设置后保存文档并在IE 中预览,单击邮件链接将自动打开【新邮件】对话框并设定好收件人(不允许修改),用户可以直接开始书写并发送邮件,如图4-38所示。
图4-38 单击邮件链接效果
(2)下载链接
下载链接在软件下载网站和源代码下载网站应用得比较多,一般文件下载多是压缩文件格式。下载链接的创建方式与一般超级链接的创建方式相同,只是所链接到的内容是一个软件文件或压缩文件,而不是一般的图像或网页。如图4-39所示的超级链接的链接目标为一个压缩文件。
图4-39 设置下载链接
保存后预览,单击之前添加的下载链接将会弹出【文件下载】对话框,如图4-40所示。
图4-40 单击下载链接效果
免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。