Πώς να κωδικός αα Search Bar Δημιουργήθηκε στο Photoshop

Σε γενικές γραμμές , μια γραμμή αναζήτησης αποτελείται από τρία βασικά συστατικά : το δοχείο μορφή, το πεδίο εισαγωγής , και το κουμπί αναζήτησης . Σχέδια Γραμμή αναζήτησης μπορεί να ποικίλλει , αλλά αν γίνει σωστά , ένα μπαρ αναζήτηση δημιουργήθηκαν με το Adobe PhotoShop θα έχει καθένα από αυτά τα στοιχεία σε ένα ξεχωριστό επίπεδο , επιτρέποντάς σας να τους χωρίσει εύκολα για την κωδικοποίηση . Θα πρέπει να καθοριστεί ποια στοιχεία μπορείτε να αναδημιουργήσει τη χρήση στυλ CSS και τα οποία θα πρέπει να εξάγουν ως ξεχωριστά αρχεία εικόνας προτού να αρχίσετε την κωδικοποίηση του μπαρ. Τυπικά στοιχεία της εικόνας είναι το υπόβαθρο πεδίο εισαγωγής και το κουμπί αναζήτησης . Επίσης, δώστε προσοχή στις επιπτώσεις , όπως σκιές και τα σύνορα , καθώς θα χρειαστεί αυτές τις ρυθμίσεις για να δημιουργήσετε στυλ CSS που ταιριάζει με το σχεδιασμό . Οδηγίες
Η 1

Αποφασίστε πώς θέλετε η γραμμή αναζήτησης για να λειτουργήσει . Υπάρχουν δεκάδες σενάρια αναζήτησης και δημιουργίας ενός κώδικα και διατίθεται στο Διαδίκτυο χρησιμοποιώντας μια ποικιλία γλωσσών , συμπεριλαμβανομένης της javascript , jQuery , PHP και απλό HTML . Μπορείτε να χρησιμοποιήσετε οποιαδήποτε από αυτές , αλλά μπορεί να βρει τη δημιουργία της μπάρας αναζήτησης πρώτα σε απλή HTML με στυλ που ταιριάζει με την εικόνα σας και στη συνέχεια την προσαρμογή σε ένα σενάριο είναι πιο εύκολο από ό, τι προσπαθεί να το στυλ ένα premade script για να ταιριάζει με την εικόνα σας .

2

ξεκινήσει αγαπημένο σας επεξεργαστή κειμένου ή HTML σας και να ξεκινήσετε με την προσθήκη ενός ανοίγματος " μορφή " tag :

Δώστε στην ετικέτα το όνομα και την τάξη , η οποία θα σας χρησιμοποιήσετε για να μορφοποιήσετε το φόντο γραμμή αναζήτησης και σύνορα :

Τέλος με την προσθήκη μεθόδου και δράσης μεταβλητή :

Η δράση θα παραμείνει κενή για τώρα . Αργότερα , θα πρέπει να το γεμίσετε με την πορεία προς την υπηρεσία παροχής αναζήτησης , αναζήτηση script ή τον server σας
εικόνων 3

Ακολουθήστε τη μορφή tag με ένα " πεδίων " ετικέτα και ένα πεδίο εισαγωγής : .

Δώστε την ετικέτα εισόδου ένα είδος « κειμένου », το όνομα και η ταυτότητα του "s " :

Η

4 Πληκτρολογήστε ένα " κουμπί" ετικέτα για το κουμπί αναζήτησης και να δώσει μια τάξη ". btn " Για να διατηρήσετε τον κωδικό σας συμβατό , θα πρέπει επίσης να προσθέσετε έναν τίτλο :

Αναζήτηση

το " κουμπί " ετικέτα είναι μια νεότερη ετικέτα που επιτρέπει το κουμπί για να ευθυγραμμιστεί φυσικά με το πεδίο εισαγωγής , μια πολύ βελτιωμένη λειτουργία σε σχέση με το προηγούμενο είδος «εικόνα» του πεδίου εισαγωγής . Μπορείτε να χρησιμοποιήσετε την κλάση " btn " για το στυλ του κουμπιού χρησιμοποιώντας αγνά μεταβλητές CSS ή μια εικόνα φόντου .
5

Εισάγετε το κλείσιμο ετικέτες για formset και τη μορφή σας . Ολοκληρώθηκε HTML σας θα πρέπει να δούμε κάτι σαν αυτό :

Αναζήτηση

Η 6

