images in dreamweaver1 images in dreamweaver by james g. lengel adapted from chapter 3: working with...
TRANSCRIPT
Images in DreamweaverImages in Dreamweaver 1
Images in DreamweaverImages in Dreamweaverby James G. Lengelby James G. Lengel
Adapted from Chapter 3:Adapted from Chapter 3:
Working with Images,Working with Images,
in the in the Web Wizard’s Guide to DreamweaverWeb Wizard’s Guide to Dreamweaver
Published by Addison-Wesley 2003Published by Addison-Wesley 2003
Images in DreamweaverImages in Dreamweaver 2
ObjectivesObjectives
To understand how images work in To understand how images work in Dreamweaver.Dreamweaver.
To learn how to prepare and save images for To learn how to prepare and save images for use with Dreamweaver.use with Dreamweaver.
To be able to insert images onto a Web page To be able to insert images onto a Web page with Dreamweaver.with Dreamweaver.
To learn how to format and align images To learn how to format and align images with Dreamweaver.with Dreamweaver.
Images in DreamweaverImages in Dreamweaver 3
How Images Work in Dreamweaver
<p><strong><font color="#EF1F1D" size="5" face="Verdana, Arial, Helvetica, sans-serif">Hog Island Yacht Club</font></strong></p>
<p><img src="boat.jpg" width="188" height="157" align="left">The club was founded in the midst of the American Revolution, after British
warships had given chase to a number of American schooners and sloops that were transporting embargoed goods through Narragansett Bay...
Images in DreamweaverImages in Dreamweaver 4
Steps for working with imagesSteps for working with images
• PlanPlan• PreparePrepare• InsertInsert• AlignAlign• LinkLink• Image mapImage map
Images in DreamweaverImages in Dreamweaver 5
Image typesImage types
• Large imageLarge image• ThumbnailsThumbnails• DiagramsDiagrams• LogosLogos• BackgroundsBackgrounds
Images in DreamweaverImages in Dreamweaver 6
Image specsImage specsImage Type Content Size Location Filename
boat illustration
color photo antique ship 188x157 upper left of home page
boat.jpg
HIYC logo drawing small pink hog 82x60 left of page headline logopig.gif
6 boat thumbnails
color photos members' boats
75x75 in table on boat list page
boat1t.jpg, boat2t.jpg, etc.
board of directors
color photo board members group
400x275 center of BOD page directors.jpg
docks diagram diagram dock layout 400x300 top of facilities page docks.png
Images in DreamweaverImages in Dreamweaver 7
Editing imagesEditing images
• Set the color modeSet the color mode• Crop the imageCrop the image• Set the resolutionSet the resolution• Set the sizeSet the size• Enhance the qualityEnhance the quality
Images in DreamweaverImages in Dreamweaver 8
Saving imagesSaving images
• File formatFile format• CompressionCompression• FilenameFilename
Images in DreamweaverImages in Dreamweaver 9
Filenames for imagesFilenames for images
Type of FileType of File File FormatFile Format FilenameFilename Why It's ImproperWhy It's Improper
photo of a boatphoto of a boat JPEGJPEG my boat.gifmy boat.gif contains a space; contains a space; filename extension does filename extension does not match file formatnot match file format
HIYC logoHIYC logo GIFGIF HIYC/logo.gifHIYC/logo.gif contains a slash; uses contains a slash; uses uppercase lettersuppercase letters
Photo of boardPhoto of board JPEGJPEG board.directors.jpgboard.directors.jpg contains two periods.contains two periods.
diagram of docksdiagram of docks PNGPNG dia57342fgk67-85.pngdia57342fgk67-85.png non-descriptive filenamenon-descriptive filename
photo of clubhousephoto of clubhouse PhotoshopPhotoshop clubhouse.psdclubhouse.psd non-Web file formatnon-Web file format
Images in DreamweaverImages in Dreamweaver 10
Inserting imagesInserting images
• Set up the pageSet up the page• Insert the imageInsert the image• Preview the pagePreview the page• Adjust the imageAdjust the image
Images in DreamweaverImages in Dreamweaver 11
Aligning imagesAligning images
• Left, right, centerLeft, right, center• Next to textNext to text• In a tableIn a table
Images in DreamweaverImages in Dreamweaver 12
Linking from imagesLinking from images
• Link from an entire imageLink from an entire image• Links from an image mapLinks from an image map
Images in DreamweaverImages in Dreamweaver 13
Building an image mapBuilding an image map
• Prepare the imagePrepare the image• Create link-to pagesCreate link-to pages• Insert the imageInsert the image• Create hotspotsCreate hotspots• Preview the image mapPreview the image map
Images in DreamweaverImages in Dreamweaver 14
Building an image mapBuilding an image map