Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Managing assets in Dreamweaver

From: Dreamweaver CS5 Essential Training

Video: Managing assets in Dreamweaver

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.

Managing assets in Dreamweaver

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.

Show transcript

This video is part of

Image for Dreamweaver CS5 Essential Training
Dreamweaver CS5 Essential Training

135 video lessons · 89120 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 57s
    1. Welcome
      1m 8s
    2. Using the exercise files
      1m 49s
  2. 7m 50s
    1. What is Dreamweaver?
      3m 16s
    2. Learning web design
      2m 22s
    3. Current web standards
      2m 12s
  3. 43m 9s
    1. The Welcome screen
      4m 5s
    2. Windows and Mac interface differences
      2m 23s
    3. The Application toolbar
      4m 7s
    4. The Document toolbar
      4m 40s
    5. Arranging panels
      8m 19s
    6. Managing workspaces
      7m 32s
    7. The Properties Inspector
      5m 54s
    8. The Insert panel
      6m 9s
  4. 25m 45s
    1. Basic site structure
      3m 11s
    2. File naming conventions
      1m 49s
    3. Defining a new site
      4m 35s
    4. Managing sites
      4m 51s
    5. Managing files and folders
      6m 36s
    6. Working with browsers
      4m 43s
  5. 27m 21s
    1. Creating new documents
      5m 16s
    2. New document preferences
      3m 6s
    3. Setting accessibility preferences
      4m 56s
    4. Working with starter pages
      3m 46s
    5. Managing starter pages
      10m 17s
  6. 30m 2s
    1. Basic tag structure
      2m 15s
    2. Adding structure to text
      8m 20s
    3. Creating lists
      9m 59s
    4. Getting text into Dreamweaver
      5m 59s
    5. Importing Word documents
      3m 29s
  7. 1h 17m
    1. Understanding style sheets
      2m 16s
    2. The anatomy of a CSS rule
      1m 48s
    3. Setting CSS preferences
      6m 36s
    4. The CSS Styles panel
      10m 2s
    5. Controlling CSS through the Properties Inspector
      5m 14s
    6. Using the Code Navigator
      7m 21s
    7. Using CSS Enable
      6m 45s
    8. Understanding element selectors
      8m 11s
    9. Understanding class selectors
      8m 49s
    10. Understanding ID selectors
      5m 59s
    11. Understanding descendant selectors
      6m 51s
    12. Attaching external style sheets
      7m 44s
  8. 1h 47m
    1. Working with units of measurement
      7m 11s
    2. Declaring font families
      9m 39s
    3. Controlling font sizing
      9m 9s
    4. Controlling weight and style
      8m 0s
    5. Controlling line height
      8m 29s
    6. Controlling vertical spacing with margins
      12m 3s
    7. Controlling spacing with padding
      5m 39s
    8. Aligning text
      8m 26s
    9. Transforming text
      5m 36s
    10. Writing global styles
      15m 42s
    11. Writing targeted styles
      17m 37s
  9. 1h 32m
    1. Understanding image types
      5m 3s
    2. Managing assets in Dreamweaver
      12m 51s
    3. Setting image accessibility preferences
      4m 20s
    4. Setting external image editing preferences
      3m 52s
    5. Placing images on the page
      7m 37s
    6. Photoshop integration
      5m 54s
    7. Modifying Smart Objects
      5m 51s
    8. Alternate Photoshop workflows
      8m 8s
    9. Modifying image properties
      11m 14s
    10. Styling images with CSS
      7m 11s
    11. Using background graphics
      9m 3s
    12. Positioning background graphics
      11m 6s
  10. 55m 16s
    1. Link basics
      3m 37s
    2. Setting site linking preferences
      2m 14s
    3. Creating links in Dreamweaver
      11m 1s
    4. Absolute links
      5m 8s
    5. Using named anchors
      11m 19s
    6. Linking to named anchors in external files
      2m 44s
    7. Creating an email link
      5m 24s
    8. Creating CSS-based rollovers
      13m 49s
  11. 1h 34m
    1. CSS structuring basics
      2m 56s
    2. The Box Model
      13m 21s
    3. Understanding floats
      6m 53s
    4. Clearing and containing floats
      8m 56s
    5. Using relative positioning
      4m 8s
    6. Using absolute positioning
      7m 18s
    7. Creating structure with div tags
      12m 7s
    8. Styling basic structure
      10m 34s
    9. Creating a two-column layout
      10m 37s
    10. Using Live View and CSS Inspect
      7m 51s
    11. Using Browser Lab
      9m 39s
  12. 56m 22s
    1. Reviewing table structure
      7m 41s
    2. Importing tabular data
      5m 13s
    3. Creating accessible tables
      9m 56s
    4. Using thead and tbody tags
      4m 0s
    5. Basic table styling
      8m 45s
    6. Styling table headers
      7m 52s
    7. Styling column groups
      4m 22s
    8. Creating custom table borders
      5m 1s
    9. Styling table captions
      3m 32s
  13. 1h 43m
    1. How forms work
      3m 0s
    2. Reviewing form design
      3m 2s
    3. Creating accessible forms
      7m 33s
    4. Setting form properties
      4m 6s
    5. The fieldset and legend tags
      4m 32s
    6. Inserting text fields
      5m 58s
    7. Inserting list menu items
      5m 26s
    8. Inserting checkboxes
      7m 50s
    9. Inserting radio button groups
      6m 22s
    10. Inserting text areas
      4m 12s
    11. Inserting submit buttons
      3m 37s
    12. Basic form styling
      12m 0s
    13. Form element styling
      8m 52s
    14. Styling form layout
      11m 49s
    15. Adding form interactivity
      2m 47s
    16. Using Spry validation widgets
      12m 49s
  14. 1h 23m
    1. Planning for templates
      10m 51s
    2. Creating a new template
      10m 37s
    3. Using editable attributes
      13m 43s
    4. Creating optional regions
      6m 23s
    5. Creating new pages from a template
      9m 17s
    6. Applying templates to existing pages
      6m 9s
    7. Working with nested templates
      7m 56s
    8. Working with repeating regions
      12m 58s
    9. Modifying templates
      5m 41s
  15. 40m 14s
    1. Behaviors overview
      3m 47s
    2. Hiding and showing elements
      9m 18s
    3. Spry overview
      4m 4s
    4. Using Spry widgets
      11m 36s
    5. Adding Spry effects
      3m 6s
    6. Using the Widget Browser
      8m 23s
  16. 28m 18s
    1. Inserting Flash files
      5m 4s
    2. Setting properties for Flash
      6m 27s
    3. Dreamweaver and Flash integration
      6m 6s
    4. Encoding Flash video
      6m 10s
    5. Adding Flash video
      4m 31s
  17. 45m 28s
    1. Running site-wide reports
      6m 33s
    2. Checking for broken links
      5m 41s
    3. Checking for browser compatibility
      8m 3s
    4. Adding remote servers
      8m 0s
    5. Uploading files
      7m 20s
    6. Managing remote sites
      9m 51s
  18. 34s
    1. Goodbye
      34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS5 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.