Using

MUSE (code name)

Legal notices

Legal notices
For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.

Last updated 8/12/2011

iii

Contents
Chapter 1: Workspace Workspace overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Welcome screen Views Toolbox Panels ....................................................................................................... 2 ................................................................................................................. 2 ............................................................................................................... 4 ......................................................................................................... 4 ................................................................................................................ 5

Control panel

Chapter 2: Muse sites Create a new site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Open an existing Muse site Open a recent site Close a site Save a site Revert a site ............................................................................................ 8 ..................................................................................................... 8

............................................................................................................ 8 ............................................................................................................. 9 ........................................................................................................... 9 .................................................................................................. 9

Export a site as HTML

Chapter 3: Work with pages Create and work with pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Rulers, guides, and the grid overlay Zooming and fitting pages

Chapter 4: Work with rectangles Create a rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Select or adjust a rectangle Cut/copy/paste rectangles Position rectangles Rotate a rectangle Duplicate a rectangle Change rectangle fill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Change rectangle stroke

Change stacking order of rectangles Change rectangle states Add effects to rectangles Round or join corners

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Set rectangles to display at 100% width of the browser window

Chapter 5: Create and edit text Create text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Edit text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Create, apply, and edit character styles Change text case

Paste inline elements into text frames and control text wrapping

Last updated 8/12/2011

USING MUSE (CODE NAME)

Contents

iv

Chapter 6: Work with images Place an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Paste an image from another program Use image as background Duplicate an image Pin an image Resize an image Rotate an image Position an image Set image opacity Crop an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Add effects to an image Place a Photoshop button

Work with the options in the image context menu Use the Assets panel to manage site files

Group objects together to work with them as a single object Chapter 7: Add and edit widgets Add and edit widgets (general instructions) Menu Bars Accordions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Tabbed Panels

Composition widgets Slideshow widgets Insert arbitrary HTML Chapter 8: Preview Preview a page in Muse

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Preview a page in a browser

Preview the entire site in a browser Chapter 9: Publish

Last updated 8/12/2011

Chapter 1: Workspace
Workspace overview
The Muse workspace lets you plan, design, preview, and publish web pages and site assets. The workspace displays multiple documents (pages and Master pages) in a single window with tabs that identify each file. The workspace also places many of the most common operations in toolbars and panels so that you can quickly make changes to your documents. The workspace is an integrated document layout, with panel sets that float on the side (or wherever you drag them on your desktop). Panel groups are docked together in groups. Click a tab to make that panel active; each time you click a tab, the panel group alternately expands and collapses with a toggle behavior.
A E B C D

The Muse Workspace A. Views B. Toolbox C. Document window D. Panels E. Menus F. Control panel

The workspace includes the following elements. Note: More information is available about each of these elements in the sections that follow.
The Welcome screen Enables you to open recent Muse sites or create a new site. Use the links to access tutorials and sample files to get started quickly. Views A Muse site has four views: Plan, Design, Preview, and Publish. The Toolbox Contains tools for creating, selecting, and editing page elements while working in Design view.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Workspace

The Control panel Contains options that let you edit selected objects in Design view. For example, when you select an image in Design view, the editing options for that image appear in the Control panel. Menus Provide access to all standard operations in Muse. Many of the menu items can also be accessed in the

workspace panels. However, some menu items (for example, Save), are only available in the menu or by using the keyboard shortcut.
Panels Help you monitor and modify your work. Examples include the Text panel, the Paragraph Styles panel, and

the Widgets Library panel.

Welcome screen
The Welcome screen appears every time you start Muse from the application executable. (When you open Muse from a saved site file, the site opens without displaying the Welcome screen.)

To disable the Welcome screen, select Dont Show Again and close it. To re-enable the Welcome screen, enable the Show Welcome Screen option in the Muse Preferences.

Views
A Muse site has three views: Plan, Design, and Preview. All views are displayed within the application's Document window. You can switch between any of the views by clicking the Plan, Design, or Preview links in the upper-left corner of the interface. The fourth link, Publish, opens the Sign In window to facilitate the publishing process.

Plan view
Plan view displays your site plan - a map or structure of how your site is organized. This organization is the basis for an automatically populated menu widget, if you add one to the site. Every web page in your site will appear in the Plan view tab. The Plan view tab has a site map icon to the left of the site name. You can use the Plan view to navigate to the pages in your site. You can also add, delete, move, and rename pages in your site as well as modifying page properties. Plan view also displays your Master pagespages that serve as templates to share design elements such as logos, headers, and footers that are common across multiple web pages. Plan view is the default view when you open a Muse site.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Workspace

Muse Plan view A. Site plan B. Master pages

Plan view has three options that you can alter:

Thumbnail Displays a thumbnail image of your web page. Deselect the option if you want to see blank pages in Plan view. Master Badge Displays whether or not a page in your site is based on a Master page. If a web page is based on a Master

page, the Master badge also tells you which Master page its based on. Deselect the option if you dont want to view Master badges.
Size Controls the size of the web page icons (usually thumbnails) in Plan view.

Design view
When you open one of the pages of your website, Muse switches from Plan view to Design view. Design view displays each web page in a tab of the application window. You can open multiple web pages of a site by double-clicking on page thumbnails in Plan view. After opening pages in Design view, use the tools and options in the panels to edit the content of each page.

Muse Design view selected in the Views bar.

See the Workspace overview on page 1 for an illustration of Design view.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Workspace

Preview
Preview displays a preview of your web page as it would appear in a web browser. You can use preview to not only see the layout of your web pages but also test drive interactive features and behaviors designed in Muse as experienced by your users within a browser. You can think of Preview as a browser embedded in Muse. Muse's Preview is powered by the industry standard WebKit rendering engine that powers popular browsers such as Apple Safari, Google Chrome, and most mobile phone and tablet browsers. To Preview a page, open it in Design view and then click the Preview button.

Toolbox
The Muse toolbox is an abbreviated version of the Toolboxes from other Adobe CS5 applications, such as InDesign CS5 and Photoshop CS5.
A B C D E F

Muse toolbox A. Select tool B. Crop tool C. Text tool D. Zoom tool E. Hand tool F. Rectangle tool

Available tools include:

Selection tool Lets you select objects on a web page. Crop tool Lets you crop images that youve placed on web pages. Text tool Lets you create a text area so that you can place text on a page. Zoom tool Lets you zoom in on or out from the page. Hand tool Lets you pan a page by dragging. Rectangle tool Lets you create rectangle objects that can be filled with colors or tiled images. While a rectangle is

selected, you can use the Corners tool in the Control panel to set the corner radius to create circles or rounded corners. The toolbox appears as a single horizontal row of tools. Select a tool from the toolbox by clicking it. The name of the tool and its keyboard shortcut appear as a tool tip when you hover over the tool.

Control panel
The Control panel (Window > Control) offers quick access to options and commands related to the currently selected page item or object. The Control panel is displayed horizontally across the top of Design view and cannot be edited or moved.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Workspace

The Image Control panel

Options displayed in the Control panel vary depending on the type of object you select. As the options in the Control panel change, you can get more information about each option by hovering over an icon or option label with the pointer to view its tool tip.

Panels
In Muse, panel groups float independently from the Document window. You can customize your workspace by manipulating panels.

Move panels
Panels live in the panel dockthe collection of Muse panels displayed together in a vertical orientation. Muse lets you move panels around within the panel dock. As you move panels, you see blue highlighted drop zonesareas where you can move the panel. For example, you can move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. Note: The position of the mouse (rather than the position of the panel), activates the drop zone, so if you cant see the drop zone, try dragging the mouse to the place where the drop zone should be.

To move a panel, drag it by its tab.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Workspace

A B

Narrow blue drop zone indicates Swatches panel will be docked on its own above the Character Styles panel group. A. Panel dock bar B. Panel tab C. Drop zone

Manipulate panel groups

To move a panel into another group, drag the panels tab to the highlighted drop zone in the group.

Adding a panel to a panel group

To rearrange panels in a group, drag a panels tab left or right to a new location in the group.

Resize panels
To minimize or maximize an active panel or panel group, click the active tab to toggle between collapsed and
expanded. To make a background tab active, click its tab. Then, click it again to minimize or maximize it.

