NOF 2015

Mit der CSS für diese ul / li Text-Navigation kann man sehr leicht eine Anpassung für mobile Geräte vornehmen, sodass sich die Navigation bei einem kleinen Display von einer horizontalen in eine vertikale Navigation ändert.

Ich habe das mal auf einer Beispielseite für ein responsives Design in NOF 2015 hier eingebaut. Schiebt das Browser-Fenster zusammen oder ruft den Link mit dem Handy oder Tablet auf, um den Effekt zu sehen. Für die CSS klickt in der Navi auf Tutorial Navigation.

Responsive Website mit responsiver Navigationsleiste

 

Teil-Ansicht am PC:

Ansicht-PC

Ansicht am Handy:

Screenshot-Handy

 

… und hier noch eine Erweiterung, die bei kleinen Displays (Handy hochkant) auf eine zusätzliche Slick-Navigation umschaltet.

Ansicht Handy Slick-Navigation (ab 600px Displaybreite):

Slick-Navigation

 

… und noch eine Erweiterung mit der sehr schönen, responsiven Navigationsleiste von SmartMenus, sowie dem Einbau von zusätzlichen, parallaxen Layoutbereichen.

www.nof-tutorials.com/Responsive-Website-Layout-CSS/Layoutbereiche/layoutbereiche.html

… und noch eine Erweiterung mit einer eigenen @Media-Navigation und einer Gestaltung der Seite mittels CMS (Content Management System).

www.nof-tutorials.com/Responsive-Website-Layout-CSS/CMS/cms.php

 

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

Die NOF-Schule hat vorgestern eine befristete Preisaktion von NetObjects für NOF 2015 veröffentlicht.

Informationen und rege Diskussion befinden sich auf folgender Forum-Seite:

Rabatt-Aktion NOF 2015

Preisaktion NOF 2015

NetObjects Fusion 2015

… ist heute in der deutschen Version erschienen.

 

www.netobjects.de

 

Weitere Details erfahrt Ihr hier und hier meine ersten Eindrücke

NetObjects Fusion Web-Hilfe

 

 

NetObjects Fusion 2015