Logo Image from cooltext.com


Mail image from bellsnwhistles.com

Music Files
Video Clips
Wave Files

Student's Pages


Student pages are listed at the left (an asterisk indicates a viewable page).

Students love to hear feedback about their work. When you visit a page, please use the e-mail button above to say you visited. Please include the student's name in the subject line when writing about a certain page and I will make sure a copy is delivered. Thank you.



HELPFUL LINKS

Free Stuff:
bellsnwhistles.com
flamingtext.com
cooltext.com
bestanimations.com
3dtextmaker.com
Course Syllabus & Outline
Color Matching:
Match Colors
Extended list of color names
Match Colors
HTML Tutorial
Basic Info
Design Colors:
Kuler
Boogie Jack Color Schemer
colourlovers.com
genopal.com
Beautiful Images:
Caedes
Visual Paradox
Digital Blasphemy
Style Sheets:
Basic Text Style
More Text Styles
Font Styles
Border Style
Margin & Link Style
List Styles
Meta Keywords--helper
Google Wonder Wheel
Extra Credit Javascript
First—letter code W3C Code Validator
W3C CSS Validator
Midi Player
Wav Player
Movie Player
Border Examples
Borders Style Sheet
Transparency Tutorial Aysmmetric Style Sheet
Aysmmetric HTML Page
Snowflake background
Snowflake Image
Refresh/Splash Transitions  



Extra Credit Javascript


11. Final Exam Project
DUE DAT: No extensions
Period A Final Exam Day June 16th, Wednesday
Period F Final Exam Day June 18th, Friday


Your final exam is a project about YOU. You are not allowed to copy and paste any text but, you may get images from the internet——I would prefer your own images. Use spellcheck. You may pick the format (normal, frames (w/splash——no menu maker), mapping, asymmetric tables, or 3 column tables with a header and footer. Your project should be a minimum of 5 pages and that includes the guestbook.

Web Page Design= design --no static pages

  • Create your original project——decide format
  • Each page you create will have a link to the CSS page
  • Validate every page
  • Use Spell Check
  • 1 CSS page for your whole project
  • Text you have composed——absolutely no copying from other sites
  • ALT for all pictures——you may use internet or bring in images
  • MenuMaker / Rollover links (frames) to access all your pages
  • Menumaker must contain all links on your site
  • Frame sites: nav bar on left must contain all links from your project
  • Use at least 1 tables
  • Use at least 1 lists
  • Use at least 1 image rollover
  • Updated——Guestbook from previous project——Change the style and setup to fit with this project (Must have all form elements)
  • Response—O—Matic guestbook page——No Mail
  • Titles (different page titles in the head of each page)
  • Meta Keywords & Meta Description in the head of your document on your index page
  • You may not use any previously created pages——all new work
  • Use one of the color sites for your color scheme
  • Link to class page
  • In order to receive an A——your project must be up and running on Jabry
  • Place a link to Jabry on your menu
Page ideas: Future Plans, Personal Information, Family, Pets, Sports, Interests, Friends, Favorite Sites,& Music, Likes & Dislikes, etc.

This is your opportunity to show me what you have learned. Have fun! Quality is better than quantity.




10.   WebQuest: Menu Maker & Image Rollovers
      DUE DATE: 6/8

This project lends itself to a webquest format.

Check with me on a webquest topic! Create a webquest information page(s) for elementary/middle school with both types of rollover & mouseover capabilities (text & images). Use multi-colored text rollovers and a number of image rollovers. Try to use sound——if it applies. It is your job to combine information and activities that will interests students. Use color, pictures, rollovers to make the the project work.

Web Pages are all about navigation, we will be using MenuMaker to navigate through this project. Pick a menu that goes with your topic. Pick a topic that you have never done before——something totally different. You need to create 3 new pages on your own (+ splash page + refurbish your guestbook page) and have 10-12 outside links. All links must be directly related to your projects. The nav bar is used to navigate through your pages and you will use rollover links to get to your outside links (target=_blank)

  • Your MenuMaker navigation bar must be on all your pages——it is only for the pages you create
  • Do not forget a button for your guestbook
  • All images should be rollovers——at least 3 on every page. (at least 9)
  • MenuMaker puts its menus in a table you must use another table (class="two")
  • Your 10 to 12 links must be grouped so you have 3 different classes(different colors)
  • Try——1 sound rollover (if you can)
  • Use PhotoShop to resize your images for rollovers (images should be the same size)
  • Update you Guestbook for this project
  • Splash Page
  • Meta Keywords and Meta Description on Index

My Example: Foliage Web Quest

Image Rollover Examples:      Image Rollovers | Rollovers with sound



9.   Questionnaire/FORMS
      DUE DATE: 5/27

  • You need to find a questionnaire with 10 to 15 questions and enter in the data for your form project #2. You must have a scoring element with at least 3 + categories.
  • People do not want to answer 10 to 15 questions and get one word for their scoring—so make sure you have a paragraph of information
  • You may compose your own questionnaire but it will take a while to come up with an accurate scoring plan.
  • Each form element must be used: text boxes, text areas, radio buttons, check boxes, pull down menus, submit and reset buttons.
  • Add style color, & backgrounds to each form element
  • Please use Kuler or an image for your color scheme
  • Submit & Reset Buttons must use color or an image
  • Response—O—Matic and the class e-mail address must be used to score the questionnaire.
  • Some questionnaires are done in poor taste and tend to be rude or demeaning. Please feel free to change anything that is not appropriate.
  • Please VALIDATE your project—every page
  • Use Spell Check
ROM Image


NO CUTTING & PASTING OF TAGGING FOR THIS PROJECT
You may copy the question but NOT THE TAGGING FOR THE QUESTION.
Please: ALWAYS cite your source.
Questionnaire Example




8.   Guestbook Page/FORMS——Classwork
      DUE DATE: 5/19

  • You need to construct a basic guestbook page.
  • Construct a guestbook for your mapping project (same style sheet & colors)
  • Use the form you started in your classwork folder
  • Look around and get ideas about what to include on the page.
  • All of the form element should be used:
    text boxes, text areas, radio buttons, check boxes, pull down menus, submit and reset buttons.
  • Make a Logo for your page (Flaming Text or 3D Text Maker)
  • Add style color,& backgrounds to each form element
  • Submit & Reset Buttons must use color or an image
  • Response-O-Matic must be used to see the answers from your visitor
  • Class mail @ yahoo must also be used
  • USE: webatorhs@yahoo.com
  • Complete your form, fill it out and printout your response sheet from Yahoo Mail, call me over and I will check it off.
Guestbook examples:
Patriots Feedback

Tricks for forms
Page 2 of Form Tricks

Button Site: flamingtext.com

ROM Sending Info


7.   Mapping Project
       DUE DATE: Thursday: 5/13

In this exercise you will be using one image and dividing it into many clickable regions. A click on one part of your image will bring the user to one destination while another area will bring the user to a different destination. We will be using CoffeeCup Image Mapper++ to map out the different regions of the image

Click here to see an example of mapping

We will be using the Dinotopia image to test CoffeeCup Image Mapper++. This software package creates your html tagging for you. Copy the image to your classwork folder on Mickey also, make a new folder for your mapping project.

Dinotopia picture for mapping
  • Find an acceptable image to use in CoffeeCup Image Mapper++.
  • Resize the picture in PhotoShop if needed (no scrolling)
  • The image needs to have 6 clickable areas.
  • Create 3 links to new pages you will create and 3 links to outside pages with the same subject matter——for a total of 6 links
  • Use meta keywords, meta description and content type on your index page
  • The mapping page should be called index or create a splash page called index.
  • References: pictures(ALT””) and information (on the bottom of each page)
  • Use the mouseover part of CoffeeCup to tell your viewer where they are going
  • Give your viewer instructions on how your page works
  • Horizontal navigational bar on ALL pages
  • Use Spell Check
  • Link back to the class page AND mail
  • Figure document weight for each page
  • Use Kuler or an image to get your color scheme
  • Use Spell Check
  • Please validate all your pages




6.   Frame Project—Encyclopedia
      DUE DATE: 4/30

Problems with frames: One opinion



This assignment deals with frames and the problems associated with frames. The first page (a splash page) should contain a META description, META keywords & META type. This project is encyclopedia style. You need to select a family of any living thing to display.
(Dogs, Cats, Trees, Spiders, Snakes, Birds, Dolphins, Rodents, Fish, Moths, etc.)

The setup page will consist of a small column on the left that is always available (links that are always available). This column will have at least 5 thumbnail pictures and names of each family member, both (name & picture) link to a larger page in the right column. The larger right column will contain an explanation of the family(1st page) and each page will contain the larger version of the thumbnail picture and accurate information about each family member——in a table format (habitat, eating habits, markings, growth patterns, etc.)Information must be uniform: habitat on all pages etc.
Please remember references on each right column page. Use Alt””(no marquee). You need a link to the class page. The class link should open outside the frame (open up in its own window). (http://staff.orcsd.org/sheldon/) target=”_blank“

Pages:
Splash (Refresh & Link to 20/80 page/Meta Keywords & Description & Type)
Set up page (Directions to the browser—% page no body)
Left side (5 thumbnails and names of family members-both link to right hand side) Left side is always available with links.
1 general page to explain the family (Latin name of the family & general information that does not fit in table)
5 different members of the family, consistent & accurate info


Check Off Sheet

Important:
Folder (last name in lower case)index page (splash page)
All pages and pictures in your folder
References for all material (books or on line addresses-on each right hand page)
Use Kuler or an image to get your colors
Use a transition— on you frame practice page (20%, 80%)
Consistency: same setup, same type of info, titles, fonts, colors etc.
Link to the class on the left (available all the time but breaks out of frame)
Mail on left (available all the time)

5.   Evaluating Web Sites
      

You will be given a number of sites to evaluate. Use your handout for the evaluation process. Pick 3 sites to tell the class about. Follow the procedures listed
Sites

Student Evaluation Form


Another opinion: The 10 Biggest Mistakes in Web Design | Nielsen's Site




4.   Asymmetric Table & Dreamweaver Templates
       DUE DATE: 4/5

This assignment is another table project with emphasis on the columns placement, borders and rollover links. Select your favorite saying, quote or excerpt. Create 3 pages on this topic: 1 asymmetric, and 2 pages of templates from Dreamweaver


  • Alts must be used on all pictures
  • Move the placement of your Asymmetric columns
  • You need a link to class
  • You need meta tagging (Keywords & Description)
  • You need to use mail with a subject line on your project
  • All links must be on all pages
  • You need to use borders on each page
  • Use 2 different style sheets: 1 Asymmetric, 1 for the 2 pages of the Dreamweaver Template



CSS Help: Boogie Jack Newsletter

3.   Tables, Music, Columns, Borders, Transparency
       DUE DATE: 3/23

Checkoff Sheet

You are creating a 2 page calendar project. The calendar part of your page must fill the page (without sliders). I can use sliders to get to your links. Your index page must contain meta keywords, meta description, and Meta Content Type,(in head of your document) and an animated gif (moving picture), 2 different background sounds (music without lyrics——please)one on each page, and an accurate calendar page with one day linking to a second page (that cell containing the link must use CSS. You must use spellcheck and Validate each of your pages.

Please provide a navigation bar linking both pages and a link to the class page and mail. Use CSS to color your links Place a video on one of your 2 pages, a video that goes with your project. The music should play in the background the video should start when the player is clicked on.

The second page must also use a table and have an itinerary of your ideal day. With no limitations on the cost and imagination, please plan out what your dream day would be like. (Times & Events & Links)     
Please provide links to sites/images that enhance your ideal day–use css styling on your links. Do not link to images on other sites. Save the image in your folder and link to it.



Table extras: Rollovers, Rowspan, Colspan, Gradients, Transparency

Table Tutorial Info



Music tagging: Midi Player | Wav Player | Video Player |
                                                     Are you looking for a special song for your project?

Great music site: Free midi music

2.   Links, Margins & Borders & Columns
      DUE DATE: 3/9

Topic: Hero Project

This project deals with columns, images, links, margins, and borders. You need to select a person you admire/hero.

Hero:
A man or woman admired for his/her achievements and qualities. One that has shown great courage or endowed with great strength or ability.

You may copy and paste information from other sites (use citations & links for your source) but one of your pages needs to be written by you. This project needs to have at least 3 new pages that you create:

  • Page suggestions: Vital stats, accomplishments, reasons the person was chosen
  • You can use the HTML and CSS we created in class (just update it)
  • Copy and paste it out of your classwork folder and into Name2 folder
  • Post your project on jabry.com (provide a link on your project)
  • Link to Checkoff Sheet
  • Use alt for your images—not long description
  • Links: your 3 pages, 3 school links, 3 outside links, mail, jabry, jump link
  • Horizontal Navagitation Bar (s)
  • Mail with a SUBJECT line
  • Use css to color your links—3 different colors
  • 3 different logos for the top of your pages—same style
  • 3 Alphabet letters
  • Jump link: top to your page or to a special spot on another page
  • Use the border shorthand command
  • Remove the background from an internet image
  • Please use special characters
  • Validate your pages
Classwork: Work with columns HTML | Work with columns StylesSheet | Placeholder text



Image Tutorial: Info


1.   Beginning HTML/Style Sheet/Template
      DUE DATE:2/12

Major Project: What would be your ideal vacation (winter or summer)?

Use your checkoff sheet.
You are going to create a 3 pages project with one style sheet.
Your navigation bar needs to be on all you pages.
Nav Bar includes: your 3 pages, 3 outside links (same topic), mail, class page
One page needs to be written by you.
You can copy and paste text from other sides but you must cite your source
Use Cooltext, 3Dtextmaker, or Flamingtext for logos for each page
You must use a list on one of your pages: ordered, unordered or image bullet
Float text beside your images
Use Special Characters where needed


Use spellcheck
Use ALTS for all your images
Your first page must be called index
Validate all your pages









OWL IMAGE FROM CLIP ART CD ROM