Tutorial 2: Seitenlayout und grundlegende Funktionen wie Tabellen, Listen, Grafiken und Schrift-Formatierungen

Was Sie hier lernen

• Formatierung von Seiteninhalten ohne CSS
• Einfügen von Tabellen über den Tabellen-Dialog
• Einfügen von Links über den Link-Dialog
• Einfügen von Listen über den Listen-Dialog
• Einfügen von Grafiken über den Grafik-Dialog
• Nutzung des Farb-Dialoges und der Farb-Historie

Grundvoraussetzungen

• Sie wissen, wie Sie mit HTML-Format ein Projekt anlegen und wissen auch, dass man darin eine zentrale CSS-Definitionsdatei definieren kann.
• Sie wissen, wie man mit dem Datei-Neu Dialog von (X)HTML-Format eine HTML-Seite erstellen können und dass die darin vorgenommenen Einstellungen auch für die Funktion "Neues HTML-Dokument schnell" gelten.
• Sie haben das im letzten Tutorial angelegte Projekt noch zur Verfügung, oder irgendein anderes Projekt in dem Sie eine zentrale CSS-Datei definiert haben.

Welche Tutorials es noch gibt

• Tutorial 1: Erste Schritte (Projekt- und Dokument-Erstellung)
• Tutorial 2: Seitenlayout und grundlegende Funktionen wie Tabellen, Listen, Grafiken und Schrift-Formatierungen
• Tutorial 3: CSS, Code-Snippets und weitere Funktionen für Fortgeschrittene

Start des Tutorials

"./" steht für das Wurzelverzeichnis des Projektes, dem alle Dateien untergeordnet sind und das später auch die Wurzel Ihrer Domain repräsentiert.

./index.htm
./links/index.htm

Die Datei im Verzeichnis "links" sollte den Titel "Interessante Links" haben. Nachdem Sie die Dateien erstellt haben und sie dem Projekt hinzugefügt haben, sollte Ihre Projektansicht in etwa so aussehen wie die Grafik rechts oben.

Formatierung von Seiteninhalten ohne CSS

Hinweis:
Um sich das Ergebnis ansehen zu können bietet HTML-Format eine einfache interne Vorschau und zusätzlich die Möglichkeit, bis zu 3 externe Vorschau-Browser einzubinden. Um die Vorschau zu starten, klicken Sie einfach einen der Vorschau-Buttons:
Wahrscheinlich haben Sie aber bisher nur einen externen gesetzt, daher sollten Sie einen der beiden linken Buttons nutzen. Speichern brauchen Sie hierzu vorher übrigens nicht! HTML-Format erzeugt nämlich automatisch eine temporäre Datei mit dem Inhalt des Editor-Fensters. So können Sie Änderungen an Dateien ausprobieren, ohne die Datei selbst verändert abgespeichert haben zu müssen. Sollten Sie viele Änderungen vorgenommen haben und diese verwerfen wollen, reicht es, die Datei einfach zu schließen und neu zu öffnen... Für kleinere Änderungen reicht natürlich die Rückgängig-Funktion im Menü Bearbeiten oder über den Button: .

Um den Text nun fett zu formatieren, können Sie nun den gesamten Text selektieren und im Menü "Bearbeiten" den Menüpunkt: "Fett" wählen. Das Ergebnis sollte wie folgt aussehen:

<br> Gehen Sie nun noch einmal in das Menü: "Bearbeiten" und sehen Sie sich den Menüpunkt "Fett" genau an. Sie sehen, dass links neben dem Menüpunkt eine Grafik angezeigt wird. Dies zeigt, dass es den Befehl auch in der Button-Leiste gibt.
Genau so gut hätten Sie auch den Button mit der entsprechenden Grafik in der Button-Leiste "Format" wählen können.
Dies gilt übrigens für alle Menüpunkte mit einer Grafik. Nebenbei geht für fett (engl.: bold) auch die Tastenkombination Strg-B

Genau nach der gleichen Vorgehensweise können Sie auch alle weiteren Formatierungen nutzen. Probieren Sie einfach die anderen Funktionen in der Button-Leiste "Format" aus.

Einfügen von Tabellen über den Tabellen-Dialog

