Adobe Muse / Tutorials

In Part 6 of Building your first website with Muse, you learned how you to add Thumbnail Slideshow widgets to display a gallery within the content area of a Tabbed Panel widget. You also created and styled four menus for the food page. In Part 7, you'll examine how to add anchor links and a manual Horizontal Menu widget, to finalize the food page. You'll also take a look at the newly categorized Links menu and learn how to create all types of links (anchor links, email links, download links, and links to external web pages). And finally, you'll see how to pin objects in place on the page to prevent them from scrolling—even if the rest of the page elements scroll on longer pages.

 

Back to top >>

Working with anchor links

The food page uses anchor links to enable the visitor to jump vertically to the section 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.

You'll begin by creating four anchors: Breakfast, Lunch, Dinner and Dessert. Follow these steps:

1. Click the anchor button in the top navigation area to load the anchor tool (see Figure 74).

 

Figure 74. Load the place gun for the first anchor by clicking the anchor button in the top of the workspace.

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 it, be sure to move it back into place afterwards.

3. In the Rename an Anchor dialog box that appears, enter the anchor's name: breakfast (see Figure 75).

 

Figure 75. Name the anchor for the breakfast menu, which is located at the top of the page.

1. Repeat this step three more times, clicking the Anchor icon in the top of the workspace to load the place gun, and then clicking above each of the text frames that create the Lunch, Dinner, and Dessert sections. Name each anchor to match the page area:

 lunch

 dinner

 dessert

 

Now you’ve added a total of four anchors spread out vertically along the page to create links that will jump to each of these sections. After you add a menu in the next step, you’ll link to the anchor tags to create navigation that enables visitors to jump to each menu.

 

Back to top >>

Adding a manual Horizontal Menu widget to the page

In Parts 2 and 3 of this series, you learned how to add Horizontal Menu widgets to the site. By default, the menus automatically link to the pages you added in the Plan view, and the page names are added for you.

In this section, you'll experiment by adding another Horizontal Menu widget, to use as a submenu for a single page. You'll set the type of menu to manual, so that you can type the menu item labels and set up the links yourself. This is a very helpful strategy, especially when you want users to be able to navigate within a specific section or a specific page of the site. For this sample project, you'll link the manual menu items to the anchors you created in the previous section. Follow these steps to add a manual Horizontal Menu widget:

1. While editing the food page in Design view, open the Widgets Library.

2. In the Widgets Library panel, click the Menus section to expand it. Select the Horizontal Menu widget and drag it from the panel to the top of the page area in the food page.

When you first drag the widget to the page, it displays the default formatting and automatically displays the page names in the menu items. You'll use the settings in the Options panel to set the menu up so you can enter custom menu items for the food page.

3. While the Horizontal Menu widget is selected, click the blue arrow button to open the Options panel. Use the Menu Type menu to select: Manual. Leave all other default settings, as shown in Figure 76.

 

Figure 76. Update the Menu Type to Manual in the Options panel.

4. Click anywhere outside the Options menu to close it.

When you review the Horizontal Menu widget now, you'll see that a single generic menu item named [name] replaces the automatic menu items that were originally displayed. The next step involves manually adding the menu items.

5. Click three times on the Horizontal Menu widget to select the label. Use the Text tool to select the default label text and enter the new menu item name: Breakfast (see Figure 77).

 Figure 77. Update the name of the first menu item in the manual menu.

6. Switch back to using the Selection tool. Notice that three plus (+) sign icons appear on the left, bottom, and right sides of the menu item. Click the plus (+) sign to the right of the Breakfast menu item. This operation adds a new menu item to the right.

7. Select the label in the new menu item. Using the Text tool, select the Breakfast2 default label text and update it to: Lunch.

8. Repeat steps 6 and 7 to create a total of four menu items, labeled Breakfast, Lunch, Dinner, and Dessert.

In the next section, you'll update the appearance of the menu items.

 

Back to top >>

Styling the menu items in the Horizontal Menu widget

Since the Edit Together option is enabled in the Options panel, the changes you make to one menu item are automatically applied to the other menu items. Follow these steps to revise the appearance of the menu:

1.  Select the menu item for the Breakfast button. The Selection Indicator displays the word: Menu Item. Press Escape if you accidentally select the label inside the menu item.

2. Open the States panel by selecting its tab or choosing Window > States. Select the Normal state.

3. Use the Fill Color Chip to set the color of the Normal state of the menu item to the swatch you renamed cream-menu (or enter the hexadecimal color value: #E9916F).

4. In the Control panel, click the bottom left and bottom right corner radius buttons, and then enter the corner radius value to 100, to create buttons that are square on top with rounded corners. These buttons are similar to the ones you created previously in Part 5 when you styled the tabs of the Tabbed Panel widget.

5. In the States panel, select the Rollover state. Use the Fill Color Chip to set the color of the Rollover state of the menu item to the swatch you renamed cream-menu (or enter the hexadecimal color value: #E9916F). Notice that the Mouse Down state updates automatically.

In this example, the Normal, Rollover, and Mouse Down states all display the same appearance. This design uses a different color for the Active state, to alert visitors which page they are currently viewing. You'll apply the new color to the Active state next:va

6. In the States panel, select the Active state. Click the Fill color chip in the Control panel and select the color that you renamed brown-menu in Part 3, or enter the color value: #571E00.

Now that you've updated the appearance of the menu items for each state, you'll update the labels.

7. Click the Breakfast item three times to select the label. While the Normal state is selected in the States panel, click the head-tabs style in the Paragraph styles panel to apply it. This is the same style you used to style the Tabbed Panel widget in Part 5.

When you apply the formatting to the label to the Normal state, the other states update to match automatically. This design uses the same labels for all states, so the styling for the manual Horizontal Menu widget is now complete. The only remaining tasks are to position it on the page and pin it in place.

8. Use the Selection tool to reposition the Menu widget, so that its top edge fits snugly against the bottom of the header rectangle. Make sure there isn't any space between the header and the Manual menu widget.

9. While the entire Menu widget is selected, click the top center pin position in the Pin interface in the Control panel. This will ensure that the manual menu doesn't move from its location directly below the header when the page scrolls.

In the next part, you'll use the Links Menu to add the links to the anchors you created earlier.

 

Back to top >>

Linking to anchors in a page

At this point, you've added the anchor tags to the top of each menu and you've created the manual Horizontal menu with menu items that correspond to each of the menus. In this section, you'll see how to connect those two elements, to add the links to the menu. Follow these steps:

1. Click anywhere on the page to select it. Then, click the Breakfast button twice. The first time selects the entire Menu widget and the second time selects the menu item.

2. Click the Links menu to see the full list of pages and anchor tags for the site. In the Desktop section, locate the food page and notice that the four anchor tags you created are listed below it. Select the Breakfast anchor tag to link it to the Breakfast menu item (see Figure 78).

 

Figure 78. Use the Links menu to apply the Breakfast anchor link to the Breakfast button.

3. Repeat step 2 to add the Lunch anchor link to the Lunch menu item. And then repeat twice more to assign the corresponding links to the Dinner and Desert menu items.

4. Choose File > Preview Page in Browser. Test the navigation on the food page by clicking each of the menu items. When you click to view the lowest menus (Dinner and Dessert) the long page scrolls to display the area with the corresponding anchor tag.

5. Quit the browser and return to 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.

 

Back to top >>

Adding links to downloadable files

In this sample project, the fictitious Katie's Cafe offers their menu online in PDF format, so that visitors can save a copy to their desktop or even print it out. Many businesses and restaurants follow a similar strategy because it is easy for them to upload a new PDF file with the same file name when they want to update their menu, price list, or other documents—without having to update the link.

1. While editing the food page in Design view, use the Text 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 (see Figure 79).

Figure 79. Set the background image for the text frame in the Fill menu.

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 (see Figure 80).

Figure 80. Position the Download Menu text frame to cover the corner of the menu.

5. While the text frame is still selected, use the Links menu in the Control panel to choose the item in the Files section at the very bottom of the menu, Link to File. In the Import dialog box that appears, browse to select the file named KatiesCafeMenu.pdf in the sample files folder. Click Open to select it (see Figure 81).

Figure 81. Browse to select the PDF version of the 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'll see that the KatiesCafeMenu.pdf file is now listed as one of the site'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, you'll just link to the same PDF file.

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.

 

Back to top >>

Using the Links menu to create email links

If you've been using 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 (see Figure 82).

 

Figure 82. The expanded view displays the list in the Links menu.

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.

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.

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.

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

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.

In the next section, you'll learn how to add absolute links to other web pages outside your site.

 

Back to top >>

Placing Photoshop buttons

At this point in the tutorial, you've learned how to add and link to anchor tags to jump to a specific section of a page. You've also seen how to add links to pages and downloadable files using the Files menu. In this section, you'll review how to add links to external site URLs, to link to a web page outside the site you are making. You'll also explore placing PSD files that contain layers to discover another way to create buttons with different states in Muse. Follow these steps:

1. In Plan view, double-click the A-Master master page to edit it in Design view.

2. Choose File > Place Photoshop Button. Using the Import dialog box, navigate to the sample files folder and locate the three PSD files that contain social media icons. They are named:

social-facebook.psd

social-google+.psd

social-twitter.psd

3. Select the social-facebook.psd file and click Open. The Photoshop Import Options dialog box appears (see Figure 83).

Figure 83. The dialog box lets you choose which PSD layer to display for each of the states of the button.

For this example, the PSD file layers are already set up in the correct order to display the Normal, Rollover, and Mouse Down states as desired. But notice that if you wanted to change the appearance of each state, you could use the menu next to each state to set which layer of the PSD file will display. A preview window to the right of each state helps you choose the right appearance.

In this example, the button does not need an Active state. This Facebook button will let the visitor jump to the Facebook site, so an Active state is not needed. Using Photoshop buttons with pre-designed layers is another way you can build a custom navigation bar for your site.

4. Click OK to close the Photoshop Import Options dialog box and then click once near the center of the page on the right side, to place the Photoshop button.

5. Repeat steps 2-4 to place the remaining two icon images, named social-google+.psd and social-twitter.psd. Use the Selection tool to align them vertically on the right side of the page (see Figure 84).

 

Figure 84. Position the Facebook, Google+, and Twitter icons on the A-Master page.

Since you are placing these images on the A-Master page, they will automatically be displayed on all of the master pages that are linked to this master (Main and Foreground).

 

Back to top >>

Adding links to external websites

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 (see Figure 85).

 

Figure 85. Enable the checkbox to open the link in a new window or tab.

5. Repeat step 9 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 Muse) and links to pages in other, external websites open in a new window or tab.

Also notice the Tooltip field. If you enter descriptive text in this field it will display when the visitor hovers over the linked element. In this example, the tooltip says: Follow Katie on Facebook. It is a good idea to add these tooltips because they also help make your site more accessible for visitors using screen readers.

In the next section, you'll see how to pin the social media icons, so they display at the same location within the browser window even if the page is longer and the rest of the content scrolls.

 

Back to top >>

Pinning objects to the browser window

When you place an image or use other methods to add artwork to a page, you use the Selection tool and arrow keys to reposition it. As you move the image around, it moves in relation to the other elements (images, text, and media) that also exist on the page. You have the ability to move the other elements too, but the entire page behaves like a brochure or a poster. The items on the page exist on a single plane. If a page is long (contains a lot of vertical content) and the visitor scrolls down—they no longer see the images at the top of the page.

It’s likely that you’ve seen pinned objects when viewing websites; they are the “persistent” items that always display in one location. They appear to float above the rest of the page content.

When you use the Pin tool, you are essentially removing an image from the flow of the page. Rather than laying it out in relation to the other page elements, you set it to a specific location in relation to the browser. Pinned images appear to be “sticky” – always staying in one spot (such as the top right corner or hovering near the bottom) regardless of other scrolling page elements. If the visitor resizes their browser, pinned images always stay at their pinned location in relation to the browser window.

You can think of pinning as a way to “break the image out” of a page’s design, and affix it to the browser instead, like pinning a note to a corkboard. The pinned element will move to maintain its pinned position in relation to the browser if the visitor resizes the browser window, but the pinned element will not move if the visitor scrolls the page content horizontally or vertically.

Follow these steps to use the Pin tool:

1. While the A-Master page is open in Design view, select the Facebook icon with the Selection tool.

2. Click the top right pin position in the Pin interface in the Control panel. This setting "pins" the element by the current location of its top right corner (see Figure 86).

 

Figure 86.  Pin the selected element by clicking one of the six pin position options.

3. Repeat steps 1 and 2 to pin the Google+ and Twitter icon buttons to their top right positions, so that they don't move within the browser window when the rest of the page scrolls.

4. Click Plan to see the page thumbnails. Notice that all of the pages now include the three social media icons, because you added them to the master page.

5. In Plan view, double-click the food page to open in it Design view. Or if it is already open, click the food page tab to make it active. Choose File > Preview Page in Browser to view the page in a browser.

6. Click on the Dessert menu item to jump down the long page to the Dessert menu section. Notice that while the rest of the page elements scroll, the three social media icons remain in position along the right side of the page because they are pinned (see Figure 87).

Figure 87. The pinned icons persist on the page while the rest of the page content scrolls.

Continue on to Building your first website in Muse Part 8, where you'll see how to group sets of objects so that they behave as one element. You'll also complete the Visit page by adding an embedded Google map that displays the locations of Katie's Cafe to visitors. And after finalizing the site, you'll see how easy it is to upload the to a hosting server (powered by Business Catalyst) to publish it online, so that you can share the work-in-progress with your clients and colleagues.

Back to top >>

 

 

 

 

 

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.