Working with hierarchal master pages

Muse allows you to create master pages that are applied to other master pages. Hierarchal master pages work similarly to how master pages can be applied to a page in the Plan view. In previous versions of Muse, you could create multiple master pages, but you could only apply one master page with one set of page elements at a time to a web page.

In the past, if you wanted to make a site with two different sections that are similar but each have a unique appearance, you could duplicate a master page, change it slightly, and apply it to specific pages. As a result, both master pages often contained some of the same elements—so whenever you updated the site, it was necessary to edit the content in both master pages to keep all the elements in sync.

Using Muse 4.0 and above, you can now create an A-Master page that contains the shared elements that are displayed in multiple master pages (such as adding the background and footer as described in the previous sections), and then create additional master pages that inherit all elements in the A-Master page, plus contain any elements unique to the first section. If you created a third master page, that one could use the elements in the A-Master page, plus any elements unique to the second section.   

The benefit to using hierarchal master pages is that they allow you to limit the occurrence of an element to one instance. When redesigning a site, you only have to edit each element once, and all instances of it are updated on the site automatically.

You manage and apply master pages in Plan view. Just like how you can click and drag a master page thumbnail to a page thumbnail to apply the master page to a page, you can create multiple master pages and then click and drag a master page onto another master page. Or if you prefer, right-click on any master or page thumbnail in Plan view and use the Masters option in the context menu that appears to set the master.

Note that when you hover over a page or master page name, a tooltip displays the hierarchy of the applied masters for that page or master page.

At the moment, you've created the A-Master page with the browser fill tiling background and the footer content. In the next section, you'll create a new master page that inherits the contents of the A-Master page, and then add the header, so you can apply it to the site pages. Follow these steps:

  1. While viewing the site map in Plan view, hover your cursor over the A-Master page thumbnail to see the Plus sign buttons appear on both sides. Click the Plus sign to the right of the A-Master page to create a brand new master page. By default, the new master page is named B-Master.
  2. Double-click the B-Master text field below the thumbnail to edit it. Type in a more descriptive name for the new master page you just created: Main.
  3. Right-click on the Main master page thumbnail and choose Masters > A-Master from the context menu that appears.
In this tutorial, you'll familiarize yourself with the Adobe Muse workspace and see how to build a full featured website without writing any code. You will also understand how to build a site map, work your way through master pages, and also understand the browser fill options within Muse.
Choose the A-Master in the menu to apply it to the Main master page.

Notice that after applying the A-Master page to the Main master page, the Main master page thumbnail updates to display the same appearance. The blue label below the Main master page thumbnail says [A-Master] because you applied it to the Main master page in step 3.

It's an important distinction that the Main master page does not actually contain the A-Master elements--you did not simply duplicate A-Master. Instead, you set the Main master page up to link to A-Master, which means any new content you add to A-Master will automatically also appear on the Main master page.

As mentioned previously, the nice thing about hierarchical masters is that the footer, menu, and background still only exist on the A-Master page. So later, if a client requests that you use a different tiling background, you could update the A-Master page and the Main master page will update automatically.

Later in this tutorial, you'll create two different masters for different appearances on the two different site sections. However, for now you can update the pages in Plan view to all use the new Main master page, rather than using the A-Master page.

  1. Click and drag the Main master page to the food page thumbnail in the top left corner. Notice that as you drag and drop the Main master page thumbnail onto the food page thumbnail, the blue text below the food page thumbnail updates from [A-Master] to [Main].

This is the most common way to apply master pages to pages in Plan view, but you can also try applying them using the context menu:

  1. Right-click on the events page thumbnail and choose Masters > Main in the context menu that appears.
In this tutorial, you'll familiarize yourself with the Adobe Muse workspace and see how to build a full featured website without writing any code. You will also understand how to build a site map, work your way through master pages, and also understand the browser fill options within Muse.
Use the context menu to set Main as the master page for the events page.

  1. Using your favorite method (described in steps 4 and 5) set Main as the master page for the remaining three pages: home, about, and visit.

After making this change, all of the blue text labels below each page thumbnail should now say [Main]. If you hover your cursor over any of the blue labels, a tooltip appears to display the hierarchy of the applied master pages.

In this tutorial, you'll familiarize yourself with the Adobe Muse workspace and see how to build a full featured website without writing any code. You will also understand how to build a site map, work your way through master pages, and also understand the browser fill options within Muse.
A helpful tooltip describing the hierarchy appears when you roll over the label.

