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

Ein eigenes Design mit NOF - Seitenaufbau

Layout in NOF erstellen - Seitenaufbau: Inhaltsverzeichnis

Struktur der Website - Seiten anlegen und verwalten

Die Struktur der Website soll möglichst die spätere Verwendung der Navigation berücksichtigen. Es ist wesentlich einfacher, eine Site-Navigation zu verwenden, die automatisch die Struktur des Seitenbaumes übernimmt, als benutzerdefinierte Navigationen zu verwenden.

Grundsätzlich ist die Anzeige von mehr als drei Ebenen (inkl- Home) in einer einzigen Site-Navigation nicht optimal gewährleistet. Für eine vierte Ebene müsste man sich auf Kompromisse einlassen oder die Navigationsleisten trennen, was zu einem höheren Komplexitätsgrad führen würde.

Fazit: möglichst eine horizontale Struktur aufbauen und maximal drei Ebenen einrichten.

Für unsere Demo-Seite “Mondo” richte ich nur zwei Ebenen ein:

21-NOF-Seiteneinstellung

In den Seiten-Eigenschaften kann ich den Seitentitel (Browser und Suchmaschinen), die Beschriftung der Navigations-Schaltflächen (unter “Benutzerdefinierte Namen”) und die Meta-Tags einrichten, sowie die Datei-Endung falls nötig (bei Verwendung von Komponenten) in .php ändern.

Hier kann man Seiten auch von der Publizierung ausschließen.

Zusatzwissen

Hier finden die wichtigsten  Aufgaben der Suchmaschinen-Optimierung statt.

Der Seitenname bestimmt die URL, also die Adresse im Browser. Diese ist das wichtigste Kriterium zum Listen einer Seite in den Suchmaschinen. Ebenso wichtig sind die Seitentitel (Diese erscheinen in der Browser-Favoritenleiste und in den Suchergebnissen der Suchmaschinen) und die Beschreibungen.

Nähere Informationen dazu sind hier übersichtlich gelistet zu finden:

Workshop - Suchmaschinenoptimierung mit NetObjects Fusion

Einfügen von Objekten in das Layout

Nachdem wir die Struktur der Website  und das Grunddesign erstellt habe und die Einstellungen für die Seite vorgenommen haben (siehe Seite Design) fangen wir an, Inhalte in die Seite einzufügen. Dies erledigen wir auf Seitenansicht:

0-NOF-Seitenansicht

Es öffnet sich die leere Seite. Angezeigt wird der Hintergrund, der hier beschrieben wurde.

Als erstes richte ich den Banner-Bereich ein. Dafür hatte ich die Grafiken als transparente .pngs im Grafik-Programm eingestellt. Diese Grafiken stehen mir nun zur Verfügung:

schriftzug

Bannerbild

Die Seitenbreite stelle ich auf 990 px ein.


Sehr wichtige Anmerkung zur Einfügung von Objekten:
Für eine stabile Anzeige in allen Browsern ist es sinnvoll, die Objekte nicht direkt ins Layout einzufügen, sondern  innerhalb von Layoutbereichen einzubetten!

So sieht unser Entwurf auch im Smartphone gut aus, keine Elemente überlagern sich:

NOF-Mobile-Webseite

Zusatzwissen:

Zur Arbeit mit Layoutbereichen findet sich hier eine vertiefende Anleitung:

Arbeiten mit Layout-Bereichen in NetObjects Fusion

Banner/Header in NOF erstellen - Logo, Grafik

Wir haben bereits die Seite eingerichtet. Die Masterrahmen rechts und links wurden entfernt, es verbleiben die Masterrahmen oben und unten. Die Seitenbreite ist auf 990 px eingestellt.

Wir zeichnen einen flächigen Layoutbereich über die gesamte Breite und Höhe des Masterrahmens. Wir klicken dafür auf den Button “Layoutbereich :

21-NOF-Layoutbereich flächig einzeichnen

Nun fügen wir die zwei Bannergrafiken mit dem Button “Bildeinfügen” ein:

23-NOF-bild-einfuegen

Nach dem Platzieren des Bildes und des Logos sieht der Banner wie folgt aus:

24-NOF-Banner

Navigation in NOF einfügen

Nun können wir die Navigationsleiste entsprechend dem Entwurf in die NOF-Seite einfügen. Wir klicken auf “Schaltflächen-Navigationsleiste”:

24-NOFNavigation-einfuegen

Sollte der Entwurf eine vertikale Navigationsleiste erfordern, so wird diese gleich vertikal eingezeichnet, damit das Layout nicht gesprengt wird.

Zusatzwissen

Wenn zu viele Seiten angezeigt werden (zweite und dritte Ebene), verstellt die Navigationsleiste grundsätzlich die Seitenbreite.

Die Seitenbreite muss nach dem korrekten Einstellen der Navigationsleiste manuell wieder eingestellt werden.

Einstellungen der Navigation:

In unserer Mondo-Website haben wir nur eine Navigationsebene, die genau die Struktur auf Seitenansicht wieder spiegelt. Deshalb brauchen wir nichts spezielles einzustellen. Es handelt sich um eine grafische Site-Navigation.

