Anleitungen für NOF – NetObjects Fusion

Hier habe ich mal den Versuch gemacht ein Video als Hintergrund einer responsiven Website, die ich mit NOF erstellt habe, zu verwenden.

www.nof-tutorials.com/Responsive-Background-Video/

Dieses HTML5 Video wird nur mit einer CSS als Fullscreen Background dargestellt und funktioniert auch auf dem mobilen Gerät, allerdings nicht mit dem hier eingestellten automatischem Start, da mobile Geräte keine Videos automatisch starten. Benutzt den Pause/Play Button um das Video am mobilen Gerät zu starten.

Hier geht es zu meinem dazugehörigen Tutorial

… unten eine Ansicht von meinem Android-Handy

Handy-Screenshot

NetObjects Fusion hat ein Script entwickelt, das es ermöglicht einen sogenannten Parallax-Effekt zu gestalten.

Dabei werden Layoutbereiche erstellt, denen man eine von NOF erstellte Class zuordnen kann, die dann Hintergrundbilder der Layoutbereiche als fixierte Fullscreen-Bilder darstellen. Durch die Unterbrechung dieser Layoutbereiche entsteht der Eindruck, dass diese Bilder beim Scrollen der Seite jeweils neu geladen werden.

Parallax-Effekt

Hier das Original-Script mit einem Tutorial zum Einbau von mir:

http://www.nof-tutorials.com/Parallax-Hintergrund-Effekt/

… oder auch als (bedingt) responsive Seite:

http://www.nof-tutorials.com/Parallax-Hintergrund-Effekt-Responsive/

Die Hintergrundbilder sollten möglichst in einer niedrigen Auflösung gewählt werden, damit die Seiten schnell laden. Als zusätzliches Element habe ich hier noch einen „Preloader“ (zum Vorladen der Seite) eingebaut.

http://www.nof-tutorials.com/Parallax-Preload-Hintergrund-Effekt/

Fragen beantworten wir wie immer gerne in unserem NOF – Forum.

 

 

Update 1 (Build 1050) für NOF 2015 steht seit dem 24.03.2015 zum Download bereit:

http://www.netobjects.de/html/downloads.html

 


This updates a single installation of NetObjects Fusion 2015.

Multiple installations are strongly discouraged as they introduce potential problems in NetObjects Fusion 2015 functioning correctly.
If you have manually modified any resource files associated with NetObjects Fusion 2015 this may also introduce problems. Please correct either of these issues prior to updating.


 

NetObjects Fusion 2015 Update – Build 15.00.0000.1050

•    WEBFONTS: When restoring .ZIP backup that contains webfonts that were not included with NOF, install and register new fonts
•    WEBFONTS: Default „always publish“ flag to FALSE
•    ANALYTICS: Use asynchronous code for „classic“ Google Analytics
•    UI: Suppress Javascript exceptions in internal browser (e.g. Google Analytics)
•    PUBLISH: edit and publish TITLE attribute for form fields
•    PUBLISH: publish ALT attribute for form buttons
•    PUBLISH: fixed W3 validation errors for new form <input> types when publishing as HTML5
•    PUBLISH: publish ID attribute for hidden form fields
•    PUBLISH: do not publish TITLE for <form> container DIV
•    PUBLISH: do not write entries for image links in sitemap.xml
•    SNIPPET: include object ID in snippet editor caption
•    SNIPPET: include header markup when publishing snippet that is inside of MLR
•    PUBLISH: fixed W3 validation errors related to <meta> tags and HTML5
•    UI: made some comboboxes taller (e.g. site options charset, text style)
•    CSS: Fixed issue publishing CSS files where decimal values (e.g. 0.5) would lose fractional portion (e.g. published as 0.0).
•    PUBLISH: User-created tables now published with alignment CLASS (e.g. nof-block-center, nof-wrap-right)
•    PUBLISH: Filter out unsupported <meta> elements when publishing as HTML5.  HTML5 tags are now closed.
CAROUSEL: Fixed initial draw of images when carousel is inside of MLR

 

 

Fortgeschrittene Ansicht und Code Editor in Versionen ab NOF 2013.

 

Seit NOF 2013 fehlt im Menü „Ansicht > Arbeitsfläche“  die Möglichkeit, eine fortgeschrittene Ansicht (mit erweiterten Eigenschaften) zu aktivieren.

Die fortgeschrittene Ansicht wird nun hier aktiviert:

Menü > Ansicht > Rasteranalyse

 

NOF-Rasteranalyse

NOF-Rasteranalyse

 

Die Rasteranalyse erzeugt den fortgeschrittenen Editor auf Seitenansicht:

 

Fortgeschrittene Ansicht

Fortgeschrittene Ansicht

 

 

 

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