Layer

Genaue Platzierung mit Layern

Damit die Darstellung der Elemente auf Ihren Websites so erfolgt, wie es Ihren Vorstellungen entspricht, müssen wir uns ein paar Gedanken um die Platzierung machen. Ohne entsprechende Hilfsmittel kann die Darstellung der Inhalte je nach Browser und Bildschirmauflösung stark variieren. Um das zu minimieren, bietet sich der Einsatz von Tabellen oder besser Layern an. Layer sind nichts anderes als Ebenen. Die gesamte Webseite selbst können Sie sich als eine Ebene vorstellen.

Nun legen Sie weitere Layer darauf und können diese bei Bedarf auch verschieben. Zum Anlegen von Layern hat sich das <div> Tag etabliert. Drei Einstellungen sind relevant: position: absolute sorgt dafür, dass die Positionsangaben wie left und top von der Webseite ausgehen und nicht etwa von einem übergeordneten Element.

Fehlt diese Angabe, wird nichts aus dem Layer, denn der Eintrag erscheint dort, wo er als normales Element angezeigt werden würde. Mit width: und height legen Sie die Größe Ihres Layers fest. Ein Beispiel:

Es kann passieren, dass sich im Design Layer überlappen. Hier kommt der z-index ins Spiel. Mit diesem legen Sie fest, welcher Layer weiter vorne angezeigt wird. Je höher der z-Index ist, desto weiter steht er vorne, überlagert also vorherige Layer. Damit ein Layer nicht vollständig durch einen vorgelagerten Layer überdeckt wird, stellen Sie die Transparenz des Layers ein.

Hierfür gibt es den Tag opacity, den alle neueren Browsern unterstützen. Dabei entspricht der Wert 0 der vollen Transparenz und Wert 1 keiner Transparenz. Alle Werte dazwischen bestimmen die Durchsichtigkeit. Mit diesem Basiswissen geht es an den Einbau von Placeholdern auf der Masterpage.

Web Expression hat einen ContentPlaceHolder automatisch beim Erstellen der Masterpage in den Code eingefügt. Um diesen gleich zu Beginn der Programmierung an der richtigen Stelle auf der Masterpage zu verankern, wird der erste Layer hierfür definiert. Das geschieht unmittelbar nach dem Tag des Content Placeholders:

Auf der linken Seite der Masterpage soll ein Menü eingebaut werden. Damit die Platzhaltertechnik berücksichtigt wird, ergänzen Sie den Code um folgende Tags:

Das eigentliche Menü bauen Sie später über ein ASP.NET Steuerelement ein. Damit die Masterpage vervollständigt wird, benötigen Sie mindestens noch einen dritten Platzhalter für den Inhalt, der dann über die einzelnen Webseiten erstellt wird. Die Technik ist jetzt schon klar; legen Sie diesen Content Place Holder an folgende Position:

Jetzt haben Sie genügend Platz für die Eingabe von eigenen Inhalten geschaffen. Falls Sie einmal mehr Platzbedarf haben, erhöhen Sie einfach die width- und height-Werte für diesen Content Place Holder.

Einheitliche Elemente

Zum Erzeugen einheitlicher Elemente bietet sich ein Stylesheet an. Im einfachsten Fall beinhaltet es die Schriftart und die Schriftfarbe.

Das Stylesheet wird oberhalb des Formtags eingefügt und in den Content Place Holders angesprochen. Die Schriftart erhält die Klasse class="style1". Sie enthält in diesem Beispiel drei Variationen. Die erste gefundene der Schriftarten wird dargestellt. Ist keine dieser Schriftarten vorhanden, soll zur Anzeige eine Schriftart ohne Serifen benutzt werden. Die Schrittgröße soll 12 Punkte betragen. Dieser Style kann nach Bedarf erweitert werden. Zum Beispiel für Überschriften:

Die Schriftfarbe ist dabei dunkelblau. Sie können mit dem Stylesheet bei Bedarf alle auf Ihrer Site vorkommenden Elemente wir Tabellen, Listen usw. genau beeinflussen.