To resize a panel, drag the bottom edge of an expanded panel.

Collapse and expand panel icons

You can collapse panels to icons to reduce clutter in the workspace.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Workspace

Panels collapsed to icons

To collapse or expand all panel icons in a column, click the double arrow at the top of the dock. To expand a single panel icon, click it.

Last updated 8/12/2011

Chapter 2: Muse sites

In Muse the term "site" refers to the collection of pages and assets in your website. The design of all the web pages of a site are contained in a single Muse Site file with extension of .muse. This is similar to how an InDesign Document (.indd) contains all the printed pages of your book or document. The .muse file is a local copy of the entire site, including all the pages and related assets (except fonts). After placing files into Muse, the external files are no longer needed-except to enable the Edit Original workflow or facilitate design changes. When you publish a site, Muse only needs the .muse file and any system fonts used in your design. First, create a new Muse site. Next, add pages to the site. Update the pages with content. When you are finished, you publish the site (upload the site files to a host server) to make your site available on the web. You can upload the files to the Business Catalyst servers as a free trial site or upload to a third-party hosting provider. For more information, see Publish on page 46.

Create a new site

1 Choose File > New Site. 2 Specify general page properties for the site and click OK.

Note: The settings you specify in the New Site and Site Properties dialog boxes apply to all pages and Master pages throughout the new site. See Edit page properties on page 12 to learn how to customize properties for individual pages. You can access the Site Properties dialog box at any time by choosing File > Site Properties.

Open an existing Muse site

1 Select File > Open Site. 2 Navigate to the site (.muse file) that you want to open and click Open.

Open a recent site

Choose File > Open Recent and select the recent site that you want to open.

Close a site
Choose File > Close Site, or click the close icon (x) in the Plan view tab

Last updated 8/12/2011

USING MUSE (CODE NAME)

Muse sites

Save a site
Choose File > Save.

Note: An asterisk in a site's plan tab indicates the Muse site file contains unsaved changes.

Revert a site
The Revert Site option lets you revert to the last-saved version of your site.
Choose File > Revert Site.

Export a site as HTML

You can export your site to output HTML, CSS, and JavaScript files to upload the site to a hosting provider other than the "Publish to Adobe Business Catalyst" workflow integrated with Muse. Note: Once you have edited a page outside of Muse, you cannot bring it back into Muse for editing.
1 Choose File > Export to HTML. 2 Click the Directory button to navigate to and select the location where you would like to save the exported HTML

files, and then click Export.

Last updated 8/12/2011

10

Chapter 3: Work with pages

Create and work with pages
About pages and master pages
You create new pages in Plan view. Muse lets you work with two kinds of pages: master pages, and regular web pages. A master page is a page upon which other pages in your site depend for their design. For example, if you create a master page with a blue background, a navigation bar, and a central illustration, any page to which you apply the master will contain those elements. A master page is essentially a template that you use to maintain consistency across the pages in your website. You can use one master page throughout your website, or create multiple master pages and apply them individually to other pages. When you make changes to master pages, all pages based on the master reflect those changes. 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.

About page sizes

Pages in Muse have a fixed width but are dynamic in height. You set the header and footer region of each page using the page guides. The final rendered height of each page is determined either by the minimum height or the length of the content added to the page region. Pages will expand to display the content added to each page, so a site may display pages of varying heights. For more information, see Rulers, guides, and the grid overlay on page 14.

Create a new web page

You can create two types of basic pages: sibling pages and child pages. Sibling pages are pages that share the same parent page; in the case of top level pages (like the Home page), all top level pages are siblings. Child pages appear below (and are usually linked from) a particular page on a level of the site's organization. Any page on any level of the site plan can have sibling pages or child pages.

Create a sibling page

1 In Plan view, hover over any page thumbnail until you see the plus signs appear at the left or right side of the page.

Alternatively, you can also right-click (Control-click) on a thumbnail of a page and choose New Sibling Page from the context menu that appears.
2 Click either the plus button to the right or left of the page. 3 Type a title for the new page and press Enter (Windows) or Return (Mac OS).

Create a child page

1 In Plan view, hover over any page thumbnail until you see a plus sign appear at the bottom of the page.

Alternatively, you can also right-click (Control-click) on a thumbnail of a page and choose New Child Page from the context menu that appears.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with pages

11

2 Click the plus button at the bottom of the page. 3 Type a title for the new page and press Enter (Windows) or Return (Mac OS).

Create a new Master page

1 In the Masters area of Plan view, hover over any Master page until you see the plus signs appear to the left and right

of the page. You can also right-click (or Control-click) on the thumbnail of an existing Master page and choose the option New Master Page from the context menu that appears. Note: Master pages cannot have child pages.
2 Click the plus button to the left or right of the page. 3 Type a title for the new page and press Enter (Windows) or Return (Mac OS).

Create a duplicate page

In Plan view, either Alt-drag (Windows) or Option-drag (Mac) an existing page thumbnail or right-click (Control-

click) a page thumbnail and choose the option Duplicate Page from the context menu that appears.

Apply a master page to a web page

Drag a master page from the Masters area to a web page in the Document window.

If the Master Badge checkbox is enabled in Plan view, you'll see the title of the Master page applied to the page. If you set the Master page to None, the page properties that were specified in Site > Properties are reset.

Open, save, or close a page

1 To open a page for editing, double-click the page in Plan view.

Muse opens the page for you in Design view.

2 To save the recent changes made to the site, choose File > Save. 3 To close the page, click the close icon (x) on the pages tab.

Note: An asterisk in a site's Plan tab indicates the Muse site (.muse file) contains unsaved changes.

Delete a page
1 In Plan view, hover over the page you want to delete until the delete icon (x) appears in the upper-right corner of

the page.
2 Click the delete icon.

Rename a page
In Plan view, double-click the page title (below the page), and type the new page title.

Rearrange pages
In plan view, drag a page to a different place in the site plan (for example, to the right of another page). When you

see the blue drop zone, release the mouse.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with pages

12

Edit page properties

It's important to understand the relationship between page properties specified under Site Properties, properties of Master pages, and regular pages. Master pages inherit their properties from the settings in the Site Properties. Regular pages inherit their properties from the Master page that is applied. If a regular page has a None master applied, it inherits its properties from the Site Properties settings. To modify the page properties for all pages and masters in your site, choose File > Site Properties. Every regular page also inherits the properties of its applied Master page. Choosing Page > Page Properties allows you to customize each page that differs from settings inherited from its applied Master page or Site Properties.
1 In Plan view, double click the page whose properties you want to edit. 2 In Design view, choose Page > Page Properties. 3 Edit page properties as appropriate. There are two categories: Layout and Metadata.

In the Layout category, the following options are available. All units are in pixels.
Page Width Adjusts the width of the page. Minimum Height Adjusts the height of the page.

Note: Muse supports dynamic page height based on page content. The Minimum page height setting defines the minimum height of any page in the site.
Center Horizontally Centers the page horizontally in a browser. If this option is not enabled, the page is left aligned

in the browser.
Columns Specifies the number of vertical columns on your page. Columns are a useful design aid. You can create

a grid of columns and snap objects to the grid as you layout your pages.
Column width Specifies the width of each column. Gutter Specifies the space between columns. Margins Defines a safe area of the page to layout page content. Objects snap to the margin guides as you layout your page. Margin settings do not enforce any content rules. Margins, columns, and gutters in Muse are similar to margins and columns used when designing layouts in InDesign.

You can hide margin and column guides by choosing View >Hide Guides.
Padding Determines the space (in pixels) between the edges of the browser window, and the edges of your web page. Favicon image Lets you choose an image to display as an icon in the browser address bar or bookmark when the page loads in a browser. The favicon must be a square image. Click the folder button to browse and select a favicon. Click the trash can button to delete the favicon.

A favicon image

Include Page in Navigation Includes the page in any Menu widgets you add to the page. For more information on

working with widgets, see Add and edit widgets on page 34.
Export page Includes the page when you publish your site or export the site to HTML.

In the Metadata category, the following options are available.

Description Specifies the description of your page.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with pages

13

Keywords Specifies the keywords for your page.

