Adobe Muse / Tutorials

In Part 5 of Building your first website with Muse, you learned how you can add Tabbed Panel widgets to display more content on a single page. You also explored how to wrap text around an image within a text frame. In this next part, you'll examine how to add a Thumbnail Slideshow widget inside one of the containers of a Tabbed Panel widget, to finish the design for the about page. You'll also begin designing the food page, to add breakfast, lunch, dinner, and dessert menus.

Slideshow widgets are easy to set up. Thumbnail Slideshow widgets enable you to display a series of images on the site interactively. Similar to the Tabbed Panel widget, visitors click on a thumbnail container (the buttons, which are thumbnails of photos, in this example) and the corresponding hero image version displays in another larger container somewhere on the page.

You can also create photo galleries that display the featured content in a lightbox, like the Lightbox Composition widget you added to the home page in Part 4 of this series. Use the Lightbox slideshow when you want to display a set of images, and have each larger hero image display in its own modal window while the rest of the page dims.

In this example, you’ll build a photo gallery that displays several thumbnail images along the top with a single larger image displayed below. Using the Options panel, you can control how the photo gallery behaves and displays. And you can apply settings in the Control panel to style the slideshow's appearance.

 

 

Back to top >>

Adding a Thumbnails Slideshow widget to a page

Slideshows can also be added directly to pages, but in this example, you'll nest a Thumbnails Slideshow widget inside the content area of a Tabbed Panel widget. Follow these steps:

1. While editing the about page in Design view, click the Gallery tab to see the content area container with the placeholder content displayed below it.

2. Select the placeholder content (the image frame and the text frame inside the content area) and delete it.

3. Open the Widgets Library and expand the Slideshows section. Select the Thumbnails Slideshow widget from the list and drag a copy of it to the page (see Figure 59).

Figure 59. Drag the Thumbnails Slideshow widget onto the page.

 

Back to top >>

Configuring a Thumbnails Slideshow widget with the Options panel

When you first add a Thumbnails Slideshow widget, it contains a larger container (the Hero Image), three smaller Thumbnail Containers (the buttons), two arrow buttons (next and previous navigation), a counter, and a caption.

1. Click the blue arrow icon to access the Options panel. In this example, you don’t need the Next and Previous arrow buttons, so deselect the checkboxes next to those items (Prev and Next) to disable them. Notice that the buttons disappear as soon as you deselect the checkboxes.

Also deselect the Captions and Counter options, so that only the thumbnail trigger buttons and the larger target container remain. Look through the options and update them as needed to match the settings listed below and shown in Figure 60.

•  New Hero: Fill Frame Proportionately

•  New Thumbnail: Fill Frame Proportionately

 Transition: Fade

•  Transition Speed: 0.5 Seconds

•  Auto Play: Not enabled

•  Shuffle: Not enabled

•  Lightbox: Not enabled

•  Enable Swipe: Enabled

•  First: Not enabled

•  Prev: Not enabled

•  Next: Not enabled

•  Last: Not enabled

•  Captions: Not enabled

•  Counter: Not enabled

•  Close Button: Not enabled

•  Thumbnails: Enabled

•  Show Lightbox parts while editing: Enabled

•  Edit Together: Enabled

 

Figure 60. Update the settings for the Thumbnails Slideshow widget in the Options panel.

Different widgets have different options available and some are more complex than others. Take a moment to review the Menu options to see the available settings. Here’s a quick overview:

Add Images: Click the folder icon to browse and select the images that will be displayed.

New Hero: Defines how the larger photo content will be displayed in the target container.

•  Fit content proportionately: The photo image file remains at its original size, even if that size does not match the target container; a portion of the container may be empty where the image does not fit within it.

•  Fill frame proportionately: The photo image file is resized to fill the proportions of the target container; some of the photo image may be cropped.

New Thumbnail: Defines how the smaller thumbnail photo content will be displayed in the trigger container.

