How best to preview your website in Adobe Dreamweaver.

Hey there, we're at super extreme close-up version. So I can show you how to best preview your website using Dreamweaver and real time browser preview. Let's go check it out.

So while you're working you've got, on Split View, we can see the Code and we can see the Live View at the top here. And this is totally fine to preview your website. The only trouble is, there's blue lines everywhere. You can drag this edge here, to re-size it to see what it looks like on different views. My only trouble is - double click to make it fit back out again. - is that it doesn't always update perfectly here. And it's better than it's ever been but I always like to preview in the browser.

First thing you need to do is make sure you've got Google Chrome installed. If you're working on a Mac, and got Safari but not Google Chrome you need to go and download that, and install it. Why? Because everybody uses Google Chrome, and if it works in Google Chrome it's more than likely it's going to work in lots of the other browsers. So test in that one. It's amazing, the percentage of people that actually use Chrome versus any other browser, including Internet Explorer, or Safari, or Firefox, so whatever you use, you can also test in there, but make sure you've got Google Chrome installed.

Once you've installed it, it should just appear in, under 'File', 'Real Time Browser Preview'. It should just appear in here, like mine does. If it doesn't, you can go to 'Edit', 'Browser List', and find it. So once it's installed, you go back up to exactly where we just were, or more easily, there's a little icon down the bottom here. And you can see here, 'Preview in Chrome'. And the browser appears, and you can see it here, there's my Logo and I can click it, and it's all good.

The cool thing about the new version of Dreamweaver is-- this is what's called a real time browser preview. And all that really means is that when I update the code here in-- I'm going to move this so you can see both of it. When I update this, and say, actually I want my logo to be 131 pixels wide, you can see, it just updated perfectly without me having to go off and reset it, or save it. It's dynamic, it just means that-- I'm not sure I want that size when I delete it, it just updates while I'm working.

Now during this course we are limited to the screen that you can see but I've actually got two monitors here on my computer. So I have this one up on another screen, which you can't see now. And I have this at full noise here. And it just means that when I update this on this monitor over here that you can't see, it's updating visually so I can see it. So if I am hiding away in Code view, doing some stuff, I can see the adjustments happen in case I'm making a mistake, or just to preview it as it's going. I hand it over to real life talking Dan to show you.

So while I'm working, I've got two screens up. I've got Dreamweaver on this one and I've got my big screen showing Google Chrome with the real time browser preview, so I click on this. And then I click, show in real time browser preview, watching it over there. Let me just make a big change so you can see easily on the camera. So I'll grab here, Image, just turn you off. Watch this, good, gone. So I make a change here, and it instantly shows over here. It's really just handy if I'm working in here, and it looks all fine but then, it changed over here. It's a really common way of working as a Web Designer. Two screens, it looks awesome.

So thank you, real Dan. That is how you preview on your browser. You can check in here, but make sure you double check in the actual browser. We'll look at checking on mobiles and tablets later on when we actually have something to check on them. So that is it, let's go into the next tutorial. See you there.