Interactivity - Quiz

In wrapping-up our look at basic interactive components. Here are a few reminders:

• Organize your site. This begins with your navigation. Decide what qualifies as top-navigation and what will be sub-navigation.
• While simple hyperlinks work, spruce up your navigation with rollovers (make sure to preload the images).
• If you use audio, really try to use a compressed format (i.e. .mp3). Please don’t use MIDI sounds!
• Consider using Flash buttons or animations to add to your page (while 99% of browsers have the Flash player, think about your audience).
• If you will be using an item multiple times, consider turning it into a Library item.

Today’s Objectives:

• Insert a multimedia object into a Web page
• Construct a rollover navigation bar
• Demonstrate mastery of lesson 5 objectives

Classwork: Create a Web page with a rollover navigation bar and an embedded MIDI file that plays automatically on load. Take the lesson 5 quiz.

Prep Questions:

• See quiz.

Note: Well done on the quiz average score was 16/20 or 80%!

Interactivity - Flash Buttons

Adobe’s Flash is a powerful multimedia application that uses vector graphics to create highly compressed multimedia for the Web. Flash files can be placed into a Web page. They can consist of animated text, animated characters, sound interactive buttons, and much more. At this stage in the game, your imagination is the only limit. The extension for a Flash file is .swf, which stands for Shockwave/Flash. Because Adobe owns Dreamweaver and Flash, they integrate very well with each other. This helps make the creation of interactive Websites much easier.

Since Dreamweaver 4, users have had the ability to create Flash buttons and Flash text. Today, we’ll look at the benefits of using Flash buttons. When a traditional rollover effect is created, the author must construct individual images of each state (up, over, down, etc.). This can get rather tedious. In comparison, when creating a Flash button, pre-made buttons are shown with the option to download additional styles. This speeds up the process significantly. All the author needs to do is select a style, type the button text, select the font, where the button object is to be saved, the link URL, and background color. Voila! Instant Flash animated button. This usually takes less than a minute.

If you do add a Flash button to your Web page, keep in mind that user must have a Flash plug-in in order to view it. Most browsers include the Flash plug-in and it is safe to assume, in most cases, that people have the Flash plug-in. However, if they have an older plug-in they may be prompted to update and this can be annoying. Think of your audience (as always) before using Flash buttons.

Today’s Objectives:

• Create a Flash button
• Insert and format Flash files
• Create simple Flash objects in Dreamweaver

Classwork: Construct a navigation bar with rollover effects and embed a sound file (Lesson 5 - Assignment 2).

Prep Questions:

• Name the extension for a library item.
• T/F You should preload the images for a rollover.
• Define interactive.

Here are some links to help you with creating Flash buttons in Dreamweaver:

• Web Templates Zone
• Prime Graphix
• Adobe Flash Player Stats

Note: Lesson 5 quiz is tomorrow, Wednesday the 28th.

Interactivity - Navigation

Frustrated users are not a recipe for success. One of the more overlooked aspects of Web site design is site navigation. Either poorly labeled categories or icons that are not readily identifiable often lead to user confusion. Just as important is the clear presentation of areas or categories of the Web site. Too often categories are not well thought out, overlap, or are repetitive. This can result in long lists of links and user frustration.

To aid in accomplishing clear navigation, here are some tips:

• Before beginning coding, draw an navigational hierarchy for the Web site. How do the pages link? To what category will they belong?
• Too create strong categories, look at the purpose of your Web site, ask friends/potential users to explain what they are looking for. Use this to construct your categories.
• Keep the number of categories to a minimum. Remember quality is more important than quantity. These will be your top-navigation and will appear on every page.
• Clearly name your categories.
• Look at your categories and break them into sub-categories. These will be your sub-navigation. These links will only appear on pages belonging to their top-navigation.
• Keep placement of navigation consistent (up high but below the banner).
• Add a Home link.

Today’s Objectives:

• Differentiate between top-navigation and sub-navigation
• Create a Flash button

Classwork: Construct pages to link with navigation and build a Flash button (Lesson 5 - Assignment 1).

Prep Questions:

• Define rollover.
• Explain top and sub-navigation.
• Can one generally assume that the Flash player plug-in is installed on most browsers?

Here are some links to help you with creating effective navigation:

• Design Effective Navigation in 10 Steps: http://www.sitepoint.com/article/navigation-10-steps/
• Navigation and Symbolism: http://www.wpdfd.com/issues/24/navigation/
• 25 Examples of Creative Navigation: http://vandelaydesign.com/blog/galleries/creative-navigation/
  

Note: Lesson 5 quiz is Wednesday the 28th.