•  Fit content proportionately: The photo image file remains at its original size, even if that size does not match the target container; a portion of the container may be empty where the image does not fit within it.

•  Fill frame proportionately: The photo image file is resized to fill the proportions of the target container; some of the photo image may be cropped.

Transition: The animation method used when the content of a target container is in the process of being replaced by another target container. These are also enabled for touch screens, so if you create sites for mobile devices, visitors can swipe their screen to see the transition play as the next content item appears.

•  Fade: The opacity of the new container increases as the existing container decreases.

•  Horizontal: The new container slides in from the side horizontally, wiping over the existing container.

•  Vertical: The new container slides in from the side vertically, wiping over the existing container.

Transition Speed: The amount of time in seconds it takes to play the animation.

Autoplay: When enabled, this setting plays the slideshow automatically, rather than an interactive experience (that requires the visitor to click each trigger to view the corresponding target in the sequence). Set the number of seconds that you want each image to display before transitioning to the next image.

 

Shuffle: When enabled, the images are displayed in a random order, rather than cycling through the thumbnails sequentially.

 

Lightbox: When this option is enabled, the slideshow dims the rest of the page with an overlay when the contents of the target container are displayed.  When the lightbox window is closed, the entire page is revealed again.

 

Enable Swipe: When this option is enabled and the site includes a Tablet or Phone layout to display web content on a mobile device, the interactive parts of the widget will support touch screen gestures.

 

Parts section:

•  First: When this option is enabled, the First navigation button is displayed.

•  Prev: When this option is enabled, the Previous navigation button is displayed.

•  Next: When this option is enabled, the Next navigation button is displayed.

•  Last: When this option is enabled, the Last navigation button is displayed.

•  Captions: When this option is enabled, the photo gallery captions are displayed.

 Counter: When this option is enabled, the photo gallery counter is displayed.

•  Close Button: When this option is enabled, the close button is displayed.

 

Thumbnails: When this option is enabled, the thumbnail trigger buttons are displayed.

 

Editing section:

•  Show lightbox parts while editing: When the Lightbox option is enabled, each target area is only shown by default when its corresponding trigger is selected in the page. As you are designing the layout, you may find it helpful to enable this option in order to see the targets as you work. This setting does not affect the display of the slideshow when the page is previewed or viewed in a browser. If the Lightbox option is not enabled, this option is grayed out.

•  Edit Together: This option is enabled by default, to facilitate faster editing of widgets. Unless you need to set the appearance of each trigger differently, keep this option enabled so that any change made to one element is automatically applied to the others.

After reviewing the available settings, click the page area outside the Options menu to close it.

In the next section, you'll reposition the elements of the widget.

 

Back to top >>

Resizing and aligning the elements of a Thumbnail Slideshow widget

1. Click once on the entire Slideshow widget, to select it. Use the Selection tool to drag its handles to resize the entire Thumbnail Slideshow widget, until it is approximately 790 pixels wide by 490 pixels high. You can look in the Transform panel or the Transform fields in the Control panel to check the dimensions.

2. While the Slideshow is still selected, click again on the Thumbnail Container, to select the container that holds the three thumbnails. Use the side transformation handles to make it wider, and then use the Selection tool to drag the set of three thumbnails up until it is positioned above and vertically aligned with the center of the larger Hero Image container (see Figure 61).

 

Figure 61. Select the thumbnail trigger container and reposition it above the larger target container.

You can tell when the Thumbnail Container is aligned to the center of the Hero Image container, because a blue smart guide is temporarily displayed as you drag the element.

Follow these steps to add the graphics to the photo gallery while automatically generating the corresponding thumbnail and hero containers:

1. Click the blue arrow button to open the Options menu. Click the folder icon next to the words Add images... and navigate to the sample files folder on your desktop. Locate the subfolder named gallery and open it.

2. Press Shift as you select the following five image files:

slide-macaroon.jpg

slide-mini-cakes.jpg

slide-orange.jpg

