Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Covering diverse topics such as improving workflow and managing CSS styles, Dreamweaver CS3 Beyond the Basics is a hands-on course that teaches users how to move beyond standard, static websites. Instructor James Williamson explores how to increase productivity, interactivity, and accessibility with Dreamweaver. He also discusses how to extend the application's capabilities with XML and XSL. Exercise files accompany the tutorials.
We have been talking about the integration between Dreamweaver, Photoshop and Bridge and how that can speed up your workflow. Well, when you have images like the one we are using where you have got multiple options that change, this name changes, that background changes, having to go back into Photoshop and change those manually can be pretty time- consuming. So I want to explore something briefly in Photoshop that allows us to automate that process, and to do that I am going to use the same technique we used earlier which is to select the ad and click Edit in Photoshop on our Properties inspector and that will launch our ad back up. And what I want to talk about now is the use of variables inside of Photoshop and Photoshop allows you to automate your image generating process by tying different states of layers to variables and the easiest way to describe this is just to show it to you. So if I go up to the menu and I go to Image and I go to Variables, notice that I have an area right here where I can define those variables. So I am going to go ahead and do that. Now in our file, if I click on the pulldown menu here for Layer, you can see that all of our layers are available to us to actually assign variable values to that. And we are going to do that. I am going to go up to the first layer that has Danny Key's name, Dan Keys, click on that and I am going to establish a variable.
Notice that when you look at the Variable Type section, you can either set the variable to affect the layer visibility or you can actually, since it is a text layer, replace the text. Well, I am going to choose Text Replacement and I need to come up with a variable name for this. So I am going to highlight the name of this and I am just going to go ahead and call it artistName because that's the variable. It's the name of the artist. So this is the name of the variable itself obviously and not the text that it is going to replace it with. You will notice that now in our Layer menu that Dan Keys now has an asterisk up besides his name and that indicates that the variable has been associated with that layer. Now I am going to click on this to go through some of my other layers and I notice that I have a layer here called Jen and that includes the background for Jennifer Loman. So I am going to click on that and I am going to click on the Visibility variable and I am actually just going to call this jenBack for Jennifer Loman's background. And I am going to go through each of the layers that contain an image, so I will click benBack and then I will click on Danny's and I will call that one danBack. Now this is all well and good and what we are doing here is we are establishing these variables so I can create data sets that allow me to switch quickly and easily between Danny and Jennifer and Ben and that sort of thing and just make it easier for myself. The problem here though is that what if I want to assemble images at runtime? What if I wanted to bring these in from another file? Maybe I have multiple backgrounds and I don't want to spend the time of assembling them inside this file? Well, you will notice that I have an empty layer called imageImport and I am going to select that imageImport and on this imageImport any background graphic for another artist that we haven't already defined, I can bring that in. So you will notice that because this is not a text layer, instead of saying Text Replacement, it says Pixel Replacement. So I will click on Pixel Replacement and I am just going to call this artist. Actually, you know what? I will just call it newBackground. That will make sense. Now when I see the method down here of bringing this artwork in, notice that you can force it to fit, which actually can cause distortion. You can fill it, starting from whichever reference point you give it. It will fill all the available space. You can have As Is or a Conform. I am going to choose As Is because we are making sure that we have our backgrounds the exact size of this image so we can just bring them in as is. I can also choose how they are aligned and I am going to align them by their top left edge. So I will click for alignment, I will click right there at top left edge. So these are all our variables. You will notice that we are just defining variables at this point. We are not actually assigning any values to them. So I am going to click OK and nothing changes in our file because we haven't actually applied any data sets and that's the next step. So let's go up to Image, Variables and let's look at our data sets. Right now, we don't have any data set. So just establishing the variables is step one. Step two is to actually define a Data Set. So I will come in and I will do a new data set. And there is a Create new data set icon up here towards the top, I will click on that and I am going to go ahead and call this data set Dan Keys because it is going to correspond with the artist Dan Keys. So, notice that now I have access in this data set to all those variables that we just created. So I will take the artist name and that won't change. For Dan Set, it is going to be Dan Keys.
I will go to Ben's background and I will make sure that the value for Invisibility is turned on so that it is not visible. And I will do the same thing for Danny's background. I will make sure it is visible, I will make sure Jen's is Invisible. Now the layer that we specified that we are going to have new graphics come in on. Notice that when you select on newBackground you have the option of selecting a file, importing the external file or not replacing it at all and in this case, we are going to choose Do Not Replace. So now that we have done that, I just need to repeat that a couple of more times to create data sets for each of our artists. So the second one will be Jennifer Loman and once you do this the first time, going through it is pretty quick because now I can just go to artistName and I can change the value to Jennifer Loman. Now that's going to go to our Text layer and it is going to replace the existing text, which is Dan Keys, with Jennifer Loman and I will keep going. I will go through benBack, make sure it is Invisible, I will take danBack and switch it to Invisible and then I will take jenBack and I will switch that to Visible.
And by the way, if you were paying attention, you would notice that over on the left-hand side our image has actually changed and that's because I have the Preview checkbox here. So as you are building a data set, you can actually watch the image assemble. And we will keep newBackground as Do Not Replace. We will do one more for Ben Wilson. And we will go ahead and establish Ben's name, make sure his background is turned on. Make sure that Danny's and Jennifer's is turned off. And again, we will make sure the background, the newBackground, is not replacing. So we have now established all these data sets. When I click OK, now changing our image is just as easy as going up to Image > Apply Data Set.
I have had three Data Sets in here. They are all based on these variable values and if I click on Jennifer Loman, you will notice the image changes to Jennifer Loman and if I click on Ben Wilson, you will notice that the information changes to Ben Wilson. So each month I can just come in here, click at different data set and I go ahead and get that. Now that was pretty quick and pretty easy and in our next movie, I am going to show how you can externalize these variables and then load them up at runtime as you need them.
Find answers to the most frequently asked questions about Dreamweaver CS3 Beyond the Basics.
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.