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

Η λέξη «πλαίσιο» σημαίνει ένα πλαίσιο, ένα πλαίσιο. Με τη βοήθεια πλαισίων, ο χώρος του παραθύρου του προγράμματος περιήγησης χωρίζεται σε ανεξάρτητα τμήματα στα οποία μπορούν να εμφανιστούν διάφορες πληροφορίες. Είναι βολικό να χρησιμοποιείτε πλαίσια όταν χρειάζεται να εμφανίσετε δεδομένα από διάφορες πηγές στην οθόνη.

Παρατήρηση 1

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

Τομείς εφαρμογής κουφωμάτων

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

Η επιλογή μιας δομής πλαισίου για την παρουσίαση πληροφοριών στο WWW δικαιολογείται:

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

Το παρακάτω σχήμα δείχνει τη δομή του πλαισίου του παραθύρου του προγράμματος περιήγησης μιας σελίδας HTML.

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

Τα πλαίσια είναι εγγενώς παρόμοια με τους πίνακες, καθώς και τα δύο χωρίζουν τη θύρα προβολής του προγράμματος περιήγησης σε ορθογώνιες περιοχές που περιέχουν πληροφορίες. Ωστόσο, τα πλαίσια επιτρέπουν όχι μόνο τη μορφοποίηση των σελίδων ενός εγγράφου, αλλά και την οργάνωση της αλληλεπίδρασης μεταξύ τους. Βασικά, τα πλαίσια και οι πίνακες διαφέρουν στο ότι κάθε πλαίσιο αντιστοιχεί σε ένα ξεχωριστό έγγραφο HTML και τα περιεχόμενα όλων των κελιών του πίνακα αποτελούν μέρος ενός εγγράφου. Επιπλέον, η σελίδα που εμφανίζεται στο πλαίσιο μπορεί να πραγματοποιηθεί κύλιση όταν προβάλλεται ανεξάρτητα από τις άλλες. Κάθε πλαίσιο είναι ένα είδος ξεχωριστού mini-browser. Οι πίνακες, σε αντίθεση με τα πλαίσια, που εμφανίζονται πάντα πλήρως στην οθόνη, συχνά δεν χωρούν πλήρως στο παράθυρο και προβάλλονται μόνο σε μέρη. Ως εκ τούτου, μπορεί να σημειωθεί ότι στους πίνακες HTML ο συνολικός αριθμός των κελιών δεν είναι περιορισμένος και μερικές φορές φτάνει τις εκατοντάδες, ο αριθμός των πλαισίων σε ένα έγγραφο είναι συνήθως αρκετές μονάδες.

Δημιουργία πλαισίων

Οι ετικέτες χρησιμοποιούνται για τη δημιουργία πλαισίων.

Ο περιγραφέας σχηματίζει σύνολα πλαισίων που χωρίζουν τα κενά παραθύρων σε σειρές και στήλες. Στη συνέχεια, το ύψος και το πλάτος όλων των γραμμών και στηλών ορίζονται ως ποσοστό των τρεχουσών διαστάσεων του παραθύρου του προγράμματος περιήγησης, σε pixel ή ως αστερίσκος. Το σύμβολο του αστερίσκου υποδεικνύει ότι οι διαστάσεις των πλαισίων εξαρτώνται από τις διαστάσεις άλλων πλαισίων στη σελίδα.

Ο περιγραφέας ορίζει τη δομή και το περιεχόμενο ενός συγκεκριμένου πλαισίου.

Παρακάτω είναι ένα παράδειγμα κώδικα σελίδας.

Ένα παράδειγμα εργασίας με πλαίσια

Πλεονεκτήματα και μειονεκτήματα των κουφωμάτων

Τα πλεονεκτήματα των κουφωμάτων περιλαμβάνουν τα ακόλουθα:

• Μπορούν να εμφανίσουν ταυτόχρονα διαφορετικές πληροφορίες σε ένα παράθυρο.
• με τη χρήση τους είναι δυνατή η μόνιμη εμφάνιση κάποιων πληροφοριών (λογότυπων), ενώ δεν απαιτείται η συμπερίληψή τους σε κάθε σελίδα του ιστότοπου.
• βοηθούν στη δημιουργία ευέλικτης πλοήγησης στον ιστότοπο.

Τα μειονεκτήματα των κουφωμάτων περιλαμβάνουν:

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

Παρατήρηση 2

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

Γραμμές κύλισης πλαισίου

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

Αλλαγή περιγραμμάτων πλαισίου

Η αλλαγή των ορίων πλαισίου μπορεί να απαγορευτεί, αυτό γίνεται χρησιμοποιώντας το χαρακτηριστικό NORESIZE. Αυτό το χαρακτηριστικό είναι χρήσιμο όταν θέλετε να αποτρέψετε τον χρήστη από το να αλλάξει την αρχική διάταξη σελίδας. Από προεπιλογή, δίνεται στον χρήστη η ευκαιρία να μετακινήσει τα όρια του πλαισίου κατά την κρίση του, μπορεί να ορίσει νέα μεγέθη του αντικειμένου προκειμένου να βελτιώσει την προβολή ενός συγκεκριμένου τμήματος δεδομένων. Σε περιπτώσεις όπου τα καρέ δεν έχουν ορατά περιγράμματα, αυτό θα απαγορεύσει αυτόματα την αλλαγή του μεγέθους τους. Χρησιμοποιώντας το χαρακτηριστικό της ετικέτας BORDER, μπορείτε να αλλάξετε το πάχος των γραμμών περιγράμματος ενός πλαισίου. Από προεπιλογή, το πλαίσιο πλαισιώνεται από το πρόγραμμα περιήγησης σε γκρι πλαίσιο με πλάτος 6 pixel. Το χαρακτηριστικό BORDERCOLOR σάς επιτρέπει να αλλάξετε το χρώμα του περιγράμματος. Το χαρακτηριστικό FRAMEBORDER σας επιτρέπει να αποκρύψετε τα περιγράμματα ενός πλαισίου.

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

Το χαρακτηριστικό MARGINWIDTH καθορίζει το πλάτος του αριστερού και του δεξιού περιθωρίου.

Και το χαρακτηριστικό MARGINHEIGHT καθορίζει το ύψος του επάνω και του κάτω περιθωρίου.

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

πλωτά πλαίσια

Τα αιωρούμενα πλαίσια αποτελούν μέρος μιας ιστοσελίδας και δεν απαιτούν ξεχωριστή σελίδα για την περιγραφή τους. Μια ετικέτα χρησιμοποιείται για τη δημιουργία τέτοιων πλαισίων. Το χαρακτηριστικό NAME αυτής της ετικέτας καθορίζει το όνομα του αιωρούμενου πλαισίου, το οποίο μπορεί αργότερα να χρησιμοποιηθεί στον ορισμό μιας υπερ-σύνδεσης που ανοίγει την αντίστοιχη σελίδα σε αυτό το πλαίσιο. Τα χαρακτηριστικά WIDTH και HEIGHT καθορίζουν τις διαστάσεις του αιωρούμενου πλαισίου, καθώς ο χρήστης δεν μπορεί να τις αλλάξει ο ίδιος.

Τα αιωρούμενα πλαίσια υποστηρίζονται προς το παρόν μόνο από το Microsoft IE.

Παρακάτω είναι ένα παράδειγμα κώδικα σελίδας:

Παράδειγμα 1

Ένα παράδειγμα εργασίας με πλαίσια

width="350" height="300" align="αριστερά">

Ένα παράδειγμα εργασίας με πλαίσια

Ένα παράδειγμα εργασίας με πλαίσια

31/01/17 3,5Κ

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

Διαφορά μεταξύ πλαισίων και Iframes

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

• Τα πλαίσια είναι τα στοιχεία που καθορίζουν τη διάταξη.
• Τα iframe είναι στοιχεία που προσθέτουν περιεχόμενο.

Η ιστορία και το μέλλον των κουφωμάτων

Το W3C καταργεί τα πλαίσιασε HTML5. Αυτή η λύσηυποστηρίχθηκε ότι τα πλαίσια HTML έχουν αρνητικό αντίκτυπο στη χρηστικότητα και την προσβασιμότητα. Ας δούμε αν αυτοί οι ισχυρισμοί είναι δικαιολογημένοι.

Προβλήματα πλαισίου

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

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

• Το περιεχόμενο πρέπει να προστεθεί και να οριστεί με σήμανση, όπως μέσω HTML .
• Η αναπαράσταση ορίζεται από γλώσσες όπως CSS και JavaScript.

Η χρήση κουφωμάτων συνεπάγεται αρχικά τη δημιουργία ενός συγκεκριμένου εμφάνισηκαι δομές, ενώ πρέπει να διεκπεραιώνονται οι εργασίες παρουσίασης χρησιμοποιώντας CSS.

Το μέλλον των κουφωμάτων

Αν και σήμερα τα πάντα σύγχρονα προγράμματα περιήγησηςπλαίσια στήριξης, Το W3C έχει δηλώσει ξεκάθαραπου πλαισιώνει" δεν πρέπει να χρησιμοποιείται από προγραμματιστές ιστού". Εάν έχετε έναν ιστότοπο που χρησιμοποιεί πλαίσια, θα πρέπει να εξετάσετε το ενδεχόμενο μετάβασης σε άλλες τεχνολογίες. Σε κάποιο σημείο, τα προγράμματα περιήγησης θα σταματήσουν να υποστηρίζουν πλαίσια και όταν συμβεί αυτό, οι ιστότοποι που τα χρησιμοποιούν θα καταστούν άχρηστοι.

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

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

