Web Page Design

7 Elements | Images for Web pages | Publishing your Web page

Seven Elements to Web Design

                            1.Backgrounds & Colors
                            2.Text Attributes
                            3.Images & Animations
                            4.KISS
                            5.Content
                            6.Organization/Layout
                            7.Charting the Flow

1. Colors & Background Images

Color can ruin some web sites. You want to be sure to use color but don't over do it.

Background images and patterns are nice but often make the text hard to read.

Be sure that any background image compliments your text and graphics.

Consider the download time.

2. Text Attributes

Just because you have 20 fonts doesn't mean you have to use all 20.

Format the text to that it can be seen by people without their bifocals.

Space your text for readability.
    Separate parts of your Web page (head, body, tail)
    Use rule lines or colored/textured line graphics.

Resist the urge to overuse any type of emphasis (Boldface, italics, Special Formatting) or else you ultimately lose the effect.

Do not discredit your content; Use Spell Check & Proofread.

Always have someone else read the pages and check for errors.

3. Images and Animation

Do not overuse graphic elements, images, and animations.

Remember the average Internet surfer is using a 14.4 bps modem.

Use images only when necessary to support content.

If you use pictures, keep images small in size.

4. KISS

KEEP IT SWEET AND SIMPLE

All emphasis is no emphasis.

Do not overshadow the content by the flash of your page.

5. Content

Things to think about before creating your own Web Presentation:

    What type of information or content do you want to put on the Web? What are the goals for your presentation?

    Sharing information about your classroom.
    Providing access to other resources.
    Online Activity for your students

Brainstorm and list a few of your ideas

6. Organization and Layout

Show users what's on your pages in as concise a manner as possible.

               Put the important stuff first. Web pages should grab the reader's attention with important
               content (and a bit of flash on the side).

               Use bullets or tables for lists whenever you can. If you choose to use lots of links on
               your Web pages, be sure to organize them by topic or category for easy reference.

               Organize your content into main topics.

               Try to keep the topic and content of each page focused, and make each page one
               complete thought or idea. Pages should be modular and be able to stand alone.

               How will readers get from one page to another?

7. Charting the Flow
 
Join Structure and Content

Create a storyboard - a sketch that shows the appearance of your web pages.

Create your outline by featuring major headings and sub headings and indicating whether pictures or other resources are present.

Share your storyboard with others to solicit input regarding its structure and organization.

Use a flowchart or graphical organizer

Images for Websites:

The WDVL - http://wdvl.com/Vlib/Multimedia/Images_and_Icons.html
A web developer's virtual library of mostly free images, icons, backgrounds, etc..Xoom's Free Clip Art Gallery -

www.xoom.com/clips/website
A hotlist of animated GIFs, & pictures for your own personal, non-commercial use.

Multimedia Sites - www.kent.wednet.edu/staff/deggers/multimedia.html
Graphics, Animations, Quick Time Clips, & sound

Resources for Web Design - http://www.bellaire.org/cs/webdesign.html
Graphics & Multimedia, Copyright info, Education specific design

Totally Free Stuff!! - www.totallyfreestuff.com/web
Free Web design Utilities

The Computer Teacher's Resource Page - http://nimbus.temple.edu/~jallis00
See Web Page Development Tools

Web Page Design - www.marshall-es.marshall.k12.tn.us/jobe/webpage.html
Design Tips, Graphics, Free Counters, Free GIF animator software.

ClipArt Connection - http://clipartconnection.com
A huge collection of free clip-art images is available at this site to enhance Internet and graphic projects. The GIFs are categorized by theme but you cannot search for a particular subject so finding something specific may be time-consuming.

Barry's ClipArt Server - www.barrysclipart.com
A collection of static and animated images resides on Barry's server for your use. There is a search facility available to find what you want, but the choice is more limited than on other clip-art websites. A useful place to start if you or your pupils are looking for something to perk up an internet or graphics project.

Welcome to Wilson's "Free Gifs & Animations - http://www.fg-a.com/gifs.html
A nicely organized list of GIFs & animations. You do need to provide a link back to their page.!

A-1 Icon Archive - http://www.free-graphics.com/
Icons, balls, backgrounds, bars, graphics, animated gifs, clip art, and more!
This site is constantly updated.

Animation Library - http://www.animationlibrary.com
A site featuring over 3500 free animations. drop-down menus near the top of every page on our site allow you to search for categories.

NetCreators Icon Page - http://animatedgifs.simplenet.com
Free animated GIFs, backgrounds, bars, lines, clipart, and cartoons.

Bellsnwhistles - http://www.bellsnwhistles.com
Spice up Any Webpage with these Multimedia Addons

About.com - http://webclipart.about.com/msub64.htm
School & School Realted web clip art.

Publishing Your Web Page

How exciting! After all your hard work, you are ready to "show off" your web page to your students and to the WORLD.

Local Use: If you or your school do not have an Internet server, a computer that is always hooked up to the Internet, you can open your web page locally. This means that only your students or your school community will be able to view your web page. Doing this allows you to use the Internet in a controlled and supervised manner.

To use your pages locally type the path of the home page file in the URL field of your browser. For example if your Web Page is saved on the floppy disk, type A:index.htm in the address field.

World Wide Web Presence

In order for the WORLD to have access to your web page you must have an account set up on an Internet Server.  Your choices are probably one of the following: School Account, Personal Internet Account, or Free Web Based Account.
 

School Account: Districts have different policies and procedures on Internet server access. You should contact your school administrator for information on how to publish your web page to the school's server.

Personal Internet Account: Most private ISP's (Internet Service Providers), such as AOL, Prodigy, Compuserve, AT&T, etc... provide their customers with 5 to10 megabytes of server space. You should contact your provider to see if your service includes server space for your own personal home page. If so, you will be provided with an account on their server. To access the account you will receive a User ID, and a password which will enable you to upload your web pages to that server. You must contact and question your ISP about the best method for publishing your web page.

Free Web Based Servers:  There are many web sites on the Internet that provide free web server space. They not only provide you with the server space but also with the development tools to create the pages. The only draw back to having a web page on a server such as this is that often times school filtering systems such as Bess or Cyber Patrol will block out web pages posted on these servers. These servers may be blocked out due to the fact that they usually offer free e-mail accounts which may be a resource the district does not want their students to have access to.

Visit the links below to find out more about Free Internet Servers.

Home on the range - Six sites that host your site for free
http://www.cnet.com/Content/Reports/Reviews/Homesteading

Free Homepages - More sites that will allow you to create and post a web page for free.
http://www.wilsoninfo.com/webspace.htm

Publicize your web page by registering it with several different search engines
http://www.fg-a.com/RegisterYourSite.htm

back to Scot's WOW page