Note: The Description ad Keywords settings are used for Search Engine Optimization tuning.
Page Name Is the name of the page as it appears in Muse Page Title Is the title of the page that appears in the browser. Select the Same as Page Name option if you want Muse

to use the page name for the page title as well. (Its the default selection.) Setting a descriptive page title may benefit Search Engine Optimization.
File Name Is the name of the file that will load in a browser. Muse appends the .html file extension to the file name

by default. Select the Same as Page Name option if you want Muse to use the page name for the file name as well. (Its the default selection.)

Reset page properties

You can use the Reset button to reset the page properties to those specified by the Master page applied to the page. Choosing Reset from the page properties of a Master page resets its properties to the default settings specified under Site Properties. The Reset button is enabled only if a regular page's properties differ from those applied to the Master page, or if a Master page's properties differ from the default settings applied to Site Properties.

Links
Create a link to a page in your site
1 Select the element that you want to link (for example, a word, an image, a rectangle, and so on). 2 In the Control panel click the Hyperlink pop-up menu and select the destination page from the list. Clicking the

Hyperlink menu in the Control panel allows you to set the defined hyperlink to open a new browser window.

Create a link to an external web page

1 Select the element that you want to link (for example, a word, an image, a rectangle, and so on). 2 In the Control panel, click inside the Hyperlink text box. 3 Type the destination URL (for example http://www.adobe.com) and press Enter (Windows) or Return (Mac OS).

Create a link anchor

A link anchor is a specific location on a web page to which you want to link. For example, if you have a list of text links at the top of the page, you can create link anchors for each item in the list. When a user clicks one of the links in the list, the page smoothly scrolls to the corresponding topic on the page. You can also create links from one page to a link anchor on another page; links to other pages jump directly and don't use the smooth scrolling behavior.
1 In Design view, click the Link anchor button

in the Control panel.

2 Use the link anchor placer tool to click the page at the location where you want to place the link anchor. 3 Enter a name for the link anchor in the Rename an Anchor dialog box. 4 To link to the link anchor, select the text, image, or object that you want to link, and then select the appropriate link

anchor from the Hyperlink option in the Control panel.

5 (Optional) To hide link anchors in the work area, choose View > Hide Link Anchors.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with pages

14

Create an email link

1 Select the element that you want to link (for example, a word, an image, a rectangle, and so on). 2 In the Control panel, click inside the Hyperlink text box. 3 Type the email address in the format: mailto:[email protected].

Style links
1 Choose File > Site Properties. 2 Click the Hyperlinks button.

If this is your first time setting link styles, youll see one default link style listed: Link Style. This is designed as a placeholder for your first custom link.
3 Select a link style in the links list and make your edits. For example, select Link Style, and select different colors for

the different states of the link. Your changes will be saved when you click OK and close the dialog box, and you will be able to apply the custom style to any link on any page, just as you would apply any character style to text.
4 To rename a style, double click it to make it editable. 5 To add a new link style to the list, click the New Link Style button (next to the trash can icon). 6 To delete a link style, select it and click the trash can icon.

Note: The link style setting is a paragraph attribute. All links in a single paragraph use the same link style appearance. Also, link styles can be included in paragraph styles. If a paragraph includes one or more links, those links will be styled using the link style from the paragraph style.

Rulers, guides, and the grid overlay

By default Muse displays rulers along the top and left side of the workspace. Muse also displays five guides that define the page size, the header, and the footer. The purpose and functionality of the different guides are described below. You can also hover over guides along the left side of the workspace to see a tooltip about the purpose and functionality of each guide.

Page guides
The top (first) and two bottom (fourth and fifth) guides help you determine your overall page size. Drag the first guide up, or the fourth guide down to extend the content area of your page.
To show/hide page guides, choose View > Show/Hide Guides.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with pages

15

Muse page guides

Header and footer guides

The second and third guides on the page define the bottom of your header and the top of your footer, respectively. Drag the second guide down to increase the height of the header. Drag the third guide down to lower the position of your footer on the pageyou may also need to drag the fourth guide down to create more space for your footer.
To show/hide header and footer guides, choose View > Show/Hide Header and Footer.

Note: The header and footer guides can only be moved on Master pages. On normal pages, the header and footer guides are displayed for visual reference, but they cannot be dragged to a new location.

To show or hide rulers

Choose View > Show/Hide Rulers.

To show or hide the grid overlay

Choose View > Show/Hide Grid Overlay.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with pages

16

Zooming and fitting pages

Zoom using the zoom tool
1 Make sure you are in Design view. 2 Click the Zoom tool in the Toolbox. 3 Click on the page to zoom in. 4 To zoom back out, Alt-click (Windows) or Option-click (Mac OS) the page.

Zoom using keyboard shortcuts

To zoom in, press Control (Windows) or Command (Mac OS) + the equal/plus sign. To zoom out, press Control (Windows) or Command (Mac OS) + the minus sign.

Fit page to window

When you fit a page to a window, the page resizes to the dimensions of your workspace.
Choose View > Fit Page to Window.

You can also use the same keyboard shortcut used by CS5.5 applications: Command+zero.

Make page actual size

If youve been zooming a lot, or changing the dimensions of your page in the workspace, you can always return the page to its actual size.
Choose View > Actual Size.

You can also use the same keyboard shortcut used by CS5.5 applications: Command+1.

Last updated 8/12/2011

17

Chapter 4: Work with rectangles

Rectangles are the basic building blocks of a Muse page. You can use the shapes as layout objects (with applied fill color and/or stroke color) to define page sections. Rectangles can also be filled with background images. The corners of a rectangle can be rounded by updating the corner radius settings in the Control panel. If desired, you can round the corners of a rectangle to make a circular shape. Many other objects in Muse, such as images, text frame, and widgets, behave like rectangles. For example, if you want to add a drop shadow to a rectangle or image, the procedure is the same for both. Note: Just like InDesign, you can convert a rectangle into a text frame by double-clicking on it with the text tool.

Create a rectangle
1 Make sure you are in Design view by double-clicking a page to open it. 2 Click the Rectangle tool in the toolbox at the top of the workspace. 3 Drag across the web page to draw the new rectangle. The rectangle remains adjustable (with resize handles) until

you click somewhere else to draw another rectangle. You can resize the still-adjustable rectangle by pressing Control (Windows) or Command (Mac OS) until you see the Pointer tool, and then dragging from the resize handles.
4 To delete a rectangle, select the rectangle and press Delete on your computer keyboard.

Select or adjust a rectangle

1 In Design view, click the Pointer tool in the toolbox at the top of the workspace. 2 Click the rectangle you want to select.

When you select a rectangle, its dimensions become adjustable. To adjust the rectangles dimensions, drag any of the resize handles on the selected rectangle. You can also adjust a selected rectangles dimensions by specifying exact width and height properties in the Control panel. Additionally, you can enter simple arithmetic in the edit boxes and Muse will calculate the sums.
3 To constrain the proportions of a rectangle as you are drawing or resizing it, press and hold the Shift key to create

a square.
4 To select/deselect all rectangles on a page, choose Edit > Select All/Deselect All.

Note: Select All/Deselect All selects or deselects all objects on a page, not just rectangles.

Cut/copy/paste rectangles
1 In Design view, select a rectangle (or rectangles).

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with rectangles

18

2 Cut, copy, paste, or paste in place by choosing the appropriate option from the Edit menu. Paste in place is helpful

when you want to ensure an image is placed in the same exact location while moving it from one page to another. Note: The keyboard shortcuts for these actions are also listed in the Edit menu.

Position rectangles
In Design view, do one of the following:

Select a rectangle and drag it anywhere on the page. Select a rectangle and set its precise X and Y coordinates in the Control panel.
Press and hold the Shift key to constrain the movement to vertical or horizontal.

Rotate a rectangle
1 In Design view, select the rectangle you want to rotate. 2 Increase or decrease the rotation angle in the Control panel. (The Rotation Angle option is the right-most option

in the Control panel.) You can also hover near the corner of a rectangle until you see the rotation icon, and then rotate the rectangle manually.

Duplicate a rectangle
1 In Design view, select the rectangle you want to duplicate. 2 Choose Edit > Duplicate.

Alternatively, you can either Option+drag to create a duplicate copy or Option+Shift+drag to create a duplicate that remains in alignment horizontally or vertically with the original rectangle.

Change rectangle stroke

1 In Design view, select a rectangle. 2 Change the stroke color of the selected rectangle by clicking the Stroke color picker in the Control panel, and then

selecting a stroke color. You can specify RGB values, a hexadecimal value, or use the eye-dropper tool to select a color from the color field, or from another area on the web page. You can create a new color swatch in the Swatches panel by clicking the New Swatch icon (next to the trash can icon in the lower right corner of the color picker) after specifying a new color.
3 Change stroke width by increasing or decreasing the number in the Stroke width box (to the right of the color

picker).
4 Click the Stroke menu (the word Stroke in the Control panel) to specify the following additional options:
Align Aligns the stroke to the center, inside, or outside of the rectangle.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with rectangles

19

Stroke widths Lets you specify the width of the top, bottom, left, and right strokes individually. To ungroup strokes, click the link icon. Strokes are ungrouped when the link looks broken.

Change rectangle fill

1 In Design view, select a rectangle. 2 Change the fill of the selected rectangle by clicking the Fill color picker in the Control panel, and then selecting a

fill color. You can specify RGB values, a hexadecimal value, or select a color from the color field, or from another area on the web page. You can create a color swatch by clicking the New Swatch icon (next to the trash can icon in the lower right corner of the color picker) once you've specified the color. Double-clicking on a swatch in the Fill color picker allows you to assign a friendly name to a color, such as Headline Blue. Once defined, the friendly name is displayed as a tool tip when you hoover your cursor over the color swatch you named.
3 Click the Fill menu (the word Fill in the Control panel) to specify the following options for solid fills:
Opacity Sets the opacity of the background color Color Sets the fill color. (The color picker is identical to the one you access from the Control panel.) Image Lets you navigate to and select an image to use as a background. Fitting Lets you fit the image within the rectangle according to a number of options, including Scale to Fill, Scale to Fit, and a number of tiling options.

Note: When you set the Fitting option to Tile, the background image used as a fill creates a tiled graphic element without ballooning download times. Tiled images are only downloaded and cached by a browser once, even though they may be repeatedly displayed on pages of the live site.
Position Positions the background image inside the rectangle relative to your selection.

4 Click the Fill menu (the word Fill in the Control panel) to specify the following options for gradient fills:
Opacity Lets you specify the opacity at both ends of the gradient. Color Lets you specify the initial gradient color, and the color into which your gradient blends. Focal Point Specifies the location in the background color where the gradient begins. The default is 50% (midway). Direction Specifies the direction of your gradienthorizontal or vertical. Size Lets you specify the blending size of your gradient. Automatic creates a gradient that spans from the start color to the end color to fit the height or width of the object the gradient is filling. If you enter a pixel value, the gradient spans from the start color to the end color within the specified number of pixels.

Change stacking order of rectangles

When you create multiple rectangles on a page and begin moving them around, you'll notice that some rectangles appear on top of others. This is because when you create rectangles, Muse creates them with a stacking order. You can easily change the stacking order of rectangles to bring them forward or move them backward in relation to other objects.
1 To bring a rectangle forward in the stacking order, select the rectangle and choose Object > Bring Forward.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with rectangles

20

2 To move a rectangle backward in the stacking order, select the rectangle and choose Object > Send Backward. 3 To bring a rectangle to the top-most level of the stacking order, select the rectangle and choose Object > Bring to

Front.
4 To move a rectangle to the very bottom of the stacking order, select the rectangle and choose Object > Send to Back.

Change rectangle states

A state is the appearance of a rectangle on a web page. States can change with user interaction. For example, if a user rolls over a rectangle with the mouse pointer, a rectangles background color might change from red to blue.
1 In Design view, select the rectangle whose state you want to change. 2 In the States panel (Window > States), change states as necessary by selecting the appropriate state and adjusting

the appearance of the rectangle.

Normal Specifies the default appearance of the rectangle when the web page loads in the browser. Rollover Specifies the appearance of the rectangle when the user rolls over the rectangle with the mouse pointer. Mouse Down Specifies the appearance of the rectangle when the user clicks it. Active (Normal) Specifies the appearance of the rectangle when the user has activated a particular page. This option

is normally specified for Menu Bar widgets and Tabbed Panel widgets. For example, when a user is on a products page, the Products item in a Menu Bar widget might register a separate color to denote that the user is on that (active) page.
3 Click Preview to test your states as theyll appear in a browser.

Add effects to rectangles

You can add effects such as drop shadows, bevels, and glows to a rectangle (or any other object, such as an image, in Muse).

Add a drop shadow

1 In Design view, select the rectangle to which you want to add a drop shadow. 2 In the Control panel, click the Effects menu. 3 Click the Shadow category, select On, and set options as necessary.
Color Specifies the drop shadows color. Opacity Specifies the drop shadows opacity. Size Specifies the size (i.e. thickness) of the drop shadow. Angle Specifies the drop shadows location in relation to the rectangle. A 45-degree angle (the default) positions

the drop shadow around the right and the bottom edges of the rectangle. Adjusting the drop shadow to higher degrees moves the drop shadow around the rectangle.
Distance Specifies the distance between the drop shadow and the rectangle (i.e. the appearance of the space

between the drop shadow and the rectangle).

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with rectangles

21

Add a bevel
1 In Design view, select the rectangle to which you want to add a bevel. 2 In the Control panel, click the Effects menu. 3 Click the Bevel category, select On, and set options as necessary.
Opacity Specifies the bevels opacity. Size Specifies the size (i.e. thickness) of the bevel. Angle Specifies the bevels location in relation to the rectangle. A 45-degree angle (the default) positions the bevel

around the right and the bottom edges of the rectangle. Adjusting the bevel to higher degrees moves the bevel around the rectangle.
Distance Specifies the distance between the border of the rectangle and the faded edge of the bevel.

Add a glow
1 In Design view, select the rectangle to which you want to add a glow. 2 In the Control panel, click the Effects menu. 3 Click the Glow category, select On, and set options as necessary.
Color Specifies the glows color Opacity Specifies the glows opacity. Size Specifies the size (i.e. thickness) of the glow. Inner Glow Lets you switch the location of the glow from the outside of the rectangle (the default) to the inside of the rectangle.

Round or join corners

1 In Design view, select the rectangle whose corners you want to round or join. 2 Round corners by selecting top left, top right, bottom left, or bottom right corners from the Corners option in the

Control panel. The default rounding radius is 10. You can increase or decrease the radius accordingly.
3 Join corners by clicking the Corners menu (the word Corners in the Control panel) and specifying the type of join

edge you want. You can choose from miter, round, and bevel. The specified join applies to the stroke of the selected rectangle.

Set rectangles to display at 100% width of the browser window

When you draw rectangles with the Rectangle tool, you generally define the dimensions of the shape by either dragging the transformation handles or entering numeric values in the width and height fields of the Control panel while the rectangle is selected.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with rectangles

22

However, you can also set a rectangle shape (which may be filled with a solid, gradient, or image background fill) to display at 100% of the browser window. In this case, the rectangle will resize to fill the page no matter how wide the visitor resizes their browser window.
1 Use the Rectangle tool to draw a rectangle on the page. 2 While the rectangle is selected, use the editing tools (such as the Fill and Stroke menus) to update the appearance

the rectangle. Note: If you set a tiled background image fill, the tiled image will tile seamlessly to expand as needed to fill the 100% width of the page.
3 Use the Selection tool to drag both the left and right sides of the rectangle to align them with the two left and right

edges of the entire page width. The rectangle will span the entire horizontal width of the page. As you drag each side edge of the rectangle to align it with the left and right edges of the page, the corresponding edge briefly displays a red highlight and the rectangle snaps into place. Make sure that both sides of the rectangle are aligned with the page's sides. You can use the Zoom feature to magnify the page temporarily to ensure that the two sides of the rectangle are aligned with the two sides of the page.

Setting a tiled background image fill to expand to 100% of the page width.

Tiled images have the additional benefit of improving site performance; the browser only downloads and caches an image file once when the live site is displayed. You can use tiled images to cover large areas of the screen quickly and efficiently. Tiled images are ideal to use as fill background images for rectangle shapes that will display at 100% of the page because the image will tile as needed to span the width of the page, no matter how small or large.

Last updated 8/12/2011

23

Chapter 5: Create and edit text

Create text
You create text on a Muse page by first creating a text frame, and then adding text to the text frame.
1 In Design view, click the Text tool in the Toolbox. 2 Click and drag on the page to create the text frame. 3 Add your text to the text frame.

You can place a TXT file (such as pagecontent.txt) the same way you place images by selecting File > Place in the menu. You can also copy text to your clipboard, and then paste it on a page in Muse. Muse detects that the pasted content is text and automatically creates a text frame. Text frames behave like rectangles. You can select them, resize them, add background colors to them, round their corners, and so on. If you create a text frame on top of a rectangle, the rectangle resizes for you as you add text to the text frame. This feature ensures that web pages created by Muse automatically grow vertically to adapt to changes in content, fonts, and font sizes. For more information on what you can do with text frames, see Work with rectangles on page 17.

Edit text
1 In Design view, make sure you have the Text tool selected. 2 Select the text that you want to change. 3 Make edits as necessary using the text options in the Control panel or the Text panel (choose Window > Text).

While a text frame is selected with the Selection tool, you can click the Text tool to switch the Control panel to text editing mode and access the controls to edit the text attributes for the selected text. The following options are available:
Font Lets you select a font from a list of web safe fonts (that will remain in HTML and be selectable by web users) or from a list of system fonts that Muse exports as an image.

When you select a font that Muse will export (or rasterize) as an image, a text-image indicator icon If you want to hide the icon in your work area, choose View > Hide Rasterized Text Frame Indicators. Note: Text exported as image files are not selectable or resizable when viewed in browsers.

appears.

Font size Lets you specify the size of the font. You can select a font from the predefined font list, or enter a specific font by typing. The font size is measured in pixels. Bold/Italic/Underline Bolds, italicizes, or underlines the selected text. Align Offers four alignment options: left, center, right, and justify. Color Lets you specify the text color. You can specify RGB values, a hexadecimal value, choose an existing color swatch or use the eye-dropper tool to select a color from the color field, or from an area on the current page. You can also save a new color swatch by clicking the New Swatch icon (next to the trash can icon in the lower right corner of the color picker) once youve specified the color.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Create and edit text

24

Letter Space Increases or decreases the spacing between letters of the selected text. Letter spacing is often referred

to as tracking when applied to a range of text.

Leading Increases or decreases the spacing between lines of selected text. If one line of text is selected, changing the

leading will change the spacing above and below that one line. Leading is a paragraph attribute, so changes in leading will effect all the lines in the paragraph(s) within the selection. The leading field accepts either percentage values (a percentage of the font size) or pixel values. A number with a % suffix is treated as a percentage. A number without a % suffix sets a pixel value.
Paragraph style Lets you select a predefined paragraph style to apply to text. Define Paragraph styles to format the

text content on your site efficiently and consistently. Select styled text to add a new Paragraph style, and then click the New Paragraph style icon at the bottom of the Paragraph styles panel. Enter a descriptive name for the styles you create. Capitalization is not included when saving Paragraph style attributes. Note: In most cases, you'll use Paragraph styles to apply text formatting, because they include the formatting attributes applied to lines of text, such as leading. Only use Character styles to highlight specific terms and phrases that need special emphasis.
Character style Lets you select a predefined character style to apply to text.

The following additional options are available in the Text panel (Window > Text):
Indent Indents the first line of the selected text. (You can specify negative indenting as well.) Links Lets you style text with a predefined link style. For more information, see Style links on page 14. Left/Right margin Indents the left or right margins of the selected text (similar to padding). Space before/after Specifies the amount of space before or after the selected paragraph.

Create, apply, and edit character styles

A character style is a saved set of style definitions that you can apply to other blocks of text. For example, if you create a chunk of text that is Arial, 14-pixels, and blue, you can save this style as a character style, and then apply it to other blocks of text as a character style.
1 In Design view, edit text until it reaches the desired appearancefor example, set the font, font size, and color that

you would like to save as a character style.

2 In the Character Styles panel (Window > Character Styles), click the Create New Styles button in the lower right

corner.
3 Rename the new style by double-clicking it and entering a descriptive name in the text box. 4 Once youve created a character style, you can apply it to other unstyled text. To do so, select the text you want to

style and click a character style in the Character Styles panel.

5 To edit a character style, select the style in the Character Styles panel, make your edits, and click the Redefine

Selected Styles button in the lower right corner of the panel.

6 To de-link text from a particular character style, select the text and click the Unlink Style button in the lower right

corner of the Character Styles panel. Use the context menu when working with Paragraph styles and Character styles. You can right-click (or Control-click) on an item in the Paragraph style panel and the Character style panel to access a context menu with additional options pertaining to each style. Choose from the following options:

New Paragraph Style Last updated 8/12/2011

USING MUSE (CODE NAME)

Create and edit text

25

Duplicate Style Delete Style Unlink Style Clear Overrides Redefine Style Style Options Identify Unused
The only way to modify a Paragraph or Character style is to apply text formatting to text and then choose the Redefine Style option in the context menu. Style Options for character and paragraph styles allow you to specify the HTML tag to use to specify hierarchical HTML tag headers (that display H1 tags at the top, then H2, then H3, etc.)

The Paragraph Styles context menu

Change text case

1 In Design view, make sure you have the Text tool selected. 2 Select the text whose case you want to change. 3 Choose Edit > Change Case > UPPERCASE/lowercase.

Paste inline elements into text frames and control text wrapping
You can display elements inline with text, by pasting items inside text frames and then applying wrap settings to define how the text wraps around the inline item. Use the selection tool to select and then copy (Edit > Copy) a rectangle, textframe, or image. Then, use the Text tool to define a text insertion point in a text frame. Paste the element you copied previously (Edit > Paste) to insert the object as an inline element in the text frame. Use the Selection tool to select inline elements and use the Wrap options in the control panel or the wrap menu on the Control strip to modify how the text is wrapped around the selected inline element. Choose between the following wrap options:

Inline in text Position left

Last updated 8/12/2011

USING MUSE (CODE NAME)

Create and edit text

26

Position right
Enter numeric values to set the amount of offset (padding) around the inline element. You can also use the selection tool to move the object up or down within the text frame.

Positioning elements inline

Last updated 8/12/2011

27

Chapter 6: Work with images

In Muse, images behave like rectangles. If you want to do something to an image and dont see the procedure listed here, check the Work with rectangles on page 17 documentation.

Place an image
1 In Design view, choose File > Place. 2 Navigate to and select the image(s) you want to place and click Open (Windows) Select (Mac OS). (You are allowed

to select multiple images.)

3 Use the Place Gun to place the image or images on the page. If you selected multiple images as you "loaded" the gun,

click the same number of times to place each image on the page one-by-one. The Place Gun displays a small representation of the top image to be placed (the next image that will be placed at the desired location when the Place Gun is clicked). A single click will place the top image at original size (100%). Click+drag to place the image and resize it to the dimensions of the dragged rectangle. Muse will indicate the percentage scale of the placed image in a tool tip as you are resizing the current image.

Paste an image from another program

1 In another program, such as Adobe Photoshop, copy an image using the appropriate menu option, or by using

Control-C (Windows) or Command-C (Mac OS) on your computer keyboard.

2 Open a web page in Muse Design view and paste the image by choosing Edit > Paste, or by using Control-V

(Windows) or Command-V (Mac OS) on your computer keyboard.

Use image as background

To use an image as a background for an object or a page, youll need to set the object or pages fill as an image. For more information, see Change rectangle fill on page 19.

Duplicate an image
Alt-drag (Windows) or Option-drag (Mac OS) the image. Alternatively, choose Edit > Duplicate.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with images

28

Pin an image
A pinned image sticks to its location in relation to the browser, rather than a location in relation to the other elements on the page. When you use the Pin tool to pin an image to a specific location, you are essentially removing the image from the flow of the rest of the page. As a result, the pinned image appears to float in a fixed location as the user scrolls the page in the browser.
1 In Design view, select the image you want to pin. 2 In the Control panel, click a position in the Pin tool to specify how you want to pin the image in relation to the

browser. Selecting the top-center pin will pin the image in relation to the top-center of the browser. Selecting the bottom-right pin will pin the image in relation to the bottom-right of the browser, and so on.

Resize an image
1 In Design view, click the image to select it. 2 Drag the resize handles to adjust the images width or height. Alternatively, you can set precise width and height

sizes using the Width and Height options in the Control panel.

Rotate an image
1 In Design view, select the image you want to rotate. 2 Increase or decrease the rotation angle in the Control panel. (The Rotation Angle option is the right-most option

in the Control panel.) Alternatively, you can hover over the corner of the image until you see the rotation icon, and then rotate the image manually.

Position an image
1 In Design view, select the image you want to position. 2 Drag the image to the appropriate position. Alternatively, you can set precise X and Y coordinates for the image

using the X and Y options in the Control panel.

Set image opacity

To set an images opacity (or transparency), select the image in Design view, click the Opacity pop-up in the Control

panel (between the Effects and Hyperlink options), and adjust the opacity slider. Alternatively, you can specify an exact opacity by clicking in the Opacity edit box and entering a number. You can also change just the fill opacity, if desired.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with images

29

Add effects to an image

You can add effects such as drop shadows, bevels, and glows to an image (or any other object, such as a rectangle, in Muse). For more information, see Add effects to rectangles on page 20.

Crop an image
1 In Design view, select the image you want to crop. 2 Click the Crop tool in the Tools panel. 3 Drag any of the resize handles inward to crop the image. 4 (Optional) Hover over the image until you see the circle icon at the center of the image. You can grab the circle and

move the full image around to reposition it within the cropped mask.

Repositioning an image within a cropped mask

Note: You can also crop images using the Selection tool by pressing and holding the Command key while dragging the handles on the image frame. Or, select the image within an image frame by double-clicking when the image frame is selected. While the image frame is selected, resize or reposition the image within its frame.

Cropping images with the Selection tool

Place a Photoshop button

1 In Design view, choose File > Place Photoshop Button.

Note: A Photoshop button is a specially prepared file containing layers that represents each button states. For example, the artwork is placed on four layers and the layers are named: Up, Down, Over, Normal (Active). As you place the Photoshop button in Muse, Muse allows you to associate each Photoshop layer with each respective object button state in Muse. Using this strategy, you match up the graphic states of the button to define the rollover effect and the appearance of the button as it is clicked.
2 Navigate to and select the Photoshop button (PSD file) you want to place and click Open (Windows) or Select (Mac OS).

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with images

30

Work with the options in the image context menu

Right-click (or Control-click) an image on the page to see the context menu appear. The following options are available:
Arrange Sets the stacking order of the selected image to display it above or below the other elements on a page. Fitting This option has two choices: Fit Content Proportionately and Fill Frame Proportionately. The Fit Content Proportionately setting scales the image to retain its aspect ratio within the display area. The Fill Frame proportionately setting crops the image (if needed) to ensure that the display area is completely filled. Edit Original If you have the master source image file on your machine, (such as a Photoshop PSD file or a Fireworks

PNG file), you can choose Edit Original and make changes to the master version of the file, to keep both copies in sync. This round trip editing feature is not available if the image was copied and then pasted into a page.
Add Alternative Text To improve accessibility and Search Engine Optimization, you can enter a text description for

each image file that can be read by screen reader utility programs. Add Alt Text tags to your images to make your site more accessible for everyone. The alternative text will appear in place of the image if the image file cannot be shown.

The Image context menu

Use the Assets panel to manage site files

Access the Assets panel by choosing Window > Assets. Right-click (or Control-click) on file names in the Assets panel to see the context menu appear. The menu contains the following options:
Relink All Instances Lets you reconnect assets that have been moved after they were placed on pages. Use the Relink

window that appears to navigate to the file and select it, to specify its new location to Muse.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with images

31

Embed Link Adds a link icon (as shown in the gallery-tea.jpg asset in the screenshot below) with the path to the asset's location on the local computer. The link will look similar to this format: /Users/UserName/Documents/Muse/assets/site_folder/image.jpg. Edit Original If you have the master source image file on your machine, (such as a Photoshop PSD file or a Fireworks

PNG file), you can choose Edit Original and make changes to the master version of the file, to keep both copies in sync. This round trip editing feature is not available if the image was copied and then pasted into a page.
Reveal in Finder Opens the File Explorer (Windows) or Finder (Mac) and displays the folder that contains the site's

