- Web image basics
- Previewing the completed files
- Inserting an image
- Inserting images in Design view
- Resizing images
- Inserting Photoshop Images
Previewing the completed files
To get a sense of the files you will work on in this lesson, let’s preview the completed pages in a browser.
Launch Adobe Dreamweaver CC (2021 release) or later.
Define a new site for the lesson09 folder, as described in the “Getting Started” section at the beginning of the book. Name the new site lesson09.
Open contactus-finished.html in Live view from the lesson09/finished folder.
The page includes several images.
Open aboutus-finished.html in Live view from the lesson09/finished folder.
The About Us page contains an image that adapts automatically to the size of the screen.
Drag the scrubber to the left to change the width of the document window. Notice that the image in the text area scales with the layout.
Open tours-finished.html and observe the image carousel.
The image carousel displays a large image that animates by moving from right to left. It pauses for a moment and then another image slides onto the screen. Note the headings and text that accompany each image.
Close all sample files.
In the following exercises, you will insert these images into these pages using a variety of techniques and format them to work on any screen.