Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Suchfunktion erstellen

Testen Sie unsere 1896 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine Suchfunktion besteht aus einem Formular zur Eingabe des Begriffs sowie einem Programm, um diesen zu verarbeiten. Die Erstellung des Formulars erfolgt in CSS durch Einbindung von HTML-Elementen.

Transkript

Die Aufgabe einer Navigation besteht darin, Ihre Besucher ans Ziel zu bringen und eine Suchfunktion kann dabei durchaus helfen und ist so gesehen ein Teil der Navigation so wie hier im Bild zu sehen. Diese Suchfunktion besteht immer aus 2 Teilen, es gibt zu einem ein Suchformular zur Eingabe des Suchbegriffes im Browser und das besteht aus html und css, das sehen Sie hier bereits als fertiges Exemplar und auf der anderen Seite gibt es auf dem Webserver oder irgendwo anders ein Programm zur Verarbeitung des Suchbegriffes, das dann also, wirklich die hier eingegeben Suchbegriffe nimmt und die Seite tatsächlich durchsucht und eine Ergebnissseite darstellt. Dieses Programm besteht nicht aus html und css und ist auch nicht wirklich Thema dieses Video-Trainings, wenn Sie später nach der Erstellung des Formulars und nach der Gestaltung des Formulars eine wirkliche Suchfunktion einbauen wollen, dann kann man entweder ein Content Management System wie Wordpress oder Contao nehmen, da ist das eingebaut, oder für statische Webseiten benutzt man einen Dienst, wie hier zum Beispiel Swiftype.com Add great search to any Website. Wie das funktioniert, steht hier genau geschrieben oder als Alternative freefind.com, auch hier gibt es die Möglichkeit, sich die Suchfunktio, das Programm für die Suchfunktion, quasi auszuleihen von einem Drittserver. Los geht es aber hier zunächst einmal mit dem Suchformular, das ist die Ausganssposition, es ist noch nicht ganz so hübsch, wie es am Ende sein wird, aber hiermit geht es los und das möchte ich Ihnen als Ausgangsposition kurz vorstellen, denn dieses Suchformular ist bereits auf allen drei Seiten hier eingebaut. Im Quelltext im HTML auf den 3 Webseiten sehen Sie das Suchformular im Navibereich mit dem Navi-Element, das ist ein ganz normales Formular mit einem Label diese Seite durchsuchen, wenn Sie aber genau hinschauen sehen Sie dieses Label hier nicht, weil es ist nicht wirklich nötig, beim Vorlesen einer Webseite ist das aber durchaus hilfreich, deswegen ist es hier mit einer bestimmten Klasse versteckt. Die Klasse hat den fantastischen Namen versteckmich und ist, weil man sie auch an einer anderen Stelle benutzen kann, in fundament.css hinterlegt und hier ist versteckmich position absolute riesenweit links oben -32768px und nach oben auch, also weit jenseits des Bildschirms, keine Breite, keine Höhe das Ding ist weg und schwebt bildlich gesprochen irgendwo unter der Zimmerdecke. So, hier haben Sie das Formular und dieses Formular ist bereits in Aktion also, wenn man jetzt die serverseitige der Suchfunktion einbaut hier, dann würde das bereits funktionieren, aber es sieht noch nicht besonders hübsch aus und das soll jetzt im Folgenden geändert werden.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!