Car.htm

Create a web page about your dream car. We will be using tables to structure the page in an orderly design.

Create a new new page named car.htm inside your personal site.
    Import your Personal Site
    Click File New - then click Create.
    Save the new page as car.htm inside your personal site .

Create a folder named car-images. Save all car related images in this folder

Be sure to include the following guidelines in your web page.

• Create a Table structure for the web page as demonstrated in class.
  • (3 rows x 1 column) 1000 pixels wide, Align = Center
• Use a background for the page. You may not use an image for the background
• Create links from car.htm to Home | Per.5 Web Design
• Update links on your index.htm page to include Car
• Insert 4-5 images of your dream car or car related images(each image not to exceed 75KB's in file size)
• Use Adobe Photoshop to resize images and Save for Web & Devices
  
• Create a nested table for your images
  • Post images as thumbnails not to exceed 250 pixels x 250 pixels in size
    • Link each thumbnail to the large image
• Insert text that describes your dream car.
  • Make an itemized list; use either an ordered or unordered list of accessories that you would like to add, example: (Wheels, Stereo, GPS, Interior Options, etc)
    
  • Create at least 3 links to information about your dream car on the Internet.
    • Use at least one image link for your three links.
• Don't Forget to add a Document Title for the web browsers Title Bar
• Upload your web site to the 172 server and test all images and links.
  

50 points - Due Wed 9/28

Return to Top

Due

9/28

Image Sizing for Web

As a class we will learn the correct way to size an image for placement on a web page.

1. Go to Mr. H's web page on the Business Server
2. Click on one of the Airplane images and save it to your images folder
3. Open the image in Photoshop CS5
   1. Resize the image, Image > Image Size > Change from pixels to percent and then change the width to 25%, then Click OK.
   2. Sign your name to the image using the Horizontal Type Tool.
   3. Saving the Image.
      1. Click File > Save for Web and Devices.
      2. Change the Preset option on the right to JPEG High and check the file size in the lower left corner of the box. If the file size is less than 100 KB's, complete the Save.
         1. If the image is greater then 100 KB's change the percent option in the lower right corner to 50%, then click the image, if the image is still greater then 100 KB's try 33%, and then 25% until image is less then 100 KB's.
      3. Save the image inside your images folder using the same file name. When asked to Replace click OK.
   4. Close the image in Photoshop and DO NOT SAVE IT
4. Post the newly resized image to your index.htm page as a thumbnail. Hold Shift and Size the image to 250 pixels wide. The height will proportionately change.
5. Link the image to the image file.
6. Select another airplane image and complete it on your own.

10 points

Return to Top

BANNER.HTM

Create 5 web banners for the following companies and web pages. -

1. Heffner's Ice Cream Parlor
2. SNN Saugus News Network
3. Miller's Coffee Kiosk
4. Williams' Tattoo Parlor
5. Saugus Surf Shop

Place the 5 banners on a web page named "banner.htm" update the links on your index.htm page to include a link to banner.htm. Take time to create professional looking web banners with cool images and lively text.

Use Abode Photoshop to create the web banners

• Create a new file in Photoshop
  • 1000 pixels wide x 250 pixels in height OR 1000 pixels wide x 150 pixels height.
  • Resolution 72
  • Mode RGB
  • White Background
• Create at least one background effect per banner (Gradients, Colors or Image)
• Insert at least one image into each banner (Use images that relate to the banner topic)
• Create Text Titles for each of your company names
  • Use Layer Styles and Warp Text for each banner
• Create Navigation text to be used with Hot Spots (At least 3)
  • Example - Home  |  Flavors  |  Locations
• Banners must be saved as .jpg (JPEG) format and must be less than 100 KB's each

banner.htm

• Create a new web page and name it banner.htm
• Use a table structure (6 Rows and 1 Column)
• Post the web banner we created together on banner.htm page. Insert the banner in the top row of the page
• Insert each banner into one of the rows of the nested table.
• Create Hot Spots for each navigation link on each banner.
  • Home - links to your home page (personal page)
  • Others - link to real web sites that go to pages that are similar.
    • Example - Flavors might link to 31 Flavors Classic Flavors page, etc.

Links

• Add the text link Banners and link it on your index.htm page.

EXTRA CREDIT:

• Create a rollover image from original banner to a modified banner image. 3 pts. extra per rollover. (possible 15 pts. extra credit)
  • Use Dreamweaver Help option to learn about creating a rollover image.

Upload your web site to the 172 Server.

70pts.

Return to Top

Due

10/14

Sports Page

Use one of your Table structures (template1 or template 2) for your page. Save the new web page as sports.htm. Design the new page so it highlights your favorite sport or sports team. Make sure that you use the web techniques listed below on your page. Have fun with this project!

1. Create a new folder named sport-pics. Save your sports images here

• All images must be less than 100 KB's file size

2. Create a Web Banner for your Sports page. Be sure to include the following items.

• Background (Color, image, gradient or a combination)
• Text with at least one Layer Style (Example: Drop Shadow, Stoke, Glow)
  • Warped text is optional
• Image - Add at least one image to the banner, even if you used an image as a background.
• Create a roll over Banner for extra credit

3. Inserting images on the page. You must use at least four images on the page

• Alternate image alignment (Left with text then align one image right with text, and so on.)
• You must write or paste at least 4-5 lines of text for each image, so that it word wraps to another line.

4. Create a Cascading Style Sheet (CSS) to manage the body text that you add to the page. It must control:

• Font, Font Size, Color, Weight, etc.

5. Use Horizontal Rule bars between images on the page. Modify the bar color and the bar width of each horiz. rule bar (may use the same color and width on each).
6. Create a image link from at least one of the images to a web site of the team or athlete.
7. Link the other images to themselves.
8. Add a text link somewhere on the page to your sports team. Example: Los Angeles Dodgers
9. Set up a links in your navigation section of sport.htm to Home | Period 5
10. Add a link on your index.htm webpage to sport.htm

Image Map/Hot Spots

11. Insert an additional image on your web page that will be used as an Image Map. Make sure the image is at least 400 pixels wide (landscape) or 400 pixels tall (portrait).
   * Create three Hotspots on the image.
   * Each Hotspot must link to a different site or a different portion of the same site.
   * Add a descriptive ALT statement for each link in the ALT box. Example: Click Here to visit ...

12. Add the Title attribute to each Hotspot in the Image Map. This will create a nice pop-up tag when the user mouses over the hotspot while viewing the webpage.

• Click to select the created Hotspot
• Switch to the Code View.
  • Add the Title attribute at the end of the html tag - see example --- title="enter a description"
  <area shape="rect" coords="1,200,406,262" href="http://www.usacycling.org/bmx/" alt="USA Cycling" title="USA Cycling">
  

13. Post the Sports page and your updated index to the 172 server. Test all links and images.

• 75 points

Due

11/4

Dynamic-Drive #1 - Marquee

Visit the Dynamic Drive web site and see what type of scripts are available. http://www.dynamicdrive.com/

Use Dynamic Drive to find a scrolling Marquee script.

   - Insert the script into your index.htm page.

  - Follow the directions on the page for selecting and inserting the script to your page
     -- Some of the scripts will not work, if this happens select a different script for your page.

  - Edit the default script message with a message of your own. (Remember to keep it school appropriate.)
     -- Create a working link within the script for extra credit.

• Upload your web site to the 172 server and test all images and links.
• Upload your new index page LIVE on you shsphotos.com website.
  
  • 30 points

Due

11/9

Music.htm

Create a web page about your favorite musical artist or band. Name the page music.htm. Create a music-pics folder for your images. Use images in a Photo style gallery to enhance the web page. You will be creating two nested tables one for your images and the other for information about the artist (at least 2 rows and 2 columns).

Included your own original text describing why you like the artist/s (Minimum of 40 words).

Use Photoshop to resize and compress your images.

Make sure you use the below guidelines.

1. Use one of your Templates for the web page structure. Save the page as music.htm
   
2. Create a Music-pics folder – Use this folder for all your images, (photos, buttons, etc)
   
3. Create a Navigation Bar complete with four buttons that have Up and Over states and working links.
• Create buttons for Home, Period 5, and two additional buttons that link to websites about the artist.
  
4. Create a Web Banner with the name of your Musical Artist.
   Use Photoshop to create a simple banner/logo for your page
• Include a background, text and an image
  
5. Web Page Text - Included your own original text describing why you like the artist/s and/or what you like about the artist/s. (Minimum of 40 words).
   
6. Insert images - Insert at least FOUR images. Use a nested table to structure your images.
   Adjust the table size and border as well as the border color to create a unique table
   • Create a thumbnail for each of the images
     (No larger than 250 px in width and/or height)
   • Add a Title tag attribute to each image in the table.
   • Link each image to itself
   • Each image must be less than 100KB's (file size)
     
7. Add a second Nested table for information about the artist (Example: Concert Dates
   or songs)

• Use the Format Table Command to add colors to the rows.
• Insert at least 4 - 5 items in the table
• Link the info from the table to the artist's website or to a site about the artist.

Katy Perry
Song Title		Album
1	Hot n Cold	One of the Boys
2	Kissed a Girl
3	California Gurls	Teenage Dream


8.   Add a Document Title to the webpage

9.  Use a Background. If you use an image make sure it tiles cleanly, or use the no-repeat feature.
      See ( http://www.w3schools.com/css/css_background.asp )

Remember all images including backgrounds and images not used must be less than 100 KB's.

• 100 pts

Due

11/23