Kurzanleitung. Individuelle Schnellsuchmaske

Transkript

1 Kurzanleitung Individuelle Schnellsuchmaske 1

2 Inhaltsverzeichnis Inhaltsverzeichnis...2 Übersicht...3 Das Einbinden der Schnellsuchmaske...5 Anpassen des Layouts...7 2

3 Übersicht Die Traffics Schnellsuchmaske ist ein Ausschnitt aus einer HTML-Datei, den Sie in Ihrer Webseite einbinden können. Mit dieser Suchmaske können die Besucher Ihrer Webseite Reisen suchen, die folgenden Suchkriterien folgen: Anzahl erwachsener Mitreisender Alter von bis zu drei mitreisenden Kindern Angebotstyp (alle / nur Frühbucher / nur last-minute) Abflughafen Reiseziel Reisedauer Frühester Abflug Spätester Abflug Weiter kann eine Volltextsuche durchgeführt werden, wahlweise unter Anzeige unserer TagClouds. TagClouds sind eine Sammlung von Suchwörtern, die von anderen Benutzern unserer Datenserver häufig für Volltextsuchen verwendet wurden. Sie können in der Suchmaske einzelne dieser Kriterien ausblenden. Sie können die Suchmaske auch farblich und was die Form anbelangt den Gegebenheiten anpassen, die auf der Seite vorliegen, in die Sie sie einbinden wollen. Abbildung 1: Beispiel einer vollständigen Suchmaske 3

4 Abbildung 2: Beispiel einer minimalistischen Suchmaske Um die TagClouds verwenden zu können, muss Ihnen dort, wo Ihre Internetseite gehostet ist, php, eine für Internetanwendungen verbreitete Programmiersprache, zur Verfügung stehen. 4

5 Das Einbinden der Schnellsuchmaske Der HTML-Quelltext der Suchmaske ist in der Datei suchmaske.txt in diesem Paket enthalten. Öffnen Sie die Datei mit einem Texteditor Ihrer Wahl, beispielsweise mit dem Editor aus der Programmgruppe Zubehör von Windows. Markieren Sie den gesamten Text (Tastenkombination <strg><a>) und kopieren Sie ihn in die Zwischenablage (Tastenkombination <strg><c>). Öffnen Sie die HTML-Datei, in die Sie die Schnellsuchmaske integrieren wollen und fügen Sie den Inhalt der Zwischenablage an der gewünschten Stelle ein (Tastenkombination <strg><v>). Der HTML-Code der Schnellsuchmaske steht zwischen den HTML-Tags <div> und </div> und bildet damit von sich aus einen Block. Abbildung 3: Beispiel Umfluss Standardmäßig wird dieser Block, wie in Abb. 3 Zu sehen ist, von den folgenden Inhalten umflossen. Sie können die Suchmaske aber auch so einstellen, dass folgender Inhalt unter der Box angeordnet wird. Doch dazu später. Damit die Maske überhaupt ein Layout bekommt und die Funktionalität hat, nach Reisen suchen zu können, müssen noch zwei Zeilen in den Header ihrer Seite eingebunden werden. Diese beiden Zeilen stehen in der mitgelieferten Datei suchmaske-header.txt. Öffnen Sie die Datei wie oben beschrieben, kopieren Sie die beiden Zeilen und fügen Sie sie analog zur Darstellung in Abbildung 4 in Ihre HTML-Seite ein. 5

6 Abbildung 4: Ausriss aus einer HTML-Datei Zwischen <head> und </head> können bei Ihnen durchaus noch weitere Zeilen stehen. Lassen Sie diese unverändert. (Die farbliche Hervorhebung und die Zeilennummerierung muss Ihr Editor nicht zwangsläufig auch beherrschen.) Nun müssen sie noch an den dafür vorgesehenen Stellen (hier in den Zeilen 15 und 14) Ihre Traffics-Lizenznummer eingeben (z.b. var customer_cfg = ' ') und, wenn Sie einen individuellen Templatesatz haben, bei customer_thm den Pfad zu Ihren Templates. Dieser lautet in der Regel in etwa wie folgt: Die in den Ordnern images, javascript und css mitgelieferten Dateien müssen nun noch in gleichnamige Ordner im Hauptverzeichnis Ihres Webservers kopiert werden. Fragen Sie im Zweifelsfall Ihren Webhoster. Statt des mitgelieferten Bildes können Sie selbstverständlich ein Bild Ihrer Wahl als Schaltfläche zum Absenden der Suchanfrage verwenden. Falls Sie für Ihr Bild einen anderen Namen verwenden müssen, beispielsweise weil Sie selbst schon ein Bild dieses Namens verwenden, dann müssen Sie im Code der Schnellsuchmaske den Namen ebenfalls anpassen. (siehe Abbildung 5) Abbildung 5: Ausriss aus dem Schnellsuchformular: Bildname ändern Die mitgelieferte Datei tagclouds.php legen Sie, sofern Sie die TagClouds zusätzlich zur Volltextsuche anzeigen wollen, im Hauptverzeichnis Ihres Webservers ab. Zuvor öffnen Sie sie bitte und geben Sie Ihre Traffics-Lizenznummer auch dort ein. Abbildung 6: Lizenznummer in tagclouds.php 6

