

Home \| Kontakt \| Unterstützung \| Links	Suchen:

- mehr...

Tutorial 3: CSS, Code-Snippets und weitere Funktionen für Fortgeschrittene

Was Sie hier lernen:

Grundvorraussetzungen

Sie wissen, wie Sie mit HTML-Format ein Projekt anlegen und wissen auch, dass man darin eine zentrale CSS-Definitionsdatei definieren kann.
Sie können mit dem Datei-Neu-Dialog von (X)HTML-Format eine HTML-Seite erstellen und wissen, dass die darin vorgenommenen Einstellungen auch für die Funktion "Neues HTML-Dokument schnell" gelten.

Wenn einer oder mehrere Punkte nicht erfüllt sind, sollten Sie zuerst das Tutorial 1: Erste Schritte durchgehen.

Welche Tutorials es noch gibt

Die Tutorials werden derzeit noch erweitert. Aktuell gibt es folgende Tutorials zum HTML-Editor (X)HTML-Format:

CSS-Definitionen mit der Hilfe des CSS-Generators erstellen

Über CSS können Sie Ihre HTML-Seite nach Ihren eigenen Wünschen formatieren. Durch CSS wird es möglich, eigene Formatvorlagen zu definieren, mit denen Sie Texte beliebig formatieren können.
Vielleicht denken Sie jetzt, dass man das ohne CSS doch auch kann, indem man z.B. den Font-Tag mit einigen anderen Tags kombiniert. Das stimmt natürlich auch - allerdings hat CSS einen entscheidenden Vorteil:
Sie können für Ihr gesamtes Projekt eine zentrale CSS-Formatvorlage erstellen und darin verschiedene Formatvorlagen definieren, die dann für das gesamte Projekt gelten. Wenn Sie später das Design Ihrer Internetseite ändern möchten, brauchen Sie nur diese eine CSS-Datei editieren und die Änderung wird in jeder Datei des Projektes sofort sichtbar, ohne dass man die Dateien einzeln anpassen muss!
Ein weiterer Vorteil ist, dass man in CSS-Formatvorlagen (diese heißen hier Klassen (engl. classes)) mehrere Formatierungen ablegen kann, für die man früher in HTML mehrere einzelnen Tags kombinieren musste. Hierdurch wird die HTML-Datei viel übersichtlicher!

Im Folgenden lernen Sie, wie Sie eine CSS-Definition mit dem Namen "cssbeispiel" erstellen, die einen Text wie folgt formatiert:

Textfarbe: blau
Text: fett
Text-Größe 105% der Standardgröße
Schriftart Verdana und wenn der Browser diese nicht findet Arial (Schrift-Rangfolge)
Einen Rahmen, der oben und unten durchgezogen, an der Seite aber punktiert ist
Rahmenfarbe: lila
Innenabstände zum Rahmen links und rechts 5 Pixel und oben und unten 3 Pixel
Außenabstand des Rahmens zum umgebenden Text überall 5 Pixel

Öffnen Sie nun die zentrale CSS-Definitionsdatei Ihres Projektes. Diese heißt in der Standard-Einstellung von HTML-Format: styles.css und sollte sich im Projekt befinden, dass Sie im Tutorial 1 erstellt haben. Wenn Sie keine zentrale CSS-Datei haben, wählen Sie den Menüpunkt: "Datei->Projekt-Eigenschaften" und geben Sie dort eine CSS-Datei an. Wenn diese Datei nicht existiert, wird sie angelegt und dem Projekt hinzugefügt. Details erhalten Sie im Tutorial 1: Erste Schritte. Platzieren Sie nun den Cursor im Editor-Fenster vor dem Tag-Abschluss </style> und öffnen Sie den CSS-Generator über die Button-Leiste "Einfügen" und einen Klick auf den Button:

Es öffnet sich der CSS-Generator, der Sie bei der Erstellung von CSS-Klassen (Formatvorlagen) unterstützt.
Sie sehen nun die Karteikarte "Format" in der Sie den Namen der CSS-Klasse eingeben und Textformatierungen definieren können.
Geben Sie hier den Namen der Formatierung: ".cssbeispiel" ohne Anführungszeichen, aber mit führendem Punkt ein. Der Punkt ist wichtig, da Sie hierdurch eine neue Vorlage definieren.

Nebenbei:
Um bestehende Formatvorlagen, wie z.B. den Bold-Tag <b></b> abzuändern, könnten Sie hier auch einfach "b" ohne Anführungszeichen eingeben. Die Formatierungen, die Sie definieren, gelten dann für diesen Tag.

