Πώς να προσθέσετε εικόνες στον ιστότοπό σας στο Dreamweaver - ανδρείκελα

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

Χρειάζεστε ένα άλλο πρόγραμμα, όπως Photoshop, Photoshop Elements ή Fireworks, για τη δημιουργία, μετατροπή, επεξεργασία και βελτιστοποίηση εικόνων. Η βελτιστοποίηση των εικόνων κάνει τα αρχεία μικρότερα, ώστε οι εικόνες σας να κατεβάζουν πιο γρήγορα. Το Dreamweaver παρέχει μερικά βασικά εργαλεία επεξεργασίας εικόνας, αλλά κυρίως χρησιμοποιείτε το Dreamweaver για να εισάγετε και να τοποθετήσετε εικόνες στη σελίδα σας.

Το Dreamweaver κάνει εύκολη την τοποθέτηση εικόνων στις ιστοσελίδες σας και παρέχει πολλούς τρόπους για να το κάνετε:

• Κάντε κλικ στο εικονίδιο Εικόνες στον πίνακα Common Insertion και στη συνέχεια επιλέξτε μια εικόνα χρησιμοποιώντας το παράθυρο διαλόγου Insert Image.

• Στον πίνακα Files, κάντε κλικ και σύρετε ένα όνομα εικόνας στη σελίδα όπου θέλετε να εμφανίζεται η εικόνα.

• Χρησιμοποιήστε το μενού Εισαγωγή.

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

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

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

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

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

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

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

4. Περιήγηση για να εντοπίσετε την εικόνα που θέλετε να εισαγάγετε.

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

   • Σε έναν υπολογιστή με Windows XP, επιλέξτε Thumbnails από την αναπτυσσόμενη λίστα μενού Προβολή στα δεξιά του πεδίου Look in για να εμφανίσετε εκδοχές μικρογραφιών όλων των εικόνων σε οποιοδήποτε ανοιχτό φάκελο. Μπορείτε επίσης να προβάλετε μια μόνο προεπισκόπηση οποιασδήποτε επιλεγμένης εικόνας στην άκρα δεξιά του πλαισίου διαλόγου.

   • Σε έναν υπολογιστή με Windows Vista ή Windows 7 , επιλέξτε μια επιλογή εικονιδίου (μικρά εικονίδια, μεσαία εικονίδια, μεγάλα εικονίδια ή πολύ μεγάλα εικονίδια) από την αναπτυσσόμενη λίστα μενού Προβολή στα δεξιά της εμφάνισης για να εμφανίζονται εκδόσεις μικρογραφιών όλων των εικόνων σε οποιονδήποτε ανοιχτό φάκελο. Μπορείτε επίσης να προβάλετε μια μόνο προεπισκόπηση οποιασδήποτε επιλεγμένης εικόνας στην άκρα δεξιά του πλαισίου διαλόγου.

   • Σε Mac, επιλέξτε την επιλογή Προβολή ως στήλες από το επάνω αριστερό μέρος του παραθύρου διαλόγου. Μπορείτε να δείτε μια ενιαία προεπισκόπηση οποιασδήποτε επιλεγμένης εικόνας στην άκρα δεξιά του πλαισίου διαλόγου.

     

     Πίστωση: Φωτογραφίες από Casey Stoll

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

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

6. Επιλέξτε την εικόνα στην ιστοσελίδα σας για να προβάλετε και να επεξεργαστείτε τις ιδιότητες της εικόνας.

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

   

   Πίστωση: Φωτογραφία από την Casey Stoll

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

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

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

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