|
|
Hintergründe für die Website mit Netobjects Fusion
|
1. Hintergrund mit Querstreifen/-Balken
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:
|
|
|
|
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: In der Version NOF11 ist der Menü-Punkt nicht mit “Design” sondern als “Formatvorlage” bezeichnet.
|
|
|
|
Jetzt sind die wichtigsten Einstellungen erfolgt. Der Hintergrund wiederholt sich automatisch und unendlich horizontal, unabhängig von der Bildschirmgröße des Betrachters.
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:
|
|
|
|
Die Banner-Grafiken werden in der Seiten-Ansicht in Tabellenzellen mit der Hilfe der Format-Funktion genau positioniert. Zu diesem Zweck zeichne ich eine Tabelle im Masterrahmen mit zwei Zeilen und zwei Spalten. Später werde ich die rechte obere Zeile für eine Navigationsleiste verwenden.
Die zwei linken Zeilen verbinde ich zu einer Zelle. Dorthin platziere ich das Pfirsich-Bild. Rechts unten die vorbereitete Bannerschrift.
Für die Positionierung habe ich in den Zelleneigenschaften die Zellen-Ausrichtung auf “vertikal > unten” eingestellt und in den Zelleneigenschaften unter “Format” > “Rahmen” die Abstände justiert, bis die Position exakt gestimmt hat.
|
|
Diese Seite zeigt die Aufteilung der Tabelle im Masterrahmen.
Achtung: Für alle NOF-Anfänger und erfahrene User: Für die Definition von Hintergründen, Schriften, Rahmen, Abständen und so weiter, verwendet man CSS-Formatvorlagen. Diese haben erhebliche Vorteile gegenüber der händischen Eingabe von Formaten in den Zelleneigenschaften.
Die Verwendung der CSS-Formatvorlagen wird hier erklärt
|
|
Nach oben
|
2. 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:
|
|
|
|
Nach oben
|
3. Hintergrund mit fester Grafik in der Mitte
|
|
Der Hintergrund ist einfarbig, mittig soll aber eine Grafik eingebunden werden.
|
|
|
|
Und dies ist die Grafik dazu:
|
|
|
|
Die Einstellungen im Haupttext/Body (wie oben beschrieben) erfolgen hier:
|
|
|
|
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.
Jetzt müsste die Technik verstanden sein... Wir können der Phantasie freien Lauf lassen! Viel Spaß beim Basteln.
Anmerkungen:
- Es ist nicht möglich, mehr als eine Grafik 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 werden immer übernommen.
Wichtige Informationen zum Aufbau eines eigenen Designs sind im Kapitel “Ein Eigenes Design mit NOF” zu finden.
Fragen zu den NOF-Tutorials beantworten wir gerne in unserem Netobjects-Forum.
|
|
Nach oben
|
|
|
