Die grundlegenden Einstellungen in der Design-Ansicht

An dieser Stelle werde ich mal etwas weiter ausholen, damit auch jedem klar wird, warum wir die eine oder andere Einstellung vornehmen.
Wenn wir mal einen Blick in den Quelltext einer NOF-Seite werfen, werden wir immer auf diese zwei markierten Zeilen stoßen. Das sind Links zu den CSS-Dateien für unser Projekt.
Der erste Link führt zur „style.css”. In diese CSS-Datei werden alle Formatierungen aus dem SiteStyle ausgelagert. Also all die Einstellungen, die wir in der Design-Ansicht vornehmen.
Der zweite Link führt zur „site.css”. In diese CSS-Datei werden alle Formatvorlagen ausgelagert, die wir aus der Arbeitsansicht heraus anlegen.





Was hat es mit diesen CSS-Dateien auf sich und wozu dienen sie? 

Das möchte ich an dieser Stelle versuchen möglichst verständlich zu erklären.

Es gibt zwei grundlegende Möglichkeiten,  die Texte, Bilder, Abstände etc. unserer Website zu formatieren.

Die erste Variante ist das Formatieren über die Eigenschaften-Palette. Hierbei markiert man in der Arbeitsansicht einen Text, eine Tabellenzelle oder was auch immer und wählt in der Eigenschaftenpalette aus, wie diese später auf der Website dargestellt werden sollen.

Die zweite Variante ist die Formatierung mit Hilfe von CSS. Hierbei legt man verschiedene Formatierungen zentral fest. Das heißt, die verschiedenen Formatangaben werden unter verschiedenen Namen in externe Dateien geschrieben. In der Website weist man einem Text, einer Tabellenzelle etc. dann nicht mehr jedes Format einzeln zu, sondern nur den Namen der Formatvorlage.
Über die Links im unteren Screen werden diese Formatierungen dann aus den externen Dateien ausgelesen und umgesetzt.

Anhand eines kleinen Beispiels möchte ich erläutern, welche Vorteile es bringt, die zweite Variante zu nutzen.

Ich formatiere eine Tabellenzelle so, dass die Hintergrundfarbe der Zelle gelb ist, die Schrift möchte ich in Arial, fett und grau haben. Oben und unten in der Zelle möchte ich einen Abstand von je 5 px haben und links und rechts einen Abstand von je 10 px. Diese Art von Formatierung nehme ich auf allen meinen Seiten immer wieder vor, damit das Gesamtbild der Seite einheitlich erscheint.

Der Quelltext einer so formatierten Zelle sieht wie folgt aus:

<td width="107"

>
 <p style="font-family: Arial,Helvetica,Geneva,Sans-serif; color: rgb(128,128,128); font-weight: bold; background-color: rgb(255,255,0); padding: 5px 10px; margin-bottom: 0px;">&nbsp;</p>
</td>


Ich lege ich eine Formatvorlage mit exakt denselben Formatierungen an und weise sie der Zelle zu. Die Zelle wird identisch aussehen, aber der Quelltext einer solchen Zelle sieht dann so aus:

<td width="107" class="ZelleGelb"

>
 <p style="margin-bottom: 0px;">&nbsp;</p>
</td>


Das heißt, der Quelltext unserer Seiten wird durch die Verwendung von CSS-Klassen deutlich schlanker. Der viel größere Vorteil der CSS-Klassen (oder auch Formatvorlagen) besteht jedoch darin, dass mit einer Änderung der Klasse diese Änderung automatisch im ganzen Projekt umgesetzt wird.

Im Klartext bedeutet das: Sollen die von Hand gelb formatierten Zellen doch lieber grün sein, dann muss ich mich durch alle Seiten meines Projektes klicken, jede Zelle mit dieser Formatierung anklicken, um ihre Hintergrundfarbe über die Eigenschaftenpalette von gelb in grün zu ändern. Will ich diese Änderung online umsetzen, muss ich all diese Seiten auch noch erneut publizieren.
Bei den CSS formatierten gelben Zellen, ändere ich die Hintergrundfarbe der Formatvorlage einmalig und publiziere nur eine einzige Seite. Damit habe ich aber im ganzen Projekt jede Zelle mit der Klasse „ZelleGelb” in eine grüne Zelle verwandelt.

Wer jetzt noch keine Lust auf CSS hat, wird aus meinem Abendgebet ausgeschlossen. ;-)
Nachdem Ihr nun wisst, warum es extrem sinnvoll ist, bereits in der Design-Ansicht festzulegen, welche Schriftfarbe, Größe, Art etc. verwendet werden soll, zeige ich Euch wie das gemacht wird und auch einige praktische Einstellungen mehr.

Ihr öffnet also die Design-Ansicht und markiert dort mit einem Klick den Abschnitt „Haupttext”. In Version 9 findet Ihr diesen Abschnitt auf dem Reiter „Text”,  ab der Version 10 ist er auf dem Reiter „Grafik” zu finden. Über den Reiter „Zeichen” in der Eigenschaften-Palette formatiert Ihr zunächst Schriftart, -design, -größe und -farbe. Schriftart und Farbe werden mit dieser Einstellung automatisch für alle anderen Schriftabsätze wie z.B. Aufzählungen und Überschriften mit übernommen. Wir bleiben noch in der Eigenschaften-Palette und wechseln zum Reiter „Hintergrund”.

Hier stellen wir zunächst mal die Hintergrundfarbe #919191 ein, auf welcher wir bereits bei unseren grafischen Vorarbeiten aufgebaut haben. Wer die Pünktchen im BG (Background = Hintergrund) nicht mag, kann hier bereits die Einstellungen beenden.
Wer jedoch gern die Pünktchen im Hintergrund haben möchte, sucht jetzt über den Durchsuchen-Button nach der anfangs erstellten Hintergrundgrafik und bestätigt. Da wir bei der Breite der Grafik bereits die Verwendung großer Monitore oder hoher Auflösungen berücksichtigt haben, genügt es die Grafik vertikal wiederholen zu lassen. Das heißt, der schmale Hintergrund-Streifen wird nach unten hin solange aneinander gereiht, wie es für die jeweilige Seitenlänge erforderlich ist.
Damit auch bei jeder Auflösung und an jedem Monitor alles schön an derselben Stelle sitzt, wählen wir bei Bildposition Horizontal: „Zentriert” aus und bestätigen unsere Eingaben mit OK. Bereits jetzt sehen wir die Umsetzung unserer Einstellungen in der Design-Ansicht.

Wir markieren jetzt nacheinander mit je einem Klick alle anderen Schriftabsätze und stellen dort dieselbe Schriftgröße ein wie wir sie beim Haupttext gewählt haben. Ausgenommen Tabellen, Text-Navigationsleisten, Verknüpfungen und Überschriften.
Den Überschriften wenden wir uns nämlich als nächstes zu.
Was hat es auf sich mit diesen Überschriften?

Ich versuche das möglichst kurz und verständlich zu erläutern. Die im Design angelegten Überschriften sind so genannte H-Tags:

Überschrift 1 = H1
Überschrift 2 = H2
Überschrift 3 = H3
Überschrift 4 = H4
Überschrift 5 = H5
Überschrift 6 = H6

Für jeden dieser H-Tags legen wir in der Design-Ansicht nun das Aussehen fest. Sprich, zunächst Schriftart, -design, -größe und -farbe.
Später in der Arbeitsansicht brauchen wir die Überschrift nur noch markieren und weisen ihr dann über die Eigenschaftenpalette den entsprechenden H-Tag zu. Bei der Standard-Einstellung würde also die Schrift einer H1 Überschrift sehr groß und fett gedruckt dargestellt.
Soweit so gut, warum aber nun H-Tags? Wir alle wissen, dass eine Überschrift in aller Regel mit möglichst knappen Worten den Inhalt des darunter befindlichen Textes umschreibt. Das heißt, Überschriften sind quasi das „Konzentrat” unserer Inhalte. Formatieren wir unsere Überschriften mittels der H-Tags, so wird im Quelltext diese Information hinterlegt.
 

Das sieht z.B. so aus:  <h1>Die grundlegenden Einstellungen in der Design-Ansicht</h1>

Suchmaschinen „wissen”, dass H-Tags das „Konzentrat” unserer Inhalte darstellen und durchsuchen gezielt unseren Quelltext nach diesen Angaben. Keine H-Tags = erschwerte Arbeit für Suchmaschinen = schlecht fürs Ranking.

Bei vielen Formatierungen macht es Sinn, diese bereits hier im Design vorzunehmen, da es unsere Arbeit erheblich erleichtert. In einigen Bereichen ist es jedoch auch sinnvoll, auf Voreinstellungen in der Design-Ansicht zu verzichten.
Aus meiner Sicht gilt dies ganz besonders für Verknüpfungen und Tabellen, aber auch die Textnavigation lassen wir hier außen vor.

Warum?
Wie zu Beginn des Tutorials erwähnt, werden die Informationen zu den CSS-Formatierungen aus der „style.css” und der “site.css” bezogen. Alle Einstellungen, die wir hier vornehmen, werden in der „style.css” abgelegt und von dort aus abgerufen.
Legen wir also hier Einstellungen für das Aussehen unserer Links fest, dann werden diese Angaben in der „style.css” abgespeichert.
Möchten wir aber in unserer Seite einen Link mal etwas anders formatieren - kleiner, größer, andersfarbig - oder wir entscheiden uns  CSS-Navigationen zu verwenden, dann werden andere Angaben zum Aussehen der Links in die „site.css” geschrieben. Jeder Browser muss  bei jeder Eurer Seiten entscheiden, aus welcher Datei er welche Formatierungen umsetzt.

Ergebnis: Ein furchtbares Durcheinander beim Aussehen Eurer Links.

