Σελιδοποίηση με πίνακες

Ένα από τα πιο συχνά προβλήματα που έχει να αντιμετωπίσει ο κατασκευαστής Web σελίδων είναι να κρατήσει τα μέρη της σελίδας (κείμενο, εικόνες κ.λπ.) στην θέση που επιθυμεί. Προκειμένου να καλύψει τις ανάγκες κάθε είδους οθόνης (από 14'' έως 21''), ανάλυσης (από 640Χ480 έως 1280Χ1024) και γραμματοσειράς (το μέγεθος και το είδος των γραμμάτων το επιλέγει ο κάθε χρήστης μόνος του) ο browser δεν μας επιτρέπει να ορίσουμε συντεταγμένες και να πούμε ότι: "στο Χ σημείο της οθόνης θα εμφανιστεί αυτό και στο Ψ εκείνο".

Ένας απλός τρόπος να παρακάμψουμε αυτό το πρόβλημα είναι με τους πίνακες. Κατασκευάζουμε Web σελίδες οι οποίες αποτελούνται από πίνακες χωρίς περιθώριο που λειτουργούν σαν μια αόρατη σκαλωσιά κρατώντας κάθε τμήμα της σελίδας στην θέση που επιθυμούμε. Σαν παράδειγμα μπορούμε να δούμε την παρακάτω σελίδα :

[Σελίδα σελιδοποιημένη με tables]

Η θέση του κειμένου και των γραφικών της σελίδας αυτής έχει οριστεί με την βοήθεια ενός αόρατου σκελετού από πίνακες και πίνακες που βρίσκονται μέσα σε άλλους πίνακες! Ο σκελετός φαίνεται καθαρά στο παρακάτω γραφικό:

[Σκελετός σελίδας σελιδοποιημένης με tables]

Η σχεδίαση αυτής της σελίδας έγινε ως εξής:

Βήμα 1

Αποφασίστηκε η γενική εικόνα της σελίδας. Στο αριστερό μέρος της οθόνης θα υπάρχει μια μπάρα επιλογών και στο δεξιό το κανονικό περιεχόμενο. Γι' αυτό σχεδιάστηκε ο πρώτος πίνακας που ήταν της μορφής:

Βήμα 2

Μετρήθηκαν τα εικονίδια που θα υπάρχουν μέσα στην αριστερή μπάρα. Επειδή αυτά ήταν 13 ο πίνακας απέκτησε 14 κελιά. 13 στην αριστερή στήλη (το ένα κάτω από το άλλο) και 1 (με ROWSPAN=13) στην δεξιά στήλη.

Αντί για 13 κελιά η αριστερή στήλη θα μπορούσε να έχει 1 μόνο κελί που να περιέχει ένα πίνακα με μια στήλη και 13 σειρές. Προτιμήθηκε η πρώτη λύση για να έχουμε όσο το δυνατόν λιγότερους πίνακες μέσα σε άλλους πίνακες (όσο περισσότεροι πίνακες βρίσκονται μέσα σε άλλους, τόσο πιο πολύ αργεί ο browser να εμφανίσει την σελίδα).

Βήμα 3

Τα περιεχόμενα του ενός κελιού της δεξιάς στήλης τοποθετήθηκαν μέσα σε ένα άλλο πίνακα με 2 στήλες. Ανάλογα με την σελιδοποίηση που ήθελα να πετύχω, άλλες γραμμές είχαν ένα κελί που να εκτείνεται και στις δύο στήλες (π.χ. η εικόνα του τραίνου ή γραμμή επιλογών) και άλλες όχι. Για παράδειγμα, όταν κατασκεύαζα την σελίδα, δεν ήθελα το τελευταίο κείμενο να αγγαλιάζει το γραφικό με το γραμματοκιβώτιο. Θα μπορούσα να χρησιμοποιήσω το br clear (βλέπε την ενότητα για την εισαγωγή γραφικών) αλλά δεν γνωρίζω τι μέγεθος γραμμάτων θα έχει ορίσει ο κάθε αναγνώστης. Έτσι προτίμησα να παγιδεύσω το κείμενο σε ένα κελί και την εικόνα σε ένα άλλο.

Για την διευκόλυνσή σας παραθέτω εδώ την ίδια σελίδα χωρίς όμως τα γραφικά:
(τα links είναι λανθασμένα και δεν λειτουργούν)

[Περιεχόμενα]
ΕΤΑΙΡΕΙΑ Α.Ε.
Κείμενο, καλοσωρίζετε τους επισκέπτες (δηλαδή αναγνώστες) και τους γράφετε λίγα λόγια για την εταιρεία σας. Επίσης τους πληροφορείτε συνοπτικά για τα περιεχόμενα και τον λόγο ύπαρξης αυτών των σελίδων.
Ένα έμβλημα, λογότυπο ή φωτογραφία
[Ένας Φάρος]
[Τραίνο]
Εταιρικό Προφίλ | Προϊόντα | Νέες Σελίδες | Προσφορές | Ειδήσεις | Ανθολόγιο

Εδώ σας προτείνουμε να βάλετε την ταχυδρομική διεύθυνση (οδός αριθμός Τ.Κ. κτλ.), το τηλέφωνο, το fax και το ηλεκτρονικό ταχυδρομείο σας, καθώς και άλλες πληροφορίες που θεωρείτε σημαντικές (π.χ. ωράριο εργασίας και επισκέψεων κ.λπ.)
[Γράψτε μας]

Επιστροφή στον Οδηγό Κατασκευής Web Σελίδων