assets to make it easy to locate a specific file.

Copy Full Path Copies the path to the asset's location on the local computer to your clipboard.

Note: A similar panel in InDesign is called the Links Panel.

The Assets panel and the Assets context menu

Group objects together to work with them as a single object

You can group multiple selected objects (including images, rectangles, and text frames) as a single group to make it easy to control the placement of a set of items on a page.
1 Use the Selection tool to select two or more objects. 2 Right-click (or Control-click) and choose the Group option from the context menu. Or, choose Object > Group (or

press Command+G).

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with images

32

Grouping objects

Once a set of objects is grouped, a bounding box encircles the entire group. To ungroup the objects, right-click (or Control-click) and choose the Ungroup option from the context menu that appears. Alternatively, choose Object > Ungroup (or press Shift+Command+G).

Last updated 8/12/2011

USING MUSE (CODE NAME)

Work with images

33

Ungrouping objects

Last updated 8/12/2011

34

Chapter 7: Add and edit widgets

Add and edit widgets (general instructions)
Widgets are reusable building blocks of interactivity and behavior that are completely customizable. Widgets such as menus, panels, and slideshows provide an easy way of adding interactivity to your web page. Following are general instructions for working with widgets. For specific information on customizing each widget, see the widgets Help topic.

Open the Widgets Library panel

