vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 2

Tag 12

Erweiterte Gestaltungsmöglichkei ten einer Webseite

Der gestrige Tag war sicher recht anstrengend. Am heutigen Tag steht dafür nicht ganz so viel neuer JavaScript-Stoff auf dem Programm. Uninteressant wird es dennoch sicher nicht. Wir wollen heute nur JavaScript als Hauptthema wieder ein wenig verlassen und uns um einige weitergehende Gestaltungsmöglichkeiten einer Webseite kümmern. Dabei wird also wieder HTML mehr in den Vordergrund geholt. Wir beschäftigen uns heute mit

Diese HTML-Techniken sollen der neue Gegenstand für den zwölften Tag sein, aber wir wollen JavaScript natürlich auch an diesem Tag nicht vergessen. Wir werden auf diese neuen HTML-Gestaltungselemente unsere bisherigen JavaScript-Kenntnissen anwenden und damit einige Praxis erarbeiten.

Listen und Aufzählungen

Eine Aufzählung besteht aus einer Liste, in der eine Reihe von alternativen Möglichkeiten dargestellt wird. Das kennt man ja nicht zuletzt aus Textverarbeitungen, wo es diverse Formen von Aufzählungen gibt. In einer Webseite wird dazu ein äußerer Container benötigt, der den Beginn und das Ende einer Aufzählung festlegt sowie im Inneren des Containers eine Anweisung, die jeden Punkt der Aufzählung spezifiziert.

Der äußere Container

Es gibt unter HTML verschiedene Typen von Listen (wenngleich beileibe nicht so viele, wie Sie aus Textverarbeitungen unter Windows gewohnt sind), welche mit unterschiedlichen Tags definiert werden. Da gibt es zum einen eine nicht-nummerische Liste (Bullet-Liste), welche als Aufzählungszeichen einen Punkt, ein Quadrat oder ein ähnliches Zeichen verwendet. Welches Zeichen konkret verwendet wird, hängt vom Browser und dessen Einstellungen ab. Neuere Browser stellen aber bei gleicher Konfiguration die Bullet-Listen meist gleich dar (in der Regel runde Aufzählungszeichen). Diese Listenform wird in einen Container

<UL>

eingeschlossen.

Eine nummerierte Liste mit automatischer Durchnummerierung der Aufzählungspunkte wird in einen Container

<OL>

eingeschlossen. In der Grundeinstellung werden die Listenpunkte mit normalen Zahlen durchnummeriert. Die nummerierte Liste lässt gegenüber der Bullet-Liste einige Gestaltungsmöglichkeiten zu. Es gibt neben der Nummerierung mit normalen Ziffern insgesamt vier weitere Typen von nummerierten Listen - zwei alphabetisch und zwei römisch nummerierte Listen. Die Auswahl erfolgt über den Parameter type. Die Wertzuweisung kann sowohl in Hochkommata gesetzt werden, aber auch bei den meisten Browsern ohne diese erfolgen:

Bei einer nummerischen Liste kann auch ein Startwert gesetzt werden, was mit einem weiteren Attribut realisiert wird:

start=[Wert].

Beachten Sie, dass für den Wert der type-Angabe - ungewöhnlich für HTML - Groß- und Kleinschreibung von Bedeutung ist.

Der Listenpunkt

Ein Listeneintrag kann über mehrere Zeilen gehen. Dabei ist es egal, ob der Zeilenumbruch durch die Fenstergröße oder einen erzwungenen Zeilenumbruch erzeugt wurde. Ein Listenpunkt beginnt mit dem Tag

<LI>.

Ein Ende-Tag ist sinnvoll, kann aber unterbleiben, denn ein nachfolgender <LI>-Tag erzeugt einen neuen Listenpunkt, der Ende-Tag des Listenbereich beendet einen Listenpunkt ebenso.

Die Listenpunkte sind bei allen Listen gleich. Die Unterscheidung der Liste erfolgt ausschließlich über den äußeren Container.

Beispiel 1:

Geben Sie folgenden Quelltext ein:

<HTML>
<BODY>

