Τοποθέτηση πλαισίου. Δημιουργία πλαισίων

Ενότητες του ιστότοπου

Η επιλογή των συντακτών:

Διαφήμιση

Σπίτι - Ρύθμιση του δρομολογητή

Τοποθέτηση πλαισίου. Δημιουργία πλαισίων

Περιοχές εφαρμογής κουφωμάτων

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

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

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

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

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

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

Ρύζι. 5.1.Ένα τυπικό έγγραφο Ιστού με δομή πλαισίου

Αυτή η σελίδα χωρίζει το παράθυρο του προγράμματος περιήγησης σε τρία πλαίσια. Το κάτω μέρος του παραθύρου καταλαμβάνει το 20% του ύψους ολόκληρου του παραθύρου και περιέχει μόνιμες πληροφορίες, οι οποίες σε αυτήν την περίπτωση είναι ένα γραφικό μενού που σας επιτρέπει να έχετε πρόσβαση στις πιο σημαντικές ενότητες ανά πάσα στιγμή. Αυτό το πλαίσιο δεν μπορεί να αλλάξει το μέγεθός του με βάση τις εντολές του χρήστη και δεν έχει γραμμές κύλισης. Το πάνω μέρος του παραθύρου (που είναι το 80% του ύψους) χωρίζεται οριζόντια σε δύο πλαίσια. Το αριστερό πλαίσιο περιέχει τον πίνακα περιεχομένων των εγγράφων που μπορεί να δει ο χρήστης. Το δεξί πλαίσιο, το οποίο καταλαμβάνει το μεγαλύτερο μέρος του παραθύρου προβολής, προορίζεται για την εμφάνιση των ίδιων των εγγράφων. Όταν φορτωθούν αρχικά, αυτά τα δύο πλαίσια χωρίζουν το παράθυρο του προγράμματος περιήγησης οριζόντια σε αναλογία 15% προς 85%. Αυτή η αναλογία μπορεί να αλλάξει από τον χρήστη κατά την προβολή, γεγονός που σας επιτρέπει να επιλέξετε τα βέλτιστα μεγέθη καρέ λαμβάνοντας υπόψη το περιεχόμενο των φορτωμένων εγγράφων. Κάθε ένα από αυτά τα πλαίσια έχει τη δική του γραμμή κύλισης, επιτρέποντάς σας να προβάλλετε ολόκληρο το περιεχόμενο του πλαισίου, ανεξάρτητα από το μέγεθος του ίδιου του πλαισίου, ολόκληρο το παράθυρο του προγράμματος περιήγησης ή τις γραμματοσειρές που χρησιμοποιούνται. Όταν επιλέγετε οποιοδήποτε σύνδεσμο στο αριστερό πλαίσιο, το αντίστοιχο έγγραφο θα φορτωθεί στο δεξί πλαίσιο. Αυτή η δομή σάς επιτρέπει να βλέπετε ταυτόχρονα στην οθόνη τόσο τον πίνακα περιεχομένων των εγγράφων όσο και τα περιεχόμενα του επιλεγμένου εγγράφου.

Εδώ, χωρίς εξήγηση, είναι ένα τμήμα του κώδικα HTML που χρησιμοποιείται για τη δημιουργία ενός εγγράφου με αυτήν τη δομή:

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

Μπορείτε να το βρείτε στο Διαδίκτυο ιστοσελίδα της ηλεκτρονικής έκδοσης του δημοφιλούς καταλόγου διευθύνσεων και τηλεφώνου «All Petersburg» στην Αγία Πετρούπολη.

Η ηλεκτρονική έκδοση του καταλόγου είναι διαθέσιμη στη διεύθυνση http://www.allpetersburg.ruκαι σας επιτρέπει να βρείτε τις απαραίτητες πληροφορίες με βάση τα αιτήματα των χρηστών. Αυτή η σελίδα εγγράφου έχει επίσης μια δομή πλαισίου και αποτελείται από δύο πλαίσια, το πρώτο εκ των οποίων έχει πλάτος 100 pixel και το δεύτερο καταλαμβάνει όλο το υπόλοιπο πλάτος της θύρας προβολής. Το πλαίσιο που βρίσκεται στην αριστερή πλευρά χρησιμοποιείται για ένα γραφικό μενού που υπάρχει συνεχώς στην οθόνη και περιέχει επίσης το λογότυπο της εταιρείας Nevalink. Το δεύτερο πλαίσιο περιέχει το έγγραφο, το οποίο στην περίπτωση αυτή είναι μια φόρμα αιτήματος χρήστη. Η δομή αυτής της σελίδας ορίζεται από τον ακόλουθο κώδικα HTML:

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

Συμβουλή

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

Τελικά, η επιλογή της δομής του εγγράφου - πίνακα ή πλαίσιο - εξαρτάται από πολλούς παράγοντες και δεν μπορεί να προκαθοριστεί με σαφήνεια.

Υπάρχουν επίσηςσελίδες που φαίνεται να είναι κατασκευασμένες παρόμοια με τις προηγούμενες. Για παράδειγμα, μπορείτε να πάρετεσελίδα μιας πολύ δημοφιλής παγκοσμίως συλλογής προϊόντων λογισμικού που έχουν σχεδιαστεί κυρίως για εργασία με το Διαδίκτυο. Διεύθυνση διακομιστή http://www.tucows.com. Σημειώστε ότι το όνομα του διακομιστή καθορίστηκε από μια συντομογραφία που προέρχεται από τη συντομογραφία του πλήρους ονόματος της συλλογής - The Ultimate Collection of Winsock Software. Δεδομένου ότι η συντομογραφία tucows αποδείχθηκε ότι ήταν σύμφωνη με τη φράση δύο αγελάδες (δύο αγελάδες), οι σελίδες διακομιστή περιέχουν συχνά εικόνες αγελάδων και η βαθμολογία των προϊόντων λογισμικού υπολογίζεται στον αριθμό των mooings ("Moo") και απεικονίζεται γραφικά ως σειρά από τον αντίστοιχο αριθμό αγελάδων. Οι περισσότερες σελίδες διακομιστή έχουν κατασκευαστεί με τον ίδιο τρόπο - στην αριστερή πλευρά του παραθύρου υπάρχει μια λίστα με τις διαθέσιμες ενότητες και στη δεξιά πλευρά υπάρχει μια λίστα προϊόντων λογισμικού για την επιλεγμένη ενότητα. Με την πρώτη ματιά, η δομή του εγγράφου θα πρέπει να μοιάζει περίπου με τα προηγούμενα παραδείγματα. Ωστόσο, αυτό το έγγραφο δεν χρησιμοποιεί πλαίσια! Αυτή η σελίδα δημιουργείται χρησιμοποιώντας έναν πίνακα που αποτελείται από μία μόνο σειρά με δύο κελιά. Ο πίνακας δεν έχει πλαίσιο και εξυπηρετεί μόνο το σκοπό της μορφοποίησης της σελίδας. Η εντύπωση ότι η οθόνη χωρίζεται κατακόρυφα στα δύο δημιουργείται χρησιμοποιώντας ένα γραφικό φόντου που περιέχει μια κάθετη γραμμή αντί για ένα πλέγμα πίνακα. Μπορείτε να το επαληθεύσετε προβάλλοντας τη σελίδα χωρίς να φορτώσετε εικόνες. Η χρήση πίνακα εδώ οφείλεται προφανώς σε λόγους μεγαλύτερης προσβασιμότητας των εγγράφων, καθώς τα πλαίσια δεν επιτρέπουν την εμφάνιση σε όλα τα προγράμματα περιήγησης.

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

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

Μπορείτε να προβάλετε τη δομή του εγγράφου όταν εργάζεστε με το πρόγραμμα περιήγησης Netscape χρησιμοποιώντας το στοιχείο Page Info (στις εκδόσεις 3.x του προγράμματος περιήγησης Netscape αυτό το στοιχείο μενού ονομαζόταν Document Info) του μενού Προβολή (Εικ. 5.2).

Ρύζι. 5. 2 . Μενού προβολής προγράμματος περιήγησης Netscape

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

Συμβουλή

Δεν πρέπει να κάνετε άσκοπη κατάχρηση της χρήσης κουφωμάτων και ο αριθμός τους δεν πρέπει να ξεπερνά τα τρία ή τέσσερα.

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

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

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

Κανόνες για την περιγραφή των πλαισίων

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

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

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

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

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

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

Το δεύτερο αρχείο, που ονομάζεται frameset.htm, περιέχει τον ακόλουθο κώδικα:

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

Σημείωση

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

Συμβουλή

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

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

Αυτό το παράδειγμα δημιουργεί ένα πλέγμα πλαισίου με δύο σειρές και τρεις στήλες (Εικόνα 5.6). Εφόσον ορίζεται ένα σύνολο έξι καρέ, είναι επίσης απαραίτητο να οριστούν έξι μεμονωμένα πλαίσια . Λάβετε υπόψη ότι οι ορισμοί πλαισίων δίνονται γραμμή προς γραμμή. Δηλαδή το πρώτο tag ορίζει τα περιεχόμενα της πρώτης στήλης στην πρώτη σειρά, η δεύτερη ορίζει τα περιεχόμενα της δεύτερης στήλης και η τρίτη ολοκληρώνει τον ορισμό των δεδομένων για την τελευταία στήλη της πρώτης σειράς. Στη συνέχεια, τα τρία τελευταία πλαίσια γεμίζουν τις στήλες της δεύτερης σειράς.

Ρύζι. 5. 6 . Πλέγμα πλαισίων 2 επί 3

Σημειώστε επίσης ότι το άθροισμα των ποσοστιαίων τιμών στην παράμετρο COLS δεν είναι 100, αλλά μόνο 90 τοις εκατό. Δεν υπάρχει τίποτα κακό με αυτό, καθώς το πρόγραμμα περιήγησης θα αλλάξει αυτόματα αναλογικά το πλάτος των στηλών για να εξαλείψει αυτήν την αντίφαση.

Χαρακτηριστικά πλοήγησης κατά τη χρήση πλαισίων

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

Οι εκδόσεις 3.x και 4.x του προγράμματος περιήγησης Netscape, όταν κάνετε κλικ στο κουμπί Πίσω, επιστρέφει το έγγραφο πίσω στο πλαίσιο στο οποίο έγινε η τελευταία ενέργεια. Οι ίδιες ενέργειες θα εκτελεστούν εάν επιλεγεί το στοιχείο Πίσω κατά την κλήση του μενού περιβάλλοντος σε οποιοδήποτε από τα πλαίσια. Να σας υπενθυμίσουμε ότι το μενού περιβάλλοντος καλείται κάνοντας δεξί κλικ στο ποντίκι. Έτσι, ανεξάρτητα από το πλαίσιο στο οποίο κλήθηκε το μενού περιβάλλοντος, πατώντας το κουμπί Πίσω θα ακυρωθεί η τελευταία λειτουργία, ακόμα κι αν είχε πραγματοποιηθεί σε άλλο πλαίσιο.

Το πρόγραμμα περιήγησης Netscape 2.x λειτούργησε εντελώς διαφορετικά. Το μενού περιβάλλοντος περιέχει την εντολή Back in Frame, η οποία επιστρέφει το έγγραφο στο τρέχον πλαίσιο αντί να αναιρεί την τελευταία λειτουργία.

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

Αλληλεπίδραση μεταξύ πλαισίων

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

Η αλληλεπίδραση μεταξύ πλαισίων είναι η δυνατότητα φόρτωσης εγγράφων στο επιλεγμένο πλαίσιο χρησιμοποιώντας εντολές από άλλο πλαίσιο. Για το σκοπό αυτό, χρησιμοποιείται η παράμετρος ετικέτας TARGET<А>. Αυτή η παράμετρος καθορίζει το όνομα του πλαισίου ή του παραθύρου του προγράμματος περιήγησης στο οποίο θα φορτωθεί το έγγραφο στο οποίο αναφέρεται αυτός ο σύνδεσμος. Από προεπιλογή, εάν δεν υπάρχει παράμετρος TARGET, το έγγραφο φορτώνεται στο τρέχον πλαίσιο (ή παράθυρο). Αυτή η προεπιλογή μπορεί να παρακαμφθεί καθορίζοντας μια ετικέτα με την επιθυμητή τιμή της παραμέτρου TARGET. Ο καθορισμός του ονόματος του προεπιλεγμένου πλαισίου στο οποίο θα φορτωθεί είναι πολύ χρήσιμος όταν ένας μεγάλος αριθμός συνδέσμων χρειάζεται να κατευθύνει έγγραφα σε ένα συγκεκριμένο πλαίσιο. Στην αρχή αυτού του κεφαλαίου παρουσιάστηκε μια τυπική κατάσταση με έναν πίνακα περιεχομένων σε ένα πλαίσιο, συνδέσμους από τους οποίους φορτώνουν αντίστοιχα έγγραφα σε ένα διπλανό πλαίσιο (Εικόνα 5.1). Για αυτό το παράδειγμα στην ενότητα αρχείο με το όνομα LIST.htm, συνιστάται να γράψετε την ακόλουθη γραμμή: . Διαφορετικά, θα πρέπει να καθορίσετε μια παράμετρο TARGET για κάθε σύνδεσμο.

