Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As a Web designer, one of the toughest things to learn is that your design is always at the mercy of the users' browsers. Your site's visitors have a lot of browsers to choose from, like Internet Explorer, Firefox, Safari, Opera, and Google's Chrome. Knowing that so many different browsers will render your pages, it's always a smart idea to test them in as many browsers as you can. This can prevent rendering errors from one browser to the next and help you ensure a consistent experience for all visitors to your site. Dreamweaver allows you to set up multiple browsers for testing and also gives you an internal testing environment using Live View.
So here, I have our Index Page open, and I want to talk about using Live View first. Now, Live View uses the integrated WebKit rendering engine directly inside of Dreamweaver. WebKit is an Open Source browser- rendering engine, used to power such browsers as Google's Chrome and Apple's Safari browser. So if I click on the Live View icon, what that's going to do is it's going to take my page, render it using WebKit and preview it in the Design view. So this is almost like previewing it in the browser directly within Dreamweaver, and it's a really nice feature.
But it still doesn't replace actually testing within the browser itself. To do that, we have a couple of options. First, on the Document toolbar, we have this little Planet icon here that allows us to preview in any browser that we've set up. You can see currently, I really only have Firefox and Internet Explorer set up. Certainly, there are more browsers than that, and really, any browser that you have installed on your system you can go ahead and add to that list, and there are a couple of different ways to do that. You'll notice that we have a link right here that says Edit browser List.
That's probably the quickest and fastest way to get there, but you could also go through Dreamweaver's Preferences. So if I go up to the menu and I go to Edit and choose Preferences, on the Mac, you'll go to Dreamweaver and choose Preferences, I notice that right down to my Category list, here's Preview in browser. This actually gives me more options than just adding new browsers, but that's the first thing I want to do. I want to add Google's Chrome browser. Now, for you guys following along at home, if you don't have Google's Chrome, you can just go download it and install it.
I want to do the same thing for Apple's Safari's browser, or really, any browser you want. It doesn't matter which browser you're using; all it's required is that it's installed on your system. So I'm going to click the Plus symbol right here to add a new browser, and I'm just going to call it Chrome, and I'm going to browse for it. Now, Google makes this work for this one. Instead of being in the Program Files, where we would normally find this, I'm going to have to browse. So I need to browse up to my user name, James Williamson, and I'll find a folder called Application Data.
Now if you're using Windows, that may be hidden from you. You going to have to go find that. This, of course, is only if you are using Google's Chrome. I'm going to go to Application Data/Local/ Google/Chrome/Application, and there it is. For the engineers in Google, thank you for putting it there on the hard drive, rather than in the Program Files. I'm going to go ahead and click Open, and notice that I can make this my primary or my secondary browser. I'm going to click OK, but I want to talk about that for a moment. With your browser listings here, you can have primary and secondary browsers.
Really, all that does for you is assign hotkeys. Notice, for example, that Firefox has the hotkey of F12, and if I wanted to make Chrome, for example, my secondary browser, now that would be Ctrl+F12 or Command+F12 on the Mac. Now we do have an option to preview using a temporary file, but that really is only something you need to worry about if you're working with dynamic files like PHP or ColdFusion-based files. For static HTML files, you never have to worry about that particular option. I'm just going to go ahead and click OK, and now if I go up to my Preview Debug in browser listing, there's Chrome.
So I could choose to Preview it in Chrome, and there's my next page in Chrome, or I can come back and choose Preview in Firefox. It's going to open it up in Firefox. Of course, remember, you did assign those hotkeys. So if I just go back into Dreamweaver and press F12, it's going to automatically launch the current page that I'm working on in Firefox for me, so that's pretty cool. Now previewing your pages as you're working on them, that's going to help you prevent small errors from becoming bigger errors later on. It helps ensure a consistent experience for all your users.
Adobe does have one more trick up in its sleeve for previewing your pages. You may have noticed in this listing that we also have this option to Preview in Adobe BrowserLab. browserLab is a new online service by Adobe. That allows you to test your pages in multiple browsers at once, and it's great for testing across multiple platforms and browsers you may not have access to. It's a more robust feature, and it's one that we're going to explore later on in its own movie.
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.