Muse Day 1

Objectives

General Objectives:

• Students will be comfortable with the Muse interface, and have basic navigation skills within the program, as well as an understanding of the tools.
• Students will be able to apply simple graphic and text to a blank site with the use of Master Pages and layers.

Specific Outcomes:

• Introduction:
  • Students will be comfortable navigating Muse, including the Preview, Plan, and Design elements.
  • Students will be familiar with the contextual menus within Muse and the 8 tools available for use.
  • Students will understand Layers in the context of Muse.
• Page Layout and Plan:
  • Students will understand the Plan mode, the use of Master Pages, sibling pages and mapping the site layout.
  • Students will be able to add text/graphics to a Master Page and then apply the master to subsequent pages within the site.
• Simple Design Elements:
  • Students will be able to add images, shapes, and text to their sites.
  • Students will be able to fill the browser with color, as well as stretch an image or shape to browser width.

Outline

Prayer

Hook

Intro

Navigation:

• Navigating the Interface
• Plan, Design, and Preview Modes
• Layers
• Contextual Menus and tools

Page Layout:

• Master Pages/Sibling Pages
• Adding text/images to a Master Page

Simple Design Elements:

• Images
• Text
• Filling Browser/Stretching to Browser Width

Conclusion:

• Review
• Next time: Interactive Elements
• Office/Facebook

Example Hook

Show the completed Waffle Loft website, the class activity for Days 1-3. Show as a demonstration of what they will be able to create by the end of the class.

Example Questions

Why would Adobe Muse be a useful program for web designers who are not familiar with coding?

In what ways would the Plan tab be useful? (organization, master pages, linking, etc.)

Besides looking at the Preview Page, what other ways could you view your site as it would appear in a browser? (file>preview page in browser OR preview site in browser; ctrl>shift>E for page; ctrl>alt>E for site)

How do Layers become useful in Muse designing?

What are web fonts and why are they necessary?

Why are so few tools needed in Muse?

What are the difficulties found with placing an image? How to avoid them?

How do you make a shape that covers the whole browser, regardless of the browser size?

Example Activities

Have students work with you as you open a new site on Muse, and set it to fixed width; min height to 500; breakpoint to 1160; page width to 960; 1 column. don’t change any of the other settings. Once inside the just-created site, go to the plan page, and create three pages. Title them “Home”, “Menu”, and “About” by double clicking on the current title. Then apply the A-Master page to all three pages by dragging it on top of the other pages. A subtitle should appear under the page titles that says “A-Master” if it worked.

Open up the A-Master. Draw a rectangle that spans the width of the page and is 100px tall. Fill the rectangle with the file, Top Bar.psd, and tile it horizontally. Double check that the rectangle is stretching to browser width.

While still on the master page, click on the page. In the top options bar, a browser fill option should appear. Fill the browser with a color of choice.

Place the file, logo.svg, on the master page and position it in the top left corner. Both the logo and the rectangle should have appeared on all three of your pages.

Now, select your Menu page, and draw a large rectangle that spans the width of the page, and almost all of your height. Fill the rectangle with the waffle 3.jpg file, and select scale to fill. Center the image. Also set the image to stretch to browser width.

To practice inserting text into a Muse document, allow the students to type a mock menu however they would like. Explain the features of text boxes in Muse, and the different text options.

Refer to the Day 2 Beginning.muse file to see what students should be capable of accomplishing by the end of Day 1. Ignore the majority of the menu page on Day 2, as it is full of shapes, images, and text that will be edited in Day 2. However, the general application of those images and text should be very similar to what students can do.