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

Το Rollovers είναι ένα τόσο δημοφιλές χαρακτηριστικό που το Dreamweaver περιλαμβάνει ένα ειδικό παράθυρο διαλόγου μόνο για ανατροπές: το παράθυρο διαλόγου Inlay Rollover Image. Οι εικόνες με κύλιση, όπως υποδηλώνει το όνομα, έχουν σχεδιαστεί για να αντιδρούν όταν κάποιος κυλάει έναν κέρσορα πάνω σε μια εικόνα. Το αποτέλεσμα μπορεί να είναι τόσο δραματικό όσο μια εικόνα ενός σκύλου που αντικαθίσταται από μια εικόνα ενός λιονταριού, ή τόσο λεπτή όσο το χρώμα μιας λέξης που αλλάζει.

Μπορείτε να δημιουργήσετε πιο περίπλοκα εφέ μετατόπισης εικόνας με την επιλογή Ανταλλαγή εικόνας από τον πίνακα "Συμπεριφορές". Η επιλογή Ανταλλαγή εικόνας σας επιτρέπει να αλλάζετε ταυτόχρονα πολλές εικόνες.

Τοποθετήστε το δείκτη του ποντικιού στη σελίδα όπου θέλετε να εμφανιστεί η ανατροπή.

1. Τα εφέ Rollover απαιτούν τουλάχιστον δύο εικόνες: μία για την αρχική κατάσταση και μία για την κατάσταση ανατροπής. Μπορείτε να χρησιμοποιήσετε δύο διαφορετικές εικόνες ή δύο παρόμοιες εικόνες, αλλά και οι δύο θα πρέπει να έχουν τις ίδιες διαστάσεις. Διαφορετικά, βλέπετε παράξενα εφέ κλιμάκωσης επειδή και οι δύο εικόνες πρέπει να εμφανίζονται ακριβώς στον ίδιο χώρο της σελίδας.

   Επιλέξτε Εισαγωγή → Εικόνα → Εικόνα ανατροπής.

2. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε την αναπτυσσόμενη λίστα που υπάρχει από το εικονίδιο Εικόνες στον πίνακα Common Insertion και επιλέξτε Rollover Image.

   Εμφανίζεται το παράθυρο διαλόγου Εισαγωγή εικόνας ανατροπής.

   Στο πλαίσιο Όνομα εικόνας, ονομάστε την εικόνα σας.

   

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

   Στο πλαίσιο Πρωτότυπη εικόνα, καθορίστε την πρώτη εικόνα που θέλετε να εμφανίζεται. Χρησιμοποιήστε το κουμπί Αναζήτηση για να εντοπίσετε και να επιλέξετε την εικόνα.

4. Εάν οι εικόνες δεν βρίσκονται ήδη στον φάκελο του τοπικού ιστότοπού σας, το Dreamweaver τις αντιγράφει στον ιστότοπό σας όταν δημιουργείτε την ανατροπή.

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

5. Και πάλι, μπορείτε να χρησιμοποιήσετε το κουμπί Αναζήτηση για να εντοπίσετε και να επιλέξετε την εικόνα.

   Επιλέξτε το πλαίσιο ελέγχου Preload Rollover Image για να φορτώσετε όλες τις εικόνες rollover στην προσωρινή μνήμη του προγράμματος περιήγησης κατά την πρώτη φόρτωση της σελίδας.

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

   Στο πεδίο Εναλλακτικό κείμενο, εισάγετε μια περιγραφή των εικόνων.

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

   Στο πλαίσιο Όταν χτυπηθεί, Μεταβείτε στο URL, εισαγάγετε οποιαδήποτε διεύθυνση ιστού ή περιηγηθείτε για να εντοπίσετε μια άλλη σελίδα στον ιστότοπό σας στον οποίο θέλετε να συνδεθείτε.

8. Αν δεν καθορίσετε μια διεύθυνση URL, το Dreamweaver εισάγει αυτόματα το σύμβολο # ως σύμβολο κράτησης θέσης στον κώδικα.

   Το σύμβολο # είναι μια κοινή τεχνική για τη δημιουργία συνδέσμων που δεν συνδέονται οπουδήποτε. Επειδή οι εικόνες rollover που δεν συνδέονται με άλλη σελίδα έχουν πολλές χρήσεις, αυτή η τεχνική είναι χρήσιμη. Απλά θυμηθείτε ότι αν θέλετε να συνδεθεί η ανατροπή σας, θα πρέπει να αντικαταστήσετε το σύμβολο # με ένα σύνδεσμο προς μια άλλη σελίδα.

   Κάντε κλικ στο κουμπί OK.

9. Οι εικόνες ρυθμίζονται αυτόματα ως ανατροπή.

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

10. Μπορείτε να δείτε πώς λειτουργεί η ανατροπή σας στην προβολή Design του Dreamweaver ή χρησιμοποιώντας την επιλογή Live view. Όταν κάνετε κλικ στο κουμπί Live στο επάνω αριστερό μέρος του χώρου εργασίας, μπορείτε ουσιαστικά να μετατρέψετε το Dreamweaver σε πρόγραμμα περιήγησης ιστού που εμφανίζει σελίδες σαν το πρόγραμμα περιήγησης Chrome.

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

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

Πίστωση: έργα τέχνης από istockphoto. com