Adobe Muse / Tutorials

Getting started with Adobe Muse, part 5

Placing a Photoshop file as a rollover button

1. Choose File > Place Photoshop Button.  In the Photoshop Import dialog box that appears, locate the file in the Kevins_Koffee_Kart folder named btn_share.psd. Click Select (Mac) or Open (Windows) to choose the file.

2. The Photoshop Import Options dialog box appears. Take a moment to investigate how the settings are applied. You can use the menus to specify which layer in the Photoshop file will show as the button's Normal State (the way the button appears when the page first loads), the Rollover State (the way the button appears when visitors hover their cursor over it), and the Mouse Down State (the way the button appears when visitors click the button). The three state menus display the names of the Photoshop layers, and the thumbnail images visually display how each selected layer will appear.

3. For this example, the Photoshop layers have already been ordered correctly to display the button states. There's no need to change the menu settings. Click OK to accept the states as they are arranged by default (see Figure 46).

 

Figure 46. Use the Photoshop Import Options dialog box to associate existing Photoshop layers with the desired button states.

4. Click once in the top right area of the header of the A-Master page to place the Photoshop file at its original size.

5. Click the Preview link to use the WebKit-based rendering emulator. Review the display of the A-Master page. As you first view the page, the Normal State of the button appears. If you hover your cursor over the button, the appearance changes slightly (the brown drip color becomes lighter), and if you click the button, the white text becomes light brown as long as you press and hold the mouse button.

6. Click Design to return to editing the A-Master page in Design view.

The Share button is displaying the states as expected. In the next section you'll learn how to align the Share button with the drip image on the right side of the site navigation.

 

Back to Top >>

Aligning objects on the page using the Align panel

The Align panel is helpful when you want to align two or more page elements to each other or within a content area.

To view the Align panel, choose Window > Align or click the Align tab to make it active in the Panel set. When the Align panel is open, a checkmark is displayed next to the Align option in the Window menu.

In this example, you'll align the Share button with the drip image below it. Follow these steps:

1. Use the Selection tool to select the Share button. Press and hold the Shift key to also select the drip image below the brown bar that you placed earlier.

2. While both objects are selected, examine the options in the Align panel (see Figure 47).

 

Figure 47. Use the settings in the Align panel to position one or more objects on the page.

Use the menu at the top of the Align panel to choose the elements that will be aligned:

Align to Selection: Aligns the selected elements to themselves

Align to Content Area: Aligns the selected element(s) in relation to the surrounding Content Area

The Align Objects section offers six settings:

• Align Left Edges

• Align Horizontal Centers

• Align Right Edges

• Align Top Edges

• Align Vertical Centers

• Align Bottom Edges

 

The Distribute Objects section also has six settings:

• Distribute Left Edges

• Distribute Horizontal Centers

• Distribute Right Edges

• Distribute Top Edges

• Distribute Vertical Centers

• Distribute Bottom Edges

 

For this example, the goal is to align the Share button with the drip vertically, so that they are centered on their horizontal midpoint.

3. While the top menu is set to Align to Selection, click the Align Horizontal Centers button. Notice how the elements reposition so that they are stacked vertically on the page, aligned by their horizontal mid points.

Note: Another way to align objects to their centers is to click-drag one of the elements. When it is aligned with another object, a blue line temporarily displays to indicate that they are aligned (see Figure 48).

 

Figure 48. When dragging an element, a blue line displays as the object lines up with another object on the page.

 

Back to Top >>

 

Creating a slideshow presentation with the Slideshow widget

The Slideshow widget is another site feature you can add to your pages. You can set up a slideshow that requires visitors to click thumbnails to see a larger version of the photo, or you can create slideshows that play automatically as the page loads. Auto-play slideshows are a great way to add compelling content to your site by presenting a series of photos. You can control how the slideshow plays back by setting the type of transition to dictate how the slides animate.

In the following subsection, you'll add an auto-play slideshow to the site's home page.

In Plan view, double-click the Home thumbnail in Plan view to open it for editing in Design view.

 

Back to Top >>

 

Adding a Slideshow widget set to auto-play

Follow these steps to create a presentation that cycles through a set of images:

1. In the Widgets Library, click the Slideshows category to expand it. The slideshow widgets are displayed.

