Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating new HTML5 documents
- Using code hinting for CSS3, HTML5, DOM elements, and jQuery
- Configuring jQuery widgets with the Widget Browser
- Managing media queries
- Previewing web pages on multiple devices with the Multiscreen Preview panel
- Configuring mobile application frameworks
- Building and emulating mobile applications
Skill Level Intermediate
When Dreamweaver CS5 was released, in addition to all of the new features it contained, it also raised a few eyebrows by what it removed. Although the Validation panel remained, almost all of Dreamweaver's ability to validate web pages was stripped from CS5. The official reason--and it was a good one--was that the combination of rapidly changing emerging standards and online validation services that could easily adapt to those changes made validation inside Dreamweaver rather irrelevant. With the release of Dreamweaver CS5.5, they've brought validation back to Dreamweaver in a rather ingenious way.
So I have the index.htm file open in the 03_01 folder, and I am just going to go up to my menu. I want to go to Window, and I just want to scroll down to where it says Results, and I want to select a brand-new panel. So where in previous versions of Dreamweaver that said Validation, it now says W3C Validation, which should give you a hint as to what they're doing here. Okay. So this panel group opens up. This takes up a lot of screen real estate, so one of the things I always like to do when this is open is take the Properties Inspector and just sort of dock it with these guys to get it out of way.
Now I have a full series of tabs down here that I can select, and I want to choose W3C Validation. Okay, so what is this? Well, to explain that a little bit better, I want to go out to the web for just a moment. Okay, so here we are at validator.w3.org. This is the W3C Markup Validation Service. So this is an online service hosted by the World Wide Web Consortium that will go ahead and validate any page that you can send to it for correct usage of HTML, XHTML, all sorts of different formats.
So what Adobe is doing is they're using this service. So by using the W3C Validation panel, what you're really doing is submitting your page to this service. You're doing that directly in Dreamweaver without having to go outside of it, which is really cool. Let's see how it works. So here I am back inside Dreamweaver, and what I want to do now is validate my current page. So I am going to go right over here to this little Play button, I am going to click on that, and I say okay, Validate Current Document (W3C). Now, before you do that, you might want to check the settings to make sure that you're validating against the right doctype.
So I am just going to go to my Settings, and I can see that I am actually validating against XHMTL 1.0 Transitional. Well, this is an HTML5 document, so I want to go ahead and say HTML5. Now, it lets you know that this is experimental, meaning that the validation service is still sort of working out the kinks, if you will. And I just want to go ahead and click OK. Now, anytime I go ahead and validate this, I am going to get a little message from Dreamweaver, so I want to go ahead and say Validate Current Document. And it's essentially letting me know that this document is now being sent to the W3 service for validation.
There are terms and conditions that you want to be aware of. It even has a little link here that tells you what the W3C is and explains this to you. But essentially, it just wants to let you know that, hey, we are submitting this to an external service. Now, if you don't like this dialog box, you can go ahead and click to not show that again. All right! I'm going to go ahead and click OK. As soon as I do that, it's going to validate the document, and if it finds any errors or problems, it's going to list those. Now, I am sure that my document doesn't have any--hey, oh, it found some errors and problems. Okay. Well, now I guess we better go ahead and fix those.
So one of the things that we can do is you can come down and if you're kind of curious about something, like it's telling me that the align attribute on the h1 element is obsolete, how is that possible? So if I right-click this, I can actually say, do you have any more information about that? And if it does, if it has a longer description, I would be able read that there, and then it actually shows me the code and tells me what the problem is. Okay, fair enough. Now, I also notice something else, too. If I come in and click the Validate Current Document again, I notice that there's this option for Validate Live Document.
What's that all about? Well, if you have dynamic data, or if you have AJAX that's going to be creating HTML and placing it on the page, or dynamic data that's being placed on the page, if you want to validate the fully rendered page--for example, maybe you're working on a blog and you would like to validate your blog page-- you can go ahead and do that. In Dreamweaver what you would do is you would first switch over to Live view, so that was being rendered using the WebKit rendering engine in Dreamweaver and then validate it using that option. This way it's just a static page, so we don't really need to worry about it for this page, but I did want to show you that. Okay.
So now, I need to go fix all this stuff, and how do I do that? Well, the easiest way to do that is to go to the error itself. It tells you which line is the problem, and you can simply just double-click it. As soon as you double-click it, it switches over to Code view, and it takes you right to that line. Okay, align = "center". Hmm, I didn't get the memo on that. Maybe I shouldn't be using that anymore. So we'll close that. We'll save it. And of course it's not going to remove these items from the list as you clean them off, so you just sort of have to go down in order. So now it says, "No space between attributes." What's that all about? Now, notice it not only took me to that line, look where it put my cursor; it put my cursor right there where I don't have any space between this value and that attribute.
So I'll just go ahead and put some white space in there. And then it tells me that I have a duplicate ID, so I am using an ID twice. Hmm, the ID quickNav, which is on line 116, but it also tells me that the first occurrence of the ID quickNav was on line 105, so let's jump down there and check that out. So around line 105 and 116 I have that problem. Well, that's because it wasn't supposed to be an ID; it was supposed to be a class and I just typed it in wrong. So let me go ahead and do class there, jump down to 116, and go ahead and do class there.
Sweet! Okay, now I am going to save this. Obviously, once I've checked this, I would want to test it again to make sure that my changes were put in effect. Of course we didn't have a lot of problems here, but what if you're working in a larger team and you did have some problems and you wanted to communicate to the team? Well, notice you can do a couple of things here. If I look over here on the left-hand side of the W3C Validation panel, notice that in addition to More Info, which we've already seen, you can also save this report-- it will save it as an XML file--or you can go ahead and preview this in a browser. So if you click that option, it will create an HTML page for you with this parsed.
So you could save this and actually put this page up online for your team to peruse and let them know exactly which problems they needed to fix. Okay. Well, our page should be finished now, so after I've saved it, I want to go ahead and validate it again. And as soon as I do that, it tells me, "No errors or warnings were found." Perfect! Now, thankfully, it didn't take Adobe long to bring validation back to Dreamweaver. What's more, Dreamweaver's use of the W3C's validation service allows users to validate their pages with the confidence that they're using the most current validation available, because if the specifications change or certain rules change, we know that service is going to update as it happens, so we don't really have to worry about our pages in Dreamweaver being validated against an older specification, or using older rules.
And that is really cool.