alle  

Zurück zur Startseite des X-Zines Diskutiert mit uns Unterstützt uns durch Bestellungen Fantasy-Bücher und -Geschichten Science-Fiction-Bücher und -Geschichten Horror-Bücher und -Geschichten Rollenspiele Trading Card Games PC- und Konsolenspiele Musik Comix

Bedienungsanleitung

Zurück zur Startseite des X-Zines

Erweiterte Suche

Template Services

Eine Einleitung in die Benutzung der freien Template-Services des X-Zine

 

Das X-Zine bietet eine Menge der Informationen frei verfügbar an um sie gefiltert oder ungefiltert auf der eigenen Homepage erscheinen zu lassen. Dieser kurze Artikel schildert, wie dies zu bewerkstelligen ist.

Was ist ein Template

Das Template dient als Vorlage der eigentlichen HTML Datei, die der Surfer in seinem Browser sehen wird. Es ist die komplette Datei mit allen Formatierungen, Bildern und Stylesheets, nur der Inhalt, der eigentliche Text und die Titelzeile fehlt. Statt dessen steht dort, wo der Inhalt hinkommen soll das Wort "[INHALT]" und dort wo die Titelzeile erscheinen soll, steht "[TITEL]".

Das einfachste Template sieht also wie folgt in HTML aus:

<html><head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Meine Homepage - [TITEL]</title>
</head><body>
<h1>[TITEL]</h1>
<p>[INHALT]</p>
</body></html>

Das Beispiel für diesen Service, das hier verwendet wurde und zu Demonstrationszwecken extra bunt aussieht, kann man hier herunterladen: Template.zip (2 KB)


Bilder im Template

Bei der Verwendung von Bildern ist zu beachten, dass das Template zwar auf Euren Servern liegen kann, aber auf dem Server des X-Zine ausgeführt wird. Daher muss jedes Bild so eingetragen werden, dass es mit voll qualifizierten Pfad zu Eurer Homepage ausgestattet ist. Wenn Eure URL "http://www.myurl.de" heißt und das Bild heißt "banner.jpg" und befindet sich im Serververzeichnis "texte/kostenlos/texte/images" dann muss der HTML Eintrag, wie folgt lauten "<img src='http://www.myurl.de/texte/kostenlos/texte/images/banner.jpg' alt='Mein Banner'>". Das gleiche gilt für Hintergründe, so sieht also das Beispiel dann aus:

<html><head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Meine Seite - [TITEL]</title>
</head><body background="http://www.myurl.de/texte/kostenlos/texte/images/hintergrund.gif">
<p>[TITEL]</p>
<p>[INHALT]</p>
<p><img border="0" src="http://www.myurl.de/texte/kostenlos/texte/images/banner.png" width="400" height="40"></p>
</body></html>

Verwenden eines Stylesheets

Alle Styles zu erklären ist uns zu mühsam, hier ist einfach ein Beispiel der möglichen Styles genannt.

