November 29
In generale, una barra di ricerca è costituito da tre componenti principali: il contenitore modulo, il campo di inserimento, e il pulsante di ricerca. disegni barra di ricerca può variare, ma se fatto bene, una barra di ricerca creati in Adobe PhotoShop avranno ciascuno di questi elementi su un livello separato, che consente di separarli facilmente per la codifica. Sarà necessario determinare quali elementi è possibile ricreare utilizzando gli stili CSS e che è necessario esportare come file di immagini separati prima di poter iniziare la codifica del bar. elementi dell'immagine tipici sono lo sfondo campo di input e il pulsante di ricerca. Anche prestare attenzione agli effetti, quali ombre esterne e bordi, in quanto sarà necessario queste impostazioni per creare stili CSS che corrispondono al disegno.
1 Decidere come si desidera che la barra di ricerca di funzionare. Ci sono decine di script di ricerca e frammenti di codice disponibili su Internet utilizzando una varietà di lingue, tra cui JavaScript, jQuery, PHP e semplice HTML. È possibile utilizzare uno di questi, ma può trovare la creazione della barra di ricerca prima in semplice HTML con gli stili che corrispondono alla vostra immagine e poi adattarlo ad un script è più facile che cercare per lo stile di uno script premade modo che corrisponda all'immagine.
2 Avviare l'editor di testo o HTML preferito e iniziare con l'aggiunta di un tag di apertura "modulo":
<Form>
Dare il tag di un nome e di classe, che verrà utilizzato per lo stile sfondo barra di ricerca e di confine:
<Form name = "mainsearch" class = "barra di ricerca">
Termina con l'aggiunta di una variabile di metodo e di azione:
<Form name = class = metodo "mainsearch" "barra di ricerca" = azione "get" = "">
L'azione rimarrà vuota per ora. In seguito, è necessario riempirlo con il percorso del provider di ricerca, script di ricerca o un server.
3 Seguire la tag form con un tag "fieldset" e un campo di input:
<Fieldset>
<input/>
Dare il tag input un tipo di "testo", un nome e l'ID di "s":
<input type="text" name="s" id="s" />
4 Inserire un tag "pulsante" per il pulsante di ricerca e dare una classe di "BTN" .Per mantenere il vostro codice compatibile, si dovrebbe anche aggiungere un titolo:
<Class = tasto titolo "btn" = "Submit Ricerca"> ricerca </ button>
Il tag "bottone" è un tag più recente che permette il pulsante per allineare naturalmente con il campo di input, una migliorata funzione di molto nel corso del tipo precedente "immagine" del campo di input. È possibile utilizzare la classe "btn" per lo stile il pulsante utilizzando un'immagine di sfondo variabili puri CSS o.
5 Inserisci tag di chiusura per il vostro formset e forma. Il tuo HTML completato dovrebbe essere simile a questo:
<Form name = class = metodo "mainsearch" "barra di ricerca" = azione "get" = "">
<Fieldset>
<Input type = "text" name = "s" id = "s" />
<Class = tasto titolo "btn" = "Submit Ricerca"> ricerca </ button>
</ Fieldset>
</ Form>
6 Nella testa del documento HTML o in un foglio di stile CSS separata creare le dichiarazioni CSS per ogni elemento. Date un'occhiata all'immagine PhotoShop in e determinare la larghezza e l'altezza della barra di ricerca, compresa qualsiasi spazio sopra e sotto il campo di inserimento e il pulsante. Inserisci questa altezza e la larghezza nella dichiarazione di ID "mainsearch". Altre cose da considerare potrebbe essere il posizionamento della barra, la larghezza e lo sfondo confine. Se ha bisogno di essere collocato a destra di un menu di navigazione, ad esempio, è necessario inserire un "float: right" variabile.
7 Inserire le variabili nella classe ".searchbar", che si intende applicare a tutte le barre di ricerca in tutto il sito. Questo aiuta a ridurre il numero di dichiarazioni di stile ripetute, dal momento che è possibile riutilizzare la classe ".searchbar" con un diverso ID modulo sulla stessa pagina, per esempio. variabili di classe ripetute potrebbero includere padding, margini, colore del bordo e lo sfondo.
8 Stile vostro campo di input tramite la classe barra di ricerca seguito dal selettore di ingresso. Le variabili da includere nella classe di ingresso sono cose come larghezza, altezza, colore del testo, carattere e stile, i bordi, sfondo, padding e margini. Ciascuna di queste variabili devono corrispondere alle dimensioni e degli effetti del file di Photoshop, che può essere determinato visualizzando le opzioni di livello e usando lo strumento di selezione per misurare pixel.
9 Aggiungere uno stile per il pulsante di ricerca. È possibile ottenere la maggior parte degli stili di pulsanti in CSS utilizzando una combinazione di confine e rilasciare variabili ombra oppure è possibile utilizzare un'immagine di sfondo. Le variabili importanti da includere per il vostro stile di pulsante sono la sua altezza e la larghezza. Un esempio di uno stile tasto è la seguente:
button.btn .searchbar {
width: 32px;
Altezza: 32px;
text-trattino: -9999px;
sfondo: #CCCCCC URL (searchbutton.png) no-repeat in alto a destra;
}
Questo stile si adatta alla dimensione immagine di 32 pixel di larghezza per 32 pixel di altezza, infila il testo "Submit Search" lontano dagli occhi in modo da non sovrapporre il pulsante e pone il pulsante di ricerca grafico in alto a destra del contenitore tasto per assicurarsi che sia non tagliare.
10 Terminate implementando lo script di ricerca desiderato o la funzione nel vostro modulo HTML. Questo è in genere fatto aggiungendo il nome del file o il percorso dello script alla variabile "azione" nel tag form, ma alcuni script può includere ulteriori passi, come l'aggiunta di javascript per la testa della pagina HTML in cui verrà inserito nella barra di ricerca.