Κατανόηση του τρόπου με τον οποίο λειτουργούν τα IFrames στον σχεδιασμό της ιστοσελίδας
Όταν ενσωματώνετε ένα στοιχείο στην HTML σας, έχετε δύο ευκαιρίες να προσθέσετε στυλ CSS σε αυτό:
- Μπορείτε να διαμορφώσετε το ίδιο το IFRAME.
- Μπορείτε να διαμορφώσετε τη σελίδα μέσα στο IFRAME (υπό ορισμένες συνθήκες).
Χρησιμοποιώντας το CSS για να σχεδιάσετε το στοιχείο IFRAME
Το πρώτο πράγμα που πρέπει να λάβετε υπόψη όταν σχεδιάζετε τα iframes σας είναι το ίδιο το IFRAME. Ενώ τα περισσότερα προγράμματα περιήγησης περιλαμβάνουν iframes χωρίς πολλά επιπλέον στυλ, είναι ακόμα καλή ιδέα να προσθέσετε κάποια στυλ για να τα κρατήσετε συνεπή.
Ακολουθούν ορισμένα στυλ CSS που πάντα συμπεριλαμβάνω στα iframes μου:
- περιθώριο: 0;
- padding: 0;
- σύνορα: κανένα ·
- πλάτος: τιμή ;
- ύψος: τιμή ;
Με το πλάτος και το ύψος να είναι στο μέγεθος που ταιριάζει στο έγγραφό μου. Εδώ είναι παραδείγματα ενός πλαισίου χωρίς στυλ και ένα με τα βασικά στυλ. Όπως μπορείτε να δείτε, αυτά τα στυλ απλώς αφαιρούν μόνο το περίγραμμα του iframe, αλλά διασφαλίζουν επίσης ότι όλα τα προγράμματα περιήγησης εμφανίζουν το iframe με τα ίδια περιθώρια, παραγεμίσματα και διαστάσεις.
Το HTML5 συνιστά να χρησιμοποιήσετε την ιδιότητα υπερχείλισης για να καταργήσετε τις γραμμές κύλισης, αλλά αυτό δεν είναι αξιόπιστο. Επομένως, εάν θέλετε να καταργήσετε ή να αλλάξετε τις γραμμές κύλισης, θα πρέπει να χρησιμοποιήσετε επίσης το χαρακτηριστικό κύλισης στο iframe σας. Για να χρησιμοποιήσετε το χαρακτηριστικό κύλισης, προσθέστε το ως οποιοδήποτε άλλο χαρακτηριστικό και, στη συνέχεια, επιλέξτε μία από τις τρεις τιμές: ναι, όχι ή αυτόματα. Ναι λέει στο πρόγραμμα περιήγησης να περιλαμβάνει πάντοτε τις γραμμές κύλισης ακόμη και αν δεν είναι απαραίτητες. δεν λέει για να αφαιρέσετε όλες τις γραμμές κύλισης εάν χρειάζεται ή όχι.
Αυτόματη είναι η προεπιλογή και περιλαμβάνει τις γραμμές κύλισης όταν χρειάζονται και τις αφαιρεί όταν δεν είναι.
Ακολουθεί ο τρόπος απενεργοποίησης της κύλισης με το χαρακτηριστικό κύλισης:
scrolling = "όχι"
Αυτό είναι ένα iframe.
Για να απενεργοποιήσετε την κύλιση σε HTML5, θα πρέπει να χρησιμοποιήσετε την ιδιότητα υπερχείλισης. Αλλά όπως μπορείτε να δείτε σε αυτά τα παραδείγματα , δεν λειτουργεί ακόμα αξιόπιστα σε όλα τα προγράμματα περιήγησης.
Δείτε πώς θα ενεργοποιούσατε συνεχώς την κύλιση με την ιδιότητα υπερχείλισης:
style = "overflow: scroll"
Αυτό είναι ένα iframe.
Δεν υπάρχει τρόπος να απενεργοποιήσετε εντελώς την κύλιση με την ιδιότητα υπερχείλισης.
Πολλοί σχεδιαστές θέλουν τα iframe τους να αναμειχθούν με το φόντο της σελίδας που βρίσκονται, έτσι ώστε οι αναγνώστες να μην γνωρίζουν ότι τα iframes είναι ακόμη και εκεί. Αλλά μπορείτε επίσης να προσθέσετε στυλ για να τα ξεχωρίσετε. Η ρύθμιση των συνόρων έτσι ώστε το iframe να εμφανίζεται πιο εύκολα είναι εύκολο. Απλώς χρησιμοποιήστε την ιδιότητα του στυλ περιγράμματος (ή σχετίζεται με τις ιδιότητες του περιγράμματος, τα περιθώρια δεξιά, τα περιθώρια αριστερά και τις ιδιότητες στο κάτω μέρος των περιθωρίων) για να σχεδιάσετε τα σύνορα:
iframe {
border-top: # c00 1px διακεκομμένη?
border-right: # c00 2px διακεκομμένη;
αριστερά: # c00 2px διακεκομμένη;
σύνορα-κάτω: # c00 4px διακεκομμένη;
}}
Αλλά δεν πρέπει να σταματήσετε με κύλιση και σύνορα για τα στυλ σας. Μπορείτε να εφαρμόσετε πολλά άλλα στυλ CSS στο iframe σας. Αυτό το παράδειγμα χρησιμοποιεί στυλ CSS3 για να δώσει στο iframe μια σκιά, στρογγυλεμένες γωνίες και περιστρέφεται κατά 20 μοίρες.
iframe {
περιθώριο-κορυφή: 20px;
περιθώριο-κάτω: 30px;
-moz-ακτίνα περιθωρίου: 12px;
-webkit-ακτίνα-ακτίνα: 12px;
ακτίνα-ακτίνα: 12px;
-moz-box-σκιά: 4px 4px 14px # 000;
-webkit-box-σκιά: 4px 4px 14px # 000;
σκιά κουτιού: 4px 4px 14px # 000;
-moz-μετασχηματισμός: περιστροφή (20deg);
-webkit-transform: περιστρέψτε (20deg);
-o-μετασχηματισμός: περιστροφή (20deg);
-ms-μετασχηματισμός: περιστροφή (20deg);
φίλτρο: progid: DXImageTransform.Microsoft.BasicImage (περιστροφή = .2);
}}
Σχεδίαση του περιεχομένου του iframe
Η διαμόρφωση του περιεχομένου ενός iframe είναι ακριβώς όπως το styling οποιαδήποτε άλλη ιστοσελίδα. Αλλά, πρέπει να έχετε πρόσβαση για να επεξεργαστείτε τη σελίδα . Αν δεν μπορείτε να επεξεργαστείτε τη σελίδα (για παράδειγμα, είναι σε άλλον ιστότοπο).
Εάν μπορείτε να επεξεργαστείτε τη σελίδα, τότε μπορείτε να προσθέσετε ένα εξωτερικό φύλλο στυλ ή στυλ δεξιά στο έγγραφο, ακριβώς όπως θα στυλ κάθε άλλη ιστοσελίδα στον ιστότοπό σας.