Name: Date:

Upward Bound Math/Science

PhotoDraw and Page Creation Lab

NOTE: Please answer all the questions on these sheets and turn them in at the end of class.

Part 1: Creating a Personal Home Page
First we will have you start a personal page that will be included in the course web site. You will get a chance to revisit this page later in the course when you have more experience under your belt.

1. Create a new folder in "My documents" labeled "Your Name Lab 4 ". Copy your digital photo from the D drive of the laptop server ( \\Ubnb3\d\Photos ) to your folder.
   What is the name of your folder? ____________
   What is the filename of your photo? ____________
   What file format is your photo? ____________
   What is the file size of your photo? ____________
   How many colors are in your photo? ____________
2. Open Microsoft PhotoDraw. Go to the File Menu and Choose Open. Open the image you just copied to your folder.
3. Go to the File menu and choose Save as... Give the file a simple, sensible name and save it in your folder. Make sure the file is saved in PhotoDraw (*.mix) format.
4. Go to the File Menu and Choose Picture Setup..... Under the Active Picture tab, Choose Pixels for units. What is the width of you picture? ________ The height of your picture? _______
5. Turn on the Formatting Toolbar: View/Toolbars/Formatting. Turn on the Pan and Zoom toolbar: View/Pan and Zoom.
6. Drag the Pan and Zoom Toolbar over the bottom part of the Picture list. Click on the little arrow (<-->) . What happened? _________
   What percentage are you viewing the picture at now? _____
   It is very important to stay aware of the zoom level you are viewing the picture at. When you paste in into another application, it will appear the way it looks at 100% in PhotoDraw.
7. Choose Color from the Visual Menu at the top. Choose Brightness and Contrast from the pop-up menu. This menu should appear as shown to the right.
8. Try hitting the Automatic button. What happened? ______________________________________
   Undo this change.
9. Use the Brightness and Contrast controls to improve your photo. What were your final settings?
   Brightness ___________
   Contrast ___________
10. Take a couple of minutes and play around with the other color controls. Remember you can undo any changes. Besides Brightnes sand Contrast¸ what other changes did you make?
    __________________________________________________________________________________________________________
11. Notice the option that says Correct by painting. Choose it and experiment with the results. How do Correct selection and Correct by painting differ? ____________________________________
    _________________________________________.
12. What do you think the Restore command does? Try it and tell us: __________________________
    __________________________________________.
13. Often we only want to use a portion of a photo. The process of selecting just a portion of a photo is called cropping. To crop a picture, click Cut Crop from the Visual Menu, and choose Crop from the pull-down menu. Choose a shape for cropping your image and crop out most of the background in your pictures. When you have the correct area selected, click on Lock Crop to crop your image.
14. When you have your image color-corrected and cropped to eliminate distractions, it's time to resize it. Go to the Arrange menu and choose Arrange. Adjust your image so it has a width of about 320 pixels. The height will be adjusted automatically as long as you leave the Maintain proportions box checked.
15. Right-click on the image, and unselect Lock Picture Guides. Use the handles that appear at the corners of the work area to reduce the picture area to about the size of the image. Right-click on the image, and reselect Lock Picture Guides.
16. Leave PhotoDraw open, and open Microsoft FrontPage. Make sure that Front Page is set up the way we discussed in the last class (got your handout?). If you didn't remember to bring this sheet, go to:

http://depts.washington.edu/ubms/reference/fpset.htm

17. Open a new (normal) web page. Choose a background color for your page.
18. Leave FrontPage open, and return to PhotoDraw. Time to save your image. From the File menu, choose Save for Use In.... Choose On the Web for use, and click Next. Click on Fill them with the background color, and click Next.
19. Pick the color of your background (we'll show you how) to fill in the transparent images, and choose Next. Pick the image that represents the best balance between file size and image quality and click Next.
20. Click Save and locate the folder you created earlier. Give the file a sensible, simple name and click Save.
21. Insert your image into your Web Page. Make sure to supply alternative text. View the html for your page. Write the complete tag for your image below:
    _______________________________________________________________________________
22. Add the following to your Web Page (play around to get the colors, fonts, and sizes right) :
    Your First name and Last initial
    Your email address. Make this a mailto: link
    Type the statements below and complete them:
    When I need to find info on the Web I.....
    The coolest thing I've earned on the Web is .....
    Words to live by .....
23. Change the title of your page to something meaningful.
24. Add and restyle some Clip Art:
    Go to Insert/Clip Art
    With the Clip Art still selected, choose Outline. Then choose one of the brushes and play
    around with the brushes and the filling the clip art.
25. Save your web page (with all of the associated images) in your folder.

Part 2: Creating a Personal Home Page

1. Open a new page. Insert a new Table with the following parameters:
Border equals 0, 2 rows, 3 columns, Aligned left, 600 pixels wide.

2. Select the first column. Choose Cell Properties. Specify a width of 130.
Select the second column. Choose Cell Properties. Specify a width of 30.
Select the third column. Choose Cell Properties. Specify a width of 440

3. Select the first row. Choose a background color for this row.

4. Select the left cell in the second row. Choose a background color that matches for this cell.

5. Create a new image in Photodraw. Change the measurements to pixels, and the picture size to 120 x 60 pixels. Zoom in to 600%.

6. Choose the rectangle tool.. Set the border to 5 pt. Choose a line color that goes well with the scanbar along the left edge of your page. Make a rectangle about 100 pixels wide by 40 pixels high. Choose the Fill tool. Pick a lighter shade of the same color. Fill in the button.

7. Select Outline from the Visual Menu and choose Soften edges. Start with a setting of about 40. Play with this value until the button looks good. Other controls that help with buttons: Effects/Blur and Sharpen and Effects/3-D/Beveling and Extrusion..

8. Unlock the picture grids and resize the Picture to the size of the button.

9. Create text for these buttons. Go to the Visual Menu, and choose Text. Choose Insert text from the drop-down menu. Type Home. Change the text font, size, and color to fit your button. Move the text to center the text on the button.

10. We will show you ways to optimize your buttons. We will also show you how to change the colors of these buttons. In the end we will save them as gif's.

11. Make sure you save one of your buttons in the original Photodraw format in your directory. Insert all your buttons onto your scan bar and arrange them the way you want them.

12. Make a Header graphic for your site in PhotoDraw and paste it into the top right row of your table. Make sure that you save a copy in the original PhotoDraw format.

13. Save your page and the associated images in your folder.

Part 3: Reviewing a Website on your Group Topic

1. Get together with the other two members of your group. On the Internet, find a Web Site on the subject that addresses the topic you are covering.
2. Open FrontPage and create a Web Page (one per group) that is a one or two screen on-line review of this site.
3. Include the following:

• A screen-shoot of the home page (ALT-Print Screen), Paste, Shrink, Resample to a much smaller size.
• The URL
• A list of the topics addressed. Your review of how well they did it.
• Suggestions about what they should have been covered but wasn't.
• A review of the page layout, graphic design, site design, information content, writing, and quality of the research. Rate each of these on a scale of 1(worst) to 5 (best) and give at least one sentence on each topic.
  
  

Save this Web page and associated images in a new folder (tell us the name). Move this folder and your individual folders to thenotebook server.