Αντικατάσταση Τεχνικές Κείμενο σε HTML / CSS
Δευτέρα, 23 Ιουνίου 2008 Ο κατάλληλος τρόπος για να τεθεί σε τίτλους γραφικά σε μια ιστοσελίδα είναι να αντικατασταθούν μέσω της stylesheets (βλ. Προοδευτική Ανάδειξη σε προσβασιμότητας και χρηστικότητας: διακριτικές Javascript). Αυτή η τεχνική σας επιτρέπει να κάνετε το περιεχόμενο του δικτυακού τόπου, ανεξάρτητα από την απεικόνιση των γραφικών από την ταινία που του στυλ. Επίσης, οι crawlers και αράχνες, έχουν τη σωστή ανάγνωση της HTML αγνοώντας την αντικατάσταση γραφικά προσφέρουν στον τελικό χρήστη. Εισαγωγή εικόνας άμεσα (TAG img στην πραγματικότητα, ο τίτλος απρόσιτο για τους απλούς αναγνώστες ASCII (crawlers, αράχνες, blog plugins, ανάγνωσης οθόνης, κλπ. ...).
Ένα άλλο πλεονέκτημα είναι να μην υποτιμήσει τη δυνατότητα να φορτώσετε ένα φύλλο στυλ σε σχέση με τη γλώσσα, για να γίνει αυτό το χώρο που επίσης βρίσκεται στο εικόνες.
Αντικαταστήστε με τη χρήση της τεχνικής της CSS μπορεί να εφαρμοστεί μόνο σε ιστοσελίδες που έχουν ήδη online, όπου η HTML, για διάφορους λόγους, δεν μεταβάλλεται. Το αναγκαίο και επαρκές ώστε να μπορεί να εφαρμοστεί η τεχνική της αντικατάστασης είναι να έχουν πρόσβαση σε ένα μοναδικό τίτλο / κείμενο να αντικατασταθεί. Για παράδειγμα, αν έχουμε μια κατάσταση σαν αυτή:
Χάρη all'attributo id TAG στην H1 μια πιθανή CSS θα είναι:
- h1 (# titolo_uno
- κείμενο-περίπτωση:-1000000px?
- ;width:100px;height:30px; απεικόνιση: block? πλάτος: 100px? ύψος: 30px?
- ( images/titolo-in-grafica.gif ) no-repeat ; υπόβαθρο: url (images / τίτλος-σε-grafica.gif) δεν-επαναλαμβάνω?
- )
Αλλιώς να παρέχει μια μοναδική επιλογή, όπως id και στην προηγούμενη περίπτωση, βέβαια, τα πράγματα γίνονται περίπλοκα, και κάθε περίπτωση πρέπει να εξετάζεται χωριστά, προσπαθεί να ανακτήσει τη δομή univocity DOM HTML.
Αν αντί να γράφουν τον κώδικα HTML, του Συμβουλίου αυτή η σύνταξη, η οποία παρέχει καλή taggatura:
- =”Questo è il titolo numero uno” > <span> Questo è il titolo numero uno </span> </h1> <h1 id ="titolo_uno" τίτλο ="Questo είναι ο τίτλος αριθμό uno"> <span> Αυτό είναι το νούμερο ένα τίτλο </ span> </ h1>
Και το σχετικό CSS:
- } h1 # titolo_uno span (απεικόνιση: ΚΑΝΕΝΑ)
- h1 (# titolo_uno
- ;width:100px;height:30px; απεικόνιση: block? πλάτος: 100px? ύψος: 30px?
- ( images/titolo-in-grafica.gif ) no-repeat ; υπόβαθρο: url (images / τίτλος-σε-grafica.gif) δεν-επαναλαμβάνω?
- )
Αυτό αποτρέπει το text-indent:-1000000px κάνοντας τα πάντα πιο καθαρά, παρά την προσθήκη της span Το ίδιο το κείμενο εξαφανίζεται λόγω της span αλλά εξακολουθεί να είναι ο title (εργαλείων) πάνω από τον τίτλο γραφικών.
Η διαδικασία αυτή έχει το πλεονέκτημα ότι δεν απαιτεί JavaScript για να χρησιμοποιηθεί, με αποτέλεσμα να είναι απλή και εύκολη στην εφαρμογή, ακόμη και για τους λιγότερο πεπειραμένους.
Angelo είπε:
Χρησιμοποιήστε το
text-indentδεν θεωρώ εντελώς δεξιά, αλλά με τη δεύτερη λύση επιλύει τα πάντα .. Μ 'αρέσει, είναι μια καλή τεχνική .. σας κρατούν σε αντάλλαγμα για τη μελλοντική εργασία!Giovambattista Fazioli δήλωσε:
@ Angelo: Συμφωνώ, το
text-indentπου συνήθως είναι ένα "κομμάτι" όταν δεν μπορείτε να γράψετε κώδικα HTML καλύτερο. Το δεύτερο, όμως, πάντα να χρησιμοποιείτε αυτό το θέμα όταν έχουν να κάνουν με στοιχεία που αποδεικνύουν ότι "μπορεί" αντικαθίσταται από γραφικό κάτω.Κατά τις επόμενες ημέρες να παρουσιάσει μια άλλη πολύ ενδιαφέρουσα τεχνική για την αντικατάσταση κειμένου με γραφικά ... τότε να μου πείτε αν είναι "ωραία", όπως το βρήκα εγώ
Angelo είπε:
Δεν παραλείπουν!
Κείμενο αντικατάσταση τεχνικών στο Flash | Undolog.com δήλωσε:
[...] Κείμενο αντικατάσταση σας παρουσιάζω σήμερα είναι από ορισμένες απόψεις, πολύ ενδιαφέρον. Σε αντίθεση με την κλασική εικόνα για την αντικατάσταση μέσω CSS, η τεχνική αυτή χρησιμοποιεί ένα Flash movie για να παρακάμψετε τους τίτλους του site μας. Αν και πρόκειται για ένα [...]