Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit E Using and Managing Images

Macromedia Dreamweaver 8--Illustrated Introductory 2 U n i t O b j e c t i v e s Insert an image Align an image Enhance an image Use alternate text and set Accessibility preferences View the Assets panel

Macromedia Dreamweaver 8--Illustrated Introductory 3 U n i t O b j e c t i v e s Use the Assets panel to insert Flash text Insert a background image Delete image files from a Web site Create and find images for a Web site

Macromedia Dreamweaver 8--Illustrated Introductory 4 Inserting an Image Open The Striped Umbrella Web site, open dwe_1.html from the drive and folder where your Unit E Data Files are stored, then save it as about_us.html in the striped_umbrella root folder, overwriting the existing file, and not updating the links Click the Attach Style Sheet button in the CSS Styles panel, attach the su_styles.css style sheet, then apply the body_text style to all of the paragraph text on the page Click to place the insertion point in front of When in the first paragraph, click the Insert bar list arrow, click Common, click the Images list arrow in the Insert bar, then click Image to open the Select Image Source dialog box, navigate to the Unit E Data Files assets folder, double-click club_house.jpg, open the Files panel if necessary, then click the Refresh button on the Files panel toolbar

Macromedia Dreamweaver 8--Illustrated Introductory 5 Inserting an Image Save the file, click the Assets panel tab, click the Images button on the Assets panel if necessary, then click the Refresh Site List button at the bottom of the Assets panel Repeat the third and fourth steps to insert the boardwalk.jpg image at the beginning of the second paragraph Repeat the third and fourth steps to add the pool.jpg, sago_palm.jpg, and sports_club.jpg files at the beginning of each of the next paragraphs

Macromedia Dreamweaver 8--Illustrated Introductory 6 Inserting an Image

Macromedia Dreamweaver 8--Illustrated Introductory 7 Aligning an Image Scroll to the top of the page, click the club house image to select it, click the Property inspector expander arrow to expand it if necessary, then click the Align list arrow on the Property inspector Click Left Scroll down the page, click the boardwalk image to select it, click the Align list arrow on the Property inspector, then click Right Repeat the previous three steps to align the next three images, alternating the alignment between left and right

Macromedia Dreamweaver 8--Illustrated Introductory 8 Aligning an Image Save your work Click the Preview/Debug in Browser button on the Document toolbar, then click Preview in [your browser name] Close the browser

Macromedia Dreamweaver 8--Illustrated Introductory 9 Aligning an Image

Macromedia Dreamweaver 8--Illustrated Introductory 10 Aligning an Image

Macromedia Dreamweaver 8--Illustrated Introductory 11 Enhancing an Image Click the club house image to select it Type 1 in the Border text box, then press [Tab] to apply the border size Repeat the first two steps for the other four images Click the club house image to select it, type 10 in the V Space text box on the Property inspector, press [Tab], type 10 in the H Space text box, press [Tab], then deselect the image

Macromedia Dreamweaver 8--Illustrated Introductory 12 Enhancing an Image Repeat the previous step for the rest of the images Click the sago palm image to select it, click the Crop button on the Property inspector, then click OK to close the warning message that you are about to permanently alter the image Position the pointer over the bottom-center resizing handle, slowly move the handle up toward the center of the image to remove part of the lower leaves, then double-click the image to crop it Click Edit on the menu bar, click Undo Crop to restore the image to the original size, then save the file

Macromedia Dreamweaver 8--Illustrated Introductory 13 Enhancing an Image

Macromedia Dreamweaver 8--Illustrated Introductory 14 Clues to Use Resizing an image using the Property inspector  Drag the image’s selection handle to resize the image  Dragging a selection handle distorts the image Hold to [Shift] key to avoid distortionHold to [Shift] key to avoid distortion

Macromedia Dreamweaver 8--Illustrated Introductory 15 Using Alternate Text and Setting Accessibility Preferences Click the club house image to select it, type The Striped Umbrella Club House in the Alt text box on the Property inspector, press [Tab], then save the file Preview the page in your browser, then place your pointer over the club house image When the pointer is over the image, a small text box containing the alternate text appears on the screen Close your browser window Click the boardwalk image to select it, type Boardwalk to the beach in the Alt text box on the Property inspector, then press [Tab] Click the pool image to select it, type The pool area in the Alt text box on the Property inspector, then press [Tab]

Macromedia Dreamweaver 8--Illustrated Introductory 16 Using Alternate Text and Setting Accessibility Preferences Click the palm image to select it, enter Sago palm in the Alt text box on the Property inspector, then press [Tab] Click the sports club image to select it, enter The Sports Club in the Alt text box on the Property inspector, then press [Tab] Click Edit (Win) or Dreamweaver (Mac) on the menu bar, click Preferences, click Accessibility in the Category list, if necessary, click the the four options shown to select them if necessary, then click OK Save your work, preview the page in your browser, then place your pointer over each image on the page Close your browser to return to the Dreamweaver window

Macromedia Dreamweaver 8--Illustrated Introductory 17 Using Alternate Text and Setting Accessibility Preferences

Macromedia Dreamweaver 8--Illustrated Introductory 18 Using Alternate Text and Setting Accessibility Preferences

