adobe dreamweaver cs4 - illustrated using and managing images

Adobe Dreamweaver CS4 - IllustratedAdobe Dreamweaver CS4 - Illustrated

Using and Managing ImagesUsing and Managing Images

Unit ObjectivesUnit Objectives

• Insert an imageInsert an image

• Align an imageAlign an image

• Enhance an imageEnhance an image

• Use alternate text and set Use alternate text and set Accessibility preferencesAccessibility preferences

• View the Assets panelView the Assets panel

Adobe Dreamweaver CS4 - Illustrated

Unit ObjectivesUnit 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 Create and find images for a Web sitesite


Inserting an ImageInserting an Image

• Start Dreamweaver, open The Striped Start Dreamweaver, open The Striped Umbrella Web site, open Umbrella Web site, open dwe_1.htmldwe_1.html from from the drive and folder where your Unit E the drive and folder where your Unit E Data Files are stored, then save it as Data Files are stored, then save it as about_us.htmlabout_us.html in the striped_umbrella in the striped_umbrella root folder, overwriting the existing file and root folder, overwriting the existing file and not updating the links, then close not updating the links, then close dwe_1.htmldwe_1.html

• Click the Click the Attach Style Sheet buttonAttach Style Sheet button in in the CSS Styles panel, attach the the CSS Styles panel, attach the su_styles.csssu_styles.css stylestyle sheetsheet, then apply the , then apply the body_textbody_text style to all of the paragraph text style to all of the paragraph text on the pageon the page



• Click to place the insertion point in front of Click to place the insertion point in front of WhenWhen in the first paragraph, select the in the first paragraph, select the Common categoryCommon category on the Insert panel if on the Insert panel if necessary, click the necessary, click the Images button Images button to to open the Select Image Source dialog box, open the Select Image Source dialog box, navigate to the Unit E Data Files assets navigate to the Unit E Data Files assets folder, double-click folder, double-click club_house.jpgclub_house.jpg, open , open the Files panel if necessary, then click the the Files panel if necessary, then click the Refresh buttonRefresh button on the Files panel toolbar on the Files panel toolbar if necessaryif necessary



• Save the file, click the Save the file, click the Assets panel tabAssets panel tab, , click the click the Images buttonImages button on the Assets on the Assets panel if necessary, then click the panel if necessary, then click the Refresh Refresh buttonbutton at the bottom of the Assets panel, at the bottom of the Assets panel, if necessaryif necessary

• Repeat steps 3 and 4 to insert the Repeat steps 3 and 4 to insert the boardwalk.jpgboardwalk.jpg image at the beginning of image at the beginning of the second paragraphthe second paragraph

• Repeat steps 3 and 4 to add the Repeat steps 3 and 4 to add the pool.jpgpool.jpg, , sago_palm.jpgsago_palm.jpg, and , and sports_club.jpgsports_club.jpg files files at the beginning of each of the next at the beginning of each of the next paragraphs, then save your workparagraphs, then save your work


Aligning an ImageAligning an Image

• Scroll to the top of the page, click the Scroll to the top of the page, click the club club house imagehouse image to select it, double-click the to select it, double-click the empty space in the right side of the empty space in the right side of the Property inspector to expand it if Property inspector to expand it if necessary, then click the necessary, then click the Align list arrowAlign list arrow on the Property inspectoron the Property inspector

• Click Click LeftLeft• Scroll down the page if necessary, click Scroll down the page if necessary, click

the the boardwalk imageboardwalk image to select it, click the to select it, click the Align list arrowAlign list arrow in the Property inspector, in the Property inspector, then click then click RightRight



• Repeat steps 1 through 3 to align the Repeat steps 1 through 3 to align the next three images, alternating the next three images, alternating the alignment between left and rightalignment between left and right

• Save your workSave your work

• Click the Click the Preview/Debug in Browser Preview/Debug in Browser buttonbutton on the Document toolbar, then on the Document toolbar, then click click Preview in [your browser name]Preview in [your browser name]

• Close the browserClose the browser


Enhancing an ImageEnhancing an Image

• Click the Click the club house imageclub house image to select it to select it• Type Type 11 in the Border text box, then in the Border text box, then

press press [Tab][Tab] to apply the border size to apply the border size• Repeat steps 1 and 2 for the other four Repeat steps 1 and 2 for the other four

imagesimages• Click the Click the club house imageclub house image to select it, to select it,

type type 1010 in the V Space text box in the in the V Space text box in the Property inspector, press Property inspector, press [Tab][Tab], type , type 1010 in the H Space text box, press in the H Space text box, press [Tab][Tab], , then deselect the imagethen deselect the image



• Repeat step 4 for the rest of the Repeat step 4 for the rest of the imagesimages

• Click the Click the sago palm imagesago palm image to select to select it, click the W and H settings in the it, click the W and H settings in the Property inspector, click the Property inspector, click the Crop Crop buttonbutton in the Property inspector, in the Property inspector, then click then click OKOK to close the warning to close the warning message that says you are about to message that says you are about to permanently alter the imagepermanently alter the image



• Position the pointer over the bottom-center Position the pointer over the bottom-center resizing handle, slowly move the handle resizing handle, slowly move the handle up toward the center of the image to up toward the center of the image to remove part of the lower leaves, then remove part of the lower leaves, then double-click the image to crop itdouble-click the image to crop it

• Click Click EditEdit on the Application bar (Win) or on the Application bar (Win) or Menu bar (Mac), click Menu bar (Mac), click Undo CropUndo Crop (Win) or (Win) or UndoUndo (Mac) to restore the image to the (Mac) to restore the image to the original size, then save the fileoriginal size, then save the file


Clues to UseClues to Use

• Resizing an image using the Property Resizing an image using the Property inspectorinspector• Drag the image’s selection handle to Drag the image’s selection handle to

resize the imageresize the image• Dragging a selection handle distorts the Dragging a selection handle distorts the

imageimage• Hold [Shift] key to avoid distortionHold [Shift] key to avoid distortion


Using Alternate Text and Setting Using Alternate Text and Setting Accessibility PreferencesAccessibility Preferences

• Click the Click the club house imageclub house image to select to select it, type it, type The Striped Umbrella Club The Striped Umbrella Club HouseHouse in the Alt text box on the in the Alt text box on the Property inspector, press Property inspector, press [Tab][Tab], then , then save the filesave the file

• Preview the page in your browser, Preview the page in your browser, then place your pointer over the club then place your pointer over the club house imagehouse image

• Close your browser windowClose your browser window



• Click the Click the boardwalk imageboardwalk image to select it, to select it, type type Boardwalk to the beachBoardwalk to the beach in the Alt in the Alt text box in the Property inspector, then text box in the Property inspector, then press press [Tab][Tab]

• Click the Click the pool imagepool image to select it, type to select it, type The The pool areapool area in the Alt text box in the in the Alt text box in the Property inspector, then press Property inspector, then press [Tab][Tab]

• Click the Click the sagosago palm imagepalm image to select it, to select it, enter enter Sago palmSago palm in the Alt text box in the in the Alt text box in the Property inspector, then press Property inspector, then press [Tab][Tab]



• Click the Click the sports club imagesports club image to select it, enter to select it, enter The The Sports ClubSports Club in the Alt text box in the Property in the Alt text box in the Property inspector, then press inspector, then press [Tab][Tab]

• Click Click EditEdit (Win) or (Win) or DreamweaverDreamweaver (Mac) on the (Mac) on the Application bar (Win) or Menu bar (Mac), click Application bar (Win) or Menu bar (Mac), click PreferencesPreferences, click , click AccessibilityAccessibility in the Category in the Category list, if necessary, click the list, if necessary, click the four options shownfour options shown to to select them if necessary, then click select them if necessary, then click OKOK

• Save your work, preview the page in your browser, Save your work, preview the page in your browser, then place your pointer over each image on the then place your pointer over each image on the pagepage

• Close your browser to return to the Dreamweaver Close your browser to return to the Dreamweaver windowwindow


Using Alternate Text and Using Alternate Text and Setting Accessibility Setting Accessibility PreferencesPreferences



• Setting alternate text limitsSetting alternate text limits• Alternate text stays on the screen for a Alternate text stays on the screen for a

limited timelimited time• Avoid using more than 50 charactersAvoid using more than 50 characters• Create a separate file for alternate text Create a separate file for alternate text

over 50 charactersover 50 characters• Enter the location of the file in the Long Enter the location of the file in the Long

Description text boxDescription text box


Viewing the Assets PanelViewing the Assets Panel

• Click the Click the Assets tabAssets tab in the Files Tab in the Files Tab group, if necessarygroup, if necessary

• Click each category button on the Click each category button on the Assets panelAssets panel

• Click the Click the Colors buttonColors button to display to display the Colors categorythe Colors category


Viewing the Assets PanelViewing the Assets Panel



• ““Graphics” versus “Images”Graphics” versus “Images”• Graphics refer to most non-text items Graphics refer to most non-text items

on the Web pageon the Web page• Photographs, logos, navigation bars, Flash Photographs, logos, navigation bars, Flash

animations, graphs, background images, animations, graphs, background images, and illustrationsand 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



• Using Favorites in the Assets panelUsing Favorites in the Assets panel• You can place assets you use repeatedly You can place assets you use repeatedly

in the Favorites list in the Assets panelin the Favorites list in the Assets panel• You can right-click (Win) or [ctrl]-click You can right-click (Win) or [ctrl]-click

(Mac) an image on a Web page or the (Mac) an image on a Web page or the name of the image in the Site list, then name of the image in the Site list, then click Add to Image Favorites. When you click Add to Image Favorites. When you click the Favorites option in the Assets click the Favorites option in the Assets panel, you will see the image in the listpanel, you will see the image in the list

• You can create a folder for storing assetsYou can create a folder for storing assets


Inserting a Background ImageInserting a Background Image

• Click Click ModifyModify on the Application bar (Win) or on the Application bar (Win) or Menu bar (Mac), then click Menu bar (Mac), then click Page PropertiesPage Properties

