Πώς να εισαγάγετε εικόνες στο Dreamweaver

Τα μινιμαλιστικά εργαλεία επεξεργασίας εικόνας της Dreamweaver σάς επιτρέπουν να εκτελείτε στοιχειώδη επεξεργασία εικόνας, όπως αλλαγή μεγέθους και περικοπή. Μπορείτε να βρείτε αυτά τα εργαλεία στο Properties Inspector.

Δεν δημιουργείτε εικόνες στο Dreamweaver. Για αυτό, η Adobe παρέχει το Illustrator (για έργα τέχνης, γραφικό κείμενο, εικόνες φόντου σελίδας, εικονίδια πλοήγησης και ούτω καθεξής) και Photoshop (για την προετοιμασία φωτογραφιών για τον Ιστό), καθώς και άλλα εργαλεία. Κατά γενικό κανόνα, συνεχίστε να προετοιμάζετε εικόνες για τον Ιστό σε αυτά τα προγράμματα.

Για να εισαγάγετε εικόνες, βεβαιωθείτε ότι εργάζεστε σε προβολή σχεδίασης (ή σε διαίρεση με τον κέρσορα στην πλευρά σχεδίασης του παραθύρου). Έχετε δύο βασικές διαδρομές: Εισαγάγετε από το μηχάνημά σας ή χρησιμοποιήστε μια τεχνική αντιγραφής και επικόλλησης. Και στις δύο περιπτώσεις, πρέπει να βρίσκεστε σε προβολή σχεδίασης (επιλέξτε Προβολή→Σχεδίαση ή, για Διαίρεση, επιλέξτε Προβολή→Κώδικας και Σχεδίαση) για να δείτε εικόνες καθώς τις επικολλάτε ή τις ενσωματώνετε.

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

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

Έτσι, για να εισαγάγετε ένα αρχείο εικόνας από τον υπολογιστή σας σε μια ανοιχτή ιστοσελίδα HTML στο Dreamweaver, ακολουθήστε τα εξής βήματα:

Κάντε κλικ στο παράθυρο Document στο σημείο όπου θα εισαχθεί η εικόνα.

Σε αυτό το βήμα, εντοπίζετε πού στον κώδικα HTML θα εισαχθεί η εικόνα. Και πάλι, το πού και πώς θα εμφανίζεται η εικόνα θα οριστεί με το CSS.

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

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

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

Κάντε κλικ στο Ναι.

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

Ορίστε χαρακτηριστικά προσβασιμότητας.

Από προεπιλογή, το πλαίσιο διαλόγου Χαρακτηριστικά προσβασιμότητας ετικετών εικόνας Dreamweaver εμφανίζεται πριν την τελική εισαγωγή μιας εικόνας σε μια σελίδα.

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

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

Κάντε κλικ στο OK για να εισαγάγετε την εικόνα.

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