Start

 


Die grafischen Vorbereitungen

 


Die Umsetzung in NOF

BlumeGr Einleitung Grafikarbeit & Ziel
BlumeGr Erstellung des Grundlayouts
BlumeGr Spiegeleffekt der Bannergrafik
BlumeGr Gestaltung & Fertigstellung des Layouts
BlumeGr Zuschneiden des Layouts für NOF
BlumeGr Erstellung der Navigationsschaltflächen
BlumeGr Fotos rahmen, drehen und überlappen
BlumeGr Erstellung der Hintergrundgrafik

 

BlumeOr Anlegen eines neuen Projektes und erste Schritte
BlumeOr Grundlegende Einstellungen in der Design-Ansicht
BlumeOr Aufbau eines Tabellen-Layouts
BlumeOr Anlegen von Seitenstruktur & Navigation
BlumeOr Zweitnavigation & Top-Link ohne Anker
BlumeOr Vervielfältigen der linken Naviationsleiste
BlumeOr Inhalte einfügen und formatieren

 

 

 

 

Der Aufbau eines Tabellenlayouts

 

Es geht als nächstes an den Aufbau eines Tabellen-Layouts. Im Forum wird oft darüber diskutiert: „Warum  Tabellen?”
Meine Meinung ist sicher nicht das Maß der Dinge, aber nach allem was ich so ausprobiert habe, sind für mich Tabellen - zumindest in NOF - die beste Möglichkeit, ein sauberes Layout zu bauen. Los geht’s!

Wir wechseln aus der Design-Ansicht zurück in die Seiten-Ansicht (von mir auch gern Arbeitsansicht genannt).
Hier dürfte es in etwa so aussehen, wie auf dem folgenden Screen. Alles was jetzt noch vom alten Style übrig geblieben ist, sind die Einstellungen des MB.

Um Missverständnissen vorzubeugen: Wenn ich in meinen Ausführungen den Begriff „Layout-Bereich” verwende, dann nutze ich diesen Begriff ausschließlich für den von NOF als Layout gekennzeichneten Bereich. Im unteren Screen blau hinterlegt. Keinesfalls ist damit die Komponente für den zusätzlichen Layoutbereich gemeint, denn diese verwende ich bei meiner Arbeit grundsätzlich gar nicht.

n38

 

Als nächstes stellen wir unsere Masterrahmen ein. Für dieses Design bietet es sich auf jeden Fall an, einen oberen und einen unteren MB zu verwenden. Den rechten und linken MB blenden wir aus, die Höhen des oberen und unteren MB richten sich nach der jeweiligen Höhe unserer erstellten Grafiken für Banner und Footer.
Wir drücken also auf unserer Tastatur einmal F10 oder klicken einmal in den Masterrahmen. Beide Aktionen bewirken den Aufruf der Masterrahmen-EP. Auf der EP sehen wir jetzt vier Eingabefelder mit den Beschriftungen Links, Rechts, Oben und Unten. In diese Felder geben wir unsere Maße ein.
Links: 0 ; Rechts: 0; Oben: 323; Unten: 339  Es handelt sich hierbei um Pixel-Angaben.

Der Layout-Bereich, in welchen Ihr später Eure Inhalte legen werdet, befindet sich nun automatisch zwischen dem oberen und unteren Masterrahmen. Im Screen mit dem roten Schriftzug „Layout” gekennzeichnet. Eine Größenanpassung dieses Bereichs ist zu diesem Zeitpunkt nicht nötig.

Man kann Größenänderungen der Masterrahmen übrigens auch mit den entsprechenden Schiebern vornehmen. Schaut euch den nächsten Screenshot einmal etwas genauer an.

n39

 

