Adobe Muse


Description Adobe Muse allows you to create graphically stunning web sites without having to write any code. Produced at Adobe by the same team that designed Adobe InDesign, it allows an easy transition for designers with no konwledge of HTML or CSS (Cascading Style Sheets) to quickly begin creating web sites with familiar tools and techniques.


  • A solid understanding of Windows file management, the concepts of right-clicking and selecting object properties
  • Familiarity with the Adobe common interface: palettes, windows, and properties

Understanding the Muse Interface
Take a tour of the Muse interface to understand and get familiar with the basic tools. Users of other Adobe products will find themselves at home in a familiar environment. First time users will find the interface refreshingly clean and simple. Specifically in this session we will:

  • Tour the Muse interface
  • Work with different views
  • Preview a site
  • Understanding the tools
  • Understanding the hint label
  • Zooming and magnifying
  • Working with layers

Creating a New Site
In this section, we dive into Muse and begin the essential steps of creating a new site with special emphasis of using master pages for repeating elements on your site. Specifically we'll work at:

  • Exploring the site options
  • Creating a site map
  • Setting up a master page

Working with Pages
Muse makes it easy to create pages for your website. In this topic session, we work through the process of adjusting page properties, including page width and height, centering the page withhin the browser window, adding background colors, and other standard features every web page needs:

  • Changing page properties
  • Creating a browser fill
  • Understanding page guides
  • Establishing headers and footers
  • Changing site and page properties
  • Adding page metadata
  • Creating a favicon

orting Graphics
In this portion of the class, you will learn the process of adding graphics to your site and options for creating animations and other assets:

  • Adding animated GIF's and SWF's
  • Adding animations from Adobe Edge Animate
  • Working with graphics
  • Using an image as a background
  • Understanding the assets panel
  • Understanding asset size and resolution
  • Roundtrip editing with Photoshop
  • Embedding graphics
  • Adding alternate text for accessibility
  • Adding downloadable content
  • Creating parallax scrolling

Formatting Objects
As you add more assets to your layout, you will inevitably find the need to make adjustments to these objects. In this section, we work with these objects and discover the tools and techniques to manipulate and format them effectively and efficiently:

  • Locking objects
  • Working with groups
  • Understanding stacking order
  • Using ruler guides
  • Using the align panel
  • Aligning and distributing with smart guides
  • Rounding corners
  • Using effects
  • Creating graphic styles
  • Wrapping an object around text
  • Creating 100 percent width objects
  • Pinning an object to the browser

Working with Text
In this section, we explore creating text in Muse versus importing text, formatting text, and the relatively new capability of modern browsers of adding typographic effects with custom fonts and how this can be easily accomplished in Muse:

  • Creating text in Muse
  • Formatting your text
  • Working with web safe and system fonts
  • Working with Typekit fonts
  • Create paragraph styles
  • Create character styles
  • Setting style export tags
  • Understanding minimum height
  • Using spell check

    Adding Color to Your Site
    Adding Color to your site is quick and easy in Muse. Simply click and pick the colors you need or use a basic color picker to specify custom colors.

    • Creating color swatches
    • Working with stroke and fill
    • Using gradients

    Using Hyperlinks
    Creating links between pages or links to another site is fundamental to any site. In this section, we learn the process of creating links in Muse as well as the techniques for styling links beyond the default blue with underline. In addition, we explore link anchors for links that jump to other sections of the same page.

    • Creating a hyperlink
    • Working with link styles
    • Using link anchors

    Understanding States and Dynamic Menus
    In this section, we explore some normally sophisticated features where Muse shines in its stunning simplicity: creating buttons with different states or looks, and creating navigation menus.

    • Using the states panel
    • Importing a Photoshop button
    • Creating menus
    • Modifying menus

    Understanding Widgets
    Adding sophisticated functionally for your web site, which without Muse would normally require the use of javscript, becomes a snap. In Muse though the use of plug and play widgets that are provided to you though a Widget Gallery... and as always: no coding required. Learn the basic process of implementing any widget on your site while specifically using some popular widgets to add slide shows and interface elements such as accordion panels that slide open and close, and and tabbed panels.

    • Building accordion panels
    • Setting up tabbed panels
    • Creating pop-up tooltips
    • Creating thumbnail slideshows
    • Creating lightbox slideshows
    • Understanding text form fields
    • Creating a simple formatting
    • Exploring the Muse widget gallery

    Embedding HTML
    There may be circumstances where you may want to display a Google Map or a YouTube video on your site, essentially referencing content created on another site. In these cases, all you need to do is copy and paste the code from those sites into Muse. This section of the class explores this area for these common situations:

    • Understanding arbitrary HTML
    • Inserting a map
    • Embedding videos
    • Working with Twitter
    • Adding a Facebook 'Like' button
    • Embedding an external slideshow
    • Adding a form with JotForm

    Publishing a Site
    After you've created your site on your computer, the last step required to display it on the internet is to publish it to a server. This section will thoroughly cover the process of publishing your site whether it be a hosting company, your own web server, or Adobe's Business Catalyst server.

    • Publishing your site via FTP
    • Publishing your site to Adobe Business Catalyst
    • Updating your site
    • Viewing analytics for your site
    • Working with in-browser editing

    Creating a Mobile Site
    While a site created for viewing on a desktop computer screen can be viewed on a tablet or mobile phone, it's preferable to provide sites explicitly created for these other devices. In this section, we work with Muse to convert a desktop site to versions optimized for tablets or phones:

    • Adding a tablet site
    • Adding a mobile phone site
    • Previewing a mobile site
    • Linking between alternate layouts