zur Startseite vom TP

Hinweis

---

Vorwort

Im ersten Teil haben Sie gelernt wie man einfache Textformatierungen für eine einzelne Datei definiert. Im zweiten Teil ging es darum diese Anweisungen in externe Dateien auszulagern um sie für jede beliebige HTML-Datei zur Verfügung zu stellen. Das waren bisher alles Benutzerdefinierte Stile.

Beim Anlegen eines neuen Stiles haben Sie aber noch mehr Möglichkeiten. Dies wären die nächste Kategorie, die HTML Tags neu definieren.

Abb.1

---

Was bedeutet das nun?

HTML besteht aus einer Reihe Befehle die dem Browser mitteilen was er zu tun und wie anzuzeigen hat. Diese Befehle sind feste Bestandteile der "Programmiersprache HTML". Nehmen wir ein einfaches Beispiel, den Tag <h1>. Im Bild sind zwei Überschriften mit gleichem Aussehen. Die erste ist mit <h1> formatiert, die zweite normal mit dem Eigenschafteninspektor. Sie sehen, dass <h1>Überschrift</h1> das gleiche ist wie die zweite aufwendigere Formatierung im Bild. 

Abb.2

<h1> ist also eine feste Formatierung im allgemeingültigem HTML, an der Sie nicht ändern können, es sei denn, und jetzt kommt die Sache HTML-Tag neu definieren, Sie machen das mit CSS. Damit bestimmen Sie also neu den Tag <h1>.. Das können Sie wie folgt einmal tun.

---

1

Erstellen Sie ein neues Dokument, gehen ins Menü Text/Absatzformat/und wählen Überschrift 1 (Strg+1), dann schreiben Sie den Text Überschrift. Drücken sie F12 für die Browservorschau. Ihre Überschrift sollte etwa wie im Bild oben aussehen. Schliessen Sie die Vorschau wieder. Gehen Sie nun auf Text/CSS-Stile/Neuer Stil. Wählen Sie die Einstellungen wie im folgenden Bild und klicken OK.

Abb.3

---

2

Übernehmen Sie dann auch diese Einstellungen.

Abb.4

---

3

Nach dem Übernehmen sieht Ihre Überschrift so aus, ohne das etwas anderes dort steht als <h1>. [Abbildung 5 - h1 ist nun neu definiert]

Um Stile wieder rückgängig zu machen, müssen Sie den betreffenden Stil über Text/CSS-Stile/Stylesheet bearbeiten entfernen oder im Codeinspektor. Zum CSS-Code direkt gibts mehr in anderen Teilen des Workshops!

---

4

Machen wir noch ein kleines Beispiel mit einer Tabelle. Fügen Sie in Ihre Datei eine Tabelle ein z.B. 2 Spalten/1 Zeile und schreiben in jede Zelle etwas Text.

Abb.6

---

5

Nun erzeugen Sie wieder einen neuen Stil und wählen diesmal table aus. Wenn Sie die Tabelle in DW markiert haben steht schon automatisch der richtige Tag im Auswahlfenster. Wenn nicht, wählen Sie ihn einfach per Hand.

Abb.7

---

6

Übernehmen Sie diese Einstellungen.

Und so siehts aus. Auch hier ist keine weitere Formatierung im Code zu sehen.

Abb.8

---

---

Anmerkung:

Wenn sie HTML-Tags neu definieren z.B. table, gilt das für alle table-Tags, wenn sie z.B. einzelne Zellen einer Tabelle anders formatieren möchten, dann können Sie das wie gewohnt über den Eigenschafteninspektor machen. Sinnvoller den Inhalt von Tabellen zu formatieren wäre den <td> Tag zu nehmen, anstatt <table>, den sie ebenfalls beim neuen Stil auswählen können. Damit versteht auch der gute alte Netscape was er machen soll.

---

Fazit:

Sie können mit HTML-Tag neu definieren schnell und einfach für sämtliche HTML-Tags gültige Formatierungen zuweisen. Das ist also von Vorteil wenn die Schrift in all Ihren Tabellen z.B. eine bestimmte Größe und Farbe aufweisen soll. Sie müssen dann keine Formatierungsangaben mehr machen, das geschieht automatisch. Probieren sie auch noch andere Tags aus, vom Prinzip können Sie jeden Tag beeinflussen. Natürlich gilt auch hier, die verschiedenen Browser müssen mitspielen!

Auch in diesem Tut gilt wieder genauso wie schon im zweiten Teil beschrieben, das auslagern der Stile in externe Stylesheet-Dateien um eine Anweisung für jedes Dokument Ihres Projektes zur Verfügung zu stellen. Stellen Sie sich vor, Sie haben 100 Dateien in denen die Schriftfarbe der Tabellen geändert werden muss. Sie brauchen nur die Farbe in der externen Stylesheetdatei ändern und alle Dokumente übernehmen die Änderung automatisch. Daran sehen Sie wie mächtig CSS doch ist.

---

CSS Workshop Teilbereiche

---