Images
Objectives
Practice
Files

Images (Video)

One of the important parts of information on the web, is that it can be presented in a graphical format. Images are an important part of the user experience. Choosing the right images and learning how to place them in the page will not only make your page look nice, but can also make it more informative. Images on the web must be compressed for quick transfer. The three main types of images used on the web are .gif, .jpg, and .png. GIF (Graphics Interchange Format) files are good for images with chuncks of solid color, such as clip art, and allow for background transparency. JPG (Joint Photographers Expert Group) files are good for images with lots of colors, such as photographs, but do not allow for background transparency. PNG (Portable Network Graphics) are the middle ground and can compress both clip art and photographs well and provide the ability to have background transparency.
  1. Open your Striped Umbrella site and download/unzip/file the lesson files.
  2. Open the aboutUs.html page.
  3. If the about us page does not have the header image, nav and horizontal rule, copy and paste it from the index.html file
  4. Import, clean and spell check the text from about.docx
  5. Click the attach styles button and attach the suStyles.css file
  6. Highlight the text Welcome Guests! and make it a level 1 heading.
  7. Place the cursor in front of the letter W in When. Select Insert->Image from the top menu.
  8. Select the image club_house.jpg and click OK. Then, when prompted, enter Club House as the alternate text and click OK.
  9. Repeat the process placing the boardwald.jpg image just before the words "After you arrive..." and use the alternate text "Boardwalk to the beach."
  10. Save and preview in the browser.
Aligning Images (Video)

By default, HTML places text at the bottom of an image. This means that your web page will have a large blank area to the right of the image where no text exists. Ideally, we would like to make the text flow around the image like it does in a magazine or newspaper. This is accomplished using the float style in CSS.
  1. Click on the New CSS Rule button on the right of the screen in the CSS panel
  2. Set the selector type = 'class'; the selector name='left' and the rule definition = 'suStyle.css'. Click OK
  3. In the CSS Rule popup, choose the Box category. In the float list, choose left. Click on OK.
  4. Click on the clubhouse image. In the Properties panel, set the class to left. At this point, the text (and other images) should float around the clubhouse image.
  5. Repeat this process with boardwald image, but make it float to the right (make a new rule called right)
  6. Save and view in browser.

Styling an Image (Video)

While we can dress up our page simply by adding images, we can dress up the images by giving them style. This includes padding (space) around the images to increase readability and adding borders to frame the image.
  1. Click on the New CSS Rule button on the right of the screen in the CSS panel
  2. Set the selector type='class'; the selector name='imgBorder' and the rule definition='suStyles.css'. Click OK
  3. In the CSS Rule popup, choose the Border category. Make the style solid, the width thin and the color #666.
  4. Click on the Box category. Set the Margin (all) to 10px. Click on OK.
  5. Click on the clubhouse picture. In the HTML properties panel, in the Class drop down, choose multiple and select both left AND imgBorder.
  6. Repeat the application process for the boardwalk image.
  7. Save and preview in browser.

Background Images (Video)

Another way to make a page interesting is to add a background image to the page. This can be tricky as busy background images can detract from a user experience, making it hard to focus on the content. Background images should be subtle and should be able to repeat with out hard line seams. In this part of the lesson, we will add the background locally (just for this page), but a page background can become global by adding it to the body tag style in the site css file.
  1. In the menu bar, select Modify -> Page Properties.
  2. In the Appearance (CSS ) category, click the Browse button for background images.
  3. Locate the water.jpg file and click OK.
  5. Save and preview in browser.

Using Images to Create a Color Palette (Video)

Well designed sites use colors that coordinate with the images that they use. Seeing a green in an image an choosing a green for text color is not always enough. So, Dreamweaver provides us with a simple tool to make sure that our colors match.
  1. Click the h1 tag rule (in suStyles.css) in the CSS Panel.
  2. In the type category, choose the Text color palette.
  3. This opens the color palette, but also turns the cursor into an eyedropper. That eyedropper can be placed anywhere on the visible page to "get" a color. Move the eyedropper up to the blue in the background of the clubhouse picture and click on it. Then click APPLY to see the change.
  4. Now, move the cursor to a green in the umbrella in the banner. Click APPLY to see the change. Click OK to apply the change.
  5. Save and preview in browser.