How to create hyperlinks for Adobe Muse websites

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:

1. Click anywhere on the page to select the page (so that the Selection Indicator displays the word: Page). Then, click the widget menu item (widget container) twice. The first time selects the entire manual Menu widget and the second time selects the menu item. The Selection Indicator displays the words: Menu Item.
2. Click the Hyperlinks menu to see the full list of pages and anchor tags for the site. In the Desktop section, locate the right page and notice that the anchor tags you created are listed directly below it. Select the suitable anchor tag to link it to the menu item.

3. Repeat step 2 to add more anchor links.
4. Choose File > Site Properties. In the Layout tab, verify that the checkbox to Enable Active State for Anchor Links is selected. This option is enabled by default for all new sites, but if you are editing an older site, you may need to check the checkbox.
5. Choose File > Preview Page in Browser.

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.

6. Quit the browser and return to Adobe Muse.

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.

1. Click the Anchor button in the top navigation area to load the Anchor tool.

2. Click once at the very top of the page, above the top-level site navigation in the Header area. You can move the header rectangle out of the way temporarily, if desired. If you move the header content, be sure to move it back into place afterwards.
3. In the Rename an Anchor dialog box that appears, enter the anchor's name.

4. Repeat steps 1 to 3 to define Anchor Regions and add more Anchor Links.

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.

1. While editing a page in Design view, use the Type tool to create a new text frame, near the top right corner of the Breakfast menu text frame. Type the words: Download Menu.
2. While the text frame is still selected, use the Text panel to apply the following settings:
   • Web font: Kaushan Script (or any script font you prefer)
   • Font size: 14
   • Color: #EEE5C4 (In part 3, you renamed this swatch color cream-menu)
   • Leading: 57%
   • Alignment: Centered
3. Use the Fill menu to set the fill color to None. Click the folder next to the Image section and browse to select the file in the sample files folder named download-bg.png to set the background image. Make sure the Fitting menu is set to Original Size and the Position is centered.

4. Click away from the Fill menu to close it. If needed, use the Selection tool to resize the text frame and reposition it so it is centered in the top right corner of the Breakfast menu text frame.

5. While the text frame is still selected, use the Links menu in the Control panel to select the Link to File option. In the Import dialog box that appears, browse to select the file and click Open to select it

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.

6. Select the text frame with the Selection tool. Copy the Download Menu text frame and paste it, positioning it over the top right corner of the Lunch menu. Repeat this step two more times, to create copies that are positioned over the top right corners of the Dinner and Dessert menus.

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.

7. Choose File > Preview Page in Browser. Click one of the menu items in the Horizontal menu, to jump to that menu on the page. Notice that as you scroll down to see the Dinner and Dessert menus, the header displays on top of the other page content. This behavior occurs because the food page uses the Foreground master page, and the header content of that page has been moved to the foreground.
8. Click the Download Menu link and see how the PDF file downloads to your machine.

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.

1. Click the downward arrow on the Links menu to see the full list displayed.

2. The Links menu is structured into sections. The Recently Used Links displays any links to external websites that have been added to the site. You can enter any URL directly into the Links field, to link to external web pages.
3. The Desktop section contains the pages in the current site. Notice that the anchor tags you added to the food page are listed alphabetically below the food page. This means that you could create anchors of the same name on multiple pages of a site, and still be able to identify them easily as you set up links. In this sample site, there is only a Desktop layout, but if the site contains alternate layouts for Phone or Tablet, these sections are displayed with the corresponding set of pages.
4. The Files section at the end includes the Link to File feature and any downloadable files that are added to the current site. Since you recently added a link to the KatiesCafeMenu.pdf file, the name of the file is listed in this section, making it easy to relink to a common asset from multiple pages in the site.
5. If you want to add an email link (which, when clicked, causes the visitor's email client to open and a new message to be started with the email address in the To field), then enter the email address with the mailto: prefix in the Link menu field, like this:
   
   mailto:email@address.com
   
   
6. Sometimes the list of items in the Links menu can become quite long and difficult to navigate on larger websites. If you are looking for a specific page, anchor, file, or external URL to link to, type the first few letters of the link in the Links menu field and the matching items are displayed. This enables you to quickly filter through the list and find the items you want to link.

Now that the social media icon buttons are in position, you'll add the external links to each of the social network sites.

1. Select the Facebook icon and then type (or copy/paste) the link to the Katie's Cafe Facebook page in the Link menu field, like this: http://www.facebook.com/KatiesCafeSF
2. Select the Google+ icon and then type (or copy/paste) the following link to the Katie's Cafe page on Google+: https://plus.google.com/u/1/117800212967830061444/posts
3. Select the Twitter icon and then type (or copy/paste) the following link to the Katie's Cafe page on Twitter: http://twitter.com/katiescafesf
4. Click the Facebook icon again to select it. Click the blue underlined word: Links that is located to the left of the Links menu. In the dialog box that appears, check the checkbox labeled: Open the link in a new window or tab.
5. Repeat steps 4 to set the Google+ and Twitter links to also open in a new browser window.

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.

1. Launch a browser of your choice.
2. Browse to your site or a third-party site that contains the uploaded dependent file. You can use a search engine, such as Google, or you can type the site's domain name directly in the Address Bar of the browser.

3. After accessing the home page of the desired site, click through the site's navigation or type the complete URL in the browser's address bar to access the specific dependent file. After completing this step, your browser will display, play, or download the file you are accessing.
4. Once you are sure you've entered the correct URL to access the uploaded file, select the entire contents of the browser's Address Bar and choose Edit > Copy. Alternatively, you can use the keyboard shortcuts Command+C (Mac) or Control+C (Windows).

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:

1. Launch Adobe Muse. Double-click on the page thumbnail to open the page in Design view.
2. Select some text, a placed image, or a rectangle shape that you want to be the "button" that visitors will click to download or access the dependent file.
3. While the text or page element is selected, click the Hyperlink field drop-down and paste the URL (absolute path) to the dependent file that you copied previously.

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.

To learn more tips for working with Adobe Muse, be sure to visit the Adobe Muse Help and Tutorials page, or the Adobe Muse Events page for live and recorded webinars.