Laborskizze 5  "Anpassen der styles einer Nvu-Vorlage   (Stand 11.3.06)

Mit dieser Laborskizze setze ich die Laborskizze Nr. 4 fort und ändere für dich zum Zugucken die Farben der amerikanischen Vorlage aus der Laborskizze 4.  Was du hier siehst, die Laborskizze Nr. 5, ist für dein Browserfenster bestimmt. Gedacht ist, dass sie nicht nur durchgelesen, sondern mit Nvu auch nachvollzogen wird. Die Bedeutung der styles und CSS erkläre ich nicht, aber die Bedienung des CSS Editors für die Farbeinstellung.

1. Wie geht es los?  Antwort: Lade mit Nvu deine HTML-Vorlage "vorlage3sp.mzt" aus der Laborskizze 4 mit Menü Datei / Datei öffnen... / im Dialog unten stellst du den Dateityp 'HTML-Vorlage' ein.

BILD 1 und BILD 2

Da aber die Vorlage schon mit Nvu geladen ist, ist "purple" auch in Nvu zu sehen. Dazu klicke ich bei der Regel 'body' auf den Reiter 'Text' und sofort wechselt die Schaltfläche für die Textfarbe oben rechts zu "purple". Ein Doppelklick auf diese Schaltfläche öffnet den Dialog 'Textfarbe' wie im Bild 2. Nvu zeigt 10 x 7 = 70 Farben, kennt aber nur wenige Farbnamen. "blue" ist bei den 70 Farben nicht dabei, kann aber als Name eingegeben werden, "lavender" jedoch nicht. Dafür aber die 16,78 Millionen verschiedenen Farben, wenn unter RGB in Einerschritten weitergeschaltet wird. Soviel zur Nvu-Farbeingabe.

Die Vorlage soll ja farblich geändert werden. Um nicht über Geschmacksfragen zu diskutieren, rufe ich für die neuen Farben einen Berater auf: "http://www.themaninblue.com/experiment/Technicolor/" und stelle "plum" mit RGB = 221 160 221 als Vorgabe ein. Maus streicht über die Farbbalken. Stimmt der Zahlenwert, z.B. 221 für Rot, dann wird geklickt. Bild 3 links. 

BILD 3

Die vorgeschlagenen Farben beenden die Suche nach den neuen Farben. Bild3 rechts.

BILD 4

Zum Wechseln der Farben der styles ist es zu einfach und ohne Lerneffekt, die Farbnamen im Quelltext auszuwechseln. Ich mache es per Maus und öffne mit Menü Extras / CSS Editor die 18 Regeln des internen style sheets.
Das Anklicken von 'body' und dem Register 'Hintergrund' bringt dich zur Farbeingabe. Hier gibt es mit "whitesmoke" (auf deutsch die Farbe Rauch) irgend ein Problem. Die Farbpalette nimmt die ganze Bildschirmhöhe ein. Ich klicke Schwarz an und die jetzt auftauchende Schaltfläche 'OK'. Jetzt verhält sich beim zweiten Versuch die Palette manierlich. Die Farbe #936A93 ergibt den erwarteten Hintergrund.

'#leftcontent' erhält unter dem Register 'Hintergrund' die Farbe #E8E8BF und unter dem Register 'Text' das Schwarz mit #00000. Über border sagt der Vorschlag nichts, deshalb bleibt unter dem Register 'Begrenzungen' die Farbe. Ein Klick auf die Palette und 'OK' ersetzt den Namen durch den Hexwert #000099. Derweil nimmt die Vorlage unter dem Editor immer gleich die neue Farbe an.

Für '#centercontent' nehme ich vom Vorschlag die rechte Spalte mit der Hintergrundfarbe #F3F3DF, da die Ansage nur zwei Spalten kennt. Dabei gibt es wieder das Problem mit "whitesmoke", das hast du aber im Griff. Dann noch einmal "darkblue" durch #000099 ersetzen. Zuletzt wird die Schrift unter dem Register 'Text' auch schwarz gefärbt.

'#rightcontent" bekommt für 'Text', 'Hintergrund' und 'Begrenzungen' die Farben von '#leftcontent'. '#banner' erhält schwarzen Text und als Hintergrundfarbe #DDA0DD.

3. Was lässt sich außer der Farbe noch ändern?  Antwort: Während KaZcadeS benutzt wird, verändert sich mit jeder Einstellung die Seite darunter. Du kannst alle Register durchsehen und die Einstellmöglichkeiten erproben. Die jeweilige komplette Regel siehst du unter dem Register 'Allgemein'. Dort kannst du noch einen Haken für die Wichtigkeit setzen. Damit wird wie mit einer Trumpfkarte ein widersprechender inline style, der sonst das letzte Wort in Sachen Format hat, ausgestochen.