🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
How best to preview your website in Adobe Dreamweaver.
Questions
Student Gallery
Be the first to share something.
Course info
Overview
We’ll use Dreamweaver's handy templating tools to make updates to our site super easy. We’ll create our very own mobile 'burger menu' from scratch learning some basic Javascript & jQuery.
Now web design can sometimes be tricky so I am here to help - just message me if you get stuck. There are also exercise files so you can follow along. I even save a full copy of the website at the end of every video so that you can check yours again mine if you’re is not working quite right.
- You will need a copy of Adobe Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe.
- No previous web design skills are needed.
- No previous Dreamweaver skills are needed.
What am I going to get from this course?
- 39 lectures 3+ hours of well-structured content!
- You'll learn to build a responsive portfolio website from scratch.
- Learn how to take a design from Illustrator & create a professional website.
- How to use templates in Dreamweaver.
- Create mobile, tablet & desktop versions of the website.
- Build our own custom responsive navigation with burger menu.
- Introduction to Javascript & jQuery.
- How to publish your website to the internet.
- Ways to preview your designs straight to your mobile device.
- How to get the most from your portfolio Images.
- How to use beautiful web fonts in your designs.
- You will get the finished files so you never fall behind.
- Downloadable exercise files & cheat sheet.
- Forum support from me and the rest of the BYOL crew.
- All the techniques used by professional website designers.
What is the target audience?
- YES: This course is for beginners. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary.
- NO: This course is NOT suited to people experienced in using HTML & CSS.
Course duration approx 4 hours + your study.
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
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.
How do I preview a Dreamweaver website in Google Chrome?
Install Google Chrome, then open your page in Dreamweaver and choose File > Real-Time Browser Preview > Google Chrome. You can also use the browser preview icon at the bottom of the workspace. With real-time preview running, changes to your code appear in Chrome without manually refreshing the page.
How to Preview Your Website in Dreamweaver with Real-Time Browser Preview
Key Takeaways
Use Split View for quick checks, but double-check your website in an actual browser.
Find Chrome through the preview menu, or use Edit Browser List if it is missing.
See the effect of code changes immediately with real-time browser preview.
Keep Dreamweaver and Chrome visible together, ideally on separate screens.
Start with Dreamweaver’s Split View
When you are building a page, Dreamweaver’s Split View is a handy starting point. You can see the code in one part of the workspace and the page in Live View above it.
You can also drag the right-hand edge of the Live View area to make it narrower or wider. That gives you a quick way to check how the layout behaves at different widths. Double-click the edge to expand it back to fit the available space.
There are a couple of catches, though. Live View includes blue outlines and selection indicators, so it is not quite the same as seeing the finished page. It also does not always update perfectly. It is useful while you work, but I still prefer to check the result in a browser.
Think of Live View as your working preview, not your only check.
Set Up Google Chrome for Browser Preview
First, make sure you have Google Chrome installed. If you are working on a Mac and normally use Safari, install Chrome as well.
Chrome is a useful first browser to test in because it is widely used. A page that works well there is a good starting point, but it is not a guarantee that everything will behave identically in Safari, Firefox or another browser. You can test in your usual browser too.
Install Google Chrome if it is not already on your computer.
In Dreamweaver, open the File menu.
Go to Real-Time Browser Preview.
Look for Google Chrome in the browser list.
If Chrome is missing, choose Edit Browser List and locate it.
The File menu gives you access to browser preview and the browser list.
Once Chrome is available, select it to open your page. There is also a quicker route: click the little browser preview icon at the bottom of the Dreamweaver workspace and choose Preview in Chrome.
Your page opens in a separate browser window. Now you can check the page without Dreamweaver’s editing outlines and try its clickable elements, such as a linked logo.
See Your Code Changes Appear in Real Time
The really handy part is that this is not just a one-off preview. Real-time browser preview updates the page as you edit.
For example, suppose you want to try making your logo 131 pixels wide. Change its width in Dreamweaver and the browser preview updates to show the new size. You do not have to save the change or manually refresh Chrome to see that adjustment.
Keeping the editor and browser visible makes a logo size adjustment easy to compare.
Not sure you like the size? Remove the width adjustment and the preview changes back as you work. That immediate feedback makes it much easier to experiment rather than keep switching between editing and refreshing.
It is also useful when something goes wrong. A change can look perfectly reasonable in the code, while the page tells a different story. Having the browser visible helps you notice the effect straight away.
Keep the Editor and Browser on Separate Screens
On one screen, you can arrange Dreamweaver and Chrome beside each other. That is enough to see your edits and their results together.
My preferred setup uses two screens:
One screen for Dreamweaver: keep your editing workspace open, whether you prefer Split View or Code View.
One screen for Chrome: leave the real-time browser preview visible at a comfortable size.
Two screens give the editor and the browser preview their own space.
This is especially handy when you are working entirely in Code View. You can concentrate on the code while still seeing the visual result on the other screen.
A big change makes the benefit obvious. Turn off an image in Dreamweaver and it disappears from the browser preview almost immediately. The same feedback loop helps with smaller adjustments and accidental changes. Two screens look rather impressive, too, but the useful bit is keeping the result in sight.
Make Browser Checks Part of Your Workflow
Use Dreamweaver’s built-in preview for quick layout checks, then double-check the page in the actual browser. Keep real-time preview open while you edit so that checking your work becomes part of the process, rather than something you only do at the end.
Mobile and tablet checks are a separate next step once you have more of the website built. Resizing Live View is useful, but it does not replace checking the site on those devices.
Key Terms
Split View
Dreamweaver’s workspace mode that displays your code and a visual preview together.
Live View
The page preview inside Dreamweaver. It is useful for editing and quick checks, but includes editing indicators and may not always update exactly as expected.
Real-Time Browser Preview
A browser preview connected to your Dreamweaver editing session. It reflects code changes as you work, without requiring a manual refresh for each adjustment.
Code View
A workspace mode focused on the page’s source code rather than its visual layout. A separate browser preview lets you see the result while using it.
FAQs
What if Google Chrome does not appear in Dreamweaver’s preview menu?
Make sure Chrome is installed, then open File > Real-Time Browser Preview > Edit Browser List and locate it.
Do I need two monitors for real-time browser preview?
No. You can arrange Dreamweaver and Chrome together on one screen. Two monitors simply give you more room to edit and keep the page visible.
Is Dreamweaver’s Live View enough to check my website?
Live View is useful while building the page, but you should also check it in an actual browser. Its editing outlines and occasional update differences make it a working preview rather than a complete browser check.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