<UL>
<LI>Erstens</LI>
<LI>Zweitens</LI>
<LI>Drittens</LI>
</UL>

<OL>
<LI>Erstens</LI>
<LI>Zweitens</LI>
<LI>Drittens</LI>
</OL>

<OL start="3" type="I">
<LI>Erstens</LI>
<LI>Zweitens</LI>
<LI>Drittens</LI>
</OL>

<OL start="1" type="i">
<LI>Erstens</LI>
<LI>Zweitens</LI>
<LI>Drittens</LI>
</OL>

<OL start="5" type="A">
<LI>Erstens</LI>
<LI>Zweitens</LI>
<LI>Drittens</LI>
</OL>

<OL start="1" type="a">
<LI>Erstens</LI>
<LI>Zweitens</LI>
<LI>Drittens</LI>
</OL>

</BODY>
</HTML>

Speichern Sie das Script unter Liste.htm und laden Sie es in einen Browser.

Abbildung 12.1:  Verschiedene Listen

Wenn Sie sich den Quelltext ansehen, werden Sie erkennen, dass es keine Zeilenschaltung und keine Absätze gibt. Eine Aufzählung beginnt immer in einer neuen Zeile und erzeugt am Ende einen weiteren Zeilenvorschub. Ebenso erzeugt jeder Listeneintrag eine neue Zeile. Sie benötigen also keine zusätzliche Absatz- oder Zeilenschaltung.

Anwendung von JavaScript auf Listen

Listen sind nun ein neues Gestaltungselement, auf das wir unsere bisher erworbenen JavaScript-Kenntnisse anwenden können. Wir wollen zum Auslösen der JavaScript-Funktionen mit Event-Handlern arbeiten. Das nachfolgende Beispiel funktioniert jedoch nur im Internet Explorer.

Beispiel 2:

Geben Sie folgenden Quelltext ein:

<HTML>
<SCRIPT language="JavaScript">
function pos()
{
window.status="X-Position " + event.clientX +
", Y-Position " + event.clientY;
}
function lp1()
{
alert("Dazu gibt es dies und jenes zu sagen");
}
function lp2()
{
alert("Dazu gibt es auch was zu sagen");
}
function lp3()
{
alert("Dazu gibt es nix zu sagen");
}

function loesche()
{
window.status="";
}
</SCRIPT>
<BODY>
<UL onMouseOver="pos()">
<LI onClick="lp1()">
Erstens
</LI>
<LI onDblClick="lp2()">
Zweitens
</LI>
<LI onMouseOut="lp3()">
Drittens
</LI>
</UL>
</BODY>
</HTML>

Speichern Sie das Script unter ListeJS.htm und laden Sie es in den Internet Explorer.

Beachten Sie, dass die Event-Handler sowohl im äußeren Listencontainer als auch in den einzelnen Listen-Tags untergebracht sind.

Abbildung 12.2:  JavaScript-Aktivität in der Statuszeile und in Form eines Mitteilungsfensters

Bewegen Sie den Mauszeiger auf die verschiedenen Einträge in der Liste. In der Statuszeile wird jeweils die X-/Y-Position des Mauszeigers angezeigt.

Auf dem ersten Eintrag können Sie mit einem einfachen Klick eine JavaScript-Funktion aufrufen, beim zweiten Eintrag per Doppelklick und beim dritten, indem Sie den Mauszeiger einfach aus dem Bereich des Eintrags wieder herausbewegen. Beachten Sie, dass gleichzeitig das onMouseMove permanent die Statuszeile aktualisiert.

Alternative aktive Listen

Wenn man Listen aktiv machen will, sollte man nicht außer Acht lassen, dass jeder Listeneintrag auch ein Hyperlink sein kann. Von dieser Tatsache kann man vielfältig Gebrauch machen. Entweder, um die Hyperlink- Funktionalität zur Weiterleitung direkt zu verwenden, die größere Unterstützung von Event-Handlern in Hyperlinks auszunutzen oder darüber als Inline-Referenz JavaScripte aufzurufen.

Tabellen