Öffnen Sie hierzu den Tabellen-Dialog in der Button-Leiste "Listen und Tabellen" über den Button:

Tragen Sie für Spalten und Zeilenanzahl jeweils 2 ein und klicken wählen die "Kopfzeile" an. Die restlichen Einstellungen können so bleiben wie sie sind. Sie werden im Anschluss erklärt.
Klicken Sie nun auf den Button "Ok".

Dies ist das Grundgerüst Ihrer Tabelle. In der Vorschau werden Sie jedoch nichts sehen, da noch kein Inhalt eingetragen ist. Füllen Sie nun die Überschriftszeile. Hierzu müssen Sie wissen, dass Tabellen aus Spalten (TH und TD-Tags) sowie aus Zeilen (TR-Tags) bestehen. Näheres finden Sie in der Hilfe unter selfHTML.
Tragen Sie nun in dem ersten TH-Tag "Link" und in den zweiten TH-Tag "Beschreibung" ein.
Der Quelltext der ersten Zeile müsste nun wie folgt aussehen:

Rufen Sie die Vorschau auf und sehen Sie sich das Ergebnis an.

Sie sehen nun nur die beiden Wörter Link und Beschreibung der Tabelle. Mit einem Rahmen kann man sich die Tabelle leichter vorstellen, ändern Sie deshalb den HTML-Quelltext so, dass Sie anstelle von border="0" nun border="1" im Table-Tag stehen haben. Schauen Sie sich jetzt wieder die Vorschau an. Sie sehen, dass nun ein Rahmen um die Kopfzeile gezeichnet wird. Da im Tabellen-Rumpf noch nichts steht, sehen sie ihn auch noch nicht.

Einfügen von Links über den Link-Dialog

Positionieren Sie hierzu den Cursor im ersten TD-Tag und wählen Sie anschließend in der Button-Leiste "Einfügen" den Button . Es öffnet sich der Link-Dialog. Im oberen Feld Link geben Sie http://www.openwebsuite.org ein und im unteren Feld Beschreibung den Text: "HomepageHelper.de". Das Ergebnis sollte ungefähr wie folgt aussehen:

Tragen Sie im zweiten TD-Tag als Beschreibung "HomepageHelper.de - Die Seite für Webmaster" ein und klicken Sie wieder auf den Vorschau-Button um das Ergebnis zu sehen.

Im "Link-Einfügen"-Dialog haben Sie noch einen Button "Durchsuchen" gesehen. Über diesen Button können Sie lokale Dateien Ihres Internetangebotes auswählen. Die Pfadangaben werden dann automatisch relativ zum aktuellen Dokument ermittelt. Sie brauchen sich dann nicht mehr darum kümmern.

Fügen Sie jetzt zur Übung noch 1-2 weitere Links Ihrer Wahl nach dem selben Schema ein.

Einfügen von Listen über den Listen-Dialog

Es öffnet sich der Listen-Dialog. Wählen Sie als erstes die Listenart "Disk". Sie sehen, dass hier noch einige andere Typen und Aufzählungsarten zur Verfügung stehen. Diese sollten Sie später noch ausprobieren.
Geben Sie als Zeilenzahl 3 ein und eine Beschreibung. Die Beschreibung erscheint unter dem Mauszeiger, wenn Sie später im Browser mit diesem über der Liste verweilen. Das Feld "Startwert" können Sie nicht füllen, da dieses nur für Aufzählungstypen zur Verfügung steht und Disk ist kein Aufzählungstyp.

Nachdem Sie auf den OK-Button geklickt haben, wird ein Quelltext wie folgt erstellt:

Füllen Sie die Liste nun indem Sie in jedem li-Tag einen Eintrag eingeben. Das Ergebnis der gesamten Tabellenzeile inklusive Liste kann wie folgt aussehen:

Schauen Sie sich das Ergebnis wieder in der Vorschau an.

Einfügen von Grafiken über den Grafik-Dialog

Erstellen Sie im Wurzelverzeichnis Ihres Projektes ein Verzeichnis "grafik" und kopieren Sie dort eine beliebige aber nicht zu große Gif- oder Jpg-Grafik hinein.