στην κεφαλή του εγγράφου HTML σας ή σε ένα ξεχωριστό CSS stylesheet δημιουργήσετε σας δηλώσεις CSS για κάθε στοιχείο . Ρίξτε μια ματιά στο PhotoShop την εικόνα σας και να καθορίσει το πλάτος και το ύψος της μπάρας αναζήτησης , συμπεριλαμβανομένων των κάθε χώρο πάνω και κάτω από το πεδίο εισαγωγής και το κουμπί . Εισάγετε αυτό το ύψος και το πλάτος στο " mainsearch " δήλωση ταυτότητας. Άλλα πράγματα που θεωρούν ότι μπορεί να είναι η τοποθέτηση του μπαρ, στα σύνορα πλάτος και βάθος . Αν χρειάζεται να τοποθετηθεί στα δεξιά του μενού πλοήγησης , για παράδειγμα , θα πρέπει να εισάγετε ένα " float : right " . Μεταβλητή
Η 7

Εισάγετε μεταβλητές στην κατηγορία που σκοπεύετε " searchbar . " να εφαρμόζεται σε όλα τα μπαρ της αναζήτησης σε όλη την περιοχή . Αυτό βοηθά στη μείωση του αριθμού των επανειλημμένες δηλώσεις στυλ , δεδομένου ότι μπορείτε να χρησιμοποιήσετε ξανά την τάξη " . Searchbar " με ένα διαφορετικό ID μορφή στην ίδια σελίδα , για παράδειγμα. Επαναλαμβανόμενες μεταβλητές κλάσης μπορεί να περιλαμβάνει padding , τα περιθώρια , το χρώμα των συνόρων και το φόντο .
8

Style πεδίο εισαγωγής σας, χρησιμοποιώντας την κλάση μπάρας αναζήτησης που ακολουθείται από τον επιλογέα εισόδου . Μεταβλητές θα συμπεριλαμβάνονται στην κατηγορία εισόδου είναι τα πράγματα όπως το πλάτος , το ύψος, το χρώμα του κειμένου , τη γραμματοσειρά και το στυλ της γραμματοσειράς , σύνορα , φόντο , βάτες και τα περιθώρια κέρδους . Κάθε μία από αυτές τις μεταβλητές θα πρέπει να ταιριάζει με τις διαστάσεις και τις ρυθμίσεις των εφέ στο αρχείο Photoshop, το οποίο μπορεί να προσδιοριστεί με την προβολή των επιλογών στρώμα και χρησιμοποιώντας το εργαλείο επιλογής για να μετρήσει pixels .
Η 9

Προσθέστε ένα στυλ για την αναζήτησή σας κουμπί . Μπορείτε να επιτύχει περισσότερα στυλ κουμπί CSS χρησιμοποιώντας ένα συνδυασμό των συνόρων και πτώση μεταβλητές σκιά ή μπορείτε να χρησιμοποιήσετε μια εικόνα φόντου . Οι σημαντικές μεταβλητές ώστε να περιλαμβάνει για το κουμπί στυλ σας είναι το ύψος και το πλάτος του . Ένα παράδειγμα από ένα στυλ κουμπιού έχει ως εξής :

searchbar button.btn {

πλάτος : . 32px ?

Ύψος : 32px ?

Κειμένου περίπτωση : - 9999px ?

υπόβαθρο : # CCCCCC URL ( searchbutton.png ) δεν υπάρχει-επαναλαμβάνω πάνω δεξιά ?

}

Αυτό το στυλ ταιριάζει με την διάσταση της εικόνας των 32 εικονοστοιχεία πλάτος κατά 32 pixels ύψος , σπρώχνει το κείμενο « Υποβολή Αναζήτηση " από τη θέα , ώστε να μην επικαλύπτουν το κουμπί και τοποθετεί το γραφικό κουμπί αναζήτησης στο πάνω δεξιά του δοχείου κουμπί για να βεβαιωθείτε ότι δεν είναι αποκομμένος .
Η 10

Τέλος , με την εφαρμογή επιθυμητό σενάριο αναζήτησης ή λειτουργία σας σε μορφή HTML σας . Αυτό γίνεται συνήθως με την προσθήκη αρχείου ή η διαδρομή του σεναρίου για την "δράση" μεταβλητή στην ετικέτα μορφή , αλλά κάποια σενάρια μπορούν να περιλαμβάνουν περαιτέρω μέτρα , όπως η προσθήκη javascript για να έχετε το κεφάλι της σελίδας HTML , όπου η γραμμή αναζήτησης θα τοποθετηθεί .


Η