7 Die Schnellsuchmaske kann prinzipiell sowohl für den Comfort 2.0 verwendet werden als auch für den Comfort 2.0 T5. Standardmäßig wird der neuere Comfort 2.0 T5 angesteuert. Die Einstellung steht am Anfang der mitgelieferten Javascriptdatei. Wenn Sie version auf 2.0 stellen, wird die ältere IBE Comfort 2.0 angesteuert. Abbildung 7: Einstellung der IBE Version Was passiert nun, wenn ich das Suchformular abschicke; wo wird die Buchungsmaschine angezeigt? Grundsätzlich ist es so, dass die Buchungsmaschine den Inhalt der Seite, in der die Suchmaske sich befindet, ersetzt. Möchten Sie, was in der Regel der Fall ist, dass der Kopf-, Fuß- oder Seitenbereich Ihrer Seite stehen bleibt, bietet es sich beispielsweise an, ein Frameset zu benutzen und die Schnellsuchmaske in einen Frame zu setzen, in dem sich außer der Suchmaske nur Dinge befinden, die nach Absenden der Suchanfrage verschwinden dürfen. Darüber hinaus können Sie auch durch eine kleine Anpassung des beiliegenden JavaScripts die Buchungsmaschine in einen bestimmten Frame laden lassen. Abbildung 8: Anpassung des JavaScripts: IBE in anderem Frame laden In Zeile 145 des Ausrisses steht die Standardzielangabe. In den Zeilen 146 und 147, die hier auskommentiert sind, stehen Beispiele, wie man die IBE in den übergeordneten Container bzw. in den Frame mit dem Namen NAME_DES_FRAMES des übergeordneten Containers laden kann. 7

8 Anpassen des Layouts In diesem Abschnitt beschreiben wir, wie Sie die Suchmaske farblich anpassen können und wie Sie einzelne Suchkriterien ausblenden können. Das Aussehen der Schnellsuchmaske wird über sogenannte Cascading Style Sheets gesteuert. Diese sind im Ordner css in der Datei traffics-suchmaske.css gespeichert, die wir gerade im <head>-teil der HTML-Datei eingebunden haben (siehe Abschnitt B). Alternativ dazu können Sie auch eine Variante davon, die Datei traffics-suchmaske-v2.css benutzen. Diese ist für geübtere Anwender vorgesehen und ist schon so angelegt, dass Sie die einzelnen Auswahlboxen für Suchkriterien frei anordnen können. Abbildung 9: Ausriss aus CSS-Datei Doch zunächst zur Standardvariante. Sie können die CSS-Dateien wieder mit jedem beliebigen Texteditor bearbeiten. Abbildung 7 zeigt einen Ausschnitt. Die Datei ist wie folgt aufgebaut: Die Angaben, die das Aussehen der Webseite beeinflussen, stehen innerhalb geschweifter Klammern als CSS-Eigenschaft:Wert;. Vor der öffnenden geschweiften Klammer steht ein sogenannter Selector, der bezeichnet, auf welches Element im HTML- Quelltext sich die Layoutangaben beziehen. Angaben, die zwischen /* und */ stehen, sind Kommentare, die keinen Einfluss auf das Ergebnis haben. 8

