PCNEWS-57 Telekommunikation

Spaltensatz in HTML

Florian Schütz

HTML ist in erster Linie ein Satz von Formatmarken für eine Folge von Text und Grafiken mit Hypertext-Verknüpfungen. HTML war nicht als vollständige Seitenbeschreibungssprache gedacht.

Eine HTML-Seite ist im wesentlichen eine Spalte mit durchgehendem Text mit Grafiken, die mit dem Text fließen, als ob sie selbst Textzeichen wären. Dieses Textfluß-Modell beschränkt die Kontrolle über das Seitenlayout. In HTML Version 2.0 können Sie z.B. kein Layout mit mehreren Spalten, Text und Grafiken in mehreren Ebenen oder rotiertem Text gestalten. Sie können die Größe der Seite und die Breite der Textspalte nicht steuern, da Seitenmaße und Zeilenumbrüche von der Größe des Monitors oder des Fensters, in dem die Seite angesehen wird, und der Schriftgröße, die der Leser im Web-Browser wählt, abhängen. Als Richtlinie können Sie die Zeilenlänge verwenden, die Web-Browser mit einer Standardschrift auf einem Bildschirm von 640 x 480 Pixel anzeigen.

Wollen Sie z.B. mehrzeiligen Text neben einer Graphik anordnen, ist dies nur mit einigen Tricks zu erreichen.

1 Der Multicol-Tag

Dieser Tag ist im Netscape Navigator ab Version 3.0 definiert und erlaubt die spaltenweise Darstellung von Texten im Zeitungsstil.

TEXT

</MULTICOL>

Das Problem liegt aber auf der Hand:

Der Internet Explorer unterstützt diesen Tag nicht (noch nicht ?)

BEWERTUNG: NAJA...

2 Tabelle

Man definiert eine 2 oder mehrspaltige Tabelle und kann z.B.. ein Bild in eine der Spalten setzen

LINKE SPALTE<BR>

</TD><TD ALIGN="LEFT">

RECHTE SPALTE<BR>

</TD></TR>

</TABLE>

Will man nun ein Bild und daneben mehrzeiligen Text, definiert man eine zweispaltige Tabelle und fügt in eine Zelle eine Graphik ein.

BEWERTUNG: GUT

3 vorgefertiges Bild

Sie fertigen sich im Photoshop das Layout an. Photos und Text einfach wie gewünscht anordnen.

Diese Lösung klingt zwar sehr banal, ist oft aber nötig, wenn z.B.. eine bestimmte Schrift (Logo) verwendet werden muß. Der Nachteil liegt aber auf der Hand: die längere Ladezeit.

Um die Ladezeit zu minimieren sollte man im Photoshop auf „indizierte Farben“ umschalten und die Farbpalette reduzieren.

(Metatip—> Auch wenn nur 2 Farben verwendet werden, nicht auf 2 Farben sondern z.B. 5. reduzieren, weil an Kanten minimale Farbverläufe (wenn man vorher in RGB war) angelegt werden. So verhindert man „auspixeln“.)

Dann sollte das Bild als GIF gespeichert werden. Man erreicht normalerweise ein Größe zwischen 5 KB und 10 KB.

(Metatip—> Komprimieren von Bildern für das Internet:

GIF-Komprimierung sollte bei Bildern mit großen, einheitlichen, Farbflächen verwendet werden.

Verwenden Sie JPEG vorallem für Bilder mit stark wechselnden Mustern und Farbverläufen. (Photos, etc.))

BEWERTUNG: NAJA, aber manchmal nötig.

4 Frames

Macht man die Frames unsichtbar, eignet sich dieses System ausgezeichnet zum Anordnen von Seitenelementen. Man kann damit auch (wenn man die Frames mit Prozenten festlegt) ein anpassen der Webseite an die Bildschirmgröße erzwingen.

</frameset>

Die Seite „bild.htm“ enthält z.B.. ein Bild, die Seite „text.htm“ den mehrzeiligen Text.

Mit diesem System kann man z.B.. ein Bild immer genau in der Mitte des Fensters haben, egal wie groß oder klein das Fenster aufgezogen ist: Legen Sie 3 Frames, die das Gesamtfenster in 3 Längsframes (cols) teilt, an. Der mittlere wird wiederum in 3 Querframes (row) gesplittet. Sind alle Frames in Prozenten angegeben, wird der mittlere Frame (in Pixel) immer genau in der Mitte des Fensters sein.

(Metatip—> Man soll es nicht glauben, aber auch heutzutage gibt es noch Browser, die keine Frames darstellen können. Für diese Gäste empfehle ich diesen Programmteil einzubauen, der nur zusehen ist, wenn der Browser nichts mit Frames anzufangen weiß.

Your browser is not able to display frames. Our site is not tested for use with your browser<P>

For best results please use Netscape Navigator (on your CDrom or

<A HREF="http://home.netscape.com/comprod/mirror/client_download.html target=_blank">internet-download</A>)

You can try to visit our site with your browser (but don't be surprised if soemthing doesn't work) by clicking <A HREF="erste.html">here</a>.

</CENTER>

</NOFRAMES>

Metatip—>Ruft man ein Bild als Hintergrundbild auf, wird dieses eine Bild so oft wiederholt, bis das Fenster voll ist.

Unterteilt man den Bildschirm in Frames, kann man jedem einzelnen Frame einen Background zuordnen. Man erhält also plötzlich für jeden Gegenstand 2 Ebenen: Background und „normale“ Ebene.

Ein Beispiel: Sie haben ein Photo (12*12 Zentimeter) Sie wollen, daß sich darauf ein kleiner Bildteil dreht. Ein animated GIF in der Größe von 9*9 lädt ewig, die Bewegung ist außerdem sehr langsam. In diesem Fall bietet es sich an, einen Frame exakt gleich groß (in Pixel) zu definieren, in den Background das Bild legen und vorne nur ein animated GIF von z.B. 1*2 Zentimeter zu haben. Die Ladezeit verkürzt sich und die Besucher Ihrer Webseiten werden es Ihnen danken.

Um ein Beispiel für die Anwendung von Frames (bis zu 12 unsichtbare Frames auf einer Seite), zu sehen, empfehle ich einen Besuch bei der
http://www.gothaer-credit.at.

BEWERTUNG: GUT