www.BuntesWeb.de - Computer & Internet

Das Homepage-Handbuch speziell für blutige Anfänger

Spezielle Elemente einer Webseite - Ebenen

Grundsätzliches über Ebenen

Vom sog. 'Desktoppublishing' (DTP) her kenn man frei verschiebbare Flächen, mit deren Hilfe man Textabschnitte oder Bilder nach herzenslust auf dem Arbeitsblatt anordnen kann. Damit dies auch auf HTML-Seiten möglich ist, hat Netscape zusammen mit Version 4 des Netscape-Browsers einen neues HTML-Tag eingeführt: <layer>. Man spricht daher auch heute noch von Layern. Allerdings verwendet man nicht mehr das alte Tag, sondern bildet u.a. diese Funktion als frei und pixelgenau positionierbare Fläche nach mit dem Tag <div> und entsprechenden CSS-Attributen.

Zu deutsch nennen wir diese Layer nun 'Ebenen'. Es eröffnen sich damit phantastische Möglichkeiten, um Bilder, Texte und sonstige Objekte auf der Webseite zu positionieren. Der Anfänger - soweit er über einen WYSIWYG-Editor wie Namo WebEditor verfügt - freut sich darüber, dass er keine komplizierten und starren Layouttabellen erzeugen muss und statt dessen einfach alles mit der Maus dorthin schiebt, wo er es haben will. Der Profi kann die Positionierung automatisieren und die Eigenschaften in einem zentralen Stylesheet organisieren.

Die Grundform einer Ebene

In ihrer Grundform ist die Ebene dem Netscape-Layer am ähnlichsten. Man hat also eine Fläche, die frei über dem restlichen Seiteninhalt schwebt. Diese Fläche kann man wie eine Miniwebseite auf dem HTML-Dokument ansehen. Man kann Texte, Bilder und sonstige Objekte in die Ebene einfügen. Man kann der Ebene eine Hintergrundfarbe oder ein Hintergrundbild geben. Lässt man den Hintergrund undefiniert, dann ist die Ebene durchsichtig. Sie ist auf der HTML-Seite frei verschiebbar. Sie kann dabei auch Bilder, Texte und andere Objekte überlappen. Der Schriftzug "EBENEN" am linken Rand diesers Textes wurde ebenfalls mittels Ebenen erzeugt. Jeder Buchstabe befindet sich in einer eigenen Ebene und kann daher einzeln verschoben werden.

Eine Ebene erstellen

Mit Namo WebEditor fügt man eine Ebene wie folgt in eine HTML-Seite ein:

1. Bringen Sie die Schreibmarke an eine freie Position im Dokument. Dies muss nicht unbedingt die Stelle sein, an der sich die Ebene später befinden soll. An dieser Stelle wird lediglich der Ursprung der Ebene (das DIV-Tag) eingefügt. Es empfiehlt sich eigentlich, dass man irgendwo am Ende der Seite etwasPlatz für Ebenen reserviert und nur dort die Ebenen einfügt.

2. Verschieben Sie die Ebene mit der Maus an die gewünschte Position. Doppelklicken Sie ggf. auf den Ebenenrand, um die Ebeneneigenschaften aufzurufen. Dort können Sie die genaue Position und Größe der Ebene als Zahlenwert eingeben und evtl. eine Hintergrundfarbe oder ein Hintergrundbild für die Ebene auswählen.

Die gebräuchlichsten Ebeneneigenschaften im Überblick

• Ebenen-ID:
  Geben Sie der Ebene einen Namen. Daran können Sie selbst die Ebene später identifizieren. Gewisse JavaScript-Effekte können dann ggf. ebenfalls auf die Ebenen-ID zurückgreifen. Für blutige Anfänger noch nicht ganz relevant ist auch die Definition der CSS-Eigenschaften pro ID.
• Position:
  Sie können die Position der Ebene (linke obere Ecke) in Pixeln gemessen vom oberen linken Seitenrand angeben. Sie können sich dabei aber auch auf den unteren, bzw. auf den rechten Seitenrand beziehen. Außerdem ist es möglich, die Positionsangabe zu unterlassen, wodurch sich die Ebene an ihrem Ursprungs-Tag orientiert.
• Größe:
  Die Abmessungen der Ebene müssen immer ausreichen, um den Inhalt zu fassen. Darüber hinaus können Sie die Größe aber frei bestimmen.
• Hintergrundbild:
  Die Ebene ist im Normalfall durchsichtig. Alles was man sieht sind die Objekte, die in die Ebene eingefügt wurden. Allerdings können Sie der Ebene eine Hintergrundfarbe bzw ein Hintergrundbild geben. Dadurch wird die gesamte Fläche der Ebene sichtbar.
   

