Αυτοί που γνωρίζουν την ανάπτυξη ιστοσελίδων ξέρουν ότι συνήθως δεν ξεκινούν με τη δομή HTML. Αντίθετα, παίρνουν ένα γραφικό πρόγραμμα και δημιουργούν τη δομή της σελίδας εκεί. (Οι άτομα που εργάζονται σε μια εταιρεία λαμβάνουν τη δομή από το γραφίστα ή τον πελάτη). Στη συνέχεια, η εργασία είναι να χτίσετε τη σελίδα από αυτήν τη δομή. Αυτό ακριβώς είναι περίπου το θέμα.
Σε σχέση με την αναπαραγωγή δομών, θα συναντήσετε συνεχώς τους όρους Slicing και Dicing. Αυτό που σημαίνει στην πραγματικότητα είναι ότι παίρνετε το πρότυπο ή το σχέδιο, το κόβετε στο γραφικό πρόγραμμα σας και στη συνέχεια το επανασυνθέτετε με HTML.
Το κατάλληλο γραφικό πρόγραμμα
Καθένας έχει τις προτιμήσεις του σχετικά με το λογισμικό που προτιμά να χρησιμοποιεί. Έτσι, ισχύει το ίδιο και με τα γραφικά προγράμματα. Ωστόσο, σε σχέση με το επαγγελματικό web design, η κατάσταση είναι κάπως διαφορετική. Εκεί σχεδόν αποκλειστικά χρησιμοποιείται το Photoshop. Πράγματι, οι περισσότερες σχεδιαστικές προτάσεις υπάρχουν σε μορφή PSD. Και αυτή η μορφή PSD δεν μπορεί να ανοιχτεί ή να τροποποιηθεί σε όλα τα προγράμματα.
Αν δεν έχετε το Photoshop, δεν είστε απολύτως απογοητευμένοι. Ένα ενδεχόμενο εναλλακτικό πρόγραμμα είναι το GIMP. Μπορείτε να κατεβάσετε δωρεάν το πρόγραμμα από τη σελίδα http://www.gimp.org/. Θα σας δείξω τα βασικά βήματα για τη δημιουργία ενός layout με το GIMP. Αυτό ισχύει με παρόμοιο τρόπο και με το Photoshop.
Δημιουργία δικού σας layout
Καταρχάς, σκεφτείτε τα βασικά στοιχεία σχεδιασμού:
• Πόσο πλατύ θα είναι το layout;
• Πόσες στήλες πρέπει να περιέχει;
Στη συνέχεια, δημιουργήστε την περιοχή εργασίας με την εντολή Αρχείο>Νέο και ορίστε το μέγεθος. Αν και το layout που δημιουργώ εγώ θα είναι "γεμάτο οθόνη", το πραγματικό περιεχόμενο έχει πλάτος μόνο 1000 pixels. Ως ύψος layout ορίζω 887 pixels. (Ενώ το ύψος της ιστοσελίδας στη συνέχεια θα εκτιμηθεί από το περιεχόμενο).
Με το ΟΚ επιβεβαιώνονται οι πληροφορίες. Με αυτό τον τρόπο, η περιοχή εργασίας είναι έτοιμη και μπορεί να γεμίσει με περιεχόμενο. (Για την ευκολία της παρακολούθησης, εργάζομαι με ένα γκρι υπόβαθρο στο σχέδιο. Στην ιστοσελίδα, αυτό δεν θα είναι ορατό αργότερα).
Ένα πολύ τυπικό στοιχείο που πρέπει να υπάρχει στην ιστοσελίδα είναι το λογότυπο, το οποίο συνήθως υπάρχει ως γραφικό. Για να το εισάγετε στο layout, επιλέγετε Αρχείο>Άνοιγμα και επιλέγετε το λογότυπό σας σε μορφή PNG, GIF ή JPEG. Επιβεβαιώστε την επιλογή με Άνοιγμα. Πατήστε τώρα Πατρόν+C, για να αντιγράψετε το λογότυπο στο πρόχειρο. Στη συνέχεια μεταβείτε στο πραγματικό web design και πατήστε Πατρόν+V. Το εισαγμένο λογότυπο δεν θα βρίσκεται ακόμα στη σωστή θέση. Με το εργαλείο Μετακίνησης μπορείτε εύκολα να το μετακινήσετε στη σωστή θέση.
Εάν το εικονίδιο δεν μπορεί να μετακινηθεί, πρέπει πρώτα να ενεργοποιήσετε το επίπεδο. Τις αντίστοιχες ρυθμίσεις θα τις βρείτε κάτω από Παράθυρο>Αλλοδοχές διαλόγων>Επίπεδα.
Για καλύτερη διαίρεση, θα πρέπει να εμφανίσετε Οδηγίες. Κάντε κλικ με το ποντίκι στο Χιλιαρό και σύρετε με πατημένο το αριστερό πλήκτρο σε ποιαδήποτε θέση που επιθυμείτε.
Μπορείτε να σχεδιάσετε όσες οδηγίες επιθυμείτε, στις οποίες μπορείτε να ευθυγραμμίσετε τα στοιχεία της ιστοσελίδας.
Δημιουργήστε τώρα ένα ακόμα επίπεδο. Αυτό το επίπεδο θα περιλαμβάνει το πάνω μενού.
Ως όνομα μπορείτε να δώσετε Κορυφαίο-Μενού. Δημιουργήστε το επίπεδο με ΟΚ. Επιλέξτε το Ορθογώνιο Εργαλείο και σύρετε την περιοχή στην οποία θα εισαχθεί η πλοήγηση.
Στο τρέχον παράδειγμα υποθέτω ότι το υπόβαθρο του πάνω μενού θα έχει ένα χρωματικό φάσμα. Για να το κάνετε αυτό, κάντε κλικ στο Χρωματικό φάσμα: Επιλογή με ένα χρωματικό φάσμα (γεμίστε).
Το χρωματικό φάσμα θα πρέπει να μεταβεί από Γκρι σε Μαύρο. Μπορείτε να ρυθμίσετε τα αντίστοιχα χρώματα μέσω των Πεδίων χρώματος. Για τον τύπο χρωματικού φάσματος, ορίζω VG προς HG, δηλαδή πάει από το Εμπρός- στο Παρασκήνιο. Κρατήστε τώρα πατημένο το πλήκτρο Ctrl- και σύρετε μια γραμμή από επάνω προς τα κάτω στην επιλεγμένη περιοχή. Μόλις αφήσετε το αριστερό πλήκτρο του ποντικιού, η περιοχή θα έχει το επιθυμητό χρωματικό φάσμα.
Αρχικά, έχετε δύο επιλογές:
• Αφήνετε την περιοχή για την πλοήγηση όπως είναι.
• Εισάγετε τις μεμονωμένες επιλογές μενού για να δείτε πιο αναλυτικά στον σχεδιασμό τις γραμματοσειρές κλπ που χρησιμοποιείτε.
Ποια από τις δύ
Μπορείτε τώρα να προσθέσετε τα διάφορα στοιχεία του μενού με αυτόν τον τρόπο. Το καλύτερο είναι να αντιγράψετε το στρώμα όπου περιλαμβάνεται το πρώτο στοιχείο του μενού και να το επικολλήσετε ως ένα νέο στρώμα. Στη συνέχεια, μπορείτε να προσαρμόσετε το κείμενο του επιπέδου. Δημιουργήστε έτσι το επάνω μενού.
Το επάνω μενού πρέπει να έχει ένα εφέ Hover. Έτσι, όταν περνάτε τον δείκτη πάνω από τα διάφορα στοιχεία του μενού, αλλάζει ο χρωματισμός του φόντου τους. Αυτή η πτυχή πρέπει επίσης να οπτικοποιηθεί στο σχέδιο. Για να το πετύχετε, ορίζετε το επιθυμητό χρώμα Hover και αντιγράφετε ένα από τα υπάρχοντα επίπεδα του μενού. Σε αυτό το επίπεδο καθορίζετε το χρώμα. Στο τρέχον παράδειγμα υποθέτω ένα μπλε χρωματικό φάσμα. Στη συνέχεια, εισάγετε το κείμενο του στοιχείου του μενού. Έτσι, μπορείτε να έχετε μια ιδέα για το πώς θα φαίνεται το μενού τελικά.
