Adobe Muse Workspace basics

Workspace within Adobe Muse consists of various elements, such as panels, toolbars, and windows. Any arrangement of these elements is called a workspace. Adobe Muse allows you to customize workspace to suit your design needs. You can un-dock and re-organize panels, and open multiple Design view windows for side-by-side designing. You can also drag and drop design elements across windows or layouts. This can be helpful when working on desktop and mobile layouts at the same time, to be able to reuse common content across layouts.

The Adobe Muse UI is optimized for high resolution display on devices that support HiDPI. The HiDPI appearance of Adobe Muse makes panels, tools, and other UI elements look sharper and cleaner.

Although the default workspace layout varies in different Creative Cloud products, you can manipulate the elements much the same way in all of them.

Tools and other elements within Adobe Muse workspace are enabled depending on the currently selected view. When working with Adobe Muse, it is necessary that you switch between different views. Adobe Muse has Plan, Design, Preview, Publish, and Manage views to facilitate different stages of web design.

Plan View

Adobe Muse displays the Plan View on creating a site or opening an existing one. The Plan view allows you to build Sitemaps for your websites, there by setting the hierarchical structure of your page. You can also use the Plan View to associate individual pages of your website with Master Pages.

• (A) Tabbed document windows: The document window displays the file you are working on. Document windows can be tabbed, and multiple windows can be tiled for easy access side-by-side designing.
• (B) Horizontal sitemap display: Displays the sitemap horizontally. This is the default behavior in Adobe Muse.
• (C) Vertical sitemap display: Displays the sitemap vertically. This is specially useful for complex sites that have a lot of pages and child pages.
  
• (D) Workspace layouts: Switch between different workspace layouts (modes) when working with Adobe Muse.
• (E) Sitemap: Area to create a sitemap for your website. Add or remove pages, and set the hierarchy of your website.
• (F) Master pages: Use this area to create additional Master Pages for your site or update existing ones.
• (G) Tools panel: The Tools panel allows you to select and work with different tools. The Control panel displays options for the currently selected tool.

Design View

The Design View is the most important view, and is central to working with Adobe Muse. The Design view offers tools, widgets, and functionality that allows you to design rich and complex websites without writing code.

Design View contains the web page canvas on which you can design your pages using various tools, widgets, and other design capabilities offered by Adobe Muse. The web page canvas contains Guides and Rulers to help you make optimum use of real estate on your web page.

By default, Panels are arranged to the extreme right of the Design View. However, Adobe Muse allows you to dock and undock panels, and rearrange them per your convenience.

The toolbar allows you to select tools that allow you to style your page such as Background and Browser Fill, Stroke, and Effects. The toolbar is also populated with additional tools depending on the currently selected panel.

The application bar also contains options to control the view within Adobe Muse.

• (A) Selection Indicator: Displays your current selection on the web page canvas. 
• (B) Drop-down menus: The Application bar across the top contains the mode switcher, menus, and view controls.
• (C) Control panel: Contains tools that allow you to style and modify the apperance of your website such as Strokes, Fills, and Effects.
• (D) Workspace layouts: Switch between different Workspace layouts when working with Adobe Muse.
• (E) Panels: Allow you to access and work with key features within Adobe Muse.
• (F) Rulers: Enable you to set guides to an appropriate positions. 
• (G) Guides: Indicate the Top and Bottom of your web page and browsers. You can use guides effectively to define Header and Footer regions of your website.
• (H) Tools panel: Allows you to access and work with different tools such as Selection, Rectangle, Hand tool, and so on.

Preview Mode

You can use the Preview mode to test your website. The appearance of your website in the Preview mode closely resembles the appearance on any of the latest browsers. The Preview mode appears as a document window and can be floated or tiled within the Adobe Muse workspace. You can refresh the preview to view modifications made to your website.

• (A) Workspace layouts: Switch between different Workspace layouts (modes) when working with Adobe Muse.
• (B) Refresh: Click the Refresh button to reload preview of your website.
• (C) Preview: The preview area displays the last updated edition of your website.

Publish View

The Publish mode allows you to publish your website to Business Catalyst. Selecting the Publish mode displays the Publish dialog. On the Publish Settings dialog, specify the following:

• Site Name: Provide a meaningful name for your site. Adobe Muse suggests a domain name for your website based on the Site Name. However, you can choose to override the suggestion.
• Publish to: You can select an existing website from the Publish To drop-down. This allows you to publish to an existing website on Business Catalyst.
• URL: Specify a unique URL for your website.
• Data center: Adobe Muse detects your computer's current location and automatically selects the closest Data Center where the site files will be hosted. However, if your client lives in a different country, you can choose the Data Center closest to your client's location.
  

Share menu

The Share menu in Adobe Muse allows you to easily share the URL of your freshly published site. You can share the URL of your live website, or the URL for In-Browser Editing using the Share menu.  

After you publish your website, click Share. A dialog box with the link to the live site and In-Browser Editing appears.

For every website, two separate URLs are generated, one for the live site and for In-Browser Editing.

Based on the URL that you want to share, click the appropriate Copy Link option. The URL is copied to your clipboard. You can then send these URLs through email or other channels to share them with the stakeholders.

Manage View

The Manage mode allows you to manage and update websites on Business Catalyst. You can use the Manage Mode if you use Adobe Business Catalyst as your hosting service provider. On selecting the Manage Mode, Adobe Muse redirects you to http://businesscatalyst.com/. Sign in using your Creative Cloud credentials to begin editing your website. For more information, see Business Catalyst Help.

Manage tabbed document windows

When you work with multiple web pages and sites, Adobe Muse creates tabs for all open windows. You can access any of the pages by simply selecting the window.

• To rearrange the order of tabbed Document windows, drag a window’s tab to a new location in the group.
• To undock (float or untab) a Document window from a group of windows, drag the window’s tab out of the group or right-click on the tab and select Float In Window.
• To tile document windows for side-by-side design, select Window > Arrange > Tile.
• To dock a Document window to a separate group of Document windows, drag the window into the group.
• To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or sides of another window.
• To switch to another document in a tabbed group when dragging a selection, drag the selection over the document’s tab for a moment.

Tiling document windows

Adobe Muse allows you rearrange document windows by tiling them within the workspace. Tiling document windows is an easy way to work on multiple layouts for comparison and side-by-side design. You could also copy contents of a page across tiled document windows. Tiling document windows is particularly useful when working on multiple layouts. You could design once, and simply copy contents across layouts.

To tile document windows, select Window > Arrange > Tile.

To reset document windows to their default view, select Window > Arrange > Consolidate All By Site.

Drag and drop common content across tabbed windows

Adobe Muse allows you to easily reuse common content across multiple pages and layouts. When working with Adobe Muse, it is common practice to Tile or Float tabbed document windows. It is common web design practice to reuse design elements across web pages and layouts to keep apperance of a website uniform. Adobe Muse allows you can drag common design elements such as logos, text, headers, background images, and more across pages and layouts. 

Dock and undock panels

A dock is a collection of panels or panel groups displayed together in vertical orientation. You can dock and undock panels by moving them into and out of a dock.

• To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.

• To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.

• To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock or make it free-floating.

Move panels

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. If you drag to an area that is not a drop zone, the panel floats freely in the workspace.

• To move a panel, drag it by its tab.

• To move a panel group, drag the title bar.

Add and remove panels

If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of the workspace until a drop zone appears.

• To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from the Window menu.

• To add a panel, select it from the Window menu and dock it wherever you want.

Manipulate panel groups

• To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group.

• To rearrange panels in a group, drag a panel’s tab to a new location in the group. 
• To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group.
• To move a group, drag the title bar (the area above the tabs).
• To close a panel group, right-click on the title bar of the panel group and select Close Tab Group.

Stack floating panels

When you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows you to position it anywhere in the workspace. You can stack floating panels or panel groups so that they move as a unit when you drag using the topmost title bar.

• To stack floating panels, drag a panel by its tab to the drop zone at the bottom of another panel.

• To change the stacking order, drag a panel up or down by its tab.

• To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar.

Resize panels

• To minimize or maximize a panel, panel group, or stack of panels, double-click a tab. You can also double-click the tab area (the empty space next to the tabs).

• To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized by dragging.

Collapse and expand panel icons

You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the default workspace.

• 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.
• To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text disappears. To display the icon text again, make the dock wider.
• To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel’s title bar.

• To add a floating panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically collapsed to icons when added to an icon dock.)

• To move a panel icon (or panel icon group), drag the icon. You can drag panel icons up and down in the dock, into other docks (where they appear in the panel style of that dock), or outside the dock (where they appear as floating icons).

Dark User Interface

Adobe Muse allows you to set color themes for the workspace. You can choose to use any of the 4 color themes available with Adobe Muse.

The dark user interface themes allow you to focus fully on the design, due to the contrast between the UI and the web page canvas.

To choose a color theme, do the following:

1. In Adobe Muse, select Edit > Preferences.
2. On the Preferences dialog, select a Color Theme.

3. Click Ok.

Find and replace

Adobe Muse lets you find and replace text within a page or the entire site.

Finding text

1. In Adobe Muse, select Edit > Find and Replace.
2. In the Find and Replace dialog, specify:
   • Find: Enter the text you want to find within a page or site.
   • Replace: Enter the text you want to replace text entered in the Find text box with.
   • Search: Choose to search within a page or the entire site.
   • Match Case: If the Match Case option is selected, Adobe Muse searches only for words that match the case of the word or phrase that you entered in the Find text box.
   • Whole Word: If the Whole Word option is selected, Adobe Muse searches for the complete word or phrased entered in the Find text box.
   • Backward: If the Backward option is selected, Adobe Muse reverses the direction of search.
3. Click Find.

Find and replace text

1. In Adobe Muse, select Edit > Find and Replace.
2. In the Find and Replace dialog, specify:
   • Find: Enter the text you want to find within a page or site.
   • Replace: Enter the text you want to replace text entered in the Find text box with.
   • Search: Choose to search within a page or the entire site.
   • Match Case: If the Match Case option is selected, Adobe Muse searches only for words that match the case of the word or phrase that you entered in the Find text box.
   • Whole Word: If the Whole Word option is selected, Adobe Muse searches for the complete word or phrased entered in the Find text box.
   • Backward: If the Backward option is selected, Adobe Muse reverses the direction of search.
3. Click Replace. Click Replace/Find to replace an immediate occurence of the text and continue searching. Click Replace All to replace all occurences of the text in a page or the entire site.

Warnings panel

When working with Adobe Muse, warnings are generated for tasks that are potentially erroneous or will not deliver expected results. Such warnings are listed in the Warnings panel. When designing your website, it is good practice to have the Warnings panel open.

To bring-up the Warnings panel, select Windows > Warnings.