Tabellen sind ein außergewöhnlich flexibles und wichtiges Stilmittel in Webseiten. Das Thema ist ziemlich umfangreich, und wir geben hier nur einen kleinen Überblick über das, was Sie als JavaScript-Programmierer über Tabellen in HTML wissen sollten. Für ausführlichere Details sei auf weiterführende HTML-Literatur verwiesen.

Eine Tabelle wird immer über einen sich außen befindenden Container

<TABLE>

umschlossen. Im Inneren gibt es für jede Zeile einen

<TR>

-Container, in dem dann für jede Zelle ein weiterer Container zu notieren ist. Dabei gibt es zwei Formen von Zellen. Die so genannten Kopfzellen, in denen Text hervorgehoben (zum Beispiel fett - das hängt vom Browser und den Einstellungen ab) dargestellt wird, werden in der Regel als Überschrift einer Spalte verwendet (das ist aber nicht zwingend). Kopfzellen werden mit

<TH>

festgelegt. Die andere Form von Zellen in einer Webtabelle - so genannten Datenzellen - wird mit

<TD>

festgelegt und in der Standardschriftausprägung der Seite dargestellt. Eine Tabelle ist in HTML grundsätzlich erst einmal über Zeilen und darin definierten Zellen aufgebaut.

So sieht also ein Tabellengrundgerüst aus (hier mit zwei Zeilen und zwei Spalten - die erste Zeilen beinhaltet Kopfzellen, die zweite Datenzellen):

<TABLE>
  <TR>
    <TH></TH>
    <TH></TH>
  </TR>
  <TR>
    <TD></TD>
    <TD></TD>
  </TR>
</TABLE>

Beispiel 3:

Geben Sie folgenden Quelltext ein:

<HTML>
<BODY>
<TABLE>
<TR>
  <TH>Mon</TH>
  <TH>DI</TH>
</TR>
<TR>
  <TD>123</TD>
  <TD>234</TD>
</TR>
<TR>
  <TD>567</TD>
  <TD>777</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Speichern Sie das Script unter Tab1.htm und laden Sie es in einen Browser.

Abbildung 12.3:  Eine einfache Tabelle

Sie werden eine 2 x 3-Tabelle erhalten. Die Tabellenstruktur ist aber kaum zu erkennen (was auch sehr oft so gewünscht ist).

Tabellen mit Linien

Wenn die Tabelle sichtbare Rahmen und Gitternetzlinien enthalten soll, müssen Sie den <TABLE>-Tag über den Parameter border erweitern. Wenn Sie das tun (<TABLE border>), wird die Tabelle wie folgt aussehen.

Abbildung 12.4:  Eine Tabelle mit Gitterlinien

Mit der Erweiterung des border-Attributs um eine Wertzuweisung über die Syntax

border=[Pixel]

können Sie auch die Dicke der umgebenden Rahmenlinien in Pixeln angeben.

Abbildung 12.5:  border=30

Die Dicke der Gitternetzlinien in Pixeln lässt sich über den Parameter cellspacing und eine Wertzuweisung festlegen. Es gilt folgende Syntax:

cellspacing=[Pixel]

Abbildung 12.6:  border=30, cellspacing=15

Tabellenausmaße

Die Höhe und die Breite von Tabellen ergibt sich normalerweise automatisch auf Grund des Inhaltes. Sie können jedoch auch die Höhe und Breite von Tabellen explizit angeben, sowohl einzeln als auch zusammen.

Dazu gibt es die allgemein üblichen Parameter

width

und

height

welche den <TABLE>-Tag erweitern. Sie können sowohl mit einer prozentualen Angabe als auch einer Angabe in Pixeln vorkommen. Mit einer prozentualen Angabe wird definiert, wie viel Prozent des Anzeigefensters eine Tabelle maximal einnehmen darf. Syntax:

<TABLE width=[Zahl]% height=[Zahl]%>

Damit werden die Gesamtbreite und die Gesamthöhe der Tabelle prozentual zum Anzeigefenster angegeben. Also nicht mehr der Inhalt, sondern Höhe und/oder Breite des Anzeigefensters sind relevant. Die Angaben zur Höhe und Breite können sowohl einzeln als auch zusammen in beliebiger Reihenfolge verwendet werden.