9 Was können Sie ändern? Beispielsweise ist hier in Zeile 2 zentral die Schriftgröße definiert. Der * bedeutet, dass sich die Angabe auf alle Elemente bezieht, man sagt, sie vererbt sich. Elemente, die direkt mit ihrem Namen angesprochen sind, können diese Eigenschaft überschreiben. Doch all diese Feinheiten hier zu beschreiben, würde zu weit führen. Eine übersichtliche Kurzreferenz findet man unter Wenn Sie nicht, wie weiter oben angedeutet, wollen, dass Nachfolgender Inhalt die Suchbox umfließt, entfernen Sie den Eintrag float: left; im Beispiel in Zeile 6 oder setzen Sie in zwischen die Kommentarzeichen. Die Hintergrundfarben ändern Sie wie folgt: In Abbildung 7 in Zeile 11 sehen Sie die Angabe für die Hintergrundfarbe des Suchfensters notiert. Die Notierung folgt dem Schema # -Zeichen und dann ein sechsstelliger Hexadezimalcode (bestehend aus den Ziffern 0-9 und den Buchstaben A- F). Dieser codiert die Farbe. Alternativ können Sie die Farbcodierung auch durch die Angabe rgb(x,y,z) angeben, wobei x, y und z für die dezimalen Anteile an rot, grün und blau des Farbtons stehen. Diese Farbanteile können Sie beispielsweise mit dem Windowszubehörprogramm paint herausfinden. Abbildung 10: Paint: Farbauswahl Im Beispiel in der Abbildung 8 hätte der gewählte grüne Farbton die Anteile Rot: 47, Grün: 179 und Blau: 64. (Die Werte reichen jeweils von 0 bis 255.) Diesen würden Sie dann wie folgt notieren: background-color: rgb(47,179,64); 9

10 Das Ergebnis: Abbildung 11: Hintergrundfarbe geändert Genauso ändern Sie die Hintergrundfarbe der Titelleiste (im Beispiel Abbildung 7 in Zeile 23) und die Schriftfarbe (color) im Beispiel in Zeile 24. Abbildung 12: Elemente entfernen Wie entfernt man nun Auswahlboxen? 10

11 Abbildung 10 zeigt wieder einen Ausschnitt aus der CSS-Datei. Die Selektoren wie beispielsweise div#searchbox div#frmfts bezeichnen die einzelnen Auswahlboxen. Dabei stehen die variablen Selektoranteile für: FTS: Volltextsuche TC: TagClouds EPC: Anzahl Erwachsener Personen HMI: Abflughafen DSI: Reiseziel MMC: Reisedauer VND: Frühester Abflug BSD: Spätester Abflug KA: Alter mitreisender Kinder Nebenbei bemerkt: Die Namen der Selektoren erklären sich ein wenig aus der Abbildung 11: Ein <div> mit der id frmfts (Zeile 28 in Abb. 11) ist innerhalb eines <div> mit der id searchbox (Zeile 10 in Abb. 11) notiert. Abbildung 13: Erklärung der Selektorennamen Im Beispiel der Abbildung 10 haben wir in den Zeilen 104 und 109 die Kommentarzeichen um die Notierung display:none; entfernt. Damit wird diese Anweisung aktiv und macht das bezeichnete Element hier die Volltextsuche und die TagClouds unsichtbar. Das Ergebnis ist eine kleinere Suchmaske wie in Abb. 9 im Gegensatz zur ausführlichen Suchmaske wie in Abb

12 Wenn Sie die Datei traffics-suchmaske-v2.css einbinden, sind die zuletzt genannten Selektoren schon dazu vorbereitet, jede der einzelnen Boxen nicht nur auszublenden sondern auch frei zu positionieren. Abbildung 14: CSS Varainte 2 Abbildung 12 zeigt einen Ausriss aus dieser CSS-Datei. Neben den bekannten display- Anweisungen finden Sie noch die Angabe position: absolute; Das bedeutet, dass die Elemente relativ zur linken oberen Ecke der Suchmaske an der an top und left notierten Position angeordnet werden. Vergessen Sie in diesem Fall nicht die Box kleiner zu machen, wie in Abbildung 2. Dazu notieren Sie in div#searchbox beispielsweise mit width: 200px; height: 200px; die Breite und die Höhe der Suchmaske. 12

13 Hier noch ein Wort zu den Optionen in der Titelzeile der Suchmaske: Abbildung 15: Auswahl in der Titelzeile Mit diesen Schaltern beeinflussen Sie nicht nur das Suchergebnis; durch Auswahl von Hotels wird auch der Inhalt der Auswahlboxen von Abflughäfen in Reiseziel und von Reiseziel in Hotelkategorie geändert. Beachten Sie dies, bevor Sie diese Boxen ausblenden. Die Auswahloptionen in der Titelleiste selbst können Sie aber, wie Abb. 2 zeigt, ebenfalls ausblenden. Abbildung 16: Ausblenden der Auswahl in der Titelleiste 13

14 Impressum Herausgeber: Traffics Softwaresysteme für den Tourismus GmbH Alboinstr , Berlin Telefon ; Telefax Berlin, Dezember