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

Week 4 -Outline and Resources

Week 4 Outline

 

CLASS #4 Notes:
“Don't make it hard for your clients
to contact you" --anon

 

Building a banner, positioning content, menu layout and contact forms.

Subjects

1. Banner -Inserting backgrounds, images.
2. TRouBLe --Position Rules
3. Menus/navigation
4. Layout
5. Contact Forms! (Next week)

Objective

To build a web site consisting of at least 3 web pages.

This week

• Banner -Inserting backgrounds, images.
• Menus/navigation
• Layout TRouBLe --Using the Position Rules

How! Web Page Creation Preparation for Week 4

Resources for this week -- go to these URL's

The Banner Tutorial -images & backgrounds and html5
The Banner Tutorials

Generating Menus
The Menu Tutorials
The List-o-matic menu generator
List-o-matic

Layout
Using the Position Rules
Try some simple layouts

Homework

1. Generate a menu, and insert on your web page
2. Finish the layout of your "home" (index.html) web page
3. Duplicate your index.html web page 3 times... and re-name them Contact.html, About.html, Product.html
4. Read all about Contact e-mails and Contact Forms!
   The Contact Form Tutorial

Navigation Here

• Week 4
• Home

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

Create A Web Site - Week 3 Menus for Navigation

Making Links, simple and fancy navigation menus

There was a question in class about how to make links and make navigation elements from links

The following web page reviews how to make different kinds of hyper links

and on to the tutorial Making Navigation Menus

The tutorial shows you how to style your lists into "pretty" navigation links...
from simple to fancy... and, Yes, it's okay to cut and paste!

The bottom line is that making links can be very time consuming and confusing at first...
so it's much easier to either keep the styling real simple or let the computer do it for you!

On the last page of the tutorial you'll find some "web generators" that will make menus for you...
some of them are on-line like our text book author, Ian Lloyd's world famous "List-O-Matic"

You can find many menu generators are that are "free" programs you can download...

Got a question? Yep, as usual... 'holler!