Beispiel für eine Infobox
Hier sehen Sie ein Beispiel
für eine Infobox
und das war schon wieder eine. Auf dieser » Seite können Sie noch viel mehr Infoboxen im echten Einsatz sehen. Hier noch ein paar Infoboxen mit anderen Absatzformaten: Grafikabsatz
, Tabellenabsatz
und Aufzählung
.
Infoboxen bringen Zusatzinformationen dorthin, wo der Leser Sie braucht. So kann man Seiten übersichtlich halten, und dennoch benötigte Informationen dem Leser bieten. Auch die Suchmaschinen finden diese Texte und indizieren diese. Natürlich kann auch das Ersatz-Tool diese Infoboxen indizieren.
Die Boxen lassen sich beim Einblenden mit einer vordefierten Breite, wahlweise a) anpassende Boxhöhe oder b) vorgegebener Box-Höhe und einer relativen Position (x,y) zum Referenztext positionieren. Die Boxen gehen auf und wieder zu, wenn man mehrfach auf den Link clickt. Die Boxen lassen sich verschieben, in der Größe ändern und schließen. Alle Änderungen werden gemerkt, um nach einem Ausblenden beim und Einblenden wieder rekonstruiert. Nach einem Neuladen der Seite sind alle vordefinierten Orginal-Werte wieder vorhanden. Jede Box kann Ihre individuellen Voreinstellungen bekommen.
Eine Box wird durch einen manipulierten externen Link gesetzt. Beginnt ein externer Link mit "http://#" dann wird die folgende Nummer "http://#50" als Referenz zu einem vordefinierten Infotext-Nummer 50 interpretiert. Da externe Links überall gesetzt werden können, erlaubt diese Link-Technik, dass überall in web2date Infoboxen positioniert werden können.
Der auf dieser Seite dargestellte Lösung ist noch die Vorgängervariante. Inzwischen werden die Inhalte der Infoboxen durch speziell benannte Absätze definiert. Um eine Infobox zu definieren gibt man in webtodate einen Textabsatz mit dem Titel "#Infobox" ein und im Text folgt die Nummer der Infobox. Alle folgenden Absätze werden nun eingesammelt bis ein Absatz mit "#Infoend" folgt. In diesem Infoend Absatz kann man Breite. Höhe und relative Position der Infobox noch nachdefinieren. Damit kann eine Infobox beliebige Inhalte bekommen und die Übergabe von Inhalten an die Infobox ist damit der volle Design-Umfang von webtodate (Ausnahme sind Objekte die selber Javascript benötigen, wie Formulare).
1. Download der Styles und Javascripte
Diese Zip-Archiv mit den » Styles
für die Infoboxen downloaden. Es enhält auch das (i)-Logo für die Indikation einer Infobox, die Javascript-Routinen für das Handling der Boxen und einen HTML-Absatz, der die Infotexte definiert und eine leere setup.php.
Sie bekommen:
- style_windows.css, die Styles
- windows.js, zwei Java routinen (nicht anfassen!)
- dhtml.js
- infobox.html (vordefinierte Infotexte <Javascript> zum Kopieren in einen HTML-Absatz)
- picinfo (das Logo)
- setup.php (eine leere Datei, nicht wundern)
Einfach Alles ins Designverzeichnis auspacken.
Hinweis: Da alle Routinen PHP voraussetzen, müssen Sie unter Projekteigenschaften / HTML Optionen die Dateiendung von "HTML" auf "php" abändern (einfach eingeben), oder auf allen Seiten die Option "Skriptfunktion" einzeln einschalten.
Die setup.php wird nur benötigt, um sich die Schachtelungstiefe von web2date übergeben zu lassen. Dass die Datei leer ist, ist völlig korrekt.
2. Integration der Routinen
Hängen Sie den folgenden Code einfach in die global.ccml. Damit werden die Dateien angemeldet und beim Veröffentlichen mit auf den Server hochgeladen.
<cc:asset src="style_windows.css" dst="swi.css" obj="mywindowsstyle">
<cc:asset src="windows.js" dst="windows.js" obj="mywindows">
<cc:asset src="dhtml.js" dst="dhtml.js" obj="mydhtml">
<cc:asset src="setup.php" dst="setup.php" obj="setup">
<cc:picture obj="picinfo" dst="picinfo.jpg" src="pic_info.jpg">
3. Einbau der Routinen ins Design
In der navigation.ccml müssen die Routinen zum Start jeder Seite dazugeladen werden. Ergänzen Sie unmittelbar vor der Anweisung </head> (die Sie in Ihrem Design finden müssen) folgende drei Zeilen. Die Zeile </head> unten dient nur zur Darstellung, wie diese Zeilen einzufügen sind. Diese Zeile </head> darf nicht zweimal in der Datei enthalten sein.
Alter Code:
</head>
Neue Code:
<link rel="stylesheet" type="text/css" href="<cc:print value="&mywindowsstyle.url">" />
<script type="text/javascript" src="<cc:print value="&mydhtml.url">" ></script>
<script type="text/javascript" src="<cc:print value="&mywindows.url">" ></script>
</head>
4. Modifikation der Link-Funktion
In der link.ccml und im Verzeichnis common in der sidebar_link.ccml finden ab Zeile 13/14 folgenden Code. Dabei werden wir nur die "<a..."-Link Anweisung inkl. dem Ende-Code "</a>" durch einen neuen Code ersetzen. Am besten Sie markieren den gesamten neuen Code und ersetzen den alten Block. Die kursiven Texte dienen nur zur Orientierung.
Alter Code (Zeile 13/14):
<cc:if cond="&link.isoffsite">
<a class="link" href="<cc:print value="&link.url">" target="_blank"><cc:print value="&link.caption"></a> </cc:if>
Neuer Code:
<cc:if cond="&link.isoffsite">
<?php
$checklink="<cc:print value="&link.url">";
if (substr($checklink,0,8)=="http://#")
{ $checklink =1* substr($checklink,8,2);
echo "<script type=\"text/javascript\">checkinfo(".$checklink.");</script>";
echo "<a id=\"Window".$checklink."Refa\" ";
echo "class=\"boxlink\" ";
echo "title=\"Click zum Öffnen der Infobox Nr. ".$checklink." zu «<cc:print value="&link.caption">»\"";
echo " href=\"JavaScript: windowAddNr('Window".$checklink."Ref',".$checklink.")\">";
?>
<cc:print value="&link.caption"><cc:printpicture obj="picinfo"></img></a>
<?php
} else
{ echo "<a href=\"<cc:print value="&link.url">\" target=\"_blank\" title=\"Link ins Web\">» <cc:print value="&link.caption"></a>";}
?>
</cc:if>
5. Definieren der Texte
Jetzt kommt der einfachste Teil. Sämtliche Hilfetexte müssen in der jeweiligen Seite vorab definiert sein. Dazu nutzt man folgenden Logik:
Sie setzen einen Textabsatz mit dem Titel "#Infostart" und im Text folgt dann eine Nummer. Alle folgenden Absätze werden nun unter der angegebenen Nummer gespeichert bis ein weiterer Textabsatz mit Titel "#Infoend" folgt. Im Absatz Infoend können Sie zusätzlich das Verhalten der Boxen definieren. Geben Sie in den Absatztext folgende Anweisungen ein:
infotext[SizeX]=320;
infotext[SizeY]=200;
infotext[PosX]=-30;
infotext[PosY]=40;
Die Infobox erschreint in einer Breite von 320 pxl .... und wird 30pixel nach links vom Link-Text geestzt.
Zum Aufsammeln der Texte wurde die page.ccml manipuliert. Aber mit dieser Lösung können Sie auch Bilder, Tabellen, sogar Plugins in eine Infobox integrieren. Kurz: Alles was webtodate ausgeben kann, kann auch in eine Infobox. Je nach Objekt und Design sind die CSS Styles individuell anzupassen.
6. Anwendung
Die Absätze #Infostart und #Infoend definieren, möglichst gleich am Seitenanfang, die Seite aufbereiten. Einfach irgendwo einen Link setzen und als externe Referenz "http://#10" eingeben.
7. Veröffentlichung
Es ist ein Check eingebaut. Wird die Seite ausgegeben, ist aber die Box nicht definiert erscheint in großen roten Buchstaben "Infobox Nr. ? ist undefiniert!". Diese Wirkung wird in windows.js ca. Zeile 44 ausgelöst.
function checkinfo(number){
if (infotext[number]==undefined)
{ document.write("<span style=\"color:#FF0000;font-size:30px;font-weight:bold;\">");
document.write(" Infobox "+number+" ist undefiniert! </span>");
}
}
Hier kann man den Effekt auch ändern, indem man z.B. nichts ausgibt. D.h. solange der User nicht den Link abklickt, fällt gar nichts auf. Es gibt keinen Hinweistext. Das ist dann gut für die Veröffentlichung. Der Code sieht dann so aus:
function checkinfo(number){}
Die aktuelle Lösung mit den Einsammeln von Inhalten aus den vorhandenen Absätzen ist wohl die benutzerfreundlichst Art der Definition. Lediglich muss man die Nummernverwaltung der Inhalte selbständig vornehmen, aber das ist m.E. ein kleineres Übel. Übrigens: Identische Inhalte können Sie durch Schattenkopien von Absätzen herstellen. Die können also auch in der "Infostart" und "Infoend"-Squenz Schattenabsätze einbinden.
8. Funktionen
Es gibt eine Reihe von Funktionen, die Sie am besten selber ausprobieren. Alle Icons sind mit Hilfetexten versehen. Die Funktionen sehen Sie auch in der Grafik rechts beschrieben.
Bestellung
Wenn Sie Bedarf haben, melden Sie sich einfach per Mail (link links unter Kontaktdaten). Sie bekommen ein individuelles Angebot.