Select Window > Widgets Library.

Add a widget to a page

1 In the Widgets Library panel, expand the widget category youre interested in. 2 Select the desired widget from the widget list and drag it to the page in Design view.

Edit a widget
Set widget options
1 In Design view, select the widget with the Selection tool. While it is selected, the Selection Indicator in the top left

corner of the Control panel displays the word: Widget.

2 Click the blue circle icon

to open the Widget Options menu.

The settings vary, depending on the widget you are editing. The settings enable you to update both the appearance of widgets (define which elements of a widget are displayed) as well as control the behavior of widgets.
3 After updating the settings, click away from the Widget Options menu to close it.

Format widgets
1 In Design view, select the widget with the Selection tool. The Selection Indicator displays the word Widget when it

is selected.
2 While the widget is still selected, click again to drill down to select the containers and text frames that are sub-

elements of the widget. The Selection Indicator displays the name of the currently selected element. While sub elements are selected, you can edit the contents of that element. For example, drill down to select the text label in a widget, and then use the Text tool to enter a different label for a panel or button.
3 While sub-elements of a widget are selected, you can also insert images, rectangles and text into the containers of

widgets to populate them with content. Use the transformation tools of the widget sub-elements and the widget itself to resize and move the widget and its components as desired.

Style widget appearance