Τα ονόματα των πλαισίων πρέπει να ξεκινούν με λατινικό γράμμα ή αριθμό. Το όνομα μπορεί να είναι το όνομα ενός υπάρχοντος παραθύρου ή πλαισίου ή μπορεί να καθοριστεί ένα νέο όνομα κάτω από το οποίο θα ανοίξει ένα νέο παράθυρο. Υπάρχουν τέσσερα δεσμευμένα ονόματα που εκτελούν ειδικές ενέργειες όταν καθορίζονται. Αυτά τα ονόματα ξεκινούν με μια υπογράμμιση (_): "_blank", "_self", "_parent" και "_top". Οποιοδήποτε άλλο όνομα που αρχίζει με κάτω παύλα δεν είναι έγκυρο.

TARGET="_blank" - διασφαλίζει ότι το έγγραφο φορτώνεται σε νέο παράθυρο. Αυτό το παράθυρο δεν θα έχει όνομα και επομένως δεν θα είναι δυνατή η φόρτωση άλλου εγγράφου σε αυτό.

TARGET="_self" - το έγγραφο θα φορτωθεί στο τρέχον πλαίσιο (ή παράθυρο). Αυτή η καταχώρηση θα πρέπει να χρησιμοποιείται για να παρακάμψει την προεπιλογή που καθορίζεται από την ετικέτα .

TARGET="_top" - προκαλεί τη φόρτωση του εγγράφου σε ολόκληρο το παράθυρο. Εάν το έγγραφο βρίσκεται ήδη σε πλήρες παράθυρο, τότε αυτή η τιμή έχει το ίδιο αποτέλεσμα με αυτό"_εαυτός".

TARGET="_parent" - προκαλεί τη φόρτωση του εγγράφου στην περιοχή που καταλαμβάνει το γονικό πλαίσιο του τρέχοντος πλαισίου. Εάν δεν υπάρχει γονικό πλαίσιο, αυτή η τιμή παραμέτρου έχει το ίδιο αποτέλεσμα με"_μπλουζα" .

Σημείωση

Ορισμένες πηγές HTML λανθασμένα αναφέρουν ότι εάν ένα πλαίσιο δεν έχει γονέα, η τιμή "_parent" είναι ισοδύναμη με "_self". Αυτή η δήλωση δεν είναι πάντα σωστή.

Προειδοποίηση

Τα δεσμευμένα ονόματα πλαισίου "_blank", "_self", "_parent" και "_top" πρέπει να γράφονται με πεζά λατινικά γράμματα. Σημειώστε ότι αυτή η ακρίβεια είναι μοναδική για το Netscape. Ο Microsoft Internet Explorer αναγνωρίζει σωστά τα δεσμευμένα ονόματα γραμμένα σε κάθε περίπτωση.

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

Χρήση πλαισίων

Αυτό το έγγραφο HTML περιγράφει μια δομή που αποτελείται από τρία πλαίσια που ονομάζονται "A", "B" και "C". Τα ονόματα πλαισίων θα χρειαστούν αργότερα για να οργανωθούν οι σύνδεσμοι μεταξύ των πλαισίων. Σημειώστε ότι δεν θα υπάρχουν σύνδεσμοι προς το πλαίσιο με το όνομα "A" σε αυτό το παράδειγμα, επομένως θα μπορούσε να έχει μείνει καθόλου χωρίς όνομα. Όταν φορτώνετε το παραπάνω έγγραφο σε ένα πρόγραμμα περιήγησης, τα πλαίσια θα εμφανίζουν τις πληροφορίες που περιέχονται στα αρχεία που προσδιορίζονται από την παράμετρο SRC. Το πλαίσιο "A" θα λάβει τα περιεχόμενα του αρχείου frame_a.htm και τα υπόλοιπα δύο καρέ θα λάβουν δεδομένα από το αρχείο vala.htm, το οποίο δεν έχει δεδομένα για εμφάνιση. Να σας υπενθυμίσουμε για άλλη μια φορά ότι το έγγραφο HTML που περιγράφει τη δομή των πλαισίων δεν έχει ενότητα .

Εδώ είναι το κείμενο του αρχείου με το όνομα frame_a.htm:

Έγγραφο για το πλαίσιο Α

ρε

4. Φόρτωση εγγράφου σε νέο παράθυρο

5. Φόρτωση εγγράφου σε πλήρες παράθυρο

6. Φόρτωση εγγράφου στο τρέχον πλαίσιο

Αυτό το έγγραφο είναι ένα πλήρες έγγραφο HTML με ενότητες Και και, με τη σειρά του, έχει συνδέσμους προς ένα αρχείο που ονομάζεται test.htm, που βρίσκεται στον ίδιο κατάλογο με το αρχείο frame_a.htm.

Το κείμενο του αρχείου test.htm είναι εξαιρετικά απλό:

Έγγραφο δοκιμής

Δοκιμαστικό κείμενο εγγράφου

Το αρχείο frame_a.htm, τα περιεχόμενα του οποίου φορτώθηκαν στο πλαίσιο "A", έχει έξι συνδέσμους στο ίδιο αρχείο test.htm με διαφορετικές τιμές για την παράμετρο TARGET.

Ας εξετάσουμε τις ενέργειες που θα προκύψουν κατά την υλοποίηση αυτών των συνδέσμων. Ο πρώτος σύνδεσμος με την τιμή TARGET="B" θα φορτώσει το αρχείο test.htm σε ένα πλαίσιο που ονομάζεται "in". Σημειώστε ότι μετά την εφαρμογή οποιουδήποτε από τους έξι συνδέσμους, το πρόγραμμα περιήγησης Netscape θα χρωματίσει αυτόματα και τα έξι με διαφορετικό χρώμα, καθώς δείχνουν στο ίδιο αρχείο. Ο Microsoft Internet Explorer επισημαίνει μόνο συνδέσμους που έχουν υλοποιηθεί.

Ο δεύτερος σύνδεσμος θα κάνει το ίδιο για το πλαίσιο "C". Αρχικά, δεν υπάρχει τίποτα στα πλαίσια "B" και "C" (πιο συγκεκριμένα, φορτώνονται τα περιεχόμενα του κενού αρχείου vala.htm). Η υλοποίηση του πρώτου και του δεύτερου συνδέσμου θα γεμίσει αυτά τα πλαίσια.

Ο τρίτος σύνδεσμος με την τιμή TARGET=MD" θα οδηγήσει στο σχηματισμό ενός νέου παραθύρου του προγράμματος περιήγησης με το όνομα "D" και στη φόρτωση του αρχείου test.htm σε αυτό. Σημειώστε ότι η μορφή εγγραφής αυτού του συνδέσμου δεν διαφέρει από την πρώτη δύο. Η διαφορά είναι ότι στην πρώτη Σε δύο περιπτώσεις δόθηκαν αναφορές σε υπάρχοντα πλαίσια, τα ονόματα των οποίων ορίστηκαν στο αρχείο με τη δομή του πλαισίου και σε αυτήν την περίπτωση η αναφορά δόθηκε σε ανύπαρκτο αντικείμενο. Αυτή η αναφορά γίνεται τουλάχιστον μία φορά, στη συνέχεια θα δημιουργηθεί ένα παράθυρο με το όνομα "D" και κάνοντας επαναλαμβανόμενο κλικ στον σύνδεσμο θα φορτωθούν ξανά τα δεδομένα μόνο στο ήδη υπάρχον παράθυρο "D". Φυσικά, ο χρήστης μπορεί να το κλείσει οποιαδήποτε στιγμή χρόνο και δημιουργήστε το ξανά επιλέγοντας αυτόν τον σύνδεσμο Το σχήμα 5.7 δείχνει την κατάσταση μετά την υλοποίηση των τριών πρώτων συνδέσμων Θυμηθείτε ότι η θέση και τα μεγέθη των παραθύρων στην οθόνη καθορίζονται από τον χρήστη.

Ρύζι. 5. 7 . Η κατάσταση προέκυψε μετά τη διαδοχική υλοποίηση των τριών πρώτων συνδέσμων που διατίθενται στο αριστερό πλαίσιο

Ο πέμπτος σύνδεσμος με την τιμή TARGET="_top" θα φορτώσει το έγγραφο στο πλήρες παράθυρο αντί για ολόκληρη τη δομή του πλαισίου. Με αυτήν την τιμή της παραμέτρου TARGET, δεν δημιουργείται νέο παράθυρο. Η επιστροφή στη δομή του πλαισίου είναι δυνατή κάνοντας κλικ στο κουμπί Πίσω.

Σημείωση

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

Συμβουλή

Να σας υπενθυμίσουμε ότι τα ονόματα των ληφθέντων εγγράφων καθορίζονται από την ετικέτα . Εάν ένα έγγραφο φορτωθεί σε πλήρες παράθυρο, το όνομά του εμφανίζεται στην κορυφή του παραθύρου του προγράμματος περιήγησης. Εάν ένα έγγραφο φορτωθεί σε ένα πλαίσιο, τότε το όνομά του δεν εμφανίζεται πουθενά και ο τίτλος του εγγράφου που περιέχει μια περιγραφή της δομής πλαισίου του εγγράφου θα εξακολουθεί να βρίσκεται στο επάνω μέρος του παραθύρου. Επομένως, τα ονόματα των εγγράφων που πρόκειται να προβληθούν σε πλαίσια δεν είναι πολύ σημαντικά. Για παράδειγμα, στο Σχ. 5.7 Το ίδιο έγγραφο φορτώνεται στα πλαίσια "B" και "C", καθώς και σε ένα ξεχωριστό παράθυρο με το όνομα "D", ενώ το όνομα του εγγράφου είναι ορατό μόνο στο παράθυρο "D". Ωστόσο, δεν συνιστάται η παράλειψη των ονομάτων των εγγράφων που έχουν φορτωθεί σε πλαίσια, καθώς μπορεί να εμφανίζονται, για παράδειγμα, στη λίστα Σελιδοδεικτών κατά τη δημιουργία ενός σελιδοδείκτη για ένα έγγραφο που βρίσκεται σε ένα πλαίσιο ή λίστα εγγράφων που προβλήθηκαν.</span> </i></p> <p>Ας δούμε ένα άλλο ενδιαφέρον παράδειγμα οργάνωσης της αλληλεπίδρασης μεταξύ πλαισίων και παραθύρων του προγράμματος περιήγησης. Έστω ότι υπάρχει το κείμενο του κύριου φορτωμένου εγγράφου HTML:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Χρήση ονομάτων παραθύρων

Ένα έγγραφο με δομή πλαισίου σε νέο παράθυρο

Χρήση πλαισίων

Λάβετε υπόψη ότι εάν το κύριο έγγραφο είναι ένα τυπικό έγγραφο HTML, τότε το αρχείο frame.htm που φορτώνεται από έναν σύνδεσμο από το κύριο έγγραφο περιέχει τη δομή του πλαισίου και με τη σειρά του συνδέεται με το αρχείο vala.htm.

Μετά τη φόρτωση του κύριου εγγράφου, το παράθυρο του προγράμματος περιήγησης θα μοιάζει όπως φαίνεται στην Εικ. 5.8 (αριστερό παράθυρο). Ολόκληρο το έγγραφο αποτελείται από δύο συνδέσμους. Ας ακολουθήσουμε τον πρώτο σύνδεσμο. Θα δημιουργηθεί ένα νέο παράθυρο με το όνομα «D», στο οποίο θα εμφανιστεί το κείμενο του αρχείου test.htm (Εικ. 5.8, δεξί παράθυρο). Η επανάληψη αυτού του συνδέσμου θα επαναφορτώσει μόνο τα δεδομένα στο παράθυρο "D".

Ρύζι. 5.8.Παράδειγμα αλληλεπιδρώντων παραθύρων πλαισίων

