Arbeiten mit Layoutbereichen

Hier mal was für die Bastler unter Euch 🙂

www.nof-tutorials.com/Responsive-Website-Section/

Mein Tutorial findet Ihr ebenfalls unter dem Link oben.

Das ist aber eher etwas für fortgeschrittene User, die sich nicht nur mit NOF sehr gut auskennen, sondern auch Erfahrungen mit HTML5, CSS3 und JavaScript haben.

Full Page Sections

Responsive Website Full Page Sections

Ich habe diese responsive Website mit NOF 2015 erstellt. NOF hat ja leider bisher immer noch keine Version, mit der man über die Werkzeuge responsive Webseiten erstellen kann, insofern habe ich hier einen Weg gesucht und gefunden, die Pixel-Angaben von NOF durch Prozent-Angaben zu ersetzen.

Die zusätzlichen Scripts für die Gestaltung dieser „Full Page Sections“ Anwendung habe ich im Internet gefunden. Diese Scripts sind sehr gut programmiert und wirken entweder über CSS3 oder auch über jQuery und funktionieren an sämtlichen Geräten und in allen Browsern.

Man kann die Seite in den unterschiedlichsten Varianten gestalten und diese auch alle kombinieren:

  • Navigation von einer Sektion in die andere mittels Scrollrad oder Tastatur-Pfeilen
  • Navigation auch über Buttons
  • Navigation über vertikale und/oder horizontale Navigations-Punkte
  • Slider in den einzelnen Sektionen einbauen, um weitere Seiten innerhalb einer Sektion darzustellen
  • Header und Footer einsetzen, fixiert oder auch nicht
  • Fullscreen Hintergrund-Bilder verwenden
  • Fullscreen Hintergrund-Videos verwenden mit oder ohne Ton
  • Gradient Hintergrundfarben
  • Looping nach der letzten Sektion
  • Kontinuierliches Scrollen durch alle Sektionen mit erneutem Start nach der letzten Sektion
  • Easing Effekte
  • Scrollbalken der Seite anzeigen oder auch nicht
  • Scrollbalken innerhalb von Sektionen oder Slidern verwenden für höhere Inhalte

… und vieles mehr.

Hier ein Beispiel für ein responsives Design, das mittels NOF erstellt wurde. Dies wurde ausschließlich mit CSS und ohne Tabellen gemacht und ist eher für etwas fortgeschrittene User gedacht, die sich bereits mit NOF und CSS etwas auskennen.

Es wurde ein Layoutbereich mit einer festen Position im Browser-Fenster erstellt, der immer horizontal und vertikal zentriert positioniert bleibt, egal mit welchem Browser und egal mit welchem Betriebssystem.

Das funktioniert auch ebenso auf mobilen Geräten wie dem Smartphone oder dem Tablet (iOS oder Android). Der Layoutbereich wurde scrollbar gemacht und der Scrollbalken vom Browser-Fenster erscheint nicht, da sich das Layout selbst responsive verkleinert.

Beim Zusammenschieben (verkleinern) des Browser-Fensters wird auch der Inhalt zusammengeschoben.

 

Beispiele und Tutorial zum responsiven Design mit NetObjects Fusion

 

Responsives Design

Responsives Design

Endlich steht eine neue umfangreiche Anleitung für den Aufbau eines eigenen Designs mit NOF zur Verfügung.

Es sind also nun zwei Versionen vorhanden:

Das Original wurde umgezogen:

Die alte Version – Ein eigenes Design mit NOF – Mit Tabellen (mit der Geranien-Vorlage)

 

Die neue Anleitung befindet sich auf den Hauptseiten der NOF-Schule:

Basisanleitung insbesondere für NetObjects Fusion 2013

NetObjects Fusion Tutorial

Inhalte:

Eine genaue Auflistung der Inhalte wurde in der NOF-Schule veröffentlicht:

http://www.nof-schule.de/forum/t-neues-tutorial-ein-eigenes-design-mit-nof

Die Themen sind übersichtlich mit Ankern verlinkt, so dass man in den Tutorials auch sehr leicht einzelne Themen finden und bearbeiten kann.

Eine Druckversion ist in Vorbereitung.

 

 

Wir finden den Icon für den Layoutbereich auf Seitenansicht in der Werkzeugleiste.

Layoutbereich in NOF

Nach dem Anklicken des Icons können wir den Layoutbereich auf der Seite einzeichnen, und für diesen Bereich einen Hintergrund auswählen:

Layoutbereich einfügen

Nun können wir weitere Objekte und Elemente auf dem Layoutbereich platzieren:

Objekte auf Layoutbereich platzieren

Grafiken, die im Grafikprogramm auf transparenter Leinwand erstellt  und als .png gespeichert wurden werden auch transparent angezeigt.

Weiterführende Links:

Was ist ein Layoutbereich
Ein NOF-Design – Layout mit Schatten – mit Layoutbereichen umsetzen

 

 

Layoutbereich sind sehr praktisch an Stellen, die man nicht inhaltlich oft pflegen muss. Für die Gestaltung von Banner und Footer im Masterrahmen sind Layoutbereiche z.B. gut geeignet, weil man mit wenigen Klicks alle Objekte für die gesamte Website anordnet.

Die Positionierung der Objekte auf Layoutbereichen erfolgt durch Verschieben der Objekte mit der Maus, ist also sehr einfach.

Die Ergebnisse sind in allen Browsern normalerweise sehr gut.

nof-layoutbereich-footer

Für umfangreiche Inhalte auf großen Webseiten, die Pixelgenau auf jeder Seite positioniert werden sollen, und für die man Abstände und Formate als CSS-Festlegen möchte, sind Tabellen m.E. praktischer, erfordern aber für die optimale Umsetzung eine gewisse Übung.

 Wie funktionieren Layoutbereiche in NOF?