1 In Design view, select the widget with the Selection tool. The Selection Indicator displays the word Widget when it

is selected.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

35

2 Use the Fill and Stroke menu options to update the appearance of the widget itself. You can also choose to fill a

widget with a background image that is either displayed at 100% or is tiled to fill the widget.
3 After editing the widget, (while the widget is still selected) click again to drill down to select the containers, text

frames and other sub-elements of the widget. The Selection Indicator displays the name of the currently selected element. While each sub element is selected, edit the element using the Fill and Stroke menus. You can also use the States panel (as applicable) to format the appearance of button elements in the widget as they will display when a visitor interacts with them. If you need to choose a different sub-element of a widget, press Escape to move one element up in the nested hierarchy of sub-elements in the widget, or click anywhere else on the page to deselect the widget entirely. You can use the tools and options in Muse to set the appearance of the widget and each sub-element, just as you update the appearance of other page objects. If you don't want a specific sub-element to display, select the subelement and set both its fill and stroke colors to none. For more information, see Work with rectangles on page 17. After you have styled the appearance of a widget, you can copy the styles and apply them to a second widget, so that the two widgets use a consistent design. Select the styled widget first, then right-click (Control-click) on the unstyled widget and choose Transfer Widget Skin from the context menu that appears.

Transferring a widget skin