• Click Click BrowseBrowse next to the Background image text next to the Background image text box, navigate to the drive and folder where your box, navigate to the drive and folder where your Unit E Data Files are stored, double-click the Unit E Data Files are stored, double-click the assetsassets folder, double-click folder, double-click umbrella_back.gifumbrella_back.gif, , then click then click OKOK

• Click Click ModifyModify on the Application bar (Win) or on the Application bar (Win) or Menu bar (Mac), click Menu bar (Mac), click Page PropertiesPage Properties, click , click BrowseBrowse next to the Background image text box, next to the Background image text box, navigate to the drive and folder where your Unit E navigate to the drive and folder where your Unit E Data Files are stored if necessary, double-click Data Files are stored if necessary, double-click the the assetsassets folder, double-click folder, double-click stripes_back.gifstripes_back.gif, , then click then click OKOK



• Click Click ModifyModify on the Application bar on the Application bar (Win) or Menu bar (Mac), then click (Win) or Menu bar (Mac), then click Page PropertiesPage Properties

• Highlight the information in the Highlight the information in the Background image text box, press Background image text box, press [Delete][Delete], then click , then click OKOK to close the to close the Page Properties dialog boxPage Properties dialog box

• Save your workSave your work



• You can manage project files with You can manage project files with Adobe BridgeAdobe Bridge• View files outside the Web site before View files outside the Web site before

bringing them into the sitebringing 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 To open Bridge, click Browse in Bridge on the File menu, or click the Browse in on the File menu, or click the Browse in Bridge button on the Standard toolbarBridge button on the Standard toolbar



• Integrating Photoshop CS4 with Integrating Photoshop CS4 with DreamweaverDreamweaver• Users can set Photoshop as the default Users can set Photoshop as the default

image editorimage editor

• Many functions are integratedMany functions are integrated• Copy and paste Photoshop PSD files Copy and paste Photoshop PSD files

directly from Photoshop to Dreamweaverdirectly from Photoshop to Dreamweaver• Dreamweaver will prompt you to choose file Dreamweaver will prompt you to choose file

format and settings for the Webformat and settings for the Web• To edit the image later, double-click it in To edit the image later, double-click it in

Dreamweaver to open it in PhotoshopDreamweaver to open it in Photoshop


Deleting Image Files from a Deleting Image Files from a Web SiteWeb Site• Display the Display the Assets panelAssets panel, if necessary; , if necessary;

click the click the Images buttonImages button on the Assets on the Assets panel, verify that the Site option is selected, panel, verify that the Site option is selected, then click the then click the Refresh buttonRefresh button to refresh the to refresh the list of imageslist of images

• Right-click (Win) or [ctrl]-click (Mac) Right-click (Win) or [ctrl]-click (Mac) stripes_back.gifstripes_back.gif in the Assets panel, then in the Assets panel, then click click Locate in SiteLocate in Site

• Press Press [Delete][Delete] to delete the file, click to delete the file, click YesYes in in the dialog box asking if you really want to the dialog box asking if you really want to delete the file, display the Assets panel, delete the file, display the Assets panel, then refresh the list of images using the then refresh the list of images using the Assets panelAssets panel


Deleting Image Files from a Deleting Image Files from a Web SiteWeb Site• Right-click (Win) or [ctrl]-click (Mac) Right-click (Win) or [ctrl]-click (Mac)

umbrella_back.gifumbrella_back.gif in the Assets panel, in the Assets panel, then click then click Locate in SiteLocate in Site

• Press Press [Delete][Delete] to delete the file, click to delete the file, click YesYes in the dialog box asking if you really want in the dialog box asking if you really want to delete the file, display the Assets panel, to delete the file, display the Assets panel, then refresh the list of imagesthen refresh the list of images

• Save your work, then preview your file in Save your work, then preview your file in your browseryour browser

• Close the page, then Close the page, then ExitExit (Win) or (Win) or QuitQuit (Mac) Dreamweaver(Mac) Dreamweaver


Deleting Image Files from a Deleting Image Files from a Web SiteWeb Site


Creating and Finding Images Creating and Finding Images for a Web Sitefor a Web Site• Original ImagesOriginal Images

• Original PhotographyOriginal Photography

• Clip Art CollectionsClip Art Collections

• The InternetThe Internet


Creating and Finding Images Creating and Finding Images for a Web Sitefor a Web Site



• Managing image filesManaging image files• Store original, unedited copies of Store original, unedited copies of

images in a separate folderimages 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


Unit SummaryUnit Summary

• Insert an imageInsert an image

• Align an imageAlign an image

• Enhance an imageEnhance an image

• Use alternate text and set Use alternate text and set Accessibility preferencesAccessibility preferences

• View the Assets panelView the Assets panel


Unit SummaryUnit 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 Create and find images for a Web sitesite


adobe dreamweaver cs4 - illustrated using and managing images

Documents

imagestart dreamweaver

images button

files panel toolbar

insert panel

assets panel tab

browser button

refresh button

attach style sheet button