Hintergründe für die Website mit Netobjects Fusion
Inhalte
- Hintergrund mit Querstreifen/-Balken
- Hintergrund mit Grafik oben links
- Hintergrund mit fest positionierter Grafik in der Mitte
Hintergrund mit Querstreifen/-Balken
Grafik erstellen
Folgende Grafik zeigt, wie der Hintergrund der Website für alle Seiten aussehen soll:
Da obige Ansicht stark verkleinert ist, zeigen wir hier den Hintergrund in Browsergröße.
Dieser Hintergrund wurde mit einem Grafik-Programm erstellt. Im Grafik-Programm schneiden wir den Hintergrund-Schnipsel aus. Das Ergebnis:
Grafik in NOF einbinden
Da der Hintergrund für alle Seiten gelten soll, wird er im Design einmalig voreingestellt. Wir öffnen also die Design-Ansicht, suchen im Menü unter “Design” > “Formatvorlagen verwalten” nach den Design-Einstellungen für den Haupttext/Body. Folgende Bilder erläutern den Vorgang.
Anmerkung: Ab Version 11 (aktuell NOF 2015) ist der Menü-Punkt nicht mit “Design” sondern als “Formatvorlage” bezeichnet.
In der Formatvorlage (Haupttext/Body) stelle ich als Hintergrundfarbe der Gesamthintergrund: #F6B9BF.
Ebenfalls suche ich mir den Grafikschnipsel aus und binde ihn als Hintergrundgrafik ein. Position: Links, Wiederholung: Horizontal.
Jetzt sind die wichtigsten Einstellungen erfolgt. Der Hintergrund wiederholt sich automatisch und unendlich horizontal, unabhängig von der Bildschirmgröße des Betrachters.
Passende Objekte im Banner einfügen
In meinem Beispiel befinden sich auch dekorative Elemente im Banner. Diese Elemente wurden im Grafik-Programm erstellt und anschließend für die Website ausgeschnitten und optimiert.
Wenn ich dieses Ergebnis erzielen möchte, muss ich folgende Bilder ausschneiden:
Nun zeichne ich im oberen Masterrahmen der Website einen großen Layoutbereich. Die zwei Bilder (Deko und Schriftzug) platziere ich direkt an gewünschter Stelle im Layoutbereich.
Bei der heutigen Internetgeschwindigkeit werden Grafiken zunehmend mit transparentem Hintergrund erstellt. Sollte eine transparente Leinwand ausgewählt werden, so werden die Grafiken als transparente .pngs gespeichert (png 24).
Die Arbeit mit Layoutbereichen wird hier erklärt:
NOF-Werkzeug Layoutbereich im Blog
Hintergrund mit Grafik oben links
Die Einbindung einer Grafik seitlich im Hintergrund erfolgt nach dem gleichen Prinzip. Wir benötigen eine Hintergrundgrafik und eine Hintergrundfarbe.
Ich wähle diese Grafik aus:
Der Lichtstrahl endet dort, wo die Hintergrundfarbe beginnt.
Die Einstellungen werden wie oben vorgenommen und sehen in diesen Fall wie folgt aus:
Hintergrund mit fester Grafik in der Mitte
Der Hintergrund ist einfarbig, mittig soll aber eine Grafik eingebunden werden.
Die Hintergrundfarbe wird wie oben beschrieben definiert:
In der Formatvorlage (Haupttext/Body) stelle ich als Hintergrundfarbe der Gesamthintergrund: #4A599E
Und dies ist die Grafik dazu (hier stark verkleinert): 
Die Einstellungen im Haupttext/Body sehen wie folgt aus:
Weitere Hinweise
Sollte die Grafik anders positioniert werden (nach obigen Angaben ist sie immer zentriert), so kann man mit den Einstellungen (Wert in px oder %) spielen, bis die richtige Position erreicht wurde. Die automatische Position der Hintergrundgrafiken ist oben links, Koordinate x:0 und y:0.
Es ist nicht möglich, mehr als eine Grafik als Hintergrund im Design einzubinden. Mit der Hilfe von divs lässt sich einiges lösen, der Versuch ist aber nur fortgeschrittenen Benutzern zu empfehlen.
Für die Verwendung verschiedener Hintergründe innerhalb eines NOF-Projektes gibt es Einschränkungen. Man kann zwar durch die Verwendung verschiedener Masterrahmen verschiedene Hintergrund-Grafiken sowie -Farben verwenden (Einzustellen in den Layout-Eigenschaften), aber die Ausrichtung der Grafik lässt sich nicht beeinflussen. Die Einstellungen des Designs (Haupttext-Body) werden immer übernommen..
Zuletzt geändert am 23/05/18 12:06
