Verwende unsere Suchfunktion
Impressum und Datenschutz
Die NOF-Schule | Startseite
Zum NOF-Forum
trennlinie-im-NOF-Projekt

Ein eigenes Design mit NetObjects Fusion - das Design

Design-Einstellungen in NetObjects Fusion - Inhaltsverzeichnis

 

Grundeinstellungen auf Design-Ansicht

Ich öffne mein NOF-Programm. Oben links klicke ich auf Datei > neue Seite > leere Seite.

Neue leere Seite


Es öffnet sich die Site-Ansicht. Auf Site-Ansicht kann ich die Struktur des Projekts definieren und u.a. die Metatags sowie die Beschriftungen der Navigationsbuttons eingeben.

Zunächst möchte ich das Design nach meinen Vorstellungen aufbauen und wechsle dafür auf Design-Ansicht.

Auf dieser Ansicht kann ich alle Grunddesign-Einstellungen vornehmen, die für die gesamte Website gelten. Die Einstellungen werden in der CSS-Datei style.css geschrieben.

Die Design-Ansicht müsste jetzt wie folgt aussehen (NOF 2013 - Der Vorgang ist bei früheren NOF-Versionen fast identisch):

Default-Style NOF

Nun möchten wir ein komplett leeres Design erzeugen. Dafür klicke ich mit der rechten Maustaste auf dem aktiven Standard-Design und wählen “neuer leerer Site-Style”:

Neues leere Design

Nun verschwinden alle voreingestellten Grafiken, der leere Site-Style muss nur noch zugewiesen werden:

Format festlegen

Nun entferne ich zur Sicherheit andere aktive Site-Styles aus dem Projekt:

Unbenutze Styles entfernen

Alternativ wähle ich ein bestehendes Design aus der vorhandenen  Bibliothek der Site-Styles als Basis für die Website und deaktiviere den Schreibschutz:

Schreibschutz entfernen

Um später Probleme in der Projektsicherung zu vermeiden, sichere ich den von mir erstellten oder editierten Site-Style in dem ich mit Rechtsklick auf dem Stylenamen > “kopieren”, den Style weiter unten unter den lokalen Site-Styles einfüge.


 

Hintergrund für die Website in NOF einrichten.

Die Hintergrundgrafik für das auf dieser Seite geplante Layout ist ein vertikaler Grafik-Schnipsel, der im Hintergrund sich horizontal wiederholt. Der Schnipsel sieht wie folgt aus:

hintergrund_02

Zum Abrufen der CSS-Class (“Style”) für den Hintergrund gibt es verschiedene Methoden, ich mache es so:

Design Ansicht > Formatvorlagen verwalten:

Design Formatvorlagen verwalten

Die Anweisung für den Hintergrund gebe ich im Feld “Haupttext/Body ein:

Haupttext/Body > Bearbeiten

9-NOF-css-formatvorlagen-hintergrund

Hier Hintergrundfarbe eingeben (in meinem Fall #FFFFFF -Weiß), Hintergrundgrafik einfügen und positionieren:

10-NOF-css-formatvorlagen-hintergrund

10b-NOF-hintergrundeinstellung

Jetzt ist der Gesamthintergrund meiner Website eingerichtet.


Achtung: In manchen Versionen von NOF verändern sich die Hintergründe nicht zeitgleich in der Design-Ansicht. Man wechselt zuerst in die Seiten-Ansicht und dann in die Vorschau um den Effekt zu sehen.


Zusatzwissen:

Weitere Informationen zu Hintergründen für die Website findet Ihr hier:

Hintergrund mit Verlauf

Verschiedene Hintergründe für die NOF-Website

Basis-Einstellungen: Schriften, Überschriften, Links und Listen

Grundschrift - | Basisschrift | <p>

Die Basis-Schrift für das Projekt wird ebenfalls im Design eingestellt. NOF 2013 bietet zwar direkt im Projekt eingebunden sog. Webfonts an, aber grundsätzlich empfehle ich die Verwendung der Standard-Browserschriften wie z.B. Verdana, Arial und Times Roman. Verdana ist eine klare serifenlose Schrift, die sehr gut lesbar ist.

Die Schrifteinstellung erfolgt in der Formatvorlage <p> (Paragraph). Sie wird in der Hierarchie immer angezeigt, wenn keine neuen Formate für bestimmte Texte, Überschriften etc. verwendet werden. Für das Erscheinungsbild des Projekts ist eine einheitliche Schrift von sehr hoher Bedeutung.

Eingestellt wird die Schrift in Design-Ansicht unter “Formatvorlagen verwalten”, Normal <p>:

16-NOF-Textformat

Zusatzwissen:

In der Definition im Feld Formatvorlagen > Definition sieht man den CSS-Code (Cascading Style Sheet) , der aufgrund dieser Einstellungen erzeugt wird. Die CSS-Class wird in der Datei “Style.css” festgeschrieben. Das Projekt zieht nun diese Formate aus der “externen CSS-Datei”, diese Formate werden nicht direkt im Quellcode der Seite geschrieben. Wie bei der Verwendung alle CSS-Klassen führt dies zur Verschlankung des Quellcodes.

Weitere Infos über CSS-Formate

Überschriften, H1 bis H6 “tags” (Textmarkierungen)

Wie oben für die Standardschrift gezeigt lassen sich Überschriftsformate zentral anlegen und verwalten. Die Formatvorlagen (CSS-Klassen) heißen H1 bis H6 (Header-Tags oder H-Tags).  Diese Einstellungen sind sowohl im Bezug auf Methodik (Arbeitsaufwand) als auch im Bezug auf die Sichtbarkeit für Suchmaschinen wichtig.

Eingestellt werden die Formate für Überschriften wie oben gezeigt aber nun unter den entsprechenden Menü-Punkten:

17-NOF-Ueberschriften

Zusatzwissen:

Eine umfassende Beschreibung der H-Tags und ihrer Funktionen findet Ihr in folgenden Tutorial:

Überschriftsformate Header-Tags, H-Tags

Linkformatierungen | Listen und Auszählungsformate

So wie bei Überschriften verwendet man für Links bestimmte Farben als Auflockerung der Website. Man bleibt normalerweise bei einem bestimmten Farbschema  und verändert weder Schriftgröße noch Schriftformate (fett, kursiv)  für Links, die im Text einfließen.

Ebenso wie Schriften und Überschriften werden Links und Listen im  Menü der Formatvorlagen bearbeitet:

17-NOF-links-listen

Zusatzwissen:

Die Einstellungen für die LINK-Farbe gelten für das gesamte Projekt. Wer verschiedene Link-Formate benötigt hat im Wesentlichem zwei Möglichkeiten:

Erstellung verschiedener Textnavigationen oder Link-Formaten

Navigationsbuttons - Eigene Schaltflächen einfügen

Den von mir im Grafikprogramm erstellten Button möchte ich nun für die Navigation in NOF verwenden.

Hier ist die Buttongrafik (bei Bedarf mit rechtem Mausklick herunterladen):

navi_13

Natürlich können an dieser Stelle auch unterschiedliche Buttons für die Mouseover-Funktion (hervorgehoben) oder für verschiedene Ebenen eingefügt werden.

Button oder Navigationsschaltfläche einfügen:

Auf Design-Ansicht klicke mit doppeltem Mausklick ich auf dem Button, der für die erste Navigationsebene zur Verfügung steht:

Im Menü kann ich die Grafik auf meiner Festplatte suchen:

14-navi-button-einbauen

Grafik einbinden, und ebenso für die weiteren Buttons vorgehen:

Standard-Rollover, hervorgehoben (aktive Seite), hervorgehobenes Rollover. Hier kann man bestimmen, wie sich die Grafiken beim Mouseover verändern.

Anschließend definiert man die Schrift für alle Mouseover-Effekte  in den Schaltflächen-Eigenschaften:

15-navi-buttoneigenschaften

Die Einfügung und Einrichtung der Navigationsleiste in die Website wird im nächsten Abschnitt “Seitenaufbau” gezeigt.

Zusatzwissen:

Eine Klappleistennavigation in NOF erstellen

Navigationsleiste in NOF mit weiterführenden Tutorials

Master-Rahmen – Layout-Bereich – Zentrierung

Ich wechsle nun in die Seiten-Ansicht, um alle von NetObjects Fusion voreingestellten Elemente auf der Seite zu entfernen.

Objekte auf Seite entfernen, Seitenbreite und Masterrahmen einrichten


0-NOF-Seitenansicht

Auf dieser Seite kann ich alle von NOF vorgegebenen Objekte entfernen und die Seitenbreite sowie die Masterrahmen nach meinen Wünschen einrichten:

5-NOF-seitenbreite einrichten

Nun ist mein Arbeitsblatt komplett leer.

Auf meinem Entwurf sind Masterrahmen nur oben und unten auf der Seite vorgesehen. Bei Bedarf richtet man einen Masterrahmen auch als linke Spalte ein - zum Beispiel für eine vertikale Navigationsleiste. Dies ist nur zu empfehlen, wenn sich die Inhalte der linken Spalte auf der ganzen Website wiederholen müssen.

Sollten diverse Masterrahmen benötigt werden, weil die Inhalte varieeren, so kann man in den Eigenschaften (Masterrahmen-Eigenschaften) weitere Masterrahmen anlegen und zuweisen.

Zusatzwissen:

Masterrahmen erstellen, Einstellungen


Nun ein Screenshot des aktuellen Seitenaufbau für unser Demo-Projekt “Mondo”:

6-NOF-Leere-Seite-fuer-eigenes-design

Die Seite im Browser zentrieren:

Dieser Schritt muss für alle Seiten in den Layout-Eigenschaften bei allen NOF-Versionen bis inkl.NOF 2013 wiederholt werden:

Mit der Taste F9 oder mit Klick im Layout die Layout-Eigenschaften aufrufen, > Seite im Browser zentrieren.

7-NOF-seite-zentrieren

Ab NOF 2015 ist das Häkchen automatisch gesetzt, man kann die Zentrierung für das Projekt in den Anwendungsoptionen ändern.


Wichtiges Grundwissen:

Terminologie: Layout und Masterrahmen

Unter “Layout” verstehen wir den Bereich des Arbeitsblattes für individuelle Seiteninhalte, im Gegensatz zum “Masterrahmen”, der auf allen Seiten identisch angezeigt wird.


Nächste SeiteDemo-Vorlage - Mondo - Vorschau

Seite drucken