Anlegen eines neuen Projektes und erste Schritte

Nachdem wir inzwischen  einiges an Zeit in die Grafikarbeit investiert haben, setzen wir unseren „Traum” vom eigenen Design in die Tat um. Auf den folgenden Seiten werde ich Euch Schritt für Schritt zeigen, wie ich dabei vorgehe. Nicht jeder Schritt hat ausschließlich mit dem Thema Design zu tun, aber jeder Schritt soll Euch helfen, NOF besser zu verstehen und den Umgang mit dem Programm noch besser zu lernen. Auf geht’s!

Wir starten NOF! Unter  Vista mit einem Rechtsklick auf das Programm-Icon und der Auswahl „Als Administrator ausführen”.
Nähere Informationen dazu findet Ihr hier.

Nachdem das Programm gestartet wurde, zeigt sich uns zuerst die Online-Ansicht.
Hier legen wir unser neues Projekt an. Wie man hierbei vorgeht, könnt Ihr dem Screenshot entnehmen.

Mit einem Klick auf die Option „Leere Seite”, öffnet sich folgendes Fenster. Hier vergeben wir den Namen für unser Projekt und bestätigen mit OK. NOF legt jetzt ein neues Projekt für uns an.

Automatisch werden wir in die Site-Ansicht oder auch Baum-Ansicht weitergeleitet. Hier sehen wir die Startseite des Projekts, welche von NOF immer automatisch mit „Home” benannt wird. Im Screenshot seht Ihr einen blauen Rahmen um die Home-Seite: Dieser Rahmen erscheint nach einem einfachen Klick auf die Seite und zeigt, dass die Seite markiert ist. Dies nur am Rande.

Mit einem Doppelklick auf die Home oder mit einem Klick auf den Button für die Seitenansicht gelangen wir in die... na? richtig! in die Seitenansicht oder auch Arbeitsansicht. Standardmäßig verwendet NOF bei jedem neuen Projekt den überaus reizenden SiteStyle „Glasgow Teal&Silver”, welchen wir im folgenden Screen noch kurz bewundern dürfen. Ebenfalls standardmäßig legt NOF einen oberen Masterrahmen (MB) mit einem Banner, einen linken Masterrahmen (MB) mit einer grafischen Navigation und einen unteren Masterrahmen (MB) mit einer Textnavigation und dem NOF-Logo an. Da wir das Aussehen unserer Seite selbst bestimmen möchten und auch nicht zur Werbung für NetObjects Fusion verpflichtet sind, löschen wir all diese Elemente aus unserer Seite. Dazu reicht es aus, die Elemente jeweils anzuklicken und mit der Entfernen-Taste den Löschvorgang zu starten.

MB steht für Masterborder. Weitere gängige Abkürzungen nebst Erläuterung findet Ihr übrigens hier.

Nachdem wir unsere Startseite aufgeräumt haben, möchte ich gern ein paar Sätze zum Thema Masterrahmen & Layout sagen.
NOF bietet uns als besonderen „Luxus” die Funktion des Masterrahmens (MB). Voreingestellte Masterrahmen sind der „DefaultMasterborder”, welcher standardmäßig eingestellt ist und bereits drei Rahmen aktiviert hat und der „ZeroMargins“, bei dem alle vier Rahmen in Ihrer Breite auf 0 px eingestellt sind.
Der Masterrahmen (MB) kann je nach Wunsch für oben, unten, links und/oder rechts aktiviert werden. Die Breite bzw. Höhe des Masterrahmens (MB) ist frei wählbar. Welchen Vorteil bringt es uns aber, einen Masterrahmen (MB) zu verwenden?
Der Masterrahmen (MB) zeichnet sich dadurch aus, dass alle in ihm platzierten Elemente auf allen Seiten sichtbar sind. Verwenden wir z.B. eine Bannergrafik oder eine Navigationsleiste, die in unserem gesamten Projekt auf jeder Seite erscheinen soll, so brauchen wir diese nur einmal einfügen und haben per sofort diese Inhalte auf allen Seiten. Des Weiteren hat dies auch den Vorteil, dass beim Seitenwechsel nichts zuckt oder zappelt. Den Masterrahmen bitte nicht mit Frames verwechseln!

Ab und zu kommt es vor, dass wir solche Inhalte zwar auf vielen Seiten gleichermaßen haben wollen, jedoch nicht auf allen. Dann bietet es sich an, verschiedene Masterrahmen einzusetzen. Wie man einen neuen Masterrahmen anlegt seht Ihr hier.

Zurück zu unserem Projekt. Mit der Taste F10 oder einem Klick in den Masterrahmen aktiviert ihr die Masterrahmen-Eigenschaftenpalette (EP). Hier betätigt Ihr den HTML-Button.

Es öffnet sich ein neues Fenster in welchem Ihr den Reiter „Zwischen den Head-Tags” aktiviert, um danach im unteren Teil des Fensters folgenden Codeschnipsel einzufügen:

<style type="text/css">
html {
overflow-y: scroll;
}
</style>

Mit diesem Code erzwingen wir den seitlichen Scrollbalken auf unserer Website. Das heißt, es wird immer ein seitlicher Scrollbalken angezeigt, egal wie lang oder kurz unsere Seite ist. Dadurch bedingt springt unsere Seite beim Seitenwechsel nicht hin und her, wenn mal von einer kurzen zu einer längeren Seite gewechselt wird. Da wir den Code ins MB-HTML eingeben, brauchen wir diesen Vorgang für alle anderen Seiten nicht mehr wiederholen.
 

Eine weiter nützliche Eingabe, welche wir auch ganz zu Anfang erledigen wollen, ist der Code zum zentrieren unserer Seite.
Hierzu wechseln wir zum Reiter „Beginn des Haupttextes” und fügen den folgenden Codeschnipsel im unteren Teil des Fensters ein:
 

<div align="center">

Anschließend wechseln wir zu Reiter „Ende des Haupttextes” und fügen dort noch folgenden Schnipsel ein:

</div>

Der folgende Screenshot ist ausschließlich für diejenigen von Euch gedacht, die NOF 11 verwenden. Dort hat sich das Aussehen dieses Fensters nämlich grundlegend geändert.

Nachdem wir diese Einfügungen vorgenommen haben, wechseln wir in die Design-Ansicht und befreien uns auch hier von allen überflüssigen Standardeinstellungen.

Als Erstes legen wir uns hier einen eigenen neuen Sitestyle an. Wie das geht, seht Ihr im folgenden Screen.

Für diesen SiteStyle vergebt Ihr jetzt einen Namen Eurer Wahl. In meinem Beispiel „FlowerPower”.

Nun weist Ihr eurem Projekt den neu angelegten SiteStyle zu. Das geht auf unterschiedliche Weise. Mit einem Doppelklick auf diesen Style, mit einem Klick auf den Button „Format festlegen” oder aber über das Kontextmenü nach einem Rechtsklick. Wenn das gelungen ist, wird Euch die Schrift des Styles in fettgedruckten Buchstaben angezeigt.

Ihr könnt - wie im folgenden Screen zu sehen - auch noch Euren Namen eingeben, um festzuhalten, von wem der Style erstellt wurde. Bei dieser Gelegenheit solltet Ihr gleich dafür sorgen, dass das Häkchen bei „Schreibgeschützt” entfernt ist, da sich der Style sonst später nicht bearbeiten lässt.

Da wir keinen unnötigen Ballast durch unser Projekt schleifen wollen, um es sauber und somit möglichst stabil zu halten, entledigen wir uns auch gleich unbenutzter Aktiv-SiteStyles. Entnehmt bitte dem unteren Screenshot wie Ihr dabei vorgehen müsst.
Keine Angst, der Style wird nur aus den AktiveStyles gelöscht und nicht aus dem Programm.

Jetzt haben wir nur noch unseren selbst angelegten Style aktiviert und räumen diesen noch ein wenig auf.
Das Banner in der Designansicht dient dazu, auf jeder der einzelnen Seiten den Seitennamen einzublenden. Wer diese Funktion für sein Projekt nutzen möchte, kann die Grafik markieren und über die Eigenschaftenpalette formatieren und ändern. Ich persönlich mag dieses Banner nicht und lösche es deshalb gleich mal aus meinem Style. Dasselbe gilt für die Flashnavigation.

Für alle User, die NOF Version 10 oder 11 nutzen:
Bei jedem neu angelegten Style werden automatisch sämtliche Formatvorlagen für alle NOF-Komponenten angelegt.
Das heißt, wenn Ihr in der Design-Ansicht zum Reiter CSS-Code wechselt, findet Ihr Style-Angaben länger als eine Rolle Toilettenpapier. Wenn man allerdings ein eigenes Design nutzen möchte, braucht man diese ganzen Formatierungen in aller Regel nicht, belastet aber sinnlos sein Projekt mit einem Haufen Formatierungsmüll.
Aus diesem Grund wechsele ich an dieser Stelle zum Reiter CSS-Code, markiere den gesamten Code dort und lösche ihn restlos.

Beim Wechsel zum anderen Reiter wird dann gefragt, ob diese Änderung gespeichert werden soll. Diese Frage bestätigt Ihr mit „Ja”.

Solltet Ihr unbedingt eine der NOF-Komponenten verwenden wollen wie z.B. das Gästebuch, dann könnt Ihr bei diesem Löschvorgang auch die für die jeweilige Komponente relevanten Formate aussparen. Welche Formatierungen für welche Komponente dienen, seht Ihr an dem jeweiligen Hinweis im Code.

Jetzt wechseln wir noch in die Assets- oder auch Verwalten-Ansicht, um auch dort gleich ein erstes Mal aufzuräumen.



In der Verwalten-Ansicht werden alle von uns in die Seite eingebauten Assets aufgelistet. Man erfährt dort den Pfad zum genauen Speicherort, die Dateigröße und unter anderem auch, ob das Asset noch in Verwendung ist oder wir uns vielleicht schon längst von ihm getrennt haben.
Regelmäßiges Bereinigen der Asset-Verwaltung ist ein extrem wichtiger Bestandteil unserer Arbeit. Nur eine saubere Asset-Verwaltung ermöglicht es uns, jederzeit eine  Vorlage von unserem Projekt zu erstellen.

Wir überprüfen hier jetzt die Assets.

Da kaum Assets vorhanden sind, ist die Überprüfung sehr schnell abgeschlossen. Wir bestätigen diese Meldung mit einem Klick auf „OK“.

Bei einem Blick auf die Spalte „In Verwendung” stellen wir jedoch fest, dass dort kein Hinweis für die Verwendung dieses Assets zu finden ist. Steht in dieser Spalte nicht „Ja”, so wird dieses Asset in der Seite nicht mehr verwendet und sollte deshalb auch aus der Asset-Verwaltung gelöscht werden. Das kann man zwar mit der Entfernen-Taste tun, aber da unsere Asset-Verwaltung nicht immer so übersichtlich bleibt, gibt es eine Option im Menü, mit Hilfe derer man alle unbenutzten Assets gleichzeitig löschen kann. Siehe Screenshots.






Damit sind die Aufräumarbeiten abgeschlossen und wir können beginnen, unser eigenes Design einzubauen.  Hier geht es weiter.