Sample files

Katie's Cafe demo asset

 

Sample website

Katie's Cafe live website

 

Prerequisite knowledge

Familiarity with web design concepts. No prior experience programming dynamic websites required.

 

Adobe Muse / Tutorials

Building your first website with Muse, part 1

In Building your first website in Muse Part 1 you’ll learn how to get started with Muse and to define Master page elements, Photoshop buttons and hyperlinks. 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 on the web.

Installing the software and setting up the project

1. Download and install Muse (AIR application, 5.5MB)

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

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

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

​

Figure 1. Select the new site option in the Welcome screen.

The New Site dialog box appears. Later, when you open the same dialog box while you are working, it is also called the Site Properties dialog box. Use this interface to edit the settings that are applied to the entire site. Set the Page Width to 960 and set the Min Height field to 960. Set the number of columns to 9. In the Padding section, set the Top to 18 and the bottom to 0. Set all of the Margins to 20. Type the numbers in the fields or click the up and down arrows next to each field to increase or decrease the current values. Click OK (see Figure 2).

​

Figure 2. Set the site properties when you create a new site, before you begin designing the pages.

Note: As you edit a site, you can access this panel at any time by choosing File > Site Properties. However, it is a best practice to set the dimensions when you first start a project, just as you would when setting up an artboard, document or canvas.

Choose File > Save. In the Save File As dialog box, enter a name for the site: MyFirstSite.muse. Navigate to the location where you want to save this sample project (such as the FirstMuseSite folder on your desktop). Click Save (see Figure 3).

​

Figure 3. Enter the site name and choose a location on your desktop to save the site.

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

The Plan view loads. When you first create a new site, Muse automatically generates a Home page (the index page) that is linked to the Master Page design (see Figure 4).

​

Figure 4. A new site contains one Master Page and a corresponding Home page.

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.

​                                                                                                                                                                             

Back to top >>

Editing Master Pages to add elements that are common to all site pages

In this section, you’ll design the Master Page for the site; it contains the persistent artwork that the other linked pages in the site display automatically.

Although 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 a style, such as corner rounding, or apply an effect, like a gradient fill color, Muse doesn’t create a vector shape or a grid of pixels. Instead, the final published result is a fully functional standards-based web page.

In Plan view, double-click the Master Page to open it in Design view. The A-Master file opens in its own tab along the top of the workspace.

Look in the upper left corner of the Control panel to locate the Selection Indicator. At the moment, when nothing else is selected, the Selection Indicator displays the word Page, meaning only the page itself is selected. As you click objects on the page, such as an image, the word Image will be displayed. It is very helpful to know which item is currently selected, so as you work pay attention to the Selection Indicator to ensure you are selecting the element you want to control.

To select the entire page, click in the gray area to the left or right side of the page. The Selection Indicator will display the word Page. While the page is selected, use the menus in the Control bar to update the fill color and stroke settings. Set the fill color of the page to white and set the stroke width to 0. Set the browser fill color to white (see Figure 5).

​

Figure 5. Use the Fill Color and Stroke Width menus in the Control bar to update the page and browser settings.

Select the Rectangle tool (see Figure 6).

​

Figure 6. The Rectangle tool (square icon) is next to the Hand tool in the Control bar.

Click and drag the Rectangle tool across the entire width of the page, near the top, to create a container. Since you’ve just drawn the rectangle, it is automatically selected. (You can see the selected item’s name in the Selection Indicator at the top left corner of the Control bar). In this case, the rectangle doesn’t need a stroke, so set the stroke width of the rectangle to zero by typing 0 in the field—or click the down arrow once in the Stroke width menu.

Using the transform handles of a selected rectangle, you can control its position, shape, rotation, and size. While a rectangle or an image is selected, you can also add effects, such as drop shadows, bevels, and glows using the Effects menu in the Control bar. As desired, you can also change the transparency of the selected item by adjusting the numeric value to a setting lower than 100 in the Opacity slider.

Back to top >>

​Setting a background image as a tiled fill for a rectangle shape

Use the Fill menu (located immediately to the left of the Fill Color menu) to set a background image as a fill. You’ll use a sliced tiling image that will render and download quickly when the visitor accesses the page. Click the folder icon next to Image. In the Open dialog box that appears, navigate to the file in the FirstMuseSite folder named header.jpg and click Select (see Figure 7).

​

Figure 7. Browse to select the background image and click Select.

Use the Fitting menu to set the background image to tile horizontally. Rectangle containers with tiled image fills create flexible page elements—you can resize the rectangle to the dimensions that best fits your design and the background image tiles seamlessly.

Select the rectangle and drag the bottom center transformation handle down to display the entire height of the header image, including the scalloped edge. Drag both of the side handles to extend its width. Position the rectangle to align with the top of the page.

When the site is published, the original image you set as a tiled fill is only loaded once by the browser—you can resize the rectangle to cover large areas of the page as needed without impacting the download speed or the performance of a site.

You’ll use a similar process to create the footer.

Draw a rectangle with the Rectangle tool that spans the width of the page and is about 300 pixels high, near the bottom of the page. While the rectangle is selected, set the stroke width to 0. Use the Fill menu to set the background image to footer.jpg. In the Fitting menu, set the option to Tile, which causes the image to tile both horizontally and vertically. 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 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). This feature enables you to create design elements that will display across the entire width of the browser window, no matter how wide the visitor sizes their browser.

Use the Rectangle tool to draw another rectangle container that spans the width of the page, near (and overlapping) the top edge of the existing rectangle. Set the stroke width to 0. Set the fill color to none. Use the Fill menu to select the file named bottom_border.png as the background image and set it to tile horizontally. Use the transformation handles to resize and reposition the rectangle to position it along the bottom of the page, so that it spans the entire width. Expand its height to display the entire scalloped edge graphic. This PNG file has a transparent background, which gives the effect of the white page fill color showing through.

​

Back to top >>

Placing a single image on the page

In this section, you’ll use a different technique to add more images to the page. This time, instead of setting background images as the fill for rectangle containers, you’ll place images directly on the page. Choose File > Place (see Figure 8).

​

Figure 8. If you prefer to use the keyboard shortcut to place files, press Control-D (Windows) or Command-D (Mac).

In the Open dialog box that appears, browse to select the file named footer_content.png located in the sample files folder on your desktop. Click Select. Click once (to place the graphic at its original size) in the footer area, and then use the Selection tool and the Smart Guides to center the content in the middle of the page.

The footer is now complete. But there’s one more task to do before we move to the other page areas. Select the three items in the footer:

The rectangle containing footer.jpg

The rectangle containing bottom_border.png

The placed image file named footer_content.png

While all three items are selected, either select the checkbox next to Footer in the Control bar (or verify it is checked) or right-click (Control-click) on each element and choose Footer Item from the context menu that appears. This is important to ensure that these three elements are assigned as footer items and will stay positioned below the other content on the page (see Figure 9).

​

Figure 9. Enable the Footer checkbox while selecting the three elements in the footer area; alternatively, right-click to set the Footer Item in the context menu that appears.

 

Back to top >>

​

Placing a Photoshop button

Next, you’ll learn how to place a button graphic that was created in Photoshop. A Photoshop button is a graphic that contains two or more layers, which create the button “states” which are displayed when the visitor’s cursor interacts with them. You’ll learn more about states later in this article.

Choose File > Place Photoshop Button. In the Place Photoshop Button dialog box that appears, browse to select the file named katiescafe.psd. Click Select. The Photoshop Import Options dialog box appears. The preview of the Normal, Rollover, Mouse Down, and Active States display a checkbox pattern, indicating that the canvas of the Photoshop document is transparent, so the button graphic will integrate with the background graphics. The PSD file contains two layers with an identical graphic (except for the fill color).

For this example, leave the default settings for the states, but notice that you could use the menus in the Photoshop Import Options dialog box to specify which layer will be displayed with each mouse event when the visitor interacts with the button. When previewed in a browser, the graphic in the second layer in the Photoshop file displays a rollover effect when the visitor hovers their cursor over the logo. Click OK to close the Photoshop Import Options dialog box.

Click once near the left side of the header, to place the logo graphic in the middle blue area. Use the Selection tool to align the logo in the middle of the header area  (see Figure 10).

​

Figure 10. After placing the Photoshop button, position it in the left header region.

​

Back to top >>

Adding a link to a button image

While the logo is still selected, use the Link menu to select the Home page. That way, whenever a visitor clicks the logo, they’ll be presented with the Home (index page) of the website (see Figure 11).

Figure 11. Link the Photoshop button logo to the Home page using the Link menu.

​

Back to top >>

 

Defining the header, footer and page regions in the Master 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 a 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.

 

Enabling the guides to set page regions

 

While editing the Master page in Design view, right-click (or Control-click) on the left side in the gray area of the workspace, just outside the browser window area. Enable the option to Show Guides and Show Header and Footer. (Alternatively, you can use the View Options menu with the ruler icon in the Control panel to enable both the Guides and the Header and Footer Guides).

Blue horizontal guides appear that span across the width of the page. Starting from the top, drag the guides vertically 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.

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 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 content. If you do not want the browser fill to display below the page content, you can drag both the bottom of the web page guide and the bottom of the browser window guide to the same location at the bottom of the page as shown in Figure 12.

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 as you build out each page; this center area expands to fit the height of the elements placed on each page.

As you drag the guides to define these areas, a tooltip describes each guide. You may find it helpful to increase the magnification of the page, so that you can zoom in to see the edges of the page elements more clearly. You can also select the rectangles and elements on the page and use their bounding boxes to help you align the guides while setting the header and footer areas.

For this example, drag the top of page guide to the very top. This sample project displays the pages flush along the top of the browser window, without a border of the browser window showing through.

Drag the second guide down, just below the bottom of the header graphics. Drag the third guide from the top up, just above the top of the footer graphic. Drag the fourth guide down, to match the bottom of the footer graphic (to define the bottom of the page). And finally, drag the fifth guide down to the bottom of the page guide, to set the bottom of the page flush with the bottom of the browser window (see Figure 12).

​

Figure 12. Set the header, page, and footer regions by dragging the guides on the left side.

Now that you’ve added the header and footer graphics, click Plan to see the Plan view and review the thumbnails. Notice that the header and footer elements in the Master Page are automatically added to the Home page.

Your basic page layout is now complete. In the next tutorial, Building your first website in Muse Part 2 you’ll learn how to create more pages for the site, to pin objects and define external browser links. 

Back to top >>