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

Week 5 -- Review

Making Web Pages and a Web Site

Now you know that making a web page and a web site involves many different things...
Having a good Web Editor really helps. I hope you have found the free Coffee Cup HTML editor useful.


Web Page Layout Using CSS

CSS layout uses the "Box Model" to "contain" the major parts of a web page.

But, just because we call it the box model, doesn't mean that a web page has to look "boxy!" This web site, the Zen Garden shows how the same content can styled differently! You can see a collection of the different styles here!   Here's a couple of thumbnails that will give you the idea... there are hundreds of examples at the above link.

However, building a layout can be tricky as we have to apply "Position Rules", to move elements into different positions.

To speed up your web page building, you can start out with a basic preset CSS layout. I have found the following preset CSS layouts at http://www.code-sucks.com/ to be quite useful, On this web page I compare the differences between the two kinds of layouts, Faux and Fixed...  Basic Preset CSS Layouts

CSS Layouts are a good way to start building a web page and site ... the links on the basic preset css layout page will take you to the code-sucks.com web site CSS layout pages. You'll find a variety of layouts from single to four columns, headers footers and spaces for navigation and footers.  Choose a preset that fits how you want your web page to look, oops, to be layed out!

Sample look of layouts

Fill in your content in the appropriate spaces... then add the styling!
The possibilities are only limited by your imagination!
If you do a Google search for CSS Layouts you will find many, many more CSS Layout possibilities...

Good Luck, Have fun and
Practice, Practice, Practice

and if you need help or have a question, just 'holler

Garry Stasiuk