Abbildung 12.7:  width=100%

Mit einer absoluten Angabe wird die Höhe beziehungsweise Breite in Pixeln definiert. Die Syntax ist weitgehend identisch zu der prozentualen Angabe. Es wird nur das Prozentzeichen weggelassen. Eine absolute Größenangabe der Tabelle macht diese unempfindlich gegenüber Größenveränderungen des Browserfensters. Syntax:

<TABLE width=[Pixel] height=[Pixel]>

Abbildung 12.8:  width=500 - das Browserfenster ist kleiner als die Tabelle

Wenn es sinnvoll erscheint, kann man Prozentangaben und absolute Größenfestlegungen auch mischen. Etwa die Breite auf 100% festlegen, die Höhe aber in Pixeln angeben.

Globale Tabellenfarben

Tabellen erlauben die Festlegung von tabellenweit gültigen Farben. Dabei gibt es zwei tabellenweite Farbangaben, welche im <TABLE>-Tag die globalen Farben in der Tabelle festlegen. Für die Farbangaben sind die üblichen RGB-Werte oder die gängigen Farbnamen erlaubt.

Beispiel:

<TABLE bgcolor="red" bordercolor="green" border=10>

Abbildung 12.9:  Verschiedene Farben beim Rahmen  und Tabellenhintergrund

Es sind wieder die üblichen Farbangaben erlaubt.

Grafiken und andere Objekte in Zellen

Es können in jeder Zelle einer Tabelle statt Text auch beliebige Objekte referenziert werden. Also beispielsweise eine Grafik oder auch ein beliebiges anderes Objekt. Sie müssen nur die Referenz darauf in der Zelle notieren, wo das Objekt erscheinen soll.

Beispiel 4:

Geben Sie folgenden Quelltext ein:

<HTML>
<BODY>
<TABLE
  bgcolor="red"
  bordercolor="green"
  border=10>
<TR>
  <TD>
  <IMG src="101.gif" height=100>
  </TD>
  <TD>
  <IMG src="102.gif" height=100>
  </TD>
  <TD>
  <IMG src="103.gif" height=100>
  </TD>
  <TD>
  <IMG src="104.gif" height=100>
  </TD>
</TR>
<TR>
  <TD>
  <IMG src="105.gif" height=100>
  </TD>
  <TD>
  <IMG src="106.gif" height=100>
  </TD>
  <TD>
  <IMG src="107.gif" height=100>
  </TD>
  <TD>
  <IMG src="108.gif" height=100>
  </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Speichern Sie das Script unter TabImg.htm und laden Sie es in einen Browser.

Abbildung 12.10:  Bilder in einer Tabelle mit farbigem Rahmen und Zellenhintergrund

Sie werden eine 4x2-Tabelle erhalten, wo in jeder Zelle ein Bild geladen ist.

Tabellenzellengestaltung

Sie können zusätzlich zu den tabellenweiten Angaben zur Gestaltung der Tabelle auch jede Zelle individuell behandeln. Diese Angaben gelten dann entweder nur für die betreffende Zelle oder haben maximal Auswirkungen auf eine vollständige Zeile oder Spalte. Etwa wenn eine Höhenangabe für eine einzelne Zelle gemacht wird, damit aber die ganze Höhe der Zeile festgelegt ist.

Ein wichtiger Aspekt ist die Zellenausrichtung. Diese wird im Einleitungs- Tag einer Zelle mit dem üblichen Parameter

align=[Ausrichtung]

festgelegt. Für Ausrichtung können Sie wie üblich

verwenden. Diese Angaben betreffen dann nur diese eine Zelle. Sie haben wie alle inneren Angaben eine höhere Priorität als die Angaben der externen Struktur (etwa der Zeile).

Die Festlegung von Zellenhöhe und -breite erfolgt wie üblich über die Parameter

Mit der Angabe der Höhe oder Breite einer Zelle wird auch jeweils die Höhe einer gesamten Zeile bzw. die Breite der ganzen Spalte festgelegt. Es ist deshalb sogar nur in einer Zelle der jeweilige Zeile/Spalte nötig (und sinnvoll!), eine solche Angabe zu machen.