Βασική έννοια κουφωμάτων

Η βασική ιδέα των πλαισίων είναι αρκετά απλή:

• Χρησιμοποιήστε ένα στοιχείο συνόλου πλαισίων σε μια συγκεκριμένη θέση στοιχείου σώμα σε ένα έγγραφο HTML;
• Χρησιμοποιήστε το στοιχείο πλαισίου για να πλαισιώσετε το περιεχόμενο της ιστοσελίδας.
• Χρησιμοποιήστε το χαρακτηριστικό src για να προσδιορίσετε τον πόρο που θα φορτωθεί μέσα στο πλαίσιο.
• Δημιουργία για κάθε πλαίσιο HTML ξεχωριστό αρχείομε περιεχόμενο.

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

Πλαίσιο 1

Περιεχόμενα του πλαισίου 1

Θα αποθηκεύσουμε το πρώτο έγγραφο ως frame_1.html . Τα υπόλοιπα τρία έγγραφα θα έχουν παρόμοιο περιεχόμενο και θα ονομάζονται ανάλογα.

Δημιουργία κάθετων στηλών

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

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

Και εδώ είναι πώς θα εμφανιστεί αυτή η σήμανση:

Δημιουργία οριζόντιων γραμμών

Οι σειρές πλαισίων HTML μπορούν να δημιουργηθούν χρησιμοποιώντας το χαρακτηριστικό rows αντί για το χαρακτηριστικό cols όπως στο προηγούμενο παράδειγμα:

Με αυτήν την αλλαγή, το κάναμε έτσι ώστε τα καρέ να φορτώνονται πλέον σε τέσσερις σειρές, η μία πάνω στην άλλη:

Συνδυασμός στηλών και γραμμών

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

frameset cols="*,*,*">

Παράδειγμα πλαισίου σε HTML:

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

Δείτε πώς θα εμφανίζονται τώρα τα καρέ:

Μπορείτε να δημιουργήσετε άλλα ένθετα πλαίσια:

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

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

Το προκύπτον πλέγμα γραμμών και στηλών θα μοιάζει με αυτό:

Πώς να κάνετε στυλ κορνίζες

Όταν πρόκειται για το στυλ μιας ιστοσελίδας που χρησιμοποιεί πλαίσια σε HTML, υπάρχουν δύο τρόποι για να εκχωρήσετε στυλ:

• Καθορισμός στυλ σε κάθε πλαίσιο.
• Καθορισμός στυλ για σύνολο πλαισίων .

Η αναπαράσταση κάθε πλαισίου πρέπει να ορίζεται στο έγγραφο προέλευσης. Η αναπαράσταση συνόλου πλαισίων πρέπει να οριστεί στο γονικό έγγραφο που περιέχει το σύνολο πλαισίων. Με άλλα λόγια, τα στυλ για το frame_1.html πρέπει να καθορίζονται από τους κανόνες CSS που περιέχονται στο αρχείο frame_1.html ή στο φύλλο στυλ που σχετίζεται με το αρχείο frame_1.html.

Καθορισμός στυλ καρέ στο έγγραφο προέλευσης

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

Εφαρμόζοντας στυλ CSS σε μια ιστοσελίδα που περιέχει ένα σύνολο πλαισίων , δεν θα μπορούμε να διαμορφώσουμε στυλ κάθε καρέ ξεχωριστά. Αν θέλουμε να κάνουμε στυλ frame_1.html , πρέπει να προσθέσουμε αυτά τα στυλ απευθείας στο ίδιο το έγγραφο. Ακολουθεί ένα παράδειγμα για το πώς μπορεί να γίνει αυτό:

Πλαίσιο 1

Περιεχόμενα του πλαισίου 1

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

Καθορισμός στυλ και μορφοποίησης συνόλων πλαισίων

Πώς να επηρεάσετε την προβολή συνόλου πλαισίων εκτός από τον καθορισμό των στυλ των ίδιων των εγγράφων:

• Το μέγεθος κάθε πλαισίου μπορεί να οριστεί ή να καθοριστεί.
• Η εσοχή μεταξύ των πλαισίων μπορεί να αλλάξει.
• Μπορεί να οριστεί μια μορφή κουτιού γύρω από κάθε πλαίσιο.

Αυτές οι αλλαγές δεν γίνονται μέσω CSS. Γίνονται προσθέτοντας χαρακτηριστικά και τις τιμές τους στο στοιχείο πλαισίου.

Διαστασιολόγηση πλαισίου

Τα μεγέθη πλαισίων μπορούν να καθοριστούν σε pixel, ποσοστά ή τα καρέ μπορούν να καταλαμβάνουν αυτόματα όλο τον ελεύθερο χώρο. Για να καθορίσετε το μέγεθος του πλαισίου, εισαγάγετε την επιθυμητή τιμή στο χαρακτηριστικό cols ή rows. Από προεπιλογή, εάν το noresize έχει καθοριστεί για ένα πλαίσιο, οι επισκέπτες του ιστότοπου μπορούν να χρησιμοποιήσουν το ποντίκι για να σύρουν το περίγραμμα μεταξύ δύο πλαισίων, αλλάζοντας το μέγεθός τους. Εάν αυτό δεν είναι επιθυμητό, ​​τότε το χαρακτηριστικό noresize μπορεί να εφαρμοστεί στο στοιχείο πλαισίου και το μέγεθός του δεν μπορεί να αλλάξει. Ας συνδυάσουμε και τις δύο αυτές έννοιες στην πράξη.

Θα δημιουργήσουμε την παρακάτω διάταξη:

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

Μπορούμε να δημιουργήσουμε ένα πλαίσιο HTML με τον ακόλουθο κώδικα:

Αυτός ο κώδικας δημιουργεί ένα σύνολο πλαισίων δύο σειρών:

• Η πρώτη σειρά έχει ύψος 150 px. Το χαρακτηριστικό noresize που καθορίζεται για το πρώτο πλαίσιο σημαίνει ότι δεν μπορεί να αλλάξει το μέγεθός του.
• Τα στυλ που εφαρμόσαμε νωρίτερα στο frame_1.html διατηρούνται, αλλά επηρεάζουν μόνο τα περιεχόμενα αυτού του πλαισίου.
• Η δεύτερη σειρά επεκτείνεται για να γεμίσει τον υπόλοιπο χώρο.
• Το δεύτερο σύνολο πλαισίων είναι ένθετο στη δεύτερη σειρά και περιέχει τρεις στήλες.
• Η πρώτη και η τρίτη στήλη γεμίζουν το 20% του διαθέσιμου χώρου του παραθύρου του προγράμματος περιήγησης.
• Η δεύτερη στήλη επεκτείνεται με τέτοιο τρόπο ώστε να γεμίσει το διάστημα που απομένει μεταξύ της πρώτης και της τρίτης στήλης.
• Δεδομένου ότι δεν καθορίσαμε το χαρακτηριστικό noresize για τις στήλες, θα εμφανίζονται αρχικά με βάση τα μεγέθη που καθορίζονται στον κώδικα.

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

Αυτός ο κώδικας δημιουργεί μια ιστοσελίδα που αποδίδεται ως εξής:

Μορφοποίηση του περιγράμματος και επένδυση γύρω από το πλαίσιο

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

Το χαρακτηριστικό marginheight που εφαρμόζεται στο πρώτο πλαίσιο προσθέτει 15 εικονοστοιχεία πλήρωσης πάνω και κάτω από το περιεχόμενο που έχει φορτωθεί στο πρώτο πλαίσιο. Μια τιμή περιγράμματος πλαισίου 0 αφαιρεί τα περιθώρια και για τα τρία κάτω καρέ. Δείτε πώς θα μοιάζει:

Καθορισμός πλαισίων με συνδέσμους

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

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

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

Τώρα που δώσαμε την κεντρική στήλη name="mid_col" , μπορούμε να δημιουργήσουμε μερικούς συνδέσμους στο έγγραφο προέλευσης της αριστερής στήλης frame_2.html:

Πλαίσιο 2

Περιεχόμενα του πλαισίου 2

• Loadframe_1.html
• Loadframe_2.html
• Φόρτωση frame_3.html
• Loadframe_4.html

Τώρα, όταν φορτώνουμε την ιστοσελίδα, θα υπάρχουν τέσσερις σύνδεσμοι πλοήγησης στην αριστερή πλαϊνή γραμμή. Όταν γίνει κλικ στον σύνδεσμο, τα περιεχόμενα του αρχείου φορτώνονται στο πλαίσιο της μεσαίας στήλης με το χαρακτηριστικό name="mid_col" . Αυτό θα δούμε όταν φορτώσει η σελίδα:

Αν κάνουμε κλικ στο σύνδεσμο Load frame_1.html , τα περιεχόμενα αυτού του αρχείου θα φορτωθούν στην κεντρική στήλη και θα λάβουμε τα εξής:

Εάν κάνουμε κλικ στο σύνδεσμο Load frame_2.html , θα δούμε ότι τόσο η αριστερή πλαϊνή γραμμή όσο και η κεντρική στήλη θα εμφανίζουν συνδέσμους πλοήγησης:

Κάνοντας κλικ στους συνδέσμους Load frame_3.html και Load frame_4.html στην κεντρική στήλη θα φορτωθούν τα περιεχόμενα αυτών των αρχείων. Εάν ξεχάσαμε να προσθέσουμε το χαρακτηριστικό target="mid_col" σε έναν από τους συνδέσμους, τότε όταν κάνετε κλικ σε αυτό, το αρχείο θα φορτωθεί στο πλαίσιο που περιέχει τον σύνδεσμο. Εάν θέλουμε να φορτώσουμε ξανά ολόκληρη τη σελίδα, για παράδειγμα όταν ακολουθούμε έναν σύνδεσμο προς έναν εξωτερικό ιστότοπο, πρέπει να προσθέσουμε το χαρακτηριστικό target="_blank" ή target="_top".

Παροχή εναλλακτικού noframes

Στο παρελθόν, το στοιχείο noframes χρησιμοποιήθηκε για την παροχή εναλλακτικής λύσης για προγράμματα περιήγησης που δεν υποστηρίζουν πλαίσια HTML. Προς το παρόν, όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν πλαίσια και τα noframes πρακτικά δεν υποστηρίζονται. Ως αποτέλεσμα, δεν χρειάζεται πλέον να δημιουργούμε εναλλακτικά noframes όταν εργαζόμαστε με πλαίσια.

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

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

Χρησιμοποιώντας γραμμές, όχι στήλες

Εάν είναι δυνατόν, οργανώστε τα πλαίσια σε γραμμές αντί για στήλες. Σε μια μικρή οθόνη, είναι πολύ πιο εύκολο να πλοηγηθείτε στο περιεχόμενο κάθετα παρά οριζόντια. Τα πλαίσια σε HTML που είναι διατεταγμένα σε μια σειρά είναι πολύ πιο εύκολο να προβληθούν μικρή οθόνη. Εάν μειώσουμε το πλάτος των διατάξεων που περιέχουν γραμμές και στήλες, προσομοιώνοντας μια οθόνη Apple iPhone 6, θα δούμε ότι οι σειρές είναι πολύ πιο βολικές στην προβολή από τις στήλες:

Χρησιμοποιήστε ποσοστά για πλάτη στηλών

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

Πώς να μεταβείτε από τα πλαίσια σε άλλες τεχνολογίες

Τόσο το στοιχείο του συνόλου πλαισίων όσο και το στοιχείο πλαισίου έχουν αφαιρεθεί από την πιο πρόσφατη προδιαγραφή HTML5. Οι ιδιοκτήτες ιστότοπων που έχουν κατασκευαστεί με πλαίσια θα πρέπει να ξαναχτίσουν τα στοιχεία τους για να τα εξαιρέσουν από τη διάταξη. Σε κάποιο σημείο, τα προγράμματα περιήγησης θα σταματήσουν την υποστήριξη για πλαίσια. Έτσι, η εγκατάλειψη των πλαισίων δεν είναι μόνο επιθυμητή, αλλά και απαραίτητη.

Αξιολόγηση περιεχομένου που περιέχεται σε πλαίσια

Το πρώτο βήμα για τον επανασχεδιασμό ενός ιστότοπου που χρησιμοποιεί αιωρούμενα πλαίσια HTML είναι να προσδιορίσετε τους λόγους για τους οποίους χρησιμοποιούνται τα πλαίσια:

• Χρησιμοποιήθηκαν πλαίσια για τη δημιουργία μιας συγκεκριμένης διάταξης; Εάν ναι, το CSS μπορεί να χρησιμοποιηθεί για τη δημιουργία μιας τέτοιας διάταξης.
• Χρησιμοποιήθηκαν πλαίσια για τη δημιουργία κοντέινερ διαφημίσεων συγκεκριμένων μεγεθών; Υπάρχουν πολλοί τρόποι για να αναδημιουργήσετε αυτό το εφέ με γραφικά στοιχεία ειδικά για CSS ή CMS.
• Χρησιμοποιήθηκαν πλαίσια για τη δημιουργία «κολλητικών» μενού πλοήγησης; Και πάλι, το ίδιο εφέ μπορεί να αναδημιουργηθεί με το CSS.
• Χρησιμοποιήθηκαν πλαίσια για τη λήψη περιεχομένου από εξωτερικό ιστότοπο; Αν ναι, τότε το στοιχείο iframe, το οποίο αποτελεί μέρος της HTML5, μπορεί να χρησιμοποιηθεί για την ενσωμάτωση περιεχομένου από έναν εξωτερικό ιστότοπο.

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

Στρατηγική για τη νέα σας ιστοσελίδα

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

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

• wordpress?
• Joomla! ;
• Drupal.

Επιπρόσθετοι πόροι

Εάν θέλετε να μάθετε περισσότερα για τα πλαίσια HTML, η καλύτερη πηγήγια περισσότερες πληροφορίες είναι World ευρύς ιστόςκοινοπραξία ( W3C). Ακολουθούν μερικές από τις σελίδες πληροφοριών πλαισίων:

• Τεκμηρίωση HTML4 σε πλαίσια;
• Καταργημένες δυνατότητες HTML5

Σχετικά Αντικείμενα

