Website Introduction

A basic introduction to websites and website design for students grades 9-12.

1. Websites!!
Introduction to Websites
ITGS Internal Assessment Project

2. What Makes a Good Website?
Easy to Navigate
Aesthetically Pleasing
Color Scheme
Images
Background
Buttons
Rollovers
Obvious and Concise Navigation Bar
Clean Layout of Pages
Information is easy to find (logical order to
things)
Consistent Theme/Style

3. www.mms.com
• Graphically
Appealing
•Clear, concise,
obvious horizontal
Navigation Bar
•Simple and clean
yet interesting
•Background
enhances page vs.
detracting from it

4. Clean Layout
Appealing to the
eye
Easy to Navigate
Obvious vertical
Navigation Bar
Visual elements
add to design
www.celhs.osceola.k12.fl.us

5. Color Scheme:
Color Scheme: Be aware
Colors should enhance, not take
over
Text color vs. background color

6. What NOT to do . . .

7. Static Website Vs. Flash Website:
Static (standard html)
Static Websites (standard html):
May contain Flash elements
No animation
Rollovers
Rollover = One image switches to a different image
Load faster
Easier to create
More Common

8. Static Website Vs. Flash Website:
Adobe Flash Website
Flash is:
an animation program
Popular with Website designers.
Can include animated rollovers, repetitive
animation in background, and musical options.
Can be included as a small insert in a static
site.

9. Flash Website:
http://okaydave.com/okaydave2006.html
• Really Interesting
FLASH site.
• Great Layout and
Organization.
•Great Navigation-Bar
Style.
•Fully Flash Animated
Great Resource for Amazing Flash Websites:
http://www.commarts.com/

10. Now that we can recognize a great
website . . .
You will create your own!
Remember:
Your Audience
Your Color Scheme
SCREEN SHOTS- DO CONSTANTLY!!
Every single day you should have at least
12 Screen shots (even if you don’t use
them!)

11. Photoshop Layout
Your Website will be created using
PHOTOSHOP (No, this is not negotiable.)
Your entire page layout, for both pages
must be sketched out and APPROVED
before beginning on computer.
Size:
800px X 700px (or more)
Resolution: 72 ppi
Navigation should be consistent, you will
create 1 Photoshop file with different
Folders (within Photoshop) for the pages.

12. Example of a Sketchbook Layout
for a Website:
www.unframedjourney.com
(Mrs.
Model’s
Website)

13. Sketch!
Created Site!

14. Content Sketches!

15. Website Layout Sketches-
your sketches should answer these questions!
How will your site be layed out?
Where is the Navigation Bar? Is it vertical
or horizontal?
What is your color scheme?
Where will your pictures be placed?
Where will the text go?
What will the background look like (you
don’t have to sketch this- you can make a
small note to yourself for this)
What will your top banner look like?

16. Images &
Design Element
Ideas:
•“Post-It” Notes
• Polaroid's
• Thumbtacks
• Cork Board.
You can add things in Photoshop
to make your website “Pop”

17. Your Websites
Draw a FULL PAGE sketch of your Home Page
(This one should be the most detailed)
Put the navigation bar
The banner
What content?
Other Pages
“See Home page” for banner and nav bar
Content