In this example, the hierarchy is only going one level deep. In other words, the Main master page is inheriting the A-Master page contents. But be aware that you can create a chain of master pages if desired. For example, you could create a master page named Header, which only has the header content, and then create another master page called Footer, which inherits the Header master page content, and then another master page called Main, which inherits everything on the Footer master page (that also includes the header). Depending on a site's design and your knowledge that some elements may be likely to change, you can construct the levels of inheritance to set it up several levels deep. Compartmentalizing the design in this way is sort of like creating symbols, because you can isolate specific parts of a design and then easily find and edit that part later as needed.

Continue on to the next tutorial, Using Muse to build your first website, Part 2, where you'll learn how to work with widgets (pre-built site interactive site features you can drag onto pages). Widgets enable you to quickly add advanced functionality to pages without writing any code. You'll see how to edit the behavior and appearance of widgets, to customize how they are displayed within the site design.

Add header content to the Main master page

Now that you've finalized the footer by adding a Menu widget to the Main master page, you'll add the top-level navigation. Follow these steps to add content in the header area.

  1. In Plan view, double-click the Main master page thumbnail to open the page and begin editing it in Design view (if it is not already open).
  2. Use the rectangle tool to draw a rectangle that begins in the top left corner of the visible browser area and spans the entire width, to the top right corner. Use the Selection tool to drag the handles on the top, left, and right sides of the rectangle until you see the red border briefly appear, indicating that the rectangle is set to 100% width, the same way you created the footer.
Draw a rectangle that spans the entire top portion of the browser window.

 

After dragging the handles, the size of the rectangle should be approximately 1160 pixels wide by 253 pixels high. The horizontal X value is -100, which means the top left corner of the rectangle is located 100 pixels to the top left corner of the page. The Y value is 0 (which means that the top left corner of the rectangle matches the top left corner of the page vertically). If you want to set these values exactly, you can review the fields in the Transformation panel or in the Control panel, while the rectangle is selected.

  1. Set the stroke width to 0 and use the Fill menu to set the fill color to None. Click the folder to the right of the Image section and browse to select the image named tile-header.png. Set the Fitting menu to Tile Horizontally.
Use the Fitting menu to tile the background image horizontally.

 

Although the header is comprised of a single rectangle, the horizontally tiled background image that fills it creates the impression that a gray rectangle exists above a black rectangle.

  1. Choose File > Place, or use the keyboard shortcut: Command+D (Mac) or Control+D (Windows) to open the Import dialog box.
  2. Browse to select the file named bg-ribbon.png file located in the sample files folder. Click Open to choose it and close the Import dialog box.
  3. Click once in the center of the header rectangle, near the top of the page. This places a single instance of the bg-ribbon.png file at its original dimensions.
  4. Use the Selection tool to align the orange ribbon graphic so that it is centered vertically near the top of the header and spans the width of the page.
Orange ribbon graphic positioned so that it is centered in the header.

 

The orange ribbon graphic will form the background of the top-level menu that you'll add in the next section.

Duplicate a master page

The header content in the Main master page is complete. While you could simply use the Main master page for every page in the site, this site design has two sections. The Main master page design will ultimately be used for the home and visit pages. A second, slightly different master page will be used for the food, events, and about pages.

Follow these steps to duplicate the Main master page:

  1. In Plan view, right-click on the Main master page thumbnail.
  2. In the context menu that appears, choose Duplicate page.
Use the menu to duplicate the existing Main master page.

 

A new master page appears to the right of the Main master page, with the default name: Main copy. Since you duplicate the Main master page, the new master is also already based on the A-Master page.

  1. Double click the name field below the master page you just created and rename it: Foreground.

In the next section, you'll learn how to set the arrangement of elements in a master page, so that instead of items always displaying below, they can display above page elements. At this point, it is a good time to save your work.

  1. Choose File > Save Site.

One of the benefits of creating a duplicate master page is that you can set some of the content to display above other page content, almost as though you selected Arrange > Bring to Front. This "foreground" behavior is desired for the food and events pages.

The ability to set the stacking order of master page elements is a new feature available in Muse 4.0. Previously, you had to put header or footer elements on every page, rather than a master page, if you wanted to layer common site elements above other content in the page layout.

Set elements in master pages to display in front

In Muse, the Design view interface enables you to select a page element and choose Object > Bring to Front, Bring Forward, Send to Back, or Send backwards to make one item display above or below another item on the page. (You can also right-click on an element or group and choose Arrange > Bring to Front, Bring Forward, Send to Back, or Send backwards to set the stacking order).

When designing sites with previous versions of Muse, the default behavior is that elements on a master page always display behind all elements on a page when the page is rendered. This background layering was sometimes problematic (depending on the site design) because the only workaround involved copying and pasting elements that you would normally place on a master page onto all the site pages where you wanted them to display on top.

