Join David Powers for an in-depth discussion in this video What is Real-Time Preview?, part of Dreamweaver CC 2017: New Features.
- [Narrator] Dreamweaver's Live view uses a version of the Chrome embedded framework to render webpages as their look in a modern browser. It's fairly accurate, but it's no substitute for testing your pages in a real browser. Real-time Preview in Dreamweaver CC 2017 is designed to make this task a lot easier. There are several ways to access Real-time Preview. You can go to the file menu, then access the Real-time Preview sub-menu, which lists all of the browsers on your computer.
You've also got two keyboard shortcuts. These are set in preferences for the primary and secondary browsers. But I think that the quickest and easiest way is to use this little icon down at the bottom right of the document window. Click that and it opens this panel. I'm going to select Google Chrome, that launches it, and it previews it in that browser. Let's just go back to Dreamweaver. We'll also launch it in Microsoft Edge and Mozilla Firefox.
The best way to use Real-time Preview is with at least two monitors, but for the purposes of this demonstration, I'm going to split my screen in four. And in Dreamweaver I'm going to hide the visual media queries bar, then get rid of the tool bars, the Document tool bar and the Common tool bar, and then press F4 to hide the panels. Now that I have rearranged my screen, you might be wondering how this is any different from Preview in Browser in previous versions of Dreamweaver.
Well the first thing to notice is the browser address bar shows the pages being displayed through a server running on 127.0.0.1. In other words, your local computer. Also the file name, index.html, doesn't refer to the file that I've currently got open in the document window. The fact that this file here is also called index.html is coincidental. If I switch to this other file, dining.html, the Real-time Preview in each browser automatically changes, and the file name in the browser is still index.html.
Unlike the old Preview in Browser, only one webpage can be viewed using Real-time Preview, and it must be open in the document window. I'll explain later how you can access the old Preview in Browser. Let's switch back to index.html in Dreamweaver. As long as the focus is in Live view, as soon as you start scrolling in Dreamweaver, all the browsers scroll in sync. But where Real-time Preview really shines, is when you start editing your page.
So let's find the heading over this hero image, just going to select it, and then double-click to enter edit mode, and I'll change this from, "in the heart of London," to just, "in London." Delete that text. Click away to exit edit mode, and as soon as I do so, it updates in all of the browsers. There's no need to save the page, or to refresh the browsers. It all happens automatically, and this makes it possible to experiment with different ideas to see how they work in different browsers.
And you don't need to be in Live view to make changes to the page. Real-time Preview works equally well in Code view and in the Developer workspace. So let's switch to the Developer workspace. And I also need to press F4 to get rid of the panels, that's a lot better. Now although this is a fictitious hotel, if it's in London, it shouldn't be spelling neighborhood like that, so let's find that in the code, it's in the header up here. So neighborhood should really have a "u" in it.
And as soon as I do that, it updates in all of the browsers. Let's experiment with changing some styles. To edit a style sheet while working with Real-time Preview, you must open it through the related files bar. You can't open the style sheet in a separate tab. Alternatively, you need to make your changes in the CSS Designer. I'm going to use the related files bar to open main.css, and let's find the styles that style this menu link. So just scroll down little bit and there we are, menu link.
The font size is 1.2em, make it a little bit smaller, make it 1em. It immediately changes in all of the browsers. Text-transform is uppercase, let's make it lowercase, and that's also immediately reflected in the browsers. And remember that all the time that I'm making these changes I'm not saving them, and I'm not refreshing the browsers. It always happens automatically. Real-time Preview also gives you information about the browsers that you're using. So if I click this icon again, and then mouse over the names of the browsers, the one that's open now is Chrome version 53.
We see the operating system is Windows 10, and the Viewport size. Then with Microsoft Edge you get the same details there, and similarly with Firefox. When you've finished working with Real-time Preview, you can either save the changes you've made, or simply discard them by closing the file without saving the changes. Real-time Preview also works with PHP files as long as you've defined a testing server. But because the PHP code needs to be paused by the testing server, changes made to PHP files need to be saved before the browser can be updated.
But changes made to an external style sheet are updated simultaneously, as with a static HTML file. Now as I mentioned earlier, Real-time Preview displays only the current page. You can't have different pages open simultaneously in separate tabs or browsers, as you could with the old Preview in Browser. But the old behavior hasn't disappeared completely. Preview in Browser has been renamed Open in Browser, and there are two ways to activate it. One way is to right-click the document tab and from the context menu, you have Open in Browser.
So if I select Google Chrome, the first this Dreamweaver asks me if I want to save the changes to index.html, I'm not going to save them. So I just click no, and again, I'm not going to save the changes so just click no again, and here's the file that has been opened in Chrome. And we can see that it's being accessed directly from the file, and it's not being served through a server. The other way to access Open in Browser is from the files menu. So I'm going to press F4 to bring back the panels, and then with dining.html, I'll right-click that, and then right down at the bottom here, Open in Browser.
I'll open that also in Google Chrome. So this works exactly the same as the old Preview in Browser. I've got dining.html in this tab, and I've got index.html in the other tab. So now you have a choice. Real-time Preview displays the currently active documents in a browser and updates any changes in real time without needing to save. Open in Browser works the same way as Preview in Browsers did in previous versions.
Stay tuned for new tutorials and Dreamweaver tips. We'll update the course every time Adobe releases changes in 2017.
- Exploring the Start screen and reorganized workspaces
- Working with the improved Code View
- Getting real-time previews of your designs
- Styling content with SCSS and Bourbon