注意:

Adobe Muse 不再添加新增功能,并将于 2020 年 3 月 26 日停止支持。有关详细信息和帮助,请参阅 Adobe Muse 服务结束页面

在本文中,您将学习如何在 Adobe Muse 中使用超链接。借助超链接,可链接到外部网站、可下载文件、电子邮件地址等等。可下载文件可以是 PDF、DOC、PPT、TXT、富媒体或者您希望与您的网站访问者共享的其他类型文件,但目前不支持将它们插入到 Adobe Muse 界面。您可以链接到当前上载到您的 Adobe Muse 主机帐户的文件以及在第三方网站上托管的文件。

视频 | 如何创建超链接

视频 | 如何创建超链接
Adobe Press

为页面添加锚点链接

在本部分中,您将学习如何连接“菜单项”与“锚点区域”两个元素,从而为手动菜单添加锚点链接。请按照以下步骤操作:

  1. 单击页面上的任意位置选择该页面(以便“选择指示器”显示“页面”这一个词)。然后,单击构件菜单项(构件容器)两次。第一次单击选择整个手动“菜单”构件,第二次单击将选择菜单项。此时,“选择指示器”显示“菜单项”这一个词。
  2. 单击“超链接”菜单可查看网站页面和锚点标签的完整列表。在“桌面”部分中,定位右页面,请注意,您创建的锚点标签直接列在该页面下方。选择适合的锚点标签,将其链接到菜单项。
链接到锚点
使用“链接”菜单将“早餐”锚点链接到“早餐”按钮。

  1. 重复步骤 2 添加更多的锚点链接。
  2. 选择“文件”>“网站属性”。在“布局”选项卡中,请验证“对锚点链接启用活跃状态”复选框已选中。在默认情况下,所有新网站都会启用此选项,但如果是编辑较旧的网站,可能需要勾选该复选框。
  3. 选择“文件”>“在浏览器中预览页面”

当您单击链接来查看不同的页面区域时,请注意此时会显示导航菜单中匹配的活跃状态。此网站功能有助于定位访问者,让他们知道正在查看哪一部分。退出浏览器并返回到 Adobe Muse。

同时尝试上下滚动页面,查看页面代码如何检测到每个锚点标签的位置并在移动到各个页面区域时更新手动菜单的活跃状态。此技术适用于可垂直和水平滚动的页面。

注意:页面必须足够高或足够宽,留出空间让锚点标签跳到每个区域。如果页面区域彼此之间太靠近,导致内容无需滚动便能在浏览器窗口完整显示,则锚点标签就不会跳到下一区域。

  1. 退出浏览器并返回到 Adobe Muse。

在接下来的部分中,您将了解如何添加下载链接,从而使访问者能够下载 PDF、DOC、MP3、MOV、PSD 文件以及高分辨率的 JPEG 等文件。

提示:如果您和其他设计人员一起设计某个网站项目,您甚至可以链接至 .Muse 源文件,使团队成员可以直接从您的网站下载它们。

使用锚点标签区域和活跃状态

在网页上创建“锚点区域”是一种以可视方式分隔出不同页面部分的简便方法。各个部分都可以通过“锚点链接”轻松访问,旨在促进页面上的轻松导航。

在一个网页设计成品中,理想情况下应包含使访问者能够垂直跳到显示相应菜单的区域的锚点链接。假设您在添加锚点标签,它就像为页面的某个位置贴上一个标记。当访问者单击该锚点的链接时,该链接将会滚动较长的页面,跳转到标记所在的的特定部分。

  1. 单击顶部导航区中的“锚点”按钮加载“锚点”工具。
单击“锚点”按钮
通过单击工作区顶部的“锚点”按钮,为第一个锚点加载“置入喷枪”。

  1. 单击页面最顶部一次,即页眉区域顶级网站导航的上方。如果需要,可以暂时移开页眉矩形框。如果您移动页眉内容,请之后务必将其移回原位置。
  2. 在显示的“重命名锚点”对话框中,输入锚点名称。
输入锚点名称
为位于页面顶部的早餐菜单的锚点命名。

  1. 重复步骤 1 到 3 定义“锚点区域”和更多的“锚点链接”。

注意:

第一个锚点(位于页面顶部)与链接内容(将在下节中添加的手动菜单构件)的第一个实例之间的间隔空间(以像素为单位),用于设置“活跃区域”,改变各个区域的活跃状态。例如,如果第一个锚点置于页面最顶部,并且菜单构件位于该锚点下方 120 像素处,那么访问者向下滚动页面时,在菜单出现之前后续区域菜单项的活跃状态也会更新为 120 像素。

在下一步中添加一个手动菜单构件时,您会将按钮链接到锚点标签以创建导航,从而使访问者向下跳转页面读取每个菜单。

添加可下载文件的链接

  1. 当您在“设计”视图中编辑页面时,请使用“文字工具”在“早餐”菜单文本框右上角附近创建一个新文本框。键入“下载菜单”这一词语。
  2. 在文本框仍处于选定状态时,使用“文本面板”应用以下设置:
    • 网页字体:Kaushan 脚本(或您喜欢的任何脚本字体)
    • 字体大小:14
    • 颜色:#EEE5C4(在第 3 部分中,您可以重命名此色板染膏菜单)
    • 行距:57%
    • 对齐方式:居中
  3. 使用“填充”菜单将填充颜色设置为“无”。单击“图像”部分旁边的文件夹,然后浏览并选择 sample files 文件夹中名为 download-bg.png 的文件,以设置背景图像。确保将“调整”菜单设置为“原始大小”和“位置居中”)。
  1. 在远离“填充”菜单的位置单击将其关闭。如果需要,可使用“选择”工具调整文本框大小,更改其位置,使其位于“早餐”菜单文本框的右上角。
  1. 在文本框仍处于选定状态时,使用“控制”面板中的“链接”菜单选择“链接到文件”选项。在显示的“导入”对话框中,浏览并选择文件,然后单击“打开”将它选定

注意:当使用“链接到文件”功能浏览并选择一个文件时,该文件就成为网站发布时上载的网站资源之一或网站导出时网站文件所包含的网站资源之一。最好的做法是,将您想要从网站链接到的任意文件连同您网站所使用的任何其他图像复制到网站的本地文件夹。

现在已添加了 PDF 文件的链接。如果查看“资源”面板,您会发现该文件现在已被列为网站资源之一。

  1. 用“选择”工具选择文本框架。复制“下载菜单”文本框并将其粘贴到“午餐”菜单右上角的上方。重复此步骤两次以上,在“晚餐”和“甜点”菜单的右上角上方创建副本。

在实际项目中,可能会链接到四个不同的菜单文件,为访问者提供四个可下载的 PDF 文件,供访问者查看和打印这些菜单。但在本教程中,“下载”按钮会链接到每个页面区域的同一个 PDF 文件。

  1. 选择“文件”>“在浏览器中预览页面”。单击“水平”菜单中的一个菜单项,跳至页面上的该菜单。请注意,当您向下滚动查看“晚餐”和“甜点”菜单时,页眉会显示在其他页面内容之上。之所以会出现这种情况,是因为食品页面使用“前景”主页,并且此主页的页眉内容已被移动到前景。
  2. 单击“下载菜单”链接并查看如何将 PDF 文件下载到您的计算机上。

根据您使用的浏览器与浏览器的首选项,您将会看到不同的行为。有些浏览器将在浏览器窗口中显示 PDF,而有些浏览器则只将 PDF 文件下载到桌面上,您可以使用 Acrobat Pro 或 Acrobat Reader 打开文件。

创建电子邮件地址的链接

如果您使用过 Adobe Muse,您可能会注意到“链接”菜单最近已被重新组织到页面部分,使得更加容易查找您可以链接的页面名称和项目。在本部分中,您将进一步了解如何组织“链接”菜单和如何筛选菜单列表中的项目。您还将了解如何添加电子邮件地址链接。

  1. 单击“链接”菜单上的向下箭头查看显示的完整列表。
链接到电子邮件地址
展开的视图将显示“链接”菜单中的列表。

  1. “链接”菜单可构造为不同的部分。“最近使用的链接”显示添加到此网站的外部网站链接。您可以在“链接”字段直接输入任何 URL 以链接至外部网页。
  2. “桌面”部分包含当前网站中的页面。请注意,添加至食品页面的锚点标签按字母顺序在食品页面列出。这意味着您可以在一个网站的多个页面上创建同名的锚点,当您设置链接时可轻松地识别它们。在该网站示例中,只有一个“桌面”布局,但如果网站包含“手机”或“平板电脑”的替代布局,则这些部分会显示一组对应的页面。
  3. 末尾的“文件”部分包含“链接到文件”功能以及所有需要添加到当前网站的可下载文件。由于您最近添加了 KatiesCafeMenu.pdf 文件的链接,因此本部分列出了该文件名称,使得容易从网站多个页面重新链接到一个共同资源。
  4. 如果您要添加电子邮件链接(当访问者点击它时会导致访问者电子邮件客户端打开一封新邮件,并且该邮件消息的开头是“收件人”字段中的电子邮件地址),那么使用“链接”菜单字段中的 mailto: 前缀输入电子邮件地址,例如:

    mailto:email@address.com

  5. 有时,“链接”菜单中的项目列表可能变得相当长,在较大的网站很难导航。如果要查找将链接到的特定页面、锚点、文件或外部 URL,请在“链接”菜单字段中键入链接的前几个字母,那么就会显示匹配的项目。这样,您可以快速过滤列表,找到要链接到的项目。

