Previewing and Publishing in Dreamweaver

Name: Previewing and Publishing in Dreamweaver
Author: Patti Scully-Lane

Using the right functions to preview websites on different devices and browsers.

Preview the first lesson free — get full access to all 4 lessons.

Course: On-Demand

In this lesson, you are going to learn built-in features in Dreamweaver that will help you when previewing documents prior to making them live. And we're going to open up events.html. When we open up this page, if you are in live view, you can see that there are no events here at all on this page. If we go over to design view, we can see a little bit more information. We have our events, but we do see a problem over here with some code. Now, Dreamweaver has a couple different ways for us to figure out if there's something wrong with our code. One of those ways is right down here at the bottom of the page, just to the left of one of our real-time preview icons. And when we put our cursor over that little red X, it tells us that we have one error and one warning is found in our code. So if we click on that icon, an output panel opens up, and it tells us where exactly in the code those problems are. So on my line 54, it says the tag must be paired. It's missing a close H2 tag, and it says the start tag match failed on line 35. So we're looking for an H2 tag that was not closed properly. And the other is an alternate attribute must be present on image elements. So that's on our line 53. So if we go over to our code view and we scroll down, we can see that our line 53 is orange and our line 54 is red. This is telling us that we have a bad tag on line 35. So if we go up to our line 35, we can see here is the beginning of that H2 tag. And if we click on that down here in our properties, it's telling us that it's an invalid markup. And that's because the closing tag after this main content is not there. So if we open up a carrot and do a slash, if you have your site set up so that it will automatically close a tag, it will automatically put in that H2 after the slash. Otherwise, you might have to type in that slash H2. So as soon as we do that, if we look down here in our output, that red line goes away. And if we scroll down, our line 54 is no longer red. Now line 53 is telling us an alternate attribute must be present on our image elements. So we have an image here, but it does not have an alternate attribute. So if we go back to design view and click on this image down here in our properties, we can type in early morning yoga as an alternate attribute. And as soon as we click out of that box, our output goes away as well. And our red X that we had over here has been replaced with a green check mark in a circle letting us know that our code is great. So we're going to go up to this little menu icon in the top right and we're going to close this tab group to get it out of the way. But that's one of the really great features that Dreamweaver has to help you make sure that your pages are good before you publish them. Another feature that Dreamweaver has is the real time preview. If you go to the file menu to real time preview, I'm just going to choose Google Chrome here, which is at the top of my list. Here you can see a preview. I'm going to just close this out for a second because another way that we could do it is to go down here to the bottom. Now in here we have preview in browser and we have a list of all of our browsers. And then we have a preview on device. Now the preview on device feature, it is no longer available. They discontinued it in the middle of November. So if you do want to preview on a device, unfortunately, now you're going to have to use your own device and connect it to your server. The other thing about this preview in a browser, I'm just going to go back to Chrome and I'm going to take this and minimize that window and I'm going to do the same thing with my Dreamweaver. And what's really kind of cool is that as you're working in Dreamweaver, once you have that real time preview, if you make a change, for example, if we correct the spelling of our hiking monthly and we save that, you can see in the background that as soon as we save it in Dreamweaver, it has updated that page in our browser. So that's what it means by real time preview. So when you work in Dreamweaver, you have the ability to have all of these extra helpers that make sure that the pages that you eventually publish are going to work really well. So in this lesson, you learned about the real time preview feature as well as the code checker that allows you to make sure your pages are good before you publish.

Advanced Provider : Patti Scully-Lane 4 Lessons · 29m in English

Course Description

Either while designing or when finished with designing your website, it’s always good to view the progress you have made. Fortunately, Dreamweaver has many built-in viewing functions for both web and mobile users.

In this course, you will learn how to use the real-time preview in Dreamweaver, as well as adding different browsers for viewing. You will also learn how to add site preferences for viewing, and even viewing on mobile devices.

What You'll Learn

Use the real-time preview in Dreamweaver to view your website's progress
Add additional browsers to the real-time preview for viewing
Configure site and viewing preferences in Dreamweaver
Work with mobile viewing to preview your site for mobile users
Check files before publishing your website

Key Takeaways

Dreamweaver includes built-in viewing functions for both web and mobile users.
The real-time preview lets you view the progress of your website while or after designing it.
You can add different browsers to the real-time preview for viewing your site.
Dreamweaver allows you to set site and viewing preferences, including options for mobile viewing.
Checking files before publishing is part of the previewing and publishing workflow.

Frequently Asked Questions

What will I learn in this course?

You will learn how to use the real-time preview in Dreamweaver, add different browsers for viewing, add site preferences for viewing, and view on mobile devices.

Does this course cover mobile viewing?

Yes, the course teaches you how to work with mobile viewing so you can preview your site for mobile users.

What topics are included in the lessons?

The lessons cover Built-in Previewing Options, Add Additional Browsers to the Real-time Preview, Site and Publishing Preferences, and Check Files Before Publishing.

What skills does this course help build?

This course relates to Adobe Dreamweaver, Web Authoring, Web Publishing, Web Tools, Adobe Dreamweaver Certification, and Dreamweaver MX Certification.