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:

Auf_Textfeld_in_den_Textfeldeigenschaften_klicken

Anschließend klicken wir in den Textfeldeigenschaften auf HTML:

Auf_html_in_den_Textfeldeigenschaften_klicken

In dem geöffenten Feld geben wir den HTML Code ein:

html_code_einfuegung

Anschließend klicken wir auf OK

Zum Abschluß ziehen wir das Textfeld in die makierte Zelle:

textfeld_code_einfuegen

textfeld_in_tabelle_schieben

Nach dem Publizieren sehen wir den Effekt:

html_code_nach_der_publizierung

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:

zelle_verbunden

Danach klicken wir in den Tabelleneigenschaften auf Zellen-HTML

tabelle_eigenschaften

Wir klicken dann auf das Symbol <!> ( innen )

Auf_innen_klicken

Anschließend geben wir den Code für den Title ein; in dieser Form: title=“Eueren Titel eingeben“

Zellen_HTML

Anschließend auf OK klicken.

Nach dem Publizieren sieht es dann beim drüberfahren mit der Maus so aus:

zelle_mit_titel

Um Tabellen fixieren zu können, geht man folgendermaßen vor:

Zuerst makieren wir die äußeren Tabellenzellen und stellen in den Eigenschaften auf Prozent um. Hier sind es 10% von der Gesamtbreite.

Tabelle_fixeren_10_prozent_aussen

Die mittlere Tabelle stellen wir auf Automatisch

Tabelle_fixeren_automatisch_stellen_innen

So sieht es dann nach einer Publizierung aus:

Tabelle_fixeren_nach_einer_publizierung

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:

zellenmakieren

Anschießend klicken die rechte Maustaste. In dem Kontextmenü klicken wir mit der linken Maustaste auf „Zellen verbinden“:

zelle_teilen

Nun sind die beiden Zellen verbunden:

zelle_verbunden

 

 

 

 

Zellenabstände einrichten ist ganz einfach.

Zuerst ziehen wir eine Tabelle auf

Wir sehen dann dieses Menü:

zellenabstand

Hier steht der Textabstand und der Zellenabstand auf jeweils 2 Pixel.

So sieht es dann aus – Zellenabstand auf 6 Pixel gestellt:

zellenabstand_6px

 

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.