Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Transcript

1 Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός Χειμερινό εξάμηνο HTML Πίνακες 1

2 Βασικά μέρη ενός HTML πίνακα (table) Λεζάντα ή τίτλος (caption) Επικεφαλίδες (headers) των στηλών (θα μπορούσαν να τοποθετηθούν και στην πρώτη στήλη) γραμμές (rows) Στήλες (columns) κελιά (cells) με τα δεδομένα του πίνακα HTML πίνακες (tables) Πίνακας με περίγραμμα πάχους = 1 <TABLE BORDER=1> <CAPTION>Στατιστικά στοιχεία</caption> <TR> <TH>Όνομα</TH> <TH>Ύψος (m)</th> <TH>Βάρος (kg)</th> <TH>Χρώμα ματιών</th> </TR> <TR> <TD>Μαρία</TD> <TD>1,70</TD> <TD>55</TD> <TD>Γαλάζιο</TD> </TR> Εισαγωγή νέας γραμμής (table row) Εισαγωγή νέου κελιού επικεφαλίδας (table header), μορφοποιείται ως bold Εισαγωγή νέου κελιού δεδομένων (table data) Λεζάντα πίνακα <TR> <TD>Θωμάς</TD> <TD>1,82</TD> <TD>87</TD> <TD>Πράσινο</TD> </TR> <TR> <TD>Ελένη</TD> <TD>1,65</TD> <TD>65</TD> <TD>Καστανό</TD> </TR> </TABLE> 2

3 Ορισμός του πλάτους του πίνακα <TABLE BORDER=1 width = 100%>... </ΤΑΒLE> Ορίζει το πλάτος του πίνακα σε ποσοστό % επί το τρέχον πλάτος της οθόνης. Αυξομειώνοντας το πλάτος της οθόνης, προσαρμόζουμε και το πλάτος του πίνακα. Ορίσματα cellpadding & cellspacing <table border=3 cellpadding=4 cellspacing=8> cellpadding: ορίζει την απόσταση που έχουν τα περιεχόμενα των κελιών απο τα περιθώρια - μεγάλες τιμές για το Υ κάνουν τα κελιά μεγαλύτερα cellspacing: καθορίζει (σε pixels) το πάχος ανάμεσα <table στις border=10 εσωτερικές cellspacing=20> γραμμές που χωρίζουν τα κελιά <table border=1 cellpadding=10> 3

4 Ορίσματα για συνένωση κελιών & χρωματισμό κελιών/γραμμών και στοίχιση <table border=1> <tr bgcolor = green> <td>row 1 col 1</td> <td align=center colspan=2> Row 1 col 2-3</td> </tr> <tr> Συνένωση 2ου και 3ου κελιού της 2ης <td>row 2 col 1</td> στήλης και στοίχιση στο πάνω μέρος <td rowspan=2 valign=top >Row 2 col 2</td> <td>row 2 col 3</td> </tr> <tr> <td>row 3 col 1</td> <td bgcolor = red>row 3 col 3</td> </tr> </table> Χρώμα παρασκηνίου κελιού (3,3) Χρώμα παρασκηνίου 1ης γραμμής Συνένωση 2ου και 3ου κελιού της 1ης γραμμής και οριζόντια στοίχιση Δημιουργία σύνθετων πινάκων και χρωματισμός περιγράμματος <TABLE BORDER="5" BGCOLOR="orange" BORDERCOLOR="green" CELLSPACING="0" CELLPADDING="5"> 4

5 HTML πίνακες για τη διάταξη (layout) web σελίδων Οι ΗΤΜL πίνακες χωρίζουν το χώρο που καταλαμβάνουν σε ορθογώνια τμήματα. Με κατάλληλη χρήση των ορισμάτων cellspan και rowspan μπορούμε να σχεδιάσουμε πίνακες όπως ακριβώς τους θέλουμε Χρησιμοποιώντας HTML πίνακες, μπορούμε να δομήσουμε το περιεχόμενο της σελίδας μας σε περισσότερες από μία στήλες (όπως οι στήλες των εφημερίδων) χωρίς να φαίνεται ότι υπάρχει πίνακας από πίσω Πως;;; <table border=0> Δεν υπάρχει περιορισμός στο περιεχόμενο που θα τοποθετήσουμε στα κελιά (κείμενο ή γραφικά) HTML πίνακες για τη διάταξη web σελίδων (παραδείγματα) Παράδειγμα 5

6 Πλαίσια ( Frames) Τι είναι τα πλαίσια (frames) Τεχνολογία που παρέχει τη δυνατότητα εμφάνισης περιεχομένου που διαφορετικά θα απαιτούσε πολλές οθόνες Οι πληροφορίες εμφανίζονται σε ανεξάρτητες περιοχές (πλαίσια) Τα περιεχόμενα κάθε περιοχής ενημερώνονται χωρίς να επηρεάζονται τα περιεχόμενα των υπολοίπων π.χ. κάνοντας κλικ σε μια από τις συνδέσεις του κάτωαριστερού πλαισίου, θα ενημερωθούν τα περιεχόμενα του μεγάλου πλαισίου στα δεξιά, όχι όμως και εκείνου πάνωαριστερά Πρόβλημα: Τα frames δεν υποστηρίζονται από όλους τους browsers (εκδόσεις της HTML) 6

7 Παραδείγματα διάταξης πλαισίων Και πολλές ακόμα διατάξεις Επιλέγοντας παράθυρο (Ι) Οι σύνδεσμοι που γνωρίσαμε ως τώρα, όταν επιλεχθούν, φορτώνουν μια νέα σελίδα, αντικαθιστώντας την παλιά Υπάρχει περίπτωση να θέλετε να ανοίξετε το περιεχόμενο σε ένα δεύτερο παράθυρο, αφήνοντας άθικτο το αρχικό. Μια τέτοια περίπτωση είναι η αρχική σελίδα να περιέχει μια λίστα με πολλούς συνδέσμους, π.χ. 50 διαφορετικές φωτογραφίες ή ορισμούς, όπου θα είναι πιο εύχρηστο η λίστα να παραμείνει διαθέσιμη Υπερβολική χρήση: ανοίγουν πολλά νέα παράθυρα (ενοχλητικό, κατανάλωση πόρων του συστήματος) To μειονέκτημα του ανοίγματος πολλών νέων παραθύρων λύνεται με τη χρήση πλαισίων (π.χ. τοποθετώ τη λίστα συνδέσμων στο αριστερό πλαίσιο που παραμένει πάντα αμετάβλητο και ενημερώνω το δεξί πλαίσιο που καταλαμβάνει το κυρίως μέρος της οθόνης) 7

8 Επιλέγοντας παράθυρο (ΙΙ) Ο κώδικας HTML που χρησιμοποιούμε για να ορίσουμε το παράθυρο που θα εμφανιστεί το περιεχόμενο της σελίδας μοιάζει: <a href="some_url.html" target="window_name"> Η σελίδα some_url.html θα ανοίξει σε νέο παράθυρο με όνομα window_name. Αν υπάρχει ήδη ανοικτό παράθυρο με αυτό το όνομα, το περιεχόμενο του θα αντικατασταθεί από τη σελίδα some_url.html Ειδικές περιπτώσεις: target = _top target = _self> target = _blank target = _parent Επιλέγοντας παράθυρο: Παράδειγμα <HTML> <HEAD> <TITLE>Parent Window - Red</TITLE> </HEAD> <BODY> <H1>Parent Window - Red</H1> <P> <A HREF="yellow.html" TARGET="yellow_page">Open</A> the Yellow Page in a new window. <BR> <A HREF="blue.html" TARGET= _blank">open</a> the Blue Page in a new window. </P> <P> <A HREF="green.html" TARGET="yellow_page">Replace</A> the yellow page with the Green Page.</P> </BODY> Εκτέλεση </HTML> 8

9 Ta βασικά για τα πλαίσια Μια ιστοσελίδα που χρησιμοποιεί πλαίσια αποτελείται από το κύριο αρχείο HTML που καθορίζει τα framesets, ή αλλιώς τη διαμόρφωση και διάταξη των πλαισίων της σελίδας. Αυτό είναι το αρχείο που φορτώνει τη δομή των πλαισίων και που αντιπροσωπεύει τη URL της σελίδας. Πλεονεκτήματα: καλύτερη οργάνωση του περιεχομένου. Πολύ χρήσιμα όταν κάποια πληροφορία πρέπει να παραμένει πάντα διαθέσιμη Μειονεκτήματα: Πληκτρολογούμε μια URL διεύθυνση αλλά «φορτώνουμε» πολλά HTML αρχεία (καθυστέρηση) Σελίδες με πλαίσια δεν υποστηρίζονται από κάποιους (παλαιότερους) browsers left.htm right.htm bottom.htm page.htm (έγγραφο ορισμού πλαισίων) Οργάνωση πλαισίων 9

10 Έγγραφο με πολλά κάθετα πλαίσια <HTML> <HEAD> <TITLE>Three Columns</TITLE> </HEAD> <FRAMESET COLS="100,50%,*"> <FRAME SRC="leftcol.html"> <FRAME SRC="midcol.html"> <FRAME SRC="rightcol.html"> </FRAMESET> <NOFRAMES>.. </NOFRAMES> </HTML> Η ετικέτα frameset περιλαμβάνει τους ορισμούς για τα πλαίσια αυτού του εγγράφου. Προσοχή!!! Η ετικέτα frameset αντικαθιστά την ετικέτα body Τρία κάθετα πλαίσια με πλάτος 100 pixels, 50% του πλάτους της οθόνης και το υπόλοιπο της οθόνης, αντίστοιχα Τα HTML έγγραφα που θα «φορτωθούν» στο αριστερό, μεσαίο και δεξί, αντίστοιχα, πλαίσιο Ο κώδικας που περιλαμβάνεται ανάμεσα στις ετικέτες NOFRAMES εμφανίζεται μόνο στους browsers που δεν υποστηρίζουν frames Έγγραφο με πολλά κάθετα πλαίσια: Παράδειγμα Εκτέλεση 10

