Χρήσιμες συμβουλές για την σημαντική μετάβαση από tables σε divs.
Πολλοί web designers δυσκολεύονται να μεταβούν από table-based layout σε divs (layers). Η δύναμη της συνήθειας, ο αυξημένος όγκος παραγωγής και ο περιορισμένος χρόνος δεν αφήνουν τα περιθώρια να γίνει η εξέλιξη στον τρόπο που σχεδιάζουν websites. Ουσιαστικά εάν υπάρχει γνώση και καλή χρήση CSS το βήμα αυτό είναι αρκετά εύκολο. Η γενική φιλοσοφία παραμένει ίδια στον τρόπο σύνδεσης του περιεχομένου με τη δομή του website για αυτούς που γνωρίζουν CSS. Το βασικό πλεονέκτημα είναι πως τα divs με την χρήση CSS δίνουν την δυνατότητα να εκμεταλλευτείτε περισσότερα στοιχεία προβολής με καλύτερο έλεγχο στην μαζική ανανέωση ή μελλοντική αλλαγή τους. Oι παράμετροι (attributes) και τα χαρακτηριστικά των στοιχείων (elements) ορίζονται από το CSS ώστε να πετυχαίνεται διαχωρισμός του περιεχομένου από την δομή. Αυτό όπως έχει προαναφερθεί καθιστά τον έλεγχο και την ανανέωση του περιεχομένου ευκολότερη και γρηγορότερη. Web designers που δεν χρησιμοποιούν CSS θα πρέπει να προχωρήσουν άμεσα στην χρήση τους διότι πρώτον δεν θα μπορέσουν να αναλάβουν κάποιο έργο που έχει απαιτητικές ανάγκες και δεύτερον θα γίνει δύσκολη και χρονοβόρα η δουλειά τους.
Το πρώτο βήμα είναι να μάθετε πως συμπεριφέρονται τα divs και πως τοποθετούνται ώστε να μπορέσετε να τα προσαρμόσετε στο εικαστικό της ιστοσελίδας που έχετε σχεδιάσει. Μια καλή στρατηγική είναι να “κατεβάζετε” επιλεγμένα HTML style sheets από υποδειγματικά websites που είναι σχεδιασμένα με την τεχνική των divs και να τα μελετήσετε. Προτείνουμε ακόμα να εγκαταστήσετε στον Firefox το CSS Viewer add-on το οποίο σας αναλύει το CSS σε πραγματικό χρόνο (real time) δημιουργώντας προϋποθέσεις γρήγορης εκμάθησης. Οι Web designers που έχουν υποδομή στην χρήση CSS δεν θα δυσκολευτούν στην μετάβαση και θα εμπλουτίσουν τις γνώσεις τους ενισχύοντας τις δυνατότητες τους.
Μόλις αποκτήσετε μια πρώτη εμπειρία αρχίστε να πειραματίζεστε με τα διάφορα στοιχεία ώστε να ελαχιστοποιήσετε τον κώδικα. Τα tags όπως h1,h2, a, p,ul, ol, li .. κάθε ξεχωριστού ή parent (div που φιλοξενείται μέσα σε άλλο div) μπορούν να χρησιμοποιηθούν με CSS για να προσαρμόσετε το εικαστικό χωρίς την χρήση πολλών γραφικών και span/ font tags. Η καλή σύνταξη (semantic mark up) θα σας μειώσει αισθητά τoν κώδικα και θα σας επιταχύνει το ρυθμό παραγωγής του εκάστοτε web project (έργο).
Προσπαθήστε ακόμα να εκμεταλλευτείτε τεχνολογίες όπως Αjax και Javascript που συνδυάζονται πολύ καλά με τα divs, για να σας βοηθήσουν να προβάλλετε περισσότερο περιεχόμενο καταναλώνοντας λιγότερο χώρο στο layout της ιστοσελίδας που σχεδιάζετε. Προσοχή όμως όταν χρησιμοποιείται τεχνολογίες όπως Αjax, Javascript και DHTML πρέπει να ελέγχεται η εγκυρότητα (W3C validation) τους ώστε να μην τεθούν θέματα ασυμβατότητας (Cross browser compatibility).
Μόλις στήσετε μερικά websites με την σωστή χρήση των divs & CSS μην το παρακάνετε σνομπάροντας τα tables θεωρώντας πως είναι παλαιά και ξεπερασμένη τεχνολογία. Έχει σημειωθεί αρκετά το φαινόμενο δυσαρέσκειας προς αυτά.
Τα tables αποτελούν μια αξιόλογη λύση όταν έχουμε πολύπλοκες φόρμες και όταν επιθυμούμε να προβάλλουμε «τετράγωνες» πληροφορίες & δεδομένα.
Το Web design blog έχει δημοσιεύσει κάποια σχετικά άρθρα για τα divs & CSS στο παρελθόν, όπως:
- Μάθετε πως να κάνετε clear floating layers (divs).
- Αντιμετωπίστε το πρόβλημα του fixed height στα divs με την λύση του min-height hack.
- Κεντράροντας ένα website με divs με την χρήση CSS.
- Διπλό border σε εικόνα με χρήση CSS.
Στα πλαίσια της σωστής ενημέρωσης και πληροφόρησης των Ελλήνων web designers το Web design blog θα δημοσιεύει άρθρα σχετικά με την χρήση νέων και διαδεδομένων τεχνολογιών στο διαδίκτυο και πιο ειδικά στην σχεδίαση ιστοσελίδων – websites / Web design.
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Χρήσιμες συμβουλές για την σημαντική μετάβαση από tables σε divs. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
