Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we discuss placing and modifying images, I want to take a moment to talk about managing your images in Dreamweaver using the Assets panel. The Assets panel provides you with a nice central location to manage and control a number of assets including images. It allows you to organize your images, place images directly on the page by dragging and dropping them, gives you a thumbnail preview of your images and displays additional image information. So I have the gallery.htm opened from the 08_02 Explorers folder, and I'm just going to take a moment to rearrange my workspace a little bit so that we can focus on the Assets panel a little bit more clearly.
The first thing I am going to do is close my CSS Styles panel, or at least collapse it by double-clicking on the tab there. And you're going to find the Assets panel just next to the Files panels. So you can just click on that tab, and the Assets panel will become the active panel. Now, I am going to take you on a brief tour before we focus on image capabilities of the panel itself and kind of where everything is located. Now, on the left-hand side, you're going to see a series of categories. These little icons represent different things like Templates, Library Items, Movies and QuickTime movies, Flash Files, Links, Images.
And if any of those are highlighted, you're going to see that content, if you have it within the site, rather than your images. So the images are the very top category. You want to ahead and select that. Now, as soon as you do that, you're going to see a list of all the images in your site. Clicking on one of those images, and trust me, you only want to click on it once - I'll show you why that is in just a little bit - but if you click on one of the images, you'll see a little thumbnail of it right above the Assets panel, and that's probably my favorite part of this panel. You know, a lot of times you can forget exactly what you've named an image, especially if a lot of your image names are similar.
So being able to click on the image and literally see a thumbnail of it is very, very handy. Now, this is going to show you a listing of every single image in your site. So it's not just the images directory that this is scanning. It's scanning every folder and subdirectory within your entire site. And any image, any JPG, PNG file, GIF file that it finds, it's going to list here and display. Now, you can see in my Assets panel, I have two of each of these guys. What's going on there? Well, remember we have our Exercise Files folder, and we also have a Finished Files folder that's an exact duplicate of this, just with Finished Files and that's why we are seeing two of these.
So I would like to organize these a little better. And that's an important task with the Assets panel, because based on the size of your site, as the larger it gets, the more images you get, and obviously scrolling through all these images and trying to find exactly the one that you're looking for can be a little daunting. So let's talk about how we can use the Assets panel to organize your information a little bit more clearly. Well, one of the things I'm going to do here is expand the Assets panel out. I'm just going to sort of drag that divider out so that I can see more content and wow! You can see that there's actually a lot more to the Assets panel than we could see in the narrow viewer we were looking at before.
So we have columns for the Name of the image, the Dimensions, the Size of the image, the File Type, the Path, and you can actually sort by all those. So what I'm going to do right Now is I'm going go over to Full Path, and I'm going to click and what that's going to allow me to do is it's going to put all of my main images in one place and the Finished Files images in another list. So I'm essentially looking at two lists here now: one of the images in the Exercise Files and the other one, the images in the Finished Files. So that's going to help me help me sort through just a single version of these and not have to deal with the multiple versions that I was seeing just a minute ago.
That's nice but even then, there is still a ton of images here. And if I'm looking for just the images that are going to be in my gallery, that's going to make it a little bit harder on me. So one of the things that we can do to add a little bit more organization to our assets is to take advantage of favorites. You can see at the very top of the Assets panel, there are two radio buttons: one for Site and one for Favorites. Now, Site is just indicating hey, these are all of the images in your site. Favorites is your way of sort of making sure that you're only looking at the ones you want to look at. It's a way of sort of filtering the results of this site.
And I'm going to show you a couple of different ways to add images to your favorites, and then we'll do a few things over on our favorites to organize those images as well. Well, I'm really interested in the images that are going to be going into my gallery, because that is the page that we are currently working on. So I'm very curious as to where these images are and what they are. So I happen to know, by just scrolling through here, that this bird image is part of my gallery. So I really would like to add that over to my Favorites. Well, there is a couple of different ways for me to do that. First, I can right-click or Ctrl+Click that object and choose Add to Favorites.
I'll go ahead and do that. Now, as soon as you do that, Dreamweaver is going to give us this nice little message that says "Hey! "I've added that to the Favorites. If you want to take look at it, choose favorites at the top of the Assets panel." This can get kind of annoying because every single time you add something to Favorite, this message is going to come up. So it does have this Don't show me this message again. And now, you can go ahead and check that, and you won't have to worry about that sort of confirmation message every single time you add something to that. Now, I also notice I've got this golden _gate image, and I know that's part of my Favorites as well. So I can select that and in the lower right-hand corner of my Assets panel there's a little ribbon with the plus symbol beside it, and that says Add to Favorites as well.
And I can go ahead and click on that. So that's yet another way to add those images to the Favorites as well. And the thing that that confirmation message does for you is it makes sure that you don't click that ribbon like two or three times because you can keep adding this to the Favorites if you'd like. All right. so I'm going to switch over to my Favorites now, and now, I can see just the bird and just the golden_gate. Now, you'll notice that it didn't remove them from the overall view. What you're really looking at here is just a filtered results view. You're just saying "Hey! I just want to display these types of images." Now, the more you do that, obviously the more crowded this area you can get as well.
So I'm going to talk about a way in just a moment to organize your Favorites a little bit better than we're doing currently. Now, you are free over in the Favorites to actually change the name of the image, and it won't physically change the name of the image. This is what's known as a nickname. So you could say, for one of these, bird_large, if it's not the thumbnail and golden gate large if it's not the thumbnail. So just by clicking the name one time, you can go ahead and give that whatever nickname you want. Now, that does not change the name of the image. You're not physically renaming an image.
You can see in the Full Path. It's still bird.jpg. It's still golden_gate.jpg. You're just giving it what's known as a nickname over here in the Favorites, and that's really helpful if you have several different versions of an image or images that are located in different folders that are doing similar things for you. You can go ahead and name those something that makes a little bit more sense to you but doesn't actually change the name of the image itself. Okay. I'm going to show you maybe a faster way to organize images within your Favorites. So what I'm going to do here is select both of these guys, and I'm going to remove them from my favorites. So that way we won't have duplicates, and I could do that very quickly by selecting both of them, going down to the Assets panel and in the Favorites, you Now, have that ribbon with a minus symbol on it, and that will remove them from the Favorites.
So I can add things to the Favorites from several different locations. For example, I'm going to switch over to the Files panel again and in the Files panel, I'm going to open up my images directory, and I can see that I have a folder here solely for my gallery images. So they're located in their own subdirectory. I'm going to go ahead and open up that subdirectory, and I'm going to start with the first graphic in the gallery directory, hold my Shift key down and click on the last one. So I just want to select all of those images that are currently part of my gallery. I'm going to go ahead and right-click those and when I right-click them, one of the things that I can do, down here towards the bottom of this contextually sensitive menu and of course, that's Ctrl+ Click on the Mac, I can say Add to Image Favorites.
So as soon as I do that, switch back to my Assets panel, now when I look at my favorites, I have all of those images already there. So you can do it in the Files panel. You can do it from the Site view of the Assets panel. It's really up to you, in terms of how you want to do that. Now, you can see, at this point, we have a lot of images here in our Favorites. Well, what if we had multiple galleries, or maybe we wanted to start putting banner ads in here or larger photographs in here, all sharing similar themes? Well, all of a sudden, you would end up with exactly the problem that you have here in the Site view.
You've got to scroll through all of these guys and try to figure out who's who. So you do have some organizational tools available to you here in the Favorites. If you look at a lower right-hand corner of the Assets panel, you're going to see this little orange icon that looks like a folder. It is indeed a Favorites folder and if I click on that, it's going to create a brand-new untitled folder. I'm just going to type in this gallery, because these are all of our gallery images. And Now, I am free to select all of these images and place them in the gallery folder. That folder can then be opened and closed whenever I need to view those particular assets.
Now, let me be very clear about this. This does not create a folder within your site directory. We did not move these images anywhere. This is merely a tool for organizing these images here within the Favorites view. So that's the only place you'll ever see those particular folders. So I could add logos over here, banner ads, larger images, create folders for them, and then that allows me to very quickly and easily access those images, which is really, really cool. Okay, now, so other than organizing our images and being able to click on one and see a little thumbnail of it, what does the Assets panel really do for us? Well, in addition to organizing your assets, it allows you to place them on the page very quickly and very easily.
Let me show you what I mean. I'm going to switch back over here to my gallery page, and I'm just going to scroll down, and I can see that within the gallery there are all these photographs beside the descriptive text, but the last one is lacking the photographs. So it doesn't have its image. And the image that we're looking for is this oranges image, so the oranges.jpg. I can select that once right here in the Assets panel, and I can see the image. Now, there are a few ways to insert this image on the page. The first one would be just go ahead and place your cursor wherever you would want your image, maybe right in front of the M there. Highlight the oranges in the Assets panel and then click the Insert button.
So if you highlight an image and you click Insert, wherever your cursor is within your page, it's going to place in that exact location. That's really handy if you've got a very precise layout or if you have a really tight area, and you want to make sure that you're placing it exactly where you need it, you can just place your cursor in there, click Insert, the image is going to show up. There is another way to do it, and this way might be maybe a little bit more fun, and that's dragging and dropping. So I can go right over here to the Assets panel, find this oranges image. I'm going to click once on this icon, hold the mouse down, and I'm just going to drag.
And I'm going to drag that right in front of the M where it says Max. Let go. And I'm just going to give it some Alt text. I'm just going to type in Orange groves because we have our accessibility attribute is turned on, and then I'm going to go ahead and click OK. And in comes my image, shows up exactly where I wanted. And although we're going to cover this a little bit later on, just to make sure that it looks the same, I'm going to select the image, go down to the Properties Inspector, and I'm going to grab the class pulldown menu and choose gallery image, there we go. Now, it looks like the other two. And we're going to learn how to do that in just a little bit but now, our image is inserted on the page, very quickly, very easily.
We do that in a visual way. And in that way the Assets panel is a really efficient way of sorting through your images, organizing those images and then getting those images on the page. So it's a really nice tool for doing that. Now, the Assets panel does allow us to do one more thing, and let me show you what that is. Now, if you notice, in the lower right- hand corner of the Assets panel, we have another little icon down here, looks like a page with a pencil on top of it. If you hover over that, it says Edit. Now, what that's going to do for you, if you select an image and you click that icon, it's going to open up that image in whatever program you've specified to be the image editor for that file type.
So you can set Fireworks, Photoshop, GIMP, whatever program you like, and we're going to do that a little bit in one of our movies. But I'm going to do right now is show you another way of doing that. If you go to your image, let's say this oranges image, for example, and you just highlight it and double-click it and trust me you will probably find this by mistake, it's really easy to double- click an image without meaning to. When you do that, you're going to be taken on a little trip and out of Fireworks to Photoshop then you have to come back in the Dreamweaver. So you want to be careful about that. But sometimes you mean to do that. So if I double-click the oranges here, it's going to launch Photoshop. There we go.
And it's going to open that image up directly in Photoshop. So that's really nice. I don't have to go hunting through any directories. I don't have to open up Photoshop first and then do a file open and search for that that image. I can just double-click right in the Assets panel, open that up. So that's pretty cool. Now, the Assets panel isn't for everyone. I know several designers that don't use it at all in their workflow. However, for a site that is very image heavy, using the Assets panel to organize and manage your image assets can really speed up your image-related tasks. Searching through hundreds of images is a lot easier if you've taken advantage of categorizing them using the Favorites feature. What's more? The Assets panel makes placing those images on the page once you've found them as simple as dragging and dropping.
I personally love the ability to see a thumbnail of the image in the Assets panel. That allows me to confirm that I've got the right image before I place it on the page. Whether you use it a little bit or a lot, you owe it to yourself to try out the Assets panel and see how it can assist you when working with images in Dreamweaver.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.