Ας ακολουθήσουμε τον δεύτερο σύνδεσμο. Θα σχηματιστεί ένα νέο παράθυρο χωρίς όνομα, στο οποίο θα φορτωθεί το αρχείο frame.htm, ορίζοντας δύο πλαίσια με τα ονόματα «C» και «D» (Εικ. 5.8, κάτω παράθυρο). Δεν υπάρχει τίποτα και στα δύο πλαίσια (πιο συγκεκριμένα, φορτώνεται ένα κενό έγγραφο κενό.htm). Παρατηρήστε ότι υπάρχει τώρα ένα ανοιχτό παράθυρο με το όνομα "D" και ένα παράθυρο με πλαίσια, ένα από τα οποία ονομάζεται επίσης "D". Ας ακολουθήσουμε ξανά τον πρώτο σύνδεσμο. Σε αντίθεση με την πρώτη περίπτωση, τα δεδομένα δεν θα φορτωθούν στο παράθυρο "D", αλλά σε ένα πλαίσιο που ονομάζεται "D". Το αποτέλεσμα όλων των περιγραφόμενων ενεργειών φαίνεται στο Σχ. 5.8.

Σημείωση

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

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

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

Συμβουλή

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

Προειδοποίηση

Τα ονόματα πλαισίων και παραθύρων συγκρίνονται με διάκριση πεζών-κεφαλαίων. Έτσι, για παράδειγμα, τα πλαίσια με το όνομα "frame_1" και "Frame_1" θα είναι διαφορετικά.

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

Αρκετά απλά τυπικά παραδείγματα αλληλεπίδρασης μεταξύ πλαισίων συζητήθηκαν παραπάνω. Εξετάστηκαν οι εργασίες δημιουργίας νέων παραθύρων, αντικατάστασης των περιεχομένων μεμονωμένων πλαισίων, καθώς και εμφάνισης ενός εγγράφου σε πλήρες παράθυρο με την καταστροφή ολόκληρης της δομής του πλαισίου. Δίνονται παραδείγματα χρήσης ονομάτων προσαρμοσμένων πλαισίων, καθώς και των δεσμευμένων ονομάτων "_blank", "_self" και "_top". Η χρήση του τελευταίου δεσμευμένου ονόματος "_parent" είναι πιο περίπλοκη και θα περιγραφεί παρακάτω.

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

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

Ας προσπαθήσουμε να επεκτείνουμε τη διατύπωση του προβλήματος. Ας υποθέσουμε ότι θέλετε να εμφανίσετε στην οθόνη τα περιεχόμενα ενός αρκετά μεγάλου εγγράφου που αποτελείται από κεφάλαια χωρισμένα σε ενότητες. Χαρακτηριστικό παράδειγμα είναι η τεχνική βιβλιογραφία για ένα συγκεκριμένο θέμα. Ας περιγράψουμε την επιθυμητή παρουσίαση ενός τέτοιου εγγράφου στην οθόνη. Ας χωρίσουμε την οθόνη σε τρία πλαίσια, το ένα από τα οποία θα περιέχει μια λίστα κεφαλαίων βιβλίων, το δεύτερο - μια λίστα ενοτήτων του επιλεγμένου κεφαλαίου και το τρίτο - το κείμενο της επιλεγμένης ενότητας. Όταν επιλέγετε έναν σύνδεσμο στο δεύτερο πλαίσιο, τα περιεχόμενα του τρίτου πλαισίου θα πρέπει να αλλάζουν. Η εφαρμογή αυτής της απαίτησης είναι ασήμαντη. Όταν επιλέγετε έναν σύνδεσμο στο πρώτο πλαίσιο, τα περιεχόμενα και του δεύτερου και του τρίτου πλαισίου θα πρέπει να αλλάζουν ταυτόχρονα. Εκ πρώτης όψεως, η υλοποίηση αυτής της εργασίας σε HTML είναι αδύνατη (χωρίς τη χρήση προγραμματισμού σε JavaScript ή άλλα), καθώς όταν εκτελείται ένας σύνδεσμος, φορτώνεται μόνο ένα έγγραφο και όχι δύο ή περισσότερα. Ωστόσο, η επίλυση αυτού του προβλήματος είναι αρκετά δυνατή.

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

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

Παράδειγμα αλληλεπίδρασης μεταξύ πλαισίων

Δημιουργήθηκε αρχείο με ένθετη δομή έχει το όνομα 1_2.htm και περιέχει τον ακόλουθο κώδικα:

1-2

Με την πρώτη ματιά, τίποτα δεν έχει αλλάξει καθόλου. Και στις δύο περιπτώσεις υπάρχουν τρία πλαίσια στα οποία φορτώνονται τα έγγραφα left.htm, 1.htm και 2.htm αντίστοιχα. Ωστόσο, όταν τα καρέ αλληλεπιδρούν, θα εμφανιστεί η διαφορά. Εάν στην πρώτη περίπτωση κανένα από τα πλαίσια δεν έχει γονικό πλαίσιο, τότε στη δεύτερη περίπτωση για δύο καρέ ο γονέας θα είναι ένα πλαίσιο με το όνομα "Two_Frames". Επομένως, εάν σε οποιοδήποτε από τα δύο πλαίσια εφαρμόσετε έναν σύνδεσμο με τιμή παραμέτρου TARGET ίση με "_parent", τότε το αποτέλεσμα θα είναι διαφορετικό για την πρώτη και τη δεύτερη περίπτωση. Για την πρώτη περίπτωση, η εφαρμογή μιας τέτοιας σύνδεσης θα φορτώσει το έγγραφο σε ένα πλήρες παράθυρο, αντικαθιστώντας την υπάρχουσα δομή πλαισίου. Εδώ μπαίνει στο παιχνίδι η ιδιότητα τιμής "_parent", η οποία λειτουργεί σαν "_top" απουσία γονικού πλαισίου. Στη δεύτερη περίπτωση, θα αντικατασταθεί ένα πλαίσιο με το όνομα «Two_Frames», το οποίο καταλαμβάνει το δεξί μισό της οθόνης και ουσιαστικά αποτελείται από δύο καρέ.

Η δεύτερη περίπτωση τυπικά διαφέρει από την πρώτη επίσης από την παρουσία ενός πλαισίου με το όνομα "Two_Frames" στο οποίο μπορούν να γίνουν αναφορές. Είναι ακριβώς αυτό το χαρακτηριστικό που θα μας επιτρέψει να λύσουμε το πρόβλημα.

Εδώ είναι τα περιεχόμενα του αρχείου left.htm, το οποίο φορτώνεται αρχικά στο πρώτο από τα υπό εξέταση πλαίσια:

Αριστερό πλαίσιο

έγγραφα σε δύο πλαίσια που βρίσκονται στη δεξιά πλευρά του παραθύρου.

Επιλέξτε την επιλογή θέσης εγγράφου:

1 _2.htm" TARGET="Two_Frames">Επιλογή 1-2

Επιλογή 2-1

2-1<TITLE> </p> <p></HEAD> </p> <p><FRAMESET ROWS="*,*"> </p> <p><FRAME SRC="2.htm"> </p> <p><FRAME SRC="1.htm"> </p> <p></FRAMESET> </p> <p></HTML> </p> <p>Σημειώστε ότι το κείμενο των αρχείων 1_2.htm και 2_1.htm διαφέρει μόνο ως προς τη σειρά των συνδέσμων προς τα αρχεία 1.htm και 2.htm.</p> <p>Ας εξετάσουμε τώρα την κατασκευή ενός εγγράφου που έχει φορτωθεί στο αριστερό πλαίσιο. Περιέχει δύο συνδέσμους με την παράμετρο TARGET="Two_Frames". Η υλοποίηση οποιουδήποτε από αυτούς τους συνδέσμους δημιουργεί δύο πλαίσια στη θέση του πλαισίου "Two_Frames" (αυτό είναι το δεξί μισό της οθόνης), φορτώνοντας έγγραφα 1.htm και 2.htm με τη μία ή την άλλη σειρά. Έτσι, όταν επιλέγετε την επιλογή 1-2, το έγγραφο 1.htm φορτώνεται στο επάνω δεξιό πλαίσιο και το 2.htm στο κάτω δεξιά πλαίσιο. Όταν επιλέγετε την επιλογή 2-1, αλλάζει η σειρά των εγγράφων. Ως αποτέλεσμα, η εναλλασσόμενη επιλογή των επιλογών δημιουργεί την εντύπωση ότι τα έγγραφα στα δύο πλαίσια αλλάζουν θέση. Αυτό ακριβώς είναι το αποτέλεσμα που επιδιώξαμε να επιτύχουμε (Εικ. 5.9).</p> <p>Τα περιεχόμενα των εγγράφων 1.htm και 2.htm δεν έχουν σημασία για το περιγραφόμενο παράδειγμα. Ωστόσο, για παράδειγμα, αντί για ασήμαντα έγγραφα, θα δημιουργήσουμε έγγραφα με συνδέσμους που υλοποιούν τις ίδιες ενέργειες.</p> <p>Κείμενο αρχείου 1.htm:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Έγγραφο 1

Έγγραφο 1

Επιλογή 1 -2

Επιλογή 2-1

Το αρχείο 2.htm διαφέρει από το 1.htm μόνο στην κεφαλίδα.

Υπάρχουν δύο σύνδεσμοι με την τιμή TARGET="_parent" που οδηγούν στο γονικό πλαίσιο. Αυτοί οι σύνδεσμοι θα μπορούσαν επίσης να γραφτούν με ένα ρητό όνομα του γονικού πλαισίου, π.χ. TARGET="Two_Frames", αλλά η χρήση ενός άρρητου ονόματος είναι συνήθως πιο βολική. Για παράδειγμα, εάν εξαιρέσετε συνδέσμους από το αριστερό πλαίσιο (έγγραφο left.htm), θα μπορούσατε να παραλείψετε το όνομα του πλαισίου "Two_Frames" που προσδιορίζεται κατά την περιγραφή της δομής του κύριου πλαισίου. Αυτό θα δημιουργούσε ένα πλαίσιο χωρίς όνομα, αλλά οι σύνδεσμοι από τα έγγραφα 1.htm και 2.htm με TARGET="_parent" θα εξακολουθούσαν να λειτουργούν σωστά.

Συμβουλή

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

Ρύζι. 5.9.Παράθυρα πλαισίων που αλληλεπιδρούν με την επίδραση της αλλαγής των φορτωμένων εγγράφων

Διαφορά μεταξύ πλαισίων και παραθύρων προγράμματος περιήγησης

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

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

Συμβουλή

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

Η εργασία με παράθυρα έχει και άλλα μειονεκτήματα. Η δημιουργία κάθε παραθύρου απαιτεί πολλή μνήμη. Στο Netscape, κάθε παράθυρο είναι ουσιαστικά ένα άλλο αντίγραφο του προγράμματος περιήγησης, πλήρες με ένα πλήρες σύνολο κουμπιών και μενού. Η ίδια κατάσταση είναι τυπική για τον Microsoft Internet Explorer.

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

Πολλές δημοφιλείς εφαρμογές των Windows έχουν την έννοια του παραθύρου εγγράφων. Παραδείγματα περιλαμβάνουν τον επεξεργαστή κειμένου Microsoft Word ή το πρόγραμμα γραφικών Paint Shop Pro και πολλά άλλα. Κάθε μία από αυτές τις εφαρμογές επιτρέπει την ταυτόχρονη χρήση πολλών παραθύρων με δεδομένα και, κατά κανόνα, υπάρχει ένα μενού Παράθυρο, το οποίο παρέχει μια λίστα παραθύρων και δίνει τη δυνατότητα εναλλαγής μεταξύ τους. Η δημιουργία ενός νέου παραθύρου σε τέτοιες εφαρμογές συνήθως συμβαίνει κατά το άνοιγμα ενός υπάρχοντος αρχείου ή τη δημιουργία ενός νέου. Ωστόσο, σε αυτά τα προγράμματα, όταν δημιουργείται ένα νέο παράθυρο, δεν δημιουργείται νέα εργασία που εκτελείται.

Το Netscape διαθέτει επίσης ένα μενού Παράθυρο που εμφανίζει τα υπάρχοντα παράθυρα. (Στις εκδόσεις Netscape 4.x, αυτή η δυνατότητα παρέχεται από το στοιχείο Window στο μενού Communicator.) Ας επιστρέψουμε στην Εικ. 5.8. Σε αυτό το παράδειγμα, τρία παράθυρα είναι ανοιχτά ταυτόχρονα, καθένα από τα οποία είναι ουσιαστικά ένα ξεχωριστό πρόγραμμα περιήγησης. Ωστόσο, για τον χρήστη, είναι όλα παράθυρα του ίδιου προγράμματος περιήγησης που μπορούν να αλληλεπιδράσουν μεταξύ τους. Σε οποιοδήποτε από αυτά τα παράθυρα, μπορείτε να ανοίξετε το μενού Παράθυρο και να δείτε μια λίστα με τρία παράθυρα. Στο Σχ. Το σχήμα 5.10 δείχνει την κατάσταση όταν αυτό γίνεται για το κάτω παράθυρο.

Ρύζι. 5.10.Άνοιγμα Frame Windows στο πρόγραμμα περιήγησης Netscape

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

Εάν ήταν ανοιχτά πολλά παράθυρα, τότε όλα θα κλείσουν, αλλά πριν από αυτό θα εμφανιστεί ένα προειδοποιητικό μήνυμα (Εικ. 5.12).

Κάθε παράθυρο του προγράμματος περιήγησης μπορεί να έχει τις δικές του ρυθμίσεις (αν και όχι όλες). Κοιτάξτε το σχ. 5.11. Δύο παράθυρα είναι ανοιχτά, το ένα από τα οποία χωρίζεται σε τρία πλαίσια. Το ίδιο έγγραφο φορτώνεται σε δύο από τα τρία καρέ, καθώς και σε ξεχωριστό παράθυρο. Η δυνατότητα ανεξάρτητης διαμόρφωσης των παραμέτρων κάθε παραθύρου σάς επιτρέπει να εμφανίζετε διαφορετικά το ίδιο έγγραφο. Στο παραπάνω παράδειγμα, το μέγεθος της γραμματοσειράς του εγγράφου σε ένα παράθυρο είναι μεγαλύτερο από το άλλο. Αυτό το αποτέλεσμα επιτυγχάνεται ορίζοντας διαφορετικές κωδικοποιήσεις για κάθε παράθυρο (το στοιχείο Κωδικοποίηση εγγράφου του μενού Επιλογές ή το στοιχείο Σύνολο χαρακτήρων του μενού Προβολή για την έκδοση 4.x), και οι δύο κωδικοποιήσεις χρησιμοποιούν την ίδια γραμματοσειρά, αλλά διαφορετικών μεγεθών. Η αλλαγή οποιουδήποτε στοιχείου στο μενού Γενικές Προτιμήσεις επηρεάζει όλα τα παράθυρα.

Ρύζι. 5.11.Έξοδος από το πρόγραμμα περιήγησης Netscape

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

Πρόσθετες λειτουργίες του προγράμματος περιήγησης

Όλες οι παραπάνω ετικέτες περιγραφής πλαισίου με τις αντίστοιχες παραμέτρους υλοποιούνται σχεδόν πανομοιότυπα στα προγράμματα περιήγησης Netscape και Microsoft Internet Explorer, ωστόσο, καθένα από αυτά τα προγράμματα περιήγησης σάς επιτρέπει να χρησιμοποιείτε επιπλέον τις δικές του μοναδικές ετικέτες ή παραμέτρους.

Λειτουργίες προγράμματος περιήγησης Netscape

Το πρόγραμμα περιήγησης Netscape, ξεκινώντας με την έκδοση 3.0, επιτρέπει τρεις πρόσθετες επιλογές: BORDER, FRAMEBORDER και BORDERCOLOR. Η παράμετρος BORDER ισχύει μόνο για την ετικέτα . Η τιμή της παραμέτρου BORDER καθορίζει το πάχος των περιγραμμάτων μεταξύ των πλαισίων σε pixel.

Η παράμετρος FRAMEBORDER μπορεί να χρησιμοποιηθεί τόσο στην ετικέτα , και στην ετικέτα και καθορίζει την παρουσία πλαισίου μεταξύ των πλαισίων. Αυτή η παράμετρος μπορεί να είναι Ναι ή ΟΧΙ. Εάν η παράμετρος είναι γραμμένη στην ετικέτα , τότε το εφέ του ισχύει για όλα τα πλαίσια αυτής της ομάδας. Για ένα μεμονωμένο πλαίσιο, η τιμή μπορεί να παρακαμφθεί. Η προεπιλεγμένη τιμή είναι Ναι.

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

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

Εδώ είναι ένα παράδειγμα:

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

Ρύζι. 5.13.Σχεδίαση περιγραμμάτων μεταξύ πλαισίων στο πρόγραμμα περιήγησης Netscape

Μεταξύ των παραθύρων πλαισίου "A" και "B", δεν σχεδιάζεται κανένα πλαίσιο λόγω της τιμής NO της παραμέτρου FRAMEBORDER, ωστόσο, το κόκκινο χρώμα ορίζεται για το πλαίσιο. Για το τελευταίο πλαίσιο "c", η τιμή FRAMEBORDER ορίζεται σε Ναι και αντικαθιστά την τιμή που έχει οριστεί στην πρώτη γραμμή. Επομένως, μεταξύ των πλαισίων που ονομάζονται "B" και "C", θα εξακολουθήσει να σχεδιάζεται ένα κόκκινο πλαίσιο με πάχος 10 pixel.

Σημείωση

Εάν τα όρια μεταξύ των πλαισίων δεν σχεδιάζονται, το πρόγραμμα περιήγησης Netscape δεν θα επιτρέψει την αλλαγή μεγέθους των πλαισίων σύροντάς τα με το ποντίκι, ακόμη και χωρίς την παράμετρο NORESIZE. Για τον Microsoft Internet Explorer η κατάσταση είναι διαφορετική.

Σημειώστε ότι τα πλαίσια χωρίς περιθώρια δεν χρησιμοποιούνται πολύ σπάνια. Θα πρέπει να θυμόμαστε ότι η απουσία πλαισίων δεν εμποδίζει την εμφάνιση ράβδων κύλισης (Εικ. 5.14).

Ρύζι. 5.14.Γραμμές κύλισης σε πλαίσιο χωρίς περιθώρια

Δυνατότητες προγράμματος περιήγησης Microsoft Internet Explorer

Το πρόγραμμα περιήγησης Microsoft Internet Explorer σάς επιτρέπει να χρησιμοποιείτε την παράμετρο FRAMEBORDER για τους ίδιους σκοπούς που περιγράφονται παραπάνω, αλλά δεν σας επιτρέπει να ορίσετε το χρώμα και το πάχος των πλαισίων. Ωστόσο, μόνο η αριθμητική τιμή "O" μπορεί να χρησιμοποιηθεί ως τιμή για την παράμετρο FRAMEBORDER για την ακύρωση του σχεδίου ενός πλαισίου ή μια μη μηδενική αριθμητική τιμή για τη σχεδίαση ενός πλαισίου.

Η διαφορά στους κανόνες για τη ρύθμιση των τιμών της παραμέτρου FRAMEBORDER για διαφορετικά προγράμματα περιήγησης είναι πολύ δυσάρεστη. Δοκιμάστε, για παράδειγμα, να ορίσετε FRAMEBORDER=Ναι. Αυτή η καταχώρηση είναι σωστή για το Netscape, αλλά για τον Microsoft Internet Explorer θα έχει ως αποτέλεσμα την απουσία πλαισίου. Το προηγούμενο παράδειγμα (Εικ. 5.13) όταν προβάλλεται στον Microsoft Internet Explorer θα παρουσιαστεί χωρίς πλαίσιο.

Συμβουλή

Συνιστάται να γράφετε πάντα την τιμή της παραμέτρου FRAMEBORDER σε αριθμητική μορφή, για παράδειγμα, FRAMEBORDER=0. Αυτό ακολουθεί τους κανόνες για τη σύνταξη μιας παραμέτρου για τον Microsoft Internet Explorer, αλλά παραβιάζει τους κανόνες για το Netscape (αν και γίνεται σωστά αντιληπτό από το τελευταίο).

Σημείωση

Εάν τα καρέ μεταξύ των πλαισίων δεν σχεδιάζονται, τότε το πρόγραμμα περιήγησης Microsoft Internet Explorer (σε αντίθεση με το Netscape), ελλείψει της παραμέτρου NORESIZE, θα σας επιτρέψει να «αγγίξετε» το μέγεθος των πλαισίων σύροντας τα καρέ με το ποντίκι. Μπορείτε να βρείτε τη θέση όπου πρέπει να βρίσκεται το πλαίσιο αλλάζοντας το σχήμα του δείκτη του ποντικιού.

Το πρόγραμμα περιήγησης Microsoft Internet Explorer επιτρέπει τη χρήση μιας πρόσθετης παραμέτρου FRAMESPACING που είναι γραμμένη στην ετικέτα , η τιμή του οποίου καθορίζει τον αριθμό των pixel μεταξύ των πλαισίων που θα μείνουν κενά.

Ας δώσουμε ένα παράδειγμα, το αποτέλεσμα εμφάνισης του οποίου φαίνεται στο Σχ. 5.15.

Αλλαγή της απόστασης μεταξύ των πλαισίων

Ρύζι. 5.15.Κενός χώρος μεταξύ πλαισίων στον Microsoft Internet Explorer

Σημείωση

Δυστυχώς, πολλές περιγραφές γλώσσας HTML λανθασμένα αναφέρουν ότι η παράμετρος FRAMESPACING πρέπει να χρησιμοποιείται στην ετικέτα . Ο Microsoft Internet Explorer επιτρέπει μόνο τη χρήση αυτής της παραμέτρου σε μια ετικέτα .

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

Το πρόγραμμα περιήγησης Microsoft Internet Explorer επιτρέπει τη χρήση μιας μοναδικής ετικέτας , που υλοποιεί την έννοια των αιωρούμενων πλαισίων. Σε αντίθεση με τα κανονικά πλαίσια, οι περιγραφές των αιωρούμενων πλαισίων μπορούν να εμφανίζονται στο κείμενο ενός κανονικού εγγράφου HTML. Προγράμματα περιήγησης που δεν υποστηρίζουν την ετικέτα <IFRAME>, αντί για το πλαίσιο θα εμφανίζει οποιαδήποτε πληροφορία έχει καταγραφεί μεταξύ <IFRAME>Και. Στο TEGS Χρησιμοποιούνται ακριβώς οι ίδιες παράμετροι όπως στην ετικέτα που περιγράφει τα κανονικά πλαίσια <FRAME>. Η μόνη εξαίρεση είναι η παράμετρος NORESIZE, η οποία δεν έχει νόημα επειδή το μέγεθος των αιωρούμενων πλαισίων δεν μπορεί να αλλάξει από τον χρήστη κατά την προβολή του εγγράφου σε καμία περίπτωση.</p> <p>Επιπλέον, οι ακόλουθες πρόσθετες παράμετροι μπορούν να χρησιμοποιηθούν για τον ορισμό της θέσης και του μεγέθους του αιωρούμενου πλαισίου στο έγγραφο: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Ο σκοπός και η σειρά χρήσης τους συμπίπτουν με τις αντίστοιχες παραμέτρους για τις ενσωματωμένες εικόνες, οι οποίες καθορίζονται από την ετικέτα <IMG>. </p> <p>Ακολουθεί ένα παράδειγμα χρήσης αιωρούμενων πλαισίων:</p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Χρησιμοποιώντας αιωρούμενα πλαίσια</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><CEMTEK><H2>Ένα παράδειγμα χρήσης της έννοιας των αιωρούμενων πλαισίων</H2></СЕМТЕК> </p> <p><IFRAME SRC=float.htm NAME="A" HEIGHT=300 WIDTH=40% HSPACE=10 SCROLLING=YES ALIGN=RIGHT> </p> <p>Το πρόγραμμα περιήγησής σας δεν επιτρέπει την εμφάνιση αιωρούμενων πλαισίων</p> <p>

Ο Microsoft Internet Explorer είναι το πρώτο πρόγραμμα περιήγησης (και μέχρι στιγμής το μοναδικό) που υποστηρίζει τα λεγόμενα «αιωρούμενα» πλαίσια.

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