Geben Sie nun zwei Alternativ-Schriftarten ein. Diese sollten Sie so wählen, dass Ihre erste Wahl als erstes und die Alternativen danach kommen. Diese Rangfolge dient dazu, dass Ihre Internetseite später auch auf Betriebssystemen gut aussieht, auf denen es die Schriftart Ihrer ersten Wahl nicht gibt. Der Browser nimmt dann nämlich die zweite, und falls die auch nicht vorhanden ist, die dritte angegebene Schriftart!
Wählen Sie bei der Schriftgröße "prozentuell" und geben Sie als Wert 105% an.
Nun fehlt nur noch ein Haken vor "fett" und die Auswahl der Textfarbe durch einen Klick auf den entsprechenden Button.

Nebenbei: Natürlich können Sie noch viel mehr Einstellungen vornehmen, die den Rahmen dieses Tutorials aber sprengen würden und das Ganze langweilig werden ließen, da alle Einstellungen nach dem selben Schema erfolgen. Schauen Sie sich einfach mal die Auswahllisten Größenauswahl, Ausrichtung und Dekoration an und probieren Sie die verschiedenen Formatierungen aus.

Die Textformatierungen haben Sie nun schon vorgenommen, fehlen noch die Rahmen und Abstände. Wählen Sie hierzu die gleichnamige Registerkarte. Sie sehen nun ein tabellenförmiges Raster von Einstellmöglichkeiten, die größtenteils standardmäßig deaktiviert sind. Sobald Sie je einen Haken vor Rahmen und Abstände setzen, werden die zugehörigen Felder aktiviert. Sie sehen, dass es nun die Möglichkeit gibt, für jede Seite (oben, unten, rechts, links) eigenständige Angaben für Rahmenart und auch für die Abstände vorzunehmen. Wenn Sie das nicht benötigen, können Sie einen Haken vor "keine Einzelseiten" setzen. Dann werden die Einstellmöglichkeiten für Einzelseiten ausgeblendet und es bleibt eine Einstellmöglichkeit, die für alle Seiten gleichermaßen gilt.

Setzen Sie nun je einen Haken vor Rahmen und Abstände und anschließend bei den Abständen einen Haken vor "keine Einzelseiten". Wählen Sie jetzt für den Rahmen oben und unten die Rahmenart "solid" und die Rahmendicke 1 px. Hierdurch definieren Sie einen durchgängigen Rahmen für oben und unten. Für rechts und links definieren Sie "dotted", hierdurch wird der Rahmen rechts und links gepunktet!

Bei den Abständen haben Sie "keine Einzelseiten" gewählt, daher geben Sie hier nur je einen Wert für Innen und einen für Außenabstand ein. Wählen Sie hier je 5 px.

Hinweis:
Bei den Einheiten stehen Ihnen neben px noch viele andere zur Verfügung, so dass Sie nicht punktgenaue Angaben vornehmen müssen!

Klicken Sie nun auf den Button "OK".

Der Quelltext der CSS-Formatvorlage wird nun im Editor-Fenster eingefügt und sollte wie folgt aussehen:

.cssbeispiel {
  color: #000099;
  font-family: Verdana, Arial;
  font-weight: bold;
  font-size: 105%;
  border-left:1px dotted #cc00cc;
  border-right:1px dotted #cc00cc;
  border-bottom:1px solid #cc00cc;
  border-top:1px solid #cc00cc;
  margin:5px;
  padding:5px;
}

CSS-Klasse in HTML-Dateien verwenden

Speichern Sie die CSS-Datei und erstellen Sie ein neues HTML-Dokument. Sie sehen, dass die CSS-Datei automatisch in das Dokument eingebunden wird, da sie in den Projekteigenschaften angegeben haben, wo die zentrale CSS-Datei liegt. Geben Sie nun folgenden Text im Body der HTML-Datei ein:

<h3>Beispiel als Div-Tag (Erklärung folgt):</h3>
Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext.
Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext.
<div class="cssbeispiel">Mit der CSS-Definition formatierter Text.</div>
Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext.
Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext.
<p>

<h3>Beispiel als Span-Tag (Erklärung folgt)</h3>
Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext.
Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext.
<span class="cssbeispiel">Mit der CSS-Definition formatierter Text.</span>
Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext.
Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext.
<p>

