Class Notes

Using Wufoo for Forms

  1. Making a sign-up form through Wufoo
  2. choose a form, click on download html. It will give you a .zip file. Open that, and inside you will find the css, html, and images.
  3. Put the css and images into your folder.
  4. Copy and paste the html into your html file.
  5. Link to the css file much like you link to the blueprint css(in the head of the html).
  6. That should work.

Project 2 stuff

An introduction to web-design, we've got to learn the basic process of web-design as far as where to start, and how the workflow of creating a website works.

To simply the process, we end up with something like this:
  1. Site-Maps -> built from a list of all the content types and communication goals, as well as the user.
  2. Chunks & Patterns -> determined from themes and consistencies in the content as different vessels.
  3. Wireframes -> come from groupings of chunks onto pages.
  4. Layouts - > shaping the content across a grid to columns and bits.
  5. Design -> Adding type styles, colours, images, and all other styling decisions.
  6. Behaviour-> designing the right interactions, technical coding

When working using Blueprint CSS it is recommended that you begin your layout in Photoshop or Illustrator using the 24 column grid as your underlying layer. In that way, you can position things in the graphics software and know where you want it to be located for transfer to HTML/CSS. Download this blueprint-grid-comp.jpg

This presentation refers to separating the various elements for web design.

So more detail on static web grids, how to build them and why. Also how to align content to them.