slide-rice.jpg

slide-tea.jpg

 

3. Press and hold the Shift key as you select all five image files. Click Open to close the Import dialog box (see Figure 62).

Figure 62. Select the set of five gallery photos located in the gallery subfolder.

When you select multiple image files, you are loading up the Thumbnails Slideshow widget. This strategy enables you to select multiple image files and generate a Thumbnail Container button that corresponds to each new larger image file in the Hero Image container.

The five new images are added to the existing thumbnail buttons.

2. Click once on the Thumbnail Slideshow widget to select it, click again on the Thumbnail Container, and then once again on one of the three black and white thumbnail images that displayed by default when you first added the slideshow. Press the Delete key (Mac) or Backspace key (Windows) to remove each one as you select it, until only the five new color thumbnails remain (see Figure 63).

 

Figure 63. Drill down to select each of the default black and white thumbnails and press the Backspace or Delete key to remove them one by one.

Be careful not to delete the entire set of thumbnails; if this happens undo the last operation by choosing Edit > Undo, and then make sure to click into each thumbnail (the Selection Indicator will display the word: Thumbnail) before pressing Backspace or Delete.

3. Select the container that holds the set of five thumbnail images. Use the transform handles to resize it, so that the five remaining thumbnails are centered above the Hero Image container (see Figure 64).

 

Figure 64. Drag the handles to resize the Thumbnails Container to fit the thumbnails.

 

Back to top >>

Testing the Thumbnail Slideshow widget

After repositioning the slideshow elements and removing the placeholder thumbnail images, the gallery is finished. In the next section, you'll test the slideshow to see how it displays.

1. First, test the photo gallery in the Design view by clicking the thumbnail buttons at the top and see each corresponding hero image display in the larger container below.

2. Click Preview to see how the gallery will appear in a browser, from inside of Muse. Interact with the slideshow to see how the larger images appear when you click the corresponding thumbnail.

3. When you are finished, click Design to return to the Design view. Click away and then select the entire Thumbnails Slideshow widget (being careful not to select the Tabbed widget container that surrounds it). Use the Selection tool to center the Slideshow within the Gallery tab’s panel container. After making these changes, the gallery is complete (see Figure 65).

 

Figure 65. Position the gallery so that it is centered inside the Content Area container of the Tabbed Panel widget.

4. Choose File > Preview Page in Browser to see the about page displayed in your default browser.

5. Test the functionality of the Tabbed Panels widget. Click the tabs to see the corresponding content displayed in the content area containers. Then, test the slideshow in the Gallery tab, by clicking the thumbnail buttons to see the corresponding larger hero images displayed.

The about page design is now complete.

Next, you'll add the content and design the food page.

The food page in this sample project displays four menus for breakfast, lunch, dinner, and dessert. In this section, you'll add four text frames and format the text to update the appearance of the menus.

 

Back to top >>

Styling text frames with paragraph styles

In this section, you'll copy the menu text from external text files and paste the contents into text frames. You'll also style the text by creating and applying paragraph styles. Follow these steps:

1. While editing the food page in Design view, use the Text tool to create a text frame for the Breakfast menu below the header area, near the top of the page. Drag a frame that is approximately 800 pixels wide by 440 pixels high.

2. Temporarily switch from Muse to your desktop. Open the sample files folder and locate the file named text-food-breakfast.txt. Double-click the file to open it in a text editor. Select the entire text in the text file and copy it.

3. Return to Muse. Use the Text tool to click inside the text frame. Paste the text content you copied into the text frame. Leave one extra line return at the top of the text frame.

4. Use the Text tool to select the first line of text: Fruit $1

5. In the Text panel, choose the following settings to format the text:

Font: Droid Serif Bold (or any serif font of your choosing)

Font Size: 14

Font Style: Bold

Font Color: #A6342A (red)

Alignment: Left

Leading: 120%

