Πλαίσιο - τι είναι; Δομή και δημιουργία πλαισίου

Πίνακας περιεχομένων:

Πλαίσιο - τι είναι; Δομή και δημιουργία πλαισίου
Πλαίσιο - τι είναι; Δομή και δημιουργία πλαισίου
Anonim

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

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

Δημιουργία πλαισίων στο πρόγραμμα δημιουργίας ιστοτόπων

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

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

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

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

Πλαίσια σε CMS

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

πλαισιώστε το
πλαισιώστε το

Μπορεί να βρεθεί και να δημιουργηθεί στον πίνακα ελέγχου του Joomla CMS: "Extensions" - "Module Manager" - "Create" (ένα στρογγυλό πορτοκαλί κουμπί με το σύμβολο "συν" μέσα). Στο αναδυόμενο παράθυρο, στη λίστα, θα δείτε τη λειτουργική μονάδα "Wrapper".

Αν δεν είναι εδώ, δεν περιλαμβάνεται. Για να το χρησιμοποιήσετε, πρέπει πρώτα να το ενεργοποιήσετε εδώ: καρτέλα "Επεκτάσεις", μετά "Διαχείριση επεκτάσεων" και μετά την καρτέλα "Διαχείριση". Και ψάχνουμε στη λίστα που ανοίγει, για γρήγορη αναζήτηση στο πεδίο «Φίλτρο» πληκτρολογήστε τη λέξη: Wrapper. Απέναντι από αυτήν την ενότητα θα πρέπει να υπάρχει ένα πράσινο εικονίδιο με ένα σημάδι επιλογής μέσα. Ένας κόκκινος κύκλος με μια τελεία μέσα θα σημαίνει ότι αυτή η προσθήκη είναι απενεργοποιημένη.

Μετά από αυτή τη διαδικασία, μπορείτε να επιστρέψετε στο "Module Manager", να δημιουργήσετε ένα πλαίσιο και να ορίσετε τις παραμέτρους του.

τι είναι ένα πλαίσιο
τι είναι ένα πλαίσιο

Όπως μπορείτε να δείτε στην εικόνα, η ενότητα σας επιτρέπει να ορίσετε: τον τίτλο πάνω από το πλαίσιο, τη θέση της μονάδας, επιλέξτε τις σελίδες του ιστότοπου στον οποίο θα εμφανίζεται. Και επίσης προσαρμόστε το πλάτος, το ύψος. προσθέστε ένα πλαίσιο και στην πραγματικότητασύνδεσμο προς μια ιστοσελίδα. Εάν σε ένα πλαίσιο θέλετε να εμφανίσετε την κύρια σελίδα ενός ιστότοπου σε πλήρες πλάτος, τότε το 100%, που έχει οριστεί από προεπιλογή, δεν θα είναι αρκετό. Μπορείτε να βάλετε αμέσως με ασφάλεια το 400%. Ένα ύψος 200 είναι συνήθως αρκετό για να εμφανιστεί το επάνω μενού της σελίδας. Όλο το άλλο περιεχόμενο θα είναι ορατό εάν ο χρήστης (επισκέπτης του ιστότοπου) χρησιμοποιεί τη γραμμή κύλισης.

Ακολουθεί ένα παράδειγμα του τι είναι ένα πλαίσιο στο Joomla.

παραδείγματα πλαισίων
παραδείγματα πλαισίων

Η ενότητα Jumla για τη δημιουργία πλαισίου είναι πολύ βολική και εύκολη στη χρήση. Ωστόσο, οι δυνατότητές του είναι περιορισμένες, όπως και οι δυνατότητες του κατασκευαστή.

Ιστορία και πραγματικότητες

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

Πολύπλοκα δομημένοι ιστότοποι

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

Πώς να πετύχεις το ίδιο αποτέλεσμα; Πώς δημιουργείται η δομή του πλαισίου;

δομή πλαισίου
δομή πλαισίου

Πώςεισαγάγετε πλαίσιο στον κωδικό σελίδας

Πλαίσια σε HTML προστίθενται χρησιμοποιώντας ετικέτες:

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

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

Παραλλαγές σχεδίου

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

Αριστερά Κορυφαίο καρέ
Δεξιά

Μια τέτοια δομή (λέγεται ένθετη) μπορεί να ληφθεί γράφοντας το χαρακτηριστικό cols μέσα στην ετικέτα, που σημαίνει τη θέση του πλαισίου οριζόντια και τις σειρές - κάθετα. Στη συνέχεια, τοποθετείται το σύμβολο=και προδιαγράφονται οι διαστάσεις. Για παράδειγμα, 60%, 40% - ποσοστό (το ένα παράθυρο θα καταλάβει το 60% του χώρου του προγράμματος περιήγησης, το άλλο, αντίστοιχα, 40%). Ή 100, 200 - λόγος διαστάσεων σε pixel. Το μέγεθος ενός από τα καρέ δεν μπορεί να ρυθμιστεί καθόλου (θα οριστεί από προεπιλογή). Για να το κάνετε αυτό, μετά ή πριν από το κόμμα, πρέπει να καθορίσετε το σύμβολο.

