Skip to main content

Πώς να αποκλείσετε μια ιστοσελίδα από την εκτύπωση με CSS

Ενεργοποιήστε τη φραγή εικόνων στην τρέχουσα ιστοσελίδα (http://rebetiko.el.test4u.eu). Στη... (Απρίλιος 2024)

Ενεργοποιήστε τη φραγή εικόνων στην τρέχουσα ιστοσελίδα (http://rebetiko.el.test4u.eu). Στη... (Απρίλιος 2024)
Anonim

Οι ιστοσελίδες προορίζονται να προβληθούν σε μια οθόνη. Παρόλο που υπάρχει μια μεγάλη ποικιλία πιθανών συσκευών που μπορούν να χρησιμοποιηθούν για την προβολή ενός ιστότοπου (επιτραπέζιους υπολογιστές, φορητούς υπολογιστές, tablet, τηλέφωνα, φορητά, τηλεοράσεις κ.λπ.), όλα περιλαμβάνουν μια οθόνη κάποιου είδους. Υπάρχει ένας άλλος τρόπος που κάποιος μπορεί να δει τον ιστότοπό σας, έναν τρόπο που δεν περιλαμβάνει οθόνη. Αναφερόμαστε σε μια φυσική εκτύπωση των ιστοσελίδων σας.

Πριν από χρόνια, θα διαπιστώσετε ότι οι χρήστες ιστοσελίδων εκτύπωσης ήταν ένα αρκετά κοινό σενάριο. Θυμάμαστε τη συνάντηση με πολλούς πελάτες που ήταν νέοι στο διαδίκτυο και αισθανόμουν πιο άνετα την ανασκόπηση τυπωμένων σελίδων του ιστότοπου. Στη συνέχεια μας έδωσαν ανατροφοδότηση και επεξεργασίες σε αυτά τα κομμάτια χαρτιού αντί να κοιτάξουμε την οθόνη για να συζητήσουμε τον ιστότοπο. Καθώς οι άνθρωποι έχουν γίνει πιο άνετοι με τις οθόνες στη ζωή τους και καθώς αυτές οι οθόνες έχουν πολλαπλασιαστεί πολλές φορές, έχουμε δει λιγότερους και λιγότερους ανθρώπους που προσπαθούν να εκτυπώσουν ιστοσελίδες σε χαρτί, αλλά εξακολουθεί να συμβαίνει. Μπορεί να θέλετε να εξετάσετε αυτό το φαινόμενο όταν σχεδιάζετε τον ιστοχώρο σας. Θέλετε οι χρήστες να εκτυπώσουν τις ιστοσελίδες σας; Ίσως δεν το κάνετε. Αν συμβαίνει αυτό, έχετε κάποιες επιλογές.

Πώς να αποκλείσετε μια ιστοσελίδα από την εκτύπωση με CSS

Είναι εύκολο να χρησιμοποιήσετε το CSS για να εμποδίσετε τους ανθρώπους να εκτυπώνουν τις ιστοσελίδες σας. Απλά πρέπει να δημιουργήσετε ένα φύλλο στυλ 1 γραμμής με το όνομα "print.css" που περιλαμβάνει την ακόλουθη γραμμή CSS.

σώμα {εμφάνιση: κανένας; }}

Αυτό το στυλ θα μετατρέψει το στοιχείο "σώμα" των σελίδων σας στο να μην εμφανίζεται - και αφού τα πάντα στις σελίδες σας είναι παιδί του στοιχείου του σώματος, αυτό σημαίνει ότι δεν θα εμφανιστεί ολόκληρη η σελίδα / τοποθεσία.

Μόλις έχετε το φύλλο στυλ "print.css", θα το φορτώσετε στην HTML ως φύλλο στυλ εκτύπωσης. Εδώ είναι πώς θα το κάνετε αυτό - απλά προσθέστε την ακόλουθη γραμμή στο στοιχείο "head" στις σελίδες σας HTML.

Αυτές οι πληροφορίες ενημερώνουν το πρόγραμμα περιήγησης ότι αν αυτή η ιστοσελίδα έχει ρυθμιστεί να εκτυπώσει, να χρησιμοποιήσει αυτό το φύλλο στυλ αντί για οποιοδήποτε προεπιλεγμένο φύλλο στυλ που χρησιμοποιούν οι σελίδες για προβολή στην οθόνη. Καθώς οι σελίδες μεταβαίνουν σε αυτό το φύλλο "print.css", το στυλ που δεν εμφανίζει ολόκληρη τη σελίδα θα κτυπήσει και όλα όσα θα εκτυπώσουν θα είναι κενή σελίδα.

Αποκλεισμός μίας σελίδας κάθε φορά

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

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

Αποκτήστε Fancier με τις αποκλεισμένες σελίδες σας

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

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

Και κλείστε την ετικέτα αφού γράψετε όλο το περιεχόμενό σας, στο κάτω μέρος της σελίδας:

Στη συνέχεια, αφού κλείσετε το div "noprint" div, ανοίξτε άλλο div με το μήνυμα που θέλετε να εμφανίζεται όταν εκτυπώνεται το έγγραφο:

Αυτή η σελίδα προορίζεται να προβληθεί στο διαδίκτυο και μπορεί να μην εκτυπωθεί. Παρακαλούμε δείτε αυτή τη σελίδα στη διεύθυνση http://webdesign.about.com/od/advancedcss/qt/block_print.htm

Συμπεριλάβετε έναν σύνδεσμο στο έγγραφο CSS εκτύπωσης που ονομάζεται print.css:

Και σε αυτό το έγγραφο συμπεριλάβετε τα παρακάτω στυλ:

#noprint {εμφάνιση: κανένας; }} #print {display: block; }}

Τέλος, στο τυποποιημένο φύλλο στυλ (ή σε εσωτερικό στυλ στο κεφάλι του εγγράφου), γράψτε:

#print {εμφάνιση: κανένας; }} #noprint {display: block; }}

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

Εξετάστε την εμπειρία χρήστη

Η εκτύπωση ιστοσελίδων είναι γενικά μια κακή εμπειρία αφού οι σημερινές τοποθεσίες συχνά δεν μεταφράζονται καλά στην τυπωμένη σελίδα. Αν δεν θέλετε να δημιουργήσετε ένα εντελώς ξεχωριστό φύλλο στυλ για να υπαγορεύσετε στυλ εκτύπωσης, μπορείτε να χρησιμοποιήσετε τα βήματα αυτού του άρθρου για να "απενεργοποιήσετε" την εκτύπωση σε μια σελίδα. Να γνωρίζετε τον αντίκτυπο που θα μπορούσαν να έχουν οι χρήστες που βασίζονται στην εκτύπωση ιστότοπων (ίσως επειδή έχουν μειωμένη όραση και δυσκολία στην ανάγνωση του κειμένου στην οθόνη) και να παίρνουν αποφάσεις που θα λειτουργήσουν για το κοινό του ιστοτόπου σας.

Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard.