Transcript Building Your Web Page

Building Your Web
Page
Build Your Web Page
Orfordville Public Library
held at:
Parkview High School
Tue. April 8
Tue. April 15
Tue. April 22
Building Your Web Page
•Intro's -- &Your Goals
• Your Name
• Type of Page you want to make
•Web Page experience
•Intro to Page we will work from
•www.ticon.net/~cyberian/webauthoring.htm
Web Design Jargon
► URL (importance of naming your files)
 Files and Folders
► Bookmarking (importance of naming page your page)
► HTML
► WYSIWYG
► Links
 Internal
 External
► Frames
– authoring tool
Web Design Jargon
► FTP
► GIF
(Graphics Interchange Format) – most used ---clip art
► JPEG
(Joint Photographic Experts Group) Allows for more colors --photos
► …More
as we go along..........
► Please feel free to stop me!
► Find more jargon here:
http://www.grantasticdesigns.com/glossary.
html
Design Content
► Pinpoint
needs of people visiting your site
► Decide purpose and goals of your site
► Determine audience's age and skill level
► Develop Good content--- keep in mind…
►Why
do I want viewers to use my site?
Develop Structure
► Storyboard
to organize your site
► Prioritize and categorize information
► Define links between categories
Design Content
►Get
started with Storyboarding
Create Design
► Develop
►Is
look and feel with color and font
it a part of a larger site???
► Design
using simplicity, contrast and
consistent alignment
► Be consistent when you position navigation
links
Four Design Principles
C. A. R. P.
► Contrast
► Alignment
► Repetition
► Proximity
The Four Design Principles
C.A.R.P.
►
Contrast
 If not the same, make them
►
very different
Alignment
 All elements should have a visual connection
►
Repetition
 Repeat color, shape, texture, space
►
Proximity
 Group related items
Create Design
C. =Contrast
► Guides
your eyes around the page
► Creates a hierarchy of information
► Allow you to skim information more easily to
pick out needed information
► Pertains to text type, graphics and colors
used
BAD Example
Welcome to my nasty example of contrast. Do
you find this pleasing to read or is it difficult?
Is there a better choice of font color?
Welcome to my nasty example of contrast. Do
you find this pleasing to read or is it difficult?
Is there a better choice of font color?
GOOD Example
Welcome to my nasty example of contrast. Do
you find this pleasing to read or is it difficult?
Is there a better choice of
font color
Welcome to my nasty example of contrast.
Do you find this pleasing to read or is it
difficult? Is there a better choice of
font color?
Contrast
► The
principle of contrast states that if two
items are not exactly the same, then make
them really different.
► Be
BOLD!
Contrast
►Large type and small type (size)
► Combinations
of fonts
(Italics)
 Robin Williams book, Webpage Design, is excellent
► Color
 Robin Williams book, Webpage Design, is excellent
Examples of Contrast
Create Design
A. = Alignment
► Nothing
should be placed on the page
arbitrarily
► Every item should have a visual connection
with something else on the page
► Make the site easy to the eye
Alignment – What To Avoid
► Avoid
page.
using more than one text alignment on a
 Don’t center some text and right align other text.
► Break
the center alignment habit.
 Formal / sedate / dull.
► Remember,
people are use to reading from the
left to the right
Create Design
R. = Repetition
► Throughout
the project, you repeat certain
elements consistently. If there are multiple
pages, each page should have a similar look
and feel.
► Allows for consistency
► Unifies all parts of a design and multiple
pages
Create Design
R. = Repetition
► The
principle of repetition states that you
repeat some aspect of the design
throughout the entire piece.
► The
repeated item could be a font, line,
particular bullet, color, image, or format.
Create Design
P. = Proximity
► Proximity
refers to the relationship that
items develop when they are close together.
► Two items that are close together appear to
belong to each other.
► There is a need to group related items
together.
Create Design
P. = Proximity
► Groups
related items together
► Makes pages look smaller
► Increases organization
► Helps viewers skim your page & make your
site easier to read
General Web Site
Do’s
► Look
at other sites on the Net to get ideas
► Break up info if possible
► Use “Alt.” tags on graphics
► Check accuracy of your info.
► Check spelling and grammar
► Maintain site
 Currency
 Links
General Web Site
Don’ts
► Overuse
graphics (saves download time)
► Use underline in text
► Use too much animation or annoying
background music
► Use copyright material
Web Design
in a Nutshell
Web Design
in a Nutshell
Web Design
in a Nutshell
Building Your Web Page
Let’s get started!
•Storyboard
• Practice with Netscape Composer