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.

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.

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.

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.

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”.

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

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”.

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.

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.

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.
 

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.

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.

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

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.

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.

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”.

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”!

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

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



Für weitere Arbeitsschritte, mir nach!