To learn how to prepare photos for the Web using Photoshop.

To learn how to position text pictures on a Web page using Dreamweaver.

Skills

• Photoshop
  • canvas: resize, crop, rotate
  
  
• Dreamweaver
  • create AP divisions for photos and text
  • change AP element stacking order

Prepare the Photos in Photoshop

1. Decide on a topic, which you will explore in words and photos, for the next web page. If you can't think of a topic, you can always do people or landscapes.

2. From www.flickr.com, download at least five JPG large photos (at least 800 pixels on each side) to your flash drive. Save them with a simple name with no spaces or upper-case letters. Download the largest available version of each photo. (If you have another source for pictures from a digital camera, you may use those instead, as long as the originals are large.)

3. Use Photoshop to resize each photo. 350 pixels wide is a good starting point, but the size is up to you, just don't make them too big or too small to see well on a computer screen. Feel free to crop the images rotate or make other adjustments if you wish.

4. Save each JPG file at a quality of 8. If the size of the photo will be greater than 75K then gradually reduce the quality setting until the photo is less than 75K.
   
   NOTE: Do not just resize the photos in Dreamweaver, since this does not change the real size of the photos.

Page Layout in Dreamweaver

1. Create a new folder for this web page on your Flash drive.

2. Move the 5 small copies of the photos you resized earlier.

3. Create a new, blank web page in Dreamweaver and save it in the same folder.

4. Set a background color (other than pure white) for the whole page.

5. Set the document title to something suitable for the page.

6. For each photo, insert an AP Division and place a photo in it. Do not resize the photos in Dreamweaver.

7. Using more AP Divisions, insert a caption for each photo and a page title on the page itself.

8. Some of the photos should partially overlap each other, and the captions should be on top of the photos or at least partially overlap them. (Use the AP Elements panel to set the stacking order of the photos and text).

9. Save your page and test it in a browser.

10. In BUBBS, create a new folder under the Web Publishing Folder for this page.

11. Upload your page and the photos to the new folder.

12. Make sure the published page works correctly by using a web browser and surfing to www.bubbs.biola.edu/~your.name/folder/filename.html
    (use your own BUBBS name, and the file name of your folder and web page).

    NOTE: Do not remove any of the files for this lab from BUBBS until you have received your grade.

Submit the Page

1. Use the Drop Box to submit the URL address of your web page. Do not submit any files, only the link.

   Fill in the fields for your Name (e.g. John Smith), the Assignment (e.g. Lab 11 Write On) and the URL, which you should copy from the address line of your browser:

   (e.g. http://www.bubbs.biola.edu/~john.smith/write/antarctica.html).

Grading