Η διάταξη ξεκινά το ταξίδι της από τις στιγμές πουο κώδικας γράφτηκε σε HTML και η σήμανση έγινε χρησιμοποιώντας πίνακες. Με την πάροδο του χρόνου, αυτό απομακρύνθηκε και η σήμανση μετατοπίστηκε στο CSS. Υπάρχουν πολλοί τύποι διάταξης τώρα. Το Flex-box, η εργαλειοθήκη Bootstrap και τα πιο πρόσφατα πλέγματα, που παρέχουν τεράστιες ευκαιρίες για δημιουργούς, μπορούν να θεωρηθούν μοντέρνα. Μία από τις μεταβατικές επιλογές στην ανάπτυξη του Διαδικτύου είναι η διάταξη μπλοκ. Προηγουμένως χρησιμοποιείται για τη δημιουργία σήμανσης για ολόκληρη τη σελίδα, θεωρείται πλέον παρωχημένο, αλλά παρ 'όλα αυτά εξακολουθεί να βρίσκει ευρεία χρήση σε ειδικές περιπτώσεις.
Τι είναι η διάταξη μπλοκ;
Αντικατέστησε το ξεπερασμένο και ατελέςπινακοειδής. Η σελίδα αποτελείται από τα λεγόμενα επίπεδα ή μπλοκ και η ετικέτα κλεισίματος <div> χρησιμεύει ως δομικά στοιχεία για αυτό. Πρόκειται για μια ετικέτα μπλοκ που εκτείνεται σε όλο το πλάτος του γονικού στοιχείου και το ύψος για να ταιριάζει στο περιεχόμενο. Αργότερα αυτή η στοιχειοθεσία ονομάστηκε "θαυμάσια". Η βάση για τον προσανατολισμό σελίδας είναι οι λεγόμενες τάξεις.
Προς το παρόν, αυτός ο τύπος διάταξης είναι σημαντικάέχει καταργηθεί και η ετικέτα <div> θα πρέπει να χρησιμοποιείται μόνο ως έχει. Υπάρχουν πολλές σημασιολογικά σωστές ετικέτες που διευκολύνουν την πλοήγηση στον κώδικα. Για παράδειγμα, υπάρχει μια ειδική ετικέτα <nav> για το μενού πλοήγησης.
Για λόγους σαφήνειας, μια διάταξη μπλοκ μπορεί να αναπαρασταθεί ως εξής:
<div class = "wrapper">
<div class = "element1"> περιεχόμενο </div>
<div class = "element2"> περιεχόμενο </div>
<div class = "element3"> περιεχόμενο </div>
</div>
Το Div with class wrapper είναιγονικό δοχείο ή, με άλλα λόγια, ένα περιτύλιγμα. Τα στοιχεία με την κατηγορία στοιχείων είναι τα δομικά στοιχεία της σύνθετης δομής μας. Σημειώστε ότι στον κώδικα χρησιμοποιείται ένα διαφορετικό περιθώριο από το άκρο σε σύγκριση με το γονικό στοιχείο, για να διευκολύνεται ο καθορισμός της δομής και της ιεραρχίας των στοιχείων.
Χρήση πινάκων
Η διάταξη του πίνακα των ιστότοπων υπήρξε εδώ και πολύ καιρόπονοκέφαλο για όλους τους προγραμματιστές. Μετά τη μετάβαση στο μοντέλο αποκλεισμού ιστότοπων, η χρήση πινάκων γενικά, ακόμη και για τον επιδιωκόμενο σκοπό τους, δεν ενθαρρύνθηκε για κάποιο χρονικό διάστημα.
Αυτή η προσέγγιση, φυσικά, είναιακατάλληλο και ακόμη και επιβλαβές. Αναγκάζει απλά πράγματα να γίνουν με πιο περίπλοκους και άβολους τρόπους. Τώρα ο πίνακας χρησιμοποιείται μόνο για την εμφάνιση των σχετικών δεδομένων. Με άλλα λόγια, σύμφωνα με τον άμεσο σκοπό του.
Διαχωρισμός ρόλων
Εάν νωρίτερα όλες οι κατασκευές έγιναν σε HTML,η μπλοκ διάταξη έφερε μαζί της έναν πλήρη διαχωρισμό ρόλων. Αυτήν τη στιγμή το HTML εξυπηρετεί μόνο για σήμανση, λογική μορφοποίηση και δημιουργία σύρματος σελίδας. Τα στυλ αφαιρούνται εντελώς και περιλαμβάνονται σε ξεχωριστό αρχείο που περιλαμβάνεται στο έγγραφο. Το CSS χρησιμοποιείται για την τοποθέτηση των στοιχείων και τη δημιουργία ενός ελκυστικού και ανταποκριτικού σχεδιασμού. Για να αναφερθείτε στο μπλοκ, χρησιμοποιούνται τάξεις, οι οποίες έχουν το όνομα του στοιχείου. Για παράδειγμα, για το μπλοκ κεφαλίδας, θα αντιστοιχίσουμε την κλάση κεφαλίδας. Διευκολύνει επίσης την πλοήγηση στον κώδικα. Σήμερα, αυτό γίνεται εν μέρει από εξειδικευμένες ετικέτες που εμφανίστηκαν στο HTML5.
Χρήση <div> Μπλοκ
Στη διάταξη μπλοκ, η ετικέτα χρησιμοποιείται ενεργά<div>. Είναι παρόμοιο με το τούβλο που χρησιμοποιείται στην κατασκευή ενός κτηρίου. Ενώ αποτελεί τη βάση, τη δομή του ιστότοπου, δεν είναι, ωστόσο, η μόνη. Όπως πόρτες, παράθυρα, εξαερισμός, μπαλκόνια και παρόμοια, άλλα στοιχεία HTML χρησιμοποιούνται για διάταξη. Πρόκειται για συνδέσμους, φόρμες, εικόνες, λίστες και πίνακες.
Χρησιμοποιώντας την ετικέτα <div> κατέστη δυνατή η δημιουργία του κώδικαπιο συμπαγής και διαισθητική. Η μετάβαση στη διάταξη μπλοκ επέτρεψε να απαλλαγούμε από το html από περιττό, δηλαδή από στυλ. Έκανε δυνατή την πλήρη απομάκρυνση της υπερφορτωμένης και δύσκολης πλοήγησης διάταξης πίνακα.
Χρησιμοποιεί ενεργά διάταξη μπλοκ CSS.Με τη βοήθεια των διαθέσιμων εργαλείων, μπορείτε να δημιουργήσετε οποιαδήποτε κατασκευή σελίδας με ακρίβεια pixel. Αυτή η διάταξη ονομάζεται τέλεια pixel. Αυτό συνεπάγεται τέλεια αντιστοίχιση του ιστότοπου με τη διάταξη. Στην παραπάνω φωτογραφία, μπορείτε να δείτε ότι με διάταξη μπλοκ, δεν είναι όλα τόσο απλά. Στην αρχή, ήταν απλώς αδύνατο να γίνει χωρίς τραπέζια. Χρησιμοποιήθηκαν για τη δημιουργία της βασικής δημιουργίας σελίδων και μπλοκ εφαρμόστηκαν σε μεμονωμένα στοιχεία. Αυτό ήταν μέχρι που έμαθαν πώς να ρυθμίσουν το ύψος στα μπλοκ.
Πλεονεκτήματα
Η διάταξη μπλοκ του ιστότοπου έχει τα ακόλουθα πλεονεκτήματα:
- Δεν υπάρχουν διαφανή περιθώρια πλάτους pixel, όπως συνέβη με τη διάταξη του πίνακα.
- Τα μπλοκ είναι εύκολο να τοποθετηθούν σε σχέση μεταξύ τους.
- Τα μπλοκ έχουν δυνατότητα αλλαγής μεγέθους, επιτρέποντας την απόκριση του σχεδιασμού.
- Η δυνατότητα επικάλυψης δεν διαταράσσει τη διάταξη της σελίδας, αλλά σας επιτρέπει να προσθέσετε ενδιαφέροντα εφέ.
Περαιτέρω ανάπτυξη
Επί του παρόντος, η διάταξη μπλοκ του div είναιξεπερασμένο και βρίσκει περιορισμένη χρήση, μόνο ως ειδική περίπτωση για ορισμένες καταστάσεις. Αντικαταστάθηκε από τοποθέτηση και αναδίπλωση στη διάταξη. Είχαν πολλές αδυναμίες, αλλά σε γενικές γραμμές επέτρεψαν περισσότερα από μια διάταξη μπλοκ.
Στη συνέχεια, έγινε κατασκευήενσωματωμένα στοιχεία μπλοκ. Αυτό διευκόλυνε πολύ το έργο των προγραμματιστών. Αυτή η μέθοδος έχει τα οφέλη και των δύο τύπων μπλοκ και επιτρέπει έναν πιο ανταποκρινόμενο και ανταποκρινόμενο σχεδιασμό. Αξίζει να σημειωθεί ότι όλες αυτές οι μέθοδοι, με τον ένα ή τον άλλο τρόπο, αποτελούνταν από ένα στοιχείο div, το οποίο έδωσε το όνομα "θαυμάσια διάταξη".
Προς το παρόν για τη δημιουργία της σελίδαςΧρησιμοποιούνται Flex-box και bootstrap. Μειώνουν σημαντικά τον κώδικα και τον καθιστούν γρηγορότερο και ευκολότερο να δημιουργούν υψηλής ποιότητας σχέδια που ανταποκρίνονται. Σας επιτρέπει να μετακινήσετε μπλοκ χωρίς να σπάσετε ολόκληρη τη σελίδα.
Μια νέα τεχνολογία βρίσκεται στην πρώτη γραμμή της προόδου -Πλέγματα. Σας επιτρέπει να δημιουργήσετε σχέδια οποιασδήποτε πολυπλοκότητας πολύ γρήγορα και εύκολα. Και τα μπλοκ, το τύλιγμα, η τοποθέτηση, όπως συνέβη με πίνακες σε εύθετο χρόνο, χρησιμοποιούνται μόνο για τον επιδιωκόμενο σκοπό τους.
