You and your students will together build a site using Muse.
- Students will build their own portfolio-based website using Muse in stages, led by the learning construction provided by you.
- Stop after each step as students develop their own content.
- Advise students to save a new version of their site after each step.
- Tell students to use any free opportunities to explore other features in Muse CC.
Here is a suitable sequence for teaching the construction of a portfolio-based website using Muse CC. Note that this is not intended to be a set of tutorial instructions. For that, see Resources.
- Create a new site (both a master page and a home page)
- Add 2 connected pages using the plus + symbol on the right side of the home page and add placeholder text to each page to identify these: Home Portfolio My Profile.
- Add header (banner) and footer rectangles to the master page. Drag the window to simulate browser widths, and select option to fix rectangles to width of browser.
- Link all pages using the Horizontal menu widget by adding this to the master page and setting States for the Normal, Rollover, Mouse down and Active states.
- Import images. Import a logo to the master page’s top banner. Add background images to each page, scaled to fill and centred.
- Add specialised fonts (built-in feature in Muse CC allows adding Edge fonts). Explain this feature when compared to Standard web fonts and System fonts.
- Add body text.
- Add the slideshow Gallery widget to the Portfolio page.
- Add Social Media widgets.
- Finally, resize to show how content is ‘broken’ when the window is resized.
- Show Muse CC’s responsive design feature.
- Explain that the critical Breakpoints for Desktop, Tablet and Phone are 1280, 1024 and 640 respectively. However, explain that creation of Breakpoints should be determined by content rather than these measures.
- As you resize the layout, draw attention to the way items are affected and create a Breakpoint and reposition these as required.
- Explain pinning, resizing and effects for a selected object for each Breakpoint.
Give the following guidance to students:
- Buttons on phones and tablets are for fingers, not mouse pointers. Thus buttons need to be at least 40 px x 40 px for these small devices.
- Tablets and phones are often used in bright light conditions (outdoors) and screen elements should have high contrast.
- Consider slow bandwidth for devices other than desktops. Some objects may need to be sacrificed.
- Consider the advantages of a ‘hamburger’ menu (vertical stacked navigation, not drop-down) on small devices, for touch navigation.