Menu Bars
Menu Bar widgets display site navigation on a web page. Menus can be oriented horizontally or vertically. Menus can be set to automatically populate with the names of pages, using the structure of your site in Plan view. Or if desired, you can set them to be populated manually, so that you can add the links to pages. If a menu is set to be automatically populated, the items in the menu and their names display the page names listed in Plan view. If you later edit the pages in Plan view to add, delete, reorder, or rename them, the top level pages (and all pages menu items) are automatically updated in the menu to match to the site plan. If a menu is set to be manually populated, plus (+) symbols appear to let you add new menu items or submenus items. Manual menu items can be deleted by simply selecting each item and pressing Delete. Manual menu items can also be rearranged. Click and drag them to reposition the items within the menu.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

36

Select Menu Bar widget elements

Use the Selection tool to select the widget. While the entire widget is selected, the Selection Indicator in the top left corner of the Control panel displays the word Widget. Click again inside the widget to select the containers, text frames and other sub-elements of the container. Each sub-element displays a bounding box to indicate which element is currently selected. Additionally, the Selection Indicator updates to reflect the name of the currently selected item, such as Container, Text Frame, etc. Watch the Selection Indicator update as you click, to help you navigate through the hierarchy of sub-elements within the widget. Each time you click, you are drilling down in to additional nested subelements of the widget, to access and edit each item. To "back up" the hierarchy structure of nested elements, press the Escape key. Press the Escape key repeatedly to back up further, to select the entire widget itself. Or, click away from the widget (click anywhere else on the page) and then click the widget once again, to select the entire widget. While the entire widget is selected, you can change its dimensions, appearance and location. While the sub-elements of a widget are selected, you can format the contents (such as insert other objects, like images, text, and rectangles) as well as update each element's appearance and dimensions within the confines of the widget itself.

Selecting a widget and widget elements

1 In Design view, click the Menu Bar widget once to select the entire widget. 2 Hover over individual menu items to see their outlines. Click again to select an individual menu item. 3 Hover over the text of an individual menu item to see the text elements outline. Click again to select the text

element.
4 Click anywhere outside the widget to deselect everything.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

37

Edit Menu Bar widget options

1 Select the Menu Bar widget (or the individual menu bar item) you want to edit, and click the editing options icon

(arrow).
2 Make edits as necessary:
Menu Type Specifies the items that Muse will use to build the menu. Top Level Pages menu types include a menu

item for each page on the top level of your site plan. All Pages menu types include a menu item for each page on the top level of your site plan, as well as sub-menu items for any child pages. Manual menu types contain no automatically-generated menu itemsyou must enter menu items manually in Design view.
Menu Direction Lets you choose between horizontal or vertical orientation for you menu. Edit Together Applies your changes to all items in the menu bar widget. (For example, if you have a single menu

bar item selected and you are editing its padding, your edits will apply to all menu bar items in the widget.) Deselect this option to make changes to menu bar items individually.
Menu Item Size Lets you specify the type of width for menu items. Fit Width creates menu items that are only large enough to contain their respective words. Uniform Width creates menu items of uniform size, based on the largest word in the menu bar. Sub-Element Visibility Specifies the visibility of menu item elements. Choose to enable three options:

Left Icon When enabled, the icon to the left of the menu item is displayed. The icon is an image frame which can be edited using the formatting tools, such as the Fill and Stroke menu. You can add a background image to an icon's image frame, if desired, to further design the menu. When disabled, the icon is not displayed. Label When enabled, the menu items label (generally, the page name of the linked button) is displayed. When disabled, the label is not displayed. Right Icon When enabled, the icon to the right of the menu item is displayed. The icon is an image frame which
can be edited using the formatting tools, such as the Fill and Stroke menu. You can add a background image to an icon's image frame, if desired, to further design the menu. When disabled, the icon is not displayed.
Sub-Element Positioning Lets you specify the arrangement and visibility of optional items (enabled with the Widget Options menu) within an individual menu item.

Note: To layout the sub-elements of menu items in a Menu Bar (and in other widgets) use the Spacing panel to control padding, margins, and gutters.

The Spacing panel

Edit Menu Bar widget states

You can edit the various states of Menu Bar widget items. For example, you might want an item to display a different color when a user hovers over the item, or when the user clicks it. For more information, see Change rectangle states on page 20.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

38

Accordions
An Accordion widget contains several panels stacked on top of one another. When a user clicks an accordion tab, that tab opens a larger panel displaying the content. In addition to adding interactivity to your site, the Accordion widget is helpful when you need to display more content within a compact area of the web page.

Add or delete a panel

1 In Design view, click the Accordion widget once to select the entire widget. 2 Click the plus (+) icon that appears at the bottom of the widget. 3 To delete a panel, select it and press Delete on your computer keyboard. (See below for more information about

selecting individual panels.)

Add content to a panel

1 In Design view, click the Accordion widget once to select the entire widget. 2 Click again in the area of the panel tab to select the panel. 3 Click the larger content area below to select it and add content. Enter text using the Text tool, draw rectangles with

the Rectangle tool, paste images or text, or place any other type of content. You can also use drag-and-drop functionality to add images, rectangles, and text frames into the content areas of Accordion panels, Tab panels, and Composition widgets. Content areas of widgets display a blue highlight during the drag-and-drop operation to indicate the element being dragged is targeting the widget. Widgets dynamically adjust their size to accommodate their content. For example if a text frame contained in a widget grows vertically as you type. Widgets also grow vertically to accommodate the additional content you place inside them. Web pages created by Muse behave similarly--they automatically expand to accommodate changes in content, fonts, and font size.

Select Accordion widget elements

You can select the entire widget, an entire panel (including its tab), or a single tab in order to edit it.
1 In Design view, click the Accordion widget once to select the entire widget. 2 Hover over a panel tab and click once to select the corresponding panel. Alternatively, you can hover over the larger

content area and click once to select that instead.

3 Hover over individual tabs and click again to select an individual tab. 4 Double-click inside a selected individual tab to make the text area editable. 5 Click anywhere outside the widget to deselect everything.

Edit Accordion widget options

1 Select the Accordion widget (or the individual accordion element) you want to edit, and click the editing options

icon (arrow).
2 Make edits as necessary:
Can Close All Lets the user close all panels at once. When this option is not selected, one accordion panel always remains open.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

39

Edit Together Applies your changes to all items in the Accordion widget. (For example, if you have a single panel

tab selected and you are editing its padding, your edits will apply to all panel tabs in the widget.) Deselect this option to make changes to widget elements individually.

Edit Accordion widget states

You can edit the various states of Accordion widget panels. For example, you might want a panel tab to display a different color when a user hovers over the tab, or when the user clicks it. For more information, see Change rectangle states on page 20.

Tabbed Panels
A Tabbed Panels widget contains several panels that overlap. As a user clicks each tab, the corresponding larger panel displays the content it contains. In addition to adding interactivity to your site, the Tabbed Panels widget is helpful when you need to display more content within a compact area of the web page.

Add or delete a tab

1 In Design view, click the Tabbed Panel widget once to select the entire widget. 2 Click the plus (+) icon that appears to the right of the widget. 3 To delete a tab, select it and press Delete on computer keyboard. (See below for more information about selecting

individual tabs.)

Add content to a tab

1 In Design view, click the Tabbed Panel widget once to select the entire widget. 2 Click again in the area of the tab row to select the tab row. 3 Click again to select the particular tab to which you want to add content. 4 Click the larger content area below to select it and add content. You can add text, paste images, or add any other

type of content using Muses design features.

Select Tabbed Panel widget elements

You can select the entire widget, the row of tabs, a single tab, or a text frame inside a single tab, in order to edit it.
1 In Design view, click the Tabbed Panel widget once to select the entire widget. 2 Hover over just the tabbed area and click once to select it. Alternatively, you can hover over the larger content area

and click once to select that instead.

3 Hover over individual tabs to see their outlines. Click again to select an individual tab. 4 Hover over the text of an individual tab to see the text elements outline. Click again to select the text element. 5 Click anywhere outside the widget to deselect everything.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

40

Edit Tabbed Panel widget options