Dasselbe gilt für Tabellen. Auch hier ist es aus meiner Sicht einfacher, in der Arbeitsansicht mittels Formatvorlagen zu formatieren.

Unsere selbst gestalteten Schaltflächen bringen wir jetzt im Style unter und formatieren sie.

Grundsätzliches: Im Style haben wir die Möglichkeit verschiedene Schaltflächensätze anzulegen. Später in der Arbeitsansicht können wir dann zwischen diesen Schaltflächensätzen wählen.

Jeder Schaltflächensatz besteht aus vier Schaltflächen:

Standard >> Aussehen unserer Schaltflächen allgemein
Standard-Rollover >> Aussehen der allgemeinen Schaltfläche, wenn wir mit dem Mousezeiger darüberfahren
Hervorgehoben >> Aussehen der Schaltfläche der aktuell besuchten Seite
Hervorgehobenes Rollover >> Aussehen der Schaltfläche der aktuelle besuchten Seite, wenn wir mit dem Mousezeiger darüberfahren

Als nächstes wechseln wir die vorhandenen Schaltflächen-Grafiken gegen unsere selbstgebastelten Grafiken aus. Hierzu markieren wir nacheinander die Schaltflächen und betätigen den Durchsuchen-Button auf der EP. Mit einem Doppelklick auf die jeweilige Schaltfläche kommen wir zum selben Ergebnis, nämlich zu einem Fensterchen wie wir es auf Windows kennen. Wir suchen uns unsere gebastelten Schaltflächen und tauschen sie nacheinander wie folgt aus:
 
Standard >> graue Blume mit Pünktchenlinie
Standard-Rollover >> graue Blume mit Pünktchenlinie
Hervorgehoben >> grüne Blume mit Pünktchenlinie
Hervorgehobenes Rollover >> grüne Blume mit Pünktchenlinie

Danach stellen wir die Schriftart, -farbe etc. und die Ausrichtung der Schrift für die einzelnen Schaltflächen ein. Hierzu markieren wir wieder nacheinander die einzelnen Schaltflächen und nehmen die nötigen Einstellungen über die Eigenschaften-Palette vor.
Welche Einstellungen das im Einzelnen sind, entnehmt Ihr bitte dem folgenden Screenshot.
Die Ausrichtung der Schrift sowie Schriftart und Größe wird für alle Schaltflächen gleich bleiben; die Schriftfarbe und das Schriftdesign ordnen wir wie folgt zu:

Standard >> grau / standard
Standard-Rollover >> grau / fett
Hervorgehoben >> grün / standard
Hervorgehobenes Rollover >> grün / fett

Da das hier verwendete Grün jedoch exakt das der Blume sein soll, schaut euch erst noch die nächsten zwei Screens an.

Nachdem der Schaltflächensatz „Primary” unserem Design angepasst wurde, nehmen wir uns den Schaltflächensatz „Secondary”  vor. Wozu wir diesen benötigen, werdet Ihr später noch erfahren.
Die Einstellungen für diesen Schaltflächensatz sind identisch mit denen des ersten Satzes - mit einer einzigen Ausnahme. Hier werden die Schaltflächen ohne gepunktete Linie verwendet.

Jetzt benötigen wir jedoch noch einen Schaltflächensatz für unsere schwarzen Schaltflächen. Hierzu klicken wir mit einem Rechtsklick unter die Beschriftung der Schaltflächensätze und wählen im Kontextmenü „Neuer Schaltflächensatz (grafisch)”.

Und Schwups, legt uns NOF das Button-Set1 an. Wie bereits erklärt, tauschen wir auch hier die Grafiken aus und formatieren die Schrift. Für den ganzen Schaltflächensatz wird die schwarze Schaltfläche mit dem grauen Streifen verwendet. Ausschließlich die Schrift wird hier unterschiedlich formatiert. Die grundsätzlichen Formatierungen entnehmt Ihr bitte dem folgenden Screen. Die Unterschiede liste ich Euch wieder auf:

Standard >> hellgrau / standard
Standard-Rollover >> grün / standard
Hervorgehoben >> hellgrau / fett
Hervorgehobenes Rollover >> grün / fett

Zum guten Schluss benötigen wir noch ein viertes Button-Set, nämlich das mit den ganz schwarzen Schaltflächen ohne den grauen Streifen. Da die Schrifteinstellungen für dieses Button-Set identisch mit denen des gerade angelegten Sets sein sollen, legen wir diesmal das neue Button-Set mit einer anderen Auswahl an. Hierzu klicken wir mit einem Rechtsklick auf den Schriftzug „Button-Set1” und wählen im Kontextmenü „Duplizieren”.

Da bei dem Duplikat bereits alle Schrifteinstellungen getätigt sind, tauschen wir noch für jede der Schaltflächen die Grafik mit Streifen gegen die Grafik ohne Streifen aus.

So sollte das Ganze dann in etwa aussehen.



Und wie es weiter geht, seht Ihr hier.