Im Allgemeinen ist ein Stylesheet eine Sammlung von Formatierungsregeln, die das Erscheinungsbild von Webinhalten steuern. CSS kann auf drei verschiedenen Arten auf Ihren Seiten verwendet werden:
Inline: Ein einmaliger Stil, der in den Code geschrieben wird.
Eingebettet: Ein Stylesheet, das alle Elemente auf einer Seite steuert
Extern: Ein Stylesheet, das Elemente auf vielen Seiten steuert
Tatsächlich verwenden viele Websites bei Bedarf eine Kombination dieser drei Methoden.
Bei der Arbeit mit CSS ist zu berücksichtigen, dass unterschiedliche Browser und unterschiedliche Versionen desselben Browsers CSS auf unterschiedliche Weise analysieren. Zusätzlich zu den Unterschieden bei Webbrowsern müssen Sie sich auch darüber im Klaren sein, dass es viele andere Browser gibt, z. B. Hörbrowser, TV-basierte Browser und Handheld-Geräte wie Palm Pilot und TTY (Fernschreibmaschine, Fernschreibmaschine).
Was sind Best Practices?
Für die meisten Technologien gibt es eigene vereinbarte Standards. CSS ist keine Ausnahme. Obwohl nicht alles im Web vorhandene CSS standardisiert ist, ist es hilfreich, CSS gemäß bestehenden Standards zu verwenden. Im Allgemeinen sollten Entwickler Inhalte so weit wie möglich von der Berichterstattung trennen. Die Vorteile dieser Vorgehensweise sind:
1. Erhöhen Sie die Lebensdauer der Website
Nicht standardmäßige Stylesheets mögen zu diesem Zeitpunkt praktisch sein, aber wenn neue Versionen von Browsern herauskommen, ist es wahrscheinlich, dass Kompatibilitätsprobleme auftreten. Zu diesem Zeitpunkt wird das seitenweise Ändern der Website eine sehr zeitaufwändige Aufgabe sein und auch die Verwendung von CSS sinnlos machen.
2. Machen Sie Ihre Website für alle Benutzer und Browser zugänglich.
Einige Kommunalverwaltungen haben gesetzlich vorgeschrieben, dass Websites für Menschen mit Behinderungen zugänglich sein müssen. Browsing-Geräte, die zur Sensibilisierung für Behinderungen entwickelt wurden, wie z. B. Hörbrowser, unterliegen äußerst strengen normativen CSS-Anforderungen.
3. Erleichtern Sie Website-Updates und -Wartung.
Richtig eingesetzt ermöglicht CSS, dass Anpassungen, die Sie auf einer Seite vornehmen, schnell auf alle Seiten angewendet werden.
Die erste Wahl, die Sie treffen müssen, ist das zu verwendende Stylesheet. Wenn es um Best Practices geht, finden Sie hier eine Analyse der verschiedenen Stylesheets:
Einfach ausgedrückt: Sie sollten versuchen, es zu vermeiden. Neben anderen Nachteilen bedeutet die Verwendung von Inline-CSS, dass Sie den eigentlichen Vorteil von CSS nicht nutzen, nämlich dass Sie Inhalte nicht von der Formatierung trennen. DW verwendet Inline-CSS hauptsächlich, um Seitenelemente zu positionieren (diese Elemente werden in der DW-Benutzeroberfläche als „Ebenen“ bezeichnet) oder um einen bestimmten DHTML-Effekt zu verwenden, der die Verwendung von Javascript im Inline-Stil erfordert, um die Eigenschaften eines Objekts zu ändern.
Eingebettetes CSS: Es ist auch nicht ideal, da es nur die aktuelle Seite betrifft. Wenn während des Aktualisierungsvorgangs eine Seite verloren geht, ist der Stil der Website inkonsistent; außerdem müssen beim Durchsuchen Ihrer Website Stylesheet-Informationen für jede Seite heruntergeladen werden.
Externes CSS: Dies ist Ihre erste Wahl. Mit externem CSS können alle damit verbundenen Seiten ein einheitliches Erscheinungsbild und einen einheitlichen Stil beibehalten, es einmal ändern und alle zugehörigen Seiten problemlos aktualisieren. Weitere Best Practices werden im Folgenden bei der Analyse spezifischer CSS-Funktionen besprochen.
Erstellen Sie ein CSS-Stylesheet in DW
Beim Erstellen eines CSS-Stylesheets in DW (Text 》CSS-Stil 》Neues Stylesheet) haben Sie im Popup-Dialogfeld zwei Optionen: Neue Stylesheet-Datei und Nur für die aktuelle Seite (Nur dieses Dokument). Wählen Sie „Neue Stylesheet-Datei“ und beginnen Sie mit der Erstellung von externem CSS. Bei dieser Option müssen Sie das Stylesheet benennen und einen Speicherort dafür auswählen, bevor der eigentliche Erstellungsprozess erfolgt. Bei der anderen Option, „Nur dieses Dokument“, wird der relevante Code direkt auf die Seite geschrieben.
Sie können im Dialogfeld „Neuer Stil“ auch ein vorhandenes Stylesheet zum Bearbeiten auswählen oder neue Definitionen hinzufügen.
Sollte es mit externem CSS verbunden oder importiert werden?
Nachdem Sie das externe Stylesheet erstellt haben, müssen Sie es an jede Seite (oder Vorlage) anhängen. Klicken Sie dazu im CSS-Bedienfeld auf die Schaltfläche „Stylesheet anhängen“. Das Dialogfeld „Externes Stylesheet verknüpfen“ wird angezeigt, in dem Sie zu Ihrem Ziel-Stylesheet navigieren können. Nachdem Sie den Namen gefunden haben, können Sie auswählen, ob Sie es verknüpfen oder importieren möchten dieses externe Stylesheet.
Die Verbindung ist die am häufigsten verwendete Methode. Wählen Sie „Link“, um das Stylesheet mit der Seite zu verbinden. Es wird das folgende Markup zu Ihrer Seite hinzugefügt:
Die Verbindungsmöglichkeit wird von allen Browsern unterstützt, die CSS unterstützen. Wenn Sie möchten, dass einige ältere Browser (z. B. Netscape 4.x) dieses Stylesheet „sehen“, müssen Sie die folgende Methode verwenden.
Wenn Sie die Option „Importieren“ auswählen, werden folgende Tags verwendet:
NetSscape4 ignoriert das importierte CSS vollständig und interpretiert die Seite entsprechend dem verbundenen CSS. Auf diese Weise können wir die neuen Funktionen in CSS nutzen, ohne uns über Browserkompatibilitätsprobleme Gedanken machen zu müssen.
CSS-Eigenschafteninspektor
Sie können im Eigenschafteninspektor von DW ganz einfach in den CSS-Modus wechseln. Standardmäßig zeigt der Eigenschafteninspektor Schriftart-Tags im Roh-HTML-Modus an. Klicken Sie auf das kleine „A“ neben dem Dropdown-Menü „Schriftarten“ und Sie sehen die aktuell verfügbaren CSS-Stylesheets anstelle einer Liste mit Schriftarten-Tags. Gleichzeitig können Sie ganz einfach wieder in den HTML-Modus wechseln.
Vorgefertigte CSS-Stylesheets
Eine der aufregenden CSS-Funktionen in DW besteht darin, dass es vorgefertigte CSS-Stylesheets enthält. Neue CSS-Benutzer können es zunächst ausprobieren. Wählen Sie „Datei“ > „Neu“, wählen Sie im Popup-Dialogfeld „Neues Dokument“ CSS-Stylesheets aus. Im Feld rechts wird eine Liste aller verfügbaren CSS angezeigt. Um das zu praktizieren, was wir Best Practices nennen, wählen Sie eine mit der Kennzeichnung „Barrierefrei“ aus.
Speichern Sie das Dokument im Site-Ordner und hängen Sie dann das CSS mit der oben beschriebenen Methode an Ihr Dokument an.
Design Time-Stylesheets
Mit dieser Funktion von DW können Sie Stylesheets auf Seiten anwenden, wenn Sie in der Designansicht arbeiten, wodurch Sie ein intuitiveres Verständnis des Erscheinungsbilds der Website erhalten. Design-Time-Stylesheets werden nicht auf der Website angezeigt. Diese Funktion ist aus Sicht unserer Best Practices sehr nützlich. Wenn Sie sowohl die Import- als auch die Join-Methode verwenden (wie oben beschrieben), können Sie durch Anhängen eines Entwurfszeit-Stylesheets die Site mit einer der beiden Methoden entwickeln. Sie können problemlos zu einem anderen Stylesheet wechseln, wenn Sie sehen möchten, wie die Seite unter einem anderen Stylesheet aussehen wird.
Entwurfszeit-Stylesheets sind auch für Entwickler nützlich, die CSS auf der Serverseite (z. B. ASP, PHP oder ColdFusion) oder auf der Clientseite über Javascript anwenden möchten. Serverseitige Stylesheets sind auch eine weitere Möglichkeit, mit schlechter CSS-Unterstützung in Client-Browsern umzugehen. In früheren Versionen von DW war es mit dieser Methode jedoch nicht möglich, den tatsächlichen Effekt von CSS während der Entwurfsphase anzuzeigen. Mit Entwurfszeit-Stylesheets können Sie Stylesheet-Effekte in Echtzeit anzeigen, sodass Sie mit einer visuellen Oberfläche in DW arbeiten können. Ein weiterer Vorteil besteht darin, dass Sie beim Hochladen von Site-Dateien nicht mehr die gesamte Site nach redundanten Stylesheets durchsuchen müssen.
verifizieren
Unabhängig davon, ob Sie Ihr eigenes Stylesheet erstellen oder ein vorhandenes bearbeiten, stellt die Validierung sicher, dass Sie keine nicht standardmäßigen Tags oder falschen Code missbrauchen. DW selbst enthält keinen CSS-Validator, Sie können den Validierungsdienst der W3C-Site nutzen.
Innerhalb von DW können Sie HTML- oder DHTML-Tags validieren (Datei > Seite prüfen > Markup validieren (für HTML) oder Datei > Seite prüfen > Als XML validieren für XHTML). DW bietet viele Hilfstools für die Entwicklung CSS-basierter Websites. Mit Hilfe von MW MX, gepaart mit guten CSS-Kenntnissen, können Sie eine Website entwickeln, die den Test der Zeit bestehen wird.