muse codename help

UsingMUSE (code name)

Last updated 8/12/2011

Legal notices

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

http://help.adobe.com/en_US/legalnotices/index.html

iii


Contents

Chapter 1: Workspace

Workspace overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Welcome screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Toolbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Control panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Chapter 2: Muse sites

Create a new site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Open an existing Muse site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Open a recent site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Close a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Save a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Revert a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Export a site as HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Chapter 3: Work with pages

Create and work with pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Rulers, guides, and the grid overlay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Zooming and fitting pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Chapter 4: Work with rectangles

Create a rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Select or adjust a rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Cut/copy/paste rectangles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Position rectangles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Rotate a rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Duplicate a rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Change rectangle stroke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Change rectangle fill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Change stacking order of rectangles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Change rectangle states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Add effects to rectangles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Round or join corners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

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

Chapter 5: Create and edit text

Create text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Edit text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Create, apply, and edit character styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Change text case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Paste inline elements into text frames and control text wrapping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

ivUSING MUSE (CODE NAME)

Contents


Chapter 6: Work with images

Place an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Paste an image from another program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Use image as background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Duplicate an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Pin an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Resize an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Rotate an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Position an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Set image opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Add effects to an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Crop an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Place a Photoshop button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Work with the options in the image context menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Use the Assets panel to manage site files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Group objects together to work with them as a single object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Chapter 7: Add and edit widgets

Add and edit widgets (general instructions) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Menu Bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Accordions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Tabbed Panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Composition widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Slideshow widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Insert arbitrary HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Chapter 8: Preview

Preview a page in Muse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Preview a page in a browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Preview the entire site in a browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Chapter 9: Publish

1


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.

The Muse WorkspaceA. 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.

B CA

E

F

D

2USING 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 Don’t 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 pages—pages 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.


Workspace


Muse Plan viewA. 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 it’s based on. Deselect the option if you don’t 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.

A

B


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.

Muse toolboxA. 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 you’ve 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.

A B C D E F


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 dock—the 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 zones—areas 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 can’t 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.


Workspace


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 panel’s tab to the highlighted drop zone in the group.

Adding a panel to a panel group

• To rearrange panels in a group, drag a panel’s 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.

AB

C


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.

8


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


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.

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.


Work with pages


2 Click the plus button at the bottom of the page.


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.


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 page’s 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.


Work with pages


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.


Work with pages


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. (It’s 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.

(It’s 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


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.


Work with pages


Create an email link


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, you’ll 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.


Work with pages


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 page—you 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.


Work with pages


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 you’ve 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.

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 rectangle’s dimensions, drag any of

the resize handles on the selected rectangle.

You can also adjust a selected rectangle’s 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).


Work with rectangles


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.




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 gradient—horizontal 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.




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 rectangle’s 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 they’ll 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 shadow’s color.

Opacity Specifies the drop shadow’s opacity.

Size Specifies the size (i.e. “thickness”) of the drop shadow.

Angle Specifies the drop shadow’s 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).




Add a bevel

1 In Design view, select the rectangle to which you want to add a bevel.


3 Click the Bevel category, select On, and set options as necessary.

Opacity Specifies the bevel’s opacity.

Size Specifies the size (i.e. “thickness”) of the bevel.

Angle Specifies the bevel’s 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.


3 Click the Glow category, select On, and set options as necessary.

Color Specifies the glow’s color

Opacity Specifies the glow’s 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.




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.

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 appears.

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.

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 you’ve specified the color.


Create and edit text


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 appearance—for 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 you’ve 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




• 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




• 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

27


Chapter 6: Work with images

In Muse, images behave like rectangles. If you want to do something to an image and don’t 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, you’ll need to set the object or page’s 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.


Work with images


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 image’s 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 image’s 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.


Work with images


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).


Work with images


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.


Work with images


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).


Work with images


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).


Work with images


Ungrouping objects

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 widget’s 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 you’re 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.


Add and edit widgets


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 sub-

element 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.




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 sub-

elements 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 element’s outline. Click again to select the text

element.

4 Click anywhere outside the widget to deselect everything.




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 items—you 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.




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


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.


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.


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).


Can Close All Lets the user close all panels at once. When this option is not selected, one accordion panel always

remains open.




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.


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


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 Muse’s 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.


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 element’s outline. Click again to select the text element.





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).


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.


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




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 Muse’s 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.




After you’ve 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).


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 user’s

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




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-party’s 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.




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

45


Chapter 8: Preview

Preview uses WebKit as its rendering engine—the 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 won’t 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, you’ll 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.

46


Chapter 9: Publish

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

http://www.adobe.com/go/learn_muse_publish_en

muse codename help

Documents

higher degrees

muses design

element positioning

selection

choose file

choose view

manual menu

photoshop