Hvordan kode aa Search Bar Laget i Photoshop

August 13

Generelt er en søkelinje består av tre hovedkomponenter: form container, input felt, og på søkeknappen. Søk bar design kan variere, men hvis det gjøres riktig, vil en søkelinje opprettet i Adobe PhotoShop har hvert av disse elementene på et eget lag, slik at du enkelt skille dem for koding. Du må finne ut hvilke elementer du kan gjenskape ved hjelp av CSS-stiler, og som du må eksportere som separate bildefiler før du kan begynne koding baren. Typiske bildeelementer er inntastingsfeltet bakgrunn og søkeknappen. Også ta hensyn til effekter, for eksempel skygger og grenser, så du vil trenge disse innstillingene for å lage CSS-stiler som samsvarer med design.

Bruksanvisning

1 Bestem deg for hvordan du vil at søkefeltet for å fungere. Det er scorene til søke skript og kodesnutter tilgjengelig på internett ved hjelp av en rekke språk, inkludert javascript, jQuery, PHP og vanlig HTML. Du kan bruke noen av disse, men kan finne skape søkefeltet først i vanlig HTML med stiler som passer ditt bilde og deretter tilpasse den til et skript er enklere enn å prøve å style en forhåndslagde script for å matche bildet ditt.

2 Start din favoritt tekst eller HTML-editor og begynne ved å legge til en åpning "form" tag:

<Form>

Gi tag et navn og klasse, som du vil bruke til å style søkelinjen bakgrunn og ramme:

Avslutt med å legge til en metode og handling variabel:

Handlingen vil forbli tom for nå. Senere, må du fylle det med banen til søkeleverandør, søk script eller server.

3 Følg form tag med en "fieldset" tag og et inntastingsfelt:

<input/>

Gi innspill tag en type "tekst", et navn og ID "s":

<input type="text" name="s" id="s" />

4 Skriv inn en "knapp" tag for søkeknappen og gi det en klasse for "btn" .For å holde koden kompatibel, bør du også legge til en tittel:

<-knappen Class = "btn" title = "Send Search"> Søk </ knapp>

Den "knappen" tag er en nyere kode som gjør at knappen for å naturligvis justere med innskrivingsfeltet, en mye bedre funksjon over den forrige "image" type input-feltet. Du kan bruke "btn" class å style knappen ved hjelp av ren CSS variabler eller et bakgrunnsbilde.

5 Skriv lukke koder for din blanketten og form. Din ferdig HTML skal se omtrent slik ut:

<-knappen Class = "btn" title = "Send Search"> Søk </ knapp>

</ Fieldset>

</ Form>

6 I hodet på HTML-dokument eller i en egen CSS-stilark lage dine CSS erklæringer for hvert element. Ta en titt på din PhotoShop bildet og bestemme bredden og høyden på søkefeltet, inkludert noen plass over og under tekstfeltet og knappen. Skriv inn denne høyden og bredden i "mainsearch" ID erklæring. Andre ting å vurdere kan være plassering av bar, border bredde og bakgrunn. Hvis det er behov for å bli plassert til høyre for en navigasjonsmeny, for eksempel, bør du legge inn en "float: right" variabel.

7 Skriv inn variabler inn i ".searchbar" -klassen som du har tenkt å gjelde for alle søke barer over området. Dette bidrar til å redusere antall gjentatte stil erklæringer, siden du kan bruke den ".searchbar" klasse med en annen form ID på samme side, for eksempel. Gjentatte klassevariabler kan inkludere padding, marger, kantfarge og bakgrunn.

8 Style inntastingsfeltet ved hjelp av søkefeltet klasse etterfulgt av inngangsvelgeren. Variabler som skal inkluderes i inngangsklassen er ting som bredde, høyde, farge på tekst, font og skriftstil, grenser, bakgrunn, padding og marginer. Hver av disse variablene bør samsvare med dimensjoner og effektinnstillinger i PhotoShop fil, som kan bestemmes ved å vise lagalternativer og bruker valgverktøyet for å måle piksler.

9 Legg en stil for søkeknappen din. Du kan oppnå de fleste knapp stiler i CSS ved hjelp av en kombinasjon av grensen og Skygge variabler eller du kan bruke et bakgrunnsbilde. De viktigste variablene for å inkludere for knapp stil er høyden og bredden. Et eksempel på en knapp stil er som følger:

.searchbar button.btn {

width: 32px;

height: 32px;

text-indent: -9999px;

bakgrunn: #CCCCCC URL (searchbutton.png) no-repeat øverst til høyre;

}

Denne stilen passer bildet dimensjon på 32 piksler bred og 32 piksler høy, skyver du på "Send Search" tekst ute av syne slik at den ikke overlappe på knappen og setter søkeknappen grafikken øverst til høyre for knappen container for å sikre at det er ikke avskåret.

10 Avslutt med å implementere ønsket søke script eller funksjon i din HTML-skjema. Dette gjøres vanligvis ved å legge skriptet filnavn eller bane til "action" variable i form tag, men noen skript kan omfatte ytterligere tiltak, for eksempel legge javascript til hodet på HTML-siden hvor søkefeltet vil bli plassert.

Hint

Legg en klasse til fieldset eller input-koder for å kombinere variabler som gjelder for mer enn ett element. Selv om det ikke er nødvendig, dette bidrar minimere CSS-koden.