Validation is one of the simplest ways to check whether a page is built in accordance with web standards and provides one of the most reliable guarantees that future web platforms will handle it as designed.
This video shows you how to improve your workflow and validate your website using the Results panels and related features.
I'll start by switching to the Design workspace.
The first thing I'll do in the validation process is to open the Site Reports panel and gather a report about the state of my code.
Choose Window, Results, Site Reports.
Click on the Play button in the Site Reports panel and select your options for reporting on the pager site and which details to report on.
I'll select Current Document, then check all the HTML Reports options, and click Run.
Notice that the report includes a handful of issues.
I'll correct these issues in the following steps.
Dreamweaver provides two helpful commands that you can use to clean up your HTML code.
Let's take a look.
Notice the selected code contains both empty div tags and redundant nested font tags.
I can clean up this type of issue using the clean up HTML command.
Choose Commands, Clean Up HTML...
The Clean Up HTML dialog box appears, presenting several options.
Notice that you can automatically remove empty tags, combine nested font tags or otherwise improve messy or unreadable HTML code.
I'll select the first two options and press OK.
The command performs a task and ends with a summary pop up.
Next, let's validate that the web fonts script tag is embedding fonts correctly.
If I look at the paragraph style, I can see that the font is set to the open-sans web font.
However, if I look at the web fonts script tag at the top of the HTML page, you'll notice that it doesn't reference the open-sans font.
I'll fix this issue by running a Clean Up Web Fonts Script Tag command.
Choose Commands, Clean Up Web Fonts Script Tag and notice that the script tag updates to the correct state, to match the CSS on the page.
Next, I'll use the Link Checker panel to validate the links on the page.
The Link Checker returns a report of broken links, external links or abandoned links within the site.
Choose Window, Results Link Checker.
I'll set the menu to Broken Links, click the Play button, and choose the Check Links in Current Document option.
The Link Checker displays a broken link.
I'll correct the issue, then press Enter to update Code view.
Also notice, that you can check for external links and download reports as needed.
I'll complete the process by validating the page using a W3C validation service.
Doing so will point out any issues I've missed and will confirm that the page is standards compliant will be viewable across browsers.
Choose File, Validate, Validate Current Document.
A pop-up appears stating that Dreamweaver will now send the document to a W3C validation service.
Click OK.
Notice that the results appear in the Validation panel showing errors and warnings with suggestions for changes.
In this case, the primary error is a missing closed anchor tag on the email address.
I'll fix the issue in Code view.
From here, I can run the validation service again and address the warnings or download a report and move on.
Also note, I perform the validation against the HTML5 standard, but I can change the doctype by choosing Settings in the Validation panel, or edit Preferences, W3C validator.
As you can see, using the validation tools in Dreamweaver CC can help clean up your code, resolve code problems and confirm that your site is ready for the web.
Check out the Results panel and see how you can use these validation features to improve your production workflow.