a:link { color: #FF0000; text-decoration: none; font-family: Arial; font-size: 9pt }
a:visited { color: #FF0000; text-decoration: none; font-family: Arial; font-size: 9pt }
a:activ { color: #FF6666; text-decoration: none; font-family: Arial; font-size: 9pt }
a:hover { color: #FF6666; text-decoration: none; font-family: Arial; font-size: 9pt }
a.small:link { color: #FF0000; text-decoration: none; font-family: Arial; font-size: 8pt }
a.small:visited { color: #FF0000; text-decoration: none; font-family: Arial; font-size: 8pt }
a.small:activ { color: #FF6666; text-decoration: none; font-family: Arial; font-size: 8pt }
a.small:hover { color: #FF6666; text-decoration: none; font-family: Arial; font-size: 8pt }

td.newsheader1 { color: #181810; background: #444444; border-left:solid 1 #000000;border-top:solid 1 #000000 }
td.newsheader2 { color: #181810; background: #444444; border-top:solid 1 #000000;border-right:solid 1 #000000 }
td.newsheader3 { color: #181810; background: #444444; border-top:solid 1 #000000;border-bottom:solid 1 #000000;border-right:solid 1 #000000}

td.newsliste1 { color: #080800; background: #222222; border-left:solid 1 #000000}
td.newsliste2 { color: #080800; background: #222222; border-left:solid 1 #000000}
td.newsliste3 { color: #080800; background: #222222; border-left:solid 1 #000000;border-bottom:solid 1 #000000}
td.newsliste4 { color: #080800; background: #222222; border-left:solid 1 #000000;border-bottom:solid 1 #000000}

td { color: #080800; font-family:Verdana; font-size: 10pt }
td.liste { color: #080800; background: #000000; border-left:solid 1 #000000}
td.liste2 { color: #080800; background: #222222; border-left:solid 1 #000000}
td.header { color: #181810; background: #444444; border-top:solid 1 #000000;border-bottom:solid 1 #000000;border-right:solid 1 #000000}
td.border { background: #888888;}

p { color: #A0A0A0; font-family: Verdana; font-size: 9pt}
p.small { color: #A0A0A0; font-family: Verdana; font-size: 8pt}
p.mini { color: #A0A0A0; font-family: Verdana; font-size: 6pt}
td { color: #A0A0A0; font-family: Verdana; font-size: 9pt}
cite { color: #A0A0A0; font-family: Verdana; font-size: 8pt}
h1 { color: #A0A0A0; font-family: Verdana; font-size: 18pt; font-weight: normal}
h2 { color: #F3F3F3; font-family: Verdana; font-size: 12pt; font-weight: bold}
h3 { color: #A0A0A0; font-family: Verdana; font-size: 11pt; font-weight: bold}
h4 { color: #A0A0A0; font-family: Verdana; font-size: 10pt; font-weight: bold}

.field { font-family:Verdana;padding:1px;Font-Size:13px; Font-Style:Normal; Font-Weight:Normal;}
.navselect { font-family:Verdana;padding:1px;Font-Size:9px; Font-Style:Normal; Font-Weight:Normal; background-color:#CEBB79; }
option.hell { background-color:#FFFFFF }
option.dunkel { background-color:#AAAAAA}
hr.trenner { color:666622; height=2;border-bottom:1px solid #EEEEEE}

Einstellungen des Channels

Bei verschienden Services, wie Artikel, News, Termine kann man einen bestimmten Channel wählen (ein Kanal, der sich nur mit einem bestimmten Thema befaßt). Dieser Channel läßt sich als Parameter oder als Metatag einstellen. Als Metatag ist komfortabler, wenn man mehrere Dienste mit dem selben Template verwenden will. <meta name="channel" content="Das Schwarze Auge">

<html><head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="channel" content="Das Schwarze Auge">
<title>Meine Seite - [TITEL]</title>
</head><body background="http://www.myurl.de/texte/kostenlos/texte/images/hintergrund.gif">
<p>[TITEL]</p>
<p>[INHALT]</p>
<p><img border="0" src="http://www.myurl.de/texte/kostenlos/texte/images/banner.png" width="400" height="40"></p>
</body></html>

Besondere Zeichen

Leider können manche Browser keine Umlaute, wenn also Themen verlinkt werden ist es sicherer, diese mit den berüchtigten %-Zeichen zu versehen:
Ä = %C4 (196)
ä = %E4 (228)
Ö = %D6 (214)
ö = %F6 (246)
Ü = %DC (220)
ü = %FC (252)
ß = %DF (223)
é = %E9 (232)
á = %E1 (225)

Aufrufen des Templates

Das Template wird auf dem eigenen Server gespeichert. Dann ruft man beim X-Zine den Service ab, unter der Angabe, wo sich das Template befindet und wie der Name des Templates lautet und welchen Service man haben will.

http://www.x-zine.de/service.php?template=http://www.myurl.de/template.htm&service=news

Alle weiteren Parameter stehen bei den Informationen der einzelnen Services.

Anzeigen des Templates auf der eigenen Homepage

Nicht jeder muss auf den ersten Blick erkennen, dass es sich um eine fremde Seite handelt. Um dies zu verhindern gibt es zwei Möglichkeiten. Die erste ist die Verwendung von Frames, beispielsweise ein Navigationsframe. Dabei wird links eine Navigation und rechts der Inhalt angezeigt.

<frameset cols="150,*">

<frame name="Navigation" target="Hauptframe" src="menue.htm">
<frame name="Hauptframe" src="http://www.x-zine.de/extern?template=http:/www.myurl.de/template.htm&service=news">

<noframes><body><p>Diese Seite verwendet Frames. Frames werden von Ihrem Browser aber nicht unterstützt.</p></body></noframes>

</frameset>


Die zweite Möglichkeit ist das Ausführen eines Scripts um den Inhalt zu holen und dann als eigenen darzustellen. Das folgende Beispiel ist in php geschrieben (keine Gewähr auf Lauffähigkeit).
<?php
$url = "http://www.x-zine.de/extern?template=http:/www.myurl.de/template.htm&service=news";
$fhandle = fopen($url, "r");

if ($fhandle)
{
   $fcontent = fread($fhandle, 60000); //maximal 60KB
   fclose($fhandle); 
   echo $fcontent;
}
else
   echo "Fehler beim Zugriff auf die Adresse";
?>

 

 

 

Zurück

Alle Bilder und Texte sind urheberrechtlich geschützt. Kopieren ohne Genehmigung ist untersagt!