 |
Natomas Charter School Individualized Learning Program Advanced |
|
|
Instructor Mr. Aaron Del Monte Advanced Web Design Resources
Lessons |
Workshop Information Bi-weekly technology workshops will be held on Tuesdays in the ILP Learning Center from 3:05-5:00 PM. These workshops will contain students enrolled in the Web Design and Advanced Web Design courses. Attendance at these workshops is mandatory. Workshop Dates: 1/10, 1/24, 2/7, 2/21, 3/6, 3/20, 4/17, 5/1, 5/15, 5/29 Office Hour Mr. Del Monte is available in the ILP Learning Center from 2:00-3:00 PM on Web Design workshop dates (see above) for 1-on-1 help with students enrolled in Web Design or Advanced Web Design courses. |
Weekly Projects
(for weeks 5-9 and 11-16)
|
Directions Choose one project to complete each week. You will need to do some additional research to gain the knowledge needed to complete these projects. The website www.htmlgoodies.com is highly recommended, but there are lots of other great resources available in print or on the Web. The projects are listed in order of difficulty, so the easier projects are listed first. Each project is worth the same amount of points. Each week, choose a project that is challenging, interesting and that teaches skills that you would like to incorporate in websites outside of this course. Carefully follow the directions given for each project. Each project challenges you to create one web page. The web page that you create must contain the directions for the project. This will help your advisor to grade your assignment quickly and fairly. |
Text Over Images (HTML): Create a web page that contains two images. Using HTML, place text directly over each of the images. For help on www.htmlgoodies.com, go to Web Graphics->Text Over Images, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the 2 images with text.
Buttons as Links (HTML): Instead of using text or images as links, HTML gives you the ability to use buttons. For this project, you must create a page containing 5 different links. Each link must be created as a button. These 5 buttons must be presented in two different ways. First, the 5 links must be presented as as horizontal row of buttons. Next, the 5 buttons must be presented as a vertical row of buttons, aligned to the center. For help on www.htmlgoodies.com, go to Buttons->So, You Want A Link Button, Huh?, as well as Buttons->So, You Want To Line Up Link Buttons, Huh?, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight the code used to create and align the buttons.
Opening a New Window (JavaScript): Sometimes it is useful to create a link that opens a second window instead of using a standard hyperlink. Create a page with a link that opens a second window. Then on the second window, include a link that closes the window. For help on www.htmlgoodies.com, go to JavaScript->JavaScript Primers #11, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create both pages, and highlight any JavaScript on each page.
Embedding a Sound (HTML): Create a web page that has two embedded sound files. The first sound plays automatically when the page is loaded. The second sound plays when someone clicks a hyperlink on the page. For help on www.htmlgoodies.com, go to Web Graphics->So you want a Sound/Embed, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight the code used to activate the 2 sound files.
Thumb-Nail Images (Image Editing): Create a web page that contains a 3x3 table containing 9 thumb-nail images. If you click any one of the images, then you can view a larger version of the same image. For help on www.htmlgoodies.com, go to Web Graphics->So you want a Thumb-Nail Image, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight the code within the 3x3 table.
In-Line Frames (HTML): In-line frames give you neat a way of displaying a page within a page. Create a web page that contains at least 2 in-line frames inside of the page. For help on www.htmlgoodies.com, go to Frames->So, You Want In-Line Frames, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight the code that displays the in-line frames.
Image Flip (JavaScript): Create a web page with 3 image flips. An image flip is an image on a web page, and when you roll your mouse over the image, another image takes its place. For help on www.htmlgoodies.com, go to JavaScript->JavaScript Primers #15, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight any JavaScript that you used.
Quote of the Day (JavaScript): Create a web page that randomly chooses one of ten quotes and displays the quote on the page. On your web page, the page should contain the words “Quote of the Day: ” followed by the randomly selected quote. For help on www.htmlgoodies.com, go to JavaScript->JavaScript Primers #23, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight any JavaScript that you used.
Transparent Images (Image Editing): Create an image that is “transparent”, which means that you eliminate the background color of the image. Then the new image seems to “float” on your page. Note: You will need to use PaintShop Pro (free), Adobe Photoshop, Macromedia Fireworks, or another image editing program to complete this project. Then, on a web page that you create, display two images: the original image and the new, transparent one. For help on www.htmlgoodies.com, go to Web Graphics->So you want a Transparent GIF, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then type a list of steps that you needed to perform to make your image transparent.
A Number Game (JavaScript/Programming): Create a web page that contains a number game. In the game, the computer chooses a number between 1 and 10. Your job is to guess the number. The computer tells you if the answer is correct or incorrect, and allows you to guess until you guess correctly. For help on www.htmlgoodies.com, go to JavaScript->JavaScript Primers #20, #21, #22 and #25, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight any JavaScript that you used.
A More Advanced Number Game (JavaScript/Programming): Create a web page that contains a number game. In the game, the computer chooses a number between 1 and 100. Your job is to guess the number. The computer tells you if the answer is correct, too high, or too low, and allows you to guess until you guess correctly. Then when you guess correctly, the program tells you how many tries it took you to discover the correct answer. For help on www.htmlgoodies.com, go to JavaScript->JavaScript Primers #20, #21 and #22 and #25, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight any JavaScript that you used.
Slide Show (JavaScript): Create a web page that contains a slide show with 5 different images. On the page, the first image should appear, and underneath a link that says: “Click here for the next image”. By clicking this link, the second image appears. If you click again, the third image appears, and so on. After the fifth image, the slide show repeats again and again. For help on www.htmlgoodies.com, go to JavaScript->JavaScript Primers #27, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight any JavaScript that you used.
Form Field Validation (JavaScript): Create a form that asks someone to enter his/her first name, last name, address, zip code, area code and phone number - 6 pieces of information in all. Use JavaScript so that if someone fills out the form and forgets to enter one of these pieces of information, an error message appears letting the person know that the field is required. The ZIP code must contain between 5 and 10 digits, and the first five digits must be numeric, or else an error message pops up. The area code must contain 3 digits, all numeric, or else an error message pops up. Lastly, the phone number must contain 7 digits, all numeric, or else an error message pops up. For help on www.htmlgoodies.com, go to JavaScript->JavaScript Primers #29, or you can use other resources to complete this project. After you complete this project, send your advisor the URL of the page before your next meeting. Then print the code that you used to create the page, and highlight any JavaScript that you used.
Your Own Project: Do you have an idea for a project that is not listed on this page? You are welcome to create and complete your own project, but you must receive Mr. Del Monte's permission first before you begin your project.