1 Select the Tabbed Panel widget (or the individual tabbed panel element) you want to edit, and click the editing

options icon (arrow).

2 Make edits as necessary:
Edit Together Applies your changes to all items in the Tabbed Panels widget. (For example, if you have a single tab

selected and you are editing its padding, your edits will apply to all tabs in the widget.) Deselect this option to make changes to tabs individually.
Event Specifies the action that switches tabs. You can specify that users either click or rollover tabs to switch

between tabs.
Total Width Lets you specify the type of width to use for tabs. Fit To Content creates tabs that are only large enough to contain their respective words. Uniform Width creates tabs of uniform size that fill the full width of the tab widget. Sub-Element Visibility Specifies the visibility of tab elements.

Note: Sub-Element visibility refers to elements that appear in the tabs (left icons, right icons, and labels).
Sub-Element Positioning Lets you specify the arrangement of your sub-menu items.

Note: You can use the Spacing Panel to modify widgets, including Menu Bars, Accordion Panel widgets, Tabbed panel widgets, image thumbnails in slideshows, and more. Select the tab area of the tab panel to change its horizontal gutter value and control spacing. For Accordion panels, you can select the title and use the Spacing panel to change vertical gutter. You can also use the Spacing Panel to set insets (such as padding) on text frames and widgets.

Edit Tabbed Panel widget states

You can edit the various states of Tabbed Panel widget tabs. For example, you might want a tab to display a different color when a user hovers over the tab, or when the user clicks it. For more information, see Change rectangle states on page 20.

Composition widgets
Composition widgets are comprised of at least one small container (the trigger) that displays content in a larger container (the target) in response to user interaction. For example, you can use a Basic Composition widget to create a photo gallery, with thumbnail triggers that display the full-sized photos when the user clicks the trigger. The Composition section of the Widget Library includes the following configurations of composition widgets:

Blank Featured News Lightbox Display Presentation Tooltip

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

41

The Compositions widgets library

Each option has different display behaviors that enable you to easily add complex functionality to your site. For example, the Lightbox Display composition widget dims the rest of the page while the element being displayed is active. A Tooltip composition widget displays the corresponding tooltip content as the visitor hovers their mouse over the trigger containers. Explore each configuration to discover which works best for your project. Like the other widgets, Composition widgets are completely editable and customizable.

Add or delete a trigger

1 In Design view, click the Composition widget once to select the entire widget. 2 Click the plus (+) icon that appears to the right of the trigger element(s). 3 To delete a trigger, select it and press Delete on your computer keyboard.

Add content to a target area

1 In Design view, click the Composition widget once to select the entire widget. 2 Click again to select the particular trigger that will trigger the new content. 3 Click the larger content area to select it and add content. You can add text, paste images, or add any other type of

content using Muses design features.

Add multiple images as targets

The preceding procedure describes how to specify a trigger and a target area so that you can add content to target areas individually; but you can also add multiple images simultaneously to the target area. When you do so, Muse automatically creates the corresponding trigger elements for you.
1 In Design view, add a new Composition widget to the page. 2 Click the Composition widget once to select the entire widget. 3 Click again to select the large target area. 4 Choose File > Place. 5 Select the multiple images you want to place. Hold down the Control (Windows) or Command (Mac OS) key to

select multiple images.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

42

After youve selected all of the images you want to add to the widget, click Select (Windows) or Open (Mac OS).
6 Place the image group by clicking inside the target content area. Muse automatically adds trigger elements for each

image.
7 (Optional) Select each trigger element and place images that match the corresponding target areas to create

thumbnail image triggers.

Edit Composition widget options

1 Select the Trigger and Target widget (or the individual widget element) you want to edit, and click the editing

options icon (arrow).

2 Make edits as necessary:
Position Specifies the position of the target area. Stacked lets you overlap all of the containers so that the target

content appears in the same place on the web page. Scattered lets you position the target container in various locations on the page. Lightbox dims the web page and displays the target content in a spotlight, drawing the users focus to the displayed content.
Event Specifies the action that triggers the target area. You can specify that users either click or rollover triggers to

switch between targets.

Transition Specifies the animation method used when transitioning from one target area to another. Fading fades the new target content in as the previous target content fades out. Horizontal slides the new target content in with a horizontal swiping effect. Vertical slides the new target content in with a vertical swiping effect. Speed Specifies the speed of the transition. For an abrupt transition, select None. Autoplay Creates a slideshow effect at varying speeds. No user interaction is necessary to transition between target content areas when this option is enabled. Hide All Initially Hides all target areas when the page loads in a browser. When this option is enabled, the user must interact with a trigger in order to see content in a target. Parts Lets you specify whether or not you want to show previous, next, or close buttons with the widget. Show Lightbox Parts While Editing Lets you hide or display the contents of the target area while editing in Design

view. This option is only enabled when Lightbox is the selected position type.
Show All in Design Mode Lets you display all target content areas at the same time when working in Design view. When

this option is deselected (the default) only the target content of the selected trigger element appears in Design view.

Slideshow widgets
The Slideshow section of the Widgets Library includes the following options:

Basic Lightbox Thumbnails

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

43

The Slideshow widgets library

Each option has different display behaviors that enable you to easily add complex slideshow functionality to your site. For example, the Lightbox Slideshow widget dims the rest of the page while the gallery element being displayed is active. A Thumbnails Slideshow widget displays thumbnails (the trigger containers) that visitors interact with to display the larger content (in target containers). Explore each slideshow configuration to discover which works best for your project. As each slideshow is selected, a preview of the slideshow widget is displayed in the Widgets Library panel. Like the other widgets, Slideshow widgets are completely editable and customizable.

Insert arbitrary HTML

Arbitrary HTML refers to the source code generated by a third-party website, such as Google, YouTube, Flickr, or Picasa. You can set up an account with these websites, log in, and then copy the embed code from their site and add it to your site. When you paste arbitrary HTML into a page, it's like putting a window inside a page on your site that displays the content of a third-party site inside it. Arbitrary HTML is a great way to add complex information (such as maps, weather forecasts, stock market quotes) as well as rich media (like digital videos, slideshows, and audio files) quickly and easily. Arbitrary HTML has the added benefit of enabling you to use a third-partys site as a hosting service and uploading interface. For example, if you create a free account with YouTube, you can create your own YouTube channel and upload the video content for your site. YouTube includes a web page that simplifies the upload process and hosts the video files on their site. When you want to update your site, simply add more videos to your YouTube channel, copy the embed code, and then paste it into a page to add new videos to your Muse site.
1 Choose Object > Insert HTML. 2 The HTML Code window appears. Paste the code you copied from a third-party site into the window, and click OK.

Note: You can also paste HTML code directly into the page. Muse detects HTML source tags and will automatically paste the code as HTML into the page.
3 To edit the HTML code, right-click (or Control-click) on an arbitrary HTML element on the page. Choose HTML

from the context menu that appears to open the HTML Code window and make changes. Or, select the arbitrary HTML object on the page and choose Object > Insert HTML to open the HTML Code window again.

Last updated 8/12/2011

USING MUSE (CODE NAME)

Add and edit widgets

44

You can add CSS styles to the HTML Code window to control the appearance of the HTML elements.
4 After making changes to the HTML code, click OK to close the HTML code window and save the changes.

Adding arbitrary HTML to your Muse page

Last updated 8/12/2011

45

Chapter 8: Preview
Preview uses WebKit as its rendering enginethe same engine that powers the Apple Safari browser, the Google Chrome browser, and most mobile phone browsers. You can also preview web pages from Muse in external browsers.

Preview a page in Muse

1 Open the page that you want to preview in Design view. 2 Click the Preview link in the upper-left corner of the Muse interface.

Preview a page in a browser

1 Open the page that you want to preview in Design view. 2 Choose File > Preview Page in Browser.

Note: If you click a link on the page the link wont work; Muse only generates a temporary preview of the single page.

Preview the entire site in a browser

If you want to test links while previewing, youll want Muse to create preview files for the entire site.
To preview the entire website, beginning with the home page, choose File > Preview Site in Browser.

Last updated 8/12/2011

46

Chapter 9: Publish
For information on publishing your Muse site to a live web server, see Launching your Muse site.

Last updated 8/12/2011