Το πλαίσιο στα δεξιά αυτού του κειμένου τοποθετείται στη σελίδα χρησιμοποιώντας μια ειδική ετικέτα . Η δεξιά στοίχιση καθορίστηκε κατά τη δημιουργία του πλαισίου.</p> <p></BODY> </p> <p></HTML> </p> <p>Το αποτέλεσμα της εμφάνισης αυτού του παραδείγματος από το πρόγραμμα περιήγησης Microsoft Internet Explorer φαίνεται στην Εικ. 5.16. Τα προγράμματα περιήγησης που δεν υποστηρίζουν την έννοια των αιωρούμενων πλαισίων, για αυτό το παράδειγμα, αντί να εμφανίζουν τα περιεχόμενα του εγγράφου float.htm, θα εμφανίζουν το κείμενο "Το πρόγραμμα περιήγησής σας δεν επιτρέπει την εμφάνιση αιωρούμενων πλαισίων".</p> <span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/frames/20.gif' width="100%" loading=lazy loading=lazy></span> <p><i><span><b>Ρύζι. 5.16.</b>Κυμαινόμενο πλαίσιο στον Microsoft Internet Explorer</span> </i></p> <p>Σημειώστε ότι η έννοια των αιωρούμενων πλαισίων είναι παρόμοια σε ιδεολογία με ενσωματωμένες εικόνες ή πίνακες. Εδώ, ένα άλλο έγγραφο HTML είναι πλήρως ενσωματωμένο στην επιθυμητή θέση στο έγγραφο HTML.</p> <p><i><b>Συμβουλή</b> </i></p> <p><i> <span>Επί του παρόντος, η χρήση αιωρούμενων πλαισίων περιορίζεται σε ένα μόνο πρόγραμμα περιήγησης - Microsoft Internet Explorer έκδοση 3.0 και νεότερη. Λάβετε υπόψη ότι οι χρήστες άλλων προγραμμάτων περιήγησης (ιδιαίτερα του Netscape) δεν θα μπορούν να δουν τα περιεχόμενα των iframes.</span> </i></p> <p>Εργαλεία για τη δημιουργία εγγράφων που περιέχουν πλαίσια</p> <p>Ένα έγγραφο HTML που περιέχει πλαίσια, όπως κάθε άλλο έγγραφο, μπορεί να δημιουργηθεί ή να επεξεργαστεί χειροκίνητα χρησιμοποιώντας οποιοδήποτε διαθέσιμο πρόγραμμα επεξεργασίας κειμένου. Οι περισσότεροι εξειδικευμένοι επεξεργαστές HTML είτε δεν έχουν δυνατότητες οπτικής πλαισίωσης είτε έχουν πολύ περιορισμένες δυνατότητες. Υπάρχουν αρκετοί ειδικοί επεξεργαστές που επικεντρώνονται στη δημιουργία πλαισίων. Ας περιγράψουμε εν συντομία τις δυνατότητες ορισμένων από αυτά.</p> <p><b><span>Πρόγραμμα επεξεργασίας πλαισίων FrameGang</span> </b></p> <p>Ένας τέτοιος επεξεργαστής είναι το βοηθητικό πρόγραμμα FrameGang, που αναπτύχθηκε από την αυστραλιανή εταιρεία Sausage Software, η οποία είναι περισσότερο γνωστή για τον δημοφιλή επεξεργαστή HTML HotDog.</p> <p>Μπορείτε να λάβετε πληροφορίες σχετικά με αυτό το προϊόν λογισμικού στη διεύθυνση <b>http://www.sausage.com</b>, καθώς και από τη συλλογή προϊόντων λογισμικού για το Διαδίκτυο (στο <b>http://www.tucows.com</b>ή οποιονδήποτε άλλον από πολλές δεκάδες διακομιστές mirror διασκορπισμένους σε όλο τον κόσμο).</p> <p>Το βοηθητικό πρόγραμμα FrameGang είναι μια προσθήκη σε οποιοδήποτε πρόγραμμα επεξεργασίας HTML ή κανονικό πρόγραμμα επεξεργασίας κειμένου που εκτελείται στο περιβάλλον των Windows, το οποίο σας επιτρέπει να σχεδιάσετε οπτικά την απαραίτητη δομή πλαισίου και στη συνέχεια να δημιουργήσετε τον αντίστοιχο κώδικα HTML. Ο κώδικας HTML που προκύπτει μπορεί να μεταφερθεί στον επεξεργαστή HTML μέσω του προχείρου των Windows (Clipboard). Το πρόγραμμα FrameGang θα σας επιτρέψει να δημιουργήσετε γρήγορα την επιθυμητή δομή πλαισίου.</p> <p>Ας δούμε τις δυνατότητες του προγράμματος. Μετά την εγκατάσταση αυτού του προγράμματος στα Windows και την εκκίνησή του, σας ζητείται να επιλέξετε μία από τις δύο πιθανές δομές πλαισίων του πρώτου (ανώτερου) επιπέδου - στηλοειδή διάταξη πλαισίων (Στήλες) ή κατά σειρά (Σειρά) και επίσης να προσδιορίσετε τον αριθμό τους. Στο μέλλον, καθένα από τα πλαίσια πρώτου επιπέδου μπορεί, εάν είναι απαραίτητο, να χωριστεί σε πολλά πλαίσια δεύτερου επιπέδου. Δεν παρέχεται μεγαλύτερος αριθμός επιπέδων πλαισίου, αλλά αυτό δεν αποτελεί σημαντικό περιορισμό, καθώς στην πράξη χρησιμοποιούνται σπάνια περισσότερα από δύο επίπεδα.</p> <p>Για παράδειγμα, ας επιλέξουμε τέσσερα πλαίσια διατεταγμένα σε στήλες. Στη συνέχεια, θα πρέπει να δημιουργήσετε μια δομή πλαισίων δεύτερου επιπέδου, η οποία γίνεται με το διαχωρισμό των υπαρχόντων πλαισίων προς την αντίθετη κατεύθυνση. Για αυτό το παράδειγμα, τα πλαίσια μπορούν να χωριστούν μόνο οριζόντια. Η δημιουργία πλαισίων δεύτερου επιπέδου πραγματοποιείται στο στοιχείο μενού Προσθήκη, η υλοποίηση του οποίου προσθέτει το επόμενο πλαίσιο στο τρέχον.</p> <p>Λάβετε υπόψη ότι οι αστείες εικόνες σε κορνίζες δεν έχουν κανένα νόημα και χρησιμεύουν μόνο για να γεμίσουν τον κενό χώρο. Το σχέδιό τους μπορεί να ακυρωθεί στο μενού Επιλογές. Σημειώνουμε επίσης ότι το ίδιο το όνομα του κατασκευαστή (λουκάνικο - λουκάνικα) και το όνομα ορισμένων προϊόντων λογισμικού του (HotDog - δεν χρειάζεται μετάφραση) καθόρισαν το στυλ διεπαφής αυτού του πακέτου - σε πολλά στοιχεία μενού υπάρχει μια εικόνα λουκάνικων .</p> <p>Αφού καθορίσετε τη δομή των πλαισίων, πρέπει να ορίσετε τα μεγέθη τους. Αυτό γίνεται απλά μετακινώντας τα περιγράμματα των πλαισίων με το ποντίκι με τον ίδιο τρόπο που γίνεται για την αλλαγή μεγέθους των παραθύρων των Windows. Οι καθορισμένες διαστάσεις για το τρέχον πλαίσιο εμφανίζονται ως ποσοστό στα παράθυρα που ονομάζονται Πλάτος και Ύψος. Εάν χρειάζεται να ορίσετε μεγέθη πλαισίων όχι σε ποσοστά, αλλά σε pixel ή σχετικές μονάδες, πρέπει να αλλάξετε τον κώδικα HTML που προκύπτει με μη αυτόματο τρόπο εκτός του προγράμματος FrameGang.</p> <p>Στη συνέχεια, για κάθε πλαίσιο πρέπει να ορίσετε το όνομά του (Όνομα), το οποίο μπορεί να παραλειφθεί, τη διεύθυνση URL του εγγράφου που είχε αρχικά φορτωθεί σε αυτό το πλαίσιο (URL πλαισίου) και επίσης να επιλέξετε την τιμή της παραμέτρου Περιγράμματος με δυνατότητα αλλαγής μεγέθους και την παράμετρο κύλισης για τα περιεχόμενα του πλαισίου (Frame Scrolling).</p> <p>Ανά πάσα στιγμή, μπορείτε να δείτε τη δομή του πλαισίου που δημιουργείται στο επιλεγμένο εξωτερικό πρόγραμμα περιήγησης χωρίς να φύγετε από το πρόγραμμα FrameGang. Το κουμπί Προεπισκόπηση χρησιμοποιείται για αυτό. Η ρύθμιση του ονόματος του προγράμματος περιήγησης γίνεται στο μενού Επιλογές. Αφού ρυθμίσετε όλες τις παραμέτρους, θα πρέπει να δημιουργήσετε κώδικα HTML που αντιστοιχεί στην επιλεγμένη δομή πλαισίου, ο οποίος θα γραφτεί στο πρόχειρο των Windows (κουμπί μεταγλώττισης HTML). Ο κώδικας που προκύπτει μπορεί να επικολληθεί από το πρόχειρο στην επιθυμητή θέση στο αρχείο HTML όταν εργάζεστε σε οποιοδήποτε πρόγραμμα επεξεργασίας.</p> <p>Τα κουμπιά Αποθήκευση και Άνοιγμα αρχείου σάς επιτρέπουν να αποθηκεύετε και να διαβάζετε το αρχείο μόνο σε ειδική κωδικοποίηση που είναι ειδική για το πρόγραμμα FrameGang και δεν προορίζεται για άλλη χρήση.</p> <p>Παρακάτω είναι ο κώδικας HTML που δημιουργήθηκε από το FrameGang για το παράδειγμα που περιγράφεται:</p> <p><FRAMESET COLS="25%,25%,25%,25%"> </p> <blockquote> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_A"> </p> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_B"> </p> <p><FRAMESET ROWS="50%,50%"> </p> <blockquote> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_C1"> </p> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_C2"> </p> </blockquote> <p></FRAMESET> </p> <p><FRAME SCROLLING=AUTO SRC="Empty.htm" NAME="Frame_D"> </p> </blockquote> <p></FRAMESET> </p> <p>Για να αποκτήσετε ένα σωστό έγγραφο HTML, αρκεί να περικλείσετε τον κώδικα που προκύπτει μεταξύ των ετικετών <HTML>Και</HTML>. Μπορείτε να προσθέσετε μια ενότητα κεφαλίδας εγγράφου <HEAD>, όπου μπορείτε να ορίσετε τα απαραίτητα δεδομένα, για παράδειγμα, τον τίτλο του εγγράφου (θυμηθείτε ότι ο τίτλος του εγγράφου είναι γραμμένος μεταξύ των ετικετών <TITLE>Και</TITLE>). Σημειώστε ότι τα σύγχρονα προγράμματα περιήγησης μπορούν να λειτουργήσουν σωστά ακόμα κι αν λείπουν ορισμένες από τις απαραίτητες ετικέτες. Εάν ο παραπάνω κώδικας HTML αποθηκευτεί ως αρχείο με την κατάλληλη επέκταση, ακόμη και χωρίς την προσθήκη ετικετών, τότε τόσο το Netscape Navigator όσο και ο Microsoft Internet Explorer θα μπορούν να εμφανίσουν σωστά το έγγραφο.</p> <p>Το πρόγραμμα FrameGang σας επιτρέπει να σχεδιάζετε οπτικά πλαίσια, είναι αρκετά βολικό και εύκολο στη χρήση, αλλά δεν είναι χωρίς κάποια μειονεκτήματα. Συγκεκριμένα, δεν υπάρχει τρόπος να καθορίσετε το μέγεθος των πλαισίων γράφοντας τους απαιτούμενους αριθμούς στα παράθυρα Width και Height, καθώς εμφανίζουν μόνο τα μεγέθη που έχουν οριστεί όταν μετακινείτε τα όρια του πλαισίου με το ποντίκι. Οι γενικά αποδεκτές παράμετροι πλαισίου MARGINWIDTH και MARGINHEIGHT δεν έχουν οριστεί. Δεν υπάρχει τρόπος να γράψετε ένα αρχείο σε μορφή κειμένου στο δίσκο, γεγονός που καθιστά αδύνατη τη χρήση αυτού του προγράμματος εκτός σύνδεσης.</p> <p><b><span>Frame-It πρόγραμμα επεξεργασίας πλαισίων</span> </b></p> <p>Ένας άλλος εξειδικευμένος επεξεργαστής πλαισίων είναι το Frame-It, πληροφορίες για το οποίο μπορείτε να βρείτε στη διεύθυνση:</p> <p><b><span>http://www.iinet.net.au/~bwh/frame-it.html</span> </b></p> <p>Η εργασία με αυτό το πρόγραμμα είναι από πολλές απόψεις παρόμοια με την προηγούμενη. Πρώτα πρέπει να προσδιορίσετε τη βασική δομή των πλαισίων και τον αριθμό τους. Στη συνέχεια, κάθε πλαίσιο, εάν είναι απαραίτητο, χωρίζεται σε πολλά, σχηματίζοντας δομές δεύτερου επιπέδου. Όπως και το προηγούμενο πρόγραμμα, ο αριθμός των επιπέδων ένθεσης πλαισίων περιορίζεται σε δύο.</p> <p>Για κάθε πλαίσιο, ρυθμίζονται όλες οι απαραίτητες παράμετροι συμπληρώνοντας τα κατάλληλα πεδία. Σε αντίθεση με το προηγούμενο πρόγραμμα, είναι δυνατό να ορίσετε τις τιμές των παραμέτρων MARGINWIDTH και MARGINHEIGHT. Επιπλέον, έχει εισαχθεί η σημαία Invisible Frame Borders, η οποία, όταν οριστεί, δημιουργεί το ακόλουθο τμήμα κώδικα:</p> <p>FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0".</p> <p>Αφού ρυθμίσετε τις απαιτούμενες παραμέτρους πλαισίου, μπορείτε να αποθηκεύσετε τον κώδικα HTML που δημιουργήθηκε σε ένα αρχείο ή να τον γράψετε στο πρόχειρο των Windows. Ο κώδικας που δημιουργείται θα περιέχει όχι μόνο μια περιγραφή της δομής του πλαισίου, αλλά και μια ετικέτα έναρξης <HTML>, καθώς και μερικές ετικέτες <NOFRAMES>Και</NOFRAMES>, μεταξύ των οποίων γράφονται πληροφορίες, που προορίζονται για προγράμματα περιήγησης που δεν εμφανίζουν πλαίσια.</p> <p>Για ένα συγκεκριμένο παράδειγμα, θα δημιουργηθεί ο ακόλουθος κώδικας:</p> <p><html> </p> <p><! --- Generated using Frame-it v1.21 --- > </p> <p><! --- http://www.iinet.net.au/~bwh/frame-it.html ---> </p> <p><frameset cols="25%,25%, 25%, 25%" FRAMEBORDER="NO" BORDER="0" </p> <p>FRAMESACING="0"></p> <p><frame name="Frame_1" src="Empty.htm"> </p> <p><frame name="Frame_2" src="Empty.htm"> </p> <p><frameset rows="50%,50%"> </p> <p><frame name="Frame_3" src="Empty.htm"> </p> <p><frame name="Frame_5" src="Enipty.htm"> </p> <p></frameset> </p> <p><frame name="Frame_4" src="Empty.htm"> </p> <p></frameset> </p> <p><noframes> </p> <p><body> </p> <p>με δομή πλαισίου</p> <p></noframes> </p> <p>Εάν σε αυτό το παράδειγμα καταργήσετε την επιλογή του πλαισίου ελέγχου Invisible Frame Borders, ο κωδικός που δημιουργήθηκε θα αλλάξει σημαντικά:</p> <p><html> </p> <p><! --- Generated using Frame-it vl.21 --- > </p> <p><! --- http://www.iinet.net.au/~bwh/frame-it.html ---> </p> <p><frameset cols="25%,25%,25%,25%"> </p> <p>scrolling=auto noresize></p> <p>scrolling=auto noresize></p> <p><frameset rows="50%,50%"> </p> <p>scrolling=auto noresize></p> <p>scrolling=auto noresize></p> <p></frameset> </p> <p>scrolling=auto noresize></p> <p></frameset> </p> <p><noframes> </p> <p><body> </p> <p>Το πρόγραμμα περιήγησής σας δεν μπορεί να εμφανίσει έγγραφα</p> <p>με δομή πλαισίου</p> <p></noframes> </p> <p>Πληροφορίες σχετικά με τη χρήση πλαισίων στο WWW</p> <p>Για πληροφορίες σχετικά με τα πλαίσια, μπορείτε να ανατρέξετε στις ακόλουθες διευθύνσεις στο WWW:</p> <p>http://www.spunwebs.com/sites2c/frmtutor.html</p> <p>http://union.ncsa.uiuc.edu/HyperNews/get/www/html/guides.html</p> <p>http://cox.asu.edu/Trial/faq/webfaqs/frame/</p> <p>http://www.netlingo.com/more/framestarget.html</p> <p>http://www.aubg.bg/beast/students/raduluc/teach/fr/</p> <p>http://www.as.net/frame/</p> <p>http://www.cqi.com/~pmurphey/instruction/</p> <p>http://www.iwaynet.net/~rtyler/htmltutorial/frames.html</p> <p>http://edbo.com/frames/</p> <p>http://bela.fei.tuke.sk/netscape/frames/</p> <p>http://www.newbie.net/frames/2ed/rnenu.htmtfcontents</p> <p>http://infoserver.etI.vt.edu/coe/COE_Students/laughon/frame.html</p> <p>http://www.htmlhelp.com/frames/syntax/</p> <p>http://www.woodhill.co.uk/html/</p> <p>http://www.htmlhelp.com/design/frames/</p> <p>Λοιπόν, κουφώματα... σε τι χρησιμεύουν και τι οφέλη παρέχουν; Θα προσπαθήσω να μιλήσω για αυτό σε αυτό το κεφάλαιο, και φυσικά για το πώς να τα εφαρμόσω και να εργαστώ μαζί τους..</p> <p>Συχνά, κατά τη δημιουργία ενός ιστότοπου, καθίσταται απαραίτητο να ανοίγετε πολλά έγγραφα HTML ταυτόχρονα σε ένα παράθυρο του προγράμματος περιήγησης... έτσι δημιουργήθηκαν πλαίσια για τον καθορισμό περιοχών εργασίας για κάθε έγγραφο. Επιπλέον, τα πλαίσια είναι ένα καλό εργαλείο με το οποίο μπορείτε να κάνετε διάταξη σελίδας· χρησιμεύουν ως μια άξια «εναλλακτική» στην πινακοειδή μέθοδο διάταξης σελίδας... Βάζω τη λέξη «εναλλακτικό» σε εισαγωγικά γιατί αυτός είναι ένας εντελώς διαφορετικός τρόπος της κατασκευής μιας ιστοσελίδας με τα δικά της πλεονεκτήματα και μειονεκτήματα και είναι αρκετά δύσκολο να τη συγκρίνουμε με την μέχρι τότε γνωστή κατασκευή του ιστότοπου.. αλλά πρώτα πρώτα..</p> <p>Ας ξεκινήσουμε; Ας υποθέσουμε ότι πρέπει να ανοίξουμε τρία έγγραφα HTML ταυτόχρονα σε ένα παράθυρο του προγράμματος περιήγησης και να τα τακτοποιήσουμε, για παράδειγμα, με αυτόν τον τρόπο:</p> <p>Τι χρειαζόμαστε για αυτό; Αρχικά, φυσικά, πρέπει να δημιουργήσουμε τρία ξεχωριστά έγγραφα html τα οποία θα ανοίξουμε σε ένα παράθυρο. Αφήστε το πρώτο έγγραφο να περιέχει μια γραφική εικόνα και να λειτουργεί ως λογότυπο, ας το ονομάσουμε logotype.html, το δεύτερο έγγραφο θα είναι κάποιο περιεχόμενο.. ας το ονομάσουμε μενού .html, και το τρίτο είναι ένα έγγραφο με πολύ κείμενο. text.html. Φυσικά, μπορείτε να βρείτε τα δικά σας ονόματα, καθώς και τα περιεχόμενα των εγγράφων, αλλά προς το παρόν είναι καλύτερα να αντιγράψετε το δικό μου... θα είναι πιο βολικό τόσο για εμένα όσο και για εσάς.</p> <p>Έτσι, υπάρχουν τρία αρχεία logotype.html, menu.html και text.html.. τα οποία πρέπει να τοποθετήσουμε κάτω από μια στέγη, αλλά δεν έχουμε ακόμη στέγη..</p> <p>Γράφουμε “roof”, το κύριο έγγραφο στο οποίο θα συνδέσουμε τα αρχεία μας. Εφόσον θα είναι το κύριο, του δίνουμε το όνομα index.html.</p> <p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <body> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html></p> <p>Εδώ είναι η δομή του εγγράφου που είναι οικείο σε εμάς, το οποίο μασήσαμε στην αρχή της εκπαίδευσής μας.Τα καρέ σπάνε τα υπάρχοντα στερεότυπα! Η δομή του πλαισίου εγγράφου μοιάζει με αυτό:</p> <p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br><b><frameset> </b> <br><b></frameset> </b> <br> </html></p> <p>Χωρίς ετικέτα <b><body> </b>αντισταθμίζει τη νέα ετικέτα <b><frameset> </b>- τοποθετήστε ένα πλαίσιο ή ένα σετ πλαισίων... με αυτόν τον τύπο θα εργαστούμε στην πραγματικότητα περαιτέρω.</p> <p>Ετικέτα <b><frameset> </b>έχει ιδιότητες <b>σειρές</b>Και <b>cols</b>- αυτά τα χαρακτηριστικά λένε στο πρόγραμμα περιήγησης πώς να τοποθετεί πλαίσια στο παράθυρο του προγράμματος περιήγησης</p> <b>σειρές</b>- οριζόντια <b>cols</b>- κάθετα <br><br><img src='https://i0.wp.com/webremeslo.ru/graphics/win1.gif' width="100%" loading=lazy loading=lazy><p>Στην περίπτωσή μας χρειαζόμαστε οριζόντια τοποθέτηση πλαισίων... οπότε γράφουμε ως εξής:</p> <p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset <b>rows="15%,15%,70%"</b>> <br> </frameset> <br> </html></p> <p>Τα ποσοστά μετά το σύμβολο ίσου δεν είναι τίποτα άλλο από τα μεγέθη των παραθύρων του πλαισίου μας σε ένα μεγάλο παράθυρο του προγράμματος περιήγησης· υποτίθεται ότι τοποθετούμε τρία παράθυρα - επομένως, υπάρχουν επίσης τρεις τιμές που χωρίζονται με κόμματα. Θυμηθείτε πώς ορίζουμε τα μεγέθη κελιών για τον πίνακα, η ίδια αρχή ισχύει και εδώ. Όπως και στην περίπτωση των κελιών πίνακα, τα μεγέθη πλαισίων μπορούν να καθοριστούν ως ποσοστό της συνολικής επιφάνειας και σε pixel.</p> <p>Ακολουθούν μερικά παραδείγματα γραφής: <br><b><frameset rows="15%,15%,70%"> </b>- αυτή η καταχώρηση υποδεικνύει ότι θα υπάρχουν τρία οριζόντια παράθυρα όπου το τελευταίο θα καταλαμβάνει το 70% της περιοχής του παραθύρου του προγράμματος περιήγησης και τα δύο πρώτα θα καταλαμβάνουν το 15%. <br><b><frameset cols ="200,240,200"> </b>- εδώ τρία παράθυρα βρίσκονται κάθετα, το πλάτος των οποίων υποδεικνύεται σε pixel. <br><b><frameset rows="100,*,180"> </b>- μια τέτοια καταχώρηση σημαίνει ότι το πρώτο και το τρίτο παράθυρο θα έχουν πλάτος 100 και 180 pixel, αντίστοιχα, και το δεύτερο πλαίσιο θα καταλαμβάνει ολόκληρη την υπόλοιπη περιοχή.</p> <p>Τελειώσαμε με την τοποθέτηση των εγγράφων, τώρα το μόνο που μένει είναι να τα συνδέσουμε και να απολαύσουμε το πρώτο αποτέλεσμα..</p> <p>Ετικέτα <b><frame> </b>και την ιδιότητά του <b>src</b>θα υποδείξει στο πρόγραμμα περιήγησης τη διαδρομή προς το έγγραφο html που πρέπει να ανοίξει στον χώρο που προβλέπεται για αυτό. Έχουμε τρία ξεχωριστά έγγραφα logotype.html, menu.html και text.html, τώρα πρέπει να καθορίσουμε μια διαδρομή για το καθένα, που είναι αυτό που κάνουμε στην πραγματικότητα. (Υποθέτω ότι και τα τέσσερα αρχεία βρίσκονται στον ίδιο φάκελο και οι διαδρομές προς αυτά έχουν την απλούστερη σημείωση όπως: <b><frame src="logotype.html"> </b>)</p> <p>αρχείο index.html <br> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset rows="15%,15%,70%"> <br><b><frame src="logotype.html"> </b> <br><b><frame src="menu.html"> </b> <br><b><frame src="text.html"> </b> <br> </frameset> <br> </html> <br>Αρχείο logotype.html <br> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <body> <br> <img src='https://i0.wp.com/logotype.jpg' height="120" width="800" loading=lazy loading=lazy> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br>Μενού αρχείου.html <br> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <body bgcolor="#e8e8e8" background="fon1.jpg"> <br> <font face="Monotype Corsiva" size="6"color="#ff0000">Μενού:</font><br> <font face="Comic Sans MS" size="3"> <br>Σούπα Champignon <br>Φασόλια σε κατσαρόλα, ιταλικού στυλ <br>Αυστραλιανή καλοκαιρινή σαλάτα <br> ... ... ... <br> </font> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br>Κείμενο αρχείου.html <br> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <body bgcolor="#f5f5f5"> <br> <center><font face="Comic Sans MS" size="3">Σούπα Champignon</font></center> <br> <br>πολύ κείμενο.. <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br></p> <p>Σε αυτό το παράδειγμα, δημοσίευσα και τα τέσσερα έγγραφα HTML όπου το index.html είναι το κύριο και τα άλλα τρία είναι προσθήκες, καθεμία από τις οποίες, καταρχήν, μπορεί να λειτουργήσει αυτόνομα και να περιέχει οτιδήποτε, εικόνες, πίνακες, κείμενα, συνδέσμους .. Το έκανα Αυτό είναι για να σας δώσω μια κατανόηση της αρχής της εργασίας με κουφώματα. Σε περαιτέρω παραδείγματα, θα δημοσιεύσω μόνο το αρχείο κεφαλής με πλαίσια (διαφορετικά καταλαμβάνουν πολύ χώρο στη σελίδα) και ξέρετε ότι έχω "κάπου εκεί έξω" όλα τα άλλα αρχεία που περιέχουν γραφικά, κείμενα, ίσως κάτι αλλιώς.. καλά, μην μένεις πίσω μου, σιγά σιγά επεξεργαστείτε τις δικές σας σελίδες για τον μελλοντικό ιστότοπο εκπαίδευσης.. Δεν ξέρω για τι θα γράψετε τη δική σας, αλλά υποσχέθηκα να βοηθήσω ένα κορίτσι να γράψει μια ειδική ιστοσελίδα στη μαγειρική..)) έτσι αποφάσισα, ας πούμε, να βάλω στο στόχαστρο δύο πουλιά με μια πέτρα.. το λαγουδάκι και η ιστοσελίδα..)) κάπως έτσι..))</p> <p>Στο παραπάνω παράδειγμα, τοποθετήσαμε όλα τα παράθυρα οριζόντια, αλλάζοντας το χαρακτηριστικό <b>σειρές</b>επί <b>cols</b>μπορείτε να τα τακτοποιήσετε κάθετα. Τι γίνεται όμως αν χρειαστεί να τοποθετήσετε τα παράθυρά μας;</p> <br>σαν αυτό;: ή έτσι;: ή ακόμα και έτσι;: <br><br><img src='https://i1.wp.com/webremeslo.ru/graphics/win2.gif' width="100%" loading=lazy loading=lazy><p>Υπάρχει έξοδος. Ας δούμε παραδείγματα.</p> <p>Ας ξεκινήσουμε με την πρώτη περίπτωση... τι βλέπουμε; Και βλέπουμε δύο γραμμές, όπου η δεύτερη χωρίζεται σε δύο στήλες.</p> <p>Και τώρα, με τη σειρά:</p> <b><frameset rows="20%,80%"> </b> <i>- χωρίστε το παράθυρο του προγράμματος περιήγησης σε δύο γραμμές</i><br><b><frame src="logotype.html"> </b><i>- φορτώστε το λογότυπό μας στην πρώτη γραμμή</i><br><b><frameset cols="30%,70%"> </b><i>- και χωρίστε τη δεύτερη σειρά σε δύο στήλες</i><br><b><frame src="menu.html"> </b> <i>- στο πρώτο θα υπάρχει μενού</i><br><b><frame src="text.html"> </b><i>- και στο δεύτερο υπάρχει πολύ κείμενο</i><br><b></frameset> </b> <i>- κλείστε την ετικέτα διαίρεσης στήλης</i><br><b></frameset> </b> <i>- κλείστε την ετικέτα διαίρεσης γραμμής</i><br><p>Γενικά, είναι λάθος να λέμε στήλες και σειρές, αφού τα πλαίσια δεν έχουν καμία σχέση με πίνακες εκτός από οπτική ομοιότητα, είναι σωστό να λέμε οριζόντια και κάθετα πλαίσια.. Λοιπόν, το λέω έτσι για να είναι πιο ξεκάθαρα..</p> <p>Εντάξει, ας δούμε ένα παράδειγμα:</p> <p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset rows="15%,85%"> <br> <frame src="logotype.html"> <br> <frameset cols="20%,80%"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> </html> <br></p> <p>Στη δεύτερη περίπτωση, έχουμε δύο στήλες στις οποίες η δεύτερη χωρίζεται σε δύο γραμμές, οπότε θα γράψουμε ως εξής:</p> <b><frameset cols="30%,70%"> </b> <i>- χωρίστε το παράθυρο σε δύο στήλες</i><br><b><frame src="menu.html"> </b> <i>- το πρώτο θα περιέχει το περιεχόμενο</i><br><b><frameset rows="20%,80%"> </b> <i>- και χωρίστε το δεύτερο σε δύο γραμμές</i><br><b><frame src="logotype.html"> </b><i>- λογότυπο</i><br><b><frame src="text.html"> </b> <i>- και το κύριο κείμενο</i><br><b></frameset> </b> <i>- κλείστε το τμήμα γραμμής</i><br><b></frameset> </b><i>- κλείστε τη διαίρεση σε στήλες</i><br><p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset cols="20%,80%"> <br> <frame src="menu.html"> <br> <frameset rows="15%,85%"> <br> <frame src="logotype.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> </html> <br></p> <p>Η τρίτη περίπτωση είναι λίγο πιο περίπλοκη, αλλά δεν πρέπει να τη φοβάστε... ειδικά επειδή προσωπικά επέλεξα αυτό το είδος κατασκευής για έναν ιστότοπο σχετικά με τη μαγειρική τέχνη· θα εξηγήσω το γιατί παρακάτω. Τι έχουμε? τρεις στήλες και η δεύτερη στήλη περιέχει ουσιαστικά την πρώτη μας περίπτωση..</p> <b><frameset cols="*,800,*"> </b> <i>- χωρίστε το παράθυρο σε τρεις στήλες (σημειώστε ότι η δεύτερη στήλη καταλαμβάνει ακριβώς 800 pixel και οι δύο εξωτερικές δεν έχουν ακριβές μέγεθος και θα χωρίσουν τον υπόλοιπο χώρο στη μέση)</i><br><b><frame src="dekor.html"> </b> <i>-στην πρώτη στήλη φορτώνουμε ένα έγγραφο html που θα επιτελεί καθαρά διακοσμητική λειτουργία</i><p><b><frameset rows="15%,85%"> </b> -<br><b><frame src="logotype.html"> </b> -<br><b><frameset cols="20%,80%"> </b> - <i>Στη δεύτερη στήλη εισάγουμε την «πρώτη περίπτωση» μας</i><br><b><frame src="menu.html"> </b> -<br><b><frame src="text.html"> </b> -<br><b></frameset> </b> -<br><b></frameset> </b> -</p><p><b><frame src="dekor.html"> </b><i>- στην τρίτη στήλη φορτώνουμε το ίδιο αρχείο με διακοσμητικά</i><br><b></frameset> </b><i>- slam</i><br></p><p>Κοιτάξτε το παράδειγμα και στη συνέχεια θα εξηγήσω γιατί επέλεξα τη διαδρομή των πέντε παραθύρων</p> <p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html"> <br> <frameset rows="120,*"> <br> <frame src="logotype.html"> <br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html"> <br> </frameset> <br> </html> <br></p> <p>Γιατί λοιπόν πέντε παράθυρα; Θυμάμαι ότι έγραψα ήδη για το γεγονός ότι διαφορετικοί χρήστες του Διαδικτύου έχουν διαφορετικές αναλύσεις στις οθόνες τους και, κατά συνέπεια, σε διαφορετικές οθόνες ο ιστότοπός μας θα φαίνεται διαφορετικός... και αν δεν υπάρχουν συγκεκριμένα μεγέθη, όλα τα σχέδια, τα κείμενα, οι πίνακες θα , όπως λένε, "επιπλέει" για εκείνους τους χρήστες των οποίων οι αναλύσεις οθόνης είναι διαφορετικές από τις δικές σας. Όταν σχεδιάσαμε τον ιστότοπο χρησιμοποιώντας έναν πίνακα, το πρόβλημα με τις διαστάσεις της σελίδας επιλύθηκε με την αντιστοίχιση συγκεκριμένου πλάτους και ύψους σε αυτόν τον πίνακα. Δυστυχώς, αυτό δεν μπορεί να γίνει με πλαίσια... ακόμα κι αν καθορίσετε το πλάτος των πλαισίων εκτός ποσοστά, αλλά σε pixel, εξακολουθεί να είναι η τελευταία στήλη που θα εκτείνεται σε όλο το υπόλοιπο πλάτος του παραθύρου του προγράμματος περιήγησης και η σελίδα, όπως λένε, θα χάσει την "εμπορεύσιμη εμφάνισή" της. Οπότε τι θα έπρεπε να κάνουμε? Πρέπει να καταφύγουμε σε μικρά κόλπα... Ρυθμίζοντας την κεντρική στήλη (στην οποία έχουμε ουσιαστικά ολόκληρη τη σελίδα) με μέγεθος 800 pixel, προσδιορίζουμε μια για πάντα το πλάτος της, και την αδιάστατη πρώτη και τρίτη στήλη, σε Εκτός από τη διακόσμηση, λειτουργούν ως ένα είδος «ελατηρίων» πάνω στα οποία βρίσκεται η κεντρική στήλη. Έτσι, για άτομα με μικρή ανάλυση οθόνης, αυτά τα παράθυρα/πεδία θα είναι στενά και για άτομα με υψηλή ανάλυση, θα είναι φαρδιά, οπότε η κεντρική στήλη δεν θα επηρεαστεί με κανέναν τρόπο και τώρα μπορούμε να τοποθετήσουμε οποιαδήποτε αντικείμενα σε αυτήν με απόλυτη σιγουριά, με ακριβή αναφορά τοπικά, χωρίς να ανησυχούμε για τη μελλοντική τους μοίρα. Συγκρίνετε το πρώτο παράδειγμα, όπου υπάρχουν τρία παράθυρα, και το τρίτο, όπου υπάρχουν ήδη πέντε από αυτά, δεν είναι καλύτερο;</p> <p>Θα τελειώσουμε με την τοποθέτηση και τα μεγέθη των πλαισίων... και έχουμε κολλήσει εδώ και καιρό... πάμε παρακάτω.</p> <h2>Φέρνουμε τα κουφώματα σε μια προσεγμένη εμφάνιση.</h2> <p>Στο τελευταίο μας παράδειγμα, το πρώτο πράγμα που σου τραβάει το μάτι είναι μια ολόκληρη δέσμη ράβδων κύλισης, που είναι εκεί όπου χρειάζονται και όπου δεν χρειάζονται.. Ας τις ξεφορτωθούμε, λοιπόν, μπορείς να τις αφήσεις κάπου.. Αυτό γίνεται χρησιμοποιώντας το χαρακτηριστικό <b>κύλιση</b>- ετικέτα <b><frame> </b>, μπορεί να έχει μία από τις τρεις τιμές:</p> <ul><li><b>όχι</b> </li><li><b>Ναί</b>- να δείχνει πάντα</li><li><b>αυτο</b> </li> </ul><p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" <b>κύλιση = "όχι"</b>> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" <b>κύλιση = "όχι"</b> ><br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" <b>κύλιση = "όχι"</b>> <br> </frameset> <br> </html> <br></p> <p>Τα πεδία πλαισίου ή αλλιώς η απόσταση από τα όρια του πλαισίου στο κείμενο ή την εικόνα, όπως στην περίπτωσή μας, καθορίζονται σε pixel χρησιμοποιώντας χαρακτηριστικά <b>πλάτος περιθωρίου</b>Και <b>ύψος περιθωρίου</b>ετικέτα <b><frame> </b></p> <p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" scrolling="no"> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" scrolling="no" <b>marginwidth="0" marginheight="0"</b>> <br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html" <b>marginwidth="10" marginheight="10"</b>> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no"> <br> </frameset> <br> </html> <br></p> <p>Ας μιλήσουμε λίγο για το πλαίσιο γύρω από τα κουφώματα μας.</p> <p>Αν παρατηρήσατε, στο τελευταίο παράδειγμα, τοποθετώντας τον κέρσορα πάνω από το περίγραμμα του πλαισίου, ο κέρσορας, δηλαδή, παίρνει μια διαφορετική εμφάνιση (αρπάξτε και μετακινήστε) και τώρα αυτό το περίγραμμα μπορεί να συρθεί προς οποιαδήποτε κατεύθυνση κρατώντας το αριστερό κουμπί του ποντικιού. Μερικές φορές αυτή η "κινητικότητα" των ορίων πλαισίου παίζει στα χέρια του webmaster, αλλά πιο συχνά εξακολουθεί να παρεμποδίζει. <b><frame> </b>βρήκε μια ιδιότητα <b>noresize</b></p> <p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" scrolling="no" <b>noresize</b>> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" <b>noresize</b>> <br> <frameset cols="200,600"> <br> <frame src="menu.html" <b>noresize</b>> <br> <frame src="text.html" marginwidth="10" marginheight="10" <b>noresize</b>> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" <b>noresize</b>> <br> </frameset> <br> </html> <br></p> <p>Αλλά αυτό είναι ένα χαρακτηριστικό που μας είναι οικείο εδώ και πολύ καιρό <b>σύνορο</b>ορίζει το πλάτος σε pixel των ίδιων πλαισίων μεταξύ των πλαισίων.. γράφεται μέσα στην ετικέτα <b><frameset> </b>. Το ίδιο με το προηγούμενο νόημα <b>σύνορα = "0"</b>θα μας απαλλάξει εντελώς από τα πλαίσια.</p> <p> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset cols="*,800,*" <b>σύνορα = "0"</b>> <br> <frame src="dekor.html" scrolling="no" noresize> <br> <frameset rows="120,*" <b>σύνορα = "0"</b>> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize> <br> <frameset cols="200,600" <b>σύνορα = "0"</b>> <br> <frame src="menu.html" noresize> <br> <frame src="text.html" marginwidth="10" marginheight="10" noresize> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" noresize> <br> </frameset> <br> </html> <br></p> <h2>Πλαίσια και σύνδεσμοι.</h2> <p>Ήρθε η ώρα να αναβιώσουμε τον ιστότοπό μας με συνδέσμους, αλλά εδώ είναι το πρόβλημα, ο γνωστός συνηθισμένος σύνδεσμος <b>Φασόλια σε κατσαρόλα, ιταλικού στυλ</b>θα ανοίξει αυτό το έγγραφο στο ίδιο πλαίσιο όπου βρίσκεται, στην περίπτωσή μας απευθείας στο πλαίσιο με το περιεχόμενο, και το ίδιο το περιεχόμενο τη στιγμή που κάνετε κλικ σε αυτόν τον σύνδεσμο θα λησμονηθεί. μπορείτε να δείτε το αδέξιο παράδειγμα. Κάντε κλικ σε οποιονδήποτε σύνδεσμο σε αυτό.. Για να μην συμβεί αυτό στο μέλλον, είναι απαραίτητο να υποδείξετε στο πρόγραμμα περιήγησης σε ποιο πλαίσιο θα πρέπει να ανοίξει το έγγραφο που χρειαζόμαστε, εκτός εάν, φυσικά, χρειάζεται πραγματικά να το ανοίξετε στο ίδιο πλαίσιο.</p> <p>Θυμάμαι ότι είχαμε ήδη εξοικειωθεί, στο κεφάλαιο που είναι αφιερωμένο στους συνδέσμους, με τις ιδιότητες <b>όνομα</b>- όνομα και <b>στόχος</b>- στόχος, χρησιμοποιούνται επίσης κατά την εργασία με πλαίσια, ο μηχανισμός έχει αλλάξει ελαφρώς και είναι σχεδόν ο ίδιος. Πρώτα απ 'όλα, στο πλαίσιο στο οποίο θα θέλαμε να ανοίξουμε οποιαδήποτε έγγραφα πρέπει να εκχωρηθεί ένα ατομικό όνομα.</p> <p>είναι γραμμένο έτσι:</p><p> <frame src="text.html" <b>name="osnovnoe"</b>> μπορείς να βρεις οποιοδήποτε όνομα.. το κυριότερο είναι να μην το ξεχάσεις..</p> <p>Είναι γραμμένο έτσι:</p><p>target="osnovnoe"</b>>Φασόλια σε κατσαρόλα, ιταλικού τύπου</p><p>Λοιπόν, νομίζω ότι δεν χρειάζεται να σας εξηγήσω ότι πριν αναφερθείτε σε οποιαδήποτε έγγραφα, πρέπει να τα δημιουργήσετε... στην περίπτωσή μου, τα αρχεία (συνταγές) έχουν τα ονόματα text.html, text1.html, text2.html ...</p> <p>Δείτε το παράδειγμα:</p> <p>αρχείο index.html <br> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <frameset cols="*,800,*" border="0"> <br> <frame src="dekor.html" scrolling="no" noresize> <br> <frameset rows="120,*" border="0"> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize> <br> <frameset cols="200,600" border="0"> <br> <frame src="menu.html" noresize> <br> <frame src="text.html" <b>name="osnovnoe"</b> marginwidth="10" marginheight="10" noresize> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" noresize> <br> </frameset> <br> </html> <br>Μενού αρχείου.html <br> <html> <br> <head> <br> <title>πλαίσια</title> <br> </head> <br> <body bgcolor="#e8e8e8" background="fon1.jpg" link="#b40000" alink="#900000" vlink="#900000"> <br> <font face="Monotype Corsiva" size="6"color="#ff0000">Μενού:</font><hr> <br> <font face="Comic Sans MS" size="3"> <br>target="osnovnoe"</b>>Σούπας Champignon <hr> <br>target="osnovnoe"</b>>Φασόλια σε κατσαρόλα, ιταλικού τύπου <hr> <br>target="osnovnoe"</b>>Αυστραλιανή καλοκαιρινή σαλάτα <hr> <br> ... ... ... <br> </font> <br> <script type="text/javascript">  </script><br> <br> </body> <br> </html> <br></p> <p>Όπως και πριν, το έγγραφο μπορεί να ανοίξει σε ξεχωριστό παράθυρο. Να θυμίσω ότι είναι γραμμένο ως εξής:</p><p>target="_blank"</b>>Φασόλια σε κατσαρόλα, ιταλικού τύπου</p><p>Ή εκχωρώντας το χαρακτηριστικό <b>στόχος</b>έννοια <b>_μπλουζα</b>ανοίξτε το στο ίδιο παράθυρο του προγράμματος περιήγησης, αλλά σε πλήρη οθόνη.. "μηδενίζοντας" ό,τι υπάρχει.. γραμμένο ως εξής:</p><p>target="_top"</b>>Φασόλια σε κατσαρόλα, ιταλικού τύπου</p><p>ετσι βγηκε το site... φυσικα πρεπει να γινει ακομα δουλεια... εξαλλου κατα την ιδεα μου θα εχει λιγο διαφορετικη δομη οσον αφορα την περιηγηση γυρω απο το site, θα εχει ένα σωρό σελίδες, ένα όμορφο μενού, αλλά όσον αφορά τη δομή του πλαισίου, νομίζω ότι θα παραμείνει η ίδια..</p> <h2>πλωτό πλαίσιο</h2> <p>Μερικές φορές είναι απαραίτητο να εισαγάγετε ένα άλλο έγγραφο HTML ή ακόμα και μια σειρά τέτοιων εγγράφων σε μια σελίδα που περιέχει μια δομή χωρίς πλαίσιο σε ένα ξεχωριστό παράθυρο. Για να επιτευχθεί αυτός ο σκοπός υπάρχει μια ετικέτα <b><iframe> </b>- το λεγόμενο πλωτό πλαίσιο.</p> <p>Αυτή η ετικέτα έχει μια σειρά από χαρακτηριστικά:</p> <b>src</b>- ένα απαιτούμενο χαρακτηριστικό που υποδεικνύει τη διαδρομή προς τη σελίδα που θα ανοίξει <br><b>πλάτος</b>- πλάτος του πλωτού πλαισίου σε pixel ή ποσοστά <br><b>ύψος</b>- Ύψος πλωτού πλαισίου <p><b>κύλιση</b>- εμφάνιση γραμμής κύλισης</p><ul><li><b>όχι</b>- να μην εμφανίζεται ποτέ η γραμμή κύλισης,</li><li><b>Ναί</b>- να δείχνει πάντα</li><li><b>αυτο</b>- δείξτε το εάν είναι απαραίτητο.</li> </ul><b>ευθυγραμμίζω</b>- ευθυγράμμιση πλωτού πλαισίου <ul><li><b>αριστερά</b>- αριστερά</li><li><b>σωστά</b>- στα δεξιά</li><li><b>μπλουζα</b>- πιο ψηλά</li><li><b>κάτω μέρος</b>- παρακάτω</li> </ul><b>πλαίσιο πλαισίου</b>- παρουσία πλαισίου γύρω από το πλωτό πλαίσιο <ul><li><b>1 </b>- ενεργοποιήστε το πλαίσιο</li><li><b>0 </b>- απενεργοποιήστε το πλαίσιο</li> </ul><p>Όλα μαζί είναι γραμμένα ως εξής:</p> <b><iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1" >
Παράδειγμα εγγράφου με αιωρούμενο πλαίσιο:

