Jack Nilan            EMail : jacknilan@yahoo.com

Syllabus - Web Page Design - MP 2

Days 1 - 2 - Image Maps

You should create an Image Maps where you can click on a part of a picture and then go to an Internet site or one of your pages Click Here to see lesson.


Days 3- 4 - Floating Divs

Many times when we set up a page , we use floating Divs instead of tables to place things where we want them. For the front page of the Science Fair Project, which is coming next, we are going to use floating Divs instead of a table to position things on our front page.

Go here to see how the floating Divs are going to work.

After you have created and used an external stylesheet, we are going to do a couple of pages that have CSS Layouts created automatically for us online. Go here to see how we can float the Divs around for our Science Fair Page.


Days 3 - 6 - The Science Fair Project

(this project can take extra time if it is to be expanded into a project that is going to be entered into the City Wide Science Fair)

You are to design a Science Fair project in HTML. It should teach about a scientific process. You can have, for example, an online experiment that takes the person watching your program through different screens.

You should use animated gifs and have a bibliography. For the real science fair you may want to have actual working models to accompany your computer presentation.

Some ideas.

  • A Periodic Table that when you click on an element it goes to information about it
  • An experiment where each screen depicts a different stage of the experiment
  • A exploration of the human heart (or brain or etc.) You can show actual pictures and video. You can have a page where you click on a part and it tells you about it.
  • You can have a survey or study with results. Example, does caffeine help? Survey honor roll students. Or does extra sleep help. Or does time playing games on computer hurt?
  • You can do an experiment with plants with different soil content and take pictures and put them on your HTML page.

Days 7 - 8 - Lists

  • Make a Quiz of 10 questions but use Ordered lists to number and print the letters for your selections. Go to this page here and look at how to use lists. Look down the bottom and you will see about nesting lists.
  • We want to have our page look like
    1. Who was first president?
      1. Jefferson
      2. Adams
      3. Clinton
      4. Lincoln
    2. Who was second president?
      1. Jefferson
      2. Adams
      3. Clinton
      4. Lincoln


    The code will look like :

    <ol>
    <li>
    Who was first president?
    <ol type = a>
    <li>Jefferson
    <li>Adams
    < li>Clinton
    <li>Lincoln
    </ol>
    <li>
    Who was second president?
    <ol type = a>
    <li>Jefferson
    <li>Adams
    <li>Clinton
    <li>Lincoln
    </ol>
    </ol>

  • The code you create will not work. It will not be "clickable." We are doing it to just learn about Lists. You can use a div and a background and decorate your page


Days 9 - 11 - Creating Animated gifs with Image Ready
  • Students will learn to create animated gifs with Image Ready
  • Students will create at least 2 animated gifs (one of which should have at least 6 frames)
  • Here is a link to directions on creating Animated Gifs

    Here is a link to creating Animated gifs with Microsoft Animator.

Days 12 - 15 - The Calendar

  • Create a web page using tables that represents a calendar for the months of December and January
  • Each month should be on a page by itself
  • Holidays should be decorated. Click here for an example
  • Make each page as good looking as possible
Days 16 - 17 - Image Maps and Text Boxes

  • We are going to create an Image map and as we mouse over it we are going to have Text boxes appear instead of allowing us to click on it and go to other sites
  • This feature is particulaly good for pointing out certain features in pictures or maps.
  • See the Lesson here
Days 18 - 19 - The Book Report

  • Pick a book that you want to do an on-line book report about
  • Your front page should have a picture of the book, or about the book
  • You should have links to About the Author, Plot, Characters, Pictures, Links and Your Review
  • You should create a seperate page for each of these (just don't link to other sites)
  • The Links page should have links to other sites on the Internet about your book
  • Make each page as good looking as possible
  • Have a counter on your front page (you can get counter and guest book from Bravenet.com)
  • Have a guest book link on your front page
Day 20 - Web Page Add Ons
  • Go to bravenet.com and become a member
  • Add a counter, guestbook and weather forecast to one of your pages
    Click here for Weather Bug Widget
Days 21 - 24 - Powerpoint about a Historical Figure
  • Use Powerpoint 2003 so it will play in school
  • Upload it to your web site then put a link to it
  • You may pick any historical figure you want
  • Make sure your put references on the bottom of each page any place you got specific information
  • Experiment with different effects but main focus should be on creating clear, clean pages
  • You should have at least 10 pages -pictures - biography - notes for further reading etc.
  • Go to this site and convert your powerpoint to Flash. Create a link to your Flash page
  • You have to present project to the class
Days 25 - 28 - Web Page about an Artist (Painter)
  • You may pick any artist you want
  • You must use an external style sheet for each of your pages (Click Here To See How to do an External Style Sheet).
  • You should have at least 5 links to pages you created yourself. Make sure that you credit any sources where you get information from.
  • One of your pages must be a table of the artists pictures . When you click on the picture it should go to another page that had the full size picture on it.
Days 29 - 33 - The Story Board
  • Create a story for first graders
  • Include a Quiz at the End with at least 8 questionsClick Here for Quiz Code
  • Use an External Style Sheet
  • Click here for rubric
Mid-Term Exam