Adobe Dreamweaver CS4 - Illustrated Using and Managing Images

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 CS4 - Illustrated

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 Adobe Dreamweaver CS4 - Illustrated

Inserting an Image Start Dreamweaver, 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, then close dwe_1.htmlStart Dreamweaver, 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, then close dwe_1.html 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 pageClick 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 Adobe Dreamweaver CS4 - Illustrated

Inserting an Image Click to place the insertion point in front of When in the first paragraph, select the Common category on the Insert panel if necessary, click the Images button 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 if necessaryClick to place the insertion point in front of When in the first paragraph, select the Common category on the Insert panel if necessary, click the Images button 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 if necessary Adobe Dreamweaver CS4 - Illustrated

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 button at the bottom of the Assets panel, if necessarySave the file, click the Assets panel tab, click the Images button on the Assets panel if necessary, then click the Refresh button at the bottom of the Assets panel, if necessary Repeat steps 3 and 4 to insert the boardwalk.jpg image at the beginning of the second paragraphRepeat steps 3 and 4 to insert the boardwalk.jpg image at the beginning of the second paragraph Repeat steps 3 and 4 to add the pool.jpg, sago_palm.jpg, and sports_club.jpg files at the beginning of each of the next paragraphs, then save your workRepeat steps 3 and 4 to add the pool.jpg, sago_palm.jpg, and sports_club.jpg files at the beginning of each of the next paragraphs, then save your work Adobe Dreamweaver CS4 - Illustrated

Inserting an Image Adobe Dreamweaver CS4 - Illustrated

Inserting an Image Adobe Dreamweaver CS4 - Illustrated

Aligning an Image 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 on the Property inspectorScroll 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 on the Property inspector Click LeftClick Left Scroll down the page if necessary, click the boardwalk image to select it, click the Align list arrow in the Property inspector, then click RightScroll down the page if necessary, click the boardwalk image to select it, click the Align list arrow in the Property inspector, then click Right Adobe Dreamweaver CS4 - Illustrated

Aligning an Image Repeat steps 1 through 3 to align the next three images, alternating the alignment between left and rightRepeat steps 1 through 3 to align the next three images, alternating the alignment between left and right Save your workSave your work Click the Preview/Debug in Browser button on the Document toolbar, then click Preview in [your browser name]Click the Preview/Debug in Browser button on the Document toolbar, then click Preview in [your browser name] Close the browserClose the browser Adobe Dreamweaver CS4 - Illustrated

Aligning an Image Adobe Dreamweaver CS4 - Illustrated

Aligning an Image Adobe Dreamweaver CS4 - Illustrated

Enhancing an Image Click the club house image to select itClick the club house image to select it Type 1 in the Border text box, then press [Tab] to apply the border sizeType 1 in the Border text box, then press [Tab] to apply the border size Repeat steps 1 and 2 for the other four imagesRepeat steps 1 and 2 for the other four images 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 imageClick 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 Adobe Dreamweaver CS4 - Illustrated

Enhancing an Image Repeat step 4 for the rest of the imagesRepeat step 4 for the rest of the images Click the sago palm image to select it, click 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 imageClick the sago palm image to select it, click 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 CS4 - Illustrated

Enhancing an 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 itPosition 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 Application bar (Win) or Menu bar (Mac), click Undo Crop (Win) or Undo (Mac) to restore the image to the original size, then save the fileClick Edit on the Application bar (Win) or Menu bar (Mac), click Undo Crop (Win) or Undo (Mac) to restore the image to the original size, then save the file Adobe Dreamweaver CS4 - Illustrated

Enhancing an Image Adobe Dreamweaver CS4 - Illustrated

Enhancing an Image Adobe Dreamweaver CS4 - Illustrated

Clues to Use Resizing an image using the Property inspectorResizing an image using the Property inspector Drag the image’s selection handle to resize the imageDrag the image’s selection handle to resize the image Dragging a selection handle distorts the imageDragging a selection handle distorts the image Hold [Shift] key to avoid distortionHold [Shift] key to avoid distortion Adobe Dreamweaver CS4 - Illustrated

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 fileClick 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 imagePreview the page in your browser, then place your pointer over the club house image Close your browser windowClose your browser window Adobe Dreamweaver CS4 - Illustrated

Using Alternate Text and Setting Accessibility Preferences Click the boardwalk image to select it, type Boardwalk to the beach in the Alt text box in the Property inspector, then press [Tab]Click the boardwalk image to select it, type Boardwalk to the beach in the Alt text box in the Property inspector, then press [Tab] Click the pool image to select it, type The pool area in the Alt text box in the Property inspector, then press [Tab]Click the pool image to select it, type The pool area in the Alt text box in the Property inspector, then press [Tab] Click the sago palm image to select it, enter Sago palm in the Alt text box in the Property inspector, then press [Tab]Click the sago palm image to select it, enter Sago palm in the Alt text box in the Property inspector, then press [Tab] Adobe Dreamweaver CS4 - Illustrated

Using Alternate Text and Setting Accessibility Preferences Click the sports club image to select it, enter The Sports Club in the Alt text box in the Property inspector, then press [Tab]Click the sports club image to select it, enter The Sports Club in the Alt text box in the Property inspector, then press [Tab] Click Edit (Win) or Dreamweaver (Mac) on the Application bar (Win) or Menu bar (Mac), click Preferences, click Accessibility in the Category list, if necessary, click the four options shown to select them if necessary, then click OKClick Edit (Win) or Dreamweaver (Mac) on the Application bar (Win) or Menu bar (Mac), click Preferences, click Accessibility in the Category list, if necessary, click 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 pageSave 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 windowClose your browser to return to the Dreamweaver window Adobe Dreamweaver CS4 - Illustrated