Wir legen nun die erste Tabelle für unser Layout an. Den Vorgang starten wir mit einem Klick auf das Tabellen-Symbol und klicken einmal an die Stelle, an welcher in etwa unsere Tabelle aufgezogen werden soll (im oberen MB). Es öffnet sich ein kleines Quadrat und ein Fenster mit einigen Einstelloptionen. Hier legen wir bereits (fast) exakt fest, wie unsere Tabelle ausschauen soll.

Wir benötigen für die Tabelle nur eine Zeile und eine Spalte, da wir im Grunde auch nur eine Grafik darin platzieren wollen. Die Breite der Tabelle beträgt 990 px. Das ist die maximale Breite,  mit der sich bei allen gängigen Auflösungen ein Querscroller vermeiden lässt. Diese Breite sollte nicht überschritten werden (ausgenommen  dynamische Tabellen). Die Höhe der Tabelle richtet sich - wie schon gesagt - nach der Höhe unserer Banner-Grafik (323 px).

Text- und Zellenabstand stelle ich mit ganz wenigen Ausnahmen auf „0”, da diese Einstellungen meist sowieso nicht ausreichend sind und ich Abstände deshalb mit Hilfe von Formatvorlagen definiere.

n40

 

Nachdem wir diese Einstellungen mit „OK” bestätigt haben, öffnet sich die gewünschte Tabelle mit den voreingestellten Maßen.
Über die EP setzen wir per sofort den Rahmen auf „0”. Mit den Pfeiltasten (oben, links) Eurer Tastatur kontrolliert Ihr, ob die Tabelle oben und links bündig anliegt.

n41

 

Solange die Tabelle markiert ist, werden in der EP auch die Tabelleneigenschaften angezeigt. Über die Tabelleneigenschaften könnten wir jetzt theoretisch und auch praktisch der Tabelle unsere Banner-Grafik als Hintergrund verpassen.
Wie ich Eingangs jedoch erwähnte, ist es aus verschiedenen Gründen sinnvoller, Formatierungen mit CSS vorzunehmen.
Und da wir ja hier sind, um etwas zu lernen, bleibt die EP jetzt einmal links liegen und wir befassen uns mit dem Thema „Formatvorlage”, oder auch „CSS-Klasse”.

n42

 

Wir klicken in der oberen Menüleiste auf „Text” und wählen im Klappmenü die Option „Formatvorlagen verwalten” an.

n43

 

Es öffnet sich ein Fenster und wir klicken auf  den „Neu-Button”. Ein weiteres Fenster öffnet sich.
In diesem Fenster setzen wir zunächst die zwei Pünktchen, wie es im Screen zu sehen ist und vergeben danach einen griffigen Namen für unsere Formatvorlage.
 
Kurze Erklärung zum Formatvorlagebereich (zweites Pünktchen): Beim Erstellen der Formatvorlagen können wir entscheiden, für welche Seiten diese Formatvorlage Gültigkeit haben soll. Seitenspezifisch heißt, die Formatvorlage gilt ausschließlich für die aktuell geöffnete Seite und wird später von keiner anderen Seite aus anwählbar sein. Site-übergreifend heißt, die Formatvorlage gilt für das gesamte Projekt und wir können von jeder unserer Seiten auf diese zugreifen.

Aus eigener Erfahrung kann ich sagen, dass man oft meint, eine Vorlage nur einmal benutzen zu wollen, später aber eines Besseren belehrt wird. Das bedeutet im Zweifelsfall doppelte Arbeit. Des Weiteren habe ich oft festgestellt, dass sich seitenspezifische Formatvorlagen schlecht wieder löschen lassen. Ich weiß nicht warum das so ist, aber es ist meine Erfahrung.
Aus diesen beiden Gründen aktiviere ich grundsätzlich die Option „Site-übergreifend”. Weiter im Text!
Nachdem die beiden Pünktchen gesetzt sind und ein passender Name vergeben wurde, bestätigen wir unsere Eingaben mit „OK”.

n44

 

