Slide 1

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 2

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 3

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 4

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 5

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 6

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 7

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 8

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 9

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 10

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 11

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 12

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 13

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 14

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 15

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 16

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 17

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 18

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 19

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 20

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 21

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 22

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 23

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 24

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 25

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 26

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 27

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 28

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 29

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 30

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 31

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 32

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 33

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 34

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 35

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 36

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen


Slide 37

Important Information
• This presentation was created by
Patrick Crispen.
• You are free to reuse this
presentation provided that you
– Not make any money from this
presentation.
– Give credit where credit is due.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Question:
How many Web
pages are there in
the World?

Answer:
Squillions.

Question:
Would there be this
many pages if this
were difficult?

Believe It or Not ...
• You already know most of the stuff
needed to design a good web site
(and the rest you can just pick up
along the way).
• What we’re going to do today is just
remind you of the basics.
• This is easy!

Part One:
The Basics
If you break Web design into its
individual components, it
becomes a heck of a lot easier

Three Parts of a Web Page
• The Text
– This is simply the content you are
sharing with your audience.

• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.

• The HTML

The Text
• The “text” is just another way of saying
“the content.”
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z

• The danger with re-tasking is that no one
has ever read the original.

Creating Text
• You can use any
Word processor:
– Microsoft Word
– WordPerfect

• You can also use
any text editor:
– Notepad or
Wordpad (PC)
– SimpleText (Mac)

The Multimedia
• Usually just a
collection of
“compressed”
images.
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
(PDF)
– And so on ...

Creating Graphics
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
text
• JPEGs for photos
• This is covered indepth in Web Page
Design, Part Two:
Internet Graphics for
the Artistically
Challenged

The HTML
• Hypertext Markup
Language (HTML)
• Tells the software
(Web “browser”)
how to display a
Web Page.
• Should you learn
HTML? YES!

Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
This text is bold
• There are some great sites out there that can
teach you HTML:
– http://www.builder.com/
– http://www.webmonkey.com/

Creating HTML
• Text Editors
– Notepad

• Word Processors
– Word or
WordPerfect
– File > Save As
HTML

• HTML Editors
– Microsoft
Frontpage
– Macromedia
Dreamweaver

Part Two:
Creating GOOD Web Sites
It is easy, as long as you follow
a few basic steps

The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.

The Three Parts of Web Design
• Information
design
• Interaction
design
• Presentation
design

Information Design
• Message: what information do you
want to share?
• Audience: with whom do you wish to
share your message?
• Purpose: how and why do you want
to share this information with this
audience

Information Design
• Background: what does your
intended audience already know
about the subject you are
discussing?
• Structure: how can your message be
organized most effectively?

Look Familiar?
•
•
•
•
•

Message
Audience
Purpose
Background
Structure

The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Choir

Part Three:
Basic Design Rules
Stuff that no one ever tells you

Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
paper.
• Write 50% less text than you would
normally write for a brochure or
paper.

Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman)
• On screens, however, sans-serif
fonts are easier to read
• The most readable screen font is
Verdana (which ships with Internet
Explorer)

The basic scheme
• For the main content area of your
pages, ALWAYS use black text on a
white background
• If you have to change fonts, use a
sans-serif font like Verdana,
Helvetica, or Arial
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up,
most people are still using 800 by 600
• You have to account for the scroll bars
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT)

How big?
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.

Your “home” page needs:
• A directory of the site’s main content
areas (navigation)
• A summary of the most important
news or promotions
• A search feature (if possible)

Adding searches
• Google offers a
free site search
that you can just
plug into your
pages!
• http://www.google.
com/services/
free.html
• Just fill out a form

Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a
whole AND relative to the site’s
structure)?
– Where I have been?
– Where can I go?

Stay away from frames ...
• Many browsers cannot print framed pages
appropriately.
• Frames are so hard to learn that many
authors write buggy code when they try to
use them.
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.

Stay away from frames ...
• Some browsers make it difficult to
bookmark frames.
• Many Websites that offer users a
choice between regular and framed
versions have found that most users
prefer frames-free designs.

Our Goals ...
• Discover the basics of Web page
design.
• Learn the steps to creating a good
Web page and Web site.
• Talk about some simple design rules.
• Discover the best Web editor
available.
• TO DO ALL OF THIS IN ENGLISH!

Fair Use Disclaimer
This presentation was created
following the Fair Use Guidelines for
Educational Multimedia. Certain
materials are included under the Fair
Use exemption of the U.S. Copyright
Law. Further use of these materials
and this presentation is restricted.

Web Page Design, Part One:
People Actually Get PAID To
Do This?
a presentation by

Patrick Douglas Crispen