Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
Kostenlose NOF-Templates umsetzen - Vorlage von Raven
#1
Am Beispiel des Collies-Template von Raven zeige ich hier, wie man die Vorlage bearbeiten und mit eigenen Farben und Banner verwenden kann.

Downloads hier:

http://www.nof-schule.de/forum/t-kostenl...act-layout

Die Zip-Datei von Raven enthält die NOF-Vorlage (.zip) sowie die psd-Datei und Bildmaterial. Nach dem entpacken der Gesamtdatei öffnen wir in NOF12 (Update 3 und aufwärts - falls neue Versionen kommen) die zip-Datei mit dem NOF-Template.



Dafür öffnen wir NOF 12 und suchen die Vorlage auf unserem Rechner:


.jpg  NOF-Vorlage-öffnen.jpg (Größe: 102,74 KB / Downloads: 793)


Wir schließen NOF und speichern dabei das Projekt. Jetzt können wir das Projekt ganz einfach aus der NOF-Ansicht öffnen und damit weiter arbeiten.

Klick auf Seitenansicht und unten links auf "Vorschau". So sieht das Projekt standardmäßig aus:


.jpg  1-NOF-Vorlage-Vorschau.jpg (Größe: 371,53 KB / Downloads: 685)


Auf der Bearbeitungsansicht können wir alle Farben so lassen, wie sie sind, und die Textobjekte bearbeiten, oder wir benötigen einen anderen Farbrahmen für Hintergrund und Buttons.

Design-Merkmale anpassen - Hintergrundfarbe, Schrift, Buttons

Das Design wird grundsätzlich auf Design-Ansicht angepasst. Die Ansicht sieht in Ravens Vorlage so aus:


.jpg  2-NOF-Vorlage-Design-Ansicht.jpg (Größe: 197,91 KB / Downloads: 499)


1. Hintergrundfarbe

Zum Wechseln der Hintergrundfarbe auf Formatvorlagen verwalten > Haupttext/Body gehen, gewünschte Hintergrundfarbe einstellen:


.jpg  3-NOF-Vorlage-Design-hintergrundfarbe.jpg (Größe: 100,18 KB / Downloads: 263)


2. Schrifttyp und - größe

Die Schrift für das ganze Projekt wird hier eingestellt:


.jpg  4a-NOF-Vorlage-Design-Standardtext.jpg (Größe: 95,15 KB / Downloads: 289)


3. Navigationsbuttons

Die Navigationsbuttons können durch eigene ausgetauscht werden. Bitte darauf achten, dass die Button-Größe vom Original übernommen wird, damit sich das Layout nicht verschiebt.

Navibuttons-Austausch wie folgt:


.jpg  5-NOF-Vorlage-Design-Buttons-austauschen.jpg (Größe: 89,31 KB / Downloads: 244)


Buttongrößen:

Primary: 150 x 30 px
Secondary: 180 x 30 px


Banner austauschen

Wir wechseln zu Seitenansicht und möchten unseren eigenen Banner verwenden. Mit Klick auf dem Banner stellen wir fest, wie das Bannerbild in der Vorlage eingebunden wurde:


.jpg  6--NOF-Vorlage-Banner austauschen.jpg (Größe: 237,16 KB / Downloads: 329)


Und genau dort wird das Bild umgetauscht, als Hintergrund des Layoutbereichs.

Die Bannergröße muss exakt die gleiche sein: 900 x 299 px. Bitte Bild nicht in NOF skalieren, sondern vorher im Grafikprogramm in der richtigen Größe erstellen. Firmen- bzw Projektname kann als Textfeld oder halbtransparentes .png auf dem Bannerbild eingefügt werden.

Aufbau der Schattengrafik

Es gibt diverse Methoden, die Schatten um das Layout herum zu gestalten. Ich beschreibe hier nur den Aufbau dieser Vorlage.

Wir benötigen die Schatten oben, unten und seitlich, darüberhinaus getrennte Grafiken für Layout und Masterrahmen.

Raven hat es wie folgt mit halbtransparenten pngs gelöst:

Masterrahmen oben:

Bild direkt eingefügt.

Masterrahmen seitlich:

Bilder rechts und links direkt eingefügt:


.jpg  7--NOF-Vorlage-schatten1.jpg (Größe: 97,62 KB / Downloads: 284)


Layout:

Auf der Gesamtbreite des Layouts wurde ein Layoutbereich eingefügt. Als Hintergrund des Layoutbereichs ist ein Grafikschnipsel mit dem Schatten eingefügt. Die Grafik wiederholt sich automatisch, so dass die Seiten beliebig lang sein dürfen.


.jpg  7--NOF-Vorlage-schatten2.jpg (Größe: 102,14 KB / Downloads: 233)


Footer

Im Footer wurde ebenfalls ein Layoutbereich eingezeichnet, der die Schattengrafik als Hintergrund enthält. Somit können noch Texte im Footer eingefügt werden.


.jpg  7--NOF-Vorlage-schatten3.jpg (Größe: 165,82 KB / Downloads: 213)


Textfelder - Formatierungen

Alle Texte übernehmen die Formatierung, die für Normaltext <P> hier oben beschrieben und eingestellt wurde.

Die abweichende Farbe hat Raven direkt im Eigenschaftsfenster zusätzlich eingetragen, ebenfalls die Fett-Schrift.

Für den Zweck empfehlen wir die Verwendung von CSS-Formatvorlagen - Beschreibung hier

http://www.nof-schule.de/forum/t-css-for...d-zuweisen
Lieben Gruß
Barbara
--------------
Lumis-Webdesign
Umwelt und Meere schonen: Plastikmüll vermeiden!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Thema geschlossen 


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Templates, Layout, Designs barbara0701 24 31.459 27.09.2014, 10:43
Letzter Beitrag: Raven
  NOF-Vorlage - Layout mit Schatten von Raven barbara0701 0 4.767 03.05.2013, 12:08
Letzter Beitrag: barbara0701
  Layout mit Schatten in Netobjects Fusion umsetzen - Vorlage von Blogger.com Bee 1 26.420 20.03.2011, 18:35
Letzter Beitrag: Bee



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!