Muse includes the new ability to control the arrangement of elements on master pages. Now, instead of always displaying everything on a master page behind page elements, you can select elements on master pages and set them to display as a foreground element. Items on a master pages set as foreground elements will display above all page elements.

This new option is available by choosing Object > Move To > Master Foreground. Additionally, you can right-click on any element in Design view while editing a master page and choose Move To > Master Foreground in the context menu that appears.

In this sample project, the design requires that the content in the home and visit pages use the default stacking order (page elements are displayed on top of the header in the Main master page), but the food, events, and about pages do not.

For the food and visit pages, you'll update the Foreground master page so that the header content displays in the foreground, above the page content as the pages scroll. Follow these steps:

  1. In Plan view, double-click the Foreground master page thumbnail to open the page and begin editing it in Design view (if it is not already open).
  2. Use the Selection tool to click and drag to select the entire header content, including the rectangle with the tiling background, the placed orange ribbon graphic, the Menu widget, and the animated GIF logo in the center.
  3. With the entire header content selected, right-click and choose Move To > Master Foreground. Notice that unlike the usual blue border for selected objects, items set to display in the foreground have a red border when selected.
Move the header content to the foreground using the context menu.

This ensures that the header will display on top of the page elements on the pages where the Foreground master page is applied.

  1. While the entire header is still selected, you'll pin it to the top of the page, so that even if the page scrolls, the header won't scroll with it. You'll learn more about pinning objects in Part 7, but for now click the top center pin position in the Control panel to pin the header in place.
Pin the selected header by selecting the top center position.

  1. Click and drag the Foreground master page onto the food page, to apply it. Repeat this step two more times, to apply the Foreground master page to the events page and the about page.

After making this change, the blue label text displays the words [Foreground], indicating that the food, events, and about pages are now using the Foreground master page. If you hover over the blue [Foreground] label, a tooltip indicates that the Foreground master page is based on the A-Master page.

When designing your own site projects, you can experiment with the new Move to Foreground feature to set elements on master pages to display on top. Later in this tutorial series, you'll finalize the design for the food and events pages and see how the foreground setting ensures the header displays above other content on the page.

In the next section of this tutorial, Building your first website with Muse Part 4, you'll see how to work with embedded HTML to display code copied from other websites. You'll also learn how to add a Lightbox Composition widget to build out the home page.

Use multiple master pages and incorporate animation

In this section, you'll learn more about working with master pages and how you can display common site content in multiple master pages to create consistency, while creating different sections of a site. You'll also learn strategies for moving elements from master pages, because in some site designs, you may find it useful to make multiple master pages and only put specific graphics on each (such as a site with four color-coded areas). You'll also learn about moving elements that are normally on a master page to a specific individual page to create design effects, such as layering items on top of each other.

Edit Master page content

Objects placed on a master Page will display layered below any content you place on an individual page. For example, any objects you place in the header or footer of your Home page will appear layered on top of the backgrounds placed in the master page's header and footer. For this reason, you may encounter situations where you need to move elements from a master page and place them on individual pages to make them appear above other elements on the page.

Content added to master pages must be edited later by opening the master page. If you open a page that is associated with a master page and try to edit the header, footer, or other master page content, it appears to be locked. You can use two different strategies when you need to change content on a master page:

  1. Double-click the master page thumbnail in Plan view, and then edit the content of the master page in Design view.

  2. Double-click the master page thumbnail in Plan view to open it in Design view. Select the elements that you want to edit (but need to be above other elements by placing them on a page of the site) and choose Edit > Cut, or use the keyboard shortcuts, Command-X (Mac) or Control-X (Windows).

  3. Return to Plan view and double-click the page that will contain the (formerly master page) content. Choose Edit > Paste in Place. This ensures that the element(s) you cut from the master page are positioned in the identical location on a normal page. If desired, you can open up multiple pages and choose Edit > Paste in Place to distribute content that was on the master page to many different pages in your site.

As needed, you can also duplicate an existing master page. You can configure your site so that most pages use one master, while a special page uses a duplicate, similar version of the master (with specific elements copied from that duplicate master page to the special page of the site). To learn more about duplicating master pages, see the next subsection.

Once the object is on your individual pages and not your master Page, you can edit the object on a per-page basis as needed and ensure that the object appears on top.

In this sample project, the site is currently displaying the Kevin's Koffee Kart logo (red bicycle with banner) directly above the site navigation in the header. The header and footer content are displayed automatically on every page because by default the Home page (and every other page you create) are linked to the A-Master page, which contains this content. In many cases, you may choose to build websites that all use the same master page to create consistency across the site.

