|
|
Erste Schritte zum Aufbau eines eigenen Designs:
Ich öffne mein NOF-Programm. Oben links klicke ich auf Datei > neue Seite > leere Seite. Es öffnet sich die Siteansicht.
|
|
|
|
Ich stelle im rechten Fenster (Seiten-Eigenschaften) die Option ZeroMargins ein, um die Breite und Position des Masterrahmens später selbst zu definieren. Der Masterrahmen ist der Teil der Website, der sich auf jeder Seite wiederholt. Mit dem Einstellen auf “zero-margins” lösche ich automatisch alle von NOF voreingestellte Design-Bestandteile. Die Masterrahmen-Definitionen, die ich auf ersten Seite selbst einstelle, wiederholen sich automatisch auf alle neu hinzugefügten Seiten.
|
|
|
|
Ich wechsle nun in die Design-Ansicht.
|
|
|
|
Auf dieser Seite sehe ich die Design-Einstellungen eines NOF-Standard-Designs. Dieses Design werde ich jedoch nicht verwenden und möchte für meine Website ein neues Design anlegen. Mit Rechtsklick auf „Active SiteStyles“ wähle ich aus dem Kontext-Menü „ neuer leerer Site-Style“.
|
|
|
|
Ich werde zur Benennung meines SiteStyles aufgefordert. Ich trage meinen Style-Namen ein: geranium
|
|
|
|
Der nächste Schritt: Mein Design „geranium“ ist aktiviert, ich klicke oben in der Menüleiste auf Design > SiteStyle zuweisen:
|
|
|
|
Schon ist für meine Website „geranium“ als SiteStyle angelegt. Zunächst ignoriere ich die Gestaltungselemente auf der Design-Ansicht, weil ich sie für mein Projekt nicht benötige. Sie werden nach und nach durch andere ersetzt.
|
|
Nach oben
|
Hintergrund
Nun will ich eine schöne Hintergrundfarbe für meine Website haben. Diese trage ich in die Formatvorlagen ein.
Design (wie oben)> Formatvorlagen verwalten > „Haupttext/Body“ aktivieren, > bearbeiten > Hintergrund.
|
|
|
|
Hier kann ich eine Hintergrundfarbe und/oder ein Hintergrundbild eingeben und das Bild positionieren. Beim Hintergrundbild auf eine möglichst geringe Dateigröße achten, ansonsten kann das Laden im Browser sehr lange dauern.
Ich gebe grün als Hintergrundfarbe ein:
|
|
|
|
Jetzt ist der Gesamthintergrund meiner Website grün.
Sollte man ein Bild auswählen, so muss man von Fall zu Fall für die Darstellung des Bildes hier die Einstellungen vornehmen.
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.
|
Navigationsbuttons
|
|
Wenn ich keine eigenen Buttons erstellen will oder kann, suche ich aus den Nof-SiteStyles eine passende Navigation. Die SiteStyles werden unter meinem „geranium“ Design einfach aufgelistet. Ich kann sie anklicken und sichten. Ich finde etwas Passendes in dem Style „Farming green“.
|
|
|
|
Die gewünschte Navigation klicke ich an, sie öffnet sich im rechten Style-Ordner neben der Liste der Sitestyles. Ich schiebe die gewählte Navigation mit der Maus ins Design „geranium“:
|
|
|
|
Nun erscheinen auf der Design-Ansicht als Buttonset 1 und 2 die beiden Navigationen des Farming-Green SiteStyle. Für meine Website, die nur eine Strukturebene (also keine Unterseiten) hat, brauche ich eigentlich nur einen Button-Satz. Für spätere Ergänzungen lasse ich beide Button-Sätze stehen.
Sollte ich eigene Buttons verwenden wollen, so klicke ich auf das erste Button in der Primary leiste, aktiviere das Eigenschaftsfenster (Ansicht > Eigenschaftspalette, oder F3), und suche mein Bild für den Navigationsbutton.
|
|
|
|
Im gleichen Eigenschaftsfenster kann ich Schriften und Schriftfarben für die Navigationsbuttons wählen. Die Seitennamen werden später von NOF automatisch generiert!
Alternativ klicke ich (ab NOF-Version 8) mit Doppelklick auf dem jeweiligen Button, das Datei-Suchfenster öffnet sich automatisch und ich tausche die Grafiken nach Lust und Laune aus.
Nach der Arbeit sieht mein Buttonset 1 wie folgt aus:
|
|
|
|
Nach oben
|
Schriften
Wenn mir die Standard-Schrift nicht gefällt, wechsle ich die Schrift für die ganze Website. Dies wird wie für den Hintergrund (siehe oben) in den Formatvorlagen gemacht.
Design > Formatvorlagen verwalten > „Normal (P) markieren, > Bearbeiten > Zeichen Verdana, 12 px, grau eingeben.
|
|
|
|
Mit dem gleichen System definiere ich Formatvorlagen für Überschriften:
„Design > Formatvorlagen verwalten > Überschrift 1 aktivieren > bearbeiten“
|
|
|
Master-Rahmen – Layout-Bereich – Individuelles Banner
Nun wechsle ich in die Seiten-Ansicht und fange an, Inhalte für die Startseite einzugeben.
|
|
|
|
Die einzelnen Seiten eines Projektes sollen inhaltlich unterschiedlich sein. Bei einigen Elementen möchte man aber gerne, dass sie sich wiederholen, wie z.b. Navigation, Banner usw. Die werden im Masterrahmen platziert, damit sie sich auf jeder Seite automatisch wiederholen, während im Layoutbereich die eingegebenen Inhalte nur für die aktuelle Seite gelten.
Das Arbeitsblatt in der Seitenansicht muss also unterteilt werden: Beispielsweise oben und links: Masterrahmen; mitte: Layout.
Nach dem Öffnen der Seiten-Ansicht (Home) erscheint ein einfaches Blatt mit grünem Hintergrund auf dem Bildschirm. Ich habe mich zuvor für ein Banner mit der Breite 900 px entschieden. Ebenfalls habe ich mich für eine vertikale Navigation entschieden, die sich auf jeder Seite wiederholt.
Ich muss also als Erstes einen Master-Rahmen definieren. Es dürfen keine Objekte sich mit der Masterrahmenlinie überlappen.
|
|
|
|
Im oberen Bereich, also im Masterrahmen platziere ich für das Banner im linken oberen Eck eine Tabelle mit zwei Zeilen und einer Spalte, Breite 900, Höhe 200. Die Höhe kann natürlich variieren, aber die Breite sollte schon fest sein Textabstand, Rahmen, Zellenabstand sind auf null gestellt.
|
|
|
|
Nach oben
|
|
Hier geht es geht weiter: Seitenaufbau in NetObjects Fusion!
Fragen zu den NOF-Tutorials beantworten wir gerne in unserem Netobjects-Forum.
|
|
Nach oben
|
|
|
|
|
