Αναθεώρηση βιβλίου: Από το Photoshop σε HTML
Εάν είστε νέοι στη δημιουργία σχεδίων ιστοσελίδων χρησιμοποιώντας το Photoshop, μαθαίνοντας να μετατρέψετε αυτά τα αρχεία .PSD σε σημασιολογικά, συμβατά με τα πρότυπα αρχεία CSS και HTML μπορεί να είναι λίγο εκφοβιστικά.
Μετά από όλα, υπάρχουν πολλές άριστες υπηρεσίες εκεί έξω που μπορούν να χωρίσουν και να κωδικοποιήσουν τα αρχεία σας για σας. Αλλά υπάρχουν εκείνες οι περιπτώσεις που μπορεί να προτιμάτε να κόψετε αυτά τα σχέδια μόνοι σας.
Αυτό είναι όπου Από το Photoshop σε HTML: Πώς να φέσει τα σχέδιά σας σαν επαγγελματίας από τον Jeffrey Way, συντάκτη του Nettuts +, έρχεται.
Σε αυτό το βιβλίο 145 σελίδων, ολόκληρη η διαδικασία μετατροπής ενός αρχείου .PSD σε ένα λειτουργικό σχέδιο ιστοσελίδας καλύπτεται λεπτομερώς με παραδείγματα κώδικα.
Ένας ιστοτόπος μοντέλου χρησιμοποιείται για να περπατήσει τους αναγνώστες σε όλη τη διαδικασία, βήμα προς βήμα, με ένα μόνο παράδειγμα. Όλα καλύπτονται από τη βασική κωδικοποίηση έως τη συμβατότητα των σχεδίων σας με τα συμβατικά προγράμματα περιήγησης.
Σε καθημερινή βάση - αν ακούσετε προσεκτικά - οι κραυγές μπορούν να ακουστούν σε όλο τον κόσμο από τους κωδικοποιητές που προσπαθούν ανεπιτυχώς να αναγκάσουν ένα σχέδιο στη θέση του. Δεν είναι μόνο θέμα εκμάθησης της γλώσσας. η απομνημόνευση είναι εύκολη υπόθεση. Τα σημεία επαγωγής κραυγής εμφανίζονται όταν βλέπετε τον ιστότοπό σας σε δέκα διαφορετικά προγράμματα περιήγησης, τα οποία καθιστούν τον ιστότοπό σας σε διαφορετικά επίπεδα συνέπειας.
Το βιβλίο υποθέτει ότι έχετε μια βασική γνώση της CSS και της HTML, καθώς και ένα σχέδιο που έχει ήδη δημιουργηθεί στο Photoshop. Ο σχεδιασμός που χρησιμοποιείται στο βιβλίο είναι απλός, αλλά οι έννοιες που χρησιμοποιούνται για τη δημιουργία του σχεδίου μπορούν εύκολα να εφαρμοστούν σε πιο περίπλοκα σχέδια.
Το βιβλίο ξεκινάει με μια ενότητα σχετικά με τον τρόπο με τον οποίο μπορείτε να εξετάσετε ένα σχέδιο, προτού καταδυθείτε στη διαδικασία δημιουργίας του κώδικα HTML.
Παρόλο που μπορεί να φαίνεται φυσικό να αρχίσουμε αμέσως να δουλεύουμε με τα οπτικά στοιχεία της ιστοσελίδας μας, αυτό δεν θα μπορούσε να είναι πιο μακριά από την αλήθεια. Αντ 'αυτού, πρέπει πρώτα να οικοδομήσουμε τη βάση μας ή την προσαύξηση, και μόλις ολοκληρωθεί, μπορούμε να προχωρήσουμε στα οπτικά.
Επιλέγοντας τα τρία βασικά τμήματα που περιέχουν οι περισσότεροι ιστότοποι: καλύπτεται μια κεφαλίδα, η κύρια περιοχή περιεχομένου και ένα υποσέλιδο και, στη συνέχεια, το βιβλίο μεταπηδά στη διαδικασία εγκατάστασης του βασικού αρχείου HTML. Και πάλι, όποιος έχει βασικές γνώσεις HTML δεν θα έχει κανένα πρόβλημα με αυτό το μέρος.
Μόλις ολοκληρωθεί ο βασικός σας κώδικας HTML, από το Photoshop σε HTML μπορείτε να βρείτε πώς μπορείτε να φέρετε τα αρχεία σας .PSD.
Αφιερώστε λίγο χρόνο για να δείτε το σχέδιο στο Photoshop. Προσπαθήστε να εντοπίσετε κάθε εικόνα που θα χρειαστείτε. Θυμηθείτε, οι δυνατότητες μπορούν να αναπαραχθούν με CSS. οπότε να είστε δημιουργικοί.
Ενώ αναφέρονται και οι δύο μέθοδοι για το τεμαχισμό των αρχείων σας, το βιβλίο χρησιμοποιεί έναν συνδυασμό περικοπής και κοπής και επικόλλησης για να αρπάξει τις εικόνες που χρειάζεστε αντί να χρησιμοποιήσετε το εργαλείο φέτας.
Και οι δύο μέθοδοι είναι απολύτως έγκυρες. Σας προτείνω να δοκιμάσετε και τα δύο, και να επιλέξετε ποιο αποδεικνύει ότι είναι γρηγορότερο ... για εσάς.
Συντομεύσεις πληκτρολογίου για την επιτάχυνση αυτής της διαδικασίας καλύπτονται σε βάθος. Αποθηκεύετε αυτές τις εικόνες για τον ιστό, συμπεριλαμβανομένων όλων των ρυθμίσεων που πρέπει να χρησιμοποιείτε και του τύπου αρχείου εικόνας που θέλετε να χρησιμοποιήσετε για ποιους τύπους εικόνων, συζητείται επίσης εκτεταμένα, όπως και οι CSS sprites. Τελευταίο αλλά όχι λιγότερο σημαντικό σε αυτή την ενότητα είναι κάποιες σημειώσεις σχετικά με τις ρυθμίσεις που θα πρέπει στη συνέχεια να γίνουν στο αρχείο HTML με βάση τις εικόνες φόντου που χρησιμοποιούνται.
Μόλις η HTML και οι εικόνες σας είναι έτοιμες, ήρθε η ώρα να βουτήξετε στο CSS για τον ιστότοπό σας. Οι επαναρυθμίσεις του προγράμματος περιήγησης υπογραμμίζονται και καλύπτονται σε βάθος, καθώς και τον τρόπο επαναδημιουργίας ενός τυποποιημένου, προκαθορισμένου αρχείου CSS.
Κάθε πρόγραμμα περιήγησης χρησιμοποιεί ένα κομμάτι "προεπιλεγμένου CSS" για να στυλ αυτόματα το σημάδι σας. Με την πρώτη ματιά, ίσως να πιστεύετε ότι αυτό είναι εξαιρετικά χρήσιμο ... Εάν κάθε πρόγραμμα περιήγησης τους εφάρμοσε με τον ίδιο τρόπο, αυτό δεν θα ήταν πρόβλημα. Δυστυχώς, αυτό δεν συμβαίνει.
Υπάρχουν ορισμένες αρχές CSS, συμπεριλαμβανομένων των σχετικών με απόλυτη τοποθέτηση και CSS σχήματα, που καλύπτονται με πρακτικό και χρησιμοποιήσιμο τρόπο. Για όσους δεν είναι ειδικοί στο CSS, αυτά τα τμήματα θα είναι ιδιαίτερα ενημερωτικά, ενώ όσοι είναι πιθανόν να θέλουν να παραλείψουν αυτά τα μέρη. Ένα άλλο μεγάλο κομμάτι του κώδικα CSS που καλύπτεται είναι πώς να δημιουργήσετε κολλώδη υποσέλιδα, κάτι που μπορεί να απογοητευτικό για τους νέους σχεδιαστές CSS.
Περιλαμβάνεται η κωδικοποίηση πρόσθετων σελίδων πέρα από την αρχική σελίδα, συμπεριλαμβανομένου του τρόπου με τον οποίο θα γίνουν μικρές προσαρμογές στη διάταξη και το περιεχόμενο και τι θα χρειαστεί να προσθέσετε στα αρχεία CSS. Όταν τελειώσετε με αυτήν την ενότητα, θα έχετε όλα τα πρότυπα σελίδας που είναι απαραίτητα για έναν πλήρως λειτουργικό ιστότοπο χαρτοφυλακίου.
Το τελευταίο τακτικό κεφάλαιο του βιβλίου καλύπτει τον τρόπο με τον οποίο μπορείτε να σχεδιάσετε το cross-browser σχεδιασμού σας, ειδικά όταν πρόκειται για παλαιότερα προγράμματα περιήγησης όπως ο Internet Explorer 6 και 7. Ένα από τα μεγαλύτερα θέματα που καλύπτονται εκτενώς είναι η έλλειψη διαφάνειας στις εικόνες στο IE6 , με μια ποικιλία λύσεων για την υπέρβαση.
Η προβολή του ιστότοπού σας στον Internet Explorer 7 και παρακάτω για πρώτη φορά θα σας κάνει να τρυπήσετε. Μπορεί να έχετε τύχη, αλλά τις περισσότερες φορές, θα βρείτε πολλά θέματα που πρέπει να διορθωθούν.
Ένα κεφάλαιο μπόνους στο τέλος σας δείχνει πώς να δημιουργήσετε jQuery μεταβατικά εφέ, τα οποία ενσωματώνονται στο σχεδιασμό της ιστοσελίδας. Για όσους είναι νέοι στο JavaScript και το jQuery, είναι ένα ενδιαφέρον έργο που διδάσκει μερικές βασικές τεχνικές.
Γενικά, αν έχετε αναθέσει τη μετατροπή των αρχείων .PSD σε HTML ή αν θέλετε να δοκιμάσετε να σχεδιάσετε ιστοσελίδες στο Photoshop, αυτό το βιβλίο αξίζει σίγουρα μια ανάγνωση.
Με ολοκληρωμένες οδηγίες βήμα προς βήμα που μπορούν εύκολα να εφαρμοστούν σε πολλά έργα και σε τόνους παραδείγματος κώδικα, Από το Photoshop σε HTML είναι σίγουρο ότι θα ξεκινήσετε να μετατρέπετε τα δικά σας σχέδια. Με λίγη πρακτική, οι έννοιες που καλύπτονται θα μπορούσαν να χρησιμοποιηθούν σχεδόν σε οποιοδήποτε σχέδιο!
Το βιβλίο έρχεται επίσης με τα αρχεία προέλευσης για τον ιστότοπο που δημιουργήθηκε, τον οποίο μπορείτε να χρησιμοποιήσετε στα δικά σας έργα, ωστόσο θέλετε.
Γράφτηκε αποκλειστικά για WDD από Κάμερον Τσάπμαν .
Τι πιστεύεις για αυτό το βιβλίο; Ενημερώστε μας στον τομέα των σχολίων ...