Tutorial der NOF Schule erstellt von Bee



Aufgabenstellung ist die Erstellung eines NOF Layouts, passend zu einem Blogger.com Layout. Wenn ein Leser von der Webseite zum Blog wechselt, soll das Design ganz ähnlich aussehen, wie das der mit NOF erstellten Webseite.



 Blogger_Layout.jpg (Größe: 58,92 KB / Downloads: 287)


Dieses Tutorial richtet sich an erfahrenere Netobjects Fusion User.

Zunächst erstelle ich ein neues Projekt mit Datei – Neue Site – Leere Site und stelle folgende Bereiche ein: 990 px Breite

Der Masterborder oben ist 290 px hoch, unten 340 px hoch. Ich speichere das neue Layout.

Für den Hintergrund erstelle ich in Photoshop einen Streifen mindestens 20 px breit und 290 px hoch.



 Streifen.jpg (Größe: 11,45 KB / Downloads: 146)


Diesen füge ich in Design unter Seitenhintergrund ein. In der Designansicht unter Text – Formatvorlagen verwalten – Hauptext Body – Site Style – Hintergrund stelle ich folgendes ein:



 NOF Layout.jpg (Größe: 90,39 KB / Downloads: 270)


Er nun wird automatisch horizontal wiederholt.

Die Banner-Grafik erstelle ich als 990 px breites JPG.

Im oberen Masterborder erstelle ich einen Layoutbereich, 990 px breit, 290 px hoch. Dem Layoutbereich weise ich die Banner-Grafik zu. In den Layoutbereich kann nun eine Grafik eingefügt werden, hier die Navigationsgrafik zum Blog, man kann aber auch die gesamte Navigation mit Hilfe des Layoutbereichs im oberen Masterborder unterbringen. Benötigt man hier nur die Banner-Grafik, genügt es, diese in der Seitenansicht in den oberen Masterborder einzufügen.



 NOF Layout 2.jpg (Größe: 79,15 KB / Downloads: 200)


Mit dem Befehl <div align="center"> und </div> im Body Code wird die Seite zentriert.

Wie das geht, steht hier: http://www.nof-schule.de/html/nuetzliche_codes.html

Das Layout in der Mitte erhält ebenfalls einen neuen Layoutbereich, 990 px breit, ihm wird ein ebenfalls vorher erstellter Streifen mit 990 px Breite und 20 px Höhe zugewiesen.



 Streifen-Mitte.jpg (Größe: 2,02 KB / Downloads: 180)


Dadurch entsteht der Eindruck des Schattens rechts und links des Layouts. Er wiederholt sich automatisch immer vertikal und man kann den Layoutbereich so weit ziehen, wie man das möchte.

Nun stelle ich in der Design-Ansicht noch die Hintergrundfarbe #E6EB98 ein. Und so sieht das Ergebnis nun aus, es fehlt nur noch der untere Masterborder, der Footer.



 NOF Layout 3.jpg (Größe: 69,99 KB / Downloads: 210)


Zu den Layoutbereichen eine Bemerkung: Eine Webseite mit Netobjects Fusion besteht aus verschiedenen Bereichen, in den oberen und unteren Masterbordern befindliche Objekte sind auf jeder Seite gleich, im dazwischen befindlichen sogenanten Layout sind die Inhalte der Seite hinterlegt. Normalerweise benötigt man hier keinen separaten Layoutbereich. Nur um den optischen Schatteneindruck zu erzeugen, wird hier ein Layoutbereich eingefügt und diesem der Hintergrundstreifen zugewiesen.

Nun wenden wir uns dem Footer im unteren Layoutbereich zu, zuvor habe ich diese Grafik in Photoshop erstellt:



 Streifen-unten-ganz.jpg (Größe: 13,72 KB / Downloads: 118)


Sie bildet den unteren Abschluss der Seite. Man ahnt schon, was jetzt kommt, es wird ein Layoutbereich erstelllt, exakt 990 px breit, 300 px hoch und diesem wird die gleich grosse Grafik zugewiesen.



 NOF Layout 4.jpg (Größe: 43,21 KB / Downloads: 119)


Der untere Layoutbereich ist 340 px hoch. Ganz unten füge ich ein leeres Textfeld ein, damit der Eindruck des Abschlusses entsteht. Man könnte das natürlich auch grafisch lösen.

