Get started with Adobe Muse. Understand .muse files, know how to set page properties, add favicons and more.

Note:

Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service page.

Getting started with Adobe Muse

After signing in, the Adobe Muse workspace launches. You can see the Adobe Muse Welcome Screen. Perform one of the following actions:

  • Click Create New to create a new site.
  • Click Open and browse to an existing .muse file from your computer.
Welcome screen in Adobe Muse
Use the Welcome Screen to create a new site.

When you create a new site, the New Site dialog box appears. Select Fluid Width to enable responsive layout, or select Fixed Width to choose alternate layout. It contains fields that enable you to set the maximum page width, the columns, and the Gutter value.

New Site dialog to create a new website.
Select File > New Site to create a new site.

Click Advanced Settings to set the dimensions, margins, columns, and padding values for your site (numerically, in pixels). You can also choose the Resolution and Language from this window.

You can always update these settings later by choosing File > Site Properties.

Site properties dialog box to set the site properties.
Set the site properties in the New Site dialog box.

Click OK to close the dialog box when you are finished.

By default, the Plan view opens with two items already created. The Home page at the top left is the page that will first load when a user visits your live site. The A-Master page below is like a template. Place any items on the A-Master page that you want to appear on all of the site's pages. That way, you only have to update the common site elements in one central location.

NewWebsite
Adobe Muse automatically generates a Home page and one Master page.

Along the top, there are four links that indicate the different sections of the interface: Plan, Design, and Publish.

To know more about using the interface and designing a site using Adobe Muse, see Getting started with Adobe Muse and Building your first website with Adobe Muse.

Understanding .muse files

When you design websites in other programs, such as Dreamweaver, you create a folder that contains subfolders and files with all of the site content on your computer. It can be tricky to manage an entire set of elements and make sure that there are not any broken links in the site.

When you create a new site in Adobe Muse and choose File > Save, you create a single .muse file. This is similar to creating a PSD file in Photoshop, which may contain any number of layers, graphics, and linked assets. This single .muse file is the only file you'll need to design a site, because it contains all of the images, links, code, and site files. If you want to work with someone else while designing the site, you can send your colleague a copy of the .muse file that you created, so that they can open it, make changes, and publish the changes they added.

Usually, it's best to only allow one person to work on the .muse file at a time. After you are finished adding your content to the site, you can publish it and send your colleagues the .muse file so they can edit it to add more content. When they are finished, they can send the updated .muse file (which includes their changes) back to you. That way, you'll be sure not to overwrite each other's work.

Alternatively, you can create a .muse file and publish a temporary site. Then, share the .muse file with your colleagues. They can open it, choose File > Save As, and make changes to the copy they have as you continue to work on your copy, with the understanding that they will be publishing their own new temporary sites. However, if you use this workflow, the two iterations of the site will be out of sync—your version of the .muse file will not update to contain the changes your colleagues have added, and vice versa.

Whenever you want to make major changes to an existing website, it is a best practice to always open the .muse file and choose File > Save As. Create a new .muse file with a slightly different file name, and then keep all of your .muse files in a single folder on your computer. That way, if the client prefers the original version of the site, you can always open the previous version of the .muse file with an older design and republish it, to revert the site back to the way it was.

It is also a best practice to save your .muse file frequently. In the event that Adobe Muse crashes, the restored version of the .muse file with your recent edits is usually presented when you launch Adobe Muse again. If this occurs, save the restored version of the .muse file immediately, and then beginning working on it again. Be sure to save the .muse files you create in a safe place and back them up, because each file contains an entire website. If you lose the .muse file and do not have a backup copy, you cannot reconstruct a .muse file by downloading the site files that are hosted on the server.

Many web designers like to save their .muse files with descriptive names, such as my_site_v1.muse and my_site_v2.muse. You can also add the date to the .muse file name so that you can easily tell which version is older, such as my_site_2012-4-13.muse and my_site_2012-4-30.muse. You can name the files however you find it most helpful.

Setting site properties while creating a new site in Adobe Muse

Follow these steps to create a new site and define the site's properties:

  1. In the Welcome screen, choose Create New > Site. Click Fluid Width for responsive layout, or Fixed Width for alternate layout.

  2. In the New Site dialog box that appears, set Page Width to 950 and Min Height to 800. Set Columns to 3, and Gutter to 20. In the Margins area, set all four values to 50. Set the Padding values to 36.

    Set the site attributes from the Site Properties dialog box.
    Set the site attributes by typing the values directly in the fields or clicking the arrow buttons for each setting.

    Note:

    If you are designing your site for Phones and Tablets, the "Redirect from Desktop" option allows you to turn on/off redirect for mobile layouts. This feature is useful for a layout that is not ready and should not be redirected to yet (work-in-progress). Note that the layout will still be exported even though the redirect option is off. However, mobile browsers will not redirect to mobile pages, and the exported files will not be included in sitemap.xml until this option is enabled in the Site Properties dialog for your site.

  3. Click OK to save your settings and close the dialog box.

  4. Choose File > Site Properties. Click the folder icon next to Favicon Image. Navigate to the Kevins_Koffee_Kart sample files folder and select the file named favicon.png. Click OK.

    fig_07
    Favicons are icons that appear next to the URL of your site in the address bar of a browser.

  5. Choose File > Save. Name your new site with a unique name, such as YourNameKoffeeKart.muse. (The sample site in this tutorial is called 01KevinsKoffeeKart.muse.)

Add a favicon in the Site Properties panel

A favicon is a small, square image that you create, add to a site, and upload to personalize bookmarks and URLs. Although the behavior varies depending which browser you are running, the favicon generally is displayed in the browser's address bar, next to the site's URL while being viewed. In many cases, it also displays next to a page's name when it is bookmarked, or in a tab that contains a loaded site page. You can use any image-editing program, such as Photoshop or Illustrator, to create a square (equally proportioned) image file to use as a favicon file. For this tutorial, a PNG file is provided.

Follow these steps to add a favicon to the site:

  1. Choose File > Site Properties. The Site Properties panel appears.

  2. In the Content tab, click the folder icon to the right of the Favicon section. Use the Choose Favicon Image dialog box that appears to browse to the sample files folder and select the file named favicon.png.

    Favicon
    Set the favicon.png file in the Site Properties.

    Note:

    If you are using Adobe Muse 2015.0.2 or earlier, you can add a favicon for your site by clicking File > Site Properties > Layout tab.

  3. Click Open to close the Choose Favicon Image dialog box and select the file. Then, click OK to close the Site Properties dialog box.

  4. Choose File > Preview Site in Browser. Look at the top of the browser window, to see the favicon displayed in the address bar. If the site loaded in a tab, you may also see it displayed there. And experiment with bookmarking the page, to see how the icon may display next to the page name in the list of bookmarks.

    Now that the site is finalized, the next step involves uploading the site to the provided Adobe Business Catalyst hosting servers.

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