Week 4 - Review and Homework

Building a banner, positioning content, and menus 

Layout Review

Using the Position Rules
Making layouts

The Banner Tutorial -images & backgrounds

This tutorial uses Xhtml strict a good exercise would be for you to convert it to html5
The Banner Tutorials

For WYSIWYG users -- use an existing wireframe? Start here...

Homework

1. Finish building the layout/wire frame of your "home" (index.html) web page
2. Use this layout generator---  CSS Layout Generator it can make equal height columns regardless of content… This is an example…URL is http://uofgts.com/BasicWD/layout/index.html

1. Add YOUR content for the JUST the header (banner)
2. Make Your Own Menus use the The Menu Tutorials (There are cut and paste examples)
3. Or use The List-o-matic menu generator List-o-matic
4. Don't like List-o-matic Try this generator try Pure CSS Generator
5. Make menus for Home, Contact, About and Products
6. Insert the menus on your web page
7. Now duplicate your index.html page 4 times, rename 3 of them: about.html, contact.html and products.html
8. Congratulations, you now have the beginnings of a web site!

You can use Wizards and Widgets to embellish your web site!
Web Tools, Wizards and Widgets

 

On-Line and desktop References for html and CSS

CSS at Sitepoint.com

HTML at Sitepoint.com

Sitepoint also offers a "plug-in called Code Burner, it's a quick interface that resides on your desktop or in your FireFox Browser. It is linked to the Sitepoint on-line references for CSS and HTML. Check out Code Burner!

Graphically Challenged?

The Cool Text web site will help you design a logo. The Cool Text Wizard

 

Gota question? 'Holler