Layout

Tutorial: Das Raster in NOF 2015 erstellen und verwenden

 

Raster

Rastermuster

 

 

 

 

 

 

Das Raster ist eine hilfreiche Funktion die eine genaue Platzierung von Objekten vereinfacht,
indem ein lokales Raster eingeblendet werden kann.

Und so blenden wir ein Raster ein:
Im Seiten-Ansicht-Modus drücken wir die PF12 Taste auf unserer PC-Tastatur

Das Register Seiten-Eigenschaften wird eingeblendet.

– Wählen Sie das Register mit dem Schlüsselsymbol

Seiten-Eigenschaften

 

 

 

 

 

 

 

 

 

 

 

 

Um die Rasterfunktionen auf die persönlichen Modifikationen einstellen zu können,
Klicken wir auf den mittleren Button

Seiten-Eigenschaften_2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Seiten-Eigenschaften_3

Hier können wir das Aussehen des Rasters definieren.
Bei einem gleichmäßigem Raster müssen die Breite, Höhe und Größe
gleiche Werte eingegeben werden.

 

Mit der Form bestimmen wir das Aussehen.
Möglich: gestrichelt, gepunktet und durchgehend.

 

Farbe: hier sollte man eine etwas kräftigere Farbe wählen.
Ausnahme: bei dunkleren Hintergründen eures Projektes
kann mit der Farbe gelb oder weiß das Raster besser
sichtbar gemacht werden.

 

 

 

Eine weitere Funktionalität:
es können auch für weitere/mehrere Layout-Bereiche mit einem eigenen Raster versehen werden.

Beispiel
Weiteres_Layout2

Um einen weiteren Layout-Bereich (wie im obigen Beispiel) mit seinem eigenen Raster zu versehen,
geht man wie folgt vor:

– Einen weiteren Layout-Bereich anlegen
Weiteres_Layout

Nachdem der neue Layout-Bereich aufgezogen ist, sind in den Kästchen „Breite“ und „Höhe“
ein Häkchen zu setzen – und es erscheint das Raster.
Nun nur noch die Wunschangaben bei den dahinterstehenden „Pixelangaben“ machen – und fertig
ist das Wunschraster.

Weiteres_Layout2

 

Sofern nur ein Vertikales oder Horizontales Raster benötigt/gewünscht wird – auch dies ist möglich

 

Horizontales Raster

 

Horizontales_Raster

Horizontales Raster

 

– Bei der Option „Breite“ einfach das Häkchen abwählen

Vertikales Raster

 

Vertikales_Raster

Vertikales Raster

 

– Bei der Option „Höhe“ einfach das Häkchen abwählen

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.

 

 

Hilfslinien in NOF einrichten:

Eine Hilfslinie richtest du ein, indem du einmal auf den Rand mit dem Lineal klickst. Die roten Hilfslinien gelten für alle Seiten mit dem gleichen Masterrahmen, die blauen nur für die eine Seite.

Hilfslinien im NetObjects-Projekt einfügen

Hilfslinien im NetObjects-Projekt einfügen

Objekte an Hilfslinien einrasten lassen:

Unter „Ansicht“ kann man einstellen, dass Objekte oder Textfelder, Bilder, Layoutbereiche u.a. an den Hilfslinien einrasten. Das erleichtert die Ausrichtung.

Objekte an Hilfslinien einrasten

Objekte an Hilfslinien einrasten

 

Quelle: Aus diesem Forum-Beitrag von astour zum Thema Objekte auf Unterseiten kopieren und ausrichten

 

 

 

Heute möchte ich Euch meine neuen Tutorials zum Erstellen eines Footers in absoluter Seitenposition vorstellen.

Hier als Beispiele ein Footer:

 

Footer-Layoutbereich

 

Haben wir einen Schatten oder wollen wir einen Schatten?

Eine neue NOF-Vorlage mit Schatten-Layout von Raven wurde im Forum veröffentlicht:

www.nof-schule.de/forum/t-nof-vorlage-layout-mit-schatten-von-raven

 

NOF-Vorlage mit Schatten von Raven

NOF-Vorlage mit Schatten von Raven

 

Im Gegensatz zur Vorlage, die ich bisher angeboten hatte, hat obiges Layout einen Schatten „rundherum“ und kann auf beliebigem Hintergrund platziert werden.

Die Vorlage für NOF 9 lässt sich mit allen späteren NOF-Versionen verwenden.

Ich danke Raven herzlichst für die Mühe! 🙂

 

Zum Vergleich: Layouts mit Schatten und Tutorial:

Layout von Barbara, Schatten nur rechts und links – mit Vorlage

Layout von Raven, Schatten „rundherum“ – mit Vorlage

Tutorial von Bee – Umsetzung eines Layout mit Schattens – ohne NOF-Vorlage