14Απρ

Χρήσιμες συμβουλές για την σημαντική μετάβαση από tables σε divs.

, 14 Απριλίου 2008 | HOT POSTS | 0 Σχόλια

Πολλοί 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 στο παρελθόν, όπως:

Στα πλαίσια της σωστής ενημέρωσης και πληροφόρησης των Ελλήνων web designers το Web design blog θα δημοσιεύει άρθρα σχετικά με την χρήση νέων και διαδεδομένων τεχνολογιών στο διαδίκτυο και πιο ειδικά στην σχεδίαση ιστοσελίδων – websites / Web design.

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Χρήσιμες συμβουλές για την σημαντική μετάβαση από tables σε divs. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter