Introduction to Web Page Design
Download
Report
Transcript Introduction to Web Page Design
Probably More Than You’ve Ever Wanted to
Know About Web Page Design, But Were Afraid
to Ask…
Presented to the Faculty & Staff of
South Pointe High School
Objectives
Participants will create a title & accompanied
content.
Participants will edit text, background, and
background images.
Participants will create a hyperlink to other pages.
Participants will insert an image into their web
page.
Participants will how to upload their web page to
their account.
Participants will make changes to their existing
web page after it has been published.
What is a Web Site?
A web site is a digital page consisting of
HTML (hypertext markup language) files,
images, movies, sound, and other media.
The code in these HTML files are read by
your internet browser and displayed in the
format you see every time you go onto the
internet.
How Web Sites Work
Web designer creates web page (.html files)
The web page is uploaded to a FTP server.
The end user then sends a request to the
server asking to see the web site based on
the web address.
Creation
Upload to FTP Server
End-User
Designing a Web Site
Steps to follow when designing a web site.
1) Decide on a purpose or main idea for your
site.
2) Flowchart your content graphically.
3) Decide on a design interface (navigation,
links, buttons, etc.)
4) Begin web site creation.
Designing a Web Site
1) The first thing to do when designing a
web site is to decide on your Main Idea or
purpose of the site.
Is it to interface with parents &/or students,
offer additional assignments, promote your
class, attract new students?
?
Designing a Web Site
2) Secondly, brainstorm subtopics that
relate to your site. Make a flowchart and
write out the content for each page.
Designing a Web Site
3) Decide on your design interface, colors,
images, etc. Draw it out on paper if
necessary.
Designing a Web Site
4) Begin website creation.
When you have all of the preliminary work
done, you have the "map" or direction in
which to go. This will make it easier as you
start your digital design.
OK, Now What?
So, you’ve got your design all planned,
and your site storyboarded out, so how do
I actually make the thing?
It’s much easier than it might appear…
OK, Now What?
HTML markup language is very simple,
and, among computer languages, actually
rather intuitive, once you get the general
idea.
It relies on “markup” code, which the
browser (Internet Explorer, Firefox, Safari)
interprets to modify and arrange your text,
graphics, video, whatever..
OK, Now What?
Here is the HTML code for a basic page…
<head>
<title></title>
</head>
<body>
blah, blah, blah
</body>
</html>
• Which makes a page that looks like this:
OK, Now What?
OK, not overwhelmingly interesting yet.
It’s a blank page, like you start off with
your word processor documents, which
also use markup language that you don’t
see
So, add some more stuff, and your web
page will rock…
OK, Now What?
Now, you can make web pages with
Notepad, using the markup language like
we saw before, but that can get tedious
So, folks have developed web design
software to make it relatively painless…
OK, Now What?
There are tons of them out there,
including: Microsoft Frontpage &
Expression, Dreamweaver, PageMill,
ColdFusion, etc.
One I like is called CoffeeCup. They are
very intuitively designed, fast, low footprint
on your computer, and, they have a free
version available.
OK, Now What?
CoffeeCup Web Software can be found
here:
http://www.coffeecup.com/
With the free stuff here:
http://www.coffeecup.com/freestuff/
OK, Now What?
Plan A was to have you all play around
with the free version of CoffeeCup, create
your first webpage, and then even have
you upload it to either the South Pointe or
my website.
Well, best the best laid plans of mice and
men were laid waste by our friendly and
helpful IT department, so, well, nevermind.
OK, Now What?
To give you a quick idea of what you might
do with a web page, let’s look at mine,
located at:
www.nakedscience.org/mrg
OK, Now What?
Now, just in case, here’s what I use my
web page for…
Providing a vector for reinforcement of
curriculum
Include course syllabi, class lecture notes,
PowerPoints, sample exams, worksheets, and
graphics. Anything I can make digital.
Nakedscience.org Includes:
separate
pages per course with full
course content
field trip, lab photos, & video
classroom procedures
SAT/ACT information
articles of interest
contact information
a Blog for less formal communication
http://nakedscience.blogspot.com/
Includes:
short commentaries, current events,
interesting science articles
easy response feedback mechanisms,
displayed on page dynamically
calendar and archived postings
easy hypertext markup
More?
Maybe we should end it here.
If you want more, check out a web page of
this presentation with design tips, additional
reference and software links, plus more fun
and adventure in web design…
http://www.nakedscience.org/mrg/WebDesignIntro.htm
Designer Issues You Should Know.
You should always consider your audience, both
with regard to content and to design
technicalities. For example:
Computer screen size. As a general rule, a site
should be developed at 640 pixels wide.
This will also allow your end user to print out the
page so it will fit on a piece of paper.
Any pages over 780 pixels wide will look poorly
or will be hard to navigate on screen sizes that
are set at 800x600.
Designer Issues You Should Know.
Optimize your images for the web. Make
your pictures download fast for your viewers.
Use 72 dpi when scanning or creating an
image for the web.
46KB
6KB
See any difference?
Designer Issues You Should Know.
Contrast colors for
better readability.
Keep it simple.
As a general rule,
using a light
background with a
dark text or a dark
background with
light text.
Designer Issues You Should Know.
Sans-Serif fonts
are easier to read
on screens that
are being
projected or on
web pages.
NEVER USE
CAPS
Serif
SansSerif
Arial
Times New
Roman
Garamond Verdana
Georgia
Tahoma
Designer Issues You Should Know.
Your user should be able to navigate to
the main sections (especially the home
page) on your site from every page.
Designer Issues You Should Know.
Section 508
Requirement.
(especially if
government funding
is involved)
Websites need to be
accessible to all
people so <alt> tags
on all images need
to be used.
Designing Layouts
Too many animations
are distracting to your
audience, however cool
they may seem at the
time.
Example of BAD web page
design