Sie können für die Höhe und Breite von Zellen wieder prozentuale sowie Angaben in Pixeln machen. Auch Mischen ist erlaubt. Dies ist identisch zu den tabellenweiten Angaben. Sie müssen nur die gleichen Angaben innerhalb der Zellen (sowohl in Kopf- als auch in Datenzellen) möglich machen.

Grundsätzlich sind die Angaben zur Größe einer einzelnen Zelle mit Vorsicht zu verwenden, damit keine Konflikte durch widersprüchliche Angaben entstehen. Solche potentiellen Widersprüche müssen auch bezüglich der globalen Angaben einkalkuliert werden.

Der Inhalt von Zellen lässt sich auch vertikal ausrichten. Dazu werden die Zellen-Tags mit der Angabe

valign=[Ausrichtung]

erweitert. Für Ausrichtung gibt es drei Ausprägungen:

Sie können in jeder Zelle die tabellenweiten Hintergrundfarben verändern. Dazu muss nur der Zellen-Tag um die Angabe

bgcolor="farbe"

erweitert werden. Dabei darf wieder jeder darstellbare Farbwert verwendet werden.

Beispiel 5:

Geben Sie folgenden Quelltext ein:

<HTML>
<BODY>
<TABLE bgcolor="yellow" bordercolor="blue"
border=10 cellspacing=5 width=90%>
<TR>
<TD valign=top align=center>Florian</TD>
<TD valign=middle align=Right>Der Grosse</TD>
<TD><IMG src="101.gif" height=180></TD>
</TR>
<TR>
<TD bgcolor=cyan valign=bottom>Felix</TD>
<TD bgcolor=green align=center>Der Kleine</TD>
<TD bgcolor=red>
<IMG src="109.gif" height=180>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Speichern Sie das Script unter Tab5.htm und laden Sie es in einen Browser.

Abbildung 12.11:  Verschiedene individuelle  Zellenausrichtungen und Farben

JavaScript auf Tabellen anwenden

Wir werden nun einen Teil unserer bisher erarbeiteten Kenntnisse in JavaScript auf Tabellen anwenden und diesen damit eine gewisse Dynamik ermöglichen. Was wir tun wollen, ist - wie bei Listen - mit Event-Handlern auf Aktionen in Tabellen reagieren.

Wir erstellen dazu eine Tabelle, die in der Statuszeile des Browsers eine nähere Erklärung des Zelleninhaltes anzeigt. Bei der zweiten Zeile der Tabelle können Sie zusätzlich auf die Zelle klicken und erhalten eine zusätzliche Erläuterung in Form eines Mitteilungsfensters.

Wir verwenden auch in der nachfolgenden Übung zwei Event-Handler, die bei den referenzierten Elementen nur vom Internet Explorer unterstützt werden. Für den Navigator müssten Sie beispielsweise die Elemente Grafik und Text durch dort unterstützte Elemente (etwa einen Hyperlink) ersetzen oder umgeben.

Beispiel 6:

Geben Sie folgenden Quelltext ein:

<HTML>
<SCRIPT language="JavaScript">
function kurzText(text)
{
window.status=text;
}
function langText(text)
{
alert(text);
}
</SCRIPT>
<BODY>
<CENTER>
<TABLE width=50% height=40%>
<tr>
<th onMouseOver=
"kurzText('Wo kann man das zurückgeben?')">
Winlos
</th>
<th onMouseOver="kurzText('Watn dat?')">
Was
</th>
<th onMouseOver=
"kurzText('Wer kommt zum Essen?')">
Wer
</th>
</tr>
<tr>
<td align=center>
<img src= "201.gif" width=400
onMouseOver="kurzText('Nicht jeder mag Windows')"
onClick="langText('No Windows no cry')">
</td>
<td align=center>
<img src= "202.gif" width=80
onMouseOver="kurzText('Echt Teuflisch')"
onClick="langText('Wenn Zeit, dann bumm')">
</td>
<td align=center>
<img src= "203.gif" width=120
onMouseOver="kurzText('Sie wünschen?')"
onClick="langText('Ups')">
</td>
</tr>
</TABLE>
</CENTER>
</BODY>
</HTML>

Speichern Sie das Script unter TabJS.htm und laden Sie es in einen Browser.

Abbildung 12.12:  Sensitive  Tabellenzellen

Wir haben hier eine zentriert (Tag <CENTER>) im Browserfenster angezeigte Tabelle mit drei Spalten und zwei Zeilen. Die zweite Zeile enthält in jeder Zelle eine Grafik, die innerhalb der Zelle zentriert wird. In der ersten Zeile verwenden wir den Event-Handler onMouseOver als Attribut des Zellen- Tags, in der zweiten Zeile als Attribut der Bildreferenz. Dies hat aber beides die gleiche Auswirkung. Es wird beim Überstreichen mit dem Mauszeiger eine Funktion (kurzText()) aufgerufen. Damit wird in der Statuszeile des Browsers eine Meldung angezeigt. Beachten Sie, dass zwar immer nur eine Funktion aufgerufen wird, die jeweilige Meldung aber als Übergabeparameter an die Funktion übergeben wird.

Wenn Sie auf die Einträge der zweiten Zeile der Tabelle klicken, wird über den Event-Handler onClick eine andere Funktion aufgerufen (langText()). Diese zeigt den jeweils als Parameter übergebenen Wert in einem Mitteilungsfenster an (die alert()-Methode).

Zusammenfassung

Wir haben heute mit Listen und Tabellen zwei wichtige Gestaltungselemente des Webs kennengelernt, auf die JavaScript hervorragend angewandt werden kann. Diese HTML-Techniken sind insofern verwandt, als beide Konstruktionen mit einem sich außen befindenden Container und darin enthaltenen inneren Strukturen arbeiten.

Listen sind relativ einfach und wenig flexibel, aber das ist auch nicht deren Einsatzgebiet. Tabellen hingegen sind aus den meisten Webseiten nicht mehr wegzudenken. Darüber erhält man eine Kontrolle über eine Webseite, wie sie sonst in HTML nicht möglich ist (vielleicht mit Ausnahmen von Frames, die aber dann die Aufsplittung von Webseiten erzwingen - darauf werden wir noch kommen). Eine vergleichbare Kontrolle (und mehr) bekommt man ansonsten nur, wenn man Ergänzungstechniken wie Style Sheets hinzuzieht. Tabellen sind aber als pure HTML-Konstruktionen den Einschränkungen von Ergänzungstechniken nicht unterworfen (fehlende Unterstützung durch Browser, Ressourcenanforderungen, lange Ladezeiten, Deaktivierung in Browsern etc.), sondern werden von allen halbwegs modernen Browsern dargestellt. Dazu kommt bei aller Kontrollmöglichkeit, dass man immer noch den HTML- Interpretationsspielraum der Browser zur Verfügung hat, der komplexe Gestaltungen bei Verzicht auf absolute Festlegungen mit sehr wenigen Anweisungen ermöglicht.

Fragen und Antworten

Frage:
Ab welcher HTML-Version sind Listen dabei?

Antwort:
Ab HTML 2.0.

Frage:
Ab welcher HTML-Version sind Tabellen dabei?

Antwort:
Ab HTML 3.2. Wenn ein Browser diese Version von HTML nicht versteht, kann er Tabellen nicht darstellen. Sollten Sie diese Browser noch bedienen wollen, müssten Sie Alternativen schaffen. Den Jahrtausendwechsel konnte man aber als Ende der Schonfrist für solche Browser ansehen. Es wird wohl nicht mehr viele Browser geben, die keine Tabellen anzeigen können.

Frage:
Wie kann ich die Schrift in Tabellenzellen angeben?

Antwort:
Wie in einer normalen Webseite auch. Sämtliche Gestaltungsanweisungen können Sie auch in einer Zelle einsetzen.

Frage:
Haben wir hier alle Möglichkeiten von Tabellen behandelt?

