Ein eigenes Design in NOF - Netobjects Fusion

Die einzelnen Seiten eines Projektes sollen unterschiedlich sein. Bei einigen Elementen möchte man aber gerne, dass sie sich wiederholen, wie z.b. Navigation, Banner usw. Die werden im Masterrahmen platziert, damit sie sich auf jeder Seite automatisch wiederholen, während im Layoutbereich die eingegebenen Inhalte nur für die aktuelle Seite gelten.

Das Arbeitsblatt in der Seitenansicht muss also unterteilt werden: Beispielsweise  oben und links: Masterrahmen; mitte: Layout.

Nach dem Öffnen der Seiten-Ansicht (Home) erscheint ein einfaches Blatt mit grünem Hintergrund auf dem Bildschirm. Ich habe mich zuvor für ein Banner mit der Breite 900 px entschieden. Dies ist zugleich meine festgelegte Seitenbreite. Ebenfalls habe ich mich für eine vertikale Navigation entschieden, die sich auf jeder Seite wiederholt.

Ich muss also als Erstes einen Master-Rahmen definieren. Es dürfen keine Objekte sich mit der Masterrahmenlinie überlappen.
 

Im oberen Bereich, also im Masterrahmen platziere ich für das Banner im linken oberen Eck eine Tabelle mit zwei Zeilen und einer Spalte, Breite 900, Höhe 200. Die Höhe kann natürlich variieren, aber die Breite sollte schon fest sein Textabstand, Rahmen, Zellenabstand sind auf null gestellt.

Nach oben

Banner

NOF bietet automatische Banners mit vorgegebenen Styles an. Auch die kann man mit eigenen Grafiken versehen. Man geht dabei genau so vor, wie bei den Navigationsbuttons.  NOF fügt automatisch die Seitennamen in das Banner.

Ich möchte allerdings wie üblich einen eigenen Banner erstellen, der auf jeder Seite gleich bleibt und keinen wechselnden Text enthält. Da ich in diesem Beispiel keine Grafik habe, bereite ich ein Bild in passender Größe vor. Bildbreite 900px, Höhe 160px. Hiermit lege ich auch die Breite meines Layouts auf 900 px fest. Diese Größe wird von fast jedem Bildschirm dargestellt, ohne dass der Besucher mit der Maus horizontal scrollen muss. Als Maximal-Breite rechnet man üblicherweise 990 px. Diese Seitenbreite Breite soll die Website nicht überschreiten.


Ich füge nun mein Bannerbild wie folgt  in die oberste Tabellenzeile ein:
Bildsymbol anklicken, mit Doppelklick auf die Tabellenzelle Bild einfügen. Jetzt erscheint mein Bild in der Tabelle. Ich ändere sofort den ALT-Text im Eigenschaftsfenster,  das wird so oft vergessen….
 

Zum Zentrieren der Website fügt meine einen Code einmalig im Masterrahmen ein:

Masterrahmen-Eigenschaften abrufen, Auf “html” klicken, Code wie folgt einfügen:


Beginn des Haupttextes/Body:

Code:
<div align="center">

Ende des Haupttextes/Body:

Code:
</div>

Bebilderte Anleitung hier: Nützliche Codes für die Website

Ich klicke nun auf Vorschau, um das vorläufige Ergebnis anzuzeigen.

Bin ich zufrieden, setzte ich das Einfügen von Inhalten fort. Unter der Zelle mit dem Bild habe ich noch eine Zeile für Text vorgesehen.

Wichtige Anmerkung: Für die Zentrierung der Seiten empfehle ich, den Befehl statt im Layouteigenschaftsfenster (oben beschrieben) einmalig im Masterrahmen-html einzugeben. Wie das geht, wird hier beschrieben


Hier geht es geht weiter: Korrekte Verwendung von Tabellen und der CSS-Formatvorlagen!


Fragen zu den NOF-Tutorials beantworten wir gerne in unserem Netobjects-Forum.

Nach oben