Όλα όσα βλέπει ο επισκέπτης στις σελίδες του ιστότοπου εμφανίζονται από το πρόγραμμα περιήγησης βάσει λεπτομερών οδηγιών που του έστειλε ο διακομιστής. Αυτές οι οδηγίες ονομάζονται html-code της σελίδας και αποτελούνται από ξεχωριστές "ετικέτες" που περιγράφουν τον τύπο, την εμφάνιση και τη θέση κάθε στοιχείου ξεχωριστά. Για να τοποθετήσετε οποιοδήποτε νέο στοιχείο (για παράδειγμα, μια εικόνα) σε μια σελίδα, πρέπει να προσθέσετε μια αντίστοιχη εντολή - μια ετικέτα - στον πηγαίο κώδικα της. Σκεφτείτε τον ευκολότερο τρόπο για να το κάνετε αυτό.
Οδηγίες
Βήμα 1
Εάν χρησιμοποιείτε οποιοδήποτε είδος συστήματος διαχείρισης περιεχομένου, είναι πολύ πιθανό να περιλαμβάνει ένα πρόγραμμα επεξεργασίας σελίδων. Αρχικά, πρέπει να ανοίξετε την επιθυμητή σελίδα σε αυτόν τον επεξεργαστή. Περαιτέρω - οι επιλογές είναι δυνατές. Στην καλύτερη περίπτωση, ο επεξεργαστής σελίδας θα έχει "οπτική λειτουργία", με άλλα λόγια - "Λειτουργία WYSIWYG" (Αυτό που βλέπετε είναι αυτό που παίρνετε - "αυτό που βλέπετε είναι αυτό που παίρνετε"). Σε αυτήν τη λειτουργία, δεν θα χρειαστεί να ασχοληθείτε καθόλου με τον αρχικό κώδικα HTML! Η σελίδα του προγράμματος επεξεργασίας θα έχει την ίδια εμφάνιση όπως στον ιστότοπο, αρκεί να σπρώξετε το ποντίκι στην επιθυμητή θέση και να πατήσετε το κουμπί "εισαγωγή εικόνας" στον πίνακα επεξεργασίας.
Βήμα 2
Ως αποτέλεσμα, θα ανοίξει ένα παράθυρο διαλόγου στο οποίο πρέπει να επιλέξετε την επιθυμητή εικόνα. Εάν δεν το έχετε ανεβάσει ακόμα, υπάρχει επίσης ένα κουμπί για την επιλογή μιας εικόνας στον υπολογιστή σας και τη μεταφόρτωσή της στο διακομιστή. Επιπλέον, σε αυτό το παράθυρο διαλόγου μπορείτε να ορίσετε το χρώμα και το πλάτος του πλαισίου γύρω από την εικόνα, την απόσταση και το χρώμα του γεμίσματος μεταξύ του πλαισίου και της εικόνας, το κείμενο για την επεξήγηση εργαλείου. Δεν είναι απαραίτητο να προσδιορίσετε τις διαστάσεις εδώ, αλλά για λόγους επιτάχυνσης της φόρτωσης σελίδας και για την αποφυγή παραμόρφωσης του σχεδιασμού, είναι ακόμα καλύτερο να το κάνετε αυτό. Όταν συμπληρωθούν όλα τα απαιτούμενα πεδία του διαλόγου, κάντε κλικ στο "OK" και μετά αποθηκεύστε την επεξεργασμένη σελίδα.
Βήμα 3
Λόγω του γεγονότος ότι δεν υπάρχει ενιαίο πρότυπο για συστήματα ελέγχου, η διαδικασία εισαγωγής μιας εικόνας στην οπτική λειτουργία του συστήματός σας ενδέχεται να διαφέρει ελαφρώς, αλλά η αρχή θα είναι η ίδια. Για τον ίδιο λόγο, η λειτουργία WYSIWYG ενδέχεται να μην εμφανίζεται στο σύστημα διαχείρισης του ιστότοπού σας. Στη συνέχεια, πρέπει να επεξεργαστείτε τον πηγαίο κώδικα της σελίδας σε HTML (HyperText Markup Language - "hypertext markup language"). Θα πρέπει να εισαγάγετε μια ετικέτα στη σωστή θέση στον κώδικα που λέει στο πρόγραμμα περιήγησης να εμφανίσει την εικόνα εδώ. Στην απλούστερη μορφή του, θα πρέπει να μοιάζει με αυτό: Εδώ είναι η "σχετική διεύθυνση" της εικόνας - σε αυτήν τη διεύθυνση το πρόγραμμα περιήγησης πρέπει να επικοινωνήσει με τον διακομιστή για να πάρει το αρχείο εικόνας από αυτήν. Εάν η διεύθυνση είναι σχετική, τότε το πρόγραμμα περιήγησης θα υποθέσει ότι το αρχείο βρίσκεται στον ίδιο φάκελο διακομιστή με την ίδια τη σελίδα (ή σε έναν υποφάκελο). Ωστόσο, για να μην γίνει λάθος, είναι καλύτερο να καθορίσετε την "απόλυτη διεύθυνση" - για παράδειγμα, όπως αυτό: Φυσικά, προκειμένου ο διακομιστής να βρει και να στείλει την εικόνα στο πρόγραμμα περιήγησης, θα πρέπει να μεταφορτωθεί στον καθορισμένο τοποθεσία. Ο ευκολότερος τρόπος για να γίνει αυτό είναι μέσω του διαχειριστή αρχείων, το οποίο υπάρχει σε κάθε σύστημα διαχείρισης περιεχομένου, καθώς και στον πίνακα ελέγχου της εταιρείας φιλοξενίας σας. Μπορείτε επίσης να το κάνετε αυτό χρησιμοποιώντας το πρωτόκολλο FTP (Πρωτόκολλο μεταφοράς αρχείων - "πρωτόκολλο μεταφοράς αρχείων"), χρησιμοποιώντας ένα ειδικό πρόγραμμα - πελάτης FTP. Υπάρχουν πολλά από αυτά, τόσο επί πληρωμή όσο και δωρεάν - για παράδειγμα, Cute FTP, FlashFXP, WS FTP, κ.λπ. Αλλά, φυσικά, η εγκατάσταση, η διαχείριση και η διαμόρφωση του προγράμματος θα χρειαστούν χρόνο, οπότε ένας διαχειριστής αρχείων για τη λήψη όλων όσων χρειάζεστε μέσω ένα πρόγραμμα περιήγησης είναι μια ευκολότερη επιλογή.
Βήμα 4
Εκτός από τη διεύθυνση στην ετικέτα html της εικόνας, μπορείτε να καθορίσετε επιπλέον πληροφορίες - "χαρακτηριστικά" της ετικέτας. Για παράδειγμα, το χαρακτηριστικό alt="Image" περιέχει το κείμενο για την επεξήγηση εργαλείου που εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα: Μπορεί να αντικατασταθεί με το χαρακτηριστικό - title: - Το μέγεθος του ορθογωνίου στο οποίο θα πρέπει το πρόγραμμα περιήγησης Εμφάνιση της εικόνας ρυθμίζεται από τα χαρακτηριστικά πλάτους και ύψους: - Το χαρακτηριστικό περιγράμματος καθορίζει το πλάτος του περιγράμματος γύρω από την εικόνα (σε εικονοστοιχεία): Εάν η εικόνα γίνει σύνδεσμος, το πρόγραμμα περιήγησης θα σχεδιάσει ένα μπλε περίγραμμα γύρω από αυτό. Για να το ξεφορτωθείτε, ορίστε την τιμή περιγράμματος στο μηδέν: - Τα άλλα δύο χαρακτηριστικά περιέχουν πληροφορίες σχετικά με το μέγεθος της εσοχής της εικόνας από παρακείμενα στοιχεία (από γραμμές κειμένου, άλλες εικόνες κ.λπ.) - Το hspace ορίζει το μέγεθος του εσοχή οριζόντια (αριστερά και δεξιά), vspace - κάθετα (κάτω και πάνω):
