Design-Ansicht

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.

 

 

Beginnen wir mit dem Erstellen einer neuen Seite, eines neuen Projektes.

Nach dem Öffnen von NOF (in der Online – Ansicht):

 

Neue leere Seite öffnen:

Neue Seite (1.) -> im öffnenden Fenster einen Name für das Projekt (2.) eingeben und speichern.
Der Speicherpfad sieht bei Win 7 ungefähr so aus:

C:\Users\Admin\Documents\NetObjects Fusion 12.0\User Sites\Mein neues Projekt\

oder

über Datei -> Neue Seite -> Leere Seite, anschließend im öffnenden Fenster einen Name für das Projekt eingeben und speichern (Speicherpfad analog oben).

 

Neue Seite erstellen

 

3. Hier stelle ich für dieses Projekt den Masterborder auf  „ZeroMargins“, wobei der Masterborder (Masterrahmen) auch noch im jeweiligen Projekt geändert werden kann.

Bei ZeroMargins sind alle Rahmen auf „0“ voreingestellt, ohne Gestaltungselemente (z.B. Banner), „DefaultMasterborder“ wiederum gibt uns 3 vordefinierte Rahmen und Gestaltungselemente. Man kann im Prokekt in den Masterrahmen_Eigenschaften beliebig neue Masterrahmen erstellen und zuwesien.


Masterborder einstellen auf ZeroMargins

 

Ein neues, eigenes Design erstellen

4. Rechtsklick auf Active SiteStyles -> Neuer Leerer SiteStyle -> und anschließend einen Namen vergeben. In diesem Beispiel „Mein neues Projekt“.
oder
4a. Rechtsklick auf einen vorhandenen SiteStyle, der uns gefällt -> SiteStyle duplizieren -> Name vergeben. Hier müssen wir nicht zwingend in CSS (fast) alles löschen, da uns der Style ja gefällt 😉

 

SiteStyle neu anlegen

 

SiteStyle duplizieren

 

Zuweisung unseres gerade erstellten SiteStyles zum neuen Projekt

5. Neuen SiteStyle markieren und

6. Format festlegen

 

Format festlegen

 

Gefällt uns der SiteStyle nicht mehr, können wir ihn mit Rechtsklick einfach löschen, vorher muss aber ein anderer Style zugewiesen werden!

Einen Header mit breitem horizontalen Balken mit NetObjects Fusion XII zu erstellen, ist fast ein Kinderspiel.

Die NOF 12 Vorlagen sind weitgehend mit einem breiten Header ausgestattet.

Wer einen breiten horizontalen Streifen braucht, der sich allen Browserauflösungen anpasst, benötigt einen Grafik-Schnipsel, der sich horizontal unendlich wiederholt. Der Rest des Seitenhintergrunds wird mit Farbe ausgefüllt.

Wir zeigen die Grafik-Schnipsel unserer aktuellen Seite:

Hintergrundgrafik für breiten Header

Backgroundnof-forum.com

 

Diese Grafik enthält die beiden blauen Streifen sowie die dünnen grauen Linien auf weißem Hintergrund. Die Grafik darf sich nur horizontal wiederholen.

Für den Rest der Fläche, die zu füllen ist, wählt man die Hintergrundfarbe „weiß“ #FFFFFF.

In NetObjects Fusion XII ist die Grafik bereits mit der horizontalen Wiederholung definiert. Man braucht also bei Bedarf nur die Grafik auszutauschen:

Design-Ansicht > Formatvorlagen >  Haupttextbody  „Bearbeiten“ > Grafik auswechseln.

Bei älteren NOF-Versionen wird die Grafik eingebunden sowie die Einstellung „Wiederholen“ > „horizontal“ angepasst.

 

Hintergrundfarbe

Die für diese Seite eingestellte Hintergrund ist weiß #FFFFFF

 

NetObjects-Tutorial zum Thema Header mit breitem Balken:

Header/Banner mit horizontalem Balken  erstellen und Seitenhintergrund

 

 

 

Bei einigen Site-Styles von NetObjects Fusion 12  (z.B. Losenge) werden die Text-Zeilen oben und unten abgeschnitten, wenn die Texte ohne Formatvorlagen im Eigenschaftsfenster vergrößert werden. Die abgeschnittene Textzeile sieht dann so aus:

text-abgeschnitten

Die Ursache dieses Problem besteht darin, dass eine Formatierung für die Zeilenhöhe in diesem Style enthalten ist: line-height 1,5em.
Formatierung im Abstaz   line-height : 1.5 em
Grundsätzliche Information zu der CSS-Definition line-height.

„em“ ist dabei die Angabe der Zeilenhöhe, relativ zur normalen Zeilenhöhe.

In den NOF-Styles wird diese Angabe für die Textformatierung für den Absatz <p> („paragraph“) verwendet. Wenn man den Text mit Hilfe einer CSS-Formatvorlage formatiert, greift der Zeilenabstand der CSS-Formatvorlage. Wenn man den Text im Eigenschaftsfenster (HTML) formatiert, wird er abgeschnitten.

Lösung wenn der Text oben und unten abgeschnitten wird:

Man verwendet für Abweichungen vom Standard-Text eine CSS-Formatvorlage.

Oder, man deaktiviert die Eingabe der Zeilenhöhe für die Stylevorlage <p>.  Bitte vorher Schreibschutz entfernen.

Formatvorlage (Style – Design-Ansicht) öffnen und editieren:

 

losenge-style-schrift-1

So soll es dann aussehen:

losenge-style-schrift-2

Titelformate sind insbesondere aus zwei Gründen wichtig:

  1. CSS-Einstellungen für die Formate werden zentral in der Datei style.css festgelegt. In NetObjects Fusion braucht man nur die Formatvorlage H1 bis H6 auf Design-Ansicht etc anzupassen, und die Titelformate ändern sich auf der gesamten Website – vorausgesetzt, dass sie dem Text zugewiesen wurden.
  2. Titel sind optisch hervorgehobenen Überschriften die beschreiben, was der Besucher und die Suchmaschine  im Inhalt der Webbsite zu erwarten hat. Suchmaschinen geben den Überschriften die mit Header-tags formatiert sind eine inhaltliche „Priorität“, so dass inhaltlich relevante Überschriften besser für die Suchmaschinenoptimierung geeignet sind als allgemeine Überschriften (Beispiel: „Willkommen auf unserer Homepage“).

Nachfolgend finden Sie die relevanten Tutorials:

Überschriften, H-Tags in NetObjects Fusion

Seitentitel, URL, Seitenbeschreibung, Header-Tags