Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.
One of the nice things about working with Dreamweaver is how seamlessly it integrates with other Creative Suite applications such as Photoshop and Fireworks. When working with the images for your site, it's inevitable that you're going to occasionally need to tweak or edit those images. Dreamweaver makes editing your images remarkably easy. Often all that is required is a single click, which will then open your image in your favorite image editing software. So how does Dreamweaver know which program to use when editing your images? In this movie, we are going to take a look at how you can set exactly which programs Dreamweaver uses for image editing purposes.
So I have the tours.htm opened here. And the first thing we need to go take a look at are our Preferences. So I am going to go up to Edit > Preferences. Of course, if you are on the Mac, you are going to go to Dreamweaver and choose Preferences. The category that we are looking for is File Types/Editors. Now what you are going to see down here in the lower left-hand corner of this pane is a list of extensions. This obviously relates to more than just images, but for this chapter that is exactly what we're interested in. You'll notice for PNGs, for example, that Fireworks and Photoshop are listed, but Photoshop is listed as being the primary editing software.
Now, if you are working with a lot of mockups in your site, and you have a lot of Fireworks files, it would be very easy to select Fireworks and say Make Primary, and you can just toggle those back and forth between whichever one you wanted to be the primary image. Same thing for GIFs. We are going to make sure that Photoshop is Primary, same thing for JPEGs. We are going to make sure Photoshop is Primary. Now, what happens if you need to add a program? Maybe you've got an open-source program like GIMP or something like that, and you want to add that to the mix as well. Well you can hit this Plus symbol right here, and browse to find any program installed on your hard-drive.
So if you have another editing software you like or a different version of Photoshop that you want to use, you are free to go ahead, browse out, find those programs, and add them right here to this list. So pretty easy to do actually, and you can do that for any file type you want. You can just go through those extensions, and tell Dreamweaver exactly which program you want to use to edit that. All right! Everything looks fine. Photoshop is listed as my Primary for all the image types I am going to be using. So I am just going to go ahead and click OK. Now, what does that actually do for us? Well, I am going to scroll down, and find this image of the flag that we were talking about in our previous movie, and I am going to go ahead and select that.
Now, when I select that, the Properties Inspector is going to change. It's going to reflect my image properties. Now one of the things that it does for me is it gives me this really nice little set of icons here for editing my image. You can see right there is the Photoshop icon. Now, the reason we are seeing a Photoshop icon instead of a Fireworks icon is because we've set that in our Image Editing Preferences as being the File Type editor for JPEGs. If I click on that, it's going to switch over to Photoshop and open that image directly in Photoshop. I can make any changes that I want to this, increase Contrast, maybe make it a little bit more vibrant, whatever I'd like to do there, save it out, and if I came back in the Dreamweaver, Dreamweaver would automatically update the image on the page.
Now, there are other ways to trigger image editing in Dreamweaver as well. So I'm going to close this image. I am going to switch back to Dreamweaver. If I select my graphic and right-click it, notice that I do have Edit With and Edit Original With, interesting. We are going to talk about that Edit Original With a little bit later on when we talk about integration with other products. But Edit With allows me to choose anything in my Preferences, and if I have a program that I want to work on this image with that's not part of that list, I can browse that and find that as well.
So you just want to do a single edit, you don't feel like going through your Preferences, you can right-click it, and choose Edit With. Single click editing of images is a fantastic feature, and being able to choose which program to use for your edits makes it even more powerful. Regardless of whether using Photoshop, Fireworks or even Open Source Solutions like GIMP or Acorn, take a second before starting your next Dreamweaver project and set your image editing Preferences. It's going to make your workflow more efficient and save you a considerable amount of time.
Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.