Style und Design-Einstellungen

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

Die in NOF 2105 enthaltenen NOF-Templates (früher Template Volumes) sind fertige Website-Vorlagen. Möchte man die Style-Elemente der Templates (inkl. MLR) für das eigene Design verwenden, so kann man die Styles speichern und in einer leeren Seite öffnen.

Template öffnen:

NOF öffnen, auf Startseite (Online Ansicht – hier NOF 2015) „Vorlagendatei öffnen“

 

NetObjects Fusion Template öffnen

NetObjects Fusion Template öffnen

Automatisch öffnet sich der Ordner „Templates“. Hier die gewünschte Vorlage aussuchen:

 

NOF Template auswählen

NOF Template auswählen

 

Ich wähle das Template „Good Inc Rust“ aus, trage eine Titel für die Seite aus, und öffne das Template.

Info:
Die Templates kann man auf dieser Seite „life“ sichten:
http://www.nof2015.kurt-singer.de/Templates/templates.html
Und so sieht Good Inc Rust aus:
http://www.nof2015.kurt-singer.de/NeueTemplates/GoodIncRust/

Styles des Templates speichern

 

Ich öffne die Seite und wechsle zu Design-Ansicht.

Den Style dupliziere ich und vergebe einen neuen Namen:

 

 

Site-Style duplizieren

Site-Style duplizieren

 

 

Jetzt schiebe ich den duplizierten Style mit der Maus und platziere ihn im Ordner  „Lokale-Site-Styles“:

 

Style speichern

Style speichern

 

Style im eigenen Projekt verwenden

Das Template schließe ich nun und starte ein neues Projekt als leere Website.

Ich wechsle zu Design-Ansicht und suche den gespeicherten Style im Style-Baum in den lokalen Site-Styles. Style anklicken.

Anschließend Auf dem Icon „Format festelegen klicken, um den Style dem Projekt zuzuweisen:

 

Style für die Webseite festlegen

Style für die Webseite festlegen

 

Das gewählte Template-Style kann jetzt für das eigene Design verwendet werden – Auch die MLR (Multi Layout Bereiche) können übernommen werden.

Verwandtes thema: Übernahme von Styles von einer anderen NOF-Version:

http://www.nof-schule.de/forum/t-style-fuer-aktuelles-projekt-von-anderen-versionen-uebernehmen

 

 

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.

 

 

Heute möchte ich Euch eine sehr gute Seite, auf die mich unser NOF-Forum Mitglied „drops46“ aufmerksam gemacht hat, vorstellen.

webbausteine.de

Leider wurde die Website von Webbausteine.de im März 2016 eingestellt.

Diese Seite erklärt sehr anschaulich und mit hervorragenden Kommentaren versehene unterschiedliche Skripte. Es werden ganze „Bausteine“ zum Einbau in Webseiten angeboten bis hin zu unterschiedlichen Generatoren.

Ich habe den Formular-Generator einmal ausprobiert, der professionelle Formulare kinderleicht erstellt. Man kann diese Formulare dann z.B. einfach auf seinen Server kopieren und mittels Inlineframe anzeigen oder diese auch in wenigen Minuten direkt in NOF einbauen. Hier mal drei Beispiel-Formulare mit einer Anleitung von mir.

http://www.nof-tutorials.com/Kontakt-Formular-Generator/

Es werden Themen wie PHP, MySQL, JavaScript oder auch CSS behandelt. Man findet jede Menge Tipps zum Webdesign im Allgemeinen, Tools zur Erstellung von Skripten und etliche Bausteine für die Bereiche HTML, CSS, JavaScript, PHP und MySQL.

 

Manchmal werden in NOF Standardschriften für z.B. Überschriften zu gedrängt angezeigt. Wie lässt sich die Laufweite der Schrift anpassen?

Ganz einfach. In jeder gängigen NOF-Version auf Design-Ansicht die gewünschte Formatvorlage anzeigen (Beispiele  „Schriften“  oder unter „Überschriften“ ), im Reiter „Absatz“ die Laufweite erhöhen:

Textlaufweite in NOF eingeben

Textlaufweite in NOF eingeben

 

Abstand zwischen den Buchstaben im Feld „Laufweite“  in Pixel eingeben. Das Ergebnis ist in der Vorschau schon sichtbar.

 

 

 

 

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