In this article, you will learn how to work with hyperlinks in Adobe Muse. Using hyperlinks you can link to external websites, downloadable files, email addresses, and more. The downloadable files could be PDF, DOC, PPT, TXT, rich media, or other types of files that you would like to share with your site visitors, but are not currently supported for insertion in the Adobe Muse interface. You can link to files that are currently uploaded to your Adobe Muse host account, as well as files that are hosted on third-party websites.
In this section, you will learn how to connect Menu items with Anchor Regions two elements, to add the anchor links to the manual menu. Follow these steps:
As you click the links to see the different page regions, notice that the matching active state in the navigation menu is displayed. This site feature helps orient visitors to help them understand which section they are viewing. Quit the browser and return to Adobe Muse.
Also try scrolling up and down the page and see how the code in the page detects the location of each anchor tag and updates the manual menu's active state as the page moves through each page region. This technique works for pages that scroll both vertically and horizontally.
Note: A page must be sufficiently tall or wide to allow space for the anchor tags to jump to each region. If the page regions are too close together so that the content all fits within a browser window without scrolling, the anchor tags don't appear to jump to the next region.
In the next section, you'll see how to add download links, so that you can enable visitors to download file formats such as PDF, DOC, MP3, MOV, PSD, and high resolution JPEG files.
Tip: If you are working with other designers on a site project, you can even link to .Muse source files, so that team members can download them directly from your website.
Creating Anchor Regions on a web page is an easy way to visually segregate different sections of a page. Each of these sections can be easily accessed via Anchor Links, that are designed to facilitate easy navigation on a page.
In a finished design, a web page should ideally include anchor links that enable visitors to jump vertically to the region that displays the corresponding menu. Imagine that when you add anchor tags, it is like you are affixing a marker somewhere on a page. When visitors click a link to that anchor, the link will scroll longer pages to jump to the specific section where the marker is located.
The amount of spacing (in pixels) between the first anchor (at the top of the page) and the first instance of the linked content (the manual Menu widget you'll add in the next section) sets the "active area" that causes the active state to change in each region. For example, if the first anchor is placed at the very top of the page and the menu widget is positioned 120 pixels below it, the active state of the menu items for the subsequent regions will also update 120 pixels before the menu appears as the visitor scrolls down the page.
After you add a manual Menu widget in the next step, you’ll link the buttons to the anchor tags to create navigation that lets visitors jump down the page to read each menu.
Note: When you browse to select a file using the Link to File feature, the file becomes one of the site assets that is uploaded when the site is published or included in the site files when the site is exported. It is a best practice to copy any files you want to link to from the site into the site's local folder, along with any other image files used in your site.
The link to the PDF file has now been added. If you look in the Assets panel, you will see that the file is now listed as one of the website's assets.
In a real-world project, you could link to four separate menu files, to provide visitors with four different downloadable PDF files that they can use to view and print the menus. But for the purposes of this tutorial, the Download button links to the same PDF file in each page region.
Depending on the browser you are using and the browser's preferences, you'll see different behaviors. Some browsers will display the PDF within the browser window while others will simply download the PDF file to your desktop, where you can open it using Acrobat Pro or Acrobat Reader.
If you've been using Adobe Muse for a while, you may notice that the Links menu has recently been reorganized into sections to make it easier to find the page names and items you can link. In this section, you'll take a closer look at how the Links menu is structured and how to filter the items in the menu list. You'll also see how to add email address links.
Now that the social media icon buttons are in position, you'll add the external links to each of the social network sites.
This is a common web design convention—links that go to other pages of the same site open in the same browser window (which happens by default in Adobe Muse) and links to pages in other, external websites open in a new window or tab.
To prepare the link prior to adding to a page in your Adobe Muse site, you'll use a browser to visit the live, uploaded file. Follow these steps.
At this point, the URL to the dependent file has been copied to the clipboard. Take care not to copy any other items, until after you paste the dependent file's URL into the Hyperlink field, as described in the next section.
After you've successfully uploaded a dependent file, accessed it via a browser, and copied the file's URL, the last remaining step involves creating the link in a page of your Adobe Muse site. Follow these steps:
If you'd like to set the link to open in a new browser window, click the Hyperlink label immediately to the left of the Hyperlink window. In the dialog box that appears, enable the checkbox next to the option Open the link in a new window or tab, as shown below.
Save the page and publish the changes to the site.
Visit the page in a browser. Click on the linked text or button to verify that the link works as expected.
You can try visiting your site in several different browsers, such as Chrome, Safari, and Firefox, to see if the various browsers behave acceptably when you click the link in the live site to access the dependent file.