Όνομα στοιχείου	Γνωρίσματα	Περιγραφή
noframes		Στοιχείο χρησιμοποιείται στο εσωτερικό του γονέα <frameset>για την παροχή εναλλακτικού περιεχομένου για χρήστες των οποίων τα προγράμματα περιήγησης δεν υποστηρίζουν <frame>. Τα πλαίσια είναι πλέον απαρχαιωμένη τεχνολογία, οπότε το στοιχείο <noframes>δεν πρέπει να χρησιμοποιείται.</td> </tr><tr><td>iframe</td> <td>sandbox</td> <td><iframe>δημιουργεί ένα ενσωματωμένο πλαίσιο που αποδίδει ένα ανεξάρτητο έγγραφο HTML στο τρέχον έγγραφο.</td> </tr><tr><td>σύνολο πλαισίων</td> <td>πλαίσιο πλαισίου</td> <td>Στοιχείο <frameset>χρησιμοποιήθηκε για τη δημιουργία μιας ομάδας πλαισίων που μπορούν να χειριστούν και να διαμορφωθούν ως ένα. Προς το παρόν, τα πλαίσια σε HTML έχουν καταργηθεί και δεν πρέπει να χρησιμοποιούνται.</td> </tr><tr><td>πλαίσιο</td> <td>src</td> <td>Στοιχείο <frame>χρησιμοποιήθηκε για να χωρίσει το παράθυρο του προγράμματος περιήγησης σε πολλά ανεξάρτητα μέρη. Προς το παρόν, τα πλαίσια έχουν καταργηθεί και δεν πρέπει να χρησιμοποιούνται.</td> </tr></tbody></table><p>Αυτή η δημοσίευση είναι μετάφραση του άρθρου Frames, που ετοιμάστηκε από τη φιλική ομάδα του έργου</p><p>Καλό κακό</p> <p>Ο όρος "πλαίσιο" μας ήρθε από <a href="https://comuedu.ru/el/network/television-of-england-in-russian-online-channels-in-english.html">Στα Αγγλικά</a>. Σε μετάφραση, αυτή η λέξη σημαίνει "πλαίσιο" και είναι μια ξεχωριστή περιοχή του παραθύρου. Από τη δομή του, μια τέτοια ενότητα είναι ένα εντελώς ολοκληρωμένο έγγραφο HTML.</p> <p>Τα μεμονωμένα πλαίσια χωρίζουν τα παράθυρα του προγράμματος περιήγησης σε περιοχές που τοποθετούνται δίπλα-δίπλα. Σε αυτήν την περίπτωση, μέσα σε καθένα από τα πλαίσια, φορτώνεται η δική του πλήρης σελίδα. Η τεχνολογία πλαισίων εξακολουθεί να προκαλεί πολλές διαμάχες, αλλά πρέπει να πούμε ότι η κορυφή της δημοτικότητάς της έχει ήδη περάσει. Αυτή η τεχνολογία έχει πλέον καταργηθεί και τα κανονικά πλαίσια δεν υποστηρίζονται πλέον σε HTML5.</p> <h2>Ιστορία της τεχνολογίας</h2> <p>Σήμερα μπορούμε να δηλώσουμε ότι επιτέλους πάρθηκε η απόφαση να απομακρυνθούμε από την εργασία με την τεχνολογία πλαισίων. Ο ιστότοπος https://www.w3.org/TR/html5-diff/#obsolete-elements δηλώνει ξεκάθαρα ότι οι κανονικές ετικέτες για τη δημιουργία ενός τέτοιου πλαισίου δομής, συνόλου πλαισίων και noframes έχουν καταργηθεί. Ως επιχείρημα, δίνονται δεδομένα ότι η χρήση μιας τέτοιας δομής επηρεάζει αρνητικά τη χρηστικότητα των τοποθεσιών και τη διαθεσιμότητά τους στο δίκτυο.</p> <p>Αλλά οι σύγχρονες τεχνολογίες υποστηρίζουν το στοιχείο IFRAME. Η χρήση του σάς επιτρέπει να εισάγετε πλαίσια σε μπλοκ κειμένου σε σελίδες. Ταυτόχρονα, τέτοια στοιχεία έχουν τη δυνατότητα να ευθυγραμμίζονται σε σχέση με το ίδιο το κείμενο. <a href="https://comuedu.ru/el/solutions/how-to-increase-the-cache-storage-time-1s-two-important-points.html">Σημαντικό σημείο</a>: Καταρχήν δεν είναι δυνατή η αλλαγή μεγέθους των ενσωματωμένων πλαισίων. Δεν διαθέτουν αντίστοιχο χαρακτηριστικό για αλλαγή μεγέθους.</p> <p>Στο μέλλον, χωρίς άλματα στην τεχνολογία, η συνεχής χρήση κουφωμάτων είναι απίθανη. Και αξίζει να θυμηθούμε ότι ο κορυφαίος οργανισμός για την τυποποίηση των τεχνολογιών Διαδικτύου - W3C - έχει δηλώσει ρητά ότι τέτοιες δομές δεν πρέπει να χρησιμοποιούνται από προγραμματιστές ιστότοπων.</p> <p>Δηλαδή, τα πλαίσια, καταρχήν, δεν πρέπει να χρησιμοποιούνται για τη δομή των σελίδων κατά τη δημιουργία νέων πόρων. Όμως, με την υποστήριξη και τη βελτίωση των υφιστάμενων τοποθεσιών, η γνώση των χαρακτηριστικών της τεχνολογίας και η χρήση τους θα είναι πολύ χρήσιμη και παραγωγική.</p> <h2>Πλεονεκτήματα πλαισίου</h2> <p>Μεταξύ των πλεονεκτημάτων της τεχνολογίας πλαισίου είναι η ευκολία χρήσης, <a href="https://comuedu.ru/el/smart-tv/vysokuyu-skorost-peredachi-dannyh-po-raschet-propusknoi.html">υψηλή ταχύτητα</a>εργασία, τη δυνατότητα ακριβούς τοποθέτησης πληροφοριών σε ορισμένες περιοχές του παραθύρου.</p> <p>Η χρήση πλαισίων παρέχει εξοικονόμηση στον όγκο της μεταδιδόμενης κίνησης κατά τη διαδικασία εργασίας με τον ιστότοπο. Εξάλλου, κατά την πρόσβαση σε μια άλλη ενότητα πληροφοριών, συνήθως ενημερώνεται μόνο μία ενότητα της σελίδας και όχι όλος ο κώδικάς της.</p> <p>Αυτή η δομή παρέχει <a href="https://comuedu.ru/el/apple/how-to-make-direct-in-the-instagram-instagram-how-to-write-in-direct.html">ενδιαφέρουσες ευκαιρίες</a>πλοήγηση μέσω του περιεχομένου των πόρων. Πράγματι, μέσα στο παράθυρο του προγράμματος περιήγησης σε γειτονικά πλαίσια, μπορείτε να δείτε διάφορα μπλοκ πληροφοριών. Είναι σημαντικό για τους χρήστες να γνωρίζουν ότι η αναζήτηση σε ένα πλαίσιο ισοδυναμεί με την εκτέλεση μιας τέτοιας λειτουργίας σε μια ξεχωριστή σελίδα.</p> <p>Κατά τη διαδικασία εργασίας με τον ιστότοπο, μπορείτε να αλλάξετε δυναμικά το μέγεθος μιας ξεχωριστής ενότητας, η οποία είναι δύσκολο να εφαρμοστεί χρησιμοποιώντας άλλες τεχνολογικές λύσεις.</p> <h2>Πιθανά μειονεκτήματα</h2> <p>Τα προβλήματα με το έργο των τοποθεσιών που χρησιμοποιούν πλαίσια συσσωρεύτηκαν σταδιακά, αλλά σήμερα έχουν φτάσει στο κατώφλι. Μεταξύ των βασικών μειονεκτημάτων είναι:</p> <ol><li>Μη ικανοποιητική χρηστικότητα. Σήμερα, το μερίδιο των χρηστών κινητών συσκευών και tablet με μικρή ανάλυση οθόνης αυξάνεται και ήδη υπερβαίνει τον αριθμό εκείνων που επισκέπτονται ιστότοπους με <a href="https://comuedu.ru/el/computer/noutbuk-ili-kompyuter-chto-luchshe-chto-luchshe-igrovoi-noutbuk-ili.html">επιτραπέζιους υπολογιστές</a>και φορητούς υπολογιστές. Και εδώ η εφαρμογή των πλαισίων δημιουργεί <a href="https://comuedu.ru/el/linux/ne-rabotaet-razem-na-noutbuke-sereznaya-problema-ili-malenkoe.html">σοβαρά προβλήματα</a>με την προσαρμοστικότητα των σελίδων όταν εμφανίζονται <a href="https://comuedu.ru/el/wi-fi/konferenciya-v-skype-na-razlichnyh-ustroistvah-i-os-kak-polzovatsya-skype.html">διάφορες συσκευές</a>. Αυτό το πρόβλημα δεν έχει επί του παρόντος πρακτική λύση.</li> <li>Επιδείνωση της προσβασιμότητας του ιστότοπου για <a href="https://comuedu.ru/el/internet/programmy-dlya-uluchsheniya-raboty-razlichnyh-sistem-organizma-kak-uskorit.html">διάφορα προγράμματα</a>. Αυξάνεται η ποσότητα <a href="https://comuedu.ru/el/apple/kak-proverit-rabotaet-li-dopolnitelnaya-operativnaya-pamyat-besplatnye.html">πρόσθετα προγράμματα</a>(για παράδειγμα, προγράμματα ανάγνωσης οθόνης) αποκαλύπτει πολύ χειρότερη αναγνωσιμότητα πληροφοριών.</li> <li>Λανθασμένη εμφάνιση σελίδας. Συχνά η διάταξη σελίδων με τέτοια δομή φαίνεται λανθασμένη στα προγράμματα περιήγησης από σχεδιαστική άποψη. Και αυτό οφείλεται στις ιδιαιτερότητες της τεχνολογίας. Από την άποψη του SEO, η χρήση πλαισίων στη διάταξη html της σελίδας είναι άκρως ανεπιθύμητη.</li> <li>Η παρουσία μιας ενιαίας διεύθυνσης για ολόκληρη τη δομή. Σαν άποτέλεσμα <a href="https://comuedu.ru/el/operating-systems/pravila-perelinkovki-stranic-kak-sdelat-gramotnuyu-vnutrennyuyu.html">εσωτερικές σελίδες</a>Δεν είναι δυνατή η προσθήκη σελιδοδείκτη σε αυτόν τον ιστότοπο. Αυτό οδηγεί σε ταλαιπωρία για τους χρήστες.</li> <li>Εσφαλμένη ευρετηρίαση από τις μηχανές αναζήτησης. Η παρουσία στον ιστότοπο πολλών πλήρους εγγράφων, από τα οποία σχηματίζεται μία σελίδα, περιπλέκει σημαντικά την εργασία <a href="https://comuedu.ru/el/different/kak-izmenit-poiskovuyu-sistemu-po-umolchaniyu-kak-zadat.html">μηχανές αναζήτησης</a>. Αυτό οδηγεί σε σημαντικά σφάλματα ευρετηρίασης. Ως αποτέλεσμα - εσφαλμένος ορισμός θεμάτων και διευθύνσεων σελίδων, απώλεια κρίσιμου περιεχομένου από την ευρετηρίαση.</li> <li>Μη κύρος. Αυτό είναι ένα μάλλον ασυνήθιστο μειονέκτημα για τους πόρους στο δίκτυο. Και όμως, πρέπει να ειπωθεί ότι το γεγονός ότι η διάταξη των τοποθεσιών στα πλαίσια γίνεται απαρχαιωμένη οδηγεί στο γεγονός ότι οι δημιουργοί και οι κάτοχοι τέτοιων πόρων θεωρούνται ανάδρομοι. Υπάρχουν όμως μεμονωμένες εξαιρέσεις. Ακόμη και οι σύγχρονοι ιστότοποι που φιλοξενούν συνομιλίες συνήθως χρησιμοποιούν πλαίσια.</li> </ol><h2>Ευρετηρίαση πλαισίων από μηχανές αναζήτησης</h2> <p>Οι πληροφορίες που προέρχονται από τις μηχανές αναζήτησης μας λένε κατηγορηματικά ότι οι ιστότοποι με πλαίσια ευρετηριάζονται πολύ πιο αργά. Σε αυτή την περίπτωση, συχνά συμβαίνουν σφάλματα που σχετίζονται με την ίδια τη δομή. Πράγματι, σε κάθε ένα από τα πλαίσια εμφανίζεται μια πλήρης σελίδα Διαδικτύου. Και ακριβώς ένα τέτοιο μέρος του ιστότοπου μπορεί να μπει στη βάση ευρετηρίου.</p> <p>Το αρνητικό σημείο μιας τέτοιας ευρετηρίασης είναι ότι όταν πηγαίνει στο εσωτερικό της σελίδας, ο χρήστης συνήθως δεν βλέπει το μενού και άλλους μηχανισμούς πλοήγησης. Και αυτό δεν προκαλεί έκπληξη. Πρέπει να καταλάβετε ότι η ενημέρωση του πλαισίου δεν είναι λύση στο πρόβλημα <a href="https://comuedu.ru/el/operating-systems/rezhim-raboty-klient-programmy-elektronnoi-pochty-prezentaciya-na-temu.html">αυτή η υπόθεση</a>. Άλλωστε όλοι οι μηχανισμοί πλοήγησης τοποθετούνται σε άλλο κοντέινερ.</p> <p>Ένα άλλο πρόβλημα είναι ότι συχνά η κύρια σελίδα της δομής κοντέινερ περιέχει μόνο τον τίτλο, την περιγραφή των μετα-ετικέτες και την ετικέτα FRAMESET. Και αυτό φαίνεται να είναι λογικό - εξάλλου, το ουσιαστικό περιεχόμενο τοποθετείται σε ξεχωριστά έγγραφα. Είναι αυτά που ο επισκέπτης του ιστότοπου θα δει στη σελίδα εντός του πλαισίου.</p> <p>Αλλά εδώ <a href="https://comuedu.ru/el/network/pustoi-fail-robots-txt-poiskovye-roboty-google-chto-oznachaet-user-agent.html">ρομπότ αναζήτησης</a>μια τέτοια σελίδα δεν είναι σχεδόν ποτέ ευρετηριασμένη. Δεν βρίσκει περιεχόμενο σε αυτό που να είναι χρήσιμο στους επισκέπτες. Τα ρομπότ αναζήτησης έχουν διαμορφωθεί με τέτοιο τρόπο ώστε να προσπαθούν να λάβουν και να ευρετηριάσουν τις πληροφορίες που τοποθετούνται μέσα στην ετικέτα σώματος. Εκεί γίνεται η αναζήτηση χρήσιμου περιεχομένου για τον χρήστη. Αλλά δεν υπάρχει τέτοια ετικέτα στη σελίδα πλαισίου, αντικαθίσταται από FRAMESET.</p> <p>Εν μέρει αυτό το πρόβλημα μπορεί να λυθεί με τη χρήση των NOFRAMES. Αλλά σε πολλούς ιστότοπους, κατά την πρόσβαση σε αυτό, δίνονται μόνο πληροφορίες ότι το πρόγραμμα περιήγησης δεν υποστηρίζει πλαίσια. Και για να δείτε τη σελίδα πρέπει να χρησιμοποιήσετε άλλο πρόγραμμα.</p> <p>Τέτοιες περιπτώσεις δημιουργούν πολλά προβλήματα στους χρήστες που όταν πηγαίνουν στον ιστότοπο δεν βλέπουν το μενού και άλλες πληροφορίες που πρέπει να εμφανίζονται. Αν τοποθετηθούν καρέ στον ιστότοπο, μειώνονται οι παράμετροι του ως προς το SEO. Ταυτόχρονα, τα στατιστικά στοιχεία συμπεριφοράς των χρηστών δείχνουν ότι η εξουσία του πόρου μεταξύ των μηχανών αναζήτησης μειώνεται. Αυτό έχει σίγουρα αρνητικό αντίκτυπο στην επισκεψιμότητα του ιστότοπου.</p> <p>Είναι ιδιαίτερα δύσκολο για τις μηχανές αναζήτησης και τα ρομπότ ευρετηρίου να χειριστούν ένθετες και πολλαπλές δομές πλαισίων. Το γεγονός ότι κάθε κοντέινερ έχει όλα τα χαρακτηριστικά ενός ξεχωριστού εγγράφου, αλλά δεν περιέχει πλήρη πλοήγηση και άλλες πληροφορίες, περιπλέκει περαιτέρω την κατάσταση.</p> <p>Μπορείτε να διευκολύνετε το έργο των μηχανών αναζήτησης χρησιμοποιώντας τη σωστή σύνδεση στις σελίδες. Σε αυτήν την περίπτωση, είναι απαραίτητο να αντιγράψετε όλους τους συνδέσμους μενού, ώστε να μπορούν να βρεθούν μέσα σε κάθε μεμονωμένο τμήμα της σελίδας. Αλλά αυτό περιπλέκει αισθητά και επιβραδύνει το έργο της βελτιστοποίησης του ιστότοπου και της ενημέρωσης των πληροφοριών σε αυτόν.</p> <p>Η εμπειρία πολλών SEO και webmasters υποδηλώνει επίσης ότι οι σελίδες με πλαίσιο δεν κατατάσσονται ψηλά στα αποτελέσματα αναζήτησης. Αυτό συμβαίνει ακόμα κι αν περιλαμβάνονται στη βάση ευρετηρίου.</p> <h2>Δυνατότητες προώθησης ιστοσελίδων σε πλαίσια</h2> <p>Ορισμένες μηχανές αναζήτησης ευρετηριάζουν λανθασμένα ή πολύ λανθασμένα αρχεία με πλαίσιο. Ως αποτέλεσμα, η βάση ευρετηρίου δεν γεμίζει με διευθύνσεις γονικών πόρων (όπως θα έπρεπε), αλλά με συνδέσμους σε θυγατρικούς ιστότοπους.</p> <p>Για την ελαχιστοποίηση των προβλημάτων ευρετηρίασης τοποθεσιών με βάση τα πλαίσια, χρησιμοποιούνται ειδικές ετικέτες και παράμετροι κατά την περιγραφή τους. Το κύριο στοιχείο της δομής του κοντέινερ είναι το πλαίσιο. Είναι αυτός που αντικαθιστά το τυπικό σώμα· στον πηγαίο κώδικα. Κάθε μεμονωμένο δοχείο στη δομή περιγράφεται από ένα πλαίσιο. Ο αριθμός του στον κώδικα της σελίδας αντιστοιχεί στον αριθμό των μεμονωμένων ενοτήτων που εμφανίζονται στο παράθυρο του προγράμματος περιήγησης κατά την προβολή.</p> <p>Αυτές οι ετικέτες θα πρέπει να τοποθετηθούν στην κύρια σελίδα του ιστότοπου και στη συνέχεια να αντιγράψουν το περιεχόμενο μέσα σε καθεμία από αυτές.</p> <p><i> </i> 07.12.2015</p> <p>Οχι ακόμα</p> <br><p>Γειά σου! <br>Συνεχής επιμελής μελέτη <a href="https://comuedu.ru/el/the-device/osnovy-html-dlya-nachinayushchih-osnovy-html-i-css-dlya-nachinayushchih-kak-vyuchit.html">Βασικά στοιχεία HTML</a>. Χαίρομαι που δεν εγκαταλείπεις το μάθημα.</p> <p>Σε αυτό το μάθημα, θα εξερευνήσουμε <b>τι είναι τα πλαίσια</b>και πώς δημιουργούνται σε HTML. <br>Λοιπόν, ας ορίσουμε τι είναι τα πλαίσια σε HTML. <br><b>Κορνίζες</b>- αυτή είναι η διαίρεση του παραθύρου του προγράμματος περιήγησης σε ξεχωριστές περιοχές στις οποίες μπορούν να φορτωθούν μεμονωμένα έγγραφα HTML.</p> <p>Νομίζω ότι καταλαβαίνετε ότι χάρη στα πλαίσια, μπορείτε να προβάλετε πολλές ιστοσελίδες ταυτόχρονα σε ένα παράθυρο του προγράμματος περιήγησης.</p> <p>Για παράδειγμα, για να κατανοήσετε πώς λειτουργεί το πλαίσιο στην πράξη, προτείνω να δείτε ένα παράδειγμα. Κάντε μερικές μεταβάσεις εκεί:</p> <p>Λοιπόν, τι νομίζεις? Θέλετε να μάθετε πώς να το δημιουργήσετε; Τώρα θα μάθουμε <b>εισαγωγή πλαισίων σε έγγραφο html</b>.</p> <p>Η δημιουργία ενός πλαισίου σε μια ιστοσελίδα πραγματοποιείται σύμφωνα με την ακόλουθη διάταξη:</p><p> <frameset> <frame> <frame> </frameset> </p><blockquote><p><b>Προσοχή:</b>Η διάταξη του κώδικα πλαισίου εισάγεται στο έγγραφο html αντί για ετικέτα <bode><script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> :</p> </blockquote> <html> <head> <title>Κορνίζες</title> </head> <frameset> <frame> <frame> </frameset> </html> <p>○ <b>ετικέτα συνόλου πλαισίων</b></p> <p>Αυτό είναι το κύριο δοχείο για τη δημιουργία ενός πλαισίου που περιέχει άλλα στοιχεία. <br>Απαιτείται η ετικέτα κλεισίματος.</p><p> <frameset></frameset> </p><p><i><b>*χαρακτηριστικά ετικέτας frameset:</b> </i> </p> <ul><li>Cols - κάθετη</li> <li>Σειρές - οριζόντιες</li> </ul><p><b>σειρές</b>- οριζόντια</p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-1.png' height="125" width="181" loading=lazy loading=lazy></p> <p><b>cols</b>- κάθετα</p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-2.png' height="127" width="185" loading=lazy loading=lazy></p> <p>Τα χαρακτηριστικά cols και rows καθορίζουν σε πόσα μέρη θα χωριστεί το παράθυρο του προγράμματος περιήγησης. Εδώ, για παράδειγμα, για να χωρίσετε το παράθυρο του προγράμματος περιήγησης σε δύο κάθετα μέρη, πρέπει να γράψετε ως εξής:</p><p> <frameset cols="30%,*"> </p><p>Η αριστερή πλευρά της οθόνης θα είναι 30% και η δεξιά πλευρά 70%.</p> <p>Εάν θέλετε να διαιρέσετε το πρόγραμμα περιήγησης σε πολλά ακόμη μέρη, προσθέστε επιπλέον μεγέθη διαχωρισμένα με κόμματα, για παράδειγμα, ως εξής:</p><p> <frameset cols="30%,20%,10%,40%"> </p><p>Ως αποτέλεσμα, το πρώτο <span>κάθετη στήλη</span>θα έχει πλάτος 30%, το δεύτερο θα είναι 20%, το τρίτο θα είναι 10%, το τέταρτο θα είναι 40%.</p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-3.png' width="100%" loading=lazy loading=lazy></p> <p>Το έπιασα?</p> <p>Το ίδιο ισχύει και για την οριζόντια διάταξη:</p><p> <frameset rows="30%,20%,10%,40%"> </p><p>Η πρώτη οριζόντια στήλη θα έχει πλάτος 30%, η δεύτερη - 20%, η τρίτη - 10%, η τέταρτη - 40%.</p> <p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-4.png' height="199" width="390" loading=lazy loading=lazy></p> <p>○ <b>ετικέτα πλαισίου</b></p> <p>Η ετικέτα πλαισίου καθορίζει ποιο έγγραφο html πρέπει να φορτωθεί στο παράθυρο του προγράμματος περιήγησης. <br>Για παράδειγμα, πρέπει να φορτώσουμε σε ένα παράθυρο του προγράμματος περιήγησης τρία <a href="https://comuedu.ru/el/wi-fi/kak-yandeks-sdelat-startovoi-stranicei-v-raznyh-brauzerah-kak.html">διαφορετικές σελίδες</a>"1.html", "2.html", "3.html". Η ετικέτα πλαισίου θα μοιάζει με αυτό:</p><p> <frame src="1.html"> <frame src="2.html"> <frame src="3.html"> </p><p>Ας συνοψίσουμε τις γνώσεις για τα πλαίσια. Έτσι, η εργασία: πρέπει να διαιρέσετε το παράθυρο του προγράμματος περιήγησης σε δύο μέρη και να φορτώσετε δύο ιστοσελίδες σε αυτά τα μέρη - "1.html" κατά 30%, "2.html" κατά 70%. <br>Εδώ είναι ο ολοκληρωμένος κώδικας:</p><p> <frameset cols="30%,*"> <frame src="1.html"> <frame src="2.html"> </frameset> </p><p>Το αποτέλεσμα θα είναι ως εξής:</p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-5.png' width="100%" loading=lazy loading=lazy></p> <p><i><b>* Χαρακτηριστικά ετικέτας πλαισίου</b> </i> </p> <ul><li>src είναι η διεύθυνση της ιστοσελίδας. <i>src="1.html"</i> ;</li> <li>πλάτος περιθωρίου - εσοχή εντός του πλαισίου σε πλάτος. Παράδειγμα: <i>marginwidth = "10"</i> ;</li> <li>marginhight - εσοχή εντός του πλαισίου σε ύψος. Παράδειγμα: <i>marginhight = "10"</i> ;</li> <li>κύλιση - κύλιση του πλαισίου μέσα από την κύλιση. <br>- ναι - θα υπάρχει κύλιση στο πλαίσιο. Παράδειγμα: <i>scrolling = "ναι"</i> ;<br>- όχι - δεν θα υπάρχει κύλιση στο πλαίσιο. Παράδειγμα: <i>κύλιση = "όχι"</i> ;<br>- αυτόματη - κύλιση θα υπάρχει στο πλαίσιο εάν είναι απαραίτητο. Παράδειγμα: <i>scrolling="auto"</i> ;</li> <li>noresize - απαγορεύει τη μετακίνηση των περιγραμμάτων του πλαισίου.</li> <li>όνομα - το όνομα του πλαισίου. Καθορίζει σε ποιο παράθυρο θα ανοίγουν άλλα πλαίσια. Παράδειγμα: <i>όνομα "site"</i> ;</li> </ul> <p>Εάν το πλαίσιο δεν έχει όνομα στο χαρακτηριστικό "όνομα", τότε όταν κάνετε κλικ στον σύνδεσμο, θα ανοίξει ένα νέο πλαίσιο στο παράθυρο όπου βρισκόταν ο σύνδεσμος:</p> <p>Και εδώ είναι ένα παράδειγμα, εάν γράψετε το χαρακτηριστικό "όνομα":</p> <p>Αλήθεια, αυτό είναι καλύτερο; <br>Για οποιοδήποτε πλαίσιο, γράψτε το χαρακτηριστικό "όνομα" όπου θέλετε να ανοίγουν άλλα έγγραφα html σε αυτό</p><p> <frame src="2.html "name ="сайт"> </p><p>Το όνομα στο χαρακτηριστικό "όνομα" μπορεί να είναι οτιδήποτε. Αλλά στο μέλλον, εάν δώσετε ονόματα στις υπόλοιπες ετικέτες "πλαισίου", τότε να θυμάστε ότι η καθεμία πρέπει να είναι μοναδική:</p><p> <frame src="2..html "name ="bloggood-ru"> <frame src="3.html "name ="nocrisise-ru"> </p><p>σελίδα 2 σελίδα 3</p><p>Οι "Σελίδα 1", "Σελίδα 2" θα ανοίξουν στο ίδιο παράθυρο όπου καθορίσατε το όνομα του πλαισίου "όνομα \u003d" <span>ιστοσελίδα"</span>" και η "Σελίδα 3" θα ανοίξει σε άλλο πλαίσιο, όπου το όνομα ήταν "όνομα \u003d" <span>bloggood-en "</span>»</p> <p><b>ΠΡΑΚΤΙΚΗ</b></p> <p>Εργασία: Πρέπει να δημιουργήσετε πλαίσια σύμφωνα με αυτήν τη διάταξη:</p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-6.png' width="100%" loading=lazy loading=lazy></p> <p>Αρχικά, ας δημιουργήσουμε τρία οριζόντια πλαίσια:</p><p> <frameset rows="15%,*,15%"> </frameset> </p><p>Τώρα ας προσθέσουμε τα "top.html" και "footer.html"</p><p> <frameset rows="15%,*,15%"> <frame src="top.html"> <frame src="footer.html"> </frameset> </p><p>Το αποτέλεσμα μέχρι στιγμής θα είναι το εξής:</p> <p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-7.png' width="100%" loading=lazy loading=lazy></p> <p>Τώρα μεταξύ "top.html" και "footer.html" προσθέστε τα "menu.html" και "content.html" :</p><p> <frameset rows="15%,*,15%"> <frame src="top.html"> <frameset cols="25%,75%"> <frame src="menu.html"> <frame src="content.html" name="main"> </frameset> <frame src="footer.html"> </frameset> </p><p>Ολοκληρωμένος κωδικός:</p><p> <html> <head> <title>Κορνίζες</title> </head> <frameset rows="15%,*,15%"> <frame src="top.html"> <frameset cols="25%,75%"> <frame src="menu.html"> <frame src="content.html" name="main"> </frameset> <frame src="footer.html"> </frameset> </html> </p><p>Αποθηκεύστε το αρχείο ως "index.html"</p> <p>Δημιουργήστε τις σελίδες "top.html", "footer.html", "menu.html" και "content.html":</p> <p>Κωδικός αρχείου "top.html"</p><p> <html> <head> <title>κεφαλίδα ιστότοπου</title> </head> <body bgcolor="#b2f2ff" text="#0000FF"> <h1>δικτυακός τόπος</h1> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>Κωδικός αρχείου "footer.html"</p><p> <html> <head> <title>αρχείο footer.html</title> </head> <body bgcolor="#b2f2ff" text="#000000">StepkinBlog.com © 2015<script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>Κωδικός αρχείου Menu.html</p><p> <html> <head> <title>menu.html αρχείο - μενού τοποθεσίας</title> </head> <body bgcolor="#b2bbff" text="#112cf5"> <ul> <li>Κύρια σελίδα</li> <li>Σχετικά με τον Συγγραφέα</li> </ul> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>Κωδικός αρχείου "content.html" :</p><p> <html> <head> <title><a href="https://comuedu.ru/el/linux/gotovyi-kod-html-dlya-glavnoi-stranicy-sozdanie-html-stranicy-v-bloknote.html">Κύρια σελίδα</a></title> </head> <body bgcolor="#e3e5f8" text="#FF0055"> <h1>Κύρια σελίδα</h1>Περιεχόμενο ιστότοπου - "Κύρια σελίδα (content.html)"<script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>Κωδικός αρχείου "author.html":</p><p>Αυτό είναι το αποτέλεσμα που πήρα:</p> <p>Ας χρησιμοποιήσουμε τα χαρακτηριστικά "πλαίσιο" και ας απενεργοποιήσουμε το μη αυτόματο τέντωμα των πλαισίων και ας αφαιρέσουμε την κύλιση στο αρχείο "index.html".</p><p> <frameset rows="15%,*,15%"> <frame src="top.html" scrolling ="no" noresize> <frameset cols="25%,75%"> <frame src="menu.html"scrolling ="no" noresize> <frame src="content.html" name="main"scrolling ="no" noresize> </frameset> <frame src="footer.html" noresize> </frameset> </p><p><b>○ τι να κάνετε εάν τα πλαίσια δεν υποστηρίζονται από το πρόγραμμα περιήγησης; <br></b><br>Μπορείτε να εμφανίσετε ένα μήνυμα στον χρήστη ότι το πρόγραμμα περιήγησής του δεν υποστηρίζει πλαίσια. Για να το κάνετε αυτό, εισάγετε την ετικέτα <noframes>μέσα στη δομή <frameset> :</p><p> <frameset rows="15%,*,15%"> <noframes> ○ Πλωτό πλαίσιο Εάν πρέπει να εισαγάγετε ένα παράθυρο πλαισίου απευθείας σε μια σελίδα που δεν έχει δομή πλαισίου, υπάρχει μια ετικέτα "iframe" για αυτό * Χαρακτηριστικά ετικέτας "iframe". src - διαδρομή προς τη σελίδα που θα ανοίξει πλάτος - το πλάτος του πλωτού πλαισίου ύψος - το ύψος του πλωτού πλαισίου κύλιση - μπάρα κύλισης - όχι - να μην εμφανίζεται ποτέ η γραμμή κύλισης - ναι - να δείχνει πάντα - αυτόματη - εμφάνιση εάν είναι απαραίτητο ευθυγράμμιση - ευθυγράμμιση πλωτού πλαισίου - αριστερά - αριστερά - σωστά - σωστά - κορυφή - ψηλότερα - κάτω - κάτω πλαίσιο πλαισίου - το πλαίσιο γύρω από το πλωτό πλαίσιο - 1 - ενεργοποιήστε το πλαίσιο - 0 - απενεργοποιήστε το πλαίσιο Έτσι θα μοιάζει η ετικέτα "iframe" με χαρακτηριστικά: Εάν το πρόγραμμα περιήγησής σας δεν υποστηρίζει πλαίσια, μπορείτε να επικολλήσετε το κείμενο " ΟΥΠΣ! Ο περιηγητής σας δεν υποστηρίζει πλαίσια. » μεταξύ ετικετών . Θα μοιάζει με αυτό: Για παράδειγμα, ας προσθέσουμε ένα αιωρούμενο πλαίσιο στο αρχείο "content.html": Κύρια σελίδα Περιεχόμενο ιστότοπου - "Κύρια σελίδα (περιεχόμενο! Το πρόγραμμα περιήγησής σας δεν υποστηρίζει πλαίσια. Προηγούμενη ανάρτηση Επόμενη ανάρτηση Καλή μέρα! Ο Andrey Bernatsky είναι μαζί σας. Πριν πάτε απευθείας στο άρθρο, θέλω να σας δώσω έναν σύνδεσμο προς την έκδοση βίντεο αυτού του θέματος: Σε αυτό το επεισόδιο, θα μιλήσουμε για πλαίσια σε HTML. ΚορνίζεςΣτην ουσία, μοιάζουν πολύ με τους πίνακες, αλλά σε αντίθεση με τους πίνακες, κάθε πλαίσιο είναι ανεξάρτητο και το καθένα από αυτά μπορεί να έχει μια ξεχωριστή ιστοσελίδα με τη δική του διεύθυνση. Στο σχήμα βλέπουμε μια αρκετά κοινή δομή τοποθεσίας. Μπορεί να παρουσιαστεί με τη μορφή πίνακα ή μπορείτε να τα κάνετε όλα αυτά με τη βοήθεια πλαισίων. Στο επάνω πλαίσιο μπορείτε να φορτώσετε μια σελίδα με λογότυπο και μενού, στο αριστερό πλαίσιο - μια σελίδα με πλοήγηση στον ιστότοπο, στο κεντρικό πλαίσιο θα υπάρχει μια σελίδα με το κύριο περιεχόμενο του ιστότοπου, στο δεξί πλαίσιο θα φόρτωση σελίδας με διαφημιστικά πανό, και στο κάτω μέρος - μια σελίδα με στοιχεία επικοινωνίας. Δείτε ποια είναι τα καρέ με λίγα λόγια. Τώρα ας δούμε πώς μπορεί να γίνει όλο αυτό. Ένα χαρακτηριστικό ενός εγγράφου που περιέχει πλαίσια είναι ότι δεν περιέχει κοντέινερ. ΣΩΜΑ. Αντ' αυτού χρησιμοποιείται δοχείο. ΠΛΑΙΣΙΟ. Γενική Σύνταξητα πλαίσια μοιάζουν με αυτό: XHTML … …. … …. σε ένα δοχείο …. βρίσκονται οι ετικέτες , που ορίζουν τα περιεχόμενα των πλαισίων. Ετικέτα υπάρχουν δύο επιλογές: σειρές = αριθμός– αριθμός σειρών (οριζόντια υποπαράθυρα). cols = αριθμός– αριθμός στηλών (κάθετα υποπαράθυρα). Σε γενικές γραμμές, οι τιμές των παραμέτρων των γραμμών και των cols δεν ορίζονται ακριβώς με αριθμούς, αλλά με την καταχώριση αριθμών που χωρίζονται με κόμματα. Πόσοι αριθμοί θα πάνε, τόσες σειρές ή στήλες θα είναι και οι αριθμοί καθορίζουν το μέγεθος του πλαισίου. Το κύριο πράγμα είναι ότι το άθροισμα αυτών των αριθμών είναι ολόκληρο το πλάτος της οθόνης. Ας το δούμε αυτό με ένα παράδειγμα, και όλα θα είναι ξεκάθαρα. Ας δημιουργήσουμε ένα έγγραφο πλαισίου όπως αυτό: Ο κώδικας που θα ορίσει μια τέτοια δομή πλαισίου για εμάς θα μοιάζει με αυτό: XHTML Η πρώτη γραμμή του παραπάνω κώδικα ανοίγει το κοντέινερ σετ πλαισίων, η παράμετρος cols καθορίζει ότι θα υπάρχουν τρία ένθετα πλαίσια. Το πρώτο θα έχει πλάτος 30% του συνόλου του πλάτους της οθόνης. Το τρίτο θα έχει επίσης πλάτος 30% του πλάτους ολόκληρου της οθόνης. Και το δεύτερο πλαίσιο θα πάρει όλο τον υπόλοιπο χώρο. σύμβολο ναι "*" (αστερίσκος) σημαίνει ότι καταλαμβάνει όλο τον υπόλοιπο χώρο στην οθόνη. Παρεμπιπτόντως, ας δούμε πώς μπορούν να ταξινομηθούν τα πλαίσια στις παραμέτρους cols και rows: Μπορείτε να ορίσετε το μέγεθος βάζοντας έναν απλό αριθμό. Αυτός ο αριθμός θα καθορίσει το μέγεθος του πλαισίου σε pixel. Μπορείτε να ορίσετε την τιμή του πλάτους ως ποσοστό. Επιπλέον, εάν το άθροισμα των ποσοστών όλων των στηλών υπερβαίνει το 100%, τότε όλα τα πλαίσια θα μειωθούν αναλογικά έτσι ώστε το συνολικό ποσό να είναι ίσο με 100%. Η κατάσταση θα είναι παρόμοια, εάν το άθροισμα των ποσοστών όλων των στηλών είναι μικρότερο από 100%, τότε όλα τα πλαίσια θα αυξηθούν αναλογικά έτσι ώστε το συνολικό ποσό να είναι 100%. Μπορείτε να ορίσετε το μέγεθος του πλαισίου με ένα σύμβολο “*” (αστέρι). Αυτό σημαίνει ότι το πλαίσιο πρέπει να καταλαμβάνει όλο τον υπόλοιπο χώρο. Αν προσδιορίζεται, για παράδειγμα , δηλαδή δύο αστερίσκοι, τότε όλος ο υπόλοιπος χώρος θα κατανεμηθεί εξίσου μεταξύ αυτών των δύο πλαισίων (σε αυτή την περίπτωση, 40%). Μπορείτε να συνδυάσετε επιλογές για τον ορισμό μεγεθών πλαισίων σε HTML. Για παράδειγμα: XHTML Αυτός ο κωδικός σημαίνει ότι το πρώτο καρέ θα έχει μέγεθος 70 pixel, το τρίτο θα έχει το 40% του πλάτους της οθόνης και το δεύτερο θα καταλαμβάνει όλο τον υπόλοιπο χώρο. Με την πρώτη γραμμή κώδικα διευθετημένη πλήρως. Προχώρα. Ακολουθούν ετικέτες . Δεδομένου ότι ένα κόμμα στην παράμετρο colsετικέτα σύνολο πλαισίωνδίνονται τρεις αριθμοί (δηλαδή, θα υπάρχουν τρία πλαίσια), τότε οι ετικέτες θα πρέπει επίσης να είναι τρία. Η τιμή της παραμέτρου src είναι η διεύθυνση ιστοσελίδες, το οποίο θα φορτωθεί σε αυτό το πλαίσιο. Η διεύθυνση, όπως φαίνεται από το παράδειγμα, μπορεί να είναι απόλυτη και σχετική. Και η τελευταία γραμμή κλείνει το δοχείο . Εάν αντικαταστήσουμε την παράμετρο cols με γραμμές στην πρώτη γραμμή κώδικα, θα λάβουμε το ίδιο έγγραφο πλαισίου, που αποτελείται από τρία πλαίσια. Μόνο το καδράρισμα θα πάει κάθετα. XHTML Παράμετροι σειρέςΚαι colsδεν μπορεί να χρησιμοποιηθεί ταυτόχρονα. Αυτό οδηγεί σε σφάλματα και εσφαλμένη εμφάνιση του περιεχομένου. Όλοι έχουν τώρα μια ερώτηση σχετικά με το πώς να δημιουργήσετε μια τέτοια δομή, για την οποία μίλησα στην αρχή του άρθρου. Θα επιστρέψουμε σε αυτό λίγο αργότερα, αλλά προς το παρόν ας στραφούμε σε αυτό που κάνουμε αυτήν τη στιγμή στο πρόγραμμα περιήγησης. Στο πρόγραμμα περιήγησης, βλέπουμε τρεις σελίδες, καθεμία από τις οποίες βρίσκεται στο δικό της πλαίσιο. Ταυτόχρονα, τοποθετώντας τον κέρσορα του ποντικιού πάνω από τα όρια του πλαισίου, μπορούμε να αλλάξουμε το μέγεθος των πλαισίων, οι γραμμές κύλισης και τα περιγράμματα μεταξύ των πλαισίων είναι επίσης ορατά. Αυτό δεν είναι πάντα απαραίτητο, στην πραγματικότητα δεν είναι καθόλου απαραίτητο. Και όλα αυτά μπορούν να ελεγχθούν χάρη στις παραμέτρους ετικετών πλαίσιοΚαι σύνολο πλαισίων. Επιλογές ετικέτας πλαίσιοΚαι σύνολο πλαισίων: src="url"είναι απαραίτητη παράμετρος. Καθορίζει τη διεύθυνση της σελίδας που θα εμφανίζεται μέσα στο πλαίσιο. Χρησιμοποιείται μόνο για πλαίσιο. noresize– ακυρώνει τη δυνατότητα αλλαγής μεγέθους. Χρησιμοποιείται μόνο για πλαίσιο. scrolling="yes/no/auto"- ανιχνεύει την παρουσία γραμμών κύλισης. Η τιμή ναι υποδηλώνει την παρουσία γραμμών κύλισης. Η τιμή no υποδηλώνει ότι δεν θα υπάρχουν γραμμές κύλισης. Εάν η τιμή είναι αυτόματη - το ίδιο το πρόγραμμα περιήγησης καθορίζει εάν θα υπάρχουν γραμμές κύλισης. Χρησιμοποιείται μόνο για πλαίσιο. name="frame-name"– όνομα πλαισίου. Αυτή η παράμετρος χρησιμοποιείται για την αλληλεπίδραση μεταξύ των πλαισίων. Θα το πούμε περισσότερα λίγο αργότερα. Χρησιμοποιείται μόνο για πλαίσιο. σύνορο=αριθμός– πάχος περιγράμματος μεταξύ πλαισίων. Εάν λάβει την τιμή 0, τότε τα περιγράμματα μεταξύ των πλαισίων δεν εμφανίζονται. Χρησιμοποιείται μόνο για σετ πλαισίων. framespacing = "αριθμός"– απόσταση μεταξύ των πλαισίων. Χρησιμοποιείται μόνο για σετ πλαισίων. Χρησιμοποιώντας αυτές τις παραμέτρους, μπορείτε να λάβετε μια σελίδα που δεν εμφανίζει τα όρια μεταξύ των πλαισίων, δεν υπάρχει δυνατότητα αλλαγής μεγέθους πλαισίων και τα δύο τελευταία καρέ δεν θα κάνουν κύλιση. Ο κώδικας για μια τέτοια σελίδα μοιάζει με αυτό: XHTML Υπάρχουν μερικές άλλες επιλογές, αλλά δεν λειτουργούν ακριβώς, οπότε νομίζω ότι είναι λογικό να μην τις αναφέρω καν στην κυκλοφορία. Ίσως, με τις παραμέτρους τα πάντα. Ας δούμε ένα παράδειγμα για το πώς να τα χρησιμοποιήσετε. Τώρα ας δημιουργήσουμε τη δομή πλαισίου για την οποία μίλησα στην αρχή του τεύχους. Για να γίνει αυτό, δημιουργούμε μια δομή τριών πλαισίων με κατακόρυφο διαχωρισμό. XHTML Κατά συνέπεια, αντί για την ετικέτα , πρέπει να βάλουμε ένα άλλο δοχείο .. με τρεις στήλες και γράψτε τη διεύθυνση της σελίδας σας σε καθεμία. Βλέπετε, τίποτα περίπλοκο, απλώς αντί για ετικέτα εισάγουμε ένα νέο δοχείο που χρειαζόμαστε .. . XHTML "../lesson3/Untitled-1.html" /> Μετά από αυτό, εισάγουμε το τρίτο μας πλαίσιο με στοιχεία επικοινωνίας και κλείνουμε το κύριο δοχείο XHTML Ο πλήρης κώδικας αυτής της σελίδας φαίνεται παρακάτω: XHTML "../lesson3/Untitled-1.html" /> Φυσικά, πήρα τις διευθύνσεις για καρέ από προηγούμενα ενημερωτικά δελτία και δεν είδαμε κανένα μενού, λογότυπο, πλοήγηση και ούτω καθεξής εδώ. Αλλά πήραμε τη δομή όπως χρειαζόταν. Αλλά αν δημιουργήσετε τις πραγματικές απαραίτητες σελίδες, μπορείτε να αποκτήσετε μια όμορφη δομή. Με τι καταλήξαμε. Πόσο βολικό ή άβολο είναι (εσείς αποφασίζετε), αλλά με δομή πλαισίου, όλα τα κάδρα μας παραμένουν πάντα στη σελίδα. Ανεξάρτητα από το μέγεθος του περιεχομένου, θα βλέπουμε πάντα το λογότυπο και το μενού του ιστότοπου, το κάτω μέρος του ιστότοπου με στοιχεία επικοινωνίας, το μπλοκ πλοήγησης και τα banner. Αυτή, γενικά, είναι η ουσία και η έννοια των πλαισίων. Υπάρχει δυνατότητα αλληλεπίδρασης μεταξύ πλαισίων. Μπορείτε να το κάνετε έτσι ώστε κάνοντας κλικ σε έναν σύνδεσμο σε ένα πλαίσιο, οι πληροφορίες να εμφανίζονται σε άλλο. Θα δούμε τώρα πώς γίνεται αυτό. Ας δημιουργήσουμε ένα πλαίσιο σαν αυτό: Στο αριστερό πλαίσιο, θα βρίσκονται οι σύνδεσμοί μας. Και στα δεξιά - οι σελίδες στις οποίες οδηγούν αυτοί οι σύνδεσμοι. Ας δημιουργήσουμε ένα πλαίσιο σαν αυτό: XHTML Σφραγίδα Επίσης ενδιαφέρον: Ανάκτηση δεδομένων Android μετά από επαναφορά εργοστασιακών ρυθμίσεων Ποιο πρόγραμμα πλοήγησης είναι καλύτερο να εγκαταστήσετε στο Android; Επιλέγοντας τον καλύτερο πλοηγό για Android Σας προτείνουμε να διαβάσετε: 2022-02-14 07:37:19 Πώς να φτιάξετε έναν ενεργό ανιχνευτή ραντάρ με τα χέρια σας (εμπλοκή από κάμερες και ραντάρ) 2022-02-14 07:37:19 Οδηγίες για τη ρύθμιση ενός ραδιοφώνου σε ραδιοφωνικό μαγνητόφωνο διαφόρων κατασκευαστών Λειτουργία διακοπής της τρέχουσας λειτουργίας με μήνυμα κυκλοφορίας 2022-02-14 07:37:19 Σε ένα τηλέφωνο Android, το play market ζητά να ενεργοποιηθεί ένας κωδικός προσφοράς Συνεχίζοντας το θέμα: Εξυπνη τηλεόραση Πώς να ρυθμίσετε το ραδιόφωνο στο kia rio Η μονάδα υψηλής συχνότητας περιέχει ένα στάδιο μετατροπέα, είσοδο και ετεροδύναμα κυκλώματα. Σε δέκτες πρώτης και υψηλότερης κατηγορίας, καθώς και στη σειρά VHF μπροστά από τον μετατροπέα ... × WiFi linux Windows Διάφορα δίκτυα Εξυπνη τηλεόραση Λύσεις Android Νέα άρθρα / Δημοφιλής 2022-02-14 07:37:19 Πώς λειτουργεί το ραδιόφωνο Μόντεμ 2022-02-14 07:37:19 Απλό κύκλωμα ραδιοφώνου: περιγραφή Μόντεμ 2022-02-14 07:37:19 Τι να κάνετε εάν το Play Store ζητήσει έναν κωδικό προσφοράς και πού να τον λάβετε - απαλλαγούμε από προβλήματα κατά τις αγορές στο Google Play Προγράμματα 2022-02-14 07:37:19 Επαναφορά συντομεύσεων επιφάνειας εργασίας στα Windows δίκτυα 2022-02-10 10:53:11 Οφέλη από την επισκευή οικιακών συσκευών σε κέντρο σέρβις Διάφορα 2022-02-09 15:01:48 Επισκευή και συντήρηση πλυντηρίων ρούχων συσκευές Επαγγελματική επισκευή λεβήτων αερίου Διάφορα Κουμπί κλιματιστικού eu Κουμπιά διακόσμησης κειμένου Λύσεις Ποια είναι η διάμετρος της κεντρικής οπής ενός τροχού αυτοκινήτου; Λειτουργικά συστήματα Ζάντες, πλήμνες και ακτίνες για ποδήλατα pit συσκευές Τι είναι το σχέδιο μπουλονιών τροχού και πώς να το μετρήσετε linux Είναι δυνατόν να αποκτήσετε επίσημα έναν όμορφο αριθμό στην τροχαία Λειτουργικά συστήματα Επαφές Διαφήμιση Σχετικά με τον ιστότοπο © comuedu.ru 2022 Ιστότοπος για την τεχνολογία υπολογιστών