Wir gelangen zur großen Eigenschaftenpalette und wechseln sofort zum Reiter „Hintergrund”. Über den „Durchsuchen-Button” können wir nach unserer Bannergrafik suchen und diese auswählen. Der Name der Grafik sollte  links neben dem „Durchsuchen-Button” erscheinen. Wir öffnen das Pulldown-Menü  der Option „Wiederholen” und entscheiden uns für „Ohne”, weil wir unsere Bannergrafik nur in einfacher Ausführung darstellen möchten. Weil an dieser Stelle keine weiteren Einstellungen nötig sind, bestätigen wir unsere Eingaben mit „OK”.
Damit haben wir unsere erste Format-Vorlage oder auch CSS-Klasse angelegt.

n45

 

Danach markieren wir die einzige Tabellenzelle unserer Header-Tabelle. Mit einem Klick markieren wir die Tabelle - es öffnet sich die EP für die Tabelleneigenschaften - mit einem weiteren Klick in die Zelle markieren wir die Tabellenzelle. Ob das gelungen ist, erkennt man  an einer leichten Veränderung der Tabellenmarkierung (Rahmen) und an der Überschrift der EP. Wenn hier „Tabellenzeile-Eigenschaften” steht, haben wir die Zelle markiert und können ihr unsere Format-Vorlage zuweisen. Im folgenden Screenshot seht Ihr unter dem Punkt „Benutzerdefinierte Formatvorlage” ein kleines Pulldown-Menü. Dieses öffnet Ihr, klickt die eben angelegte Formatvorlage an und weist sie somit der Tabellenzelle zu.

n46

 

Ob das gelungen ist, ist eigentlich unschwer zu erkennen. ;-)

Solltet Ihr an dieser Stelle nicht die Banner-Grafik sehen, dann kontrolliert nochmals die angelegte Formatvorlage und stellt ggf. die Hintergrundgrafik nochmals neu ein. Dieser Fehler kann schon mal auftreten.
Das Bearbeiten einer bereits angelegten Formatvorlage ist übrigens ganz simpel. Ihr beginnt genauso, als wolltet Ihr eine neue CSS-Klasse anlegen. Klick auf „Text” und dann auf „Formatvorlagen verwalten”. Im nächsten Fenster markiert Ihr links in der Liste die gewünschte Formatvorlage und klickt unten auf „Bearbeiten”.
In der großen Eigenschaftenpalette nehmt Ihr die ggf. erforderlichen Änderungen vor.
 
n47

 

Der Kopfbereich (header) unserer Seite ist fertig und wir nehmen den Fußbereich (footer) in Angriff. Hierzu legen wir wieder eine Tabelle an (im unteren MB). Wie das gemacht wird, habe ich bei der ersten Tabelle ausführlich beschrieben.
Achtet bitte darauf, dass diese Tabelle zwar die gleiche Breite, aber eine andere Höhe bekommen soll; nämlich die unserer Grafik für den Fußbereich. Wir stellen nach Anlegen der Tabelle auch wieder den Rahmen auf „0” und kontrollieren, ob sie oben und links bündig anliegt.

n48

 

Danach legen wir erneut eine Formatvorlage an. Hierbei  gehen wir wie bei der ersten Vorlage vor. Als Gedankenstütze habe ich jedoch auch dazu noch ein paar Screenshots gemacht.

n49



n50



n51

 

Nach Fertigstellung der Formatvorlage weisen wir diese wiederum unserer Tabelle zu.

n52

 

Das sieht zwar schon ganz gut aus, aber die graue Lücke da mitten drin,  muss noch gefüllt werden. Wir legen eine dritte Tabelle an (im Layout-Bereich).  Diese Tabelle bekommt zwei  Spalten und ihre Höhe legen wir erst mal mit 200px fest. Es folgen die üblichen Schritte bezogen auf Rahmen und Position.

n53



n54

 

