Building your web site...
You have a couple of choices...
- Revise your existing web site.
- Build one from scratch using your own design ideas!
- Modeling from layouts and styles you like from existing web sites...
- Use templates --free or buy a set
Penciling it out!
The Golden Ratio
What number is next in this sequence?
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55...
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...
){kind=link}
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
Hex color values
Named Colors
These Colors Work in all Browsers
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.
|
 |
 |
 |
 |
 |
 |
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.
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...
Template Finder here...
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
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