HomepageHelper.de - Die Seite für Webmaster
 
 

Home | Kontakt | Unterstützung | Links
Suchen:

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

Was Sie hier lernen

In diesem Tutorial erstellen Sie eine Internetseite, in der obige Punkte umgesetzt sind.

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.
Wenn einer oder mehrere Punkte nicht erfüllt sind, sollten Sie das Tutorial 1: Erste Schritte vor diesem durchgehen.

Welche Tutorials es noch gibt

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

Start des Tutorials

Im letzten Tutorial haben Sie gelernt, wie Sie ein Projekt anlegen und HTML-Dokumente erstellen.
Projektansicht nach der Erstellung der beiden Dateien Nehmen Sie dieses Projekt und erstellen Sie zwei Dateien in zwei Unterverzeichnissen Ihres Projekts und fügen Sie sie über den "+"-Button dem Projekt hinzu. Wenn Sie dem Tutorial 1: Erste Schritte gefolgt sind, können Sie die folgenden Dateien erstellen:

"./" 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

Öffnen Sie nun die soeben erstellte Datei index.htm aus dem Verzeichnis "links".
Sie sehen das Grundgerüst der HTML-Datei. Der Kopf (englisch Head) ist bereits von dem Datei-Dialog gefüllt. Der Inhalt der HTML-Seite, der später auch im Browser angezeigt wird, wird im Body des HTML-Dokuments notiert. Dieser ist natürlich noch leer. Klicken Sie nun mit der Maus zwischen Tag-Anfang und Tag-Ende des Body-Tags und geben dort die Überschrift:
"Links zum Thema Aquaristik" ein.
Das Ergebnis sollte in etwa wie folgt aussehen:

<body bgcolor="#ffffff" text="#000000" link="#ff00ff" vlink="#cc00cc" alink="#aa00aa">
Links zum Thema Aquaristik
</body>

Selektieren Sie nun die Überschrift und wählen Sie anschließend den Menüpunkt:
"Bearbeiten->Überschrift->H1"
Das Ergebnis sollte so aussehen:

<body bgcolor="#ffffff" text="#000000" link="#ff00ff" vlink="#cc00cc" alink="#aa00aa">
<h1>Interessante Links</h1>
</body>

Gehen Sie nun noch einmal in das Menü: "Bearbeiten->Überschrift" und sehen Sie sich den Menüpunkt "H1" genau an. Rechts neben dem Menüpunkt steht noch eine Tastenkombination mit der sie ebenfalls die Formatierung hätten vornehmen können.
Dies gilt für alle Menüpunkte. Wenn daneben eine Tastenkombination steht, kann man die Funktion hierüber schneller nutzen.
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: Rückgängig Button.

Schreiben Sie nun noch ein wenig Text unter die Überschrift um zu erklären, dass Sie nun ein paar interessante Links zum Weitersurfen aufführen werden.
Um Zeilenumbrüche einzufügen, nutzen Sie die Tastenkombination Strg-Enter. Um einen Absatz einzufügen, können Sie Alt-Enter nutzen. Allerdings ist es bei Absätzen besser, diese in einem abgeschlossenen <p></p> tag zu notieren, dadurch wird zum nächsten und vorherigen Absatz automatisch ein kleiner Abstand eingefügt. Außerdem sollten in HTML alle Tags abgeschlossen sein. Dies geht aber zu sehr ins Detail. Lesen Sie hierzu bitte selfHTML. Den Link finden Sie im Menü "Hilfe".

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:

<body bgcolor="#ffffff" text="#000000" link="#ff00ff" vlink="#cc00cc" alink="#aa00aa">
<h1>Links zum Thema Aquaristik</h1>
<b>Hier finden<br>
Sie interessante Links<br>
zum weitersurfen.</b>

</body>

<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

Tabellen können mit HTML-Format auf einfachste Weise erstellt werden. Wir erstellen nun eine Tabelle mit zwei Spalten und mehren Zeilen von denen die erste eine Überschrift ist.

Ö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".

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <th>
  </th>
  <th>
  </th>
 </tr>
 <tr>
  <td>
  </td>
  <td>
  </td>
 </tr>
</table>

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:

 <tr>
  <th>Link
  </th>
  <th>Beschreibung
  </th>
 </tr>

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

Nun werden Sie Ihren ersten Link in die Tabelle einfügen und anschließend eine Beschreibung in die Spalte daneben schreiben.

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

 <tr>
  <td><a href="http://www.homepagehelper.de">HomepageHelper.de</a>
  </td>
  <td>
  </td>
 </tr>

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.

Hinweis:
Folgende Einstellungen sind im Tabellendialog noch möglich:
Spaltenübergreifender Kopf
Wählen Sie diese Option, um alle Überschriftsspalten zusammenzufassen und eine zentrierte Überschrift über alle Spalten einzutragen. Die Überschrift geben Sie im darunter liegenden Feld an.

Class-Name
Hier können Sie ein Style-Sheet angeben, mit dem die Tabelle formatiert werden soll. Das angegebene Style-Sheet wird gespeichert und steht beim nächsten Öffnen des Tabellen-Dialoges wieder zur Verfügung.

Rahmen, Abstände und Breite
Hier können Sie der Benennung entsprechende Einstellungen vornehmen. Diese Einstellungen gelten nicht, wenn Sie ein Style-Sheet angeben.

Einfügen von Listen über den Listen-Dialog

Neben Tabellen werden auch häufig Listen zur Gliederung von Informationen genutzt.
Sie lernen jetzt, wie Sie eine Aufzählungs-Liste mit mehreren Einträgen erstellen können.
Der Listen-Dialog Platzieren Sie den Cursor unter der zuvor eingegebenen Beschreibung zum Link aus dem letzten Absatz und klicken Sie zum Einfügen einer Liste in der Button-Leiste: "Listen und Tabellen" den Button: 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:

<ul title="Dies finden Sie bei HomepageHelper.de" type="disc">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

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:

<td><a href="http://www.homepagehelper.de">HomepageHelper.de</a>
</td>
<td>HomepageHelper.de - die Seite für Webmaster
Hier finden Sie:<br>
  <ul title="Dies finden Sie bei HomepageHelper.de" type="disc">
   <li>Homepage-Tools wie Download-Counter und Formular-Dienste</li>
   <li>Homepage-Software</li>
   <li>Java-Applets</li>
   <li>Tipps und Tricks</li>
  </ul>
</td>

Schauen Sie sich das Ergebnis wieder in der Vorschau an.

Einfügen von Grafiken über den Grafik-Dialog

Grafiken machen Internetangebote interessanter. Ohne Grafiken werden Internetseiten leicht langweilig. Wichtig beim Einfügen von Grafiken in Internetseiten ist das passende Grafikformat und eine Begrenzung des Speicherplatzbedarfs damit das Laden der Internetseite später nicht zu lange dauert. Als Faustformel kann man sagen, dass das Gif-Format für Grafiken mit wenig Farbverläufen und einfarbigen Flächen eine gute Wahl ist, und das JPG-Format die erste Wahl ist, wenn es sich um Fotos oder Grafiken mit Farbverläufen handelt. In jedem Fall sollten die Grafiken nur wenige KB klein sein. Werte von über 20-40KB sollten die Ausnahme sein. Bei Screenshots ist es sinnvoll von jeder Grafik eine Vorschau-Version zu erstellen und die größere Original-Grafik als Link einzubinden. So wird die große Grafik erst dann geladen, wenn man auf die Vorschau-Grafik klickt.

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: Grafik einfügen
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.homepagehelper.de" 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:

<a href="http://www.homepagehelper.de"><img src="../../../../grafik/html-format1.gif" alt="(X)HTML-Format - a little bit better" border="0" width="200" height="70" style="float:right; margin-left:20px; margin-bottom:10px" /></a>

Schauen Sie sich das Ergebnis in der Vorschau an.

Hinweis:
(X)HTML-Format merkt sich das Verzeichnis in dem Sie zuletzt eine Grafik geöffnet haben. Wenn Sie das nächste mal den Grafik-Dialog öffnen ist das Grafik-Verzeichnis wieder voreingestellt.

CSS:
Es ist sinnvoll die von (X)HTML-Format erstellten CSS-Definitionen zum Text-Umfluss um die Grafik in eine CSS-Datei auszulagern. Lesen Sie dazu bitte das Tutorial 3 für Fortgeschrittene

Nutzung des Farb-Dialoges und der Farb-Historie

So, jetzt haben Sie es fast geschafft. Bleibt eigentlich nur noch die Button-Leiste "Farben" die noch zur alltäglichen Nutzung von HTML-Format gehört.
Da in Internetseiten oft mit Farben umgegangen werden muss, bietet HTML-Format eine sehr komfortable Unterstützung hierfür. Farben werden in HTML-Dokumenten in der Regel als Hex-Wert angegeben. Dieser setzt sich wie folgt zusammen:
#RRGGBB

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. Farb-Dialog 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: Farb-Dialog
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:

<font color="#000066">HomepageHelper.de</font>

Sie sehen, dass in der linken Farb-Historie in der Button-Leiste "Farben" Ihre gewählte Farbe als zuletzt genutzte Farbe zur Schnellanwahl gespeichert wurde. Diese Einstellung steht auch nach dem nächsten Programmstart zur Verfügung. So erhalten Sie einen Überblick über Ihre in der Internetseite genutzten Farben.
Um eine Farbe nachträglich zu ändern, selektieren Sie "Nur Hex-Wert" in der Button-Leiste und dann den Hex-Wert der zu ändernden Farbe inkl. "#" aber ohne Anführungszeichen im Quelltext. Öffnen Sie nun wieder den Farb-Dialog. Sie sehen, dass dort die Farbe eingestellt ist, die Sie im Quelltext markiert hatten. Wenn Sie die Farbe nun ändern und "OK" klicken, wird die Farbe im Quelltext geändert und die neue Farbe in die Farb-Historie aufgenommen!

Ausblick

Herzlichen Glückwunsch, Sie haben dieses Tutorial erfolgreich durchgearbeitet und sind nun in der Lage ihr eigenes Internetangebot mit (X)HTML-Format zu erstellen und zu warten.
Als Ergänzung empfehle ich Ihnen nun das Tutorial für Fortgeschrittene in dem Sie lernen, wie Sie mit (X)HTML-Format CSS Definitionen erstellen, sowie Formatierungs-Funktionen in Form von Code-Snippets nutzen und selber erstellen. Außerdem lernen Sie die Auto-Text-Funktion kennen und noch einige Details. Bevor Sie dieses Tutorial durcharbeiten, sollten Sie jedoch noch ein wenig mit HTML-Format arbeiten und die bisher nicht angesprochenen Funktionen einfach einmal ausprobieren.

Freundliche Grüße
  Christian Diekmann

 
Home | Impressum | Suchen | Unterstützung von HomepageHelper.de |
 
Copyright © 2001 - 2016 by Webmaster Tools von Stern Consulting GmbH
[an error occurred while processing this directive]