Webdesign nach Maß von webdesign weisshart
Das Suchscript in eigene Seiten integrieren
Suchbegriffe: php suchscript
Sie haben das Suchscript installiert, wie in der readme.txt beschrieben.
Wenn Sie mit PHP, HTML & Co. nicht so vertraut sind, sollten Sie dies auf jeden Fall zuerst tun, bevor Sie Versuche mit eigenem Design starten.
Nun wollen sie das Script nahtlos eine Seite einbinden, d.h. ans Design Ihrer Seite anpassen.
Hier kommt eine Schritt für Schritt Anleitung:
Vorab eine Bemerkung:
Die folgenden Arbeiten sollten unbedingt mit einem Texteditor, z.B. dem Editor von Windows (früher: Notepad), durchgeführt werden.
Wysiwyg Editoren wie z.B. FrontPage oder Dreamweaver führen u.U. zu unvorhersehbaren Ergebnissen!
1. Schritt:
Die Seite mit den Suchergebnissen
- Erstellen Sie eine neue Seite mit dem Namen suchen.php (nicht die Beispielseite!). Die Seite muß eine php Seite sein! (Wenn die Seite anders heißen soll, dann bitte wegen des highlighting die FAQ lesen!)
- Diese Seite kann (sollte) alle Komponenten beinhalten, die das Design Ihrer Site bestimmen. Also Kopf, Navigation, usw.
Sie können natürlich auch eine Seite aus Ihrem Projekt quasi als Template verwenden, unter suchen.php abspeichern, und alles nicht benötigte rauslöschen. - In den Inhaltsbereich (also dort, wo normalerweise Text steht) kopieren Sie nur den folgenden Code, und zwar an der Stelle, wo die Suchergebnisse angezeigt werden sollen:
<div id="output"> <?php include("search.php");?></div>
- Wenn Sie bei nur einem Treffer die Zielseite direkt anspringen wollen, dann müssen Sie auch noch diesen Hinweis beachten.
2. Schritt:
Das Suchformular (das Suchfeld)
- Das Suchfeld kann überall auf Ihrer Site eingebaut werden. Also nicht nur auf der Suchergebnisseite, sondern auch auf allen anderen Seiten. Die Seiten mit dem Suchfeld müssen keine PHP Seiten sein.
- Kopieren Sie den html Code für das Suchformular in jede Seite, wo das Suchfeld erscheinen soll, an die Stelle, wo Sie es haben wollen, z.B. ins Navigationsmenü.
<form id="search" method="get" action="suchen.php">
<p>
<label for="suchbegriff">Im Projekt suchen:</label>
<input type="text" name="q" id="suchbegriff" value="Suchbegriff" />
<input type="submit" value="Los !" />
</p>
</form> -
Wenn der Text "Suchbegriff" im Suchfeld beim Betreten des Suchfelds gelöscht werden soll, dann kopieren Sie den Code aus der mitgelieferten Datei suchen.php:
<?php $search = "Suchbegriff"; ?> <div id="suchform"> <form id="search" method="get" action="suchen.php" onsubmit="return showWait();"> <p><label for="suchbegriff">Im Projekt suchen:</label> <input type="text" name="q" id="suchbegriff" value="<?php echo $search ?>" size="13" title=" Suchbegriff hier eingeben " onblur="if(this.value=='')this.value='<?php echo $search ?>';" onfocus="if(this.value=='Suchbegriff')this.value='';" /> <input type="submit" value="Los !" /> <!-- die Fortschrittsanzeige http://mentalized.net/activity-indicators/ --> <script type="text/javascript"> // <![CDATA[ document.write ('<img id="wait" height="16" width="16" src="throbber3.gif" alt="bitte warten" />'); // ]]> </script> </p> </form> </div>Falls die Seiten mit dem Suchfeld keine PHP-Dateien, sondern HTML-Dateien sind, ersetzen Sie <?php echo $search ?> mit "Suchbegriff" (ohne die Anführungszeichen).
- Wenn Ihre Seite mit Frames arbeitet, müssen Sie eventuell das Zielfenster für den Aufruf der Suchergebnisse angeben. Genaue Informationen dazu können Sie bei SELFHTML nachlesen, speziell hier.
Die erste Zeile des obigen Codes könnte dann z.B. so aussehen:<form id="search" method="get" action="suchen.php" target="Hauptframe">
3. Schritt:
Nun noch das Design anpassen (formatieren)
- Um Schriftarten, -größen, -farben, Abstände usw. zu formatieren, setzen Sie CSS ein.
- Dazu übernehmen Sie am besten erst einmal die Style-Angaben aus der mitgelieferten Musterdatei suchen.php in Ihre eigene suchen.php.
Diese Style-Angaben gehören in den head-Bereich Ihrer Seiten, also irgendwo zwischen <head> und </head>. - Der Style Bereich muß folgendermaßen aussehen:
<style type="text/css">
... hier kommen die Style-Angaben
</style> - Wenn Sie mit CSS nicht vertraut sind, empfehle ich, erst einmal ein Tutorial durchzuarbeiten. Eine Suche bei Google nach CSS Tutorial o.ä. sollte weiterhelfen.
4. Fertig!
Na, war doch nicht schwer.