1. The Web Wizard’s Guide to Web Design
Chapter 6
Selecting Tools, Organizing Files, and Creating Templates

2. Basic Tools “There must be fifty ways to make a Web page.”
Apologies to Paul Simon
Three basic types of tools
WYSIWYG editors
Commercial Products
FrontPage, Dreamweaver
Open source
Nvu, KompoZer
Code editors
Assist in syntax
Commercial
HomeSite (Macromedia/Dreamweaver)
BBEdit (Macintosh)
Open source / free
NotePad++
“Save as HTML…”
Word

3. Basic Tools Using MS WORD … Word Manual Limited design choices
Very little control over HTML generated
No ability to see underlying HTML
Huge file size
“Save as … ” pitfall
Word
HelloWorldWord.htm
Manual
HelloWordSimple.htm

4. Basic Tools WYSIWYG Editors Beware! What You See Is What You Get
Pages may look one way in the WYSIWYG
but the HTML may acts another
Images appear in the editor but …
These are only links in the code (local)
Does it still work after posted?
Result: organization of files, images, etc. is crucial

5. Directing the Action So far the designer has acquired:
Purpose of the site/page(s)
Description of the target audience
Sketch/prototype of the Web page
List of functions for each page
List of elements
Now it is time to
Create an appropriate directory structure…

6. Organizing the Elements
Use separate folders (directories) for:
HTML core code
Group similar projects or themes together
HTML support code
JavaScript
CSS
Images
Videos
Sounds
Etc…
Pro: keeps things organized
Con: must re-create same structure on the Web server used
Development work rarely done on the same server that’s used for production.

7. Templates: Style Sheets, Tables, and Frames
“Dummy” page containing all the common elements
Shared code
Shared format
Has no content!
Create using
Style Sheets
Tables
Frames

8. Assignment
None!