Docstoc

Tabellen_ Listen und Frames in HTML

Document Sample
Tabellen_ Listen und Frames in HTML Powered By Docstoc
					                                 Tabellen, Listen und Frames in HTML


Tabellen, Listen und Frames sind die wichtigsten strukturellen Gestaltungselemente von HTML.
Durch geschickten Einsatz können Webseiten übersichtlicher und ansprechender aufgebaut werden. Sie
werden außerdem als Standards von jedem modernen Browser (HTML 3.x/4.x) unproblematisch
wiedergegeben (Listen und Tabellen sogar in reinen Textbrowsern). Aus diesem Grund ist vor allem für
wissenschaftliche Dokumentationen die Verwendung sehr empfehlenswert.

Listen sind sehr einfache Strukturen, in erster Linie für Aufzählungen, kurze Erläuterungen in Absätzen,
punktuelle Gliederungen

Tabellen sind wesentlich vielseitiger aber auch aufwendiger in der Kodierung. Die Matrixform der Tabelle
(Zeilen und Spalten) teilt die Seite in einzelne Felder (Zellen) die mit individuellen Rahmen, Hintergrund-
und Textfarbe, verschiedensten Inhalten (Texte, Referenzen (Links), Grafiken, Zahlen Formeln und wieder
Tabellen) gefüllt werden können.

Frames teilen ebenfalls eine Webseite, aber in unabhängige "Bildschirme", in denen jeweils eigene
Webseiten dargestellt und geändert werden können. Der einzige Nachteil ist, daß unbedingt ein grafischer
Webbrowser verwendet werden muß, um die parallele Darstellung zu ermöglichen.


Listen:
Es gibt drei verschiedene Typen:
    Reine Aufzähl-Listen mit Symbol-Punkten:          <UL type= "(circle | square | disc)" >
                                                         <LI> Punkt 1 </LI>
                                                         <LI> Punkt 2 </LI>
                                                      </UL>

   Numerische Listen (geordnete Listen)                 <OL > .... <LI> ... </LI> </OL>
     hat verschiedene "geordnete" Aufzähl-Zeichen (type)
     Per Voreinstellung werden arabische Ziffern für jeden Listenpunkt verwendet.
     Andere Typen:      type = "A" .... Großbuchstaben (A, B, C, ...)
                        type = "a" .... Kleinbuchstaben (a, b, c, ....)
                        type = "I" .... römische Ziffern (I, II, IV, X, L, ....)
                        type = "i" .... römische Kleine Z. (i, ii, iii, iv, v, x, …)

   Definitions-Listen
         <DL>         Überschrift
            <DT> Zwischen-Überschrift (auch mehrzeilig)
                 <DD> Unter-Text </DD>
                 <DD> Weiterer Eintrag </DD>
            </DT> Ende des ersten Abschnitts
            ........
         </DL>        Ende der Definitionsliste
Tabellen

Wie schon erwähnt sind Tabellen sehr vielseitig einzusetzen, wenn auch etwas aufwendig zu kodieren.
Tabellen werden in      <TABLE> ..... </TABLE> eingeschlossen.
Die innere Struktur des Körpers der Tabelle wird in Kopfzeilen (Header) und "Normalzeilen" mit
Spalten-Zeilen:

Äußere Struktur

   <TABLE attribute1 attribut2 .... >
      <TR attribut attribut ... >           Zeilen-Einleitung
         <TH attribute> Text </TH>          Kopfzeile (hervorgehoben) 1.Spalte
         <TH attribute> Text </TH>          Kopfzeile (hervorgehoben) 2.Spalte
         <TH attribute> Text </TH>          Kopfzeile (hervorgehoben) 3.Spalte
      </TR>                                 Ende der ersten Zeile
      <TR attribut attribut ... >           Zeilen-Einleitung – Zweite Zeile
         <TD attribute> Text </TD>          Normalzeile 1.Spalte
         <TD attribute> Text </TD>          Normalzeile 2.Spalte
         <TD attribute> Text </TD>          Normalzeile 3.Spalte
      </TR>                                 Ende der zweiten Zeile
   </TABLE>                        Ende der Tabelle

Wichtigste Gestaltungselemente sind die Attribute:
         border = "0 ... n"        Rahmenstärke in Pixel (0 heißt "kein Rahmen")
         bgcolor = "#rrggbb" Hintergrundfarbe für eine Zelle oder Zellgruppe
         textcolor = "#rrggbb" Textfarbe für eine Zelle (in hexadezimaler Form oder als "keyword")
                                    (rr ... Rotanteil, gg ... Gelb/Grünanteil, bb ... Blauanteil 00 ... FF )
         cellspacing = "0 .." Abstand von nächster Zelle (Gitterlinienbreite)
         cellpadding = "0 .." Abstand vom Zellenrand
         rules = "(all | cols | rows | none | groups)"                                 Gitterlinien- Anzeige
         frame = "(void | above | below | hsides | vsides | lhs | rhs | box | border)" Umrandungs-Linien
         width = "..%" Zellbreite (Spalte) in Prozente oder absoluten Zahlen (pixel)
         height = "0 .. " Zeilenhöhe in Pixel
         align = "(left | center | right)"        Ausrichtung horizontal
         valign = "( top | center | bottom)" Ausrichtung vertikal
         bordercolor = "#rrggbb"                  Rahmenfarben
         bordercolorlight = "#rrggbb"             hell
         bordercolordark = "#rrggbb"              dunkel




   normal                 colspan = "2"                  rowspan ="3"
Frames

