Per Validierung können Sie ganz einfach überprüfen, ob eine Seite aktuellen Webstandards entspricht.
Sie können damit auch sicherstellen, dass die Seite auf zukünftigen Plattformen wie vorgesehen funktioniert.
Dieses Video zeigt, wie Sie Ihren Workflow verbessern und Websites validieren können – über das Bedienfeld „Ergebnisse“ und zugehörige Funktionen.
Als Erstes rufe ich den Arbeitsbereich „Entwurf“ (Design) auf.
Der erste Schritt im Validierungsprozess besteht darin, über das Bedienfeld „Site-Berichte“ (Site Reports) einen Bericht über den Code-Status abzurufen.
Ich wähle „Fenster > Ergebnisse > Site-Berichte“ (Window > Results > Site Reports).
Im Bedienfeld „Site-Berichte“ (Site Reports) klicke ich auf den Wiedergabe-Button.
Dann gebe ich an, was auf der Seite oder Site überprüft bzw. gemeldet werden soll.
Ich wähle „Aktuelles Dokument“ (Current Document), aktiviere alle Optionen unter „HTML-Berichte“ (HTML Reports) und klicke auf „Ausführen“ (Run).
Dieser Bericht weist auf einige Probleme hin, die ich in den folgenden Schritten beheben werde.
Dreamweaver CC bietet zwei hilfreiche Befehle, mit denen Sie Ihren HTML-Code bereinigen können.
Sehen wir uns die Probleme an.
Der ausgewählte Code enthält leere DIV-Tags und redundante, verschachtelte FONT-Tags.
Um diese Art von Problem zu beheben, verwende ich den Befehl zum Optimieren von HTML.
Ich wähle „Befehle > HTML optimieren“ (Commands > Clean Up HTML).
Das Dialogfeld zum Optimieren von HTML-Code enthält mehrere Optionen.
Sie können automatisch leere Tags entfernen, verschachtelte FONT-Tags kombinieren oder sonstigen fehlerhaften bzw. unleserlichen HTML-Code optimieren.
Ich wähle die ersten beiden Optionen aus und klicke auf „OK“.
Nach der Ausführung des Befehls wird eine Zusammenfassung angezeigt.
Nun will ich sicherstellen, dass das SCRIPT-Tag für Web-Schriften die Schriften korrekt einbettet.
Im CSS-Code für die Absatzformatierung ist die Web-Schrift „Open Sans“ angegeben.
Betrachte ich jedoch das SCRIPT-Tag für Web-Schriften oben auf der HTML-Seite, sehe ich den Text „open-sans“ nicht im SCRIPT-Tag.
Das korrigiere ich mit dem Befehl zum Bereinigen von SCRIPT-Tags für Web-Schriften.
Ich wähle „Befehle > script-Tag für Web-Schriften bereinigen“ (Commands > Clean Up Web Fonts Script Tag).
Das SCRIPT-Tag wird aktualisiert und an den CSS-Code der Seite angeglichen.
Als Nächstes verwende ich das Bedienfeld „Hyperlink-Prüfer“ (Link Checker), um die Links auf der Seite zu validieren.
Der Hyperlink-Prüfer ermittelt fehlerhafte Links, externe Links und Links auf verwaiste Dateien innerhalb der Site.
Ich wähle „Fenster > Ergebnisse > Hyperlink-Prüfer“ (Window > Results > Link Checker).
Ich wähle die Menüoption „Fehlerhafte Hyperlinks“ (Broken Links), klicke auf den Wiedergabe-Button und wähle „Hyperlinks in aktuellem Dokument überprüfen“ (Check Links in Current Document).
Der Hyperlink-Prüfer zeigt eine fehlerhafte Verknüpfung an.
Ich korrigiere den Fehler und drücke die Eingabetaste, um die Code-Ansicht zu aktualisieren.
Sie können auch externe Hyperlinks überprüfen und Berichte nach Bedarf herunterladen.
Abschließend validiere ich die Seite mithilfe eines W3C-Validierungsdienstes.
Der Dienst meldet Fehler, die ich übersehen habe, und gibt an, ob die Seite Standards entspricht und alle Browser unterstützt.
Ich wähle „Datei > Überprüfen > Aktuelles Dokument überprüfen (W3C)“ (File > Validate > Validate Current Document (W3C)).
Ein Popup-Fenster weist darauf hin, dass Dreamweaver CC das Dokument an einen W3C-Validierungsdienst sendet.
Ich klicke auf „OK“.
Die Ergebnisse werden im Bedienfeld „Überprüfung“ (Validierung) angezeigt.
Sie umfassen Fehler, Warnungen und empfohlene Änderungen.
Der wichtigste Fehler in diesem Beispiel ist das fehlende schließende Anker-Tag für die E-Mail-Adresse.
Das korrigiere ich in der Code-Ansicht.
Dann führe ich den Validierungsdienst erneut aus, um die Warnungen durchzugehen oder einen Bericht herunterzuladen.
Beachten Sie auch, dass die Validierung auf dem HTML5-Standard beruht.
Um den Dokumententyp zu ändern, wähle ich im Menü des Bedienfelds „Überprüfung“ (Validation) die Option „Einstellungen“ (Settings) oder „Bearbeiten > Voreinstellungen > W3C-Überprüfung“ (Edit > Preferences > W3C Validator).
Wie Sie sehen, können Sie mit den Validierungsfunktionen von Dreamweaver CC Code schnell bereinigen, Code-Probleme lösen und bestätigen, dass Ihre Site für die Veröffentlichung im Web bereit ist.
Sehen Sie sich das Bedienfeld „Ergebnisse“ (Results) an, und finden Sie heraus, wie Sie mit diesen Funktionen zur Validierung Ihren Produktions-Workflow verbessern können.
