Πώς δημιουργούμε ένα site με πλαίσια (frames)

Η κατασκευή Web σελίδων που να περιλαμβάνουν περισσότερα από ένα ανεξάρτητα ή (πιο συχνά) συνδεδεμένα μεταξύ τους πλαίσια αποτελεί ένα από τα πιο νέα και ισχυρά εργαλεία που μας δίνει η γλώσσα HTML. Υποστηρίζονται μόνο από τα Netscape 2 και άνω και Internet Explorer 3 και άνω. Ωστόσο αυτό δεν αποτελεί πια σοβαρό πρόβλημα αφού οι περισσότεροι χρήστες χρησιμοποιούν κάποιο από τα προγράμματα αυτά.

<FRAMESET>...</FRAMESET>

Αν υποθέσουμε πως θέλουμε να χωρίσουμε την οθόνη μας σε n τμήματα (2 ή περισσότερα), τότε αυτό θα απαιτήσει από εμάς αρχικά την κατασκευή n+1 σελίδων HTML. Μια σελίδα για κάθε παράθυρο, συν μια σελίδα που θα καθορίζει τις θέσεις των άλλων. Αυτή η τελευταία σελίδα είναι η ορίζουσα σελίδα που θα καθορίσει την θέση και το μέγεθος των πλαισίων μέσα στα οποία θα τοποθετηθούν οι υπόλοιπες.

Στην ορίζουσα σελίδα, η οδηγία <BODY> αντικαθίσταται από την <FRAMESET> (οι δύο αυτές οδηγίες είναι αμοιβαία αποκλειόμενες). Η <FRAMESET> ορίζει το μέγεθος των πλαισίων και δέχεται στο εσωτερικό της μια άλλη οδηγία, την <FRAME> που καθορίζει το περιεχόμενό τους.

Η <FRAMESET> δέχεται τις ακόλουθες παραμέτρους που καθορίζουν τον αριθμό και το μέγεθος των πλαισίων που θα δημιουργηθούν:

COLS="X,X,X"

Η COLS καθορίζει τις στήλες, δηλαδή τα κάθετα πλαίσια που θα δημιουργηθούν. Στο παράδειγμα αυτό έχουν οριστεί τρεις στήλες. Έτσι θα δημιουργηθούν τρία κάθετα πλαίσια με μορφή:

Όσο περισσότερες τιμές περιέχει η COLS τόσο περισσότερα κάθετα πλαίσια θα δημιουργηθούν. Το πλάτος του κάθε πλαισίου καθορίζεται από τις τιμές που θα τοποθετηθούν μεταξύ των κομμάτων μέσα στα εισαγωγικά (δηλαδή τις τιμές που θα έχει κάθε Χ). Οι τιμές αυτές μπορεί να οριστούν σε pixels, σαν ποσοστό της συνολικής οθόνης ή σαν ελεύθερες (θα καθορίσει ο browser το μέγεθος του πλαισίου). Π.χ. στην περίπτωση <FRAMESET COLS="150,15%,*"> έχουμε το πρώτο πλαίσιο να έχει πλάτος 150 pixels, το δεύτερο να καταλαμβάνει το 15% της οθόνης και το τρίτο να έχει έκταση όσο όλο το εναπομείναν μέρος της. Το μήκος φυσικά του πλαισίου καθορίζεται από το περιεχόμενό του.

Επειδή, δεν γνωρίζετε το μέγεθος που παραθύρου από το οποίο θα βλέπει ο επισκέπτης σας την σελίδα που δημιουργήσατε, προσπαθήστε πάντοτε να ορίζετε σχετικές τιμές ή να έχετε μια τιμή σε *.

Αν υπάρχουν περισσότεροι από ένας αστερίσκοι, τότε θεωρούνται ισότιμοι. Π.χ. αν δώσουμε μια οδηγία της μορφής <FRAMESET COLS="*,*">, τότε ο browser θα χωρίσει την οθόνη σε 2 ίσα μέρη:

ROWS="X,X,X"

Αντίστοιχα ισχύουν και για την ROWS που με τον ίδιο τρόπο χωρίζει την οθόνη σε οριζόντια πλαίσια με μορφή:

<FRAME>...</FRAME>

Αφού αποφασίσαμε για την διαρρύθμιση που θα έχουν τα πλαίσια της σελίδας μας (αν θα είναι στήλες ή γραμμές και τον αριθμό τους), πρέπει τώρα να ορίσουμε τι θα περιέχει το καθένα. Αυτό γίνεται με την οδηγία <FRAME> που τοποθετείται μέσα στην <FRAMESET>.

