Tabellen

Um eine schöne Tabelle in deine Hompage einfügen zu können muss du einfach diese 4 Schritte befolgen. Hier erst mal ein Beispiel:

Nr.:	Skype-Status	Name	Homepage	Titel
1	Hier Skype-Status Code einfügen	Chris	zur Homepage	Beispieltext
2	Hier Skype-Status Code einfügen	Wolfgang	zur Homepage	Beispieltext
3	Hier Skype-Status Code einfügen	Tim	zur Homepage	Beispieltext
4	Hier Skype-Status Code einfügen	Paul	zur Homepage	Beispieltext
5	Hier Skype-Status Code einfügen	johann	zur Homepage	Beispieltext

1. Du gehst in den HPBK Login Bereich und gehst auf den Seiteneditor in den Quellcode!

2. Du must alls erstes den Css Code einfügen, damit die Tabelle ihr aussehen bekommt. Diesen Code musst du in den Seiteneditor in den Quellcode einfügen:


<style type="text/css"> <!-- /* Tabelle Breite - Rahmen - Schatten */ .tabelle { width: 460px; padding: 5px; border: 1px solid #c9c9c9; border-spacing: 0px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 4px 4px 7px #c9c9c9; -moz-box-shadow: 4px 4px 7px #c9c9c9; -webkit-box-shadow: 4px 4px 7px #c9c9c9; } /* Aussehen Titelfelder oben */ .titel td { background-color: #202020; color: #FFFFFF; } /* Tabellenspalten Schrift + Innenabstand*/ .tabelle td { font-size: 12px; font-family: arial; padding: 7px 7px 7px 7px; } /* graue Tabellenzeile */ .zeile_grau { background-color: #e2e2e2; } /* weisse Tabellenzeile */ .zeile_weiss { background-color: #FFFFFF;} /* Aussehen Verlinkung */ .homepage a { display: block; width: 72px; padding: 2px 7px 2px 7px; color: #FFFFFF; font-size: 11px; text-decoration: none; border: 1px solid #a9a9a9; background-color: #afb4b4; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* HOVER Verlinkung */ .homepage a:hover { background-color: #006464; } --> </style>

3. Der HTML Code stellt die Tabelle dar:

<table class="tabelle"> <tr class="titel"> <td> Nr.: </td> <td> Skype-Status </td> <td> Name </td> <td> Homepage </td> <td> Titel </td> </tr> <tr class="zeile_weiss"> <td> 1 </td> <td> Hier Skype-Status Code einfügen </td> <td> Hier Name </td> <td class="homepage"> <a href="LINK" _fcksavedurl="LINK">zur Homepage</a> </td> <td> Beispieltext </td> </tr> <tr class="zeile_grau"> <td> 2 </td> <td> Hier Skype-Status Code einfügen </td> <td> Hier Name </td> <td class="homepage"> <a href="LINK" _fcksavedurl="LINK">zur Homepage</a> </td> <td> Beispieltext </td> </tr> <tr class="zeile_weiss"> <td> 3 </td> <td> Hier Skype-Status Code einfügen </td> <td> Hier Name </td> <td class="homepage"> <a href="LINK" _fcksavedurl="LINK">zur Homepage</a> </td> <td> Beispieltext </td> </tr> <tr class="zeile_grau"> <td> 4 </td> <td> Hier Skype-Status Code einfügen </td> <td> Hier Name </td> <td class="homepage"> <a href="LINK" _fcksavedurl="LINK">zur Homepage</a> </td> <td> Beispieltext </td> </tr> <tr class="zeile_weiss"> <td> 5 </td> <td> Hier Skype-Status Code einfügen </td> <td> Hier Name </td> <td class="homepage"> <a href="LINK" _fcksavedurl="LINK">zur Homepage</a> </td> <td> Beispieltext </td> </tr> </table>

4. Den Skype- Status einfügen:

- hier findest du den Skype-Status-Code 
- im Generator den Nutzernamen einfügen
- wähle aus: "Skype Status anzeigen"
- wähle aus bei Funktion: "mit mir chatten"
- wähle aus bei Inhalt: "Symbol und Text"
- wähle aus bei Größe: "klein"
- kopiere den fertigen Status-Code
- ersetze im Tabellencode das Hier Status-Code einfügen durch den Status-Code 

5. Hompage Link einfügen: 
- ersetze nur das Wort LINK durch gewünschten Homepage-Link
- z.B. http://www.meine-page.de.tl
- die Verlinkung bekommt automatisch das Aussehen eines Buttons (wie im Beispiel oben)

Dieses Tutorial wurde ihnen von Find-Templates.de.tl angeboten! Diese Seite hat noch viele mehr Tutorials für deine Homepage.