---------------------

Calendar/Schedule

---------------------

Projects

---------------------

Student Work

Art 240 Projects

Navigation System Project

We will learn: how to design and develop an interactive graphic navigation system for the World Wide Web using HTML, Javascript, Dreamweaver and Photoshop. We will also learn how to optimizing Web graphics and how to use Photoshop's image slice option. Dreamweaver will be used to create an interactive rollover graphic with its image swap behavior.

Process:

• Part 1: Create a navigation system incorporating an identity/logo/brand for a fictional business. Make initial design sketches to be checked by the instructor. Your navigation layout should be no longer than 720 pixels and no taller than 100 pixels. You design will include five interactive buttons using Image Swap behaviors. What's New, Our Products, How to Order, Contact Us and a Home Page link are some examples. You may use graphic symbols instead of text for these buttons. Use of visual metaphor within your design is encouraged. Along with your sketches, research a similar business with a web-based presence to share with the class. For initial sketches you must develop two different ideas using the same company or business.
• Part 3: Recreate the layout your navigation system in Photoshop at the specified size at 72 dpi. You may use a printout of this layout for the mounted color comp.
• Part 4: Build all rollover states on separate layers and keep the text in editing mode to change if needed. Place guides for slicing and optimize the sliced images in Photoshop's "Save for web" feature. Remember to create an HTML table when you save your slices. We will add all interactivity in Dreamweaver. For more detailed instructions follow this lecture note on image slicing and optimization.
• Part 5: Open the HTML file that Photoshop created in Dreamweaver and add the image swap behavior to make your rollover states functional.

See calendar for due dates.