Sie haben nun die CSS-Formatvorlage einmal einem Div-Tag und einmal einem Span-Tag zugewiesen. Div- und Span-Tags dienen in HTML dazu, Texte mit CSS-Klassen zu formatieren. Die Tags haben selber keine eigenen Formatvorgaben, übernehmen aber die der CSS-Definition.
Es gibt zwei verschiedene Tags, da beide unterschiedliche Anwendungsgebiete haben. Wollen Sie, dass die Formatierung den gesamten Text als ein großer Rahmen (ggf. auch mehrzeilig) umgibt, wählen Sie den Div-Tag. Wollen Sie, dass die Formatierung im Fließtext einen Text formatiert, wählen Sie den Span-Tag. Da dies recht schwer verständlich ist, sollten Sie sich das Ergebnis einfach ansehen. Klicken Sie auf "Vorschau" und sehen Sie sich das Ergebnis im Browser an. Vergrößern und verkleinern Sie das Browserfenster und sehen Sie, was mit dem formatierten Text passiert.

Das Ergebnis sollte wie folgt aussehen:

Beispiel als Div-Tag:

Mit der CSS-Definition formatierter Text.

Beispiel als Span-Tag

Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Mit der CSS-Definition formatierter Text. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext. Unformatierter Beispieltext.

Hinweis:
Sie sehen, dass der Div-Tag für abgetrennte rechteckige Bereiche ist, und dass der Span-Tag auch Texte im Fließtext formatieren kann.

Sie sehen aber auch, dass Innen- und Aussenabstände bei Rahmen im Fließtext nicht sinnvoll sind, da diese den umgebenden Text überschreiben können.

Code-Snippets zur Arbeitserleichterung

Was sind Code-Snippets?

Eines der leistungsstärksten Features von (X)HTML-Format 8 sind die so genannten Code-Snippets.
Code-Snippets sind vereinfacht ausgedrückt Quelltext-Stückchen mit Steuerzeichen.

Am besten erklärt man die Funktionsweise anhand eines Beispiels. Nehmen wir den Tag: <b></b> Wenn Sie diesen Tag einfach über die Zwischenablage einfügen würden, wäre der Cursor nach dem Einfügen immer hinter dem Tag. Wenn Sie jetzt aber möchten, dass Sie zuvor einen Text selektieren können und nach dem Einfügen zwischen dem Tag-Anfang <b> und dem Tag-Ende </b> dieser Text stehen soll, kommen Sie mit einfachen Zwischenablagen nicht weiter.

Dies ist ein Feature von Code-Snippets. Als Code Snippets definieren Sie den Bold-Tag wie folgt: <b>|</b>

Das Steuerzeichen "|" gibt an, dass genau dort der zuvor selektierte Text eingefügt werden soll. Wenn Sie zuvor keinen Text selektiert hatten, wird dort, wo das Steuerzeichen stand, der Cursor positioniert.

Code-Snippets können aber noch mehr! Wenn Sie einen Quelltext einfügen möchten, der aber an einer Stelle noch geändert werden soll, können Sie das wie bei folgendem Java-Script definieren:

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

Sie sehen, dass hier vor und hinter dem Dateinamen das Steuerzeichen "|" steht. Dies führt dazu, dass in diesem Code-Snippet nach dem Einfügen der Text "dateiname.htm" selektiert wird. Wenn Sie nun etwas mit der Tastatur eingeben, wird der Dateiname damit ersetzt.

Neue Code-Snippets erstellen

Mit (X)HTML-Format werden bereits einige Code-Snippets sortiert nach Themengebieten für CSS, HTML, Java-Script, SSI und XHTML mitgeliefert.
Sie können jedoch auch sehr einfach eigene erstellen und die in so genannte Code-Snippet-Sets gruppieren.
Auch das Weitergeben an andere ist leicht machbar, da alle neuen Code-Snippets im Unterverzeichnis "codesnippets" vom (X)HTML-Format-Installationsverzeichnis abgelegt werden. Der Dateiname entspricht dem Namen des Code-Snippet-Sets mit angehängter Datei-Endung ".csn". Sie brauchen die entsprechende Datei nur kopieren und in das entsprechende Verzeichnis einer anderen Installation einspielen. Beim nächsten Programmstart wird die Datei eingelesen und zur Schnellanwahl im Menü "Code Snippets->snippet sets" angeboten.

Im Folgenden lernen Sie, wie Sie neue Code-Snippets anlegen

