Ein erstes Projekt: Zweispaltige Zeitungsseite mit Bild

Christoph Bühlers HTML-Grundkurs
Eine Tabelle wird angelegt Die geplante Seite soll - gemäß der Einführung in die Aufgabe -  folgendem Entwurf entsprechen:

 

    Überschrift
Bild Text

Text

Die Tabelle wird mit drei Spalten und drei Zeilen angelegt. Die erste Zeile enthält die Überschrift, die zweite Zeile Bild und Text, die dritte Zeile den Rest des Textes.
Den rechten Rand bildet eine schmale Spalte, so wie ein Heftrand, den wir grau unterlegen.
 
Die Ausführung

a1  b1 c1
a2 b2 c2
a3

b3

c3

Tabelle in AOLPress Tabelle in Netscape Composer
Klicken Sie in der Werkzeugleiste auf das Werkzeug "Tabelle"

Legen Sie die Eigenschaften Ihrer Tabelle fest, insbesondere

  • 3 Zeilen
  • 3 Spalten

Wechseln Sie in den Quellcode-Editor und fügen Sie hinter <TABLE (also vor der abschließenden spitzen >-Klammer) ein: width="85%", da die Tabelle nicht den ganzen Bildschirm einnehmen soll.

Klicken Sie in der Werkzeugleiste auf das Werkzeug "Tabelle"

Legen Sie die Eigenschaften Ihrer Tabelle fest, insbesondere

  • 3 Zeilen
  • 3 Spalten
  • Tabellenbreite 85% (da die Tabelle nicht den ganzen Bildschirm einnehmen soll)

.

Verschmelzen Sie die Tabellenzellen
Setzen Sie den Cursor in die Zelle b1 und spannen Sie diese Zelle mit dem Menübefehl Table > Merge Cell über 2 Spalten (colums) und 1 Zeile (rows) - das ist die Vorgabe, die Sie nur  (mit ok) zu bestätigen brauchen.

Machen Sie dasselbe aus der Zelle b 3 heraus.

Setzen Sie den Cursor in die Zelle b1 und gehen Sie über Menü Format > Tabelleneigenschaften in die Registerkarte Zelle. Verändern Sie dort die Vorgabe "Zelle enthält 1 Zeile und 1 Spalte" in "2 Spalten" und bestätigen Sie mit "ok".

Machen Sie dasselbe aus der Zelle b 3 heraus.

Der Netscape Composer hat nun als "Schrott" neue Zellen d1 und d3 produziert. Diese Zellen löschen Sie, indem Sie jeweils den Cursor hineinsetzen und über Menü Bearbeiten > Tabelle löschen > Zelle diese Zellen löschen.

Rand setzen
Die Breite der linken Spalte ("Heftrand") setzen Sie, indem Sie den Cursor in die Zelle a1 setzen, in den Quellcode wechseln und die Zeichenfolge des Quellcodes vor dem Cursor
<TD></TD> in
<TD width="15%"></TD>
ändern, das heißt, in den ersten Zellentag die Weite mit 15% hineinschreiben.
Die Breite der linken Spalte ("Heftrand") setzen Sie, indem Sie über Menü Format > Tabelleneigenschaften > Registerkarte Zelle die Breite der Zelle auf 15% der Tabellenbreite setzen.
Rand einfärben
Da Sie eben bei der Setzung der Spaltenbreite bereits im Quellcode gearbeitet haben, dürfte das folgende kein Problem für Sie sein.

Setzen Sie den Cursor in die Spalte a1, wechseln Sie zum Quelltext über und fügen Sie in den Zellentag die Angabe "#c0c0c0" ein. Der Tag muss dann <TD width="15%" bgcolor="#c0c0c0"> lauten.

Wiederholen Sie das in den Zellen a2 und a3.

Den Rand färben Sie ein, indem Sie den Cursor in die Zelle a1 setzen und über Menü Format > Tabelleneigenschaften > Registerkarte Zelle bei "Zellenhintergrund" das leere Feld rechts neben "Farbe verwenden" anklicken und einen der helleren Grauwerte anwählen.

Machen Sie dasselbe in den unteren Zellen a2 und a3.

Wenn sie vorhaben, mehrere solche Seiten zu machen, sollten Sie sich dieses leere Muster unter einem eigenen Namen abspreichern


zurück zur Startseite Seite zurück Seite vor