Scripts

1 2 3 9

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

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.

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.

 

Heute habe ich mal eine schöne Alternative zur MySQL-Datenbank Komponente von NOF erstellt.

Diese Skripte von Webbausteine.de legen die Tabellen der Datenbank automatisch an und sind sehr einfach in NOF zu integrieren.

Weiterhin stehen dem Webmaster, durch sehr gute Kommentare des Autors, alle Möglichkeiten der SQL Skript-Sprache zur Verfügung.

Im Vergleich zu der NOF-Komponente ist der Einbau ein Kinderspiel und auch für Anfänger gut geeignet.

Hier geht es zu meiner Beispielseite und meinem Tutorial

1 2 3 9