Style

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.

 

 

Die Definitionen für die Schrift für das gesamte Projekt erfolgen in der Design-Ansicht unter

> Formatvorlagen verwalten > Normal (P)

CSS-Formatvorlagen öffnen

CSS-Formatvorlagen öffnen

 

 

Formatvorlage

Formatvorlage Normaltext p

Einstellungen für die Standardschrift hier vornehmen

Einstellungen für die Standardschrift hier vornehmen

Diese Schrift wird auf dem gesamten Projekt angezeigt.

 

 

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!

Der Hintergrund Eurer NetObjects-Website – vielmals auch Background (BG) genannt – soll farbig werden?

Hintergrundfarbe definieren:

Unter „Design“ auf unseren neu erstellten (oder bereits einen anderen genutzten) SiteStyle -> auf  den Reiter „Grafik“ -> nach unten scrollen bis „Seiten – Hintergrund“ -> klick (1)  ->bei (2) Farbe auswählen.

 

2_1

 

Ergebnis vorher (bei Farbe „Automatisch“)

 

2_2

 

Ergebnis nachher ( mit Farbe grau #4e4e4e)

2_3

(Zu den weißen Linien und deren Bedeutung und Einstellungen gibt es noch ein extra Tutorial.)

 

Das alles kann man auch in der „Seiten“ – Ansicht (= Arbeitsansicht) einstellen.
Über Text -> Formatvorlagen verwalten (3) -> Haupttext[Body] (4) -> Bearbeiten (5) -> Hintergrund (6)

 

2_4

 

2_5

 

 Weitere Tutorials zum Thema „Website-Hintergrund“

Hintergrund mit Farbverlauf – Wie setzt sich der Inhalthintergund von dem Gesamthintergrund ab?

Verschiedene Hintergründe für die NOF-Website

 

 

 

 

Hat man einen eigenen SiteStyle erstellt, so lässt er sich mit dem System der NOF-Vorlage wirksam im Projekt bündeln und speichern.

Man kann auch jeden selbst erstellten SiteStyle in den lokalen SiteStyles speichern und anderen Projekten zugewiesen werden.

Dafür steht die Funktion „Site-Style duplizieren“ zur Verfügung:

style-duplizieren

 

Danach den duplizierten SiteStyle benennen (bitte nicht vergessen, das Feld dafür auszufüllen, sonst kann  NOF an der Stelle „einfrieren“):

duplizierten-Style-benennen

Jetzt den duplizierten Style mit der Maus anklicken und hinunterschieben. Maustaste loslassen wenn die Überschrift „Local SiteStyles“ erreicht ist.