Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.
One of the nice things about working with Dreamweaver is how seamlessly integrates with other Creative Suite applications, so just Photoshop and Fireworks. When working with the images for your site it's inevitable you need to occasionally Tweak or Edit those images. Dreamweaver makes editing your image remarkably easy. Often all that's 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? Well in this movie, we're going to take a look at how you can set exactly which programs Dreamweaver uses for Image Editing purposes.
It's also extremely easy, all you need to do is go to the Preferences. So I am going to go up to the Menu, go to Edit Preferences, of course there is going to Dreamweaver Preferences on the Mac, and you want to choose the File Types/Editors Category over on the left inside. Now at the top, it talks about what types of files they Dreamweaver should open up in Code View. But if you look down towards the bottom of this, we have different file type Extensions. When you highlight them you have a list of programs over here on the right-hand side, the Dreamweaver should use to open those files.
So I'm going to start off by taking a look that was common image type used on the Web which is PNG files, GIFs and JPEG's. So for PNG files currently right now Fireworks is the Primary Editing Program for that and the Photoshop is a Secondary Program. Now if I have another application that I like to use above and beyond these two, I'm free to add that. All I've to do is click the Plus symbol right here, browse out on my computer, find thee program I want and select it. Now in this case, I am actually going to change something here by Default Fireworks is the Primary Program for editing.png files and the reason for that is because Native Fireworks Files have a (.png extension) on them.
So typically, if you Save a Fireworks File as (.PNG file) and you have that file in Dreamweaver, you want to go open backup in the program that you created in. But in this case I have several PNG files that actually have a Photoshop file as a Source File and I would rather a single click giving me a Photoshop. Rather than having to choose Photoshop from a list. So what I am going to do is I am going to select Photoshop and then I'm going to tell to make Primary. You'll notice that now Dreamweaver is reporting to me that Photoshop is now the Primary Image Editing Program for png files.
For gifs I can see the Photoshop is already the Primary and for jpeg it's the Primary as well. So I'm really going to be Photoshop for this particular project to edit all my image files. Now as I mentioned before, you're free to change that, you're free to add other programs, that's one of the nice things about Dreamweaver in terms of the flexibility it gives you, in setting up your Workflows. I am going to go ahead and click OK and I just want to test this out. So I've got a spotlight file open from the 07_02 directory and I am just going to click on any of the images on the page.
I can scroll through the page and select whichever one I want. I'll just going to ahead and grab our first feature image which is the jpeg. Now I notice that here right here on the Properties Inspector there is little icon right here that says Edit. Now you can trigger editing in a couple of different places, the most obvious when you select an image on the page is the Properties Inspector itself. If I click Edit it's going to open up this image directly in Photoshop. But if I go back into Dreamweaver, I see that if I go over to say the Assets Panel that we were looking at earlier.
If I go to over my Site Assets and I go down here and find the same image which is feature 1. If I double-click that again it's going launch this image and switch over to Photoshop. If I switch the Files Panel and I open up the Images Folder, I can scroll down and find the same image Feature 1. And once again, if I double-click that it's going to switch over to Photoshop, open up the image and allow me to Edit within Photoshop. So, pretty much at any stage of being able to interact with an Image File whether it's in the Assets Panel, the Files Panel or one that you already have on the page, simply right clicking, double-clicking or choosing the Proper icon is going to take that image and open it back up in the image editing program of your choice and let you make your changes.
Now the single click editing of images is a fantastic feature. And being able to choose which program that you use for your imaging, makes it even more powerful depending upon how you like to work? Now regardless of whether using Photoshop or Fireworks even Open Source Solutions like GIMP or Acorn, take a second before starting your next Dreamwear Project. Set your Image Editing Preferences to the way you like to work. And this is going to make your Workflow more efficient and save yourself considerable time.
There are currently no FAQs about Dreamweaver CS6 Essential Training.
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.