Μια από τις "πιο καυτές" τεχνικές στον ιστό σήμερα είναι η κύλιση παράλλαξης. Έχουμε βρεθεί όλοι σε εκείνους τους ιστότοπους όπου περιστρέφετε τον τροχό κύλισης στο ποντίκι σας και το περιεχόμενο στη σελίδα μετακινείται προς τα πάνω ή προς τα κάτω ή σε όλη τη σελίδα καθώς περιστρέφετε τον τροχό του ποντικιού.
Για όσους είναι νέοι στο σχεδιασμό ιστοσελίδων και στο γραφικό σχεδιασμό, αυτή η τεχνική μπορεί να είναι εξαιρετικά δύσκολη να επιτευχθεί λόγω της απαιτούμενης ποσότητας CSS.
Αν αυτό σας περιγράφει, υπάρχουν αρκετές εφαρμογές που μπορεί να απευθύνονται μόνο σε καλλιτέχνες γραφικών. Χρησιμοποιούν βασικά μια εξοικείωση με τη διάταξη σελίδας σε ιστοσελίδες, πράγμα που σημαίνει ότι δεν υπάρχει πολύ, αν υπάρχει, κωδικοποίηση. Μία εφαρμογή που έχει αναδείξει πραγματικά είναι η Adobe Muse.
Η δουλειά που γίνεται από επαγγελματίες γραφικών χρησιμοποιώντας το Muse είναι αρκετά καταπληκτική και μπορείτε να δείτε μια δειγματοληψία για το τι μπορείτε να κάνετε με την επίσκεψη στο Muse Site of The Day . Αν και οι επαγγελματίες του διαδικτύου τείνουν να θεωρούν τη Muse ως ένα είδος "παιχνιδιού", χρησιμοποιούνται επίσης από τους σχεδιαστές για τη δημιουργία πρωτοτύπων για κινητά και διαδικτυακά, τα οποία θα παραδοθούν τελικά στους προγραμματιστές της ομάδας τους.
Μια τεχνική που είναι απίστευτα εύκολο να επιτευχθεί με το Muse είναι η παράλληλη κύλιση και, αν θέλετε να δείτε την ολοκληρωμένη έκδοση της άσκησης Θα περπατήσουμε κατευθείαν, θα κατευθυνθείτε στον browser σας σε αυτή τη σελίδα. Όταν μετακινείτε τον τροχό κύλισης του ποντικιού, το κείμενο φαίνεται να μετακινείται προς τα πάνω ή προς τα κάτω στη σελίδα και οι εικόνες αλλάζουν.
Ας αρχίσουμε.
01 από 07
Δημιουργία ιστοσελίδας
Όταν ανοίγετε το Muse, κάντε κλικ στο σύνδεσμο Νέα τοποθεσία . Αυτό θα ανοίξει τις Νέες ιδιότητες ιστότοπου . Αυτό το έργο θα σχεδιαστεί για μια εφαρμογή επιφάνειας εργασίας και μπορείτε να το επιλέξετε από το αναδυόμενο μενού Initial Layout . Μπορείτε επίσης να ορίσετε τις τιμές για τον αριθμό των στηλών, το πλάτος υδρορροής, τα περιθώρια και την επένδυση. Σε αυτή την περίπτωση, δεν μας άρεσε πολύ και απλά κάναμε κλικ στο OK .
02 του 07
Μορφοποιήστε τη σελίδα
Όταν ορίσατε τις ιδιότητες του ιστότοπου και κάνατε κλικ στο OK, οδηγήσατε σε αυτό που ονομάζεται προβολή χάρτη . Υπάρχει μια Αρχική σελίδα στην κορυφή και μια Κύρια Σελίδα στο κάτω μέρος του παραθύρου. Χρειαζόμασταν μόνο μία σελίδα. Για να φτάσετε στο Design View, κάναμε διπλό κλικ στην Αρχική σελίδα που άνοιξε τη διεπαφή.
Στα αριστερά υπάρχουν μερικά βασικά εργαλεία και στα δεξιά υπάρχουν διάφορα πάνελ που χρησιμοποιούνται για το χειρισμό του περιεχομένου στη σελίδα. Στην κορυφή υπάρχουν οι ιδιότητες που μπορούν να εφαρμοστούν στη σελίδα ή οτιδήποτε επιλεγεί στη σελίδα. Σε αυτή την περίπτωση, θέλαμε να έχουμε ένα μαύρο φόντο. Για να το επιτύχουμε, κάνουμε κλικ στο τσιπ χρώματος Browser Fill και επιλέξαμε το μαύρο από το Color Picker.
03 του 07
Προσθήκη κειμένου στη σελίδα
Το επόμενο βήμα είναι να προσθέσετε κάποιο κείμενο στη σελίδα. Επιλέξαμε το εργαλείο κειμένου και σχεδιάσαμε ένα πλαίσιο κειμένου. Εισήγαγε τη λέξη "Καλωσορίσατε" και, στις Ιδιότητες, ορίσατε το κείμενο σε Arial, 120 pixels Λευκό. Center Aligned.
Μετά επιλέξαμε το εργαλείο επιλογής, κάναμε κλικ στο πλαίσιο κειμένου και ρυθμίσαμε τη θέση Y σε 168 pixels από την κορυφή. Με το πλαίσιο κειμένου που επιλέξατε, ανοίξαμε τον πίνακα "Ευθυγράμμιση" και ευθυγραμμίσαμε το πλαίσιο κειμένου στο κέντρο.
Τέλος, με το επιλεγμένο πλαίσιο κειμένου, κρατήσαμε πατημένα τα πλήκτρα Option / Alt και Shift και πραγματοποιήσαμε τέσσερα αντίγραφα του πλαισίου κειμένου. Αλλάξαμε το κείμενο και τη θέση Y κάθε αντιγράφου σε:
- Για, 871
- Γραφικά, 1621
- Λογισμικό, 2371
- @ Su-china.com, 3181
Θα παρατηρήσετε ότι, καθώς ρυθμίζετε τη θέση κάθε πλαισίου κειμένου, η σελίδα μετατρέπεται σε μέγεθος για να προσαρμόζεται η θέση του κειμένου.
04 του 07
Προσθέστε αντιπροσωπευτικά στοιχεία εικόνας
Το επόμενο βήμα είναι να τοποθετήσετε εικόνες μεταξύ των μπλοκ κειμένου.
Το πρώτο βήμα είναι να επιλέξετε το εργαλείο Rectangle και να σχεδιάσετε ένα κουτί που εκτείνεται από τη μία πλευρά της σελίδας στην άλλη. Με το επιλεγμένο ορθογώνιο, ρυθμίζουμε το ύψος του σε 250 εικονοστοιχεία και τη θέση του σε 425 εικονοστοιχεία . Το σχέδιο είναι να έχουν πάντα να τεντώνουν ή να συστέλλονται με το πλάτος σελίδας για να φιλοξενήσουν το παράθυρο προβολής του προγράμματος περιήγησης του χρήστη. Για να το επιτύχουμε, κάναμε κλικ στο πλήκτρο πλάτους 100% στις ιδιότητες. Αυτό που κάνει είναι να γκριθεί η τιμή X και να διασφαλιστεί ότι η εικόνα είναι πάντα 100% του πλάτους προβολής σε ένα πρόγραμμα περιήγησης.
05 του 07
Προσθήκη εικόνων σε αντικείμενα τοποθεσίας εικόνας
Με το επιλεγμένο ορθογώνιο, κάναμε κλικ στο σύνδεσμο Συμπλήρωση - όχι στο Χρώμα Χρώματος - και επιλέξαμε το μελάνι για να προσθέσουμε μια εικόνα στο ορθογώνιο. Στην περιοχή Συνδυασμός , επιλέξαμε το Scale To Fit και κάνατε κλικ στην κεντρική λαβή στην περιοχή Θέση για να εξασφαλίσετε ότι η εικόνα θα κλιμακωθεί από το κέντρο της εικόνας.
Έπειτα, χρησιμοποιήσαμε την τεχνική drag / Alt-Shift για να δημιουργήσουμε ένα αντίγραφο της εικόνας μεταξύ των δύο πρώτων μπλοκ κειμένου, ανοίξαμε τον πίνακα Fill και άλλαξαμε την εικόνα για άλλη. Το κάναμε και για τις υπόλοιπες δύο εικόνες.
Με τις εικόνες στη θέση τους, είναι καιρός να προσθέσετε την κίνηση.
06 του 07
Προσθέστε κύλιση Parallax
Υπάρχουν διάφοροι τρόποι για να προσθέσετε κύλιση parallax στο Adobe Muse. Θα σας δείξουμε έναν απλό τρόπο να το κάνετε.
Με το πλαίσιο πληρότητας ανοιχτό, κάντε κλικ στην καρτέλα Μετακίνηση και, όταν ανοίξει, κάντε κλικ στο πλαίσιο ελέγχου Κίνηση .
Θα δείτε τιμές για αρχική και τελική κίνηση . Αυτά καθορίζουν πόσο γρήγορα μετακινείται η εικόνα σε σχέση με τον τροχό κύλισης. Για παράδειγμα, μια τιμή 1,5 θα μετακινήσει την εικόνα 1,5 φορές γρηγορότερα από τον τροχό. Χρησιμοποιήσαμε τιμή 0 για να κλειδώσετε τις εικόνες στη θέση τους.
Τα οριζόντια και κάθετα βέλη καθορίζουν την κατεύθυνση της κίνησης. Εάν οι τιμές είναι 0, οι εικόνες δεν θα πέσουν ανεξάρτητα από το βέλος που κάνετε κλικ.
Η μεσαία τιμή - Πλήκτρο θέσης - δείχνει το σημείο όπου αρχίζουν να κινούνται οι εικόνες. Η γραμμή πάνω από την εικόνα ξεκινά, για αυτή την εικόνα, 325 pixels από το επάνω μέρος της σελίδας. Όταν η μετακίνηση φτάσει σε αυτήν την τιμή, η εικόνα αρχίζει να μετακινείται. Μπορείτε να αλλάξετε αυτήν την τιμή είτε αλλάζοντας το στο παράθυρο διαλόγου είτε κάνοντας κλικ και σύροντας το σημείο στο πάνω μέρος της γραμμής είτε πάνω είτε κάτω.
Επαναλάβετε αυτό για τις άλλες εικόνες στη σελίδα.
07 του 07
Δοκιμή Browser
Σε αυτό το σημείο, τελείωσα. Το πρώτο πράγμα που κάναμε, για προφανείς λόγους, ήταν να επιλέξετε File> Save Site . Για τη δοκιμή του προγράμματος περιήγησης, επιλέξαμε απλώς Αρχείο> Σελίδα προεπισκόπησης στο πρόγραμμα περιήγησης . Αυτό άνοιξε το προεπιλεγμένο πρόγραμμα περιήγησης του υπολογιστή μας και, όταν άνοιξε η σελίδα, ξεκινήσαμε την κύλιση.