1. Adobe Dreamweaver CS5 - Illustrated Unit E:Using and Managing Images

2. Unit Objectives Insert an imageInsert an image Align an imageAlign an image Enhance an imageEnhance an image Use alternate text and set Accessibility preferencesUse alternate text and set Accessibility preferences View the Assets panelView the Assets panel Adobe Dreamweaver CS5 - Illustrated

3. Unit Objectives Insert a background imageInsert a background image Delete image files from a Web siteDelete image files from a Web site Create and find images for a Web siteCreate and find images for a Web site Examine standard copyright rulesExamine standard copyright rules Adobe Dreamweaver CS5 - Illustrated

4. Inserting an Image 1.Start Dreamweaver –Open The Striped Umbrella Web site –Open dwe_1.html –Save it as about_us.html in the striped_umbrella root folder, overwriting the existing file and not updating the links –Then close dwe_1.html Adobe Dreamweaver CS5 - Illustrated

5. Inserting an Image 2.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 paragraph text on the page Adobe Dreamweaver CS5 - Illustrated

6. Inserting an Image 3.Click to the left of the word “When” in the first paragraph –Select the Common category on the Insert panel if necessary –Click the Images list arrow on the Insert panel, then click Image Adobe Dreamweaver CS5 - Illustrated

7. Inserting an Image 4.Navigate to drive and folder where you store your files –Double click club_house.jpg from the assets folder –Type Club House in the Image Tag Accessibility Attributes dialog box, click OK 5.Click the Refresh button on the Files panel toolbar if necessary Adobe Dreamweaver CS5 - Illustrated

8. Inserting an Image 6.Save the file, click the Assets panel tab, click the Images button on the Assets panel if necessary –Click the Refresh button at the bottom of the Assets panel, if necessary 7.Repeat steps 3 and 4 to insert the boardwalk.png image at the beginning of the second paragraph –If prompted, enter alternate text Adobe Dreamweaver CS5 - Illustrated

9. Inserting an Image Adobe Dreamweaver CS5 - Illustrated

10. Inserting an Image Adobe Dreamweaver CS5 - Illustrated

11. Aligning an Image 1.Scroll to the top of the page, click the club house image to select it, double-click the empty space in the right side of the Property inspector to expand it if necessary, then click the Align list arrow in the Property inspector 2.Click Left Adobe Dreamweaver CS5 - Illustrated

12. Aligning an Image 3.Scroll down the page if necessary, click the boardwalk image to select it, click the Align list arrow in the Property inspector, then click Right 4.Save your work, click Preview/Debug in browser, then click Preview in [your browser name] 5.Close the browser window Adobe Dreamweaver CS5 - Illustrated

13. Aligning an Image Adobe Dreamweaver CS5 - Illustrated

14. Aligning an Image Adobe Dreamweaver CS5 - Illustrated

15. Enhancing an Image 1.Click the club house image 2.Type 1 in the Border text box in the Property inspector –Press [Tab] to apply the border size –Click anywhere on the page to deselect image 3.Repeat steps 1 and 2 for the boardwalk image Adobe Dreamweaver CS5 - Illustrated

16. Enhancing an Image 4.Click the club house image to select it –Type 10 in the V Space text box in the Property inspector, press [Tab] –Type 10 in the H Space text box, press [Tab], then deselect the image 5.Repeat Step 4 to apply same vertical and horizontal settings to the boardwalk image Adobe Dreamweaver CS5 - Illustrated

17. Enhancing an Image 6.Click the boardwalk image to select it, note the W and H settings in the Property inspector –Click the Crop button in the Property inspector, –Then click OK to close the warning message that says you are about to permanently alter the image Adobe Dreamweaver CS5 - Illustrated

18. Enhancing an Image 7.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 boardwalk, then double-click the image to crop it 8.Click Edit on the Application bar (Win) or Menu bar (Mac) –Click Undo Crop (Win) or Undo (Mac) Adobe Dreamweaver CS5 - Illustrated

20. Clues to Use Resizing an image using an external editorResizing an image using an external editor –Use when making a significant change File size guidelinesFile size guidelines –Images should have smallest file size –Maintain necessary image quality level Adobe Dreamweaver CS4 - Illustrated

21. Using Alternate Text and Setting Accessibility Preferences 1.Click the club house image to select it, type The Striped Umbrella Club House, press [Tab], then save the file 2.Repeat step 1 to edit alternate text for boardwalk image Adobe Dreamweaver CS5 - Illustrated

22. Using Alternate Text and Setting Accessibility Preferences 3.Click Edit on the Application bar (Win) or Dreamweaver on the Menu bar (Mac) –Click Preferences –Click Accessibility in the Category list –Click the four Accessibility checkboxes, then click OK 4.Save your work Adobe Dreamweaver CS5 - Illustrated

24. Clues to Use Providing for accessibility with alternate textProviding for accessibility with alternate text –Avoid using more than 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 Adobe Dreamweaver CS5 - Illustrated

25. Viewing the Assets Panel 1.Click the Assets tab in the Files Tab group, if necessary 2.Click the Images button on the Assets panel, if necessary –Use Refresh button if needed 3.Click the Colors button to display the Colors category Adobe Dreamweaver CS5 - Illustrated

26. Viewing the Assets Panel Adobe Dreamweaver CS5 - Illustrated

27. Viewing the Assets Panel Adobe Dreamweaver CS5 - Illustrated

28. Clues to Use “Graphics” versus “Images”“Graphics” versus “Images” –Graphics refer to most non-text items on the Web page Examples: photographs, logos, navigation bars, Flash animations, graphs, background images, and illustrationsExamples: photographs, logos, navigation bars, Flash animations, graphs, background images, and illustrations –Images refer to pictures or photographs Narrower termNarrower term Referred to by file type: JPEG, GIF, PNGReferred to by file type: JPEG, GIF, PNG Adobe Dreamweaver CS5 - Illustrated

29. Clues to Use Using Favorites in the Assets panelUsing Favorites in the Assets panel –Place frequently-used assets in the Favorites list in the Assets panel –Right-click (Win) or [ctrl]-click (Mac) an image in Design view, then click Add to Image Favorites –Clicking the Favorites option in the Assets panel will display the image in the list Adobe Dreamweaver CS5 - Illustrated

30. Inserting a Background Image 1.Click Modify on the Application bar (Win) or Menu bar (Mac), then click Page Properties 2.Click Browse next to the Background image text box, navigate to the drive and folder where your files are stored, double-click the assets folder, double-click umbrella_back.gif, then click OK Adobe Dreamweaver CS5 - Illustrated

31. Inserting a Background Image 3.Click Modify on the Application bar (Win) or Menu bar (Mac), click Page Properties, click Browse next to the Background image text box –Navigate to the drive and folder where you store your files, double-click the assets folder, double-click stripes_back.gif, then click OK Adobe Dreamweaver CS5 - Illustrated

32. Inserting a Background Image 4.Click Modify on the Application bar (Win) or Menu bar (Mac), then click Page Properties 5.Highlight the information in the Background image text box, press [Delete], then click OK to close the Page Properties dialog box 6.Save your work Adobe Dreamweaver CS5 - Illustrated

34. Clues to Use Integrating Photoshop and Fireworks with Dreamweaver CS5Integrating Photoshop and Fireworks with Dreamweaver CS5 –Users can set Photoshop as the default image editor –Many functions are integrated Copy and paste Photoshop PSD files directly from Photoshop to DreamweaverCopy and paste Photoshop PSD files directly from Photoshop to Dreamweaver Dreamweaver will prompt you to choose file format and settings for the WebDreamweaver will prompt you to choose file format and settings for the Web To edit the image later, double-click it in Dreamweaver to open it in PhotoshopTo edit the image later, double-click it in Dreamweaver to open it in Photoshop Adobe Dreamweaver CS5 - Illustrated

35. Deleting Image Files from a Web Site 1.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 button to refresh the list of images 2.Right-click (Win) or [ctrl]-click (Mac) stripes_back.gif in the Assets panel, then click Locate in Site Adobe Dreamweaver CS5 - Illustrated

36. Deleting Image Files from a Web Site 3.Press [Delete] to delete the file, click Yes in the confirmation dialog box 4.Select the file umbrella_back.gif in the Files panel, then press [Delete] 5.Save your work, then preview your file in your browser 6.Close the page, then Exit (Win) or Quit (Mac) Dreamweaver Adobe Dreamweaver CS5 - Illustrated

37. Clues to Use Inserting files with Adobe BridgeInserting files with Adobe Bridge –View files outside the Web site before bringing them into the site –Integrated with Photoshop and Illustrator –Add meta tags and search text –To open Bridge, click Browse in Bridge on the File menu, or click the Browse in Bridge button on the Standard toolbar Adobe Dreamweaver CS5 - Illustrated

40. Creating and Finding Images for a Web Site Original ImagesOriginal Images –Can set transparent background Original PhotographyOriginal Photography Clip Art CollectionsClip Art Collections –May be royalty-free or for purchase The InternetThe Internet –Be conscious of copyright laws Adobe Dreamweaver CS5 - Illustrated

41. Creating and Finding Images for a Web Site Adobe Dreamweaver CS5 - Illustrated

42. Clues to Use Image file managementImage file management –Store original, unedited copies of images in a separate folder –Save edited files under a different name –Keep assets folder free of clutter Adobe Dreamweaver CS5 - Illustrated

43. Examine Copyright Rules Intellectual propertyIntellectual property –Product resulting from human creativity –Examples: inventions, movies, songs CopyrightCopyright –Protects the tangible expression of an idea TrademarkTrademark –Protects image, slogan, or design Adobe Dreamweaver CS5 - Illustrated

44. Examine Copyright Rules Fair UseFair Use –Allows limited use under certain circumstances Derivative WorksDerivative Works –Based on another pre-existing work Public DomainPublic Domain –Use free of charge Adobe Dreamweaver CS5 - Illustrated

45. Unit Summary Insert an imageInsert an image Align an imageAlign an image Enhance an imageEnhance an image Use alternate text and set Accessibility preferencesUse alternate text and set Accessibility preferences View the Assets panelView the Assets panel Adobe Dreamweaver CS5 - Illustrated

46. Unit Summary Insert a background imageInsert a background image Delete image files from a Web siteDelete image files from a Web site Create and find images for a Web siteCreate and find images for a Web site Examine standard copyright rulesExamine standard copyright rules Adobe Dreamweaver CS5 - Illustrated