Πώς να δημιουργήσετε Swaps με πολλαπλές εικόνες στο Dreamweaver - dummies

Προτού ξεκινήσετε να δημιουργείτε ένα πιο περίπλοκο σχέδιο σελίδας με τη συμπεριφορά Swap Image του Dreamweaver, (9)> Όταν χρησιμοποιείτε τη συμπεριφορά Swap Image, είναι σημαντικό να κάνετε όλες τις εικόνες που θα αλλάξετε με το ίδιο μέγεθος (ύψος και πλάτος).Όταν οι εικόνες δεν έχουν το ίδιο μέγεθος, όλες οι εικόνες, εκτός από την πρώτη, θα τεντωθούν ή θα συμπιεστούν για να χωρέσουν στο χώρο που έχει ληφθεί από την πρώτη εικόνα που εισήχθη στη σελίδα

Εάν χρησιμοποιείτε τη συμπεριφορά Swap Image με μια σειρά εικόνων που δεν έχουν το ίδιο ύψος και πλάτος, έχετε μερικές επιλογές:

Περικοπή των μεγαλύτερων έτσι ώστε όλες οι εικόνες να έχουν το ίδιο μέγεθος

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

Δημιουργήστε ένα αρχείο εικόνας το μέγεθος της μεγαλύτερης εικόνας σας, ρυθμίστε το φόντο σε ένα ουδέτερο χρώμα, όπως το μαύρο ή το λευκό, και στη συνέχεια εισαγάγετε όλες τις άλλες εικόνες στο φόντο, ώστε να μπορείτε να τις αποθηκεύσετε με το ίδιο μέγεθος αρχείου.

Ακολουθήστε τα παρακάτω βήματα για να χρησιμοποιήσετε τη συμπεριφορά Ανταλλαγή εικόνας:

1Να δημιουργήσετε ένα σχέδιο σελίδας με όλες τις εικόνες που θέλετε να εμφανίζονται αρχικά.

Κάθε μία από τις τρεις φωτογραφίες στο σχέδιο σελίδας για τη Γέφυρα του Πύργου στο Λονδίνο έχει δύο αντίγραφα: μία μικρογραφία και μία μεγαλύτερη έκδοση. Όταν φορτώνεται η πρώτη σελίδα σε ένα πρόγραμμα περιήγησης ιστού, και οι τρεις εικόνες μικρογραφιών τοποθετούνται στο κάτω μέρος της σελίδας, με την πρώτη από τις αντίστοιχες μεγαλύτερες εκδόσεις να εμφανίζεται στην κύρια περιοχή λίγο πάνω από τις μικρογραφίες.

2 Ονομάστε τις εικόνες σας στον Έλεγχο ιδιοτήτων.

Για να στοχεύσετε τις εικόνες σας με το JavaScript, το πώς λειτουργούν οι συμπεριφορές, δώστε πρώτα σε κάθε εικόνα ένα μοναδικό αναγνωριστικό. Το αναγνωριστικό εικόνας δεν είναι το ίδιο με το όνομα αρχείου εικόνας ή την ετικέτα κειμένου, αν και μπορείτε να χρησιμοποιήσετε τα ίδια ή παρόμοια ονόματα. Τα αναγνωριστικά εικόνας δεν πρέπει να έχουν κενά ή ειδικούς χαρακτήρες.

3Επιλέξτε Παράθυρο → Συμπεριφορές.

Ανοίγει ο πίνακας συμπεριφορών. Μπορείτε να σύρετε τον πίνακα "Συμπεριφορές" σε άλλο σημείο της σελίδας και μπορείτε να το αναπτύξετε σύροντας το κάτω μέρος ή την πλευρά του. Ενδέχεται επίσης να θέλετε να κλείσετε οποιοδήποτε άλλο ανοιχτό πλαίσιο για να κάνετε περισσότερο χώρο κάνοντας κλικ στη σκούρα γκρι γραμμή στην κορυφή κάθε πλαισίου.

4Επιλέξτε μια εικόνα.

Επιλέξτε την εικόνα στη σελίδα που θα χρησιμεύσει ως η σκανδάλη για τη δράση.

5Επιλέξτε τη συμπεριφορά Swap Image.