Positionierung einer Ebene

Das besondere Erkennungszeichen der Ebene, so wie sie von Namo WebEditor erstellt und erkannt wird ist die absolute Positionierung. Standardmäßig wird bei der Positionierung einer solchen Ebene vom linken oberen Seitenrand aus gemessen bis zur linken oberen Ecke der Ebene.

In der Regel werden sowohl die Größe der Ebene als auch ihre Position - also jeweils der Abstand zum linken Seitenrand und der Abstand zum oberen Seitenrand - in Pixeln angegeben.  Außerdem kann man auch bestimmen, dass sich die Angaben nicht auf den linken, sondern auf den rechten Seitenrand beziehen - bzw. nicht auf den oberen, sondern auf den unteren Seitenrand. Normalerweise wird der Namo-Anwender die Ebene aber einfach mit der Maus an die gewünschte Stelle ziehen. Anders ist das, wenn man die Positionsangaben einfach weglässt, wodurch die Ebene wie ein Bild einfach dort eingefügt wird, wo sich die Schreibmarke grade befindet. Eine solche Ebene ist nicht mehr frei verschiebbar. Alle anderen Ebeneneigenschaften bleiben aber erhalten.

Im HTML-Code sieht eine Ebene z.B. wie folgt aus:

Gemessen vom linken oberen Seitenrand:

  <div id="layer1" style="width:200px; height:200px; position:absolute; left:200px; top:200px;">
     Inhalt der Ebene
  </div>

Gemessen vom rechten unteren Seitenrand:

  <div id="layer2" style="width:200px; height:200px; position:absolute; right:200px; bottom:200px;">
     Inhalt der Ebene
  </div>

Oder Positionsangabe weglassen; Ebene wird am Ort ihres Ursprungs positioniert:

  <div id="layer3" style="width:200px; height:200px; position:absolute;">
     Inhalt der Ebene
  </div>
 

Nur für CSS und HTML erfahrene Anwender:
Style-Attribute auslagern in externes Stylesheet

Der Profi kennt noch einige andere Möglichkeiten. So z.B. auch die relative Positionierung oder Positionierung mit Prozentwerten statt Pixeln. Namo WebEditor erkennt aber im WYSIWYG-Editor nur Ebenen mit absoluter Positionierung. Immerhin kann man als fortgeschrittener Namo-Anwender die im "style"-Teil angegebenen CSS-Attribute auch in den Seitenkopf oder in ein externes Stylesheet verlegen. Namo WebEditor begnügt sich dann mit der Angabe <div id="name">. Dazu ist es allerdings erforderlich, das Stylesheet und und die Modifikationen im HTML-Code von Hand anzulegen. Im folgenden sehen Sie ein Beispiel für diese Vorgehensweise. Bedenken Sie dabei, dass Namo WebEditor das nicht mehr direkt unterstützt. Im WYSIWYG-Modus kann man das nicht (oder mit Klimmzügen teilweise) bewerkstelligen. Namo zeigt es schließlich korrekt an. Sie dürfen aber im WYSIWYG-Modus nicht daran 'herumfummeln', sonst setzt Namo den CSS-Code wieder in den HTML-Code der Ebene ein. Dies ist also wirklich nur etwas für erfahrene Webdesigner. Ich will es aber trotzdem erwähnen, weil z.B. auch das Layout von BuntesWeb.de auf dieser Technik basiert.

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<body>
<div id="navigation">
Inhalt der Ebene, z.B. Navigationsbuttons
</div>
<div id="hauptfenster">
Inhalt der Ebene, z.B. Inhalte der Seite
</div>
</body>
</html>

Theoretisch könnte man auch Klassen verwenden, aber damit Namo WebEditor die Ebene erkennt, muss eine ID vorhanden sein. Das externe Stylesheet enthält dann also die Angaben zur Größe und Position der Ebenen. Und da man sich der ID der Ebenen bedient, wird der ID-Name im Stylesheet mit # eingeleitet.

#navigation {
  width:180px; height:200px;
  position:absolute; left:5px; top:100px;
  z-index:1;
  background-color:silver; }

#hauptfenster {
  width:640px; height:auto;
  position:absolute; left:5px; top:100px;
  z-index:1;
  background-color:white; }
 Blabla

---

Damit haben wir die Ebenen kurz und bündig abgehandelt.
Im nächsten Kapitel geht es um Multimedia - also um animierte Grafiken, Musik und Video
 

Seitenanfang || www.BuntesWeb.de - Startseite | Stichwortverzeichnis | Impressum