Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

W3C validator

From: Dreamweaver CS5.5 New Features

Video: W3C validator

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.

W3C validator

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.

Show transcript

This video is part of

Image for Dreamweaver CS5.5 New Features
Dreamweaver CS5.5 New Features

18 video lessons · 12800 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS5.5 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.