Κοιτάξτε οποιαδήποτε ιστοσελίδα και θα δείτε έναν συνδυασμό περιεχομένου κειμένου και εικόνων. Και τα δύο αυτά στοιχεία είναι απαραίτητα συστατικά για την επιτυχία μιας ιστοσελίδας. Το περιεχόμενο κειμένου είναι αυτό που θα διαβάσουν οι επισκέπτες του ιστότοπου και ποιες μηχανές αναζήτησης θα χρησιμοποιήσουν ως μέρος των αλγορίθμων κατάταξής τους. Οι εικόνες θα προσθέσουν οπτικό ενδιαφέρον στον ιστότοπο και θα τονίσουν το περιεχόμενο του κειμένου.
Ετικέτες HTML έναντι στυλ CSS
Η προσθήκη κειμένου και εικόνων σε ιστότοπους είναι εύκολη. Το κείμενο προστίθεται με τυπικές ετικέτες HTML όπως παραγράφους, επικεφαλίδες και λίστες, ενώ οι εικόνες τοποθετούνται σε μια σελίδα με το στοιχείο. Μόλις προσθέσετε μια εικόνα στην ιστοσελίδα σας, ωστόσο, ίσως θελήσετε να έχετε τη ροή του κειμένου δίπλα στην εικόνα, αντί να ευθυγραμμίσετε κάτω από αυτήν (που είναι ο προεπιλεγμένος τρόπος που μια εικόνα που προστίθεται στον κώδικα HTML θα αποδώσει στο πρόγραμμα περιήγησης). Τεχνικά, υπάρχουν δύο τρόποι για να επιτύχετε αυτήν την εμφάνιση, είτε χρησιμοποιώντας CSS (συνιστάται) είτε προσθέτοντας τις οπτικές οδηγίες απευθείας στο HTML (δεν συνιστάται, καθώς θέλετε να διατηρήσετε το διαχωρισμό του στυλ και της δομής για τον ιστότοπό σας).
Πώς να χρησιμοποιήσετε το CSS για να κάνετε ροή κειμένου γύρω από μια εικόνα
Ο σωστός τρόπος για να αλλάξετε τον τρόπο διάταξης του κειμένου και των εικόνων μιας σελίδας και πώς εμφανίζονται τα οπτικά τους στυλ στο πρόγραμμα περιήγησης με το CSS. Απλώς θυμηθείτε, καθώς μιλάμε για μια οπτική αλλαγή στη σελίδα (κάνοντας ροή κειμένου γύρω από μια εικόνα), αυτό σημαίνει ότι είναι ο τομέας των Cascading Style Sheets.
-
Αρχικά, προσθέστε την εικόνα σας στην ιστοσελίδα σας. Θυμηθείτε να εξαιρέσετε τυχόν οπτικά χαρακτηριστικά (όπως τιμές πλάτους και ύψους) από αυτόν τον HTML. Αυτό είναι σημαντικό, ειδικά για έναν ιστότοπο που ανταποκρίνεται όπου το μέγεθος της εικόνας θα ποικίλλει ανάλογα με το πρόγραμμα περιήγησης. Ορισμένο λογισμικό, όπως το Adobe Dreamweaver, θα προσθέσει πληροφορίες πλάτους και ύψους σε εικόνες που εισάγονται με αυτό το εργαλείο, οπότε φροντίστε να αφαιρέσετε αυτές τις πληροφορίες από τον κώδικα HTML! Φροντίστε, ωστόσο, να συμπεριλάβετε το κατάλληλο εναλλακτικό κείμενο. Ακολουθεί ένα παράδειγμα του τρόπου εμφάνισης του κώδικα HTML:
type = «code»>
-
Για λόγους στυλ, μπορείτε επίσης να προσθέσετε μια τάξη σε μια εικόνα. Αυτή η τιμή κλάσης είναι αυτή που θα χρησιμοποιήσουμε στο αρχείο CSS. Λάβετε υπόψη ότι η τιμή που χρησιμοποιούμε εδώ είναι αυθαίρετη, αν και, για αυτό το συγκεκριμένο στυλ, τείνουμε να χρησιμοποιούμε τιμές «αριστερά» ή «δεξιά», ανάλογα με τον τρόπο με τον οποίο θέλουμε να ευθυγραμμιστεί η εικόνα μας. Θεωρούμε ότι αυτή η απλή σύνταξη λειτουργεί καλά και είναι εύκολο για άλλους που μπορεί να χρειαστεί να διαχειριστούν έναν ιστότοπο στο μέλλον να καταλάβουν, αλλά θα μπορούσατε να δώσετε αυτήν την αξία τάξης που θέλετε.
type = «code»> Από μόνη της, αυτή η τιμή κλάσης δεν θα κάνει τίποτα. Η εικόνα δεν θα ευθυγραμμιστεί αυτόματα στα αριστερά του κειμένου. Για αυτό, πρέπει τώρα να στραφούμε στο αρχείο CSS.
-
Στο φύλλο στυλ σας, μπορείτε πλέον να προσθέσετε το ακόλουθο στυλ: .left {
type = «code»> float: αριστερά;
type = «code»> padding: 0 20px 20px 0;
type = «code»>}
type = «code»> Αυτό που κάνατε εδώ είναι να χρησιμοποιήσετε την ιδιότητα «float» CSS, η οποία θα τραβήξει την εικόνα από την κανονική ροή εγγράφου (με τον τρόπο που θα εμφανίζεται κανονικά η εικόνα, με το κείμενο ευθυγραμμισμένο κάτω από αυτό) και θα το ευθυγραμμίσει με στην αριστερή πλευρά του δοχείου. Το κείμενο που ακολουθεί μετά από τη σήμανση HTML με τώρα τυλίγει γύρω από αυτό. Προσθέσαμε επίσης κάποιες τιμές για την επένδυση, έτσι ώστε αυτό το κείμενο να μην είναι αντίθετα προς την εικόνα. Αντ ‘αυτού, θα έχει κάποια ωραία απόσταση που θα είναι οπτικά ελκυστική στο σχεδιασμό της σελίδας. Στη συντομογραφία CSS για παραγέμισμα, προσθέσαμε 0 τιμές στην επάνω και την αριστερή πλευρά της εικόνας και 20 pixel στην αριστερή και κάτω πλευρά της. Θυμηθείτε, πρέπει να προσθέσετε κάποια επένδυση στη δεξιά πλευρά μιας εικόνας με αριστερή στοίχιση. Μια δεξιά ευθυγραμμισμένη εικόνα (την οποία θα εξετάσουμε σε λίγο) θα είχε εφαρμοστεί το κάλυμμα στην αριστερή του πλευρά.
-
Εάν προβάλετε την ιστοσελίδα σας σε πρόγραμμα περιήγησης, θα πρέπει τώρα να δείτε ότι η εικόνα σας είναι ευθυγραμμισμένη στην αριστερή πλευρά της σελίδας και το κείμενο τυλίγεται όμορφα γύρω από αυτήν. Ένας άλλος τρόπος να το πούμε αυτό είναι ότι η εικόνα «αιωρείται προς τα αριστερά».
-
Εάν θέλετε να αλλάξετε αυτήν την εικόνα ώστε να ευθυγραμμιστεί προς τα δεξιά (όπως στο παράδειγμα φωτογραφίας που συνοδεύει αυτό το άρθρο), θα ήταν απλό. Πρώτον, πρέπει να βεβαιωθείτε ότι, εκτός από το στυλ που μόλις προσθέσαμε στο CSS μας για την τιμή κλάσης «αριστερά», έχουμε επίσης ένα για τη σωστή ευθυγράμμιση. Θα μοιάζει με αυτό: .right {
type = «code»> float: δεξιά;
type = «code»> padding: 0 0 20px 20px;
type = «code»>}
type = «code»> Μπορείτε να δείτε ότι είναι σχεδόν πανομοιότυπο με το πρώτο CSS που γράψαμε. Η μόνη διαφορά είναι η τιμή που χρησιμοποιούμε για την ιδιότητα «float» και τις τιμές padding που χρησιμοποιούμε (προσθέτοντας μερικές στην αριστερή πλευρά της εικόνας μας αντί για τα δεξιά).
-
Τέλος, θα αλλάζατε την τιμή της κλάσης της εικόνας από «αριστερά» σε «δεξιά» στο HTML σας:
type = «code»>
-
Κοιτάξτε τη σελίδα σας στο πρόγραμμα περιήγησης τώρα και η εικόνα σας θα πρέπει να ευθυγραμμιστεί προς τα δεξιά με κείμενο που τυλίγεται γύρω του. Τείνουμε να προσθέτουμε και τα δύο αυτά στυλ, «αριστερά» και «δεξιά» σε όλα τα φύλλα στυλ μας, ώστε να μπορούμε να χρησιμοποιούμε αυτά τα οπτικά στυλ όπως απαιτείται όταν δημιουργούμε ιστοσελίδες. Αυτά τα δύο στυλ γίνονται ωραία, επαναχρησιμοποιήσιμα χαρακτηριστικά στα οποία μπορούμε να στραφούμε όποτε χρειαζόμαστε να σχεδιάσουμε εικόνες με κείμενο που περιτυλίγεται γύρω τους.
Χρησιμοποιήστε HTML αντί για CSS (και γιατί δεν πρέπει να το κάνετε αυτό)
Ακόμα κι αν είναι δυνατό να τυλίξετε κείμενο γύρω από μια εικόνα με HTML, τα πρότυπα ιστού υπαγορεύουν ότι το CSS (και τα βήματα που παρουσιάζονται παραπάνω) είναι ο τρόπος που πρέπει να ακολουθήσετε ώστε να διατηρήσουμε τον διαχωρισμό της δομής (HTML) και του στυλ (CSS). Αυτό είναι ιδιαίτερα σημαντικό όταν θεωρείτε ότι, για ορισμένες συσκευές και διατάξεις, αυτό το κείμενο ίσως οχι πρέπει να ρέει γύρω από την εικόνα. Για μικρότερες οθόνες, μια διάταξη απόκρισης ιστότοπου ενδέχεται να απαιτεί το κείμενο να ευθυγραμμιστεί πραγματικά κάτω από την εικόνα και ότι η εικόνα εκτείνεται σε όλο το πλάτος της οθόνης. Αυτό γίνεται εύκολα με ερωτήματα πολυμέσων εάν τα στυλ σας είναι ξεχωριστά από τη σήμανση HTML. Στον σημερινό κόσμο των πολλών συσκευών, όπου οι εικόνες και το κείμενο θα εμφανίζονται διαφορετικά για διαφορετικούς επισκέπτες και σε διαφορετικές οθόνες, αυτός ο διαχωρισμός είναι απαραίτητος για τη μακροπρόθεσμη επιτυχία και διαχείριση μιας ιστοσελίδας.
Αναφέρετε αυτό το άρθρο
Μορφή mla apa chicago Η αναφορά σας
Kyrnin, Jennifer. «Πώς να τυλίξετε κείμενο γύρω από μια εικόνα.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/wrapping-text-around-image-3466530.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Πώς να τυλίξετε κείμενο γύρω από μια εικόνα. Ανακτήθηκε από το https://www.thoughtco.com/wrapping-text-around-image-3466530
Kyrnin, Jennifer. «Πώς να τυλίξετε κείμενο γύρω από μια εικόνα.» ThoughtCo. https://www.thoughtco.com/wrapping-text-around-image-3466530 (πρόσβαση στις 22 Μαΐου 2021).
αντιγραφή παραπομπής