So gehts Hier beschreibe ich, wie ich das Krokus-Portal zusammengestellt hab. Es geht einerseits um die Zusammenstellung der Parsimony-Angebote und andererseits um Layout-Details, die einem das Leben erleichtern können oder Spass machen. Am Rande streif ich auch die Domainweiterleitung. Überblick über die Angebote (Stand März 2003 - ohne Gewähr)
Domain mit Frame-WeiterleitungDieses Krokus-Portal war auch eine gute Gelegenheit mal Domainnamen von Billig-Providern auszuprobieren. "Billig-Provider" sind hier keineswegs abwertend gemeint, sondern kennzeichnen Provider, die superbillige Domains im Angebot haben. Und das sind nicht wenige im deutschsprachigen Raum ;-) Auf der Seite "Viel und Billig" beschreibe ich die Features und Preise des speziellen Angebots, das wir für das Krokus-Portal genommen haben. Hier ein paar Infos zu Einrichtung: Die Weiterleitung richtet man bei Hosteurope im Homepagebaukasten ein (ganz unten). Danach muss man noch auf "Layout aktualisieren" oder so ähnlich klicken (noch weiter unten), damit die Einstellung aktiv wird. Das hab ich am Anfang versäumt, weil ich dachte, eine Weiterleitung ist ja kein Layout, aber es war nötig. Ansonsten finde ich den Homepagebaukasten von Hosteurope sehr rudimentär und war froh, dass ich ihn nicht brauche. Die A-Record-Sache ist aber sehr interessant, aber von unserer Seite aus noch nicht spruchreif. Da warten wir erstmal ab, ob soviel Bedarf besteht, dass wir dafür Webserver-Einträge anbieten. Solche A-Record-Einträge gibt es auch nicht überall. Das ist wohl eine Spezialität von Hosteurope. Email-Accounts brauch ich eigentlich nicht, daher hab ich die noch nicht getestet. Das Wichtigste dürfte aber dabei sein (auch mit Web-Mail). Bei Puretec habe ich ein ähnliches Angebot genommen, (http://foren-domain.de). Das hat super geklappt, die Umgebung scheint professioneller, es gibt aber keine A-Records und auch nur eine Weiterleitung fürs Web. Email ist aber dabei. Für die http://foren-domain.de hab ich aber bisher noch kein Portal eingerichtet. Verschiedene Anbieter zu Billig-Domains diskutieren wir im Forum für Weiterleitungs-Domains. Schliesslich sind die hier erwähnten Anbieter nicht zwangsläufig die besten. Design-DetailsHier geht es um Details, die etwas mit dem Aussehen des Krokus-Portals zu tun haben. Verwendung einer zentralen Style-Sheet-DateiAls ich mit dem Krokus-Portal anfing, war mir klar, dass ich viele Parsimony-Angebote integrieren will und dass ich faul bin, zumindest zu faul, um die ganzen Design-Details auf jeder einzelnen Seite und bei jedem einzelnen Angebot komplett einzutragen. Vor allem Änderungen im Aussehen sollen schnell gehen. Also hab ich mich für eine zentrale StyleSheet-Datei entschieden. Diese Datei liegt auf dem Portal-Server. Falls der mal ausfällt, sind zwar alle meinen Seiten weiss, aber die Zeitersparnis wiegt das auf und ausserdem soll es ja eine Hobbyseite sein, die nicht unbedingt immer voll perfekt sein muss. In der StyleSheet-Datei habe ich alle Farben, Schriftarten und ein paar Sonderdinger festgelegt. Die Body-Zeile jeder Seite bleibt dann ohne Einstellungen, also so: <body> Wenn ich was an den Seitenfarben, Hintergründen oder Schriften ändern will, muss ich das nur in der StyleSheet-Datei tun; alle Seiten ändern sich dann automatisch. So sieht die StyleSheet-Datei beim Krokus-Portal aus:
body {color:#FFE13C;background-color:#2C8F21;
background-image:url(http://portal1.parsimony.net/portal3/back.gif)}
body,p,h1,h2,h3,h4,ul,ol,li,div,td,th,address,blockquote,nobr,b,i
{color:#FFE13C;font-family:Comic Sans MS,sans-serif; }
h1,h2,h3 {font-style:italic;}
a:link { color:#FFBF3C; text-decoration:none;}
a:visited { color:#FFC83C; text-decoration:none;}
a:active { color:#FF0000; text-decoration:none;}
a:hover { color:#FF5555;; text-decoration:underline; }
.navlink {font-size:14pt.;font-weight:bold;font-style:italic;}
a.navlink:link { color:#FFBF3C; text-decoration:none;}
a.navlink:visited { color:#FFBF3C; text-decoration:none;}
a.navlink:active { color:#FF0000; text-decoration:none;}
a.navlink:hover { color:#FF5555;; text-decoration:none; }
li.navlink {
list-style-image:url(http://portal1.parsimony.net/portal3/mini.gif)
ul.threadhighlight {
list-style-image:url(http://portal1.parsimony.net/portal3/mini.gif)
Sie heisst: krokus.css So wird sie in die Seiten-Header eingebunden: <link rel=stylesheet type="text/css" href="http://portal1.parsimony.net/portal3/krokus.css"> Bei den Parsimony-Angeboten gibt es für die Seitenheader ein extra Feld in der Bearbeitung. Auf HTML-Seiten wird es im "head"-Bereich der Seite eingebaut. So sieht das aus: <html> <head> <title>Titel der Seite</title> <link rel=stylesheet type="text/css" href="http://portal1.parsimony.net/portal3/krokus.css"> </head> <body> Die StyleSheet-Datei habe ich erstmal lokal auf meinem PC zusammengestellt und getestet und dabei gleich eine Musterseite eingerichtet. Als ich dann mit der Optik grob zufrieden war, hab ich es ins Portal hochgeladen. Mit dieser Basis konnte ich dann das Forum und die anderen Angebote bequem einrichten: Immer nur den Seiten-Header eintragen (meistens bei der Titel-Bearbeitung) und das ganze sonstige Body-Zeug leer lassen. BilderDie Basis für die meisten Bilder auf den Krokus-Seiten sind Fotos, die ich mit meiner älteren Digitalkamera gemacht hab (Baujahr 2000, 2 MegaPixel). Für die Bildbearbeitung hab ich mir vor einer Weile "Ulead Photoimpact" im Aldi für ca. 15 Euro gekauft. Damit bin ich superglücklich, weil es auch Grafik-Laien ermöglicht, ein bisschen mit der Optik zu spielen. Wenn man mit dem Ergebnis sehr flexibel ist, kann man sich da vieles einfach so zusammenklicken. Bei etwas höheren Ansprüchen muss man aber trotz allem Komfort eine Weile üben und bei manchen Sachen fleissig "pinseln". Für den Gras-Hintergrund hab ich zwar eine mitgelieferte Textur gefunden, aber als Hintergrund war es zuerst völlig unbrauchbar, weil man die Ränder genau gesehen hat. Darum hab ich da mindestens eine Stunde lang mit dem Klon-Pinsel rumgewerkelt, bis ich mit der Wirkung halbwegs zufrieden war. Wenn ich allerdings mit einem beliebigen hübschen Hintergrund in grün zufrieden gewwesen wäre, hätte ich das in 1 Minute zusammenklicken können. Auch das Ausschneiden der Krokusse aus den Fotos war ein bisschen Fummelarbeit. Aber ich finde, es hat sich gelohnt. Immer wenn ich ein grosses oder mittelgrosses zusammengeschnippelt hatte, hab ich es auch noch in ganz klein für die Linie genommen. Bei der Linie hab ich einfach mehrere von den Winzbildern miteinander kombiniert. Leider ist Photoimpact nicht so toll, mit transparenten Gif-Dateien. Darum hab ich für das endgültige Abspeichern meinen uralten PaintShopPro genommen. Der macht das ordentlich und sauber. Für diesen Zweck gibt es aber bestimmt auch viele modernere Programme. Krokus-BildershowBei meinen anderen Privat-Seiten bring ich gern auch irgendwas unter, was kein Parsimony-Standard-Angebot ist, weil ich da ein bisschen unverbindlich rumprobieren kann. So gibt es auf http://schlank.net einen BMI-Rechner und eine Rezeptdatenbank, auf http://darkover.4u.org eine interaktive Fortsetzungsgeschichte und bei http://garten.net den Bauernregeln-Service. Dazu brauch ich normalerweise CGI, denn das hab ich ja auf meinen normalen eigenen Domains. Der Witz beim Krokus-Portal war jetzt, ein Gimmick einzubauen, für das ich kein CGI brauche, denn das gibt es bei den Portalen nicht. Dafür hat sich JavaScript angeboten, denn dazu braucht man nur den Browser des Besuchers. Ausserdem spiel ich in letzter Zeit eh gern ein bisschen mit JavaScript rum. Als Thema fiel mir eine zufallsgesteuerte Bilder-Show ein, denn ich hab einige hübsche Krokus-Bilder. Bei http://selfhtml.teamone.de hab ich mir die Grundlagen besorgt und eine Liste mit freien JavaScript-Programmen gefunden. Auf einer dieser Seiten gab es was mit Zufallssteuerung. Das hab ich dann für meinen Zweck umgestrickt. So sieht das Script aus:
<script language="javascript">
<!-- www.javascript.agoentgen.de -->
var zuffi=""
function zufall(zuffi) {
az=zuffi.split(/\s/);
return az[Math.floor(Math.random()*az.length)]
}
function bildershow() {
document.write('<img src=');
document.write(zufall("titel-krokus1.jpg titel-krokus2.jpg titel-krokus3.jpg"));
document.write('>');
}
</script>
(In Wirklichkeit stehen da noch mehr Bilder drin,
aber das würde hier die Zeilenbreite sprengen.)
Das hab ich im head-Bereich der Seite untergebracht. Im body-Bereich der Seite hab ich es innerhalb einer Tabelle aufgerufen. <table bgcolor="#26622B" cellspacing="1" border="3"> <tr><td bgcolor="#1F7E21" height="242" width="322"> <script language="javascript"> bildershow() </script></td> </tr> </table> Die Tabelle hat eine feste Höhe, damit es nicht so hoppelt, wenn die Seite neu geladen wird. Der automatische Seiten-Reload steht widerum im head-Bereich: <meta http-equiv="refresh" content="5;URL=bilder-show.htm"> Die einzelnen AngeboteForumBeim Forum hab ich meinen StyleSheet-Aufruf in die Seiten-Header gestellt (Fortgeschrittene - Seiten-Header). Bei der Navigationsleiste hab ich ein bischen rumgetrickst: Beim Navigationsleisten-Assistenten hab ich das zweite Muster genommen, das mit den Punkten rechts und links von den jeweiligen Links. Dann bin ich in die Bearbeitung der Navigationsleiste (Fortgeschrittene - Navigationsleiste bearbeiten) und hab den vorderen Punkt durch mein Mini-Krokus-Bild ersetzt (<img src=http://portal1.parsimony.net/portal3/mini.gif>). Den hinteren Punkt hab ich weggelassen, damit ich nicht überall zwei Mini-Krokusse nebeneinander hab. Den letzten Krokus am Ende der Zeile hab ich beim Navigationsleisten-Gesamtfuss eingefügt. Weil ich mit Frames arbeite, hab ich noch ein target=_blank beim Homepage-Link-Target eingetragen (Fortgeschrittene - Verschiedenes) Anstelle einer Linie hab ich <img src=http://portal1.parsimony.net/portal3/mini.gif> eingetragen (Fortgeschrittene - Verschiedenes) TagebuchStyleSheet-Aufruf im Seiten-Header (Titelbearbeitung) und Linie (Seitenbearbeitung) wie beim Forum. Ansonsten nutze ich es einfach so, wie es vorgesehen ist. Die Beiträge habe ich teilweise rückdatiert, weil die Ereignisse schon länger zurückliegen. DaHelpaStyleSheet-Aufruf im Seiten-Header (Titelbearbeitung) und Linie (Seitenbearbeitung) wie beim Forum. Hier bringt vor allem die Zukunft noch interessante Entwicklungen. UmfrageStyleSheet-Aufruf im Seiten-Header (Titelbearbeitung) und Linie (Seitenbearbeitung) wie beim Forum. Die Wörter habe ich mit einfachen Font-Tags bunt gemacht. Die muss man bei den Einrichtungs-Formularen ohne Anführungszeichen eintragen, denn bei späterer Bearbeitung schneidet HTML die Inhalte ab einem Anführungszeichen ab. Es sieht also so aus: <font color=#800080>Violett</font> LexikonStyleSheets und Linie bekommt das Lexikon vom Forum, wenn man auf "Lexikon-Daten aktualisieren" klickt. Sonst hab ich da noch nicht viel gemacht. Sorten (aktuelle Angebote)StyleSheet-Aufruf im Seiten-Header (Titelbearbeitung) wie beim Forum. Die aktuellen Angebote habe ich ziemlich umfunktioniert. Ins Preisfeld trag ich den wissenschaftlichen Namen ein. Das Template hab ich teilweise umgestaltet, vor allem wegen dem ehemaligen Preisfeld. Da ich schon an mehreren Stellen ein Impressum hab, hat mich das bei den "Sorten" gestört. Ich hab also einfach den Link-Text "Impressum" leer gelassen. Blieben zwei Linien direkt untereinander, was ja nun nicht so toll aussieht. Also hab ich kurzerhand das offizielle Linienfeld leergelassen und stattdessen eine Linie unter den Einleitungstext gesetzt und eine unten in das Template, damit jede Sorte immer durch eine Blümchen-Linie abgeschlossen wird. WebringStyleSheet-Aufruf im Seiten-Header (Titelbearbeitung) und Linie (Seitenbearbeitung) wie beim Forum. Beim Webring hab ich in der "Schaltzentrale" ein bisschen rumgefummelt. Die Tabelle hat den Gras-Hintergrund bekommen, die Texte und Links sind gelb und wegen meiner Frames hab ich auch noch Targets eingebaut. BotStyleSheets und Linie bekommt der Bot vom Forum, wenn man auf "Bot-Daten aktualisieren" klickt. Ansonsten hab ich da noch nicht viel eingerichtet. Wenn ich mal wieder ein bisschen Luft habe, werde ich ihm ein freundliches Krokus-Gesicht geben und ihm ein paar Krokus-Sprüche beibringen. Für die ernsthaften Fragen werde ich mich aber auf den DaHelpa konznetrieren. |