Um Grafiken in HTML-Dokumente einzubinden bietet HTML-Format den Grafik-Dialog mit Vorschau an.

Positionieren Sie den Cursor im TD-Tag vor der Beschreibung eines Links und klicken Sie den Button:
Es öffnet sich der Grafik-Dialog. Klicken Sie nun auf den Button "Durchsuchen" und wechseln Sie im darauf aufgehenden Datei-Dialog die von Ihnen in das "grafik"-Verzeichnis kopierte Grafik.
Sollten Sie mehrere Grafiken in dem Verzeichnis haben, können Sie jede Grafik anklicken um eine Vorschau angezeigt zu bekommen.
Klicken Sie nun auf die Grafik und bestätigen Sie den Dialog.
Der Datei-Dialog schließt sich und die Grafik wird in den Grafik-Dialog übernommen. Sie sehen eine Vorschau sowie die automatisch ermittelten Größenangaben.
Vielleicht wurden Sie gefragt, ob HTML-Format die Pfadangabe zur Grafik automatisch in relative Pfadangaben umwandeln soll. Dies sollten Sie bejahen. Wenn Sie diese Frage nicht mehr gestellt bekommen wollen, können Sie dies über den Optionen-Dialog aus dem Menü "Optionen" automatisieren.

Geben Sie nun noch einen Alternativ-Text für die Grafik an. Dieser wird angezeigt, wenn Sie mit der Maus im Browser über der Grafik verweilen oder die Grafik im Browser noch nicht geladen ist.
Wenn Sie möchten, können Sie die Größe ändern. Die Vorschau wird automatisch aktualisiert. Wenn Sie nicht möchten, dass das Breite/Höhe-Verhältnis proportional bleibt, können Sie den entsprechenden Haken abwählen.
Im Bereich Textumfluss können Sie noch wählen, wie der Text um die Grafik umfließen soll, oder ob er es nicht soll. Wählen Sie hier "align=right". Hierdurch wird die Grafik rechts angeordnet und der text fließt links um sie herum.
Abschließend wählen Sie noch den Haken vor "Link" an und geben im daneben stehenden Eingabefeld "http://www.openwebsuite.org" ein. Wenn Sie dies anwählen wird die Grafik als Link eingefügt. Wenn man im Browser auf die Grafik klickt, öffnet sich dann die verlinke Seite.

Klicken Sie nun auf den Button "OK". Es sollte nun ein Tag wie folgender erstellt worden sein:

Schauen Sie sich das Ergebnis in der Vorschau an.

Nutzung des Farb-Dialoges und der Farb-Historie

RR steht für den Rot-Anteil der Farbe, GG für grün und BB für Blau. Hieraus kann man alle nutzbaren Farben mischen. Um dies zu vereinfachen, bietet HTML-Format den Farb-Dialog. Dieser Dialog kann auf zwei verschiede Arten genutzt werden. Einmal zur allgemeinen Text-Formatierung und einmal zur Farb-Änderung.
Zur Text-Formatierung darf in der Button-Leiste "Farben" kein Haken vor "Nur Hex Wert" stehen. Selektieren Sie nun einen beliebigen Text und klicken Sie auf den Button:
Es öffnet sich der Farb-Dialog in dem Sie beliebige Farben einstellen können. In der Vorschau sehen Sie die aktuell eingestellte Farbe im Kontrast zu Schwarz und Weiß. Wählen Sie eine Farbe und klicken Sie auf den Button "OK".

Als Ergebnis sollten Sie einen Tag wie Folgenden erhalten haben:

Ausblick

Zum Bilder hochladen koennen verschiedene Dienste genutzt werden um Traffic zu sparen. Einige Webhoster haben sich auf den Bilder-Upload spezialisiert. Dazu zählen auch imgBox.de und Picoload.de Auch mit dem Bilderdienst kann kostenlos Bilder hochladen bei wenig Speicherplatz genutzt werden.

Freundliche Grüße
  Christian Diekmann

Alle Rechte dieser Tutorials liegen bei Christian Diekmann. Sie dürfen nur mit seiner schriftlichen Genehmigung weiter verteilt, oder veröffentlicht werden.