So Erstellen Sie Einen Gummi-Header Für Eine Website

Inhaltsverzeichnis:

So Erstellen Sie Einen Gummi-Header Für Eine Website
So Erstellen Sie Einen Gummi-Header Für Eine Website

Video: So Erstellen Sie Einen Gummi-Header Für Eine Website

Video: So Erstellen Sie Einen Gummi-Header Für Eine Website
Video: Chrysalis - Header and Menus Walkthrough 2024, November
Anonim

Bei der Erstellung einer Website im Internet ist einer der wichtigsten Punkte, die ein Entwickler berücksichtigen muss, deren Funktionalität, Vielseitigkeit und Leistung. Damit die Site in jedem Browser auf Computern mit einer Vielzahl von Bildschirmauflösungen vollständig und korrekt angezeigt wird, können Sie einen praktischen "Rubber"-Header erstellen, der aus mehreren grafischen Elementen besteht.

So erstellen Sie einen Gummi-Header für eine Website
So erstellen Sie einen Gummi-Header für eine Website

Anleitung

Schritt 1

Öffnen Sie im ersten Schritt zum Erstellen eines solchen Headers für eine Website in Photoshop das Bild, das Sie bereits für die Veröffentlichung im Web vorbereitet haben, und schneiden Sie es dann mit dem Slice-Tool in der Symbolleiste in Stücke. Schneiden Sie die Kopfzeile so, dass der mittlere Teil leer ist, sodass Sie am Ende drei grafische Elemente haben. Dadurch kann die Kopfzeile für jede Bildschirmauflösung gestreckt werden.

Schritt 2

Nachdem Sie die Kopfzeile ausgeschnitten haben, speichern Sie sie, indem Sie die Dateien beim Speichern für das Webformat optimieren (Für Web speichern). Legen Sie das gewünschte Dateiformat zum Speichern fest, z. B. gif, jpeg oder png. Um jedes Bildfragment zu ändern, klicken Sie im Menü auf die Option Slice Select Tool und ändern Sie die Größe der Bilder so, dass ihre Größe so klein wie möglich ist und die Qualität der visuellen Anzeige des Bildes auf dem Bildschirm so gering wie möglich ist. Speichern Sie Ihre bearbeiteten Bilder als HTML und Bilder.

Schritt 3

Nachdem die Bilder gespeichert wurden, bearbeiten Sie den HTML-Code, indem Sie das gespeicherte HTML-Dokument mit Notepad öffnen. Löschen Sie im Editor alle unnötigen Codezeilen. Lassen Sie nur die notwendigen Zeilen - Daten über die Tabelle, in die Ihre Bilder eingebettet sind:

Schritt 4

In diesen Zeilen sollte anstelle von yourimage

Schritt 5

Damit sich der mittlere Teil des Bildes dehnt und die extremen Bilder zu den Seiten spreizt, schreiben Sie die entsprechenden Codeattribute in die Zeilen. Geben Sie Ihre eigenen Breiten- und Höhenparameter im Code an.

Schritt 6

Laden Sie die generierten Headerbilder in das Stammverzeichnis Ihrer Site hoch und bearbeiten Sie dann den HTML-Code mit neuen Pfaden zu den Headerbildern auf dem Server. Fügen Sie den Header-Code zwischen den Tags ein.

Empfohlen: