Probably More Than You've Ever Wanted to Know About Web Page ...

viraginitysplashInternet and Web Development

Nov 10, 2013 (4 years and 5 months ago)


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


Participants will create a title & accompanied

Participants will edit text, background, and
background images.

Participants will create a hyperlink to other pages.

Participants will insert an image into their web

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

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.


Upload to FTP Server


Designing a Web Site

Steps to follow when designing a web site.

1) Decide on a purpose or main idea for your

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

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

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…





blah, blah, blah



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

So, add some more stuff, and your web
page will rock…

OK, Now What?

Now, you can make web pages with
, 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

With the free stuff here:

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:

OK, Now What?

Now, just in case, here’s what I use my
web page for…

Providing a vector for reinforcement of

Include course syllabi, class lecture notes,
PowerPoints, sample exams, worksheets, and
graphics. Anything I can make digital. 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


short commentaries, current events,
interesting science articles

easy response feedback mechanisms,
displayed on page dynamically

calendar and archived postings

easy hypertext markup


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…

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.

See any difference?

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.

Serif fonts
are easier to read
on screens that
are being
projected or on
web pages.




Times New






Designer Issues You Should Know.

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.

Section 508

(especially if
government funding
is involved)

Websites need to be
accessible to all
people so <alt> tags
on all images need
to be used.

Designer Issues You Should Know.

Designing Layouts

Too many animations
are distracting to your
audience, however cool
they may seem at the

Example of
BAD web page