|
En général, une barre de recherche est constitué de trois composantes principales: le conteneur de forme , le champ de saisie , et le bouton de recherche. Chercher des motifs à barres peuvent varier , mais si c'est bien fait, une barre de recherche créé dans Adobe PhotoShop auront chacun de ces éléments sur un calque séparé , vous permettant de séparer facilement les pour le codage. Vous devrez déterminer quels sont les éléments que vous pouvez recréer en utilisant des styles CSS et que vous devez l'exporter sous forme de fichiers image distincts avant que vous pouvez commencer à coder la barre . Éléments d'image typiques sont le fond de champ de saisie et le bouton de recherche. Faites également attention aux effets tels que des ombres portées et des frontières , comme vous aurez besoin de ces paramètres pour créer des styles CSS qui correspondent à la conception. Instructions
1 décider comment vous voulez que la barre de recherche à la fonction. Il ya des dizaines de scripts de recherche et des extraits de code disponibles sur l'Internet en utilisant une variété de langues , y compris le javascript , jQuery , PHP et HTML. Vous pouvez utiliser toutes ces choses, mais peut-être trouver la création de la première barre de recherche en HTML avec des styles qui répondent à votre image, puis l'adapter à un script est plus facile que d'essayer de le style d'un script premade pour correspondre à votre image.
< Br > 2 Lancez votre texte préféré ou un éditeur HTML et commencer par l'ajout d'une balise " forme " d'ouverture :
6 dans la tête de votre document HTML ou dans une feuille de style CSS séparé créer votre déclarations CSS pour chaque élément. Jetez un oeil à votre image Photoshop et déterminer la largeur et la hauteur de la barre de recherche , y compris toute espace au-dessus et en dessous du terrain et touche entrée. Saisissez cette hauteur et la largeur dans le " mainsearch « déclaration d'identité. Autres choses à considérer peut-être le positionnement de la barre , largeur de la bordure et le fond. Si il doit être placé à la droite d'un menu de navigation, par exemple , vous devez entrer un " float: right " . Variables
7 Entrez variables dans la classe qui vous avez l'intention " searchbar . " s'appliquer à toutes les barres de recherche à travers le site. Cela permet de réduire le nombre de déclarations de style répétées, puisque vous pouvez réutiliser l' " . Searchbar " class avec une forme différente ID sur la même page , par exemple. Variables de classe répétées pourraient inclure rembourrage , les marges , la couleur de bordure et le fond .
8 le style de votre champ de saisie à l'aide de la classe barre de recherche suivie par le sélecteur d'entrée . Variables à inclure dans la classe d'entrée sont des choses comme la largeur , la hauteur, la couleur du texte , la police et le style de police , les frontières , fond, remplissage et les marges . Chacune de ces variables doivent correspondre aux dimensions et paramètres d'effet dans le dossier Photoshop, qui peuvent être déterminées en affichant les options de calque et utiliser l'outil de sélection pour mesurer pixels.
9 Ajouter un style pour votre recherche bouton . Vous pouvez obtenir la plupart des styles de boutons en CSS en utilisant une combinaison de frontière et les variables d'ombre portée ou vous pouvez utiliser une image de fond . Les variables importantes à inclure pour votre style de bouton sont sa hauteur et sa largeur . Un exemple d' un style de bouton est le suivant:
searchbar button.btn {
largeur de : 32px ;
hauteur de : . 32px ;
texte indent: - 9999px ;
background: # CCCCCC URL ( searchbutton.png ) no-repeat haut à droite ;
}
Ce style correspond à la dimension de l' image de 32 pixels de large par 32 pixels de haut , pousse le «Submit Recherche " texte hors de la vue afin de ne pas superposer le bouton et place le bouton de recherche graphique en haut à droite du réservoir de bouton pour s'assurer qu'il n'est pas coupé.
10 Terminer en mettant en œuvre le script de recherche souhaitée ou d'une fonction dans votre formulaire HTML. Cela se fait généralement en ajoutant le nom ou le chemin du script de "l'action " variable dans la balise form , mais certains scripts peuvent inclure d'autres mesures , telles que l'ajout javascript pour la tête de votre page HTML où la barre de recherche sera placé.
|
