(Stand: 22.11.24, Adresse: http://www.grammiweb.de/anleitungen/ka_rund.shtml)
Rund bis in die letzte Ecke
Schaut man sich beliebige Webseiten an, so fällt eines schnell auf: HTML macht eckig. Frames glänzen mit eckigen Rahmen, und auch Tabellen werden meist in Kastenform dargestellt. Das muss nicht sein: Mit ein wenig Mehrarbeit machen Sie aus Frameseiten und Tabellen etwas Besonderes.
Runde Frameseiten
Erstellen Sie zunächst das Grundgerüst (index.htm). In unserem Beispiel besteht es aus einer Menüleiste (menue.htm) auf der linken Seite und einem Headbereich (head.htm) oben, in dem zum Beispiel Werbebanner angezeigt werden könnten. Unterhalb des Headers und rechts neben dem Menü wird die Startseite (start.htm) dargestellt.
Quelltext Frameseite
<html>
<head>
</head>
<frameset framespacing="0" border="false" frameborder="0"
cols="150,*">
<frame name="menue" scrolling="no" noresize
src="menue.htm" target="anzeige">
<frameset framespacing="0" border="false" frameborder="0"
rows="90,*">
<frame name="header" scrolling="no" noresize
src="header.htm" target="anzeige">
<frame name="anzeige" src="start.htm">
</frameset>
</frameset>
</html>
Quelltext Menüleiste
<html>
<head>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" link="#FFFFFF"
vlink="#FFFFFF" alink="#A5CBFF" bgcolor="#FFFFFF">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%"
bgcolor="#004080">
<tr>
<td><p>
<font face="Arial" color="#FFFFFF"><b><small> </small></b></font></p>
<p><font face="Arial" color="#FFFFFF"><b><small> </small></b></font></p>
<p><font face="Arial" color="#FFFFFF"><b><small>Menüleiste</small></b></font></p>
<p><font face="Arial" color="#FFFFFF"><b><small>Hier könnten Hyperlinks
verzeichnet
sein</small></b></font></td>
</tr>
</table>
</body>
</html>
Wie im Quelltext zur Frameseite ersichtlich, wird dem Head-Bereich eine Höhe von 90 Pixeln zugeteilt. Aus diesem Grund wird die im Kopfbereich angezeigt Seite in zwei Tabellen unterteilt, von denen die erste eine Höhe von 70 Pixeln und die zweite den restlichen Anzeigebereich beanspruchen sollen.
Als Nächstes muss die "runde Ecke" erzeugt werden: Erstellen Sie in einem Grafikprogramm eine Grafik von 20 Pixeln Höhe und 20 Pixeln Breite. In dieser generieren Sie einen Kreis mit einem Durchmesser von 20 Pixeln. Der Hintergrund der Grafik muss mit dem des Menü- bzw. Kopfbereiches identisch sein (in unserem Beispiel Blau), der Kreis erhält die Farbe der Startseite (Beispiel: Weiß).
Die erzeugte Grafik sollte nun etwa wie folgt aussehen:
Erstellen Sie nun eine neue Grafik mit den Abmessungen 10x10 Pixel. In diese neue Datei kopieren Sie die bereits erstellte und platzieren diese passgenau am linken und am oberen Rand.
Die nun erzeugte Grafik sollte so aussehen:
(Zur Veranschaulichung haben wir einen Rahmen um die erzeugten Grafiken gezogen)
Speichern Sie diese Grafik nun im .GIF-Format unter einem beliebigen Namen ab, in unserem Beispiel haben wir "rundecke.gif" gewählt.
"rundecke.gif" wird nun in die untere der beiden Tabellen des Kopfbereiches eingefügt. Achten Sie dabei auf die Angaben "valign="top"" und "align="left"", um diese passgenau am linken oberen Rand anzufügen. Ebenfalls ist die Angabe "marginheight="0" marginwidth="0" topmargin="0" leftmargin="0"" notwendig, um die standardmässig von Browsern dargestellten Rahmen zu deaktivieren.
Quelltext Header
<html>
<head>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0"
bgcolor="#FFFFFF">
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="100%"
bgcolor="#004080"
height="70">
<tr>
<td width="100%">
<font face="Arial" color="#FFFFFF"><b><small>Kopfzeile</small></b></font>
<p><font face="Arial" color="#FFFFFF"><b><small>Hier könnte ein Werbebanner
erscheinen</small></b></font></td>
</tr>
</table>
</center></div><div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%">
<tr>
<td width="100%" height="130" valign="top" align="left"><img
src="rundecke.gif" width="10" height="10"></td>
</tr>
</table>
</div>
</body>
</html>
Die "Frameseite mit Rundecke" ist nun fertig. Schauen Sie sich doch mal das Ergebnis an.
Runde Tabellen
Wie bei der "runden Frameseite" wird auch für eine runde Tabelle eine Grafik benötigt, die diesmal in vier gleiche Teile getrennt wird: Erstellen Sie wie oben beschrieben eine Grafik von 20x20 Pixeln mit einem Kreis von 20 Pixeln Durchmesser. Wechseln Sie diesmal nur die Farben aus, also, um auf unser Beispiel einzugehen, einen blauen Kreis auf weißem Hintergrund.
Die erzeugte Grafik sollte wie folgt aussehen:
Erstellen Sie nun für jede der vier Ecken eine neue Grafik, in die Sie die Vorlage hineinkopieren und an den Rand anpassen. Speichern Sie sie unter:
"rund1.gif"
"rund2.gif"
"rund3.gif"
"rund4.gif"
Erzeugen Sie nun eine Grafik von drei Zeilen, in der die erste und die dritte Zeile jeweils drei Spalten, die mittlere keine enthält, und geben Sie der Tabelle einen blauen Hintergrund.
|
||
|
||
|
||
Nun können die Ecken eingefügt werden. Hierzu wird in die linke obere Ecke die Grafik "rund1.gif" integriert und die Zelle mit den Attributen "valign="top" align="left"" versehen, um diese auch wirklich passgenau links oben im Zellenbereich anzuzeigen. Wiederholen Sie diesen Vorgang in den anderen drei Ecken, wobei die Attribute "bottom" und "right" für "Boden" und "Rechts" stehen.
Da der Netscape Navigator leere Tabellenzellen nicht darstellt, müssen Sie nun nur noch in die obere und untere mittlere Zeile Inhalt einbringen. Sollte dort kein Text gewünscht sein, fügen Sie einfach ein Leerzeichen ein.
Der endgültige Quelltext der Tabelle
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="90%"
bgcolor="#004080">
<tr>
<td width="10" valign="top" align="left">
<img src="rund1.gif" width="10" height="10"></td>
<td width="100%" bgcolor="#004080">
<p align="center"><small><font color="#FFFFFF"
face="Arial">
<b>Die "runde"
Tabelle</b></font></small></td>
<td width="10" valign="top" align="right">
<img src="rund2.gif" width="10" height="10"></td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small><font color="#FFFFFF"
face="Arial">Schön,
oder?</font></small></td>
</tr>
<tr>
<td width="10" valign="bottom" align="left">
<img src="rund3.gif" width="10" height="10"></td>
<td width="100%"><p align="center">
<font color="#FFFFFF" face="Arial"><small>Ist halt mal was
Anderes...</small></font></td>
<td width="10" valign="bottom" align="right">
<img src="rund4.gif" width="10" height="10"></td>
</tr>
</table></center></div>
Und hier das Ergebnis:
|
Die "runde" Tabelle |
|
Schön, oder? |
||
|
Ist halt mal was Anderes... |
|
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 22.11.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt