Επιτραπέζιες διατάξεις ανοίγουν νέα όρια σχεδίασης
Υπάρχουν πολλοί λόγοι για να μην χρησιμοποιηθούν πίνακες για τη διάταξη . Ένας από τους πιο συνηθισμένους λόγους που οι άνθρωποι δίνουν για τη συνέχιση της χρήσης τους είναι επειδή είναι δύσκολο να κάνουμε σχεδίαση με το CSS. Παρόλο που το CSS scripting συνεπάγεται μια καμπύλη μάθησης, όταν καταλαβαίνετε πώς να κάνετε CSS layout, ίσως να εκπλαγείτε με το πόσο εύκολο μπορεί να είναι. Και μόλις μάθετε, θα έχετε αντιμετωπίσει τον δεύτερο συνηθέστερο λόγο που οι άνθρωποι δίνουν ότι δεν χρησιμοποιούν CSS- "Είναι πιο γρήγορο να γράψετε πίνακες." Είναι πιο γρήγορα επειδή γνωρίζετε πίνακες, αλλά μόλις μάθετε CSS, ίσως είστε τόσο γρήγοροι με αυτό.
Υποστήριξη του προγράμματος περιήγησης CSS
Η τοποθέτηση CSS υποστηρίζεται καλά σε όλα τα σύγχρονα προγράμματα περιήγησης . Εκτός αν δημιουργείτε έναν ιστότοπο για το Netscape 4 ή τον Internet Explorer 4, οι αναγνώστες σας δεν πρέπει να έχουν κανένα πρόβλημα να προβάλλουν τις τοποθεσίες Web που έχουν τοποθετηθεί σε CSS.
Επανεξετάζοντας τον τρόπο κατασκευής μιας σελίδας
Όταν δημιουργείτε έναν ιστότοπο χρησιμοποιώντας πίνακες, πρέπει να σκεφτείτε σε μορφή πίνακα . Με άλλα λόγια, σκέφτεστε από την άποψη των κυττάρων και των σειρών και των στηλών. Οι ιστοσελίδες σας θα αντικατοπτρίζουν αυτήν την προσέγγιση. Όταν μετακομίζετε σε ένα σχεδιασμό τοποθέτησης CSS, θα αρχίσετε να σκέφτεστε τις σελίδες σας από την άποψη του περιεχομένου, επειδή το περιεχόμενο μπορεί να τοποθετηθεί οπουδήποτε επιθυμείτε στη διάταξη - ακόμα και σε στρώσεις πάνω από άλλο περιεχόμενο.
Διαφορετικές ιστοσελίδες έχουν διαφορετικές δομές. Για να δημιουργήσετε μια αποτελεσματική σελίδα, αξιολογήστε τη δομή οποιασδήποτε δεδομένης σελίδας προτού αναθέσετε περιεχόμενο σε αυτήν. Μια σελίδα παραδειγμάτων μπορεί να περιλαμβάνει πέντε διαφορετικές ενότητες:
- Κεφαλίδα . Αρχική σελίδα για τη διαφήμιση banner, το όνομα του ιστότοπου, συνδέσμους πλοήγησης, τίτλο άρθρου καθώς και μερικά άλλα πράγματα.
- Δεξιά στήλη . Αυτή είναι η δεξιά πλευρά της σελίδας με το πλαίσιο αναζήτησης, τις διαφημίσεις, τα πλαίσια βίντεο και τις περιοχές αγορών.
- Περιεχόμενο . Το κείμενο ενός άρθρου, μιας θέσης ιστολογίου ή ενός καλαθιού αγορών-το κρέας-και-πατάτες της σελίδας.
- Ενσωματωμένες διαφημίσεις . Οι διαφημίσεις ενσωματωμένες στο περιεχόμενο.
- Υποσέλιδο . Η κάτω πλοήγηση, πληροφορίες συγγραφέα, πληροφορίες πνευματικών δικαιωμάτων, χαμηλότερες διαφημίσεις banner και σχετικοί σύνδεσμοι.
Αντί να βάζετε αυτά τα πέντε στοιχεία σε έναν πίνακα, χρησιμοποιήστε τα στοιχεία διατομής HTML5 για να ορίσετε τα διαφορετικά τμήματα του περιεχομένου και, στη συνέχεια, χρησιμοποιήστε την τοποθέτηση CSS για να τοποθετήσετε τα στοιχεία περιεχομένου στη σελίδα.
Προσδιορισμός των ενοτήτων του περιεχομένου σας
Αφού ορίσετε τις διαφορετικές περιοχές περιεχομένου του ιστότοπού σας, πρέπει να τις γράψετε στο HTML σας. Ενώ μπορείτε, γενικά, να τοποθετήσετε τα τμήματα σας με οποιαδήποτε σειρά, είναι μια καλή ιδέα να τοποθετήσετε πρώτα τα πιο σημαντικά μέρη της σελίδας σας. Αυτή η προσέγγιση θα βοηθήσει επίσης με τη βελτιστοποίηση μηχανών αναζήτησης.
Για να επιδείξετε την τοποθέτηση, οραματίστε μια σελίδα με τρεις στήλες, χωρίς επικεφαλίδα ή υποσέλιδο. Μπορείτε να χρησιμοποιήσετε την τοποθέτηση για να δημιουργήσετε οποιοδήποτε τύπο διάταξης θέλετε.
Για διάταξη σε τρεις στήλες, ορίστε τρεις ενότητες: αριστερή στήλη, δεξιά στήλη και περιεχόμενο.
Αυτές οι ενότητες θα παρουσιαστούν χρησιμοποιώντας το στοιχείο ΑΡΘΡΟ για το περιεχόμενο και δύο στοιχεία SECTION για τις δύο στήλες. Όλα θα έχουν επίσης ένα χαρακτηριστικό που το αναγνωρίζει. Όταν χρησιμοποιείτε το χαρακτηριστικό id, πρέπει να αποδίδετε ένα μοναδικό όνομα για κάθε αναγνωριστικό.
Τοποθέτηση του περιεχομένου
Χρησιμοποιώντας το CSS, ορίστε τη θέση για τα στοιχεία σας ID'd. Αποθηκεύστε τις πληροφορίες θέσης σας σε μια κλήση στυλ όπως αυτή:
#content {
}}
Το περιεχόμενο εντός αυτών των στοιχείων θα διαρκέσει όσο το δυνατόν περισσότερο χώρο, δηλαδή 100 τοις εκατό του πλάτους της τρέχουσας θέσης ή της σελίδας. Για να επηρεάσετε τη θέση μιας ενότητας χωρίς να την πιέσετε σε σταθερό πλάτος, αλλάξτε τις ιδιότητες γεμίσματος ή περιθωρίου.
Για αυτή τη διάταξη, ορίστε τις δύο στήλες σε σταθερά πλάτη και, στη συνέχεια, ορίστε τη θέση τους απόλυτη, έτσι ώστε να μην επηρεάζονται από το σημείο όπου βρίσκονται στο HTML.
# αριστερή στήλη {
θέση: απόλυτη;
αριστερά: 0;
πλάτος: 150px;
περιθώριο-αριστερά: 10px;
περιθώριο-κορυφή: 20px;
χρώμα: # 000000;
padding: 3px;
}}
# right-column {
θέση: απόλυτη;
αριστερά: 80%;
κορυφή: 20px;
πλάτος: 140px;
padding-left: 10px;
z-δείκτης: 3;
χρώμα: # 000000;
padding: 3px;
}}
Στη συνέχεια, για την περιοχή περιεχομένου, ορίστε τα περιθώρια στα δεξιά και στα αριστερά, έτσι ώστε το περιεχόμενο να μην επικαλύπτει τις δύο εξωτερικές στήλες.
#content {
κορυφή: 0px;
περιθώριο: 0px 25% 0 165px;
padding: 3px;
χρώμα: # 000000;
}}
Ο καθορισμός της σελίδας σας χρησιμοποιώντας το CSS αντί για έναν πίνακα HTML απαιτεί λίγο πιο τεχνικές δεξιότητες, αλλά η πληρωμή απορρέει από πιο ευέλικτα και ευαίσθητα σχέδια και μεγαλύτερη ευκολία στην πραγματοποίηση διαρθρωτικών προσαρμογών στη σελίδα σας αργότερα.