In diesen Footer füge ich nun meine Inhalte ein. Fertig ist das neue „Blog-Layout“.

Anmerkung: Die Navigation befindet sich im Layout, nicht wie sonst üblich, im linken Masterborder.

Das Ergebnis sieht nun so aus:



 NOF Layout 7.jpg (Größe: 58,35 KB / Downloads: 130)


Generelles zum Umgang mit diesem Layout und den Layoutbereichen:

Mit Klick auf Layoutbereich in der Bearbeitungsleiste oben wird der Layoutbereich eingefügt.



 NOF Layout 8.jpg (Größe: 58,01 KB / Downloads: 72)


Allen Objekten in NOF (außer dem Textfeld und einem Bild) lassen sich im Eigenschaftsfeld rechts oben ein Bild oder eine Farbe zuweisen.



 NOF Layout 9.jpg (Größe: 47,13 KB / Downloads: 59)


Dazu klickt man das Objekt an (Zelle, Tabelle, Layoutbereich), klickt rechts oben auf das Symbol mit der bunten Kugel und sucht das entsprechende Bild auf seiner Festplatte.

Die Breite von 990 px ist in diesem Fall vorgegeben, lässt sich aber nicht fixieren. Fügt man nun z B. eine Grafik ein, die das Layout aus Versehen verbreitert, muss man erst den Layoutbereich wieder schmaler stellen, dann das Layout selbst.

Das Layout nach unten verlängern:
Mit der Enter-Taste oder mit Hochstelltaste und Enter in einem Textfeld oder in einer Tabelle verlängert man das Textfeld / die Tabelle.
Dabei verlängert sich auch der Layoutbereich. Das geschieht ganz automatisch.



 NOF Layout 5.jpg (Größe: 36,66 KB / Downloads: 68)


Will man das wieder verürzen, verkleinert man zunächst das Textfeld. Dann zieht man den Layoutbereich nach oben. Rechts in den Layout-Eigenschaften wird die korekte Höhe eingestellt.



 NOF Layout 6.jpg (Größe: 80,42 KB / Downloads: 52)


Ein Layoutbereich oder eine Tabelle darf nie größer sein, als das hinterlegte Bild, ansonsten wird das Bild wiederholt. Ist also die Grafik für den oberen Layoutbereich 290 px hoch, darf der Layoutbereich auch nur 290 px hoch sein.

Diesen Effekt nützen wir in der Mitte, der 20 px hohe Streifen wiederholt sich hier gewünscht und endlos.

Generelles zu umfangreichen Webseiten mit wachsendem Umfang, z.B. Reiseseiten

Meine Reiseseite Meet the Oceans wuchs von ca. 100 Seiten auf derzeit 240 Seiten. Ich habe sie (leider nicht von Anfang an) auf PHP umgestellt. Dadurch kann ich die Navigation mit PHP includieren. Wie das geht ( Auch das Umstellen der Seite auf PHP mit wenigen Klicks) könnt ihr hier nachlesen.

Warum das Ganze? Nun es erleichert die Arbeit ungemein. Fügt man neue Seiten ein, muss man nicht mehr alle anderen Seiten erneut hochladen, damit die Navigation komplett ist. Auch der Umfang des Codes der Seiten ist wesentlich geringer.

TIPP: Fangt Ihr mit einer umfangreichen und vorraussichtlich wachsenden Webseite gerade erst an, stellt diese von Anfang an auf PHP ein, auch wenn Euch die PHP Include Navigation zunächst zu kompliziert erscheint. Ihr könnt später noch nachrüsten. Habt Ihr die Seite als HTML Seite schon Jahre im Netz, fangt Ihr nach der Umstellung auf PHP suchmaschinentechnisch gesehen, bei 0 an, da Gooogle und Co. die PHP Seiten als neue Seiten behandeln. Außerdem: Links auf Eure alten HTML Seiten funktionieren nicht mehr. ….

Den Footer includiere ich ebenfalls oder binde ihn per IFrame ein, so dass ich ihn später ggfs. ändern kann, ohne wiederum die ganze Seite hochladen zu müssen.

Der Bildwechsler im Layout unten rechts ist ebenfalls auf einer Unterseite untergebracht. Eine von vielen Möglichkeiten, den Bildwechsler einzubauen, findet ihr hier.

Viel Spass beim Nachbauen.

Bitte schreibt Euer Feedback hier oder öffnet bei Fragen hier einen neuen Thread.