2. Select the Basic Slideshow widget and drag it onto the page.

3. By default, the Basic Slideshow widget contains one dark gray rectangle (image placeholder), a placeholder caption, the number of the image (1 - 1) and two arrow buttons (next and previous) that visitors can click to navigate through a set of images.

4. Click the blue arrow to access the Options menu. Verify and set the following options:

• Transition: Fade

• Auto Play: Slow

• New Hero: Fill frame proportionally

• New Thumbnail: Fill frame proportionally

• Lightbox: Deselected

 

5. Parts: Deselect all options to hide the captions, counter, next, and previous buttons.

Note: This slideshow will play automatically when the page loads without any visitor interaction. If you want to create a slideshow that is controlled by a visitor's mouse clicks, set Auto Play to None and leave the checkmarks for Next and Previous selected in the Parts section of the Options menu.

6. Click away from the Options menu to close it. Notice that after making these changes, only the dark gray rectangle remains visible. At any time, you can change the configuration of widgets by changing the settings in the Options menu.

7. Click once to select the entire widget and use the Selection tool to center it on the Home page. Click once again to select the Image Frame (the dark gray rectangle) and then drag the side handles to expand the slideshow to the width of the page, to the same width as the brown ribbon navigation bar in the header (see Figure 49).

 

Figure 49. Drag the side handles of the slideshow's image frame to fit the size of the page.

8. Use the top and bottom arrows to extend the height of the image frame to fill the entire dimensions of the Home page. At the bottom, stretch the image frame until it stops just above the zigzag tiled image that appears at the top of the footer. It's okay for now that the dark gray placeholder covers the brown drip image on the right side of the nav bar.

9. Click the blue arrow to access the Options menu again. This time, click the folder icon at the top, next to the text: Add Images.

10. In the Import dialog box, navigate to the Kevins_Koffee_Kart assets folder, open the _slideshows subfolder and locate the seven image files named:

KoffeeKart_HP_Hero_01.jpg

KoffeeKart_HP_Hero_02.jpg

KoffeeKart_HP_Hero_03.jpg

KoffeeKart_HP_Hero_04.jpg

KoffeeKart_HP_Hero_05.jpg

KoffeeKart_HP_Hero_06.jpg

KoffeeKart_HP_Hero_07.jpg

 

Click the first image file and then press and hold the Shift key while selecting the last image file to select them all. Click Select to add the images to the slideshows.

11. Click Preview to watch the slideshow play back. It's set to the slow auto-play speed, but you can change that setting in the Options menu if you prefer the images to cycle through the images more quickly. Notice that after the last photo is displayed, the slideshow loops back through and starts playing the first image in the set. The slideshow loops endlessly when auto-play is enabled.

At this point, the slideshow is complete. However, if you'd like to fix the drip on the right side of the navigation bar, there's one more thing left to do.

1. In Plan view, double-click the A-Master thumbnail to open it in Design view.

2. Use the Selection tool to select the brown drip in the top right part of the navigation graphic.

3. Right-click the drip image and choose Arrange > Bring to Front in the context menu that appears.

4. Click the X of the A-Master tab to close it. Click the Home tab to make the Home page active again. Click Preview and notice that now the drip image appears above the auto-play slideshow. When you are finished reviewing the slideshow, click the Design link again.

Note: Since the navigation bar was created on the A-Master page, any changes you make to control the navigation (and other common elements) involve opening the A-Master page in Design view to edit it. Although you can see the elements of a master page on the pages you are editing, you cannot edit the header and footer content on the other site pages.

 

Back to Top >>

 

Understanding Adobe Muse contact form functionality

With contact forms, you can enable website visitors to register for events, join memberships, sign up for mailing lists, and more. See Figure 50 for an example of a web contact form created with the Adobe Muse Contact Form Widget.

Figure 50: This contact form was added and configured with the Contact Form Widget, and it was styled with standard Adobe Muse design tools.

It’s important to note that Adobe Muse contact forms have two essential components: the form that appears on your web page, and the back-end functionality that manages the submitted information. When you host your Adobe Muse site with an Adobe Business Catalyst® webBasics plan, you get back-end database support for contact forms—which means that the data captured in your forms is automatically sent to one or more email addresses of your choice. An Adobe Muse contact form will only function if linked to an Adobe Business Catalyst hosted website.

Follow these steps to add and customize a contact form using the Adobe Muse Contact Forms widget:

1. Open the Widgets Library by choosing Window > Widgets Library. (If the Widgets Library is already open, click the top tab to make the Widgets Library active in the set of docked panels.)

2. Click Forms to expand the list of Forms widgets. Select the Simple Contact widget, drag the widget onto the page, and position it on the left side of the page content region.

3. Use the Selection tool to select the various components of the contact form widget. Select the entire widget, and the Selection Indicator in the top left corner of the Control panel displays the word “Form.” As you click again, notice how the Selection Indicator updates to tell you that you have selected a form field, or a text input frame. To deselect that element of a widget, either click the Escape key to back out of the current selection one level, or press it repeatedly to back up out of the nested elements. Alternatively, you can simply click away from the widget and onto another part of the page.

4. Select the entire widget and then click the round blue arrow icon in the top right corner to see contact form options (see Figure 51).

 

Figure 51. Use the widget menu to name your form, add the email addresses of people who will receive form data, set post-submission page behavior, and more.

5. The Form Name field includes the active page name by default, but you can rename the form if you wish.

6. Use the Email to field to tell Adobe Muse where to send submitted data. The field is pre-populated with the email address associated with your Adobe ID, but you can add a different address or multiple addresses if you wish.

7. To determine how the page will behave once the form is submitted, click the arrow in the After Sending field and choose from the options. If you’d like to display a confirmation page when a visitor successfully submits a form, scroll down to the Pages section and click the existing CONTACT:Confirmation option.

8. To add more fields to your form, choose options such as Cell Phone Number and Home Address from the Standard Fields area of the menu, or go to the Add Custom Fields area and choose either the Single Line or Multiline text option. This will populate your contact form with a new field that you can customize.

9. Exit the widget options menu and experiment with rearranging and customizing individual contact form labels and fields. To rearrange the order of the form fields, select the entire widget and then hover over the field you want to move until a dotted brown outline appears around the field and its label. Then click and drag the item to its preferred position.

10. To rename a label such as “FULL NAME,” double-click it and change it to “YOUR NAME.” To edit or configure a form field, double-click to select the field and then click the round blue arrow icon to see options for that field (see Figure 52). Choose Require Entry to require that visitors enter data in that field, and choose Show Prompt Text When Empty to include example text in the field before the visitor begins typing.

 

Figure 52. Determine whether form fields are required or optional, whether they include prompt text or they’re empty by default, and more.

11. To style your contact form, select the entire form and then use Control panel options to change colors and fonts, add Graphic Styles and Paragraph styles, and more. Then select the Submit button and experiment with different strokes, text options, and spacing, and even try adding an image fill to give the button an interesting look.

 

Back to Top >>

 

Embedding HTML

You can embed HTML code in pages of your site to add complex site features that appear dynamically from a third-party web server. These chunks of code can be copied from any number of web service providers, such as Google, Yahoo!, YouTube, and many others and then conveniently pasted into Muse pages. In this section, you'll look at two different examples of embedded HTML and see how you can quickly add social media content and an interactive Google map to a website built in Muse.

You'll begin by finishing up the Home page content. If you've been following along, the Home page may already be open in Design view. If not, double-click the Home page thumbnail in Plan view to open it for editing in Design view. You'll add the embedded HTML on top of the slideshow that you previously added to the Home page.

Back to Top >>

 

Adding an embedded HTML Twitter feed to display the most recent posts

You can set up a free account with many different web services, including Twitter, that will allow you to post messages that display on their website. However, in addition to displaying the information on Twitter.com, you can use your account to log in and copy the embed code to display the same messages on a website you create.

In this example, a fictitious account was set up for Kevin's Koffee Kart. This involves signing in to Twitter as a new user and completing the registration form. After that, you can use the site's interface to post messages and copy the embed code that enables you to display it elsewhere on the web. This is the same process you'll use to share blog posts, video content, RSS feeds, stock information, weather forecasts, game scores, and many other types of dynamic data. If you are building a site for a client, ask them if they already use these services to help share information with their customers. In many cases, you can use their account information to log in and then obtain the embed code for the desired data you want to display.

