Tabelle
Für einen Footer mit breitem horizontalem Balken verwenden wir in NOF
- eine halbdynamische Tabelle oder
- einen <div> Container
Beide Methoden haben Vor-und Nachteile.
Die Methode Footer mit breitem Balken und halbdynamischer Tabelle wird in diesem Tutorial beschrieben:
Footer durchgehend für alle Browserauflösungen
Wir halten diese Lösung für sehr gut, da sie den unteren Abschluß der Seite immer klar definiert. Bei sehr kurzen Seiten und einer sehr hohen Bildschirmauflösung kann der Seitenhintergrund unter der Footer-Tabelle noch erscheinen, deshalb ist bei kurzen Seiten von dieser Methode eher abzuraten bzw. muss die Gestaltung dies berücksichtigen (hoher Footerbereich).
Anmerkung: Diese Methode funktioniert nicht mit der NOF-eigener Zentrierung (mittels Häckchen in den Layout-Eigenschaften). Die Website-Zentrierung muss mittels Code erfolgen, wie hier beschrieben:
Nützliche Codes und Seitenzentrierung
Darüberhinaus ist diese Methode in der HTML-Ausgabe XHTML nur in NOF11, nicht in NOF12 möglich.
Die Methode mit dem <div> wird in diesem Tutorial beschrieben:
Footer und header im div-Container
Vorteil dieser Methode: der Footer wird immer unten am Bildschirmrand angezeigt.
Nachteil: Der Footer verdeckt Inhalte der Website bei kleinen Bildschirmen, die Gestaltung des Footers wird um einiges schwieriger und der Footer benötigt einen validen Doctype.
Infos zum Thema validen Doctype
Die einfachste Möglichkeit einen HTML Code in eine Tabellenzelle einzufügen ist der mittels eines Textfeldes.
Zuerst erstellen wir uns eine Tabelle mit den entsprechenden Zeilen und Spalten.
Ausserhalb der Tabelle ziehen wir ein Textfeld auf; klicken einmal daneben und dann doppelt auf das Textfeld.
In den Eigenschaften vom Textfeld klicken wir hier:
Anschließend klicken wir in den Textfeldeigenschaften auf HTML:
In dem geöffenten Feld geben wir den HTML Code ein:
Anschließend klicken wir auf OK
Zum Abschluß ziehen wir das Textfeld in die makierte Zelle:
Nach dem Publizieren sehen wir den Effekt:
Wer Wert auf Suchmaschinenoptimierung legt, derjenige kann jeder Tabellenzelle einen Titel (title) vergeben.
Wie gehen wie vor?
Zuerst erstellen wir eine Tabelle. Danach klicken wir zweimal ( keinen Doppelklick ) in die Zelle, in der wir den Title einfügen wollen:
Danach klicken wir in den Tabelleneigenschaften auf Zellen-HTML
Wir klicken dann auf das Symbol <!> ( innen )
Anschließend geben wir den Code für den Title ein; in dieser Form: title=“Eueren Titel eingeben“
Anschließend auf OK klicken.
Nach dem Publizieren sieht es dann beim drüberfahren mit der Maus so aus:
Tabellenzellen verbinden benötigt man häufig z.b: beim Erstellen von einem Kontaktformular oder für Titelzeilen.
Zuerst klicken wir zwei mal ( kein Doppelklick ) auf die Zelle, die auf den Anfang der zu verbindenen Tabellenzelle zeigt.
Danach ziehen wir mit der gedrückten Maustaste über so viele Zellen, wie wir verbinden wollen.
In diesem Beispiel sind es zwei Zellen:
Anschießend klicken die rechte Maustaste. In dem Kontextmenü klicken wir mit der linken Maustaste auf „Zellen verbinden“:
Nun sind die beiden Zellen verbunden:
Zellenabstände einrichten ist ganz einfach.
Zuerst ziehen wir eine Tabelle auf
Wir sehen dann dieses Menü:
Hier steht der Textabstand und der Zellenabstand auf jeweils 2 Pixel.
So sieht es dann aus – Zellenabstand auf 6 Pixel gestellt:
Alternativ erscheint mit Klick auf die Tabelle und F3 das Eigenschaftsfenster der Tabelle. Hier lässt sich der Zellenabstand definieren.
Der Zellenabstand ist besonders interessant, wenn man für die gesamte Tabelle Linienfarben erstellen möchte. Man wählt die Linienfarbe als Hinterrgundfarbe für die Tabelle, stellt den Zellenabstand auf die gewünschte Linienstärke ein, und stellt für die Zellen die Zellen-Hintergrundfarbe ein.