6. While the text is still selected, click the New Style button in the bottom of the Paragraph Styles panel. Double-click the new paragraph style and rename it: food-header. This will make it easier to reapply the same formatting to other text headers in the menus.

7. Select the next breakfast item with the Text tool: Croissants $3

8. Click the paragraph style named food-header to apply the same formatting to the second breakfast item.

9. Repeat steps 7 and 8 to select and apply the food-header paragraph style to every breakfast item in the text frame (all lines that include the dollar sign).

10. Starting from the top, use the Text tool to select the first breakfast item description: Bananas, mandarin oranges, red delicious apples, mixed berry cup

11. Click the body paragraph style listed in the Paragraph Styles panel, to apply the formatting to the line of text.t

12. One by one, select each remaining description text below the breakfast items and apply the body paragraph style (see Figure 66).

 Figure 66. Apply formatting to style the menu with paragraph styles.

You may find it helpful to visit the live version of the sample site, and use its design as a reference.

To learn more about working with text, read the article titled Typography in Muse.

 

Back to top >>

Using the built-in Spell Checker and updating the dictionary

Muse 4.0 includes a Spell Checker that makes it very easy to locate and resolve typographical errors in text frames. The Spell Checker is always enabled. It displays a red underline on any words not found in its dictionary (see Figure 67).

 Figure 67. Words that appear to be misspelled are underlined in red.

To fix typos, use the Text tool to select the word (double-click to select it), and then right-click to see a list of suggested words displayed (see Figure 68).

 

Figure 68. The dictionary provides suggestions for words not present in the dictionary.

If one of the suggested words is correct, press the Down arrow or use the mouse to select the suggested word you'd like to use, and then press Return/Enter to apply it. If you make a mistake and choose the wrong word, simply undo the change (Edit > Undo) and then choose a different suggested word or edit the word using the Text tool.