Damit es später - bei Änderung der Spaltenbreiten - nicht zu irgendwelchen Lücken oder Verschiebungen des Hintergrundes kommt, legen wir für die Tabelle zwei Klassen an und weisen jeder Spalte eine eigene Klasse zu.

Der guten Ordnung halber möchte ich erwähnen, dass man der gesamten Tabelle auch eine Klasse von Hand zuweisen könnte. Auf diese Vorgehensweise möchte ich jedoch zum jetzigen Zeitpunkt nicht eingehen, da diese Formatierungen in der Arbeitsansicht nicht sichtbar wären und viele Anfänger hiermit erfahrungsgemäß Probleme haben.

Also zurück zu unseren zwei neuen Formatvorlagen. Wir gehen wie gewohnt vor und geben der ersten Klasse den Namen „LayoutLinks”. Dieses  „Links” findet sich gleich in der Positionierung der Hintergrundgrafik wieder, denn wir werden für beide Klassen die selbe Grafik nutzen.

n55


 

Ihr navigiert also über den „Durchsuchen-Button” zu der erstellten Hintergrundgrafik für den Content, und wählt diese aus. Da es sich bei dieser Grafik wieder nur um einen schmalen Streifen handelt, welcher sich nach unten hin wiederholen soll, wählen wir bei „Wiederholen” die Einstellung „vertikal” aus.
Die horizontale Bildposition stellt Ihr wie bereits angekündigt auf „Links”.

n56

 

Direkt im Anschluss legen wir die zweite Formatvorlage mit dem Namen „LayoutRechts” an und gehen hierbei genauso vor wie beim Erstellen der vorherigen Vorlage. Der einzige Unterschied ist - wie es der Name sagt - die horizontale Positionierung der Hintergrundgrafik,  nämlich „Rechts”!

n57

 

Der linken Zelle weist Ihr die Formatvorlage „LayoutLinks” und der rechten Zelle die Formatvorlage „LayoutRechts” zu.

n58



n59

 

Das sieht doch schon mal klasse aus, oder!? :-)

n60


Für weitere Arbeitsschritte, mir nach!

 

Fragen zur Arbeit mit NetObjects Fusion oder zu Problemen mit dem Programm beantworten wir kostenlos in unserem Forum.

Viele nützliche Antworten auf häufig gestellte Fragen zu NetObjects Fusion, findet Ihr hier.

In unserem Forum warten nach Regsitrierung über 82 tolle Tutorials zum Umgang mit NetObjekts Fusion, den SwissKnife for NOF Komponenten, zur Intergration von vielen jQuery Plugins in NOF, zum Umgang mit CSS in NetObjects Fusion und vieles mehr.

Hier könnt ihr die SwissKnife for NOF Komponenten kostenlos herunterladen.

Dabei sind Komponenten für die LyteBox, Fancy Zoom, Zufallsbilder, Zufallstexte, zur Änderung des DocType in NetObjects Fusion und vieles mehr.
 

 


Die grafischen Vorbereitungen

 


Die Umsetzung in NOF

BlumeGr Einleitung Grafikarbeit & Ziel
BlumeGr Erstellung des Grundlayouts
BlumeGr Spiegeleffekt der Bannergrafik
BlumeGr Gestaltung & Fertigstellung des Layouts
BlumeGr Zuschneiden des Layouts für NOF
BlumeGr Erstellung der Navigationsschaltflächen
BlumeGr Fotos rahmen, drehen und überlappen
BlumeGr Erstellung der Hintergrundgrafik

 

BlumeOr Anlegen eines neuen Projektes und erste Schritte
BlumeOr Grundlegende Einstellungen in der Design-Ansicht
BlumeOr Aufbau eines Tabellen-Layouts
BlumeOr Anlegen von Seitenstruktur & Navigation
BlumeOr Zweitnavigation & Top-Link ohne Anker
BlumeOr Vervielfältigen der linken Naviationsleiste
BlumeOr Inhalte einfügen und formatieren