Η κατασκευή Web σελίδων που να περιλαμβάνουν περισσότερα από ένα ανεξάρτητα ή (πιο συχνά) συνδεδεμένα μεταξύ τους πλαίσια αποτελεί ένα από τα πιο νέα και ισχυρά εργαλεία που μας δίνει η γλώσσα HTML. Υποστηρίζονται μόνο από τα Netscape 2 και άνω και Internet Explorer 3 και άνω. Ωστόσο αυτό δεν αποτελεί πια σοβαρό πρόβλημα αφού οι περισσότεροι χρήστες χρησιμοποιούν κάποιο από τα προγράμματα αυτά.
Για την αυτόματη κατασκευή Frames από το Dreamweaver στην αρχική σελίδα του προγράμματος επιλέγουμε Create from Samples και στη συνέχεια Framesets.
Επιλέγουμε το συνδυασμό των Frames που επιθυμούμε και από τα Preferences –New Document ορίζουμε το encoding της σελίδας. Στη συνέχεια επιλέγουμε Create και στην προτροπή ονοματοδοσίας κάθε frame είτε δίνουμε δικά μας ονόματα, είτε διατηρούμε όσα μας προτείνει το πρόγραμμα.
Στη συνέχεια το Dreamweaver χωρίζει το Design View σε τμήματα, κάθε ένα από τα οποία αντιστοιχεί σε μια σελίδα. Ορίζουμε τις ρυθμίσεις της σελίδας (π.χ. το Encoding) και στη συνέχεια τοποθετούμε περιεχόμενο και τις αποθηκεύουμε.
Αν στην πορεία της εργασίας μας αποφασίσουμε πως δεν είχαμε κάνει καλή επιλογή από frames και θέλουμε να προσθέσουμε και νέα κάνουμε κλικ στο Design View του frame που θέλουμε να χωρίσουμε περαιτέρω και επιλέγουμε Modify – Frameset.
Επειδή από το Document View βλέπουμε μόνο τις σελίδες που αποτελούν το Frameset για να αποθηκεύσουμε την ορίζουσα σελίδα μπορούμε να ζητήσουμε Preview όλου του set και αυτομάτως θα μας προταθεί η αποθήκευσή του.
|
<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> που τοποθετείται μέσα στην <FRAMESET>.
Η <FRAME> συντάσσεται με τον ίδιο τρόπο όπως η <IMG>. Έχουμε δηλαδή:
<FRAME SRC="page1.html"> όπου page1.html το αρχείο που θέλουμε να εμφανίζεται στο πλαίσιο αυτό.
Έτσι ολόκληρη η ορίζουσα σελίδα των πλαισίων έχει ως εξής:
<HTML><HEAD><TITLE>ΠΑΡΑΔΕΙΓΜΑ FRAMES</TITLE></HEAD>
<FRAMESET COLS="25%,30%,*"><FRAME SRC="page1.html">
<FRAME SRC="page2.html"><FRAME SRC="page3.html"></FRAMESET></HTML>
Στο παράδειγμα αυτό έχουμε ένα σύνολο από τρία κάθετα πλαίσια (στήλες) από τα οποία το πρώτο καταλαμβάνει το 25% της οθόνης και περιέχει την σελίδα που βρίσκεται στο αρχείο page1.html, το δεύτερο καταλαμβάνει το 30% της οθόνης και περιέχει την σελίδα που βρίσκεται στο αρχείο page3.html, και το τρίτο καταλαμβάνει το υπόλοιπο τμήμα της οθόνης (45%) και περιέχει την σελίδα που βρίσκεται στο αρχείο page3.html. Δηλαδή η θέση των πλαισίων καθορίζεται ανάλογα με την σειρά που αναφέρονται μέσα στην οδηγία <FRAMESET>. Από αριστερά προς τα δεξιά για τις στήλες και από πάνω προς τα κάτω για τις γραμμές.
ΠΑΡΑΤΗΡΗΣΕΙΣ:
1. Αν δοκιμάσετε να δείτε τα πλαίσια που δημιουργήσατε χωρίς να έχετε προσθέσει την οδηγία <FRAME> (π.χ. βάλετε απλώς
<FRAMESET COLS="25%,30%,*"></FRAMESET>. Δεν θα δείτε τίποτε. Πρέπει να έχει οριστεί και η <FRAME> για να λειτουργήσει ο οδηγία </FRAMESET>
2. Η χρήση πλαισίων (Frames) δεν είναι απλή υπόθεση. Εκτός από τον σχεδιασμό της αρχιτεκτονικής και την κατασκευή τους πρέπει να λάβουμε υπ' όψιν μας και τα περιεχόμενα κάθε πλαισίου για να βεβαιωθούμε πως θα μπορεί να τα διαβάσει με άνεση ο επισκέπτης των σελίδων μας. Eδώ βοηθά πολύ το Διάγραμμα Ανάγνωσης (Storyboarding).
<NOFRAME>
Δυστυχώς, αρκετοί browsers δεν υποστηρίζουν πλαίσια (Frames). Αυτό σημαίνει πως, τίποτε από ότι έχετε δημιουργήσει δεν θα είναι ορατό από τους ανθρώπους που τους χρησιμοποιούν. Για να περιορίσουμε τα προβλήματα που δημιουργεί μια τέτοια κατάσταση χρησιμοποιούμε την οδηγία <NOFRAME>.
Οτιδήποτε βρίσκεται μέσα σε αυτήν (και μπορείτε να βάλετε κείμενο, άλλες οδηγίες, παραπομπές κτλ.) δεν θα εμφανιστεί αν ο browser υποστηρίζει πλαίσια. Θα εμφανιστεί όμως αν ο browser δεν τα υποστηρίζει. Έτσι, μπορείτε να χρησιμοποιήσετε την <NOFRAME> για να πληροφορήσετε τον επισκέπτη σας πως δεν βλέπει την σελίδα σας διότι δεν υποστηρίζει Frames ο browser του ή για να δημιουργήσετε μια εναλλακτική πρώτη σελίδα ειδικά για τέτοιες περιπτώσεις. Η <NOFRAME> τοποθετείται μέσα στην <FRAMESET>. Π.χ.
<HTML><HEAD><TITLE>ΠΑΡΑΔΕΙΓΜΑ FRAMES</TITLE></HEAD>
<FRAMESET COLS="25%,30%,*"><FRAME SRC="page1.html">
<FRAME SRC="page2.html"><FRAME SRC="page3.html"><NOFRAME>Ο browser που χρησιμοποιείτε δεν υποστηρίζει Frames. Για μια πιο απλή περιήγηση των σελίδων μας κάντε κλικ <A HREF="noframes.html">εδώ</A>.</NOFRAME></FRAMESET></HTML>
![[eeei.gr Logo]](http://www.eeei.gr/site_images/eeei_transparent_logo.gif){kind=logo}
