CSS

Heute möchte ich Euch eine sehr einfache Möglichkeit vorstellen, eine NOF (NetObjects Fusion) Seite responsive zu gestalten und, bei Bedarf, mit einem Parallax-Effekt zu versehen. Als „Parallax“ versteht man fixierte Fullscreen-Hintergrundbilder, die beim Scrollen einer Seite in einem Objekt-Bereich diese Bilder über dem gesamten Bildschirm anzeigen.

www.nof-tutorials.com/Responsive-Website-Layout-CSS-Parallax

Responsive Parallax Seite

NetObjects Fusion arbeitet bereits seit geraumer Zeit an einer responsiven Lösung für ihre Software. Im Moment weiß aber niemand, wann es soweit sein wird. Für „Bastler“ ist das inzwischen vielleicht eine Lösung 🙂

Hier geht es zu meinem Tutorial für diesen Versuch von mir, den ich mit NOF 2015 realisiert habe.

www.nof-tutorials.com/Responsive-Website-Layout-CSS-Parallax/Tutorial/tutorial.html

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

 

 

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

Eine rein CSS basierende Textnavigation mit einem sehr großen Ausklappmenü, das Ihr beliebig anpassen könnt.

Der Einbau und die Änderung der CSS sowie der Listen-Navigation, ist eher für fortgeschrittene Bastler zu empfehlen.

www.nof-tutorials.com/Mega-Navigation/

Mega Navigation

Am 01.10.2014

Webbausteine.de – Website ist wieder online !

www.webbausteine.de

 

Am 22.08.2014

Aus unbekannten Gründen ist die Website www.webbausteine.de offline gegangen. Wir hoffen, dass der Betreiber bald wieder verfügbar sein wird, damit er uns weiter mit seinen tollen Lösungen beglückt.

Wer die Downloads von Webbausteine.de zu Tommys Tutorials sucht – wird hier fündig:

Download der PHP-Skripte von Webbausteine

Darunter zum Beispiel die Nachrichten-Komponente, das Forum, der Kalender oder das Gästebuch und einiges mehr.

Alle Skripte von Webbausteine sind hier zu finden, die Tommy auf seinen Tutorial-Seiten vorstellt. Etliche dieser Skripte benötigen kein Download, sondern werden direkt auf Tommys Seiten gezeigt und beschrieben.

 

Viel Spaß damit!

 

Heute möchte ich Euch einen schönen Hover-Effekt vorstellen, der bei Mausüber einen Text zur Beschreibung eines Fotos darstellt und z.B. auch einen Link.

Diese Effekte sind ausschließlich mit CSS-Klassen erstellt und funktionieren in allen modernen Browsern.

www.nof-tutorials.com/Hover-CSS-Transitions/

Elefant

Klick mich