Antwort:
Nein, aber die wichtigsten. Dennoch - mit Tabellen kann man noch viel mehr machen. Schauen Sie einfach in umfangreicheren HTML- Büchern nach.

Frage:
Tabellen und Listen sind relativ mühsam zu erstellen. Ist es da nicht einfacher, auf Tools zurückzugreifen?

Antwort:
Ja, bei der Erstellung von Listen und Tabellen erleichtern Tools die Arbeit erheblich. Allerdings müssen Sie sich im Klaren sein, dass Tool-generierte Tabellen in der Regel um ein Vielfaches größer werden als von Hand erstellte, die die Eigenschaften von HTML optimal ausnutzen. Das kann im Extremfall dazu führen, dass eine Tabelle - ohne Nutzen - um 2500 Prozent und mehr (!) aufgebläht wird. Das nachfolgende Listing entsteht beispielsweise, wenn unsere winzige Datei Tab1.htm in Excel 2000 geladen und unverändert (!) wieder gespeichert wird (wir brauchen das Listing Tab1Excel.htm gleich noch für den Workshop):

<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 9">
<link rel=File-List href="./Tab1Excel-Dateien/filelist.xml">
<link rel=Edit-Time-Data href="./Tab1Excel-Dateien/editdata.mso">
<link rel=OLE-Object-Data href="./Tab1Excel-Dateien/oledata.mso">
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:LastAuthor>RJS</o:LastAuthor>
<o:Created>2000-07-19T08:32:30Z</o:Created>
<o:LastSaved>2000-07-19T08:32:30Z</o:LastSaved>
<o:Version>9.2625</o:Version>
</o:DocumentProperties>
<o:OfficeDocumentSettings>
<o:DownloadComponents/>
<o:LocationOfComponents HRef="file:E:\msowc.cab"/>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style>
<!--table
{mso-displayed-decimal-separator:"\,";
mso-displayed-thousand-separator:"\.";}
@page
{margin:.98in .79in .98in .79in;
mso-header-margin:.49in;
mso-footer-margin:.49in;}
tr
{mso-height-source:auto;}
col
{mso-width-source:auto;}
br
{mso-data-placement:same-cell;}
.style0
{mso-number-format:General;
text-align:general;
vertical-align:bottom;
white-space:nowrap;
mso-rotate:0;
mso-background-source:auto;
mso-pattern:auto;
color:windowtext;
font-size:10.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial;
mso-generic-font-family:auto;
mso-font-charset:0;
border:none;
mso-protection:locked visible;
mso-style-name:Standard;
mso-style-id:0;}
td
{mso-style-parent:style0;
padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:windowtext;
font-size:10.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial;
mso-generic-font-family:auto;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
border:none;
mso-background-source:auto;
mso-pattern:auto;
mso-protection:locked visible;
white-space:nowrap;
mso-rotate:0;}
.xl24
{mso-style-parent:style0;
font-weight:700;
text-align:center;
vertical-align:middle;
white-space:normal;}
.xl25
{mso-style-parent:style0;
white-space:normal;}
-->
</style>
<!--[if gte mso 9]><xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name>Tab1</x:Name>
<x:WorksheetOptions>
<x:DefaultRowHeight>264</x:DefaultRowHeight>
<x:DefaultColWidth>10</x:DefaultColWidth>
<x:Selected/>
<x:DoNotDisplayGridlines/>
<x:Panes>
<x:Pane>
<x:Number>3</x:Number>
<x:RangeSelection>A1:B3</x:RangeSelection>
</x:Pane>
</x:Panes>
<x:ProtectContents>False</x:ProtectContents>
<x:ProtectObjects>False</x:ProtectObjects>
<x:ProtectScenarios>False</x:ProtectScenarios>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
<x:WindowHeight>6720</x:WindowHeight>
<x:WindowWidth>11760</x:WindowWidth>
<x:WindowTopX>384</x:WindowTopX>
<x:WindowTopY>264</x:WindowTopY>
<x:ProtectStructure>False</x:ProtectStructure>
<x:ProtectWindows>False</x:ProtectWindows>
</x:ExcelWorkbook>
</xml><![endif]-->
</head>
<body link=blue vlink=purple>
<table x:str border=0 cellpadding=0 cellspacing=0 width=63 style='border-collapse:
collapse;table-layout:fixed;width:47pt'>
<col width=34 style='mso-width-source:userset;mso-width-alt:1194;width:25pt'>
<col width=29 style='mso-width-source:userset;mso-width-alt:1024;width:22pt'>
<tr height=18 style='height:13.2pt'>
<td height=18 class=xl24 width=34 style='height:13.2pt;width:25pt'>Mon</td>
<td class=xl24 width=29 style='width:22pt'>DI</td>
</tr>
<tr height=18 style='height:13.2pt'>
<td height=18 class=xl25 align=right width=34 style='height:13.2pt;
width:25pt' x:num>123</td>
<td class=xl25 align=right width=29 style='width:22pt' x:num>234</td>
</tr>
<tr height=18 style='height:13.2pt'>
<td height=18 class=xl25 align=right width=34 style='height:13.2pt;
width:25pt' x:num>567</td>
<td class=xl25 align=right width=29 style='width:22pt' x:num>777</td>
</tr>
<![if supportMisalignedColumns]>
<tr height=0 style='display:none'>
<td width=34 style='width:25pt'></td>
<td width=29 style='width:22pt'></td>
</tr>
<![endif]>
</table>
</body>
</html>

