Galerie
6 Profitipps zur Webtechnik
Symbol in Tab- und Adressleiste: Favicons werden gerne als Markenzeichen einer Webseite eingesetzt.
Tipp 1: Logo in die Adressleiste des Browsers
Ein Logo ebenso wie signifikante Zeichen sind für den Wiedererkennungseffekt wichtig und steigern den Wert einer Webseite. Darum integrieren Webdesigner aussagekräftige Symbole auch gerne in die Tab- bzw. Adressleiste des Webbrowsers.
Zunächst erstellen Sie das gewünschte Bild in einer Größe von 16 mal 16 oder 32 mal 32 Pixel. Anschließend speichern Sie es im ICO-Format. Falls Ihr Grafikprogramm dieses nicht anbietet, verwenden Sie zunächst entweder das GIF- oder JPG-Format.
Hinterher ändern Sie im Explorer diese provisorische Dateiendung. Die fertige Datei sollte dann favicon.ico heißen. Das Bild integrieren Sie dann mit dem link-Element in den head-Bereich des jeweiligen HTML-Dokuments. Dabei geben Sie die Bildquelle mit dem href-Attribut an und definieren den entsprechenden Typ.
<link rel="shortcut icon"href="http://www.susanne-rupp.de/bilder/favicon.ico"type="image/ico" />
Ein Hinweis wird nicht immer überschrieben: JavaScript entfernt den Text, wenn der Nutzer in das Feld klickt.
Tipp 2: Eingabefelder mit Hinweis
Eingabefelder enthalten häufig Hinweise, die Anwender überschreiben sollten. Doch einige schreiben Ihren Suchbegriff einfach dahinter. So werden überflüssige Formulardaten gespeichert.
Mit einer kleinen JavaScript-Anweisung blenden Sie den anfänglich sichtbaren Hinweis aus, sobald der Anwender in das Formularfeld klickt. Zunächst definieren Sie mit HTML das Formularelement und geben mit dem value-Attribut den Anfangswert bzw. den zunächst sichtbaren Hinweis an: <input id="textfeld" type="text" value="Suche nach..." /> Anschließend bestimmen Sie mit dem Ereignis onFocus, dass beim Aktivieren des Textfeldes der vorgegebene Hinweis entfernt wird: onFocus="if (this.value=='Suche nach...') this.value=''".
Falls der Anwender es sich anders überlegt und doch keine Informationen eingibt, stellen Sie mit dem Event-Handler onBlur der Ausgangszustand wieder her: onBlur="if (this.value=='')this.value='Suche nach...'".
Formulare als Inline-Element: Der Browser platziert nachfolgende Elemente dahinter.
Tipp 3: Seiteninhalte hinter Formulare setzen
Formulare und Eingabefelder für die Online-Suche sind Block-elemente. HTML 4 erzwingt dafür einen Zeilenumbruch und ordnet nachfolgende Elemente darunter an. Das CSS-Attribut display ändert dies.
Um neben einem Formular weitere Seiteninhalte zu platzieren, genügt es nicht, wenn Sie die Elementbreite mit width beschränken. Vielmehr müssen Sie dieses Blockelement in ein Inline-Element umwandeln. Wie der Name schon sagt, werden Inline-Elemente innerhalb einer Zeile positioniert. Hierzu weisen Sie dem Formular das display-Attribut mit dem Wert inline zu. Beispielsweise definieren Sie zu diesem Zweck einen Inline-Stil. Damit wird das Formular zum Inline-Element ohne nachfolgenden Zeilenumbruch.
<form id="Formular" method="post" action="" style="display: inline;">
...</form> Dieser Text steht inline, direkt hinter dem Formular.
Halbtransparente Box auf einem Bild: Der Hintergrund ist hier auch hinter der Box sichtbar.
Tipp 4: Elemente transparent überlagern
Mit CSS positionieren Sie Textblöcke, Bilder und anderes. Bei Überlappungen entstehen dreidimensionale Effekte. Definieren Sie mit dem CSS-Attribut opacity oder mit dem Alpha-Filter Transparenz und verzichten Sie auf JavaScript.
Eins sei vorweg betont: Keine CSS-Variante wird von allen Browsern unterstützt. Der Alpha-Filter wird nur vom Internet Explorer ab der Version 4.0 interpretiert. Mozilla-Browser unterstützen dagegen das CSS-Attribut opacity. Definieren Sie beide Eigenschaften oder konditionale Kommentare, so erzielen Sie die besten Ergebnisse.
Angenommen Sie haben eine div-Box, der die ID inhalt zugewiesen ist, über einem Bild platziert. Damit das Bild auch hinter dem Container sichtbar ist, definieren Sie eine CSS-Anweisung für den ID-Selektor. Dabei bestimmen Sie mit filter einen Alpha-Wert zwischen 0 (völlige Unsichtbarkeit) und 100 (keine Transparenz).
Gleichzeitig bezieht sich der Filter nicht nur auf die Hintergrundfarbe oder das Hintergrundbild, sondern auch auf andere Element-Attribute, wie beispielsweise Rahmen oder Schriftfarbe. Mit folgendem Listing ist die Box halbtransparent, wie dies auch das obige Bild verdeutlicht. Beachten Sie bitte, dass der Internet Explorer den Alpha-Filter interpretiert: #inhalt { filter: alpha(opacity=50); }. Das CSS 3-Attribut opacity ist dagegen eine standardisierte CSS-Lösung, die alle modernen Browser interpretieren.
Lediglich der Internet Explorer kennt dieses Attribut nicht. Dabei liegen die opacity-Werte zwischen 0.0 und 1.0. Während Sie mit 0.0 ein Seitenelement verbergen, definiert das Maximum die völlige Sichtbarkeit. Auch bei diesem Attribut werden die Boxinhalte sowie weitere Element-Eigenschaften transparent eingestellt. Dies kann nicht durch eine weitere CSS-Regel oder den Zusatz !important überschrieben werden. Mozilla kennt dieses Transparenz-Attribut, nicht jedoch der IE: #inhalt { opacity: 0.5; } Die Transparenz von Bildern speichern Sie auch in den Dateiformaten GIF und PNG.
Den Schattenwurf definieren Z-Index und Hintergrundfarbe: Mit CSS-Boxen und Hintergrundfarben realisieren Sie 3D-Effekte.
Tipp 5: Rechteckige Elemente mit Schattenwurf
Dreidimensionale Effekte entstehen durch einen Schattenwurf. Sie brauchen keine Bilder, wenn Sie mit CSS eine div-Box definieren und diese hinter dem vorderen Seitenelement platzieren und eine geeignete Hintergrundfarbe bestimmen.
Zunächst positionieren Sie das Element auf der Webseite, dem Sie einen Schatten zuweisen möchten. Dies kann entweder eine div-Box, ein Bild oder ein anderes Blockelement sein <imgsrc="johannis.jpg" width="232" height="281" id="bild"/>. Anschließend platzieren Sie dahinter einen neuen div-Container, den Sie mit geeigneten Positionswerten (left, top) leicht versetzt anordnen.
Zudem sollte dieser Container etwa die gleiche Größe wie das Element im Vordergrund haben. Diesem weisen Sie dann die gewünschte Schattenfarbe mit dem CSS-Attribut background zu. Der absolute positionierte Container hat sodann die Hintergrundfarbe:
<style type="text/css">
#schatten { position: absolute;
height: 281px; width: 232px; left: 40px; top: 37px;
background: #666;
z-index: 5; }
</style>...
<div id="schatten"></div>
Wichtig ist nun die Stapelreihenfolge beziehungsweise die Anordnung dieser beiden Elemente innerhalb der Webseite. Diese Abfolge definieren Sie mit dem Z-Index. Dabei erhält das Element im Vordergrund einen größeren Z-Wert als die Schattenbox im Hintergrund.
Beachten Sie bitte den Tipp: Die für den Z-Index verwendeten Werte müssen nicht aufeinander folgen. Sinnvoll ist vielmehr, wenn Sie hier einen gewissen Abstand einhalten. Damit können Sie später weitere Seitenelemente auf zusätzlichen Ebenen dazwischen setzen und in die Webseite einfügen.
6 Profitipps zur Webtechnik
Tipp 6: Hintergrund in Rahmenlücken bestimmen
Bei einem gestrichelten oder gepunkteten dicken Rahmen sehen Sie in den Zwischenräumen standardmäßig den Hintergrund. Ein CSS-Attribut bei Firefox und anderen Mozilla-Browsern spart Zwischenräume aus.
Zunächst definieren Sie wie gewohnt das gewünschte Block-Element in HTML. Dies kann beispielsweise ein div-Container sein. Anschließend weisen Sie diesem Seitenelement die gewünschten CSS-Attribute zu. Im gezeigten Beispiel wird der Hintergrund der div-Box durch ein Bild aufgefüllt.
Alternativ können Sie natürlich auch eine Hintergrundfarbe wählen background: #FF9 url(schmetterling.jpg);. Mit der CSS Eigenschaft -moz-background-clip definieren Sie für die Mozilla-Browser den gewünschten Abstand mit dem Wert padding.
In Zukunft soll das Browser unabhängige CSS-Attribut background-clip mit dem Wert padding-box diesen Abstand festlegen. Zurzeit wird dieses Attribut jedoch von keinem Browser unterstützt und dargestellt. Die Standardeinstellung ist dagegen identisch mit folgenden CSS-Anweisungen: -moz-background-clip: border; background-clip: border-box;<style