To eliminate the need for you to log into Twitter to create your own account, the embed code copied from Twitter for the Kevin's Koffee Kart account is provided below:

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Optional Placeholder Text</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

 

1. Copy the code shown above.

2. Return to Muse. In many cases, you can simply click the desired location on the page, right-click, and choose Paste from the context menu that appears. Alternatively, you can use the paste keyboard shortcuts (Command-V for Mac or Control-V for Windows), and Muse will recognize that the text you are pasting is source code, rather than normal text content.

Note: On the rare occasion when the code is not recognized as HTML, you can choose Object > Insert HTML to open the HTML Code window. Then just paste the source code you copied into the window and click OK to close the window and embed the code.

3. After embedding the source code (which essentially creates a window in your site page to display the linked content from a third-party website), it may not appear exactly as you'd like on the page. The default display of the Twitter embedded HTML content is displayed (see Figure 53).

 

Figure 53. The Twitter feed data is displayed as expected, but the text is not styled or formatted.

4. Increase the size of the Twitter feed text area by clicking the handles surrounding the embedded HTML and expand them to fill most of the width of the page, and about a third of its height (see Figure 54).

 

Figure 54. Stretch the Twitter feed data window's width and height to a much larger size.

This enables the text to appear within a much larger space, although at the moment, the text is still the default size.

Next, you'll update the code in the HTML Code window to add some CSS styles that will define how the dynamic text will appear. This operation will not affect how the posted messages appear on Twitter.com, but it will change the formatting of the text on your site.

5. Copy the CSS style code shown below:

<style type="text/css">

#twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

a:link, a:hover { font-size: 14; color: white; text-decoration: none }

</style>

 

Note: Take a moment to familiarize yourself with the code above and notice that the styles are wrapped in an opening tag that specifies what the code is (<style type="text/css">) and then a closing tag that lets browsers know that the CSS style rules are completed (</style>). Whenever you style your own embedded HTML code, you'll use these tags as brackets around the styles you want to affect. In this case, the Twitter website hosts the posted messages and uses a CSS ID selector named #twitFeed to control how the text appears on its site. So the code above is essentially using that style name (obtained from the Twitter site) and then adding some rules that define how the text will appear on your site, overriding the styles applied by Twitter.com. To learn more about CSS rules for formatting text content, visit the W3C Schools website.

6. Right-click in the embedded HTML Code window and choose HTML from the context menu that appears. This opens the HTML Code window so that you can see the source code you pasted previously. At any time while editing a site, you can open this window and update the HTML source content. Click above the HTML code you previously embedded, at the very top of the window. Paste the new style code that you copied in step 5 (see Figure 55).

 

Figure 55. Paste the style code in the HTML Code window, above the Twitter source code you pasted previously.

7. Click OK to close the HTML window.

After making this change to the style of the Twitter text, the post that is linked from the Twitter site now appears in white text and is much bigger, on top of the Home page's slideshow (see Figure 56).

 

Figure 56. The completed Twitter feed after updating the size of the HTML object and formatting the text styles.

The Home page is almost complete. There's just one last element to add to the page.

1. Choose File > Place. In the Import dialog box, browse to select the file inside the Kevins_Koffee_Kart folder named DailyDrip.png. Click Select.

2. After placing the image on the Home page, use the Selection tool to position the image on the left side near the top of the slideshow, so that it overlaps partially on top of the slideshow.

3. Click Preview to watch the slideshow animate and see how it appears below the Daily Drip and brown drip images (see Figure 57).

 

Figure 57. The finished design of the Home page.

When you are finished reviewing the Home page, click the Plan link to return to Plan view.

Next, you'll add a different type of embedded HTML to the KART MAP page.

1. Double-click the KART MAP thumbnail to open the page in Design view and begin editing it.

2. Use the Text tool to drag a text frame on the KART MAP page, near the top of the page content, directly below the header.

3. Type the following line: Looking for the Koffee Kart? Check here for real-time location updates throughout the day.

4. With the text selected, open the Paragraph Styles panel. Click the style named Georgia Body Medium to apply the Paragraph style to the header text on the KART MAP page.

 

Continue on to Getting started with Muse Part 6 where you'll learn how to use HTML to place a Google map on a web page.

 

Back to Top >>

 

Sample files

 

Sample website

 

Prerequisite knowledge

 

 

 

 

 

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.