Adobe Muse / Tutorials

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. Part 1 of Using Muse to build your first website includes instructions to help you get started with Muse. You'll learn how to work with master pages, widgets, Photoshop buttons, and links. As you work through this tutorial you can see what the finished site will look like at any time by reviewing the Katie's Cafe live website.


Back to top >>

Installing the software and setting up the sample project

1. Download and install the latest version of Muse (AIR application, 5.5MB).

2. Download the sample files (ZIP, 3.8MB).

3. Uncompress the ZIP file and save the folder named katiesCafe to your desktop.

4. Launch Muse. The Welcome screen appears. Choose Create New > Site (see Figure 1).

Figure 1. Select the option to create a new site in the Welcome screen.

The New Site dialog box appears. You’ll use this interface to edit the settings that are applied to the entire site.

5. Set the number of Columns to 12. Type the number 12 in the Columns field or click the Up arrow next to the field to increase the current value (see Figure 2). After making this change, other values update automatically.

Figure 2. Update the number of columns in the New Site dialog box.

Note: In this tutorial, you'll learn how to make your first website in Muse for desktop computers. Notice that the Initial Layout menu is set to Desktop by default, so you don't need to change it. Later, when you want to build a website with alternate layouts for smartphones and tablets, you can use this menu to choose which layout you want to design first.

Before closing the New Site dialog box, take a moment to review the new option labeled Sticky Footers. It is enabled by default. In most cases, you'll want to keep the sticky footers option enabled when you build websites, because it causes the footer to remain in the desired location, even if the browser window is significantly larger than the web page design, as it is on an Apple cinema display (see Figure 3).

Figure 3.  The Sticky Footers option is enabled by default.

For example, when you preview a Muse site in a browser on a large monitor and zoom out on the page that doesn't have Sticky Footers enabled, you'll notice that if you make the page content too small in relationship to the browser window, the area below the footer displays the browser window. When the Sticky Footers option is enabled, the footer content remains flush with the bottom of the browser window, regardless of the resolution and dimensions of the visitor's desktop monitor (see Figure 4).

Figure 4. A zoomed out site with Sticky Footers enabled (left) compared to a site without Sticky Footers enabled (right).

For this sample site project—and in most cases—you'll keep the Sticky Footers option enabled in the New Site dialog box.

6. Click OK to save your changes and close the New Site dialog box.

7. Choose File > Save Site. In the Save Adobe Muse File As dialog box, enter a name for the site: katiesCafe.muse. Navigate to the location where you want to save this sample project (such as the katiesCafe folder on your desktop) and click Save.

Note: The katiesCafe sample files folder contains a finished version of the sample project named katiescafe-final.muse. If you'd like, you can double-click the final version of the .muse file to open it after you save your version of the project as katiesCafe.muse. Muse allows you to open multiple site projects at once, so you can review the katiescafe-final file and use it as a reference as you follow along with these instructions.

In the next section, you'll begin adding new pages to the site.


Back to top >>

Building a site map

A site map is a structured list of the pages that exist in a website's hierarchy. You can create pages that are on the same level (no sub-pages) or you can create site maps that contain different tiers of pages. (For example, a larger site could have an About page that contains two subpages named Our Mission and Our Staff.) Muse makes it easy to create and rearrange the pages into any order you prefer, and you never have to worry about broken links. However, it is important to spend some time organizing the content of a new site, defining which pages are needed, and deciding how to present the site's information. In a real-world project, it is part of the pre-planning phase to finalize the different site sections and choose the order of the pages.

After closing the New Site dialog box, you are automatically redirected to the Plan view in Muse. By default, all new sites contain one web page (named Home) that is linked to one master page (named A-Master). You can rename both of these pages as desired.

To create a consistent experience, you’ll place repeating site items, such as the header, footer, and site navigation, on master pages. Using this strategy, you’ll only need to add the unique content to the individual pages as you build out the site design.

This sample project is a smaller site that contains a total of five pages, including the Home page. Follow the steps below to add new pages:

1. Hover over the Home page thumbnail and click the plus (+) icon to the right of the Home page thumbnail, to create another page at the same level as the first one. Click the label field below the new page and name it: food.


Tip: When you click the plus (+) sign icon below a page thumbnail, you create a sub-level page to expand a section with pages that relate to a specific topic.

2. Click the plus (+) sign icon to the right of the food page thumbnail to make another new page. Click the label and rename the page: events. Click the plus (+) sign icon to the right of the events page thumbnail, to create a new page. Name the new page: about. Repeat this operation again, to create one more new page on the same level as the Home page, and name it: visit.

At this point, the site map has a total of five pages named Home, food, events, about, and visit (see Figure 5).

Figure 5. Create a total of five pages in the site map.

Note: For the purposes of this tutorial, the site map contains five pages on the same level. However, when you build sites in the future, you can create sub-level and other child pages. You can also click the plus (+) sign icon next to the master page at the bottom, to create more master pages, if you want to create different designs to display in different sections of the site. If you have more than one master page, you can right-click (or Control-click) on the page thumbnails in Plan view to link them to a specific master page. When you first create a new site, the pages link to the A-Master master page automatically.

