Building your web site...

1.      Revise your existing web site.  
2.      Build one from scratch using your own design ideas!     
3.      Modeling from layouts and styles you like from existing web sites...
4.      Use templates --free or buy a set

Penciling it out!

And, What in the world has that to do with web design?

Fibinacci and the Rule of thirds   (0·61803)

      

Always Use the Rule of thirds to aid your layout.

A visual collection of very sucessful web sites....

What are the 7 main elements that make a web page useable???
Before you take a peek, write down what you think they are...

Okay you can peek now...

Color schemes

Use a color wheel to determine complementary colors. Don't make your web page hard to read by putting text over clashing or similar colors.

The color wheel

Before you click the pic below  Turn your sound down!!

(here's a good example of what NOT to do on your web page) There is some good info about color at this web site... Even if it's a bit noisy!

For help in choosing  color schemes  and readable backgrounds
and using colored text check out this web site http://www.colorsontheweb.com/

Here's a color generator with a lot of information about "seeing" color
http://www.wellstyled.com/tools/

Color Theory and More...

Ever wonder why some color schemes work better than other? Or what colors mean to other cultures?

This link was suggested by Sarah at teachersguild.org Check out these color tips at printerinks.com!

Handy Color Charts

Now, Sit down with a pen/pencil and paper and sketch out ---block it out--- layout, design elements, colors and links.

Make it simple, the eye is attracted to groupings of 1, 3, 5 ie, odd numbers of elements. Make it clear what the visitor is to do when they open your web page. Don't make them guess, don't make it hard for them to contact you.

Use ideas from other web sites, including your competitors and sites you like. If there is something you don't like list those too.

Some home page Layout ideas..
Get out a pencil and some paper and draw your own

Remember, people read web sites! "Of users' first three eye-fixations on a page, only 22% were on graphics; 78% were on text. In general, users were first drawn to headlines, article summaries, and captions." --Jakob Nielson

Collect Stuff for your web page. 

Make a file folder called "Web Stuff" in it put a file folders called graphics, bars, photos, backgrounds, buttons,  snippets, interfaces, dividers, templates, etc

Include research and articles and links to related web sites.  You can find web page templates, graphics, buttons for free or for pay...

Here are some places for you to check out.

• http://www.webpagebackground.com/
• http://www.backgroundcity.com/
• http://www.allfreebackgrounds.com/

Templates

I have put together a little template search aid for you using a free Gallery layout program called JAlbum. Because JAlbum is a JAVA based program it is available for ANY platform running Java.  It makes setting up gallery web pages a breeze...

You can learn more about JAlbum here... 

The Template Finder...

The template finder will show you 18 different templates,
clicking on the small image will display a larger image of the template with more detail.
Clicking on the larger image will take you to the web site where you can
download that template or find another one that you like better...

Choosing Web Editing Software

Some conciderations...

Content on a web page is controlled by HTML. Content is the most important feature of your web site... you want the content to be easy to read, clear and concise. You will want to be able to easily change, add or update the content of your web pages. Once you have the "content" for your web site you can work on how it will appear, it's "style".

Style is controlled using CSS.

Here are some software suggestions for you to consider as you "grow" your website and you become familiar with HTML and CSS

In the beginning...

No matter what kind of Web Editing software you use, you need to have a good text editor. A wordprocessor like Word, WordPerfect, or Pages won't work as they embed code that makes browsers "go wonky".

On the PC, Windows provides Notepad and on the Mac you get TextEdit. You can build your web sites using just a text editor!

Text Editors

Notepad and TextEdit are free as they come with the Operating System. Try the following free 3rd party Text Editors. There are also commercial versions available from the same companies.

PC                Mac
NotePad++      Smultron
Komodo Edit    Komodo Edit

NotePad++ is a full featured "Open Source" text editor, but it's only available for the PC. Smultron is a nice small Mac text editor.

Activestate's Komodo Edit is a free "open source" text editor that is available both for the Mac & PC. In the class room Komodo Edit will be our editor of choice.

PC                Mac
NoteTab Lite      TextWrangler

NoteTab Lite http://www.notetab.com/index.php
TextWrangler http://www.barebones.com/products/textwrangler/

A Free WYSIWYG (What You See is What You Get) Editor

PC        Mac
Kompozer  Kompzer

Kompozer http://kompozer.net/
Start off with Kompozer as 1, it's free and 2, it's easy to use for setting up web page content. It works just like a word processor so it's easy to learn. It can load and edit existing html web pages or templates and it has a built in CSS editing tool. It's not as polished as Dreamweaver .

Moving up a notch ---Commercial Web Editors...

PC                                 Mac
Coffee Cup Editor HTML 2009        ???

Coffee Cup  http://www.coffeecup.com/
A PC only program "Coffee Cup Html Editor 2009" is actually 2 editors in one (a text html and a graphical Editor like Kompozer) and it's only $49.00 and has a jillion features.

???

CSS Style Editors

PC              Mac
TopStyle        Coda

TopStyle   http://www.newsgator.com/individuals/topstyle/default.aspx
Both TopStyle and Coda are CSS editors.  Both allow you to see the style changes as you make them,  and both have an easy to use "form" editor for choosing what styles you want to apply to an html element, ID or Class.  Even if you have Dreamweaver you'll want to also have TopStyle or Coda as Dreamweaver CS3 is weak in the CSS edit style department.
Coda         http://www.panic.com/coda/

King of the Castle

PC & Mac
Dreamweaver

Dreamweaver  http://www.adobe.com/products/dreamweaver/

Dreamweaver is the industry standard and it just got better with the release of CS4. If you plan on doing MORE than your own web page and you want to do server side programming. It's $499 and it get's upgraded every 18 months or so for an additional $199