Today we put those tiny thumbnails to use and create our navigation using DW’s Spry menu system.

Review:

• Your thumbnails
• Positioning <div> containers

Theory:

• Creating another div container and inserting it into an existing page layout.
• Placing a Spry menu bar in that <div> container

Example:

• Create a navigation using Spry
• Use the template feature in DW to stamp out multiple pages.

Practice:

You create a Spry navigation.

Workshop

Workshop

One on one work.

We’ll get Brian Haselton’s presentation up here one day. In the meantime you can follow him on his extremely (not) active twitter account. @BrianHaselton

Next week Brian Haselton visits the class. We need to step back and focus on building our thumbnails and wireframes as described in pages 85 to 87 in the DW book. If you cannot visualize your site away from the screen, you will not visualize it on the screen. While Brian will primarily lecture on the basics of design from a broad perspective, the last half of the class you can present your final mockup to him for specific critiques. Ideally we can do this in front of the class and learn from each other’s mistakes.

Finish your front page mockup by next Monday. Try to do an interior page (gallery, article, contact info, about page, etc.) for bonus points.

Review: Positioning <div> containers

• Using auto margins on the right/left side of your <div> to center your site’s wrapper and other containers.
• Floating and clearing div containers.

• Static, fixed, relative, and absolute positioning.
• Static – what we’ve been dealing with so far, they stack and float around each other. No overlaps. Ordered flow.
• Fixed – set to the browser’s window/border. Most annoying use: backgrounds that don’t move when you scroll. Can overlap, out of the flow.
• Relative – like static but repositioned from where it is supposed to be by x/y offsets. Can overlap. Ordered flow.
• Absolute – if an absolute div is inside a non-static container div (i.e. set your wrapper’s position to relative instead of static), you can position an absolute div container via an x/y value from the non-static container’s border. Just like Fixed was set to the browser’s window/border. Can overlap. Out of the flow.

Example and Practice:

CSS positioning examples from W3 Schools. Then we’ll use the second half  getting our thumbnails and wireframes complete. If complete, work on the header/banner of your site. If that’s complete, finish your screen comp of the front page. If that’s complete, start building your navigation. If that’s complete pat yourself on the back; you’re halfway to home plate.

Review
Today’s review is a sit and watch review. I am going to create a simple layout in FW, slice it up, and move it into Dreamweaver. I will use a wireframe as a rough guide. Once complete in Fireworks, I will use the guides/rulers to get the actual dimensions for each of the <div> containers.

Theory
Tips & Tricks w/Fireworks, Layers & Objects, Opacity.

Example
CSS Box Model from Page 41 DW CIB.

Practice
Determine the height of your banner, create it in FW, and insert it into DW. First insert it as a normal image, then try inserting it as a background image.

Today is the day. We present sketches of our final project and take an in depth look at creating a simple version of the design in FWs. We then take that simple version, slice it, and start making div containers in DW.

Review

• Chapter 5 – pages 82 – 87
• Questions on book work or assignments

Theory & Example

Slicing a comp and creating div containers to hold them.

Practice

Create and slice a basic layout

The first week we looked at the big picture: web design as an industry, the tools this class will use, and proper “etiquette” when it comes to naming and organizing files. The second week, we cracked open Dreamweaver and learned its interface, how it utilizes common web technologies (such as HTML and CSS), and how it interacts with Fireworks.

This week, we’ll look at Fireworks in much the same way. We’ll learn how to draw and manage images within the application.  The goal of this week is two-fold: we’ll learn Fireworks while using the application to design and layout screen comps for our final project.

Review:

• We’ll open up both DW and FW to see how similar the workplace is on both applications and go back over  FW and working with graphics while actually using FW..
• We’ll look at the final project checklist.

Theory:

• We start working on our final project this week in terms of a formal process.
• Discovery – Engage your client and draw out what they want/need. You can use these discovery questions.
• Planning – How can you fit your tech to their vision? Can you?

Example:

• A sample website proposal.
• A deeper guided tour of Fireworks.

Practice:

• Draft a sample front page in FW.
• If time, lesson #2 in FW…if not, HW.