Wer eine benutzerdefinierte Navigation erstellen möchte muss hier auf “benutzer definiert” klicken und bestimmte Seiten mit einer bestimmten Struktur einbinden:

25-NOFNavigation-Einstellungen

Im zweiten Reiter der Navigationseinstellungen (Schaltflächenstil) finden wir Einstellungen für das Aussehen der Navigation:

26-NOFNavigation-Einstellungen

Wer eine dritte Ebene eingebunden hat und ausklappende Buttons für die darunterliegende Ebene benötigt, aktiviert in obigem Eigenschaftsfenster “Klappleisten-Untermenüs” und “Klappleisten automatisch schließen”, Die Buttons für die sekundäre Navigation (Klappleisten) sollten entsprechend auf Design-Ansicht eingebunden werden.

Für unsere Demo haben wir die Abstände zwischen den Buttons auf 7 px gestellt und anschließend die Leiste auf dem Layoutbereich manuell positioniert.


Zusatzwissen:

Weiterführendes Wissen über die NetObjects Navigation in jeder erdenklichen Variante findet man auf folgenden Seiten:

Tutorials der NOF-Schule - Navigation, Klappnavigation

Tutorials von Tommy - NetObjects Navigationsleisten

Kurzanleitungen vom NOF-Werkzeugkasten - NetObjects Navigationsleiste (nof-forum.com)

Vorschau und lokale Publizierung

Um die Ergebnisse des eigenen Designs im Browser zu verifizieren stehen drei Möglichkeiten zur Verfügung:

Die Vorschau im Browser (hier NOF 2012):


vorschau

Diese Vorschaufunktion sollte möglichst nicht verwendet werden. Sie zeigt nur die Ergebnisse in einem temporären lokalen Verzeichnis an, sie zeigt die ganze Webseite an und ist entsprechend sehr langsam.

Die Vorschau der einzelnen Seiten: (hier NOF 2013 - unten links):


vorschau1

Diese Vorschaufunktion ist sehr effizient zum Anzeigen der Ergebnisse, beschränkt sich aber auf die Ansicht im installierten Internet Explorer. Sie zeigt nicht die Wirkung von eingebunden externen Codes.

Die lokale Publizierung


27- lokale-Publizierung

In den Anwendungsoptionen wird eingestellt, mit welchem Browser die Vorschau und die lokale Publizierung erfolgen soll.

Im Menü kann man einstellen, ob man die ganze Website oder nur einzelne Seiten im lokalen Server anzeigen möchte.

Der Bleistift aktiviert die Publizierungseinstellungen, hier kann der Anwender einen bestimmten Pfad für die lokale Publizierung bestimmen (es empfiehlt sich, vorher einen Windows-Ordner dafür bereit zu legen).

Bin ich zufrieden, setzte ich das Einfügen von Inhalten fort.

Wichtig:

NOF benötigt systembedingt den Internet Explorer! Bitte Browser nicht aus dem Windows System deinstallieren.

Layout mit Inhalten füllen

Der Header (Bannerbereich) ist fertig, nun fügen wir Inhalte ein.

Wir beginnen so wie oben für den Header angezeigt, mit dem Zeichnen eines flächigen Layoutbereichs über die ganze Breite:

28-Layout-Bereich

Nun versuche ich die Inhalte so komfortabel wie möglich einzurichten:

Links mit  Abstand zum Rand verwende ich ein Textfeld für die wesentlichen Inhalten der Seite. 

Alle Texte und eventuelle Bilder werden hier eingefügt. Der Vorteil der Verwendung eines einzigen Textfeldes mit Bildern und eventuell kleine Tabellen oder sonstige Elementen liegt darin, dass man Texte im Nachhinein editieren kann ohne andere Texte oder Bilder manuell verschieben zu müssen. 

29-Objekte-Einfuegen

Für die Demoseite “Mondo” habe ich eine ganz einfache Lösung gewählt.

Ein einfacher grafische Streifen trennt die Inhalte des Footers vom Rest der Seite.

Darunter habe ich einen flächigen Layoutbereich eingefügt. Das Bild mit der Trennlinie sowie die beiden Textfelder sind einfach manuell eingefügt:

Footer/Fusszeile erstellen mit Inhalten füllen

Für die Demoseite “Mondo” habe ich eine ganz einfache Lösung gewählt.

Ein einfacher grafische Streifen trennt die Inhalte des Footers vom Rest der Seite.

Darunter habe ich einen flächigen Layoutbereich eingefügt. Das Bild mit der Trennlinie sowie die beiden Textfelder sind einfach manuell eingefügt:

31-footer

Der untere Rand des Layoutbereiches definiert auch den Abschluß der Website im Browser. Damit kann man den Abstand vom Footer-Inhalt zum Browser-Rand genau bestimmen.

Zusatzwissen:

Bei modernen luftigen Layouts, werden gerne breite Footer verwendet, die als Farbbalken von rechts nach links bei jeder Auflösung angezeigt werden.

Dafür empfiehlt sich und ab Version NOF 2013 folgende Methode:

Breite-Footer als div-Container mit css - Bei Standard-Einstellung HTML 5


Nächste SeiteDemo-Vorlage - Mondo - Vorschau

Seite drucken