πλωτό πλαίσιο

πλωτό πλαίσιο

Το λεγόμενο "floating frame" έχει εισαχθεί σε αυτή τη σελίδα.
Σε ξεχωριστό παράθυρο, ανοίγει ένα άλλο έγγραφο html για εμφάνιση.

… … …

Noframes

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

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

Για να καταστεί σαφές στον χρήστη ότι οι ρυθμίσεις του προγράμματος περιήγησής του/του προγράμματος περιήγησης δεν υποστηρίζουν πλαίσια, υπάρχει μια ετικέτα

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

Ετικέτα
○ Πλωτό πλαίσιο

Εάν χρειάζεται να εισαγάγετε ένα παράθυρο iframe απευθείας σε μια σελίδα που δεν έχει δομή πλαισίου, υπάρχει μια ετικέτα "iframe" για αυτό.

* Χαρακτηριστικά ετικέτας "iframe".

src - διαδρομή προς τη σελίδα προς άνοιγμα

πλάτος - πλάτος του πλωτού πλαισίου

ύψος - αιωρούμενο ύψος πλαισίου

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

ευθυγράμμιση - ευθυγράμμιση αιωρούμενου πλαισίου
- αριστερά - αριστερά
- δεξιά - δεξιά
- πάνω – ψηλότερα
- κάτω - κάτω

