Pour rendre l'information facile à trouver, de nombreux sites comprennent des boîtes de recherche sur leur page principale. Les visiteurs peuvent taper un terme de recherche dans la boîte et l'outil seront recherche sur le site pour les informations qui correspondent à la recherche. Tout en faisant une boîte de recherche simple est la plus facile, la création d'une zone de recherche plus avancée pour votre site ne nécessite que quelques étapes supplémentaires.
Le code de la boîte de recherche. Le code de votre champ de recherche doit inclure une zone de texte, qui est la zone où l'utilisateur va taper dans une requête de recherche et un bouton pour soumettre la demande. Le code simple qui peut être utilisé pour créer une boîte de recherche de base, tel que coder sur le web site de la conception devirtuoso:
"
"
Concevoir un graphique pour la boîte de recherche. Il est ici où vous pouvez faire la boîte comme graphiquement complexe que vous le souhaitez. Votre boîte peut être conçu dans un logiciel graphique que vous êtes à l'aise avec. La hauteur et la largeur de l'image sont à vous, mais les champs de recherche sont généralement beaucoup plus large que ce qu'ils sont grands. Votre boîte de recherche doit également contenir un bouton qui sera utilisé pour présenter la requête. Inclure cette touche d'un côté ou de l'autre de votre graphique. Prenez note de la hauteur et la largeur que vous utilisez dans votre image. Si l'ensemble de l'image est de 100 pixels par 20 pixels, avec la zone de texte prenant en hausse de 90 par 20 pixels et le bouton reprenant les dernières 10 par 20 pixels, d'écrire tous ces chiffres vers le bas.
Appliquer le graphique à la boîte de recherche. Code qui peut être utilisé pour attribuer la conception graphique de la boîte de recherche:
"#searchbox {
background: url transparent ('image Title.JPG Écusson') no-repeat scroll 0 0
GO
display: block
GO
hauteur: 38px
GO
largeur: 341px
GO
}"
"Image Title.JPG Écusson" dans le code devrait être le nom du graphique que vous avez créé pour la boîte de recherche.
Cacher la boîte de recherche de sorte que seuls les spectacles graphiques. Pour masquer les frontières de la zone de recherche, utilisez le code:
"#searchbox .textfield {
background: none repeat scroll transparente 0 0
GO
border: none
GO
float: left
GO
largeur: 284px
GO
hauteur: 23px
GO
}
searchbox .button {
background: none repeat scroll transparente 0 0
GO
border: none
GO
cursor: pointer
GO
float: left
GO
hauteur: 22px
GO
largeur: 18px
GO
}"
La hauteur et la largeur de votre code devrait être égale à la hauteur et la largeur de l'image que vous avez conçu. Si la zone de texte prend est de 90 par 20 pixels, vous devez entrer 90px pour la largeur et 20px pour la hauteur. Si le bouton est de 10 par 20 pixels, vous entrez 10px pour la largeur et 20px pour la hauteur.
Ligne la boîte de recherche et de l'image dans le codage. Pour aligner la boîte et le graphique, vous devrez ajouter codage de marge à la zone de texte de la boîte de recherche. Ajouter codage de marge juste en dessous du "float: left" ligne du code de la clandestinité de la boîte de recherche. Le code est:
"margin-right: 17px
GO
margin-left: 10px
GO
margin-top: 8px
GO
padding-top: 2px
GO
}"
Doublure votre zone de recherche et graphique jusqu'à se fait par essais et erreurs. Vous devrez continuer à changer les marges jusqu'à ce que les deux unités se chevauchent. Une fois qu'ils se chevauchent, lorsque vous cliquez dans la boîte de recherche, vous devriez être capable de taper dedans et, lorsque vous cliquez sur le bouton d'envoi, la requête doit être envoyée.