So Legen Sie Einen Hintergrund Für Eine Website Fest

Inhaltsverzeichnis:

So Legen Sie Einen Hintergrund Für Eine Website Fest
So Legen Sie Einen Hintergrund Für Eine Website Fest

Video: So Legen Sie Einen Hintergrund Für Eine Website Fest

Video: So Legen Sie Einen Hintergrund Für Eine Website Fest
Video: HTML & CSS Tutorial für Anfänger 30 -- Hintergrundbild einfügen 2024, Kann
Anonim

Das Design jeder Site basiert auf Hintergrundbildern und -farben, wie ein Haus auf einem Fundament. Wenn Sie das typische Fundament Ihrer Internetressource durch etwas Individuelleres ersetzen möchten, sollten Sie mit der Entwicklung des Designs beginnen. Und wenn es fertig ist, bleibt der rein technische Teil bestehen, dh das alte Design des im Quellcode der Seiten angegebenen Site-Hintergrunds durch das neue zu ersetzen. Es gibt mehrere Möglichkeiten, dies in der Praxis umzusetzen.

So legen Sie einen Hintergrund für eine Website fest
So legen Sie einen Hintergrund für eine Website fest

Anleitung

Schritt 1

Zuerst müssen Sie herausfinden, auf welche Weise der Hintergrund in der aktuellen Version der Site eingestellt wird. Öffnen Sie dazu den HTML-Code der Seite. Sie können dies mit einem einfachen Texteditor tun, indem Sie die Datei im Voraus vom Server herunterladen. Oder Sie nutzen den Editor der Seiten des Content-Management-Systems, falls Sie eines verwenden. Der Seiteneditor erfordert keinen Download der Datei, sondern modifiziert sie direkt auf dem Server über den Browser als Schnittstelle Der HTML-Code (HyperText Markup Language) der Seite, die Sie öffnen, besteht aus Anweisungszeilen für den Browser. Sie beschreiben die Typen, das Aussehen und die Position jedes der Elemente einer Webseite. Diese Anweisungen werden allgemein als "Tags" bezeichnet. Die Reihenfolge der Tags selbst im Seitencode folgt ebenfalls den Regeln der HTML-Sprache – sie sind in Blöcke unterteilt, von denen der erste ein Überschriftsblock sein muss, der mit einem Tag beginnt und endet. Darauf sollte der Block folgen, der Sie jetzt mehr interessiert - der Textkörper des Dokuments. Es ist auf Tags und beschränkt. In das öffnende Tag dieses Blocks () können Sie Informationen zum Hintergrund der Seite einfügen. Solche Informationen innerhalb von Tags werden "Attribute" genannt. Das Attribut des body-Tags, das die Hintergrundfarbe festlegt, wird als bgcolor bezeichnet und könnte im Code so aussehen: Hier setzen wir die Hintergrundfarbe für die Seite auf silber. Der Browser kann einige der Farben an ihren Namen erkennen, aber um sich nicht zu verwechseln, ist es besser, ihre hexadezimalen Codes anzugeben. Diese Version mit silberner Farbe im hexadezimalen Ausdruck sieht so aus: Sie müssen also das mit <body beginnende Tag im Seitencode suchen und prüfen, ob es eine Hintergrundfarbe hat. Ersetzen Sie in diesem Fall die darin enthaltene Farbangabe durch Ihre neue Version und speichern Sie die Änderungen auf der Seite.

Schritt 2

Der Hintergrund im aktuellen Design Ihrer Site kann nicht durch Farbe, sondern durch ein Bild festgelegt werden. Das entsprechende Attribut des body-Tags heißt background und kann im Code so aussehen: Hier ist der Hintergrund das bg.jpg-Bild aus dem img-Ordner Ihres Servers. Wenn dieses Attribut vorhanden ist, ersetzen Sie den Bilddateinamen durch den Namen des neuen Bildes und denken Sie daran, es auf den Server hochzuladen. Wenn Sie das Bild durch eine Farbe ersetzen möchten, ersetzen Sie das background-Attribut durch das bgcolor-Attribut, das wir beschrieben haben über.

Schritt 3

Wenn Sie das Aussehen von Seiten mit relativ komplexem Design beschreiben, verwenden Sie "Cascading Style Sheets" - CSS (Cascading Style Sheets). CSS-Codeblöcke können direkt in den Seitencode eingebunden oder in einer externen Datei mit der Erweiterung „css“enthalten sein. Sie müssen nach dem Style Description-Tag suchen, das mit <style im Header-Teil des Seitencodes beginnt (zwischen den und -Tags). Wenn es einen Link zu einer externen Datei enthält, sieht es ungefähr so aus: @import "style.css"; Hier ist ein Link zu einem Stylesheet namens style.css. Sie müssen die angegebene Datei zum Bearbeiten öffnen. Und wenn kein Link vorhanden ist und nach dem öffnenden <style-Tag Stilanweisungen stehen, müssen Sie diese hier bearbeiten. In beiden Optionen müssen Sie unter den Beschreibungen von Stilen nach solchen suchen, die sich auf den Textkörper des Dokuments (Textkörper) beziehen. Dieser Beschreibungsblock kann wie folgt aussehen: body {

Hintergrundfarbe: Silber;

Farbe: Schwarz;

} Hier müssen Sie den Wert des Parameters background-color durch den Wert Ihrer neuen Farbe ersetzen und besser in den gleichen hexadezimalen Werten. Die Hintergrundbildoption in den CSS-Anweisungen sollte wie folgt aussehen: body {

Hintergrund: # C0C0C0 url (img / bg.jpg) repeat-y;

Farbe: Schwarz;

} Hier ist der Link zum Bild ähnlich dem oben besprochenen, und # C0C0C0 vor dem Link bedeutet, dass der Seitenbereich, der nicht vom Hintergrundbild eingenommen wird, einen silbernen Hintergrund hat. "Repeat-y" gibt an, dass das Hintergrundbild entlang der Y-Achse (vertikal) multipliziert werden soll."Repeat-y" kann durch "repeat-x" (horizontale Replikation) oder "no-repeat" (nicht replizieren) ersetzt werden. Wenn Sie die Wiederholung gar nicht angeben, wird das Hintergrundbild in alle Richtungen an den Hintergrundbereich der Seite gekachelt.

Empfohlen: