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

Αν και η χρήση του έχει μειωθεί τα τελευταία χρόνια λόγω της υιοθέτησης πιο σύγχρονων και ευέλικτων τεχνικών, όπως το CSS και Το JavaScript, μπορεί ακόμα να βρεθεί σε ορισμένους ιστότοπους, ειδικά σε αυτούς που δημιουργήθηκαν στη δεκαετία του 1990 και στις αρχές της δεκαετίας του 1990. αυτό του 2000.

Πώς λειτουργούν τα πλαίσια ή τα πλαίσια σε HTML;

Τα πλαίσια αποτελούνται από δύο στοιχεία:

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

2. πλαίσια: Το στοιχείο χρησιμοποιείται εντός α για να ορίσετε καθεμία από τις επιμέρους ενότητες. Και στέλνει για κλήση κάποιου άλλου εγγράφου που έχει φορτωθεί μέσα στο σύνολο πλαισίων.

• Ακολουθήστε με: Παραδείγματα iFrame

Πώς να φτιάξετε πλαίσια σε HTML

Για να δημιουργήσετε ένα έγγραφο HTML με πλαίσια, ακολουθήστε δύο πολύ απλά βήματα:

1. Δημιουργήστε ένα έγγραφο HTML που καθορίζει τη δομή των πλαισίων χρησιμοποιώντας το στοιχείο. Για παράδειγμα:

Αρχείο 1: frameset.html

2. Δημιουργήστε ένα ή περισσότερα έγγραφα HTML που θα φορτωθούν μέσα στα πλαίσια.

Αρχείο 2: frame1.html

Αυτό είναι το πλαίσιο 1

Αρχείο 3: frame2.html

Αυτό είναι το πλαίσιο 2

Χαρακτηριστικά πλαισίου σε HTML

Μερικά από τα πιο σημαντικά χαρακτηριστικά στοιχείων είναι:

• κύλιση: Αυτό το χαρακτηριστικό χρησιμοποιείται για τον έλεγχο της εμφάνισης των γραμμών κύλισης στο πλαίσιο. Μπορεί να έχει τις τιμές "auto", "yes" ή "no".

• noresize: Αυτό το χαρακτηριστικό χρησιμοποιείται για να εμποδίσει τον χρήστη να αλλάξει το μέγεθος του πλαισίου.

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

• src: Αυτό το χαρακτηριστικό χρησιμοποιείται για τον καθορισμό της διεύθυνσης URL του εγγράφου HTML που θα φορτωθεί στο πλαίσιο.

• πλαίσιο πλαισίου: Αυτό το χαρακτηριστικό καθορίζει εάν τα πλαίσια πρέπει να έχουν περιθώρια ή όχι. Πιθανές τιμές είναι "1" (για εμφάνιση περιγραμμάτων) ή "0" (για να μην εμφανίζονται περιγράμματα). Για παράδειγμα, .

• σύνορο: Αυτό το χαρακτηριστικό ορίζει το πλάτος του περιγράμματος μεταξύ των πλαισίων σε pixel. Για παράδειγμα, θα δημιουργήσει ένα περίγραμμα 5 εικονοστοιχείων μεταξύ των πλαισίων.

• διαστήματα πλαισίων: Αυτό το χαρακτηριστικό είναι παρόμοιο με σύνορο. Καθορίζει επίσης το διάστημα μεταξύ των πλαισίων σε pixel. Για παράδειγμα, θα ορίσει ένα κενό 10 px μεταξύ των καρέ.

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

Παράδειγμα χρήσης:

Πώς να συνδέσετε ένα συγκεκριμένο πλαίσιο

Μπορούμε να ανοίξουμε έναν σύνδεσμο σε ένα συγκεκριμένο πλαίσιο χρησιμοποιώντας το χαρακτηριστικό στόχος Στην ετικέτα. Η αξία του στόχος θα πρέπει να είναι ίδιο με το όνομα του πλαισίου (γλυκοπατάτα χαρακτηριστικό του ). Για παράδειγμα:

στο menu.html
Σελίδα 1
Σελίδα 2

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

Πώς να σπάσετε τα πλαίσια

Εάν θέλετε έναν σύνδεσμο για να ανοίξετε μια σελίδα εκτός του συνόλου πλαισίων (δηλαδή να αντικαταστήσετε ολόκληρο το σύνολο πλαισίων), μπορείτε να χρησιμοποιήσετε την ειδική τιμή _μπλουζα για την ιδιότητα στόχος. Για παράδειγμα:

στο menu.html
βγαίνει από τα κάδρα

Όταν κάνετε κλικ στο "Exit Frames", το πρόγραμμα περιήγησης θα φορτώσει το "pageOutofFrames.html" σε ολόκληρο το παράθυρο, αντικαθιστώντας το σύνολο πλαισίων.

Παράδειγμα για να χωρίσετε την οθόνη σε δύο στήλες με πλαίσια

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

Παράδειγμα δημιουργίας πλαϊνής γραμμής πλοήγησης με πλαίσια

Αυτό το παράδειγμα δημιουργεί μια πλαϊνή γραμμή που καταλαμβάνει το 25% της οθόνης και χρησιμοποιείται για πλοήγηση. Η υπόλοιπη οθόνη χρησιμοποιείται για την εμφάνιση του κύριου περιεχομένου.

Παράδειγμα για να χωρίσετε την οθόνη σε σειρές και στήλες

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

Παράδειγμα κορυφαίας πλοήγησης με πλαίσια HTML

Δημιουργήστε ένα αρχείο που ορίζει δύο πλαίσια στη σειρά. Τα δύο αρχεία που ορίζει είναι: ένα για την πλοήγηση (που καταλαμβάνει το 20% του πλάτους του παραθύρου) και ένα για το κύριο περιεχόμενο (το οποίο καταλαμβάνει το υπόλοιπο πλάτος του παραθύρου).

Στη συνέχεια, θα χρειαστεί να δημιουργήσετε τα αρχεία "navigation.html" και "content.html". Για παράδειγμα, το "navigation.html" μπορεί να μοιάζει με αυτό:

Σελίδα 1

Σελίδα 2

Σελίδα 3


Και το "content.html" θα μπορούσε να είναι κάπως έτσι:

Καλώς ήρθατε στην ιστοσελίδα μας!

Εδώ θα πάει το περιεχόμενο της σελίδας που έχει επιλεγεί στην πλοήγηση.

Σε αυτήν την περίπτωση, όταν κάνετε κλικ σε έναν σύνδεσμο στο "navigation.html", η αντίστοιχη σελίδα φορτώνεται στο πλαίσιο "περιεχόμενο".