Mit Frames kann eine WebSeite in mehrere unabhängige Fenster aufgeteilt werden, die ihrerseits wieder
eigene Seiten (*.htm) sind. Dadurch können die einzelnen Frames auch unabhängig gesteuert werden: d.h.
einige können statisch bleiben, andere können verändert werden ohne das Aussehen der übrigen zu
verändern.
Nachteile:
Diese Vorteile sind leider nur bei grafischen Browsern (z.B. Netscape, MS Internet Explorer) sichtbar . Bei
textorientierten Browsern (z.B.: Lynx) werden nur die Strukturen sichtbar (Links auf die Frameseiten)
Daher sollte beim Einsatz von Frames immer beachtet werden, welche "Zielgruppe" angesprochen werden
soll und ob die notwendigen Voraussetzungen zu erwarten sind.
Es müssen außerdem mindestens drei Seiten generiert und geladen werden (eine Strukturdatei + zwei Seiten
für mindestens zwei Fenster). Je mehr Fenster (womöglich mit Grafik) desto längere Ladezeiten (!) und desto
aufwendigere Verwaltung. Andererseits können Redundanzen (gleichbleibende Teile) vermieden werden, die
bei Änderungen viel Nacharbeit erfordern können.
Wie man es auch betrachtet, es bleibt eine „Glaubensfrage―, ob man Frames einsetzt oder nicht.
Professionelle Designer bieten oft mehrere Versionen (mit und ohne Frames) für ihre Webseiten an.
Jedenfalls sollte man damit sparsam umgehen und nicht mehr als nötig verwenden.


Die Strukturdatei (meistens "index.htm") wird nicht angezeigt, aber als erstes aufgerufen und geladen:
Ein einfaches Beispiel:
   <html>
   <head>
      <title>Frame-Indexdatei </title>
   </head>
   <frameset cols="40%,60%">
      <!—Das Browserfenster wird zunächst in zwei "Spalten" (zu 40% und 60%) aufgeteilt
            und der Inhalt oder Link auf die Seite wird hier definiert -->
          <frame src = "frame1.htm" name=‖fenster1― >
          <frameset rows="30% ,70%">
             <!— Das rechte Fenster wird in zwei weitere horizontale Fenster aufgeteilt -->
             <frame src="frame2.htm" name=‖fenster2‖>
             <frame src="frame3.htm" name=‖fenster3‖>
        </frameset>
   </frameset>
   </html>

Die Seiten "frame1.htm", "frame2.htm", "frame3.htm" müssen bereits erstellt sein, bevor man die Indexseite
aufrufen kann. Die Option „name― dient für weitere Zuordnungen, die dann mit „target=«name»― auf ein
bestimmtes Fenster „fokusiert― werden.


                                                  Frame 2
                    Frame 1



                                                   Frame 3
Ein weiteres simples Beispiel (für die Wirkung der Fokusierung)
1. Die Index-Datei:
    <html>
    <head>
        <title>Indexdatei Simpel</title>
    </head>
    <frameset cols="200, *‖>
           <frame src = "inhalt.htm" name=‖fenster1― >
           <frameset rows="100 ,*―>
               <frame src="kopf.htm" name=‖fenster2‖>
               <frame src="home.htm" name=‖fenster3‖>
         </frameset>
    </frameset>
    </html>

2. Die Seite ―Fenster 1‖ (Meistens ―Inhalt‖):
    <html>
    <head>
       <title>Inhalt</title>
    </head>
    <body bgcolor=‖#e0e0e0‖><center>
    <h2><i>Ziele</i></h2>
    <ul>
       <li><a href=‖home.htm‖ target=‖fenster3‖>Erste Seite</a></li>
       <li><a href=‖ziel1.htm‖ target=‖fenster3‖>Ziel 1 </a></li>
    </ul>
    </center>
    </body>
    </html>

3. Die Seite ―Fenster 2‖ (Kopf, Logo)
    <html>
    <head>
       <title>Kopf-Fenster</title>
    </head>
    <body bgcolor=‖#e0e0e0‖><center>
    <font size=5 color=‖#0000a0‖><i>Meine Homepage</i></font>
    <font size=3 color=‖#00a000‖>(very simple)</font>
    <hr width=‖80%‖ color=‖#a00000‖ size=‖3‖ />
    </center>
    </body>
    </html>

4. Die „Homeseite― (erste Seite im Hauptfenster)
    <html>
    <head>
        <title>Home-Fenster</title>
    </head>
    <body bgcolor=‖#ffffff‖><center>
        <p /><p /><p />
    <hr width=‖80%‖ />
    <font size=4 color=‖#0000a0‖><i>Die Homepage-Seite</i></font>
    <p />
    <font size=3 color=‖#00a000‖>
    Hier werden die ersten wichtigen Informationen mitgeteilt <br />
    Und eventuelle spezielle Verweise (Links) direkt angegeben.
    </font>
    <hr width=‖80%‖ color=‖#0000a0‖ size=‖3‖ />
    </center>
    </body>
    </html>
5. Die „Ziel 1-Seite― (Zweite Seite im Hauptfenster)
    <html>
    <head>
        <title>Ziel-Fenster</title>
    </head>
    <body bgcolor=‖#00e000‖><center>
        <p /><p /><p />
    <hr width=‖80%‖ />
    <font size=4 color=‖#0000a0‖><i>Die Ziel 1 - Seite</i></font>
    <p />
    <font size=3 color=‖#000000‖>
    Dies ist die zweite Seite mit anderen Informationen <br />
    Und anderen Verweisen zu diesem Thema.
    </font>
    <hr width=‖80%‖ />
    </center>
    </body>
    </html>

				
DOCUMENT INFO