The Plan view provides the tools to structure a site and define how visitors will access each of the sections. If you’d like to change the site’s organization, you can adjust the flow by simply dragging the thumbnails of the pages around to reposition them.

3. Click and drag the Home page thumbnail, to reposition it between the events and the about pages.

4. Double-click the field below the Home page thumbnail and rename the page: home (see Figure 6).


Figure 6. Rename the Home page to lower case home, to match the other pages.

After making these changes, the site map is complete.

At the top of the Plan view interface, notice that there are three layout buttons for Desktop, Tablet, and Phone layouts. In this sample project, you'll only be creating a desktop design to deliver the site to computer screens. The Tablet and Phone layouts display a plus (+) sign next to their names, indicating that they have not yet been created (see Figure 7).


Figure 7. Three layout buttons at the top of the Plan view enable you to create and jump between three alternate layouts that display on different screen sizes.

Tip: In addition to clicking a layout button to jump between site layouts, you can also use keyboard shortcuts to toggle between site plans once you have more than one layout:

• Press Command+7 (Mac) or Control+7 (Windows) to jump to the Desktop site map.

• Press Command+8 (Mac) or Control+8 (Windows) to jump to the Tablet site map, or

• Press Command+9 (Mac) or Control+9 (Windows) to jump to the Phone site map.

These keyboard shortcuts are only active in site projects that contain at least two Desktop, Tablet and/or Phone layouts.

To build this sample site project, you'll continue to work in the Desktop layout for the rest of these instructions. However, if you'd like to learn more about designing websites for mobile devices, see the article titled Creating mobile layout designs in Muse.

Now that the site map is set up, you'll move to the next section and learn how to edit the A-Master page to add the shared site elements, including the footer content.


Back to top >>

Editing the A-Master page

In this section, you’ll design the first master page for the site; it contains the persistent artwork that displays in the other linked pages in the site.

In many ways Muse behaves like a design tool, behind the scenes it generates industry-standard HTML, JavaScript, and CSS to create web pages. When you choose to apply styling (i.e. rounded-corners, gradient fill color), Muse doesn’t create a vector shape or grid of pixels. Instead, the final published result is a fully functional standards-based web page. You'll start by updating the background graphic.


Back to top >>


Setting a tiling background image as the Browser Fill

1. In Plan view, double-click the A-Master page thumbnail to open it in Design view. The A-Master page opens in its own tab along the top of the workspace (see Figure 8).


Figure 8. The A-Master page is ready to edit in Design view.

The Selection Indicator is located in the upper left corner of the Control panel. When nothing else is selected, the Selection Indicator displays the word Page, meaning only the page itself is selected. If you select an object on the page, such as a placed image, the word Image Frame is displayed.

It is very helpful to know which item is currently selected. As you work, pay attention to the Selection Indicator to verify you've selected the element you want to control. If other page elements are selected, you can always re-select the entire page by clicking the gray area to the left or right side of the page.

While the page is selected, you can use the menus in the Control bar to update the fill color and stroke settings. To update the master page for this example, follow these steps:

2. Click the linked words Browser Fill in the Control panel. Click the folder icon next to the Image section and browse to select the file named bg-tile.png located in the sample files folder. Click Open to set the background image (see Figure 9).

Figure 9. Use the Browser Fill panel to set the background image that will display in the browser window.

Notice that by default, the Fitting menu is set to Tile. This ensures that the background image will repeat, tiling both horizontally and vertically to fill the browser window.

3. Click anywhere outside the Browser Fill panel to close it.

When the site is published, the original small image you set as a tiled background fill only loads once in the browser—tiled background images offer a solution to cover large areas of the page as needed without impacting the download speed or the performance of a site.

4. In the Control Panel, click the Fill color chip and set the fill color of the page to None (white swatch with the red diagonal line).

Next, you'll add the graphics to create the footer that will appear on all of the site pages.


Back to top >>

Working with elements set to 100% width

Items that are set as 100% width fill the browser horizontally, no matter how wide the visitor's browser window is resized. If you set a page element to also align with the top and bottom edge of the browser window, an object filled with a solid color or tiled asset will also expand to fit the available space.

1. Draw a rectangle with the Rectangle tool that spans the width of the page and is about 250 pixels high, near the bottom of the page.

2. While the rectangle is selected, set the stroke width to 0. You can tell when the rectangle is selected, because the Selection Indicator in the top left corner displays the word Rectangle (see Figure 10).


Figure 10. Use the Stroke field to set the selected rectangle's stroke to 0.

3. Click the word Fill in the Control panel to open the Fill menu. Use the Fill menu to set the color to none (the white swatch with the red diagonal line). Click the folder icon next to the Image section, and set the background image of the rectangle to footer-tile.jpg. In the Fitting menu, set the option to Tile Horizontally, which causes the image to tile from left to right across the X-axis.

