Aufgrund der „Visualisierung“ und der einfachen Bedienung schreiben viele Freunde CSS in DreamWeaver. Heute stellen wir einige „beste Gewohnheiten“ zum Schreiben von CSS in Dreamweaver vor und hoffen, dass sie für alle hilfreich sind.
CSS verändert den Kurs des Website-Designs. Um der wachsenden Zahl CSS-affiner Designer gerecht zu werden, führt Macromedia DW MX eine Reihe neuer und verbesserter CSS-bezogener Funktionen ein. Mit diesen neuen Funktionen können Sie zukünftige Updates planen und Websites entwickeln, die den W3C-Standards besser entsprechen. In diesem Artikel werden einige Vorschläge zur Verwendung von CSS in DW MX erläutert und eine bestimmte CSS-Funktion hervorgehoben.
Im Allgemeinen ist ein Stylesheet eine Sammlung von Formatierungsregeln, die das Erscheinungsbild von Webinhalten steuern. Sie können CSS auf drei verschiedene Arten auf Ihren Seiten verwenden:
Inline: Einmalige Stile, die in Code geschrieben werden.
Eingebettet: Ein Stylesheet, das alle Elemente auf einer Seite steuern kann.
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?
Die meisten Technologien haben ihre eigenen vereinbarten 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. Dies hat folgende Vorteile:
1. Verlängern Sie die Lebensdauer der Website. Nicht standardmäßige Stylesheets scheinen zu diesem Zeitpunkt praktisch zu sein, aber nach der Veröffentlichung der neuen Version des Browsers treten wahrscheinlich Kompatibilitätsprobleme auf. 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 lokale Regierungen 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. Bei ordnungsgemäßer Verwendung kann CSS ermöglichen, 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. Hier ist eine Aufschlüsselung der verschiedenen Stylesheets im Hinblick auf Best Practices:
Inline-CSS: 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 MX verwendet Inline-CSS hauptsächlich, um Seitenelemente zu positionieren (diese Elemente werden in der DW MX-Benutzeroberfläche als „Ebenen“ bezeichnet) oder um einen bestimmten DHTML-Effekt zu verwenden, der die Verwendung von Javascript im Inline-Stil erfordert, um ein Objekt 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 MX.
Beim Erstellen eines CSS-Stylesheets in DW MX (Text 》CSS-Stil 》Neues Stylesheet) haben Sie im Popup-Dialogfeld zwei Optionen: Neue Stylesheet-Datei ) und nur für das 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.
Soll es mit externem CSS verbunden oder importiert werden?
Nachdem Sie ein externes 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 Verbindungsoption 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-Eigenschaftsinspektor
Sie können im Eigenschafteninspektor von DW MX 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 MX ist die Einbindung vorgefertigter CSS-Stylesheets. 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 (Design Time-Stylesheets) Mit
dieser Funktion von DW MX können Sie Stylesheets auf Seiten anwenden, während Sie in der Designansicht arbeiten, und erhalten so ein intuitiveres Verständnis des Erscheinungsbilds Ihrer Website. 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 Linkmethode verwenden (wie oben beschrieben), können Sie durch das Anhängen von Design-Time-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 visuell in DW MX 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.
Validierung
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 MX selbst enthält keinen CSS-Validator, Sie können den Validierungsdienst der W3C-Site nutzen. In DW MX können Sie HTML- oder DHTML-Tags validieren (Datei > Seite prüfen > Markup validieren (für HTML) oder Datei > Seite prüfen > Als XML für XHTML validieren). DW MX bietet viele Hilfstools für die Entwicklung von CSS-basierten Websites. Mit Hilfe von MW MX, gepaart mit guten CSS-Kenntnissen, können Sie eine Website entwickeln, die den Test der Zeit bestehen wird.