πλαίσιο πλαισίου - περίγραμμα γύρω από αιωρούμενο πλαίσιο
- 1 - ενεργοποιήστε το πλαίσιο
- 0 - απενεργοποιήστε το πλαίσιο

Έτσι θα μοιάζει η ετικέτα "iframe" με χαρακτηριστικά:

Εάν το πρόγραμμα περιήγησής σας δεν υποστηρίζει πλαίσια, μπορείτε να εισαγάγετε το κείμενο " Ουπς! Ο περιηγητής σας δεν υποστηρίζει πλαίσια. » μεταξύ ετικετών .
Θα μοιάζει με αυτό:
Ουπς! Ο περιηγητής σας δεν υποστηρίζει πλαίσια.
Για παράδειγμα, ας προσθέσουμε ένα iframe στο αρχείο "content.html":
Αρχική σελίδα
Αρχική σελίδα
Περιεχόμενο ιστότοπου - "Αρχική σελίδα (περιεχόμενο! Το πρόγραμμα περιήγησής σας δεν υποστηρίζει πλαίσια.

Προηγούμενη ανάρτηση
Επόμενη καταχώρηση

Ανάγνωση:

Δημοφιλής:

Σοβιετική ακουστική Amfiton 35ac 018 Stradivarius ενισχυτής βιολιού Corvette