However, this site has a unique animated logo that is displayed only on the Home page. If you review the live example of Kevin's Koffee Kart site, you'll notice that on the Home page, the red bicycle logo animates once when the page first loads, as though the bicycle is riding onto the page from the left side. As you click around to visit other pages, you'll see that the animation occurs only on the Home page; all other logos on the site's pages are static.

In the following subsection, you'll learn how to create a duplicate master page and how to assign pages to use a specific master page in Plan view.

Duplicate and delete master pages

  1. Click the Plan link to access Plan view. Locate the A-Master thumbnail, located at the bottom of the Plan view interface.

  2. Hover your cursor over the A-Master thumbnail and notice that when you roll over it, you see the same plus (+) sign icons that you see when you add new pages to the sitemap. Click the plus (+) sign to the right of the A-master thumbnail. You can use this technique whenever you'd like to create a brand new master page from scratch. Notice that the thumbnail is blank, meaning it does not contain the content you added to the A-Master page. The new master page is named B-Master by default, although you can click the field below the thumbnail to rename it as desired.

    In this case, rather than create a brand new blank master page, you'll instead create a duplicate of the existing A-Master.

  3. Click the X icon in the top right corner of the B-Master page to delete it. (If you accidently delete an existing master page using this strategy, choose Edit > Undo Delete master Page to restore it).

  4. Right-click the A-Master page thumbnail, and choose Duplicate Page from the context menu that appears. A new thumbnail displaying a duplicate master page appears, named A-Master copy.

    Duplicate the A-Master page in Plan view.

  5. Click the field below the A-Master copy thumbnail and rename the duplicated master page: MasterFlash. You'll use this page to add the rich media content that animates on the Home page exclusively, while all the other pages will continue to point to the A-Master page, which displays a static version of the logo in the header.

  6. Right-click the Home page thumbnail. In the menu that appears, choose masters > MasterFlash. This operation associates the MasterFlash master page to the Home page.

    Note:

    Alternatively, you can drag the MasterFlash thumbnail on top of the HOME page thumbnail to apply it.

Once applied, the MasterFlash master page's name is displayed in brackets below the Home page thumbnail in Plan view.

If you click Preview, you won't notice any difference in the Home page. Since MasterFlash is a duplicate copy of the A-master file, the Home page appears as it did before and the static logo is displayed. However, in the next subsection, you'll edit the MasterFlash content to add the animation that will occur only on the Home page.

Using duplicate, almost similar (but slightly different), master pages is a great way to distinguish a specific section of a website, as well as make the Home page unique as described for this project.

In this tutorial you’ll learn to use Master Pages. We'll examine and deconstruct three site layouts and explore how you can achieve interesting effects and site consistency using common elements within a Master Page.

But first, what is a Master Page? A Master Page allows you to apply common elements like headers, footers, logos, and navigation to multiple pages in your site. You can use one Master Page for your site or set up multiple Master Pages so that you can quickly and consistently apply unique styles to different sections of your site.

By default, Muse creates a blank home page and a blank Master Page for you when you create a new site. These pages are the starting point for any website. You can plan out your site map using blank pages and then apply masters to them later, or you can create your website by starting with the master, applying it to a single page (the home page), and then creating new pages based on that design.

Deconstructing site layouts

A great way to learn new site design strategies is to review different Master Page layouts. In this article, we'll examine three different site layouts created in Muse and explore how they were originally constructed.

If you'd like to follow along and open up the assets for each of these sample sites, download the sample files, uncompress the ZIP file and double-click each .muse file to open it in Muse.

As you check out each of these sample sites, note some of the features used to create site designs that are easy to navigate and help orient visitors as they discover site content:

  • Configure site properties to define the dimensions of all pages
  • Use guides to define the header and footer regions in the Master Page
  • Pin objects to the browser window, to position them outside the page layout
  • Set background image fills to scroll or fixed positions to create interesting effects
  • Stretch rectangles to display at 100% width to span the width of the browser
  • Add Accordion widgets and Slideshow widgets display interactive page content
  • Customize and style Menu widgets to provide site navigation
  • Create anchor links to jump vertically or horizontally to specific page sections
  • Paste code from third-party sites (embedded HTML) to add features to pages

As you visit each example site, try scrolling and resizing your browser window to see how the live example works. Then, open each .muse file in Muse to see how Master Pages are used to standardize site layouts and create a more unified online experience.

Example #1: Happy Valley Adventure

In the first example, the footer graphics are pinned at the bottom of the browser window. Additionally, the footer background is set to 100% width to span the horizontal bottom of the page. The longer page content scrolls behind the footer foreground to create a gradient sky effect. As you click the anchor links on the left side, the page moves vertically to the corresponding section. Semi-transparent graphic elements and a strategic stacking order help convey the experience of flying airborne in a balloon.

As you review the .muse file for this site, notice the following:

In the Master Page, a series of gradient filled rectangles provide the backdrop for longer page content.

  • The Home page includes a footer graphic with horizontal tiling background image set to span 100% width that is pinned to the bottom of the browser window. A second footer graphic (the mountain peak) is centered and also pinned to the bottom of the browser, and is arranged to display above the other tiled footer graphic by choosing Arrange > Bring to Front. This strategy accommodates any monitor size.
  • The navigation links on the left side jump to anchor tags that are added to the long vertically oriented page. As visitors click the links, the page scrolls to display the corresponding content. The design looks well balanced and unified as new site sections are revealed.
  • The contact section of the Home page includes embedded HTML to display contact form elements to facilitate communication with visitors and schedule upcoming adventures.

Example #2: Kevin's Koffee Kart

This multi-tiered site uses a Menu widget and embedded HTML features.

The Home page of the Kevin's Koffee Kart site includes Flash animation in the header and pinned cloud graphics. As you use the scrollbars to navigate the page, notice that the background image is fixed and does not scroll, but the page content scrolls above it. A slideshow automatically plays, cycling through images underneath an embedded HTML Twitter feed.

The menu bar in the header was created using a Horizontal Menu widget to create persistent site navigation buttons that update automatically when you add new pages. In this example, the Menu widget is configured to display both top-level and sub-level pages.

Interact with the menu and see how each page loads as you click the buttons. The header and footer are standard across all pages, but page heights vary based on content. The brown footer is comprised of two rectangles set to 100% width to span the entire width of the browser window that add conformity to each page.

The following design conventions were used to create Kevin's Koffee Kart site:

  • This site incorporates two similar Master Pages: the Master Page without the Flash media is applied to most of the site pages and a second Master Page with the Flash movie is applied only to the Home page. Both Master Pages have 100% width footers with transparent design borders and use the same Menu widget for consistency. After creating the first master, the elements are copied and then pasted in place in the second master to ensure that all of the elements line up perfectly.
  • The pages are organized in Plan view to create top and sub level sections of site, which is reflected in the Menu widget drop-down items.
  • The background image map used as the browser fill is set to display at original size rather than tiling. It is centered and set not to scroll below the page's content.
  • The page background fill is solid white with a slight transparency to enable the background map image to show through.
  • The Home page includes two semi-transparent cloud images pinned to the browser. Scroll the page vertically to see that the pinned elements don't move and remain in position if you resize the browser window.
  • The Home page uses embedded HTML to display live Twitter feed content.
  • The Koffee page features an Accordion widget that expands and collapses the panels when clicked to display more content in a compact area of the page.
  • The Origins page features a Thumbnail Slideshow widget to display an interactive photo gallery. The Preparation page uses anchor tag navigation to jump to each section in the page and the Kart Map page includes embedded HTML to display a live Google Latitude map, based on the current location of the cell phone used for that account.

Example #3: More than Square

Strong overlapping pinned graphics frame the scrolling page content.

As you view the final example, note that the building graphics are pinned in the top right and bottom left corners to frame the page content. The building in the top right corner is arranged in front to overlap above the page content, while the building in the bottom left displays below the page.

The page content is centered, semi-transparent and set off from the architectural elements with rounded corners. The page content scrolls vertically and the height fluctuates as you click through the pages. Social network links (Twitter, Facebook, and YouTube) persist on the left side of page to promote cross-linking and convey a consistent asymmetrical design across the site.

The Home page features a photo gallery with Next and Previous button navigation that is also configured to play through the slides slowly if the visitor chooses not to click the buttons. The How to Get Here page includes an interactive map created with embedded HTML code copied from Google Maps.

As you review the source .muse file for this example, consider the following:

In this example, almost all of the common page elements are in the Master Page. This strategy makes it easier to update the site and make changes to the individual page content.

The Master Page contains a non-scrolling background graphic for the footer image, which is pinned to the bottom left side of the browser. The Master Page also contains the rounded corner, semi-transparent page design with the site navigation.

All of the site pages have a pinned graphic in the top right corner that is arranged to display in front of the page content to create the illusion of perspective that is carried through the angles of the building images.

Muse is an intuitive design tool that allows you to bring your designs to the web. Creative placement of elements in the Master Pages and the unique content displayed on each page enable you to make compelling layouts. You are only limited by your imagination as you create innovative sites for your clients.

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

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy