Basic Dreamweaver Lesson 6Working with Graphics

USING GRAPHICS EFFECTIVELYGraphics make a web site more interesting and provide valuable information. For example, maps and graphs can summarize information more succinctly and intuitively than words. Because graphic files are usually large, the graphics you add to a web site are stored in compressed file formats. Compression shrinks file size by using different types of encoding to remove redundant or less important information.

All browsers can display graphics in the GIF and JPEG file formats. Recent versions of Internet Explorer and Firefox can also display graphics in the PNG file format. The GIF, JPEG, and PNG formats all compress graphic files but in different ways.

GIF – Graphics Interchange Format; supports a palette of up to 256 colors, one of which can be used for single-color transparency.

JPG – Digitizes photographic images; supports millions of colors, but does not support transparency. Large in file size, and loses image clarity the more it is compressed.

PNG – Portable Network Graphics; compresses better than GIF, but still not as good for photographs. Supports transparency, but not in Internet Explorer 6 and earlier browser versions.

When you add graphics to a page, Dreamweaver prompts you to add an alternate text description. The alternate text is placed in the alt attribute in the image tag. It is read by assistive devices, enabling vision-impaired users to understand the information conveyed in the image.

INSERTING IMAGES1. If necessary, redefine your Next Best Fest site, and open the index.html page.2. In the status bar, select the <div#content> tag, and then press the left arrow

key. The insertion point should be directly before the content div in the code (you can check using Code view).

3. In the Common category of the Insert panel, click the Images button arrow, then click the Image button to open the Image dialog box.

4. From your Assets folder, select the nb_logo.png file, then click OK.5. Type “Logo for the Next Best Fest and Link to the Home Page of the Site”

in the Alternate Text dialog box, then click OK.6. The logo should be behind the AP Div. Also, notice that the content area moved

down. We previously set the top margin of the content to 150px, meaning that it was going to move down 150 pixels below whatever object was before it. Because we did not have an object before it until now, it stayed at the top. The AP div did not affect the div, because an AP div is absolutely positioned, and has no effect on any other object.

Web Technologies I Basic Dreamweaver Lesson 6 - Graphics Page 1

CROP RESAMPLE CONTRAST SHARPEN

& BRIGHTNESS

FORMATTING GRAPHICS WITH CSS1. Click the new CSS Style button in the CSS panel. 2. Create a Class selector, called .logostyle, defined in nbf_styles.css.3. Set the following properties:

a. Box: float right, top margin 0px, right margin 40%b. Border: width 0 (prevents the image from having a default border when it is

linked)4. Click Ok.5. In the Document window, select the logo, then use the Property Inspector to set

the Class to logostyle. 6. Go to File > Save All

EDITING AN IMAGE1. With index.html still open, go to File > Save As, and overwrite the current

about.html file by double-clicking on it, and clicking Yes to the prompt.2. Change the Heading 1 that says Next Best Fest so that it reads About. 3. Change the Document Title so that you replace the word

Home with About.4. Click the AP Div that says TICKETS, and hit DELETE.5. Delete all text listed below the Heading 1.6. Expand the Assets panel by clicking it’s tab.7. Drag the brian.jpg file to the space below the About

Heading. Set the Alternate Text to Brian Lee, co- owner of Shenpa Productions, then click Ok.

8. In the Property Inspector, set the W and H (Width and Height boxes) to 200.

9. Press the Reset button (circular arrow illustrated to the right) to set the image back to its original size.

10. Now type 300 in the W and H boxes. 11. In the Property Inspector, click the Crop button, then hit OK to the warning

dialog box. 12. Drag the resize handles so that the extra

space above Brian’s head, and part of his left and right shoulders is removed.

13. Press ENTER to apply the crop. 14. In the Property Inspector, click the

Brightness and Contrast button, and hit OK to the warning dialog box. 15. Drag the Brightness slider right to 50, and the Contrast slider left to -40,

then click OK.16. In the Property Inspector, click the Sharpen button, and change the Sharpen

slider to 10, then click OK. 17. Reset the image to its original size.

FORMATTING IMAGES1. Create a new CSS rule, Class selector, named .images_left, defined in

nbf_styles.css.2. Set the following properties:

a. Box Category: Float left, all margins 5pxb. Border Category: Solid, thin, #CCFFFF

3. Click OK.

Web Technologies I Basic Dreamweaver Lesson 6 - Graphics Page 2

4. With the image selected, use the Property Inspector to set the class to images_left.

ADD TEXT1. Select the image, then click the right arrow to put your cursor next to it.2. Type Brian Lee, then press ENTER.3. Type Brian is the co-owner of Shenpa Productions, the company that

produces the Next Best Fest. Brian is a lifelong music aficionado. He created the Next Best Fest so that he could spend his time concentrating on his two greatest loves: tribute bands, and his son/business partner, Gage.

4. Press ENTER four times to move the insertion point below Brian’s image and extend the Content div.

5. Select the Brian Lee text, and format to Heading 2.

HOTSPOTS1. With the about.html file open, go to File > Save as, and replace the existing

schedule.html page. 2. Change the Document Title to include the word Schedule. 3. Replace the Heading 1 Text to say Schedule.4. Delete the picture and remaining text.5. Type Interactive Festival Map, then hit ENTER.6. Type Click a stage to view the schedule. We are just starting to confirm

the lineup, so there will be much more to come. Check back frequently!7. Set the Interactive Festival Map text to Heading 2. 8. Hit Enter.9. Use any previously learned method to insert the fest_map.png image. Alternate

text should be Map of the festival stages with links to stage schedules located below.

10. With the image selected, type fest_map_im in the ID box of the Property Inspector.

11. In the Property Inspector, click the Rectangle Hotspot Tool button, then drag a box covering the Main Stage portion of the main graphic. Add the Alternate Text: Main stage with hotspot linking to the schedule below.

12. Repeat for the other stages, adding appropriate Alternate Text.13. Later, you will link the hotspots to the text they reference. 14. Save and Close the File.

Web Technologies I Basic Dreamweaver Lesson 6 - Graphics Page 3