Internetseiten mit KompoZer - Grundlagen

Tabellen

Ziele

Browserdarstellung von HTML-Dokumenten

Zu Beginn des Lernpfads hast du schon gemerkt, dass Internetseiten im Gegensatz zu beispielsweise Zeitungen nicht auf ein bestimmtes Format (wie z.B. A4) festgelegt sind. Der Browser stellt die HTML-Datei genau passend zu der Größe deines Browserfensters dar. Aufgabe eines guten Web-Designers ist es, seine HTML-Dokumente so zu gestalten, dass der Inhalt immer ansprechend dargestellt wird.

Dies hast du am Anfang schon ausprobiert als du die Größe des Browserfensters verändert hast. Hast du bermerkt, dass die Zuordnung Text - Bild immer korrekt bleibt?

(Dafür hast du auf Icon Fenster Verkleinern oben rechts geklickt und die Maus anschließend in eine Ecke des Fensters bewegt, bis ein Pfeil erscheint. Dann hast du die linke Maustaste gedrückt gehalten und die Größe des Fensters verändert.)

Nun gibt es zwei Möglichkeiten, Text und Bilder gezielt anzuordnen:

  1. mit Tabellen (Das lernst du hier)
  2. mit Layer und Stylesheets

Mit Tabellen arbeiten

Die Anweisungen zum Arbeiten mit Tabellen kannst du dir in folgendem Tutorial ansehen.
Solltest du das Video nicht abspielen können oder keine Kopfhörer dabei haben, gibt es auch eine alternative Anleitung.


Organisiere das Layout beim Mars in Form einer Tabelle wie unten vorgegeben:

  • Die Tabelle soll 2 Zeilen und 2 Spalten haben.
  • In der linken Spalte steht der Text mit der dazugehörigen Quelle. Die beiden Zellen sollen verbunden werden.
  • In der rechten oberen Zelle ist das Bild.
  • In der rechten unteren Zelle ist die Quellenangabe zum Bild.
    (Wenn du sie noch nicht eingefügt hast, findest du sie hier)
  • Im Gegensatz zur unteren Abbildung soll die Tabelle keinen Rand haben.
Computer-Eule
Screenshot: Vorgabe Layout von Abschnitt Mars

Der Abschnitt zum Mars sieht aus wie in der Arbeitsanweisung?

Nun bist du fast am Ende des Lernpfads. Wenn dir KompoZer schon vertraut ist, dann erfährst du im nächsten und letzten Kapitel der Grundlagen, wie man mit KompoZer Projekte verwaltet.

Sollten dir allgemeine Angebote des Programms KompoZer noch nicht so klar sein, dann lies folgendes Kapitel: Allgemeine Benutzung von KompoZer.

Pfeil weiter