Einige Fähigkeiten müssen Sie beim Codieren von CSS im DW_Experience-Austausch beachten und beherrschen

Aufgrund der „Visualisierung“ und der einfachen Bedienung schreiben viele Freunde CSS in DW. Heute stellen wir einige „beste Gewohnheiten“ zum Schreiben von CSS in DW vor und hoffen, allen zu helfen.
CSS verändert den Prozess 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. CSS kann auf drei verschiedene Arten auf Ihren Seiten verwendet werden:

Kopieren Sie den Code Der Code lautet wie folgt:

Codestil (Inline): ein einmaliger Stil, der in den Code geschrieben wird.
Eingebettet: Ein Stylesheet, das alle Elemente auf einer Seite steuern kann
Extern: Ein Stylesheet, das Elemente auf vielen Seiten steuern kann
Tatsächlich basieren viele Websites auf Diese drei Methoden müssen verwendet werden Kombination.

Eine wichtige Tatsache, die bei der Verwendung von CSS berücksichtigt werden muss, ist, dass verschiedene Browser und verschiedene 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 alle im Web vorhandenen CSS standardisiert sind, ist es hilfreich, CSS gemäß den bestehenden Standards zu verwenden. Im Allgemeinen sollten Entwickler Inhalte so weit wie möglich von der Berichterstattung trennen. Dies hat folgende Vorteile:
1. Erhöhen Sie die Lebensdauer der Website
Nicht standardmäßige Stylesheets mögen zu diesem Zeitpunkt praktisch 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-Aktualisierungen und -Wartung
Bei richtiger Verwendung kann CSS ermöglichen, dass Anpassungen, die Sie auf einer Seite vornehmen, schnell auf alle Seiten angewendet werden.
Ihre erste Wahl ist, welches Stylesheet Sie verwenden möchten. Wenn es um Best Practices geht, finden Sie hier eine Aufschlüsselung der verschiedenen Stylesheets:
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 sich nur auf die aktuelle Seite auswirken kann. 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: Neues Stylesheet Dokument (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.
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.
Verlinkung 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:
Alle Browser, die CSS unterstützen, unterstützen die Verbindungsoption. 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, lautet das verwendete Tag:
NetSscape4 ignoriert das importierte CSS vollständig und interpretiert die Seite gemäß 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 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 auch ganz einfach zurück in den HTML-Modus wechseln.
Vorgefertigte CSS-Stylesheets
Eine der aufregenden CSS-Funktionen in DW MX 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 verwenden Sie dann die oben beschriebene Methode, um CSS an Ihr Dokument anzuhängen.
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 der 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 anwenden möchten (z. B. ASP, PHP oder ColdFusion) oder auf der Clientseite über JavaScript darauf zugreifen 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 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.