Ανατροπές εικόνας στο Adobe CS5 Dreamweaver

Στο Adobe Creative Suite 5 (Adobe CS5) Dreamweaver, μπορείτε να εισαγάγετε αντικείμενα εικόνας, όπως σύμβολα κράτησης θέσης εικόνων, εικόνες ανατροπής (εικόνες που αλλάζουν όταν ο θεατής περνά το ποντίκι πάνω από την εικόνα), γραμμές πλοήγησης και Fireworks HTML. Μπορείτε να αποκτήσετε πρόσβαση σε αυτά τα αντικείμενα εικόνας επιλέγοντας Εισαγωγή→ Αντικείμενα εικόνας.

1Δημιουργήστε τις εικόνες που θα χρησιμοποιηθούν ως ανατροπή.

Μπορείτε να δημιουργήσετε αυτές τις εικόνες στο Fireworks, στο Illustrator, στο Photoshop ή σε οποιαδήποτε άλλη εφαρμογή που μπορεί να αποθηκεύσει εικόνες βελτιστοποιημένες για τον Ιστό.

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

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

3 Ονομάστε την εικόνα.

Πληκτρολογήστε ένα όνομα εικόνας χωρίς κενά στο πεδίο κειμένου Όνομα εικόνας. Αυτό το όνομα χρησιμοποιείται στο σενάριο που δημιουργεί το rollover.

4 Κάντε κλικ στα κουμπιά Αναζήτηση.

Το κουμπί Αναζήτηση βρίσκεται στα δεξιά των πεδίων κειμένου Original Image και Rollover Image. Εντοπίστε την εικόνα που θέλετε να εμφανίζεται ως προεπιλογή στη σελίδα και την εικόνα που εμφανίζεται μόνο όταν κάποιος τοποθετεί το ποντίκι πάνω από την εικόνα.

5 Αφήστε επιλεγμένο το πλαίσιο ελέγχου Προφόρτωση Rollover Image.

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

6 Περιγράψτε την εικόνα.

Πληκτρολογήστε κατάλληλα περιγραφικό εναλλακτικό κείμενο στο πεδίο κειμένου Alt.

7 Συμπληρώστε το πεδίο κειμένου Όταν κάνετε κλικ, Μετάβαση στη διεύθυνση URL.

Αυτό κατευθύνει το Dreamweaver όπου οι θεατές κατευθύνονται όταν κάνουν κλικ στην εικόνα ανατροπής. Μπορείτε είτε να κάνετε κλικ στο κουμπί Αναζήτηση για να εντοπίσετε μια άλλη σελίδα στον ιστότοπό σας είτε να εισαγάγετε μια διεύθυνση URL. Σημείωση: Εάν συνδέεστε σε διαφορετική τοποθεσία Web, πρέπει να συμπεριλάβετε το πρόθεμα http:// στην αρχή της διεύθυνσης URL.

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

8 Κάντε κλικ στο OK.

Η εικόνα ανατροπής δημιουργείται στη σελίδα.

9 Προεπισκόπηση της εικόνας.

Για προεπισκόπηση της νέας εικόνας μετατροπής, επιλέξτε Αρχείο→ Προεπισκόπηση στο πρόγραμμα περιήγησης ή κάντε κλικ στο κουμπί Ζωντανή προβολή στη γραμμή εργαλείων Έγγραφο.