Ohne irgendeinen Nutzen (wenn man in Bezug auf das Web argumentiert - nicht bei HTML als Ersatz für das hauseigene Dateiformat) hat sich die Größe der Datei um den Faktor 25 verschlechtert. Man kann beim Speichern diese Verschlimmerung auch nicht verhindern und eine nachträgliche Optimierung ist extrem schwer. Aber nicht nur Excel arbeitet so - gelinde gesagt - unökonomisch. Auch die meisten anderen Office-Programme und schwache HTML-Tools speichern Tabellen als extrem schlechten Code ab. Ein Großteil des Problems dürfte darauf beruhen, dass die diese Programme versuchen, Tabellen im Aussehen absolut festzulegen. Abgesehen davon, dass dies in vielen Fällen unnötig ist (eine einfache Einstellungsmöglichkeit im Programm könnte den meisten Müll verhindern) - es ist im Web, wie wir schon vielfach gesehen haben, unmöglich. Ein weiterer Effekt ist, dass ältere Browser so eine Tabelle nicht darstellen werden. Vollkommen unsinnig, denn schauen Sie noch mal in dem Beispiel selbst nach, was dargestellt werden soll.

Workshop

Erstellen Sie mit einem grafischen HTML-Editor Webseiten mit Tabellen und Listen, etwa mit dem Composer oder Frontpage. Analysieren Sie hinterher den Quelltext. Am besten erstellen Sie die Tabellen und Listen, welche in diesem Kapitel als Beispiele verwendet wurden. Achten Sie besonders darauf, wie viele - überflüssige - Anweisungen gerade bei diesen Konstruktionen durch solche Tools erstellt werden.

Wenn Sie Excel besitzen, laden Sie die Beispiele aus dem Kapitel und speichern Sie diese mit Excel wieder. Analysieren Sie den Quelltext. Falls Sie kein Excel 2000 verwenden, können Sie die Datei Tab1Excel.htm aus dem Abschnitt »Fragen & Antworten« verwenden.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Wie viele verschiedene Listenformen gibt es in HTML?
  2. Was stimmt nicht an dem Listing?
    <UL>
    <LI type="i">Erstens</LI>
    <LI>Zweitens</LI>
    <LI>Drittens</LI>
    </UL>
  3. Was stimmt nicht an dem Listing?
    <UL>
    <LI>Erstens</LI>
    <LI>Zweitens</LI>
    <LI>Drittens</LI>
    </OL>
  4. Was stimmt nicht an dem Listing?
    <TABLE>
    <TR>
    <TH>Mon</TH>
    <TH>DI </TH>
    </TR>
    <TD>123</TD>
    <TD>234</TD>
    </TR>
    </TABLE>
  5. Ab welcher HTML-Version werden Tabellen unterstützt?



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH