This chapter is from the book
This chapter is from the book
This chapter is from the book
Inserting an image
Images are key components of any webpage, both for developing visual interest and for telling stories. Dreamweaver provides numerous ways to populate your pages with images, using built-in commands and even using copy and paste from other Adobe apps.
In the Files panel, open contact-us.html in Live view. Make sure the document window is at least 1200 pixels wide.
The layout contains six profiles of the Favorite City Tour staff. Each profile contains an image placeholder. You may have noticed the numbers 100 x 125 that appear in the placeholder. These indicate the dimensions of the placeholder and the replacement images. In most cases, you will want to resize and resample images before you place them in the layout.
When a layout uses placeholder images, the easiest way to replace them is by using the Property inspector.
If necessary, choose Window > Properties to display the Property inspector. Dock it to the bottom of the document window.
Select the image placeholder in the profile for Elaine.
The Element Display appears focused on the img element. Note the class .mr-3 applied to it. The Property inspector displays the properties for image elements.
In HTML, images do not actually appear in the code. Instead, the <img> element references an image file somewhere on the web server or elsewhere on the internet. Then, the browser locates that file and renders it in the page. The Property inspector enables you to identify the assigned image source file and specify a new one.
Examine the Src field in the Property inspector.
The Src field says images/100X125.gif, which is the name and location of the image placeholder. You can use this field to load the image for Elaine.
Click the Browse For File icon
on the Src field.A file window opens.
Select elaine.jpg and click OK/Open.
Elaine’s picture appears in the <img> element.
Alt text provides descriptive metadata about images. In some browsers, alt text may be seen if the image doesn’t load properly, or it may be accessed by individuals with visual disabilities. You should always add alt text to your images.
In the Alt field in the Property inspector, enter Elaine, Favorite City Tour President and CEO as the alternate text to replace the existing content.
The image title attribute is similar to alt text. It provides additional information about the image. Search engines don’t use it for result rankings, but it’s a good idea to fill it in as well.
In the Title field in the Property inspector, enter Elaine, Favorite City Tour President and CEO as the title text.
Choose File > Save.
)
)
)
)
)
)
Design view provides an easier way to deal with placeholder images.