Gute Vorlage

Layer

Genaue Platzierung mit Layern

image.jpg

© Hersteller/Archiv

Der Menüelement-Editor erlaubt das komfortable Anlegen von Menüpunkten zu Unterseiten.

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:

<div style="position: absolute; left:
100px; top: 200px; width: 200px; height: 400px;"><p>Hier steht der eigentlich Inhalt des
Layers</p></div>

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.

image.jpg

© Hersteller/Archiv

Test der Seiten mit den Elementen des Corporate Designs im Standard-Browser (hier: Firefox)

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:

<div style="position: absolute; width:
716px; height: 48px; z-index: 1; left: 10px; top: 15px" id="Ebene1"><h1>Corporate Design mit Layern</h1></
div>

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:

<asp:ContentPlaceHolder runat="server"
id="ContentPlaceHolder2"><div style="position: absolute; width:
300px; height: 150px; z-index: 2; left: 12px; top:73px" id="Ebene2">
Platzhalter Menü</div></
asp:ContentPlaceHolder>

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:

width: 600px; height: 700px; z-index:
3; left: 313px; top:73px
id="Ebene3"

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.

<style type="text/css">
.style1 {font-family: Arial, Helvetica,
Sans-Serif; color: #0000FF; font-size: 12 pt; } </style>

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:

h1,h2, { font-family: verdana, helve
tica, arial, sans-serif;color:#003366;}
h1 { font-size: 20pt; }
h2 { font-size: 16pt; }

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…