Η <FRAME> συντάσσεται με τον ίδιο τρόπο όπως η <IMG>. Έχουμε δηλαδή:

<FRAME SRC="page1.html"> όπου page1.html το αρχείο που θέλουμε να εμφανίζεται στο πλαίσιο αυτό.

Έτσι ολόκληρη η ορίζουσα σελίδα των πλαισίων έχει ως εξής:

<HTML><HEAD><TITLE>ΠΑΡΑΔΕΙΓΜΑ FRAMES</TITLE></HEAD>

Στο παράδειγμα αυτό έχουμε ένα σύνολο από τρία κάθετα πλαίσια (στήλες) από τα οποία το πρώτο καταλαμβάνει το 25% της οθόνης και περιέχει την σελίδα που βρίσκεται στο αρχείο page1.html, το δεύτερο καταλαμβάνει το 30% της οθόνης και περιέχει την σελίδα που βρίσκεται στο αρχείο page3.html, και το τρίτο καταλαμβάνει το υπόλοιπο τμήμα της οθόνης (45%) και περιέχει την σελίδα που βρίσκεται στο αρχείο page3.html. Δηλαδή η θέση των πλαισίων καθορίζεται ανάλογα με την σειρά που αναφέρονται μέσα στην οδηγία <FRAMESET>. Από αριστερά προς τα δεξιά για τις στήλες και από πάνω προς τα κάτω για τις γραμμές.

ΠΑΡΑΤΗΡΗΣΕΙΣ:

1. Αν δοκιμάσετε να δείτε τα πλαίσια που δημιουργήσατε χωρίς να έχετε προσθέσει την οδηγία <FRAME> (π.χ. βάλετε απλώς

<FRAMESET COLS="25%,30%,*"></FRAMESET>. Δεν θα δείτε τίποτε. Πρέπει να έχει οριστεί και η <FRAME> για να λειτουργήσει ο οδηγία </FRAMESET>

2. Η χρήση πλαισίων (Frames) δεν είναι απλή υπόθεση. Εκτός από τον σχεδιασμό της αρχιτεκτονικής και την κατασκευή τους πρέπει να λάβουμε υπ' όψιν μας και τα περιεχόμενα κάθε πλαισίου για να βεβαιωθούμε πως θα μπορεί να τα διαβάσει με άνεση ο επισκέπτης των σελίδων μας. Eδώ βοηθά πολύ το Διάγραμμα Ανάγνωσης (Storyboarding).

<NOFRAME>...</NOFRAME>

Δυστυχώς, αρκετοί browsers δεν υποστηρίζουν πλαίσια (Frames). Αυτό σημαίνει πως, τίποτε από ότι έχετε δημιουργήσει δεν θα είναι ορατό από τους ανθρώπους που τους χρησιμοποιούν. Για να περιορίσουμε τα προβλήματα που δημιουργεί μια τέτοια κατάσταση χρησιμοποιούμε την οδηγία <NOFRAME>.

Οτιδήποτε βρίσκεται μέσα σε αυτήν (και μπορείτε να βάλετε κείμενο, άλλες οδηγίες, παραπομπές κτλ.) δεν θα εμφανιστεί αν ο browser υποστηρίζει πλαίσια. Θα εμφανιστεί όμως αν ο browser δεν τα υποστηρίζει. Έτσι, μπορείτε να χρησιμοποιήσετε την <NOFRAME> για να πληροφορήσετε τον επισκέπτη σας πως δεν βλέπει την σελίδα σας διότι δεν υποστηρίζει Frames ο browser του ή για να δημιουργήσετε μια εναλλακτική πρώτη σελίδα ειδικά για τέτοιες περιπτώσεις. Η <NOFRAME> τοποθετείται μέσα στην <FRAMESET>. Π.χ.

<HTML><HEAD><TITLE>ΠΑΡΑΔΕΙΓΜΑ FRAMES</TITLE></HEAD>

<FRAME SRC="page2.html"><FRAME SRC="page3.html"><NOFRAME>Ο browser που χρησιμοποιείτε δεν υποστηρίζει Frames. Για μια πιο απλή περιήγηση των σελίδων μας κάντε κλικ <A HREF="noframes.html">εδώ</A>.</NOFRAME></FRAMESET></HTML>

Πιο Περίπλοκοι Συνδυασμοί Πλαισίων

Ο πιο συνηθισμένος συνδυασμός πλαισίων που συναντούμε σε Web σελίδες είναι αυτός που περιέχει 2 στήλες. Ωστόσο, σε αρκετές περιπτώσεις μπορεί να χρειαστούμε κάτι πιο περίπλοκο, δηλαδή ένα συνδυασμό γραμμών και στηλών. Για να το πετύχουμε αυτό χρησιμοποιούμε την οδηγία <FRAMESET> μέσα στον εαυτό της.

Μπορούμε να ξεκινήσουμε ορίζοντας πρώτα τις στήλες και μετά τις γραμμές ή το αντίστροφο. Αυτό θα εξαρτηθεί από την αρχιτεκτονική που θέλουμε να πετύχουμε.

Μερικά παραδείγματα είναι τα ακόλουθα:

<HTML><HEAD><TITLE>ΠΑΡΑΔΕΙΓΜΑ FRAMES</TITLE></HEAD>

Ορίσαμε 2 γραμμές και μετά χωρίσαμε την πρώτη σε 2 στήλες.

Ορίσαμε 2 στήλες και μετά χωρίσαμε την πρώτη σε 2 γραμμές.

Ορίσαμε 2 γραμμές και μετά χωρίσαμε κάθε μια σε 2 στήλες.

Κίνηση Μεταξύ Πλαισίων

Τα Πλαίσια (Frames) που δημιουργήσαμε παραπάνω έχουν πλήρη αυτονομία. Ο επισκέπτης των σελίδων μας μπορεί να ακολουθεί τις παραπομπές σε κάποιο από αυτά και να εμφανίζονται νέες σελίδες σε αυτό, χωρίς να αλλάζουν ή να επηρεάζονται τα άλλα. Αυτή η δυνατότητα όμως δεν μας είναι ιδιαίτερα χρήσιμη (αν και θα μπορούσε ίσως να έχει κάποιες εφαρμογές). Ο κύριος λόγος που χρησιμοποιούμε τα πλαίσια είναι για επιλέγουμε από κάποια από αυτά και να εμφανίζονται τα αποτελέσματα των επιλογών μας σε κάποια άλλα. Π.χ. έχουμε δύο πλαίσια και το ένα έχει κάποιον πίνακα περιεχομένων. Επιλέγοντας στοιχεία από εκεί μεταφερόμαστε σε άλλες σελίδες που εμφανίζονται όμως μόνο στο άλλο πλαίσιο. Έτσι ο πίνακας περιεχομένων μένει πάντα ορατός.

Για να το επιτύχουμε αυτό, πρέπει πρώτα να δώσουμε ένα όνομα σε κάθε πλαίσιο (με την παράμετρο NAME) και στην συνέχεια να δημιουργήσουμε παραπομπές που να υποδεικνύουμε στον browser σε ποιο πλαίσιο (frame) ή παράθυρο (window) θα τις εμφανίσει (με την παράμετρο TARGET).

NAME

Για να δώσουμε όνομα σε ένα πλαίσιο, αρκεί να προσθέσουμε την παράμετρο NAME μέσα στην οδηγία <FRAME>. Π.χ.

<FRAME SRC="periex.html" NAME="TABLECON"> ή <FRAME SRC="wellcome.html" NAME="CONTENTS"> Το πλαίσιο με το όνομα TABLECON θα το χρησιμοποιήσουμε για την απεικόνιση του πίνακα περιεχομένων (table of contents), και το πλαίσιο CONTENTS για να εμφανίζουμε τις σελίδες με το περιεχόμενο (content).

TARGET

Με την παράμετρο NAME δώσαμε όνομα στα πλαίσια της σελίδας μας. Με την TARGET καθοδηγούμε τις παραπομπές που δημιουργούμε έτσι ώστε να εμφανίζονται στο πλαίσιο (συνήθως) ή στο παράθυρο (σπανιότερα) της επιλογής μας. Η σύνταξη της TARGET είναι:

<A HREF="tango.html" TARGET="CONTENTS">το κείμενο της παραπομπής</A>

Σε μερικές περιπτώσεις μπορεί να θέλουμε όλες οι παραπομπές μιας σελίδας να εμφανίζονται στο ίδιο πλαίσιο ή παράθυρο (να έχουν το ίδιο TARGET). Στην περίπτωση αυτή, μπορούμε να βάλουμε την TARGET μέσα στην οδηγία <BASE> που ως γνωστόν εμπεριέχεται στην <HEAD>.

Π.χ. <HEAD><TITLE>Ο ΤΙΤΛΟΣ ΤΗΣ ΣΕΛΙΔΑΣ</TITLE><BASE TARGET="CONTENTS"></HEAD>

Με τον τρόπο αυτό, όλες οι παραπομπές θα διοχετεύονται στο πλαίσιο CONTENTS.

Αν θέλουμε μια παραπομπή να μην διοχετεύεται στο πλαίσιο ή το παράθυρο που ορίστηκε στην <BASE> αλλά κάπου αλλού, τότε απλώς θα ορίσουμε το άλλο πλαίσιο ή παράθυρο μέσα στην παραπομπή της όπως θα κάναμε και κανονικά αν δεν υπήρχε η <BASE>.

Στο παρακάτω παράδειγμα όλες οι παραπομπές ανοίγουν στο πλαίσιο CONTENTS εκτός από την τελευταία που ανοίγει στο πλαίσιο ή παράθυρο που ονομάζεται ALLO. Αν δεν υπάρχει παράθυρο με αυτό το όνομα, τότε ο browser θα ανοίξει από μόνος του ένα νέο δικό του παράθυρο (window) ανεξάρτητο από τα πλαίσια (frames) που ήδη υπάρχουν (δηλαδή θα ξανανοίξει τον εαυτό του άλλη μια φορά) και θα θεωρήσει πως αυτό το παράθυρο είναι το ALLO.

<HTML><HEAD><TITLE>ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ</TITLE><BASE TARGET="CONTENTS"></HEAD><BODY BGCOLOR=WHITE><H2>ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ</H2><OL><LI><A HREF="page1.html">TANGO</A><LI><A HREF="page2.html">RUMBA</A><LI><A HREF="page3.html">MAMBO</A><LI><A HREF="page4.html">CHA CHA</A><LI><A HREF="page5.html" TARGET="ALLO">’λλο Παράθυρο</A></OL></BODY>

</HTML>

ΠΑΡΑΤΗΡΗΣΗ

Η TARGET χρησιμοποιείται μόνο όταν θέλουμε να μετακινηθούμε από ένα πλαίσιο ή παράθυρο σε άλλο πλαίσιο ή παράθυρο. Όταν οι σελίδες μας θα κινηθούν μέσα στο ίδιο πλαίσιο ή παράθυρο (δηλαδή μέσα στο ίδιο frame ή window) τότε δεν είναι απαραίτητη.

Η TARGET δεν μπορεί να πάρει ονόματα που να αρχίζουν από _ (underscore). Ο χαρακτήρας αυτός χρησιμοποιείται για κάποια ονόματα πλαισίων ή παραθύρων της TARGET που η Netscape τα ονομάζει Μαγικά (Magic). Αυτά είναι:

TARGET="_BLANK"

Ανοίγει ένα νέο ανώνυμο παράθυρο.

TARGET="_SELF"

Η default τιμή της TARGET. Η νέα σελίδα που θα εμφανιστεί ακολουθώντας μια παραπομπή, θα φορτωθεί πάνω στο ήδη υπάρχον πλαίσιο ή παράθυρο (η νέα σελίδα εξαφανίζει την προηγούμενη και παίρνει την θέση της).

TARGET="_TOP" (Προσέξτε ότι το TOP γράφεται με κεφαλαία)

Για να εμφανίσει αυτή την σελίδα ο browser θα ανοίξει από μόνος του ένα νέο δικό του παράθυρο ανεξάρτητο από τα πλαίσια (frames) που ήδη υπάρχουν (δηλαδή θα ξανανοίξει τον εαυτό του άλλη μια φορά). Το παράθυρο αυτό θα είναι maximized, δηλαδή θα καταλαμβάνει ολόκληρη την οθόνη, ανεξάρτητα από το μέγεθος που είχε το άλλο παράθυρο του browser από το οποίο επέλεξε αυτή την παραπομπή ο χρήστης.

TARGET="_parent" (Προσέξτε ότι το parent γράφεται με πεζά, δηλαδή με μικρά γράμματα)

Υποχρεώνει την νέα σελίδα που φορτώνεται όταν ακολουθείται αυτή η παραπομπή, να πάρει την θέση ολόκληρου του frameset. Δηλαδή θα αντικατασταθούν από αυτή όλα τα υπάρχοντα πλαίσια (frames) και την θέση τους θα πάρει αυτή η σελίδα σαν το μοναδικό ορατό κείμενο. Φυσικά μπορεί η σελίδα αυτή να είναι frameset και έτσι να δημιουργήσει νέα πλαίσια (frames) που θα αντικαταστήσουν τα παλιά.

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