Verwende unsere Suchfunktion
Impressum und Datenschutz
Die NOF-Schule | Startseite
Zum NOF-Forum
trennlinie-im-NOF-Projekt

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:

BGstreifen1

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:

BGstreifenschnipsel

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.

Formatvorlage-Hintergrundstreifen

Formatvorlage-Hintergrundstreifen1

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.

pfirsich-vorschau

Wenn ich dieses Ergebnis erzielen möchte, muss ich folgende Bilder ausschneiden:

BGstreifen-inhalte-header

Inhalte-Header

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:

hintergrund-ober-links

Der Lichtstrahl endet dort, wo die Hintergrundfarbe beginnt.

Die Einstellungen werden wie oben vorgenommen und sehen in diesen Fall wie folgt aus:

hintergrund-ober-links-formatvorlage

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

hintergrundfarbe

Und dies ist die Grafik dazu (hier stark verkleinert):

bild-im-hintergrund-zentriert

Die Einstellungen im Haupttext/Body sehen wie folgt aus:

bild-im-hintergrund-zentriert-formatvorlage

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.


Farbpalette-NOFEs 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..




Nächste Seite

Seite drucken