Join David Powers for an in-depth discussion in this video What is Real-Time Preview?, part of Dreamweaver CC New Features.
- [Instructor] Dreamweaver's live view uses a version of the Chrome Embedded Framework to render web pages as they'll 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 and access the Real-time Preview submenu, 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 toolbars, the Document toolbar and the Common toolbar, and then press F4 to hide the panels. Now that I've 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 that the browser address bar shows the page is 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 web page 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, auto-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 a little bit, and there we are, menulink. 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.
You see the operating system is Windows 10, and the viewport size, and 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 needs to parsed 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 thing Dreamweaver asks me if I want to save the changes to index.html. I'm not going to save them, so I'll just click No, and again, I'm not going to save the changes, so I 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 will 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 document 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.
- Restricting the scope of a quick search
- Finding and replacing more selectively
- Advanced find and replace in a specific tag
- Setting the default version of PHP in Preferences
- Applying a link to selected text in Live View
- Changing information displayed in the Files panel
Skill Level Intermediate
Q: This course was updated on 10/18/2017. What changed?
A: The following topics were updated: find and replace and PHP support. In addition, new videos were added that cover code view improvements, Real-Time Preview, and CSS preprocessor integration.
Q: This course was updated on 03/30/2018. What changed?
A: New videos were added that cover using Bootstrap 4 and switching to Bootstrap 3.