From the course: Dreamweaver CC Essential Training

Place images on the page - Dreamweaver Tutorial

From the course: Dreamweaver CC Essential Training

Start my 1-month free trial

Place images on the page

- [Instructor] In this chapter, we're going to look at working with images and videos in Dreamweaver CC 2017, beginning with placing images on a page. I've opened index.html at the chapter 8, 08 underscore 01 folder of the exercise files. And if I scroll down, just below this heading superlative comfort and service, are three smaller headings. Guest rooms, fitness, and weddings. I'm going to insert an image below each of these headings. And for reasons that will become obvious in a moment, I'm gonna start with weddings, and work my way to the left. As with so many operations in Dreamweaver, there's more than one way to add an image to a page. Using the Insert panel, or Insert menu, to insert an image is just like inserting any other element. In Live View, you select the elements you want the image to go next to. So in the case of weddings, I could either select the weddings heading, or the following paragraph. I'm gonna select the heading. And then go to the Insert panel. Make sure that HTML is selected at the top, and image is the second item down. You could also use the Insert menu. Image is also the second item down here. And there's a keyboard shortcut, Control + Alt + I on Windows, Command + Option + I on a Mac. Whichever method you use, it brings up the Position Assist dialog box to ask where you want the image to go. I want it to go after this heading, so click after. And that opens this dialog box to select the image source. Now one thing that you need to be careful about when inserting images. Dreamweaver usually opens the most recent folder that you selected an image from. So make sure that you're in the current site root folder by clicking the Site Root button. If you can't see the Site Root button on a Mac, click the Options button in this dialog box, and that should expand things so that you can see the Site Root button inside there. So I know that I'm in the correct site root. Go to the images folder. This is the image I want. Bride and groom, it's a JPEG. Select that, and click okay. Dreamweaver has inserted that image, but it's being displayed at its native resolution. This is a responsive website, so the image needs to resize depending on the size of the screen. And we'll need to fix that in the next couple of videos. So let's try another method of inserting an image. The next image is to go underneath the fitness heading, or just in front of this paragraph here. I'll select the paragraph this time, and then go to the Assets panel. And the Assets panel displays all of the assets including images in your site. If you can't see anything in this panel here, make sure that the image's icon is selected at the left, and if you still can't see anything, then use this Refresh Site List button down at the bottom right. Now if you're wondering why the Assets panel is listing two copies of each image, it's because the finished files folder contains a complete set of files, including a duplicate images folder. In a normal site, you should see each image listed only once unless of course you've got multiple copies of the same image in the current site. And if we just expand this assets folder a little bit further, we can see that the last column here shows you the full path. And we've got finished files, and then we've got images. And if you click that little title bar there, it reorders everything according to the names of the full path. So that brings the finished files to the top. Click it again, and the finished files go down to the bottom so the first one are the images in the site root folder. You only need to do that for this exercise. In a normal site, you should normally have only one copy of each image listed here in the assets folder. So let's just drag that back so we've got a bit more room in the document window. One of the great advantages of using the assets folder is you get this little preview of the image so you know exactly what it is that you're inserting. You also get the dimensions of the image. The image we want this time, is pool.jpg. There it is. And all we need to do is to click the Insert button at the bottom here. That brings up the Position Assist dialog. Exactly the same as before. This time we want it to go before that paragraph. So select before, and it's inserted the image of the pool. Now the Assets panel shows its dimensions to be 600 by 400 pixels. The reason that this image appears to be taller than it's wide, is because part of the image is hidden behind the image of the bride and groom. Both images are currently being displayed at their natural size. So they're wider than the section elements that they're nested inside. The image of the bride and groom is lower down in the underlying HTML, which is why it overlaps the pool. It's not the order that we inserted them into the page that counts. It's where they are actually in the underlying HTML. And that's why I'm working from right to left. If I started with the image under guest rooms, it would have been difficult to insert the subsequent images. So let's deal with the image that needs to go between guest rooms and the following paragraph. As well as inserting images with the help of the Position Assist dialog, you can drag and drop images from the Assets panel into Live View. So the image that I want this time, is this one here, rooms_cambridge.jpg. Select that, and then holding down the mouse button, begin to drag it into Live View. We get this little icon that's indicating that the image is going to go somewhere. And you saw that green line there, that's where it would be dropped. I want it to go between those two places. Now it's actually very easy to insert it between this heading and the following paragraph, but if you're not sure exactly where it's going to go, if you pause for a moment with the mouse button still held down, you get this little icon to the bottom right of the cursor. Just move the cursor into there, and it brings up a floating version of the DOM panel. And so I want it to go between the H3 and the paragraph of that section that is open there. You can also see underlying in Live View, that's where the green line is. Just release the mouse button, and it will insert the image in the correct place. If you want to nest anything inside, release the mouse button when you're hovering over the element that you want to nest the image inside. And then to get rid of this floating panel, just click away. Dragging and dropping in Live View does take a bit of practice. If you drop the image in the wrong place, you can always switch to the DOM panel, and there is the image there. And you can grab it and move it again. You see these green lines appear where it would be dropped. I don't want to move it, so I'm just going to leave it exactly where it was.

Contents