Σοβιετική ακουστική Amfiton 35ac 018 Stradivarius ενισχυτής βιολιού Corvette

Νέος

Πώς να αποκαταστήσετε τον εμμηνορροϊκό κύκλο μετά τον τοκετό:

Μίνι τεστ τεχνικής σκέψης

Μίνι τεστ τεχνικής σκέψης

Ολοκληρωμένη διάγνωση των γενικών ικανοτήτων των εφήβων στο πλαίσιο της εξειδικευμένης εκπαίδευσης ΜΕΡΟΣ ΙΙΙ 3. Διαγνωστικά της γνωστικής σφαίρας 3.3. Δοκιμή...

Δωρεάν υποβολή αγγελίας για πώληση διαμερίσματος, κατοικίας και λοιπών ακινήτων Υποβολή αγγελίας για γρήγορη πώληση κατοικίας

Δωρεάν υποβολή αγγελίας για πώληση διαμερίσματος, κατοικίας και λοιπών ακινήτων Υποβολή αγγελίας για γρήγορη πώληση κατοικίας

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

Κερδίζοντας χρήματα από την ανάγνωση επιστολών Διαβάζοντας γράμματα αλλά ανταμοιβές

Κερδίζοντας χρήματα από την ανάγνωση επιστολών Διαβάζοντας γράμματα αλλά ανταμοιβές

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

Υλικό με θέμα: Πρόγραμμα συναυλίας "Με όλη μου την καρδιά" τηλεοπτική εκπομπή με όλη μου την καρδιά όλα τα επεισόδια

Υλικό με θέμα: Πρόγραμμα συναυλίας

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

Ρυθμίσεις υπολογιστή, ενημερώσεις, συντήρηση, ρυθμίσεις

τροφοδοσία-εικόνα