Web Class --The Layout Jumpstart

The easiest and best way to setup a website is with well designed layout, a wireframe that let's you plug-in YOUR content whether you are editing with an html editor or a WYSIWYG web editor.


The Free Coffee Cup Html Editor offers some free html5 layouts. They are the best I have found to date and, there is no reason why you can't use those layouts in other editors...

Remember, one of our criteria is that our web pages support html5...

You can open these in the Free Coffee Cup Editor with the menu item:

File > New from Theme/Layout

You can use these html5 layouts in any web editor including Blue Griffon.

If the layout isn't what you want, perhaps you need to have your navigation/menus horizontal. You can use Blue Griffon to generate your layout...

Step one (Blue Griffon):

In Blue Griffon you should first set the following in preferences

Menu:
Mac: Blue Griffon > Preferences
PC : Tools > Preferences

Step 2 Blue Griffon:

File > New wizard
First panel Choose xhtml5
Next panel (Continue to General document properties)
Fill out Title, Author, Description (what your web page is about  in a  paragraph) Key words (separated by a comma),  Language (American English), Characterset: Unicode (UTF-8) (continue to Colors and Background)
Leave alone (click Continue)
Document Background (Leave alone, Click Continue)
And here we are At Page Layouts




















You'll need to experiment a bit to get what you want,
 The set up at the left yields a page that looks like this...










There are other layout generators… (all on line wizards) These are the best… give them a try! You'll like one of them!

 Turns out Blue Griffon uses a simpler version of the YUI Development module (Yahoo User Interface) More control here!
A more robust layout generator can be had  at CSS Creator
And, here's another one called CSS Layout Generator
All of these will work in any web editor. Amazing what neat tools you can find on the internet!
Have fun filling in your content and building your home index web page!
Have a really nice long week end!

Week 3 Review -The Box Model and Basic CSS

Week 3 Outline

CLASS #3 Notes:
“People don't read web pages,
they scan them!" --anon

 

The Box Model. Div's and CSS

Subjects

1. The Box Model
2. Div's
3. CSS, some simple rules
4. How to Make a Banner/Header

---

 

Objective

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

This week

• How to use the <div></div> element. The Box Model
• Styling with CSS

---

How! Web Page Creation Preparation for Week 3

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

The Box Model
http://uofgts.com/BasicWD/BoxModel.html

Basic CSS Rules
http://uofgts.com/BasicWD/CSSRules.html

---

Homework

Work through the Banner Tutorials

---

Navigation Here

• Week 3
• Home
• The Box Model
• Basic CSS Rules
• The Banner, Parts 1 - 7

 

---

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