Με την εικόνα σκανδάλης που επιλέχθηκε στον χώρο εργασίας, κάντε κλικ στο σύμβολο συν στον πίνακα "Συμπεριφορές" για να ανοίξετε την αναπτυσσόμενη λίστα ενεργειών και επιλέξτε τη δράση που θέλετε να εφαρμόσετε.

6Εισαγάγετε τις εικόνες που θέλετε να ανταλλάξετε στο παράθυρο διαλόγου Ανταλλαγή εικόνας.

Στη λίστα Εικόνες, επιλέξτε το αναγνωριστικό για την εικόνα που θα αντικατασταθεί. Κάντε κλικ στο κουμπί Αναζήτηση για να επιλέξετε την εικόνα που αντικαθιστά την κύρια εικόνα. Εάν η εικόνα δεν έχει ήδη αποθηκευτεί στο φάκελο του τοπικού ιστότοπου, το Dreamweaver θα σας προσφέρει να το αντιγράψετε εκεί για εσάς.

Στο κάτω μέρος του παραθύρου διαλόγου Swap Image, επιλέξτε την επιλογή Preload Images για να δώσετε εντολή στο πρόγραμμα περιήγησης να φορτώσει όλες τις εικόνες στην προσωρινή μνήμη κατά τη φόρτωση της σελίδας.

Αν δεν επιλέξετε αυτήν την επιλογή, ενδέχεται να προκύψει καθυστέρηση όταν χρησιμοποιείται η εναλλαγή εικόνας.

8Αν θέλετε, απενεργοποιήστε την επιλογή Restore Images OnMouseOut.

Η επιλογή "Επαναφορά εικόνων OnMouseOut" σημαίνει ότι όταν ολοκληρωθεί ένα συμβάν (όπως όταν το ποντίκι απομακρύνεται από τη μικρογραφία που ενεργοποιεί), αντικαθίσταται η αρχική εικόνα. Από προεπιλογή, το Dreamweaver προεπιλέγει αυτή την επιλογή για τη συμπεριφορά Swap Image. Ενδέχεται να θέλετε να καταργήσετε την επιλογή αυτής της επιλογής αν διαπιστώσετε ότι η αντικατάσταση της αρχικής εικόνας κάθε φορά που μετακινείτε τον κέρσορα πάνω από μια άλλη μικρογραφία προκαλεί στρέβλωση.

9Όταν καθορίσετε όλες τις ρυθμίσεις για τη συμπεριφορά, κάντε κλικ στο κουμπί OK.

Η νέα συμπεριφορά εμφανίζεται στον πίνακα "Συμπεριφορές".

10Εισαγάγετε ένα συμβάν για τη συμπεριφορά.

Μετά την εφαρμογή της ενέργειας, μπορείτε να επιστρέψετε και να καθορίσετε ποιο συμβάν θα ενεργοποιήσει τη δράση. Από προεπιλογή, το Dreamweaver εφαρμόζει το συμβάν OnMouseOver όταν χρησιμοποιείτε τη δράση Swap Image, αλλά μπορείτε να αλλάξετε το συμβάν σε οποιοδήποτε διαθέσιμο, όπως το OnClick, το οποίο απαιτεί από το χρήστη να κάνει κλικ στην εικόνα για να ενεργοποιήσει τη δράση Ανταλλαγή εικόνας.

11Εφαρμόστε επιπλέον συμπεριφορές.

Για να εφαρμόσετε τη συμπεριφορά Swap Image σε άλλες εικόνες μιας σελίδας, επαναλάβετε τα βήματα 5-10, κάνοντας κλικ για να επιλέξετε την εικόνα που θέλετε να χρησιμοποιήσετε ως σκανδάλη και στη συνέχεια να ορίσετε την αντίστοιχη εικόνα που θα πρέπει να αντικατασταθεί.

12Επιλέξτε την εργασία σας σε ένα πρόγραμμα περιήγησης.

Δεν μπορείτε να δείτε τα αποτελέσματα των συμπεριφορών όπως αυτή μέχρι να κάνετε κλικ στο κουμπί Ζωντανή προβολή επάνω αριστερά του χώρου εργασίας στο Dreamweaver ή να κάνετε προεπισκόπηση της σελίδας σας σε ένα πρόγραμμα περιήγησης ιστού.