Öffnen Sie dazu das Code-Snippet-Set "Standard" über das Menü: "Code Snippets->snippet sets". Dieses Code-Snippet-Set ist wahrscheinlich noch leer, da es dafür vorgesehen ist, von Ihnen häufig genutzte unsortierte Code-Snippets aufzunehmen. Wie Sie ein eigenes Set zur Gruppierung anlegen, erfahren Sie weiter unten.
Wählen Sie nun den Menüpunkt: "Code-Snippets->Code Snippets bearbeiten". Es öffnet sich der Code-Snippets-Dialog.
Klicken Sie auf den Button: "Neuer Tag" und geben Sie im daraufhin geöffneten Dialog "div-trenner" ein. Mit einem Klick auf "OK" wird der Tag links in die Liste der Code-Snippets aufgenommen. Da das Code-Snippet natürlich noch leer ist, füllen Sie es nun mit Leben:

Geben Sie dazu folgendes Code-Snippet unter "Aktueller Inhalt" ein:

<div class="trenner_dunkel">|Überschrift|</div>

Speichern Sie nun das Code-Snippet mit einem Klick auf den Button: "Inhalt Speichern".

Damit haben Sie Ihr erstes Code-Snippet angelegt. Wiederholen Sie dies mit folgenden Code-Snippets:

Code-Snippet Name	Inhalt
div miniborder	<div class="miniborder">\|</div>
span miniborder	<span class="miniborder">\|</span>

Verlassen Sie nach dem Speichern des letzten Snippets den Dialog durch einen Klick auf "Schließen".

Wenn Sie nun das Menü "Code-Snippets" öffnen, sehen Sie ihre drei neuen Code-Snippets zur Auswahl.

Hinweis:
Das Code-Snippet-Set ist zu diesem Zeitpunkt noch nicht auf der Festplatte gespeichert! Dies wird erst am Programmende oder bei einem Wechsel zu einem anderen Code-Snippet automatisch durchgeführt.
Um das Code-Snippet jetzt schon zu speichern, wechseln Sie über das Menü: "Code Snippets->snippet sets" zu einem anderen Snippet-Set und danach zurück zum letzten.

Nebenbei:
Die ersten 10 Code-Snippets und Code-Snippet Sets erhalten Tastenkürzel. Die Tastenkürzel für Snippet-Sets werden beim Programmstart und die Tastenkürzel für Code-Snippets beim Öffnen einen Sets vergeben. Um nun also Tastenkürzel für Ihre gerade erstellten Code-Snippets zu erhalten, gehen Sie genau wie beim Speichern vor.

Probieren Sie Ihre Code-Snippets aus. Probieren Sie es zuerst mit dem Code-Snippet: "div-trenner":
Sie sehen, dass die Überschrift nach dem Einfügen selektiert ist.

Probieren Sie nun "div-miniborder":
Sie sehen, dass der Cursor nach dem Einfügen innerhalb des Tags ist. Selektieren Sie nun einen beliebigen unformatierten Text und wählen Sie dasselbe Code-Snippet:
Sie sehen, dass der zuvor selektierte Text nun mit dem Code-Snippet quasi ummantelt ist.

Eigenes Code-Snippet Set anlegen

Um Code-Snippets zu gruppieren, brauchen Sie nur ein eigenes Code-Snippet-Set anlegen. Dies geht ebenfalls über den Code-Snippets-Dialog. Klicken Sie hier einfach auf den Button: "Neues Set" und geben Sie den Namen für das Snippet-Set ein. Anschließend können Sie genau wie im letzten Beispiel vorgehen.

Fazit: Mit Code-Snippets können Sie (X)HTML-Format sehr einfach um eigene Tags erweitern. Sie sind übrigens nicht in der Größe beschränkt, so dass Sie sich hier auch nicht auf einfache Tags beschränken müssen.
Ich bin übrigens immer an guten Code-Snippets interessiert. Schicken Sie mir deshalb Ihre eigenen Code-Snippets. Dann kann ich die Bibliothek der mit (X)HTML-Format ausgelieferten Code-Snippets erweitern.

Editor-Tags für eigene Ansprüche optimieren

(X)HTML-Format bietet eine Fülle von Funktionen. Die meisten dienen dazu, (X)HTML-Tags zu generieren, deren Syntax und Attribute ja sehr komplex sein können. Alle Tags, die HTML-Format generiert, können editiert werden. Erleichternd kommt hinzu, dass die Tags im selben Format wie Code-Snippets vorliegen, so dass Ihnen die Anpassung nicht schwer fallen wird.

