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

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

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

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

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

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

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

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

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

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

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

Μπορείτε να εισαγάγετε εικόνες στο επάνω αριστερό μέρος ενός νέου κενού αρχείου και μπορείτε να εισάγετε εικόνες σε

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

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

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

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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