Wie Erstelle Ich Eine Gummikappe?

Inhaltsverzeichnis:

Wie Erstelle Ich Eine Gummikappe?
Wie Erstelle Ich Eine Gummikappe?

Video: Wie Erstelle Ich Eine Gummikappe?

Video: Wie Erstelle Ich Eine Gummikappe?
Video: Kostenlose Website erstellen und hosten (Tutorial) 2024, November
Anonim

Der obere Teil der Site, der auch als Header bezeichnet wird, spiegelt normalerweise das Thema der Ressource wider und kann eine Navigationsleiste enthalten. Wenn der Site-Header eine bestimmte Breite hat, sieht dieser Teil der Site auf den Bildschirmen von Benutzern mit unterschiedlichen Auflösungen anders aus. Damit der Site-Header auf jedem Bildschirm gleich aussieht, müssen einige Abschnitte je nach Bildschirmgröße gedehnt oder verkleinert werden. Eine solche Gummikappe kann hergestellt werden, ohne ihre Breite in Pixeln festzulegen.

Wie erstelle ich eine Gummikappe?
Wie erstelle ich eine Gummikappe?

Notwendig

eine eigene Website haben

Anweisungen

Schritt 1

Um eine Gummikappe herzustellen, zeichnen Sie sie zuerst in Photoshop. Trennen Sie dann 3 Teile des Bildes: 2 Seiten und die Mitte. Diese Stücke sollten ungefähr 10-20 Pixel breit sein und ungefähr die Höhe der gewünschten Kopfzeile haben. Speichern Sie jedes Element, sodass Sie 3 verschiedene Dateien haben: 1.gif, 2.gif, 3.gif. Senden Sie diese Bilder an die Website.

Schritt 2

Erstellen Sie als Nächstes eine Tabelle, die die Elemente oben auf der Site enthält. Schreiben Sie dazu in den HTML-Code:

Eine Tabelle mit einer Breite von 100 % dehnt oder schrumpft je nach Bildschirmgröße des Benutzers.

Schritt 3

Machen Sie eine Zeile in der Tabelle, in deren Zelle die linke Seite des 1.gif-Site-Headers platziert wird:

Schritt 4

Erstellen Sie einen mittleren Abschnitt des Site-Headers, der aus einem sich wiederholenden 2.gif-Bild besteht. Schreiben Sie dazu Folgendes in Ihren CSS-Code:

.header {Hintergrundbild: url ('images / 2.gif');}

Schritt 5

Erstellen Sie nun in einer Zeile der Tabelle eine weitere Zelle und platzieren Sie das mittlere Element oben auf der Site darin, indem Sie auf den Namensheader im CSS-Code zeigen:

Name der Website

>

Schritt 6

Nachdem Sie die dritte Zelle in der Tabellenzeile erstellt haben, platzieren Sie die rechte Seite des 3.gif-Site-Headers in dieser Zelle:

Name der Website

Empfohlen: