Kurzanleitung „Individuelle Schnellsuchmaske“ - Prima Urlaub

primaurlaub.de

Kurzanleitung „Individuelle Schnellsuchmaske“ - Prima Urlaub

Kurzanleitung

„Individuelle Schnellsuchmaske“

1 von13


Inhaltsverzeichnis

Inhaltsverzeichnis...................................................................................................................2

Übersicht................................................................................................................................3

Das Einbinden der Schnellsuchmaske..................................................................................5

Anpassen des Layouts...........................................................................................................7

2 von13


Ü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 von13


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 von13


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 ) und kopieren Sie ihn in die Zwischenablage (Tastenkombination

).

Ö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

).

Der HTML-Code der Schnellsuchmaske steht zwischen den HTML-Tags und

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 von13


Abbildung 4: Ausriss aus einer HTML-Datei

Zwischen und 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 = '1234567890123456') und,

wenn Sie einen individuellen Templatesatz haben, bei customer_thm den Pfad zu Ihren

Templates.

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 von13


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 -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 7: 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.

7 von13


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 http://de.selfhtml.org/navigation/css.htm

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 8: 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);

8 von13


Das Ergebnis:

Abbildung 9: 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 10: Elemente entfernen

Wie entfernt man nun Auswahlboxen?

9 von13


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 mit der

id frmFTS (Zeile 28 in Abb. 11) ist innerhalb eines mit der id searchbox (Zeile 10 in

Abb. 11) notiert.

Abbildung 11: 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. 1.

10 von13


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 12: 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.

11 von13


Hier noch ein Wort zu den Optionen in der Titelzeile der Suchmaske:

Abbildung 13: 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 14: Ausblenden der Auswahl in der Titelleiste

12 von13


Impressum

Herausgeber:

Traffics Softwaresysteme für den Tourismus GmbH

Alboinstr. 36-42, 12103 Berlin

Telefon 030 590 02 82-0; Telefax 030 48 49 69 51

support@traffics.de, www.traffics.de

Berlin, Dezember 2007

13 von13

Weitere Magazine dieses Users
Ähnliche Magazine