Using Alternate Text and Setting Accessibility Preferences Adobe Dreamweaver CS4 - Illustrated

Using Alternate Text and Setting Accessibility Preferences Adobe Dreamweaver CS4 - Illustrated

Clues to Use Setting alternate text limitsSetting alternate text limits Alternate text stays on the screen for a limited timeAlternate text stays on the screen for a limited time Avoid using more than 50 charactersAvoid using more than 50 characters Create a separate file for alternate text over 50 charactersCreate 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 CS4 - Illustrated

Viewing the Assets Panel Click the Assets tab in the Files Tab group, if necessaryClick the Assets tab in the Files Tab group, if necessary Click each category button on the Assets panelClick each category button on the Assets panel Click the Colors button to display the Colors categoryClick the Colors button to display the Colors category Adobe Dreamweaver CS4 - Illustrated

Viewing the Assets Panel Adobe Dreamweaver CS4 - Illustrated

Clues to Use “Graphics” versus “Images”“Graphics” versus “Images” Graphics refer to most non-text items on the Web pageGraphics refer to most non-text items on the Web page Photographs, logos, navigation bars, Flash animations, graphs, background images, and illustrationsPhotographs, logos, navigation bars, Flash animations, graphs, background images, and illustrations Images refer to pictures or photographsImages refer to pictures or photographs Narrower termNarrower term Referred to by file typeReferred to by file type JPEG, GIF, PNGJPEG, GIF, PNG Adobe Dreamweaver CS4 - Illustrated

Clues to Use Using Favorites in the Assets panelUsing Favorites in the Assets panel You can place assets you use repeatedly in the Favorites list in the Assets panelYou 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 or the name of the image in the Site list, then click Add to Image Favorites. When you click the Favorites option in the Assets panel, you will see the image in the listYou can right-click (Win) or [ctrl]-click (Mac) an image on a Web page or the name of the image in the Site list, then click Add to Image Favorites. When you click the Favorites option in the Assets panel, you will see the image in the list You can create a folder for storing assetsYou can create a folder for storing assets Adobe Dreamweaver CS4 - Illustrated

Inserting a Background Image Click Modify on the Application bar (Win) or Menu bar (Mac), then click Page PropertiesClick Modify on the Application bar (Win) or Menu bar (Mac), then click Page Properties Click Browse next to the Background image text box, navigate to the drive and folder where your Unit E Data Files are stored, double-click the assets folder, double-click umbrella_back.gif, then click OKClick Browse next to the Background image text box, navigate to the drive and folder where your Unit E Data Files are stored, double-click the assets folder, double-click umbrella_back.gif, then click OK 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 your Unit E Data Files are stored if necessary, double-click the assets folder, double-click stripes_back.gif, then click OKClick 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 your Unit E Data Files are stored if necessary, double-click the assets folder, double-click stripes_back.gif, then click OK Adobe Dreamweaver CS4 - Illustrated

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

Inserting a Background Image Adobe Dreamweaver CS4 - Illustrated

Clues to Use You can manage project files with Adobe BridgeYou can manage project files with Adobe Bridge View files outside the Web site before bringing them into the siteView files outside the Web site before bringing them into the site Integrated with Photoshop and IllustratorIntegrated with Photoshop and Illustrator Add meta tags and search textAdd 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 toolbarTo open Bridge, click Browse in Bridge on the File menu, or click the Browse in Bridge button on the Standard toolbar Adobe Dreamweaver CS4 - Illustrated

Clues to Use Integrating Photoshop CS4 with DreamweaverIntegrating Photoshop CS4 with Dreamweaver Users can set Photoshop as the default image editorUsers can set Photoshop as the default image editor Many functions are integratedMany 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 CS4 - Illustrated

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 button to refresh the list of imagesDisplay 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 Right-click (Win) or [ctrl]-click (Mac) stripes_back.gif in the Assets panel, then click Locate in SiteRight-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 refresh the list of images using the Assets panelPress [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 refresh the list of images using the Assets panel Adobe Dreamweaver CS4 - Illustrated

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 SiteRight-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 refresh the list of imagesPress [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 refresh the list of images Save your work, then preview your file in your browserSave your work, then preview your file in your browser Close the page, then Exit (Win) or Quit (Mac) DreamweaverClose the page, then Exit (Win) or Quit (Mac) Dreamweaver Adobe Dreamweaver CS4 - Illustrated

Deleting Image Files from a Web Site Adobe Dreamweaver CS4 - Illustrated

Deleting Image Files from a Web Site Adobe Dreamweaver CS4 - Illustrated

Creating and Finding Images for a Web Site Original ImagesOriginal Images Original PhotographyOriginal Photography Clip Art CollectionsClip Art Collections The InternetThe Internet Adobe Dreamweaver CS4 - Illustrated

Creating and Finding Images for a Web Site Adobe Dreamweaver CS4 - Illustrated

Creating and Finding Images for a Web Site Adobe Dreamweaver CS4 - Illustrated

Clues to Use Managing image filesManaging image files Store original, unedited copies of images in a separate folderStore original, unedited copies of images in a separate folder Save edited files under a different nameSave edited files under a different name Keep assets folder free of clutterKeep assets folder free of clutter Adobe Dreamweaver CS4 - Illustrated

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 CS4 - Illustrated

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 Adobe Dreamweaver CS4 - Illustrated