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.
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 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.
Figure1. This scrolling vertical page design uses anchor tag navigation.
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.
Figure 2. 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.
Figure 3. 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 Tutorials page for written tutorials, or the Muse Events page for live webinars and recorded video tutorials.