III-1 Getting the Picture

There are two basic rules to keep in mind regarding graphics:

1. Don't use meaningless graphics, also known as clip art.
2. It is more blessed to reduce than to enlarge.

These two rules involve two disparate areas of images on the Web. The first rule relates to purpose: why are you using this graphic? Is it essential to your reader's understanding of the material being presented? Animated figures, in particular, can distract your viewer and make comprehension more challenging. When there is an opportunity to use a photograph of your students engaged in learning activities, why would you want to use a piece of clip art? We'll acknowledge here that school systems vary widely in their policy regarding the use of student and staff photos on public web pages. Before using photos of people, be sure you are within your school's parameters.

The second rule has to do with the nature of graphic files. You've probably experienced the "pixelation" phenomenon when you enlarged a graphic for a text document: edges become jagged, and the image degrades. Reducing the file with size designations doesn't create this problem. Ideally, however, any image you use on your web site will be the same size as it appears on the page. If you're serious about web page design, you need an image editor like Photoshop or Fireworks. But this isn't always possible, and it's easy to resize an image using HTML or, in our case, Dreamweaver.

Editing Your Images with Picasa

You were offered the option to go to Module 3.1 - Modifying Images with Picasa. Did you at least check it out? A link there will return you to this point in Module Three.

You've already practiced the basics of inserting an image into your document. You have the choice of . . .

• the menu command Insert --> Image,
• the key combination of Ctrl + Alt + I (Windows) or Option + Command + I (Mac),
• the Insert Image button from the Common tab of the Insert bar,
• dragging the Insert Image button to the desired location on the page, or
• dragging the image from the Files panel to the desired location on the screen.

If you use one of the first four methods, you will be asked to navigate to the image file. If the desired image is not currently in your site folder, Dw will make a copy of it for you there. This is a good thing, so when Dw offers, say "yes." It is essential that your images be in a folder within the site.

The images Properties Inspector has many tools for working with your images. In order to see them, you must have an image on your page and you must select the image by clicking on it. The following window then appears at the bottom of the screen. NOTE: if you don't see all of the screen, as pictured below, click on the arrow head in the bottom right corner of the window, below and to the right of the Page Properties... button.

Reading from left to right, you'll first see a thumbnail of the image, circled in red for clarity, followed by its size. The window below the size designation allows you to give the image a name (only if you desire). The W and H windows tell you the actual width and height of the image, but they also allow you to resize the image by inserting the desired dimensions here. The Src window shows where the image is stored. Link allows you to enter an address if the image is a link (which we've done already). Alt reminds you to write a description of the image for vision-impaired readers; keep it short but meaningful. The Edit button activates image editing software; if you have Adobe Fireworks installed, it will open the image in that application. Edit Image Settings (blue arrow) allows you to manipulate several settings at one time, in one place. Click on the icon to activate it. The icons circled in yellow allow you to do a limited number of edits on the image: crop, restore (more on this shortly), brightness and contrast, and resample.

The next section of the Property Inspector allows you to manipulate the image further. Map refers to image map. We'll return to the Map tools later on this page. V (vertical) Space and H (horizontal) Space allow you to add space between the image and the text -- a good style habit to get into. Target, as we learned earlier, refers to the window in which the graphic opens. Border allows you to place a border around the image. The number you enter is the thickness of the border in pixels. The horizontal alignment of the image can be set using the alignment icons, but the Align options below are more specific and comprehensive. We'll "play around" with them in the guided practice sections of this module.