添加外部网站的链接

现在已经放置好社交媒体图标按钮,您将需要添加每个社交网站的外部链接。

  1. 选择 Facebook 图标,然后到“链接”菜单字段中键入(或复制/粘贴)Katie's Cafe Facebook 页面的链接,例如:http://www.facebook.com/KatiesCafeSF
  2. 选择 Google+ 图标,然后键入(或复制/粘贴)Google+ 上 Katie's Cafe 页面的链接:https://plus.google.com/u/1/117800212967830061444/posts
  3. 选择 Twitter 图标,然后键入(或复制/粘贴)Twitter 上 Katie's Cafe 页面的链接:http://twitter.com/katiescafesf
  4. 再次单击 Facebook 图标将其选定。单击带下划线的蓝色文字:位于“链接”菜单左侧的链接。在显示的对话框中,勾选标记有以下文字的复选框:在新窗口或标签页中打开链接。
  5. 重复步骤 4,设置 Google+ 和 Twitter 链接同样在新浏览器窗口打开。

这是一个常见的网页设计约定 — 转至同一网站其他页面的链接会在同一个浏览器窗口中打开(这是 Adobe Muse 的默认情况),而转至其他外部网站页面的链接会在新窗口或标签页中打开。

标识文件的 URL,为添加链接做准备

在为 Adobe Muse 网站中的页面添加链接之前要先准备好链接,您将使用一个浏览器访问实时上载的文件。请按照以下步骤操作。

  1. 启动您选择的浏览器。
  2. 浏览到包含所上载的依赖文件的您的网站或第三方网站。您可以使用一个搜索引擎,例如 Google,或者直接在浏览器的“地址栏”中键入网站域名。
浏览器地址栏
您可以直接在浏览器的地址栏中键入网站域名。

  1. 在访问所需网站主页后,单击网站导航或在浏览器的地址栏中键入完整的 URL 以访问特定的依赖文件。在完成此步骤后,您的浏览器会显示、播放或下载您所访问的文件。
  2. 一旦您确认输入了访问所上载文件的正确 URL 后,请选择浏览器“地址栏”中的全部内容,然后选择“编辑”>“复制”。或者,您也可以使用键盘快捷键 Command+C (Mac) 或 Ctrl+ C (Windows)。
复制浏览器地址栏中的地址
复制浏览器地址栏中的 URL

此时,依赖文件的 URL 已被复制到剪贴板。请注意,在您将依赖文件的 URL 粘贴到“超链接”字段之前,不要复制任何其他项目,如下文所述。

创建外部文件的链接

在成功上载一个依赖文件后,通过浏览器访问该文件,复制文件的 URL,最后的剩余步骤就是在 Adobe Muse 网站的页面中创建链接。请按照以下步骤操作:

  1. 启动 Adobe Muse。双击页面缩略图以在“设计”视图中打开页面。
  2. 选择一些文本、置入的图像或矩形形状作为您想要的“按钮”,访问者单击这些按钮就能下载或访问依赖文件。
  3. 在选定文本或页面元素时,单击“超链接”字段下拉列表并将 URL(绝对路径)粘贴到之前复制的依赖文件。

如果想要设置链接在新浏览器窗口中打开,请单击“超链接”窗口正左侧的“超链接”标签。在显示的对话框中,启用选项“在新窗口或标签页中打开链接”旁边的复选框,如下所示。

超链接选项
选择“在新窗口或标签页中打开链接”

保存页面并将更改发布到网站。

在浏览器中访问页面。单击链接文本或按钮验证链接是否按预期方式工作。

注意:

您可以尝试用几种不同的浏览器访问您的网站,例如 Chrome、Safari 和 Firefox,查看当您在活动网站单击链接访问依赖文件时各浏览器是否显示正确。

要了解使用 Adobe Muse 的更多技巧,请务必访问 Adobe Muse 帮助和教程页面,或者访问 Adobe Muse 活动页面参加在线实时研讨会和观看录制的研讨会。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略