Vielleicht fragen Sie sich, wozu eine Anpassung der Tags sinnvoll sein kann?
Hier kommen ein paar Beispiele:

Sie haben ein Style-Sheet erstellt, dass in bestimmten Tags voreingestellt sein soll.
Sie möchten einen Tag gegen einen anderen austauschen.
Denkbar wäre z.B. der Austausch des Tags "<b>|</b>" gegen "<span class="fett">|</span>"
Sie haben einen Footer, der in jede neu erstellte HTML-Datei eingebunden sein soll. In diesem Fall müssten Sie nur die Tags mit den Namen "new_dialog_htm" und "new_quick_htm" anpassen.
Sie möchten bei Grafiken die Style-Angaben für den Textumfluss nicht direkt im Tag haben, sondern in der zentralen CSS-Datei. In diesem Fall müssten Sie die Tags "image_float_left", "image_fload_right" und "image_style_default" anpassen.

Wir werden jetzt exemplarisch einen Footer für alle neuen HTML-Dokumente eintragen.
Öffnen Sie hierzu den Tag-Dialog über den Menüpunkt: "Optionen->Editor-Tags bearbeiten". Sie sehen, das sich ein Dialog öffnet, ähnlich dem Code-Snippet-Dialog. Die einzigen Unterschiede zum Code-Snippet-Dialog sind ein Textfenster mit der Standard-Belegung für den Tag sowie der zugehörige Button "Standard Wert".

Diesen Button nutzen Sie, wenn Sie mit einer Anpassung, die Sie im Fenster "Aktueller Inhalt" vorgenommen haben, nicht zufrieden sind und dem Tag wieder seinen Standard-Wert zuweisen möchten.

Um einen Footer für jedes neue Dokument einzugeben, suchen Sie in der Tag-Liste den Tag mit dem Namen: "new_dialog_htm". Dies ist der Quelltext, der bei einer neuen HTML-Seite eingefügt wird, nachdem Sie den Dialog aus dem Menü: "Datei->Neu->Dokument Dialog" ausgefüllt haben.
Die Platzhalter %1 bis %n werden mit den Werten aus dem Dialog ersetzt.
Scrollen Sie nun in dem Textfenster "Aktueller Inhalt" herunter bis Sie den folgenden Quelltext sehen:

<body bgcolor="%7" text="%8" link="%9" vlink="%10" alink="%11">
|
</body>

Geben Sie nun eine Leerzeile hinter dem Steuerzeichen "|" ein und erweitern Sie den Quelltext, so dass er wie folgt aussieht:

<body bgcolor="%7" text="%8" link="%9" vlink="%10" alink="%11">
|
<p>
Letzte Aktualisierung dieser Seite:<br>
 um 
</body>

Klicken Sie jetzt auf den Button: "Inhalt speichern".

Öffnen Sie nun den Tag: "new_quick_htm" und tun Sie da das gleiche. Der Tag "new_quick_htm" ist der Quelltext, der in eine neue Datei eingefügt wird, wenn Sie den Button: anklicken.

Schließen Sie den Tag-Dialog über den gleichnamigen Button nach dem Speichern Ihrer Änderungen.

Um das Ergebnis zu testen, erstellen Sie einfach eine neue Seite.

Nebenbei: Nach dem Speichern der Datei sehen Sie auch, was der Quelltext, den Sie eingegeben haben bedeutet. An der Stelle wo die Kommentare standen, ist nun das aktuelle Datum und die Uhrzeit eingefügt worden.

Diese Auto-Texte können Sie übrigens auch über die Buttons: und in Ihre Internetseiten einbinden. Durch diese Auto-Texte brauchen Sie nie wieder das Datum Ihrer letzten Überarbeitung manuell aktualisieren.

Ausblick

Herzlichen Glückwunsch, Sie kennen sich nun sehr gut mit dem HTML-Editor (X)HTML-Format 8 aus. Es wurden in den Tutorials nicht alle Features behandelt; ich denke aber, dass Sie sich mit Ihren jetzigen Kenntissen sehr leicht einarbeiten können, um alle Funktionen für sich zu nutzen. Wenn etwas nicht eindeutig ist, lohnt sich ein Blick in die Hilfe oder in die Tipps.

Wenn es da nicht steht, helfe ich gern per eMail.

Freundliche Grüße
Christian Diekmann

| | | |

[an error occurred while processing this directive]