Ένθεσηκάθε νέα περιοχή συμβολίζεται με ένα νέο σύνολο πλαισίων.

Παράδειγμα κώδικα:

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

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

Πλαίσιο πλαίσιο

site σε κουφώματα
site σε κουφώματα

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

Για παράδειγμα, το Seopult.ru είναι μια πολύ γνωστή υπηρεσία για τους πλοιάρχους προώθησης. Μόνο όχι ο κύριος ιστότοπός του, αλλά ένας καθρέφτης I.seopult.pro, που δημιουργήθηκε για πελάτες πύλης. Ο κωδικός iframe είναι γραμμένος εδώ ως εξής:

Οδηγίες

. Πού είναι η ετικέτα

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

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

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

    Πώς να γράψετε ένα iframe

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

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

    • Τα χαρακτηριστικά προστίθενται στο iframe:

      • πλάτος (πλάτος) και ύψος (ύψος=);
      • στοίχιση άκρων;
      • εσοχές που μπορεί να προσδιορίζονται ή να μην προσδιορίζονται: η προεπιλεγμένη τιμή είναι 6 - αυτό είναι αρκετά;
      • χρησιμοποιώντας το allowtransparency, μπορείτε να ορίσετε τη διαφάνεια της περιοχής του πλαισίου έτσι ώστε να φαίνεται το φόντο της σελίδας.
      • συν το γνωστό scr, όνομα, κύλιση, περίγραμμα.

      Πλοήγηση με iframe

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

      Για αυτό, λαμβάνεται ένα iframe, το όνομα γράφεται επιπλέον σε αυτό μέσω name=. Για παράδειγμα, κεφαλίδα. Επιπλέον, πριν από αυτό στις ετικέτες και οι σύνδεσμοι γράφονται μέσω ενός HREF=με την υποχρεωτική ένδειξη του χαρακτηριστικού μετά από αυτά. Πριν από τη χρήση της ετικέτας κλεισίματος a, υποδεικνύεται μια επιγραφή που θα χρησιμεύσει ως κουμπί σύνδεσης. Ετικέτες "α" άνοιγμα και κλείσιμοπερικλείονται στην ετικέτα σελ.

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

      Ο κωδικός θα μοιάζει με αυτό:

      Δημοσίευση διαφήμισης

      Προβολή διαφημίσεων

      Image
      Image

      Πώς θα φαίνεται στον ιστότοπο:

      Πώς να εισαγάγετε ένα iframe σε έναν ιστότοπο Joomla

      Σαν τυπικό, ο πίνακας ελέγχου του Joomla διαθέτει μια ενεργοποιημένη (έτοιμη προς χρήση) ενότητα "HTML-code". Με αυτό, μπορείτε να εισαγάγετε οποιονδήποτε κώδικα οπουδήποτε στον ιστότοπο. Ωστόσο, αγνοεί πεισματικά τον κώδικα με την ετικέτα iFrem. Επομένως, θα χρησιμοποιήσουμε μια ειδική ενότητα Jumi.

      Πρώτα απ 'όλα, πρέπει να το κατεβάσετε από το Διαδίκτυο και να το εγκαταστήσετε μέσω του πίνακα διαχείρισης του Joomla: "Επεκτάσεις" - "Διαχείριση επεκτάσεων" - "Επιλογή αρχείου". Καθορίστε τη διαδρομή προς το αρχείο που κατεβάσατε και κάντε κλικ στο "Λήψη".

      Μετά την επιτυχή εγκατάσταση, μεταβείτε στο "Module Manager" και δημιουργήστε ένα νέο. Επιλέξτε τον τύπο Jumi. Στο παράθυρο που ανοίγει, στο πεδίο «Προσαρμοσμένος κωδικός», εισάγετε το έτοιμο iFrem, όπως φαίνεται στην προηγούμενη παράγραφο του άρθρου. Δώστε στην ενότητα έναν τίτλο, καθορίστε τη θέση τοποθέτησης και τις σελίδες του ιστότοπου. Κάντε κλικ στην αποθήκευση και δείτε το.

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

      Όλα τα δημοφιλή προγράμματα περιήγησης εμφανίζουν καλά τα περιεχόμενα των παραθύρων πλαισίου: Chrome, Safari, Firefox, Android, iOS. Ο Internet Explorer και η Opera έχουν ιδιαίτερα υψηλό ποσοστό από αυτή την άποψη. Κι όμως δεν υπάρχει εγγύησηότι ο επισκέπτης στον ιστότοπό σας θα δει τα περιεχόμενα όλων των παραθύρων. Σε αυτήν την περίπτωση, θα πρέπει να αφήσετε ένα μήνυμα χρησιμοποιώντας την ετικέτα noframe (άνοιγμα και κλείσιμο). Μπορείτε να εισαγάγετε τα εξής: "Το πρόγραμμα περιήγησής σας δεν είναι ενημερωμένο. Ενημερώστε την έκδοση για να εμφανίσετε τα περιεχόμενα του ιστότοπου." Εάν το πρόγραμμα περιήγησης του χρήστη αποδίδει σωστά τα καρέ, δεν θα δει αυτό το μήνυμα.

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

Συνιστάται: