Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.
Adobe BrowserLab is one of the many services offered by Adobe that have been integrated with Dreamweaver CS5. Although it has been available through Adobe Labs for some time, you may not be familiar with BrowserLab or what it can do for you. If you have used BrowserLab before, you're going to be really pleased with the level of integration between Dreamweaver CS5 and BrowserLab. So, what is BrowserLab? BrowserLab is an online service by Adobe that allows you to preview any page you want in multiple browsers. It's a fantastic tool for making sure that your website is cross-browser compatible.
Now obviously, you want to preview your pages in as many browsers as possible, but very few of us have a setup that allows us to preview our pages in multiple browsers across multiple platforms. That is exactly what BrowserLab allows us to do. Let's take a closer look at BrowserLab and how Adobe has integrated it with Dreamweaver CS5. So, here I have my tourDetail.htm page open, but you can really open any page you want to test BrowserLab. Adobe gives us a few different ways to access BrowserLab and I want to show you a couple of those.
Now, first off, we can go up to the menu and you can go to Window > Extensions > Adobe BrowserLab. That will open up the Adobe BrowserLab panel. There are a few other ways to access this that you might find a little quicker. Now, I am going to go ahead and close the panel and show you a couple of those. Now, first off if you notice in the application toolbar here in the upper-right hand corner, now if you are on a Mac the application toolbar will be docked close down here to the document toolbar, but you are looking for this CS Live panel.
Now if I click on that, one of the integrated services offered in the CS Live panel is Preview in Adobe BrowserLab. That again would open up the same panel that we just looked at. And yet another way to preview in Adobe BrowserLab and probably the easiest is over here in the document toolbar itself, where you're probably used to going ahead and previewing your pages in browsers using the icon. You can click on that and you have a list of all the browsers that you have loaded. But now in addition to those browsers, we also have Preview in Adobe BrowserLab.
Well, let's check it out and see what that does for us. So, I am going to click on Preview in Adobe BrowserLab and that's going to take us to the Adobe BrowserLab site. Now, the first time you access this, you are going to be get prompted to log in with your Adobe ID and your password. If you don't already have an Adobe ID you will be prompted to go ahead and get one. They're free and it only takes a minute to sign up. So, you are going to need to go ahead and do that to access Adobe BrowserLab. Once you sign in, Dreamweaver is going to upload your page to Adobe BrowserLab's staging server, which is then going to take screenshots in the browsers that you request.
So, which browsers did you request? Well, if you're using BrowserLab for the first time, you're using the default browser set, but you're free to go ahead and build your own to test in exactly the platforms you want to test in. if you look over here in the upper- left hand corner, I can see currently that I'm previewing how this page would look in Firefox 3.0 for Windows. If I grab the pulldown menu, I can see the other browsers that I tested in. Internet Explorer 7.0 for Windows, Firefox 3 for Mac OS X, and Safari 3 for Mac OS X. So, since I am on a PC, maybe I really want to see how this looks on Safari for the Mac.
So, I can go ahead and click on that and now I can preview my page as to how this page would look like on a Safari. And I get a nice screen cap of that to make sure everything is where it's supposed to be. But let's say I want to be a little bit more proactive or controlling of exactly which environments this has tested in. If I go right up at the top of the Adobe BrowserLab page, I can see there's a little navigation link here for browser sets. So I am going to go ahead and click on that. Right now all we are looking at is the default browser set, but you can see there is a list of available browsers. Now as this service matures, you are going to see more and more browsers show up there.
But let's say I wanted to test it in the most modern standards-compliant browsers. So, I want to build a new browser set to enable me to do that. So, I am going to say Add New Browser Set and I am just going to call this modern standard. And then I just checked the browsers that I want to add to this. So, maybe Chrome 3.0, maybe Firefox 3.0, maybe Firefox 3.0 for Windows as well, maybe Internet Explorer 8 and Safari 3 and Safari 4. So, you can add as many as you want.
You can take some out. You could build an Internet Explorer only browser set. It's totally up to you what you want to do with those. You can rename these browser sets and edit them at any time. Okay. So, now how do I preview with my new browser set? Well, I can go right back to my test page and because I have that connection between Dreamweaver and BrowserLab at the moment, I can go ahead and refresh that connection. So, I can go right over here to this Refresh button and click Refresh the screenshots. What it's going to do now is it's going to upload all those assets again and take screenshots based on my current browser set.
And after the page is done refreshing, I now have new screenshots available for me. I can go see what it looks like in Chrome 3.0 for Windows, Internet Explorer 8.0, I have got my whole list. Now, there are a couple of other things that we can do here within this environment to help us. Number one, you'll notice that we have a little dialog box over here on the right-hand corner called Delay. If you have some items, such as Ajax widgets or complicated CSS that might require a second or two for the page to load before you wanted to take the snapshot, you go ahead and put in the amount of Delay that you want.
So, if you put in two seconds of Delay, the BrowserLab will wait for two seconds and then take the screenshots to allow any of those elements to load. We also have some zooming features, we can go all the way up to 400%, all the way down to 75%. So you can zoom in and zoom out to check out and examine close areas of your page. One of my favorite features is the ability to have rulers and ruler guides so that you can see from one browser to another how an element is lining up with other elements that are staying in place. So, if I go over here to my View menu.
which is the upper left-hand corner, I can choose Show Rulers. At that point, maybe I want to make sure that this logo isn't going to be wandering from one browser to another. So, notice I can put the ruler guide right there at the very bottom of that by just simply be dragging it out from the rulers. So now, I could go through my browser menu and see exactly how that logo lines up in each one of those and I am feeling pretty good about that. Now, you could also change your view to a 2-up model where you will have one browser on one side and another browser on the other side, so maybe I could check Firefox in Windows versus Safari for the Mac and see how those two would compare.
And we can also do what's known as Onion Skin. Now, what Onion Skin is going to do is overlay those two browsers on top of each other. So, while the ruler guide looked okay, we can see that there are some slight differences in placement between Safari 4.0 for the Mac and Firefox 3.0 for Windows. We can also go down and say all right, well what about Firefox 3.0 for the Mac? And can see that while there are some slight differences there, they are a little bit closer. So, you could use that to monitor exactly how pixel-precise you are from one browser to another and maybe give yourself an idea of which elements need to be moved around or what is acceptable or what's not acceptable.
Notice also you can shade it from one side to the other. So, if you want to see more of Firefox for the Mac versus Firefox for Windows, you can go from one side to the other. So, you can get ideas in terms of who is shifting which way, or which elements aren't displaying properly based on the available browsers. There is also hot keys available too. So, if you want to change your views, you simply click on the hot keys button here to view those and they're pretty easy to memorize. The 2-up View is 2 for example. So, if I hit 2, after I close my hot keys, I have hit the little number 2, it's going to switch me to a 2-up View.
1 is going to give me a single view. So, my Up and my Down Arrows will move me through the browser set. Now one last thing that I want to talk about in terms of integration. If I switch back to Dreamweaver, any time that you are previewing this inside BrowserLab locally, there's a couple of things that you need to be aware of. First off, if you make a change to the page at all, if I just say took a letter away and put it back in there and then saved it, notice that instead of a green light, we're getting a yellow light. That's BrowserLab telling you wait a minute, you've made a change since the last time you have previewed.
So, if you want to view the page accurately now, you need to go ahead and preview it again. There is also one other thing that you really need to be aware of. Dreamweaver CS5 continues to have WebKit integration built into it. So, if we were to click on the Live View Preview button, the Design View window pane now shows us our page previewed using the WebKit rendering engine. Well, if you have Live View on, when you preview it in BrowserLab, BrowserLab is going to take a snapshot of the WebKit rendering. So it might not be as accurate as you would want it to be, based on your HTML being previewed in say Internet Explorer 6.0 or Safari 3.0.
You are really looking at it in terms of the WebKit rendering within Dreamweaver. So, before you preview, make sure Live View is turned off. Now, BrowserLab isn't going to tell you exactly what's wrong with your CSS, but it's worth noting that it provides you with a powerful tool for previewing your page in industry-standard browsers, even across platforms. As a designer this type of information is extremely valuable. It can save you considerable time during the development process and help you avoid costly errors. As you start working with Dreamweaver CS5, take some time to explore Adobe's integrated BrowserLab service.
I think you'll quickly find it an invaluable part of your design workflow.
Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training.
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.