4. Drag the transformation handles of the rectangle to position it to the very bottom of the visible area, and adjust the width to intersect with the left, bottom, and right sides of the page. You’ll see a red border appear temporarily that indicates when the rectangle is set to “100% width mode (see Figure 11).


Figure 11. Drag the rectangle to align it with the bottom and both sides of the browser window.


Back to top >>

Placing a single image on the page

Next, instead of setting a background image to a page or rectangle, you'll add an image file by placing it directly on the page. The Muse workspace works similarly to Illustrator and InDesign, where you load the placed image first and then click on the page where you want it to appear.

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 made-with-muse.png file located in the sample files folder. Click Open to choose it and close the Import dialog box.

Click once near the bottom of the page to place the image. In this case, you want to place the image at full size, so just click once. However, if you wanted to resize the placed image, you could click and drag to scale the image to a specific size.

Using the Selection tool, drag the image towards the vertical center of the tiled footer rectangle and notice how red guides and turquoise measuring boxes briefly appear to help you align it to the center.

After making these changes, the footer section is almost complete (see Figure 12).

Figure 12. The footer is comprised of a single rectangle with a tiled background image with a center-aligned placed image on top.

In the next part, you'll learn how to define the header and footer areas of the master page.


Back to top >>

Using guides to define the header and footer regions of a page

When you build a website with HTML and CSS, the individual pages are often varying heights, based on the unique content that is displayed on each page. Muse includes features that allow for pages of a site to display different lengths, based on the unique content on each page. You can set up regions so that the header always remains in place at the top and the footer content always displays directly below the page content, regardless of each page's height. In this section, you’ll define the header and footer regions of the master page.

Follow these steps to show the guides and set up the page areas:

1. Make sure that the header and footer guides are displayed. If they are not, choose View > Show Header and Footer. Alternatively, you can use the View menu in the Control panel to enable the Header and Footer guides. When they are showing, a check box displays next to the Header and Footer item in the View menu list (see Figure 13).

Figure 13. Verify that the Header and Footer guides are enabled.

If you prefer, you can also right-click on the left side of the workspace, just outside the browser window area. Enable the option to Show Header and Footer in the context menu that appears.

The ruler must also be enabled to reposition the header and footer guides. The ruler enables you to set the guides to an exact pixel position. By default, the regular guides (that display the number of columns you set when you created the new site) are also shown.

Five blue horizontal guides span the width of the page. Starting from the top, these five guides are used to define the top of the page, the lowest edge of the header, the top edge of the footer, the bottom of the web page and the bottom of the browser window. As you drag the guides to define these areas, a tooltip describes each guide and its current location. You may find it helpful to increase the magnification of the page, so that you can zoom in to position the guides more precisely.

Note: The bottom of the browser window dictates the lowest part of the display area when a visitor views the site in a browser; depending on the design, you can set a background color or background image for the browser itself and set the guide for the bottom of the page above the bottom of the browser guide to allow that background color or image to show below the page's content.

In this sample project, the browser's fill does not display below the page content.

2. Drag both the Bottom of the Page guide and the Bottom of the Browser guide to the same location at the bottom of the page, immediately below the footer rectangle, as shown in Figure 14.

Figure 14. When the Bottom of the Page and Bottom of the Browser guides exist in the same location, the browser fill content does not display below the bottom of the page.

The three middle guides define the content that will be displayed in the header and footer areas. The remaining center region is the area where you’ll add the unique page content; this center area expands to fit the height of the elements placed on each page.

You can also select the rectangles and elements on the page. It is helpful to use the bounding boxes of selected elements to help you align the guides while setting the header and footer areas.

3. Select the rectangle in the footer that contains the tiling background image. Drag the Footer guide until it is aligned with the top of the footer rectangle.

4. Leave the Top of Page guide at the very top (at the Y: 0 px location). Drag the Header guide down to approximately 253 pixels.

The header content will be displayed in the area between the top of the page and the Header guide. After making these changes, the guides look like this (see Figure 15).

Figure 15. The guides as they appear after repositioning them on the A-Master page.

At any time during the design process, you can return to the A-Master page if you need to readjust the guides to fit the header and footer content.

Click the Plan link, or click the tab labeled katiesCafe to return to the Plan view.

Notice that all of the page thumbnails in the site now display the design elements that you added to the linked A-Master page (see Figure 16).

Figure 16. The A-Master design is displayed on all of the linked page thumbnails in Plan view.

At any time as you are designing a site, changes you make to the master page automatically update the linked pages. Master pages make it easy to update or maintain a site, because you can update one master page to change the site's appearance.


Back to top >>

Working with hierarchal master pages

The release of Muse 4.0 includes the ability 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 (see Figure 17).


Figure 17. 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.

4. 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:

5. Right-click on the events page thumbnail and choose Masters > Main in the context menu that appears (see Figure 18).


Figure 18. Use the context menu to set Main as the master page for the events page.

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

Figure 19. 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.

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.