Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Πλαίσια Στεφανέας Πέτρος Ζαμαρίας Βασίλης
Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε Άδεια χρήσης άλλου τύπου, αυτή πρέπει να αναγράφεται ρητώς.
Βασικά στοιχεία της HTML > Πλαίσια (1/5) Τα πλαίσια είναι χρήσιμα όταν θέλουμε να χωρίσουμε την ιστοσελίδα μας σε τμήματα όπου το καθένα να εμφανίζει διαφορετική σελίδα. Επίσης, μ' αυτό τον τρόπο, μπορούμε να κρατούμε πληροφορίες μόνιμα στην οθόνη μας (για παράδειγμα ένα πίνακα περιεχομένων της ιστοσελίδας μας). Για τη δημιουργία πλαισίων δημιουργούμε μια ιστοσελίδα ( χωρίς να συμπεριλάβουμε τον κωδικό <BODY>), όπου ορίζουμε τα πλαίσια που επιθυμούμε με τη χρήση των κωδικών <FRAMESET> και </FRAMESET>. 1
Βασικά στοιχεία της HTML > Πλαίσια (2/5) Ως όρισμα του <FRAMESET> βάζουμε τις στήλες ή τις γραμμές που θέλουμε να χωρίσουμε την ιστοσελίδα μας προσδιορίζοντας το μέγεθός τους σε εικονοστοιχεία ή σε ποσοστό του παραθύρου: π.χ.: <FRAMESET ROWS="50,150,*"> Η εντολή αυτή χωρίζει το παράθυρό μας σε τρία οριζόντια πλαίσια με μέγεθος 50, 150 εικονοστοιχεία τα δύο πρώτα, ενώ το τρίτο είναι όλο το υπόλοιπο παράθυρο (αυτή είναι η έννοια του αστερίσκου). 2
Βασικά στοιχεία της HTML > Πλαίσια (3/5) Επόμενη κίνηση είναι ο καθορισμός των αρχείων που θα ανοίγουν σε κάθε πλαίσιο. Αυτό επιτυγχάνεται με την εντολή: <FRAME NAME="intro" SRC="introduction.html"> <FRAME NAME="cont" SRC="Tables_of_contents.html"> 3
Βασικά στοιχεία της HTML > Πλαίσια (4/5) Με το όρισμα NAME δίνουμε ένα όνομα στο συγκεκριμένο πλαίσιο για να μπορούμε να "κατευθύνουμε" συνδέσεις σ' αυτό το πλαίσιο, ενώ με το SRC καθορίζουμε το συγκεκριμένο αρχείο που θα περιέχει αρχικά το πλαίσιο. Μπορούμε να επιτύχουμε αρκετά περίπλοκες διατάξεις με συνδυασμό πλαισίων. 4
Βασικά στοιχεία της HTML > Πλαίσια (5/5) Για παράδειγμα, ο κώδικας για τη βασική σελίδα των σημειώσεων είναι: <FRAMESET ROWS="20%,*"> <FRAME NAME="UPPER" SRC="title.html"> <FRAMESET COLS="25%,*"> <FRAME NAME="FRAME1" SRC="contents.html"> <FRAME NAME="FRAME2" SRC="pyrforos.html"></FRAMESET> 5
Σύνδεση σε πλαίσιο (1/2) Αν σε ένα αρχείο html που βρίσκεται σε κάποιο πλαίσιο δημιουργήσουμε μια σύνδεση με το γνωστό τρόπο (<A HREF="...">...<A>), η σύνδεση θα ανοίξει στο ίδιο πλαίσιο. Αν όμως χρησιμοποιήσουμε ως όρισμα το TARGET ="όνομα πλαισίου" η σύνδεση θα ανοίξει στο πλαίσιο με το καθορισμένο όνομα. Παραμένοντας στο παράδειγμα της βασικής σελίδας των σημειώσεων αυτών, στο αρχείο CONTENTS.html οι συνδέσεις καθοδηγούνται στο πλαίσιο με το όνομα FRAME2: 6
Σύνδεση σε πλαίσιο (2/2) <UL> <LI><A HREF="HTML.html" TARGET="FRAME2"> Βασικά στοιχεία της HTML </A> <HR WIDTH=100%> <LI><A HREF="browser.html" TARGET="FRAME2"> Χρήση του Netscape Composer </A> <HR WIDTH=100%> <LI><A HREF="code.html" TARGET="FRAME2"> Επέμβαση στον πηγαίο κώδικα</a> <HR WIDTH=100%> <LI><A HREF="pages.html" TARGET="FRAME2"> Ιστοσελίδες στο διαδίκτυο</a> <HR WIDTH=100%> <LI><A HREF="homeworks.html" TARGET="FRAME2"> Εργασίες </a> </UL> 7
Γραμμές κύλισης Οι γραμμές κύλισης εμφανίζονται αυτόματα σε ένα πλαίσιο όταν το κείμενο δεν χωρά στο πλαίσιο. Αν δεν θέλετε να εμφανίζονται οι γραμμές κύλισης τότε στον κωδικό FRAME μπορείτε να βάλετε το όρισμα scrolling="no". Σημειώστε ότι με τη χρήση αυτού του ορίσματος οι γραμμές κύλισης δεν εμφανίζονται ακόμα και αν δεν χωρούν όλες οι πληροφορίες στο συγκεκριμένο πλαίσιο. 8
Αλλαγή μεγέθους πλαισίων από το χρήστη Χρησιμοποιώντας το ποντίκι, μπορεί ο χρήστης να αλλάξει το μέγεθος των πλαισίων σύροντας τις διαχωριστικές γραμμές. Μπορείτε όμως να εμποδίσετε αυτή την αλλαγή (αν δε θέλετε να αλλάζει η διάταξη της σελίδας σας), με τη χρήση του ορίσματος NORESIZE στον κωδικό FRAME. Σημειώστε ότι αν χρησιμοποιήσετε το όρισμα NORESIZE σε κάποιο κωδικό FRAME, ο χρήστης δεν μπορεί να αλλάξει το μέγεθος των πλαισίων που μοιράζονται διαχωριστικές γραμμές με το συγκεκριμένο. 9
Αλλαγή περιγραμμάτων στα πλαίσια Η αλλαγή αυτή μπορεί να γίνει με ορίσματα στον κωδικό FRAMESET. Ο κωδικός BORDER="..." καθορίζει το πάχος των περιγραμμάτων σε pixels, ενώ το όρισμα BORDERCOLOR="..."καθορίζει το χρώμα τους. Πλήρης απόκρυψη των περιγραμμάτων επιτυγχάνεται με τον κωδικό FRAMEBORDER="0". 10
Αλλαγή περιθωρίων στα πλαίσια Τα περιθώρια καθορίζουν το κενό χώρο ανάμεσα στο περίγραμμα και το περιεχόμενο του πλαισίου. Ελέγχονται από τα ορίσματα του κωδικού FRAME: MARGINWIDTH="..." και MARGINHEIGHT="..." 11
Ένθετο πλαίσιο (1/6) Ένα ένθετο πλαίσιο μπορεί να εμφανίζεται μέσα στα περιεχόμενα μιας ιστοσελίδας. Ο βασικός κωδικός έχει την ακόλουθη δομή: <IFRAME SRC="..." NAME="..." WIDTH="..." HEIGHT="..."></IFRAME> όπου το όρισμα SRC δίνει το όνομα του αρχείου που θα εμφανίζεται αρχικά στο ένθετο πλαίσιο, NAME καθορίζει το όνομα του πλαισίου, ενώ WIDTH και HEIGHT καθορίζουν (σε pixels) το πλάτος και το ύψος του ένθετου πλαισίου. 12
Ένθετο πλαίσιο (2/6) Σημειώνουμε ότι ο χρήστης δεν μπορεί να αλλάξει το μέγεθος ενός τέτοιου πλαισίου. Άλλα χρήσιμα ορίσματα ενός ένθετου πλαισίου είναι: ALIGN (με τιμές LEFT ή RIGHT) που επιτρέπουν στο κείμενο να αναδιπλώνεται γύρω από το ένθετο πλαίσιο, MARGINWIDTH και MARGINHEIGHT για τα περιθώρια καθώς και SCROLLING (με τιμές YES ή NO) για τις γραμμές κύλισης. 13
Ένθετο πλαίσιο (3/6) Αν θέλω να παρουσιάσω ένα άλλο αρχείο μέσα στο πλαίσιο αυτό, απλά στην εντολή της σύνδεσης ορίζω ως TARGET το όνομα του πλαισίου. Για παράδειγμα, με την εντολή: <a href="iframe_lec2.html" target="iframe_lec">εδω</a> "στέλνω" το αρχείο iframe_lec2.html στο ένθετο πλαίσιο. 14
Ένθετο πλαίσιο (4/6) Μερικά ακόμα χρήσιμα στοιχεία για τα πλαίσια είναι: 1. Ο χρήστης έχει τη δυνατότητα να απενεργοποιήσει την εμφάνιση πλαισίων (ή ακόμα, μερικοί αναγνώστες ιστοσελίδων δεν εμφανίζουν πλαίσια). Σ' αυτή την περίπτωση, μπορείτε να χρησιμοποιήσετε τον κωδικό <NOFRAMES> και </NOFRAMES> ακριβώς πριν το τελευταίο </FRAMESET>. Ανάμεσα στους δύο κωδικούς μπορείτε να βάλετε εναλλακτικές πληροφορίες για την περίπτωση μη εμφάνισης των πλαισίων. 15
Ένθετο πλαίσιο (5/6) 2. Η τιμή του ορίσματος TARGET μπορεί να είναι _BLANK, οπότε η σύνδεση ανοίγει σε νέο παράθυρο, χωρίς όνομα, του αναγνώστη ιστοσελίδων. Αν η τιμή είναι _TOP, τότε ανοίγει τη σύνδεση στο τρέχον παράθυρο καταργώντας τα πλαίσια. 16
Ένθετο πλαίσιο (6/6) 3. Αν όλες, ή οι περισσότερες σύνδεσης μιας ιστοσελίδας σας οδηγούνται στο ίδιο πλαίσιο, μπορείτε να χρησιμοποιήσετε τον κωδικό <BASE TARGET="...">, ο οποίος μπαίνει μέσα στην περιοχή που ορίζεται από τους κωδικούς <HEAD> και </HEAD>. Αν κάποια συγκεκριμένη σύνδεση καθορίζει άλλο πλαίσιο ως TARGET, αυτή η εντολή θα επικαλύψει τη αντίστοιχη γενική μέσω της BASE. 17
Άσκηση 6: Πληκτρολογήστε τον κώδικα HTML ώστε να εμφανίζονται στον αναγνώστη ιστοσελίδων δύο πλαίσια ως εξής: 18
Κάτω από τις επικεφαλίδες "ΚΟΥΑΡΚ" και "ΛΕΠΤΟΝΙΑ" υπάρχουν συνδέσεις. Επιλογή, για παράδειγμα, της "3ης γενιάς" στα ΚΟΥΑΡΚ, θα εμφανίζεται η πληροφορία στο δεξί πλαίσιο: 19
Επιλογή του "ΚΟΥΙΖ" θα οδηγεί στο: 20
Αν η επιλογή είναι λάθος θα εμφανίζεται ως: 21
ενώ αν η επιλογή είναι σωστή ως: 22
Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα Ε.Μ.Π.» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικού πόρους.