Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
That will type me up out of the actions directory into the behaviors directory, and then another dot, dot forward slash. That will take me into the configuration directory and then Shared/MM/Scripts/CM/string.js. So that's the path that we need. So just double check your path, make sure you see, dot, dot forward slash, dot, dot, forward slash, Shared, MM, Scripts, CMN, string.js. That's the correct path. So now our behaviors file will be able to access the string when it's inspecting the behavior. Okay. I am going to save this again. Now, we need to move these files into their proper location in the configuration folder. Now, we can certainly bring up a window and copy and paste them that sort of thing, but you can also just save them directly into those directories and that's what we are going to do.
So I will choose Save. It's going to prompt me if I want to update my links. I am going to say No, and it will keep the links exactly the same. After I have saved the file, I will close it. I will go into my styleSwitcher.js and I will do the same thing. I will say Save As and again I need to navigate. So Applications, Dreamweaver CS3, Configuration, Behaviors, and Action. So by now, you should be used to that path, but again, if you are on the PC, it's Program Files, Adobe, Adobe Dreamweaver CS3, Configuration, and you're on the same path we are now. So let's go to Actions, and I am just going to hit Save. Again, it's going to ask me if I want to update links. I am going to say No.
All right, now I can close this file as well, just to make sure there is no confusion about my local files that I am going to keep in case I need to debug them or the files are actually in the configuration directory. Now, Dreamweaver loads the behaviors every time it launches. So right now, if I went to my Behaviors panel, I wouldn't see this. So we are going to have to close out of Dreamweaver, and then launch it back again, so that it will reinitialize these behaviors. So I am going to go to Dreamweaver and I am going to choose Quit Dreamweaver. Okay. So we have closed Dreamweaver and we have opened it back up again, and now our behavior should be available to us, because when Dreamweaver launches, it loads all its behaviors up and it should be listed in the panel.
So I am going to open up the Index.htm file, I have opened up. So if you are following along with me in Exercise Files, go ahead and open this up, and if yours looks a little different than mine, don't panic. What we are seeing here is that I have my Style Rendering tuned off, and I accomplish that by using the Rendering toolbar. If you don't see that, you can go to View > Toolbars, and that is your Style Rendering Toolbar. So you can just bring that right up in just sort of Docks right up here. Now, I can toggle my styles on and off by clicking that, my styles are on, and you can see that when the styles are on, it's kind of really hard to see these little links over here in the upper right- hand corner, very hard to select those.
So that's why I am turning my Style Rendering off. So it just makes a little bit easier for me to select them. Now, before we try to apply a behavior, we need to remember something about what it is that our behavior is going to do. So behavior is going to switch out some style sheets on it for us, and we need to know the title of the Style Sheet. So I am going to switch over to Code view, so that I can see the title of my style sheets, and in Code View, on 7 and line 8, the normal text is called Normal Text and large text title is Large Text, and that's all I need in order to use my behavior. So I will switch back to Design View, and I am going to go ahead and start with large text. So to apply our behavior, we need to highlight the text we want to apply the behavior to and in this case, it's going to be the large A in the bracket notation.
So not any of the large text beside it or the normal text on the other side, just a bracket, notation A. So I am going to go up to my Behaviors panel, and I am going to click on the Plus symbol, and there is our Style Switcher. So you have to scroll down, you should see an alphabetical order, there is Style Switcher. I am going to go ahead and choose that, and I am going to go ahead and type in large text, because that's the title of the style sheet that we want to switch to. So I will click OK. Now, I notice that I have my Style Switcher behavior, and it's listed in my Behaviors panel, and the default event for is onClick. So when somebody clicks, the style sheets swap out, and that's perfect.
So I am going to do the same thing for the small a. We will go up and click the Plus symbol and choose Style Switcher. And did you notice the first time we did this, this is the form that we created. This is our Action file so where it says title of new style sheet file, that's the form that we've created. The OK and the Cancel button were applied for us. So we didn't have to do that. So here I am just going to type in Normal Text, there we go, click OK. There again, it says onClick Style Switcher. We will save that, and then, just to make sure that our behavior did what we expected it to do, I am going to switch over to Code View, I am going to scroll up and sure enough, there is our setActiveStyleSheet, perfect.
So we are going to save that file if we haven't already, and let's test it in our browser and see how our behavior is working. Okay, so it opens up, and I am going to click on the large text. Now, I will click on the normal text. Oh! No. Well, it's not working. Well, this is not uncommon. Whenever you are creating a behavior, it's a pretty complex process. So it's not always going to work the first time out of the gate. So in our next movie, we will examine the process of debugging a behavior.
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.