Macromedia Dreamweaver 8--Illustrated Introductory 19 Clues to Use Alternate text limits  Alternate text stays on the screen for a limited time  Avoid using over 50 characters  Create a separate file for alternate text over 50 characters Enter the location of the file in the Long Description text boxEnter the location of the file in the Long Description text box

Macromedia Dreamweaver 8--Illustrated Introductory 20 Viewing the Assets Panel Click the Assets tab in the Files panel group, if necessary Click each category button on the Assets panel Click the Colors button to display the Colors category Click the Flash button on the Assets panel, then click the Play button to see the Flash text preview Click the Stop button

Macromedia Dreamweaver 8--Illustrated Introductory 21 Viewing the Assets Panel

Macromedia Dreamweaver 8--Illustrated Introductory 22 Clues to Use Using Favorites in the Assets panel  You can place assets you use repeatedly in the Favorites list in the Assets panel  You can right-click (Win) or [ctrl]-click (Mac) an image on a Web page, then click Add to Image Favorites. When you click the Favorites option in the Assets panel, you will see the image in the list

Macromedia Dreamweaver 8--Illustrated Introductory 23 Using the Assets Panel to Insert Flash Text With the about us page open in Design View, place the insertion point at the bottom of the page, then press [Enter] (Win) or [return] (Mac) Click the Assets tab, if necessary, then click the Flash button to view the Flash category in the Assets panel Click the Play button in the upper-right corner of the Assets preview window, then move the pointer over the word Home Click the Stop button to stop the movie Click home.swf in the Assets panel to select it if necessary, click Insert at the bottom of the Assets panel, then type Flash text link to home page in the Object Tag Accessibility Attributes dialog box, then click OK

Macromedia Dreamweaver 8--Illustrated Introductory 24 Using the Assets Panel to Insert Flash Text Save your work, then preview the page in your browser Scroll to the bottom of the page, then click Home Close your browser window Click the Show Code View button, scroll to view the Flash text code, click on the page to deselect the code, then examine the code Click the Show Design View button

Macromedia Dreamweaver 8--Illustrated Introductory 25 Using the Assets Panel to Insert Flash Text

Macromedia Dreamweaver 8--Illustrated Introductory 26 Clues to Use Deleting images from the Assets panel Right-click (Win) or [ctrl]-click (Mac) the image in the Assets panel Click Locate in Site Select and delete the filename, responding appropriately to any warning messages You cannot delete files directly from the Assets panel

Macromedia Dreamweaver 8--Illustrated Introductory 27 Inserting a Background Image Click Modify on the menu bar, then click Page Properties Click Browse next to the Background image text box, click the drive and folder where your Unit E Data Files are stored, double-click the assets folder if necessary, double-click umbrella_back.gif, then click OK Click Modify on the menu bar, click Page Properties, click Browse next to the Background image text box, click the drive and folder where your Unit E Data Files are stored, doubleclick the assets folder, double-click stripes_back.gif, then click OK

Macromedia Dreamweaver 8--Illustrated Introductory 28 Inserting a Background Image Click Modify on the Document window menu bar, then click Page Properties Highlight the information in the Background image text box, press [Delete], then click OK to close the Page Properties dialog box Save your work

Macromedia Dreamweaver 8--Illustrated Introductory 29 Inserting a Background Image

Macromedia Dreamweaver 8--Illustrated Introductory 30 Deleting Image Files from a Web Site Display the Assets panel, if necessary; click the Images button on the Assets panel, verify that the Site option is selected, then click the Refresh Site List button to refresh the list of images Right-click (Win) or [ctrl]-click (Mac) stripes_back.gif in the Assets panel, then click Locate in Site Press [Delete] to delete the file, click Yes in the dialog box asking if you really want to delete the file, display the Assets panel, then click on the Assets panel to refresh the list of images

Macromedia Dreamweaver 8--Illustrated Introductory 31 Deleting Image Files from a Web Site Right-click (Win) or [ctrl]-click (Mac) umbrella_back.gif in the Assets panel, then click Locate in Site Press [Delete] to delete the file, click Yes in the dialog box asking if you really want to delete the file, display the Assets panel, then click to refresh the list of images Save your work, then preview your file in your browser Close the page, then Exit (Win) or Quit (Mac) Dreamweaver

Macromedia Dreamweaver 8--Illustrated Introductory 32 Deleting Image Files from a Web Site

Macromedia Dreamweaver 8--Illustrated Introductory 33 Creating and Finding Images for a Web Site Original images  Transparent backgrounds Original photography Clip art collections  Royalty-free The Internet  Public domain

Macromedia Dreamweaver 8--Illustrated Introductory 34 Creating and Finding Images for a Web Site

Macromedia Dreamweaver 8--Illustrated Introductory 35 Creating and Finding Images for a Web Site

Macromedia Dreamweaver 8--Illustrated Introductory 36 U n i t S u m m a r y Insert an image Align an image Enhance an image Use alternate text and set Accessibility preferences View the Assets panel

Macromedia Dreamweaver 8--Illustrated Introductory 37 U n i t S u m m a r y Use the Assets panel to insert Flash text Insert a background image Delete image files from a Web site Create and find images for a Web site