Subtitles of the Movie

In this movie, we're going to talk about setting up the Firefox browser and also the web-developer add-on for the Firefox browser. So what I have done is gone to my personal website, CMairsCreate.com and I'm going to show you I have resources in this area; actually a few of them in the browser section. So if you go to CMairsCreate.com and click on resources, these are resources for a lot of the topics that I cover in the various classes I teach and go ahead and click on the browsers area. Now, there are quite a few browser resources in this left-hand side, but one I would like to point out is the various browsers down at the very bottom and Chuck Upstale, I don't even know who he is actually, but he has been maintaining this website for many years and it's a great website. What he does is has the most common browsers for all of the different operating systems and he keeps this very up to date with the latest versions of all of them. So if you ever need to get the latest version of a browser, this is a quick and easy way to do so. So if you look at Firefox in the XP area up here, you'll see there's 1.5 or 2.0 and depending upon which you want to cater to, you just click on it and that will get you the browser information for install. So I'm going to assume that you have already downloaded Firefox browser and what we're going to do is install the web-developer Chilgar. The way you install any of these add-ons in Firefox is to go ahead and choose it and this one's a bit tricky to search for. It ranges on pages 14, 15, 16; it kind of varies depending upon the day, so I put this on my resources page. It may be easier for you. And you simply click the install now and it will come up with a software installation here. You do want to be in Firefox when you do this and you click on install now. It will go ahead and install the product, whichever add-on it is you choose and then you simply click restart Firefox and Firefox will reopen for you and it will have that add-on installed. Now, the last thing you may want to do is add a little icon up in this toolbar area and that's what I have right here; the web developer icon has changed over the years and it now looks like this. What I can do is just click this icon and this is my web developer toolbar with all kinds of options down here for viewing CSS, populating forms, dealing with images, a lot of different tools for your developing needs. So I click and it goes away. So install or customize any of these, you just right click, go to customize and what you do is this little icon here would be down in this area, so if you scroll down to the bottom once you've added it, then you simply drag the icon up into this area and that will put it up there and you can do the same thing for any of these icons that are in here. I already have mine installed up here so I'm not going to drag obviously. So that's how you install any Firefox add-ons. There is one other one you might be interested in. Firebug is really good for CSS or JavaScript debugging. IE View is a nice one. If I right click Firefox, I can always get to IE this way. I just right click, go down to view this page in IE and notice it opens up Internet Explorer at that same page. So that's a really handy feature to have. So I tend to install them and feel free to look through these at your leisure. So let's go back to Dreamweaver, now that Firefox is installed and set up actual browser install and let Dreamweaver know which browsers we prefer to use as our primary and secondary. So we do need to open up a new page. I'm going to click create new ColdFusion. That gets me to this little icon here and if I scroll down, you'll see added browser list. Now, right now I have Firefox set up as my primary and Internet Explorer as my secondary and that's what we're going to set up for you. So the way you add anything or remove a browser, you're not really moving it from your operating system; you're just telling Dreamweaver that you don't want it anymore and you would click this minus. So what we'll do is add Firefox together. So I will give this a name of Firefox. In the application area I will click browse and it's usually easiest to go out to your desktop area to select the icon so you don't end up accidentally selecting the installation file instead of a shortcut to the file. And I'm going to make Firefox my primary browser here. Now, notice Firefox is F12. If I wanted to change that, I could always select Firefox as my secondary and you'll see the shortcut changes. I will leave that as primary. I will select Internet Explorer and put that down as secondary. So there are our two browsers. Now, I'm going to hit F12 and we have asked Dreamweaver to force us to save a page, so I'm just going to save this as untitled so that I can preview in the browser and you will see that we have a page here that opened up in Firefox. Now that my page is saved, I can do the same thing, control F12 gets me to Internet Explorer browser. So those two are all set up. I can always add more browsers, but there's only two shortcuts you can add, so you can always access a third or fourth browser through this little drop-down here. So that is how you set up and preview in the browser within Dreamweaver and we'll be doing that throughout the course.