Building a Website: Images Editing Fall 2013

Editing Image Four Built-In Editing Tools – Cropping – Resizing – Sharpening – Adjusting brightness and contrast See Properties These tools change the original GIF, PNG, or JPEG images, so you might want to make a copy before modification If you use the same file on other pages, the modifications will appear on those pages.

Cropping an Image Select graphic you want to crop Select Crop on Property inspector Move handles to remove parts of image Ctrl-Z to undo before you save

Resize an Image Select image to resize – Shift-drag to prevent distortion Click Resample button on Property inspector If you change your mind use Ctrl-Z before saving the file

Brightness and Contrast If image is too light, dark, or washed out – Select image – In Property inspector click Brightness/Contrast icon – Move the Brightness slider to the right to lighten or left to darken – Contrast control works in the same way Right to increase contrast (making dark colors darker, light colors lighter, left to decrease (moving all colors toward gray

Sharpening Images Used if image looks fuzzy Can make image pop Increases the contrast between an image’s pixels to create the illusion of shaper, more in- focus graphics. Select the graphic – Click Sharpen icon on the Property inspector – Move slider to right to increase the amount of sharpening (or type a number in the box)

External Editor Setup Tell Dreamweaver which graphic program you want to use – Choose Edit  Preferences – In the left pane, click File Types/Editors – From extensions list, select a graphic extension Can choose different editing tool for each type, or use the same tool for all three – Click + button above the Editors – Find the program you want to use – Can make primary program by choosing Make Primary – Repeat for each type of graphic file (if you have more than one) – Click OK

Editing Images with Fireworks Dreamweaver interfaces very well to Fireworks Need to have Fireworks installed to take advantage of this

Image Maps An array of invisible link buttons (called hotspots) To create image map – Select the graphic you wish to make into an image map – In the Map field of Property inspector type a name for the map – Select one of image map tools Rectangle, circle, polygon tool – Use the tool to draw the hotspot – Add a link to the hotspot – Set Target property if wanted – Set Alt property for hotspot – Repeat steps for each hotspot

Rollover Images Need two images, before and after images From Common tab – Insert  Rollover Image – Fill in Image Name: Otherwise Dreamweaver will do it for you – Select Original Image – Select Rollover Image – Select Alternate text if wanted – Fill in URL to go to when clicked

Flash Buttons Predesigned buttons Not all browsers will see or allow flash buttons Add Flash Button – Insert  Media  Flash Button – Select Style – Add text to Button Text – Select font and size – Add link when button is selected – Choose background color with Bg color: – Select name for your button