This chapter is from the book
This chapter is from the book
This chapter is from the book
Resizing images
At certain times you may receive an image that is the wrong size. Sometimes you may need to resize graphics that have already been placed on the page.
If necessary, open contact-us.html in Design view or switch to it. Scroll to the placeholder for Lainey.
Double-click the placeholder.
Select lainey.jpg and click Open.
The image is too large, and there’s barely any room for it in the column. It could use some resizing. You can resize images in Design or Live view.
Observe the Property inspector. Click the Reset
icon.The image is twice as large as the other images. You can reduce the dimensions of an image in Dreamweaver in two ways. You can manually resize the image using the handles visible on the image itself, or you can enter the desired dimensions in the Property inspector. First, you will use the Property inspector.
If necessary, click the Toggle Size Constraint icon
to select the locked icon.This icon locks the width and height so that any changes to one automatically affects the other proportionally.
In the Height field enter 125 px and press Enter/Return.
The height of the image is now 125 pixels. The image should scale smaller proportionally. If not, make sure the Toggle Size Constraint icon
shows the locked icon.The change is temporary; nothing has actually been done to the image. You could leave the new size applied to the image and upload everything to your web server, and the image will display at the new size as long as the settings remain the same. But this forces the visitor to download an image larger than they need to. A better solution is to resize the image permanently.
Right-click Lainey’s image. Choose Edit With > Adobe Photoshop 2021.
Photoshop launches and loads the image from the local site.
Choose Image > Image Size.
The Image Size dialog appears. You can resize and resample an image using this dialog.
Change the dimensions to 100 x 125 pixels and click OK.
The image is actually resized. Now you just have to save it.
Close and save the image.
Switch back to Dreamweaver. Select and observe Lainey’s image.
When you select the image, the Property inspector shows final dimensions without the Commit and Reset icons.
Lainey’s image is now the proper size. Let’s add the Alt and Title text.
Enter Lainey Harris, Research and Development Coordinator in the Alt and Title fields in the Property inspector.
Lainey’s image is complete.
Save the file.
)
)
)
)
)
)
)
)
So far, you have inserted only web-compatible image formats. But Dreamweaver is not limited to the file types GIF, JPEG, and PNG; it can work with other file types too. In the next exercise, you will learn how to insert a Photoshop document (PSD) into a webpage.