Muse Day 3

Objectives

General Objectives:

• Students will be familiar with web layouts and responsiveness.
• Students will be able to apply scroll effects.
• Students will know how to export/upload their site.

Specific Outcomes:

• Web Layout:
  • Students will understand Fixed vs. Fluid Width.
  • Students will have a basic understanding of Responsiveness.
  • Students will be familiar with Breakpoints and their uses.
• Scroll Effects:
  • Students will be able to apply simple motion scroll effects.
  • Students will be exposed to the variety of scroll effects.
• Uploading and Exporting:
  • Students will know how to upload their site to an FTP Host.
  • Students will know how export their site as HTML.
  • Students will be familiarized with BYU Domains.

Outline

Prayer

Hook

Intro

Web Layout:

• Fixed vs. Fluid Width
• Responsiveness
  • Consider using lds.org as well as responsiveorwhat.com to explain responsiveness
• Breakpoints

Scroll Effects:

• Scroll Effects
  • Motion Scroll Effects
• Exposure to all Scroll Effects

Uploading:

• Uploading to FTP Host (start video at 4:30)
• Exporting as HTML
• Explanation of BYU Domains

Extra:

• Opacity Scroll Effects

Conclusion:

• Recap
• Office/Facebook

Example Hook

Show the two websites listed below as examples of scroll effects:

Scrolleffects.com

Dangersoffracking.com

Example Questions

How do you obtain a BYU Domain? What is a free BYU Domain?

Why is responsiveness important?

What is the difference between breakpoints and responsiveness? How are they connected?

What is the difference between fluid and fixed width?

How does not having a break point disrupt the site’s effects?

What are scroll effects?

Example Activities

Using lds.org, explain to students what break points are. Open up Day 3 Beginning.muse file. On the Master Page, demonstrate to the students the changes that occur in the layout of our page when the width of the browser is changed. Move the break point bar (grey rectangle on top right) in to the point where the page layout gets disrupted. Make note of that distance (it should be around 970). Now right click on the purple bar, and add a break point. Set the break point to 970 — the previously noted number.

Now click on the new layout under the new break point by clicking on the blue. You can now change the design of the page without affecting the layout of the first break point. Drag the menu buttons underneath the logo and center the objects. Click back to the first break point and watch as it returns to its original layout. As you shrink the browser, the layout will change to the new layout to fit.

Using scrolleffects.com and/or dangersoffracking.com, show students what a scroll effect is. We will add a very simple scroll effect. Go to the About page of your site. There should be a waffle and a dollop of cream placed on the right.

Click on the waffle and then scroll effects in the panel on the right side of the screen. Select the motion scroll effect, and then check the motion box. Set the initial motion to up, with a speed of .3. Make sure the horizontal components are set to 0. Set the key position to 547 px. Set the final position to 0 vertical and 0 horizontal.

Click on the cream. Select scroll effects, and motion. Check the motion box. Then make sure the initial vertical velocity is down at a speed of 3 and the horizontal velocity should be 0. The key position should be 547 px, and the final position should be 0 vertical and 0 horizontal.

Walk the students through the uploading process to an FTP host, and exporting to an HTML. Don’t actually upload anything because they shouldn’t upload the Lofty Waffle site.