Muse Day 2

Objectives

General Objectives:

• Students will be capable of adding interactive elements to their site.
• Students will begin to explore the factors that affect their site when viewed in the web and how to create an aesthetically pleasing and functional site.

Specific Outcomes:

• Interactive Elements:
  • Students will know how to add and edit a Muse Menu.
  • Students will be familiar with the available widgets in Muse.
  • Students will be able to add a Photoshop button and assign it specific states (normal, active, rollover).
• Web Functionality:
  • Students will be able to align their interactive elements as well as pin them to page/browser.
  • Students will understand anchors and how to use them.
  • Students will be able to add hyperlinks to their elements that link to either other pages in their site, other sites, or anchors.

 Outline

Prayer

Hook

Intro

Interactive Elements:

• Muse Menus and how to customize them
• Widgets
  • Useful widgets like menus and slideshows
  • Exposure to available widgets
• Photoshop Buttons

Web Functionality:

• Alignment
• Pinning
• Anchors
• Linking
  • To pages within the site
  • To anchors
  • To other sites

Conclusion:

• Recap
• Next Time: Web Layout and Scroll Effects
• Office/Facebook

Example Hook

Show lds.org as an example of well-pinned objects, interactive elements, and graphics.

Example Questions

In what ways are Muse widget menus useful?

How are anchors different from and similar to other links?

What constitutes a Photoshop button? What is needed to make a functional Photoshop button?

How is pinning to the page different from pinning to the browser?

What are states? Normal? Active? Roll over? Mouse Down?

Example Activity

Continue building a website for The Lofty Waffle

Have students open Day 2 Beginning.muse, and review what was done on day 1 (master pages, placing text and images, etc.)

On the home page, (on a layer behind the master page elements), insert a slideshow widget from the widgets panel. Set it to have no extra buttons or captions, and make it fit nicely underneath the menu bar, stretching across the width of the browser.

On the master page, insert a menu widget from the Muse widgets menu, and play a bit with customizing it. Link each of its parts to the various pages of the site. Don’t spend too long on this, though, because these menus aren’t nice by default. Instead, create a custom menu using photoshop buttons! Go File > Place, and in the class files navigate to the three photoshop button files. Place them one at a time, and set their states so that the default uses the layer named after each button’s purpose, then all other states use the rollover layer. Do at least one of these buttons together, then give students time to place the other(s) on their own. Once all three have been placed, select each and make it link to the correct page. Use the align tools, or the align panel, to make all the buttons sit nicely next to each other.

Preview the site, and you’ll realize that it would be nice to have the navigation stuff stay at the top of the page when you scroll down (this is particularly apparent on the menu page, where there is actual content). To make it do so, select each header element on the master page and pin it to the top of the browser (pin the image-filled rectangle to any of the top things, it doesn’t matter since it stretches all the way across. then pin the logo to the top-left and the buttons to the top-right. Now, when you preview you should see them stay in place as you scroll down. As you stretch and squish the browser’s width, you’ll see the buttons stick to the right side.

Now, you want to make scrolling around the menu page more convenient by turning the four rectangles on top of the picture into links to other parts of the page. First, you need to put in anchors above each of the headings. These are what the links will link to. Leave extra space so that when the anchor is at the top of the browser window the heading is visible below the top bar. Once the anchors are in place, select each of the rectangles and make them link to those anchors. Finally, create text frames that say “Back to top” at the right of each heading, and link them to a new anchor at the top of the page (or, just create one such text frame, and pin it to the bottom-right of the browser so it’s always visible).

You did it!