11 Έγγραφο με πολλά οριζόντια πλαίσια <HTML> <HEAD> <TITLE>Three Columns</TITLE> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="toprow.html"> <FRAME SRC="botrow.html"> </FRAMESET> <NOFRAMES>.. </NOFRAMES> </HTML> Δύο οριζόντια πλαίσια που καταλαμβάνουν το 60% και 40% του πλάτους της οθόνης, αντίστοιχα Τα HTML έγγραφα που θα «φορτωθούν» στο αριστερό, μεσαίο και δεξί, αντίστοιχα, πλαίσιο Έγγραφο με πολλά κάθετα πλαίσια: Παράδειγμα Εκτέλεση 11

12 Δημιουργία πολύπλοκων ομάδων πλαισίων (I) away.htm frameset.htm (έγγραφο ορισμού πλαισίων) choice.htm Εκτέλεση reason1.htm reason2.htm reason3.htm reason4.htm reason5.htm reason6.htm Δημιουργία πολύπλοκων ομάδων πλαισίων (II) <HTML> <BODY> <P>Επιλέξτε ένα λόγο:</p> <HR> <P><a href="reason1.html" target="main">1ος λόγος</a></p> <P><a href="reason2.html" target ="main">2ος λόγος</a></p> <P><a href="reason3.html" target ="main">3ος λόγος</a></p> <P><a href="reason4.html" target ="main">4ος λόγος</a></p> <P><a href="reason5.html" target ="main">5ος λόγος</a></p> <P><a href="reason6.html" target ="main">6ος λόγος</a></p> </BODY> </HTML> 12

13 Δημιουργία πολύπλοκων ομάδων πλαισίων (III) Χωρίζει τη σελίδα σε δύο κάθετα πλαίσια <FRAMESET COLS="125,*"> <FRAME SRC="choice.html" NAME="left"> Χωρίζει το δεξί πλαίσιο σε <FRAMESET ROWS="25,*"> δύο οριζόντια πλαίσια Ορίζει το πάνω <FRAME SRC="away.html" NAME="top"> πλαίσιο <FRAME SRC="reason1.html" NAME="main"> </FRAMESET> </FRAMESET> Ορίζει ποιο είναι το αριστερό πλαίσιο Το όνομα του κάτω δεξιά παραθύρου είναι ίδιο με το όνομα που δόθηκε στην ιδιότητα target των συνδέσμων του αριστερού πλαισίου. Έτσι, η επιλογή των συνδέσμων θα προκαλεί αντικατάσταση των περιεχομένων αυτού του πλαισίου. Δημιουργία ένθετων πλαισίων (inline frames) page.htm (περιλαμβάνει τον ορισμό του αρχείου που θα φορτωθεί στο ένθετο πλαίσιο) reason1.htm reason2.htm reason3.htm reason4.htm reason5.htm reason6.htm Εκτέλεση 13

14 Δημιουργία ένθετων πλαισίων (inline frames) <BODY BGCOLOR="#FFCC99"> <H2>Λείπω από το γραφείο μου επειδή...</h2> <P ALIGN="center"> <A HREF="reason1.html" TARGET="reason">1ος Λόγος</A> <A HREF="reason2.html" TARGET="reason">2ος Λόγος</A> <A HREF="reason3.html" TARGET="reason">3ος Λόγος</A> <A HREF="reason4.html" TARGET="reason">4ος Λόγος</A> <A HREF="reason5.html" TARGET="reason">5ος Λόγος</A> <A HREF="reason6.html" TARGET="reason">6ος Λόγος</A> </P> <DIV ALIGN="center"> <IFRAME NAME="reason" SRC="reason1.html" WIDTH="450" HEIGHT="315"> </DIV> Στα inline frames επανέρχεται η ετικέτα body Το ένθετο πλαίσιο θα εμφανιστεί στο κέντρο της σελίδας Ορισμός του ένθετου πλαισίου με διαστάσεις 450x315 pixels στο οποίο θα «φορτωθεί» αρχικά το αρχείο reason1.html. Το όνομα του πλαισίου είναι ίδιο με το όνομα που δόθηκε στην ιδιότητα target των συνδέσμων στη σελίδα που το περιλαμβάνει. Εργασία Διάταξη web σελίδων με ένθετα πλαίσια (inline frames) Εκτέλεση 14

15 Θέμα 1ης εργασίας Ημερομηνία παράδοσης: Τρίτη 1/12/2009 Εκφώνηση Οδηγίες: από τη σελίδα «Ανακοινώσεις» του μαθήματος: Διάταξη web σελίδων με πίνακες Εκτέλεση 15