- Web image basics
- Previewing the completed files
- Inserting an image
- Inserting images in Design view
- Resizing images
- Inserting Photoshop Images
Inserting images in Design view
Dreamweaver provides several ways to insert images. When the layout has placeholders or existing images, Design view provides a simple way to replace them.
Switch to Design view.
The Bootstrap styling is not supported in Design view, so the layout will look totally different. The first thing you will notice is that card elements appear in a different order than they do in Live view.
Scroll down to find the image placeholder for Sarah.
Sarah will be the third item in the section.
You could use the Property inspector to replace this placeholder, as you did before, but Design view has a few advantages over Live view.
Double-click the placeholder.
A file window opens.
Select sarah.jpg from the lesson09/images folder. Click OK/Open.
Sarah’s image appears in the <img> element.
In the Property inspector, enter Sarah Harvey, Favorite City Tour Events Coordinator in the Alt field and in the Title field.
Sarah’s image is complete.
Double-click the placeholder for Eric.
Select eric.jpg from the lesson09/images folder. Click OK/Open.
Eric’s photo replaces the placeholder.
In the Property inspector, enter Eric Quist, Favorite City Tour Transportation Research Coordinator in the Alt field and in the Title field.
Eric’s image is complete.
Save the file.
Sometimes you’ll get images that have not been prepared in advance for a particular layout. In those cases, you can transfer the image to Photoshop for corrections or resampling.