Benutzung des Netscape Composers

So, weiter geht es mit dem Netscape Composer....

Wir wollen als nächstes eine Tabelle einbauen. Vielleicht machen Sie sich nochmals mit dem entsprechenden Code vertraut. Wie war das? <table> zum Beginn, ggf. mit etlichen Attributen und Parametern, dann ne Tabellenzeile mit <tr> öffnen, dann kommen die Zellen der jeweiligen Spalten mit <td>inhalt</td>, danach Tabllenzeile wieder schließen mit </tr>, danach die nächste Zeile usw., bis sie nach der letzten Zeile die Tabelle mit </table> schließen. Ging's zu schnell? Dann sehen Sie doch bitte nochmals in Modul 1.3 bei unserer Tabellenlektion nach.

Jetzt machen wir mal das Ganze mit dem Composer.

1. Tabellenposition bestimmen und Tabelle einfügen

Cursor auf eine neue Zeile setzen (dort soll die Tabelle eingefügt werden), und in Menuleiste auf Tabellensymbol klicken. Es öffnet sich ein Tabelle-Einfügen Fenster, in dem Sie Eigenschaften (Parameter und Attribut-) vor Erstellung der Tabelle eingeben können (Bild unten).

Geben Sie doch mal 3 Reihen und 3 Spalten an, Rand 2 Pixel und Breite 80% (Bild oben). Klicken Sie dann auf Einfügen/OK.

2. html-Quelltext analysieren

Sie sehen was passiert ist, es wurde eine schöne Tabelle eingefügt. Sehen wir uns mal den vom Composer generierten Tabellencode an (Sie wissen ja bereits, wie Sie dies machen, einfach auf den <html>-Quelle-Reiter klicken. Er sollte so aussehen:

Sieht ein bisschen komplizierter als unsere Handarbeit aus. Wo sind die Unterschiede?

Der Table-tag wurde nicht nur mit dem Attribut border (+ von uns angegebenem Parameter 2) sowie mit dem Attribut width (und dem von uns eingegebenen Parameter 80%) versehen, sondern zwei weitere Attribute, cellpadding und cellspacing wurden automatisch mit angegeben (jeweils mit Parameterwert 2). Die beiden letzteren geben im Wesentlichen den Abstand des Zellinhalts vom Rand ab, wir werden nachher damit spielen, damit Sie die Effekte sehen.

Zusätzlich wurde vor Beginn der ersten Zeile ein Tag <tbody> angegeben, welcher auch vor Ende des Table mit dem entsprechenden Tag geschlossen wird. Der Rest sollte Ihnen relativ vertraut vorkommen, allerdings wurde für jedes Zellentag <td> gleich noch ein Attribut valign mit dem Wert Top angegeben. Hierbei geht es um die Ausrichtung von Text (Inhalt oder Bilder) innerhalb der Zelle. Außerdem wurde als Zellinhalt gleich noch ein Zeilenumbruch <br> angegeben. Eigentlich vollkommen überflüssig, aber er stört auch nicht.

3. Tabelle mit dem Tabelleneigenschaften-Inspektor ändern.

Sie könnten jetzt weitere Zellreihen und weitere Attribute von Hand im Quellcode eingeben, aber das geht auch einfacher. Gehen Sie wieder zurück in den Standard-Editiermodus. Setzen Sie den Cursor in eine Zelle und gehen Sie ins Menu Absatz und rufen dort Tabellenzelleneigenschaften auf. Im aufgehenden Fenster klicken Sie auf den Reiterordner Tabelle und können die Eigenschaften dort ändern, bzw. zusätzliche Zellreihen oder Spalten angeben.

Tipp: Sie hätten auch die Tabelle markieren können (durch Apfeltaste-Klick beim Mac bzw. strlg-click beim PC) und dann durch Doppelklick dasselbe Eigenschaften-Fenster öffnen können. Dann geht das Fenster gleich mit der richtigen Reitereinstellung Tabelle auf. Oder Sie hätten in eine Zelle doppelgeklickt, dann wäre das Eigenschaftenfenster wieder auf der Zellenseiten (die Sie auf Tabelle umschalten könnnen) aufgegangen.

Nachfolgend das entsprechende Fenster, es enthält nun einige Einstellmöglichkeiten mehr, als bei Erstellung der Tabelle.

Ändern Sie nach Belieben die Einstellungen und sehen Sie, was passiert. Klicken Sie dann auch immer in den <html>-Quelle-Modus, um zu sehen, wie der entsprechende Sourcecode aussieht. Die Fortgeschrittenen-Einstellungen werden Sie erst einmal nicht benötigen.

Klicken Sie im Eigenschaften-Fenster dann auch auf Zellen und verändern die Einstellungen dort. Hier können Sie entweder die ausgewählte Zelle in ihren Eigenschaften definieren bzw. ändern oder via Klappmenu auch die Einstellungen für Reihen und Säulen. Wenn Sie aber z.B. die Breite einer Zelle fix in Pixeln definieren, gilt diese auch für die Zellbreiten darüber und darunter. Zellen müssen also prinzipiell die gleiche Breite innerhalb einer Säule haben. Gilt ja auch für Tabellenkalkulationsprogramme. Schreiben Sie auch mal etwas Text in die Zellen. Etliche Einstellungen (z.B. für Hintergrundfarbe) sind nur zu sehen, wenn die Zellen auch gefüllt sind. Machen Sie auch eine Vorschau, um zu sehen, wie das ganze im Browser aussieht.

4. Tabellen als Gestaltungselement Ihrer Seite (Hintergrundfarben, Randunterdrückung etc.)

Hier bereits ein kleiner Vorgriff auf eine spätere Lektion: Tabellen sind ein besonders wesentliches Gestaltungselement für Webseiten, da nur so die Position von Text und Elementen auf einer Seite einigermaßen definiert werden kann. Ansonsten wird Fließtext oder aber auch nebeneinander gestellte Abbildungen einfach umgebrochen, wenn der Benutzer das Browserfenster verkleinert. Insbesondere bei Randeinstellung 0 (border="0") verschwindet der Rand und der Benutzer merkt überhaupt nicht, dass Sie das Layout mit Hilfe einer Tabelle eingerichtet haben. Wir wollen dies und einige andere Dinge nun einmal ausprobieren.

Ändern Sie Ihre Tabelle gemäß unten stehendem Bild. Geben Sie Abstand und Auffüllung (Cellspacing und Cellpadding) mit 6 Pixeln ein. Zentrieren Sie die Tabellenausrichtung. Klicken Sie auf Hintergrundfarbe und wählen aus dem aufspringenden Farbmischfenster eine Farbe (in unserem Beispiel) Gelb für den Hintergrund aus.

Klicken Sie auf ok und setzen dann den Cursor in die 1. Zelle der ersten Zeile in unserer Tabelle. Öffnen Sie dann durch Doppelklick oder über den Menubefehl im Menu Absatz den Zellen-Eigenschafteninspektor. Es erscheint unten stehendes Fenster. Achten Sie darauf, dass bei Auswahl im Klappmenü "Zelle" eingestellt ist. Ihre Änderungen beziehen sich nun v.a. auf diese Zelle. Geben Sie bei Breite 100 Pixel an und wählen eine Hintergrundfarbe für diese Zelle aus. In unserem Beispiel Grün. Klicken Sie auf ok. Sehen Sie sich das Ergebnis an. Die Breite der Zelle wurde wie gewünscht eingestellt (verändern Sie die Fenstergröße, um zu sehen, dass sich die anderen Spalten proportional ändern, die erste Spalte aber in der Breite fix bleibt. Dies gilt für die gesamte Spalte (oder column), es genügt also, die Zellbreite einer Zelle der Spalte einzustellen.

Sie können ja mal sehen, wie diese Tabelle im Webbrowser aussehen würde. Klicken Siei dazu auf das Vorschau-Symbol in der Composer-Kopfleiste. Folgendes sollten Sie sehen:

Sie sehen, wiei die Tabellenränder verschwunden sind und dort die Hintergrundfarbe der Seite durchscheint. Wenn Sie im Tabelleneditor den Zellabstand auf 0 gestellt hätten ( cellspacing="0") würden die Farbfelder direkt aneinander stoßen. Ansonsten sehen die gelbe Hintergrundseite der Tabelle. Sie wird aber durch das Blau der Zeilenhintergrundfarbe der untersten Zeile sowie durch das Grün der Hintergrundfarbe der ersten Zelle ersetzt.

Noch ein Wort zur Hintergrundseite der gesamten Seite. In unserem Beispiel sahen Sie immer ein Weiß, obwohl wir die Hintergrundfarbe für die Seite nicht näher definiert hatten. In diesem Fall wird die Standardhintergrundseite des Webbrowsers des Benutzers eingestellt. In den meisten aktuellen Browsern ist diese auf Weiß voreingestellt (früher war die Voreinstellung meist grau). Der Benutzer kann diese Voreinstellung im Webbrowser aber ändern. Sie könnten unter Einstellungen im Netscape Navigator die Standard-Hintergrundfarbe auf grau, rosa oder auch schwarz stellen. Im letzten Fall könnten Sie die meisten Webseiten nicht mehr lesen, da eine Standardschrift immer Schwarz erscheint. Schwarz auf schwarz macht sich natürlich gut ;-) Ändern Sie also am besten diese Standardeinstellungen Ihres Browsers nicht. Wir kommen in der nächsten Lektion dazu, wie Sie definierte Hintergrundfarben und Hintergrundbilder für Ihre Seite einbauen können. Für diese Lektionsseite habe ich übrigens ein Graua als Hintergrundfarbe eingegeben, damit die Screenshots des Composers sich besser davon unterscheiden. Wenn Sie's nicht mehr erwarten können, wie man das macht: schauen Sie sich doch mal den Quellcode dieser Seite im Menu Anzeigen des Browsers an. Nicht erschrecken, aber sehen Sie mal in den Body-Tag. Dort steht das entsprechende Attribut.)

Machen wir weiter. Geben Sie nun in jede Zelle einen kurzen Text ein. Wir haben hallo 1-9 eingetippt. Ihr Ergebnis sollte Ihre Tabelle im Standardmodus des Composers folgendermaßen aussehen:

Sie sehen, dass die zweite und dritte Spalte proportional gleich breit sind, sich aber proportional verändern, wenn Sie die Größe des Browserfensters verändern (natürlich nur bei Ihrer Seite, nicht bei obigem Screenshot), während die Spalte 1 gleichbreit bei 100 Pixel bleibt. Sie sehen auch, dass die Schrift in der dritten Zeile zentriert wurde (wäre aber auch nachträglich gegangen). Außerdem sehen Sie, dass der nichtsichtbare Rand der Tabellenzeilen durch Rot markiert wird. Dieses Rot ist weg, wenn Sie auf Ansicht klicken (s.u.).

Voilá, jetzt haben wir doch schon ganz schöne Layoutelemente! Sie sollen aber dennoch nochmals den Code durchsehen, damit Sie nachvollziehen, wie diese Tabelle in der html-Sprache definiert wurde. Klicken Sie also auf Quelle, unten stehender Code sollte erscheinen.

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
</head>
<body>
<br>

<table cellpadding="6" cellspacing="6" border="0" width="80%" align="Center" bgcolor="#ffff00">
<tbody>
<tr>
<td valign="Top" bgcolor="#009900" width="100">hallo 1<br>
</td>
<td valign="Top">hallo 2<br>
</td>
<td valign="Top">hallo 3<br>
</td>
</tr>
<tr>
<td valign="Top">hallo 4<br>
</td>
<td valign="Top">hallo 4 </td>
<td valign="Top">hallo 5<br>
</td>
</tr>
<tr>
<td valign="Middle" align="Center" bgcolor="#000099">hallo 6<br>
</td>
<td valign="Middle" align="Center" bgcolor="#000099">hallo 7<br>
</td>
<td valign="Middle" align="Center" bgcolor="#000099">hallo 8<br>
</td>
</tr>

</tbody>
</table>
<br>
<br>
<br>
<br>

</body>
</html>

5. Fortgeschrittene Tabellenformatierung: Zellen verbinden, Tabellen verschachteln etc.

In die Zellen einer Tabelle können Sie übrigens auch Bilder laden (sogar Filmchen), also nicht nur Text. Kommen Sie bereits drauf, wie Sie auf ner Seite nen zweispaltigen Text darstellen können? Wir kommen später drauf. Für die ganz Eiligen bereits hier das Vorgehen: wie wär's mit ner Tabelle aus nur einer Zeile mit zwei Spalten? Border auf 0 setzen, cellspacing auf 6 und ggf. die Tabellenbreite und Spaltenbreite in Pixeln fixieren. Dann reinschreiben. Oder sollen die Spalten noch weiter auseinander sein? Dann eben ne einzeilige, dreispaltige Tabelle ohne Rand und die mittlere Spalte leer lassen und auf gewünschte Breite fixieren. Probieren Sie's einfach aus.

Das ist aber bei weitem noch nicht genug - es gibt noch viel mehrMöglichkeiten mit Tabellen. Sie können mit dem Menu Tabellen (oder auch mit dem durch die rechte Maustaste erreichbaren Kontextmenu) noch jede Menge mehr ändern. Probieren Sie es einfach aus und versuchen Sie, ausgehend von einer Tabelle bestehend aus zwei Zeilen und zwei Spalten folgende Tabellenstruktur zu erstellen. Den jeweils letzen Schritt können Sie im Menü Bearbeiten bei Bedarf rückgängig machen.

Haben Sie es geschafft? Herzlichen Glückwunsch!

Ansonsten ein paar Tipps. Sie können Zeilen und Spalten hinzufügen. Zellen können Sie horizontal verbindenVerbundene Zellen können Sie nachträglich auch wieder teilen (aber eben nur solche Zellen, die zuvor verbunde. n wurden). Zellen können auch vertikal verbunden werden. Dazu müssen Sie die zu verbindenden Zellen aber zuvor markieren (Apfeltaste (Mac) bzw. Stlg-Taste (PC) festhalten und in die zu markierenden Zellen klicken. Wenn Sie mit gedrückter Apfel bzw. Strlg. Tasteauf den Rand einer Zelle klicken, wird übrigens die ganze Tabelle markiert).

So, jetzt sollte es eigentlich klappen. Wenn nicht, hier die Lösung

Sehen Sie nun einmal in den Code Ihrer Tabelle. Die neuen Attribute für das <td>-Tag sind rowspan eingetragen, welches angibt, wieviele Zellen lateral verbunden werden bzw. colspan, welches analog in vertikaler Weise funktioniert.

Übrigens, haben Sie bemerkt. Nicht immer funktionieren die Befehle im Menu der Tabelle. Manche Dinge sind mit html -Tabellen einfach nicht machbar.

Warnung: Sie können auch Tabellen verschachteln. Dazu klicken Sie in die Zelle einer Tabelle, gehen dann ins Menu Tabelle und wählen dort Tabelle einfügen aus. Irre Sache, nicht wahr. Probieren Sie es doch einmal aus und sehen sich den Code hierzu an. Hier sind dann tatsächlich auch die Table-Tags verschachtelt. Nun die Warnung: wenn Sie dies übertreiben und mehrere Tabellen verschachteln, quittieren dies viele weniger leistungsfähige Rechner mit wenig RAM oder alte Browser mit einem netten Absturz beim online-Benutzer. Er wird danach wahrscheinlich vor lauter Schreck nie mehr wieder vorbeisurfen!

So, Sie können Ihre Supertabellen nun natürlich mit Hintergrundfarben und Textinhalt füllen, aber wir wollen diese Tabellen-Lektion nun doch beenden.

Nach einer kleinen Pause können Sie ja weitermachen, um zu sehen, wie Sie mit dem Composer Bilder und Links einfügen.

>> zur letzten Composer-Lektion (Modul 1.6.3: Bilder und Links einfügen, etc.).

Modul 1.6 (2 von 3): Benutzung des Composers von Netscape Navigator 6 als html-Editor. 2. Tabellenerstellung unter Benutzung des Eigenschafteninspektors

`Modul 1.6 (2 von 3)`: Benutzung des Composers von Netscape Navigator 6 als html-Editor.
2. Tabellenerstellung unter Benutzung des Eigenschafteninspektors