If a word flagged as a typo is used only once (such as a person's name or location) and you know that it is spelled correctly, there is no need to fix it. The red underline you see in Design view is not displayed when you preview, publish, or export a site.

When working with commonly used words, such as business names or addresses, you can add the words to the Spell Checker dictionary so that they are not marked as typos.

Use the Text tool to right-click on a word you want to add to the dictionary, and then choose the Add to Dictionary option from the context menu that appears.

You can set the desired language (which in turn sets the Spell Checker language dictionary) for the entire site and for individual text frames.

To set the Spell Checker dictionary for the entire site, choose File > Site Properties. Click the Text tab, choose the desired language in the Language menu, and then click OK (see Figure 69).

 

Figure 69. Set the language for the entire site in the Site Properties dialog box.

Sometimes site projects require providing text in multiple languages. In these cases, you can set the default language (used most often) in the Site Properties and then set the Spell Checker language for specific text frames that display text in a different language.

To set the Spell Checker dictionary for a text frame, select a text frame with the Selection tool. Right-click and choose Language > (Choose desired language) in the context menu that appears (see Figure 70).

Figure 70. Set the language for a selected text frame in the context menu.

Next, you'll update the appearance of the text frame. Like rectangles and image frames, you can set the stroke, fill, and background image of text frames to style them.

 

Back to top >>

Updating the appearance of text frames

In this section, you'll update the attributes of a text frame, to make it stand out from the background graphics on the page.

1. Select the text frame containing the breakfast menu with the Selection tool.

2. In the Control panel, set the stroke width to 5 and the stroke color to black.

3. Use the Fill menu to set the fill color to the swatch you renamed cream-menu (or enter the hexadecimal color value: #E9916F). Click the folder icon next to the Image section and browse to select the file in the sample files folder named bg-texture.png. Click OK to close the Import dialog box. Set the Fitting menu to Tile, and then click anywhere else on the page to close the Fill menu.

4. If needed, use the Selection tool to drag the handles of the text frame and resize it, until the text fits. The dimensions of the breakfast menu on the live sample site are approximately 800 pixels wide by 440 pixels high.

The tiled background image with the cream fill color adds a parchment-like effect to the text frame and the dark stroke helps it stand out from the background.

Now you'll add a title to the top of the breakfast menu, to identify it for visitors.

1. Use the Text tool to create a text frame directly above the Breakfast menu, aligned to the top left side.

2. Type the word: Breakfast

3. In the Text panel, choose the following settings to format the text:

Web font: Kaushan Script (or any script font you prefer)

Font size: 32

Color: #70909D (In part 3, you renamed this color blue-menu)

Leading: 120%

Alignment: Centered

4. While the text is still selected, click the New Style button in the bottom of the Paragraph Styles panel to create a new paragraph style. Double-click the new paragraph style and rename it: menu-label.

The label above the breakfast menu helps orient users and makes it visually apparent which menu they are reading. After making these changes, the completed breakfast menu looks similar to Figure 71.

Figure 71. The breakfast menu is styled and the text content is formatted.

In the next section, you'll duplicate the breakfast menu, and then you'll update the text content in the duplicated text frames to create the lunch, dinner, and dessert menus.

 

Back to top >>

Duplicating text frames on a page

In the previous sections, you created the breakfast menu text frame, populated it with text from an external text file, used paragraph styles to apply consistent text formatting, and then updated the appearance of the text frame by adding a tiling background image, a fill color, and a stroke. You also added a second text frame above the menu text frame, to create a header for the breakfast menu. The next step involves duplicating this set of elements three times, to create a total of four menus.

1. Use the Selection tool to select the text frame with the word Breakfast and the text frame that contains the breakfast menu.

2. Press and hold Option (Mac) or Alt (Windows) and then drag the set of two text frames down on the page, to create a duplicate copy. Drag the copy down and keep it vertically aligned with the original (the smart guides that temporarily appear indicate when the sides and centers are aligned). The duplicate set of text frames should be approximately 430 pixels below the original set (see Figure 72).

Figure 72. Drag a duplicate of the breakfast menu down the page.

3. Use the Text tool to select the duplicated text field's label. Replace the word Breakfast with the word: Lunch.

4. Temporarily switch from Muse to your desktop. Open the sample files folder and locate the file named text-food-lunch.txt. Double-click the file to open it in a text editor. Copy the first line of text: The JR $9

5. Return to Muse. Use the Text tool to click inside the lunch menu text frame. Paste the text content you copied into the text frame, replacing the existing first food item listed: Croissants $3

6. Repeat steps 4 and 5, to copy each of the lines with dollar signs from the text-food-lunch.txt file to replace the items in the lunch menu.

7. Continue populating the lunch menu, by copying each of the descriptions in the text-food-lunch.txt file and pasting the descriptions one by one on top of the existing descriptions in the duplicated lunch menu. This strategy ensures that the styles you applied to the text content are maintained.

8. Repeat steps 1 through 7 to select the two lunch text frames, duplicate them, drag them down about 430 pixels below the existing lunch menu, rename the label to Dinner, and then copy the items in the text-food-dinner.txt file to populate the dinner menu.

9. Repeat step 8 once again. This time, rename the duplicated label: Dessert. Copy the lines of text from the text-food-dessert.txt to finalize the dessert menu.

10. Use the selection tool to reposition each of the four text frames as needed, so that the four text frames are aligned horizontally and vertically (see Figure 73).

 

Figure 73. Align all four menus on the food page.

You may have noticed that as you drag each duplicate copy down, the footer region you defined in Part 1 automatically moves down to create more vertical space on the page. As a result, the food page becomes longer in height than the other pages in this sample site.

In Building your first website in Muse Part 7, you'll add anchors above each menu to create a navigation system that enables visitors to quickly jump to each menu. Since the food page is a longer page, the content scrolls vertically to display the corresponding menu, based on the menu item that visitors click. You'll also explore how to work with the Links menu to create various types of links—including download links, which enable visitors to download a PDF file.

Back to top >>

 

 

 

 

 

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

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