1. Start a new document in Dreamweaver. Give this new page the title of Geology Field Trip, and save it in your site folder as gorge_tour.html.
2. Select a font face and size for the heading on this page and type: A Trip to Fossil Gorge. NOTE: feel free to format text as you wish for this and following activities. Try out interesting colors, font faces, italics, etc., to see how they look. Specific directions will be provided only when it is essential to the activity.
3. To provide some space between the heading and the first picture, hit Enter twice.
4. Find gorge_entry.JPG in your images folder and drag it to the workspace. Click on the image to select it -- note the "handles" at the corner, side, and bottom. Refer to the Properties Inspector and find the Align window. Click on it and select Left. You will now be able to enter text that will fill in the area to the right of the image. Next, find V Space and H Space, and enter 6 in each window. This will provide a margin between the image and the text you are going to enter.
   
   An alternate image tag -- called alt in HTML -- is a verbal description of an image. Its inclusion allows visually impaired readers to get an idea of the appearance of the page. The dialog window opens automatically whenever you add a new graphic to your web page. Enter a brief but meaningful description of the image to assist visually impaired readers.
   
   Watch this short video to see Dreamweaver's image resizing tools in use.
   To return to this page, click on the Close this Window button.

   The Properties Inspector includes a space for the alt tag, but it's a good idea to use the dialog box when it appears rather than go back later. Accessibility is an increasingly significant issue in web page design. Click here for more information about accessibility on the Internet.

5. In the Menu bar, find Modify --> Page Properties or use the Page Properties button in the Properties inspector at the bottom of the page. Find the color selection window marked Background and click on it. An eye dropper will appear ; use it to choose a color from the photo to serve as the background for the page. See how it looks by clicking on Apply, and change it if it doesn't look good. Don't be afraid to "play around," but keep legibility as a high priority. Then set all the margins to 40 and click on O.K.
   
   

   Using the Eyedropper The eyedropper, also known as the Color Picker, works by sampling the color directly beneath its tip, indicated by the arrow in the illustration to the right. Holding the left mouse button down (Mac users just hold the mouse), move the eyedropper's tip over an image, Asset Panel, or anyplace on the computer screen, and the color under the tip will appear in the color window that you have activated. Select the color by releasing the mouse button.

   
   
6. Write a paragraph about going to a state park to view the fossils that were uncovered during the Great Flood of '93 (or whatever). NOTE: In this and later activities, it is not necessary to write "real" articles. This isn't a writing course. If you prefer to save some time, Copy & Paste the text that I have written for you on this Text Resource Page.
7. Because we don't want the text for the next image, or the image itself, to intrude into the caption area of the first picture, we're going to have to do some "raw" HTML now. The tag we'll be using is <BR CLEAR="left">. As you can see, it's a Break <BR> tag with an attitude. CLEAR tells the browser to keep the area next to the image clear if there is no more text in the caption to fill it. The "left" reminds the browser that the image was aligned on the left. Other CLEAR options are center, right, and all. Begin the process of adding the <BR> tag by highlighting the last line of text in your picture caption. This will make the insert point easier to see when we switch to Code View. Now click on the Code View button. Place the cursor at the end of the highlighted line -- after the </p> tag, and type the left bracket and BR -- <BR. You'll see that a pop-up window wants to help you complete the tag; enter a space to show that the tag is BR. The pop-up then offers some choices for your BR tag; notice that "clear" is one of them. Use the down arrow on the keyboard or your cursor to select "clear" and hit Enter. You'll now observe that Dreamweaver has added clear="" to the tag, and it gives you four choices to fill in the quotes. Of course we want left. Select it and hit Enter. Now you need to end the tag by typing the right bracket or "greater than" sign: >. Now go back to the Design View and see what you've done. You should see a icon immediately below the text. Is there an easier way to do this? Not that I've found -- but when you know how to use tables, you won't need the BR CLEAR tag as often.
   
   Here is a sample of code to show you the placement of the components on the page.
   
8. Let's add another image now. Click on the Image icon -- -- in the Insert Bar. Follow the navigation directions to your images folder and select gorge_upstream_walk.JPG. With the image selected, set its alignment (using the Align window) to right. Put in some text here, then go to Code view and add a <br clear="right"> tag after the paragraph. When was the last time you saved this document?
9. You may have been thinking that these are really big photos. The second one is 46K -- large compared to a 1K gif, but small when compared to a video file of 1.8MB. We can reduce the on-screen size of the image very easily with Dw (though the file size remains the same). Using the method of your choice, add the image called gorge_floodplain.JPG. Click on the image once to be sure it is selected. You can tell if it is by the "handles" and outline that appear on its border. These handles allow you to resize the image on the screen. Click and drag the bottom handle to change the height of the image; the right handle controls the width. Play around a bit with resizing this image; be sure to try enlarging it to see how it looks. Don't worry about "spoiling" the file. You're only changing the dimensions of its appearance on this page, not the file itself. If you don't like what you get, Use the Refresh tool (circled in red) to reset the image dimensions. Another option is to Resample the image after resizing (circled in blue). This makes the change in size permanent. Now click on the lower right corner handle while holding down the Shift key. This causes the image to get larger or smaller while maintaining its original dimensions. Watch the W and H numbers change as you resize the image; this will tell you the dimensions when you're done resizing. You can also type in the values for W and H if you prefer.
   
   
   You may see some icons that don't appear on your version of Dw. These are Fireworks tools that are part of the CS4 web suite of programs. Since I have Fireworks installed, these tools automatically import to Dw (very convenient).
   
   

   Tip: Do you know what a thumbnail is? A thumbnail is a postage-stamp version of a larger image. It's often used as a link, allowing your reader either to view the thumbnail and move on or click on the thumbnail to see a larger version of the same image. Click on the thumbnail below to see the full-size photo. Thumbnails should not be created by reducing the size of the image with Dw. Part of the purpose of a thumbnail is to reduce loading time; if the large image isn't needed we haven't wasted time downloading it. But an image that has been reduced on the screen takes just as long to load as the original version of the image. Learn to use Photoshop, Fireworks, or some other image editor to reduce the actual file size of a thumbnail. This web site, Crazy Horse Memorial, illustrates good use of the thumbnail. Scroll through it briefly to see this interesting project.

   
   
10. To complete our guided practice, add one more photo to your online field trip -- bluecoral.JPG. Align and/or resize it as you wish. Now let's add a border to it. Find the Border input space in the area of the alignment tools. After clicking on (selecting) bluecoral.JPG, type in a border thickness, such as 4 (pixels). Save your page. Now upload it and the accompanying graphics to the server. Remember to put the graphics in your images folder. If you'd like to see a version of this assembled page, visit gorge_tour.html. NOTE: I've added a couple of Return/Enter strokes before the paragraphs to make the text a bit more centered on the photos.

As a teacher, you may have occasion to need a picture of the computer screen in a PowerPoint presentation, printed materials, or on a web page, as I do here frequently. Both Windows and Mac make this easy. Here are the steps for creating a screen capture.

Windows

Vista/Windows 7 users - You have a nifty little accessory called the Snipping Tool hidden in your Program files. Click on the Start Menu to find Accessories, then select Snipping Tool. A pop-up menu appears (shown to the right) offering you several methods of creating a screen shot from a very small area, up to the whole screen. Just click and drag to define the area to be "snipped." When you release the cursor, a pop-up menu asks you to choose the format in which to save your image. If you plan to use the image "as is," JPEG is probably your best choice. However, if you plan to edit the image by adding graphics, text, etc., it's better to save as a PNG. If the image is for a web page, be sure you save it in your site's images folder.
Other Windows Users - Look on your keyboard for PrtScrn (Print Screen). When you have the desired material visible on the monitor (screen), push this key. You now have an image on the Clipboard that can be pasted into an image editing program. My version of Windows XP came with a nifty program called Microsoft Picture It! Photo 7.0. Vista has Windows Photo Gallery (I've never used it). I open a new document, Paste the screen capture onto it, and use the cropping tool to cut away superfluous material from the image, or use the Format menu (Format --> Resize Image...) to reduce the image. When you finally save the image, but sure it's a GIF or JPEG if you plan to use it on a Web page. I would also recommend setting the resolution at 72 dpi. Your computer may label it as a bitmap (.bmp), but go ahead and use it as a GIF or JPEG, retaining the correct file extension in your folder.

Mac

Start by getting the desired look on your monitor (screen). Use the key combination Shift + Command + 4. Your cursor will now be a cross hair, such as you would use to set the marquee on an image. When you know where the upper left corner of your descried screen capture is, click and hold the cursor, drawing it down and right until you have outlined the portion of the screen you want. When you release the mouse button you'll hear a click, like the shutter of a camera. Now look on your hard drive for Picture 1 (or whatever number applies). You can now treat the picture like any other image; open it in an image editing program and modify it as needed. When you save the image, be sure it's a GIF or JPEG if you plan to use it on a Web page. I would also recommend setting the resolution at 72 dpi.

III-2 - A Web Page of a Different Color

We've dabbled a bit with color so far, coloring fonts and adding a color background (the BGCOLOR tag) to our online field trip page. As you've learned, color designations can come from many sources. But there's a color collection that you have at your disposal that you created yourself -- and didn't even know it. Look at the right side of your screen and find a tab marked Assets. If you don't see it under Files, use key F11 (Mac users -- Shift + F11) to bring it forward. NOTE: Be sure the Site button (circled in blue in illustration to the right) is selected and that the page you're working with is located in a site that you have defined. You should now see a column of icons indicating the types of assets that Dw keeps track of. The first is images -- a familiar icon by now. The second is site colors -- . Click on this button (circled in red) to see a list of all the colors you've used on the site, both by color swatch and by code. You may have to scroll to the right to see the other data on color, but it's worth the work, and you can make the Value column narrower to see the Type column all the time. The Type column says either Websafe or Non-Websafe for each color. If your reading for Module Three didn't clarify these terms for you, go back to the Readings page to be sure you know the difference. Is using Websafe colors essential? No, but it's best practice.

We'll investigate the Assets files more later. But in the meantime, I ask you, isn't that a neat tool? It's going to make your web page building a lot easier.

III-2 - Applying Color Assets
Guided Practice

1. Open a page from your site -- your choice. Do a Save As... for the page, giving it the name colorized.html.
2. Open the Assets window (F11 or Shift + F11) if it isn't already visible, and click on the colors icon -- .
3. Highlight a few lines of text on your web page. Move the cursor to the Properties Inspector and click on the color square next to the Size box. Using the eye dropper, click on a color in the Assets window to apply to your highlighted text.
   IMPORTANT NOTE TO CS4 USERS: You must be in the CSS Properties inspector when you do this. In effect, you are editing an existing style or creating a new one. In either case, Dw will ask you to give the style a name. If you find that the whole page has changed color, you're probably changing an existing style. Once you have set the color, you can go back to the text that you don't want colored, highlight it, and select <Remove Class> from the Targeted Rule choices in the CSS Properties inspector
4. Select another section of text and highlight it. Find another color in the Assets window, but this time click on the Apply button -- --at the bottom of the window to change the color.
5. In the last guided practice I had you select a background color for the page called gorge_tour.html. Let's change the background for the page you currently have open. Go to the Modify menu, select Page Properties, and set the background color using the eye dropper and the color assets.
6. Don't forget to save your new colorized.html page again.
   

   Tip: Setting the background color for a table or cell of a table is very easy, too. We won't practice it here since it involves yet another Properties Inspector, this one for tables. For now, just make a mental note that these same steps for applying color work for tables, too.

III-3 - Adding an Image in the Background

You may have noticed that the pages for this course have a pattern in the background -- at least on the left and right sides. Many web pages use a background graphic. Often they are very small files, adding insignificantly to the page's load time. For example, here is a section of the image that creates the yellow striped background on this page -- . Can you see it? A background file can be very small because the browser "re-uses" the file as often as needed to fill the screen (this is called tiling). Check out this web page: http://stardate.org/nativeskies. That beautiful background is created by a very thin line of color. View the Stardate background here.

The essential quality of a background pattern is its ability to fade into the background (hence the name). Legibility of text is paramount on a web page, so don't succumb to the trap of glaring, fancy backgrounds that make reading a challenge. Endangered Specie.com has tried to make its site visually appealing. The vivid images of animals against a faded background of animals is exciting and attractive. However, when text is placed over this background, as it is on this Facts About Endangered Species page, the background is more intrusive, though no brighter, than on the first page. There are too many lines and forms competing for the reader's eye. Factor in the constantly moving bullets, and you have some annoying visual components.

This site from Whatis.com shows a good use of background. First, notice that the background merely fills the browser window where there is no page content. NOTE: this is easier to see on a large screen or a monitor set at a high resolution. Observe, too, that the page is aligned on the left of the screen, meaning that background pattern will be visible only on the right. This is different from your the course pages; they are centered so that the pattern fills empty space on the screen to the left and right of the contents. You'll learn how to center the page in the module on tables.

Creative Arts Television demonstrates a number of good web design practices on its attractive site:

• use a white or light colored background for text to accommodate easy reading and printing
• use a patterned background that doesn't detract from legibility
• use a table to organize the contents of the page to accommodate many monitor sizes
• place the background behind the table.

As a self-test on the issue of backgrounds, check out these two pages:

• Beethoven's Missa Solemnis
• Cinderella Photography Studios

Do you find these pages engaging? Does text color coordinate with the background? Do the images and colors add to or detract from the meaning and purpose of the pages? Ponder on these questions in your heart, and then apply your conclusions to your own design practice.

III-3 - Adding an Image in the Background
Guided Practice

1. Find greyrock.gif in your images folder (you downloaded it earlier from Graphics Resource Page III-1) .
2. Click on the Page Properties button and find Background image. Browse to greyrock.gif to make it the background for your page entitled gorge_tour.html.
3. Save the modified page as gorge_tour_3.html.
4. Review your color choices on the page and change any that don't look good with your new background pattern. If you'd like to do some more independent practice, feel free to download some backgrounds (please observe copyright regulations carefully) to add to practice pages we've created. Here is a very small sample of what's available, both good and bad:

• http://www.allfreebackgrounds.com/ - "Hundreds of select free backgrounds and texture graphics for your website in most every color plus marble, paper, wood, business, nature, metal, brick and many more!"
• http://southernfood.about.com/library/clipart/blbgidxp.htm - Food and Cooking Clip Art/Backgrounds.
• http://edtech.kennesaw.edu/web/graphrour.html - Background & Graphic Sources for Teaching with the Web & WebTech. A nice set of links to graphics pages, however some of the links are no longer functioning.

III-4 - The Magic of the Image Map

1. Start a new page in Dw. Save it as native_cultures.html. Give the page a title, too, while you're at it: Native American Cultures. If you wish to use a background, colored fonts, or any of the techniques you've learned so far, feel free to do so.
2. Find indian_tribes.gif in your images folder (you downloaded it earlier). Center the image on the page and give it an Alt label.
3. Click on the map to activate the Image Map tools at the bottom of the screen. If the Properties window isn't visible, go to Window menu and find Properties (Ctrl + F3)(Mac — Command + F3) to create at least one hotpsot on the map. Use your choice of tools to at least "cover" each tribe's name, plus some extra margin for readers with poor aim. To use the Rectangular and Oval tools, first click on the tool, then click in the upper left area of the desired hotspot on the map and drag to the lower right. To use the Polygon Tool, click on the first corner of the hotspot, and click again, moving in a clockwise motion, to set all of the remaining hotspots. Be sure to use all three tools, and be sure each tribe has an active link.
4. The URL for each hotspot can be entered as you create the hotspots or after you have them all defined. If there is a pound sign -- # -- in the Link window, delete it before entering the address for the link. Here are links to use for this exercise: http://www.nezperce.org/Main.html
   http://www.lakhota.com/(Dakota)
   http://www.iroquoismuseum.org/
   http://www.navajo.org/
   http://www.comanchenation.com/ and
   http://www.cherokee.org/.

And finally, this . . .

Would you like to dig deeper? An Extended Learning Opportunity Some students ask if Dreamweaver can create pop-up text areas. In response to that I have written an additional Module Three page as an Extended Learning Opportunity. It covers Popup Messages and Jump Menus. Your use of it is strictly optional.

When you have finished your work on this page, continue to the Assessment Page.