TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο

Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Ιόνιο Πανεπιστήμιο» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 1

Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons 2

Τοποθέτηση Στοιχείων στη Σελίδα Ανάπτυξη Δικτυακών Τόπων 2

1. Η Σημασία και οι Χρήσεις των Φύλλων Στυλ για τη Διάταξη Σελίδων Ανάπτυξη Δικτυακών Τόπων 3

Ο βασικότερος στόχος είναι να κρατάμε το περιεχόμενο στο κύριο HTML έγγραφο και να συγκεντρώνουμε όλα τα σχεδιαστικά ζητήματα στο φύλλο στυλ. Το πιο εντυπωσιακό πλεονέκτημα αυτής της διευθέτησης έχει να κάνει με τη συντήρηση του δικτυακού τόπου. Το ίδιο ισχύει και για τη συνολική διάταξη των σελίδων. Εάν το περιεχόμενο κρατείται ξεχωριστά από τη σχεδίαση, η οποία υλοποιείται με φύλλα στυλ, η επανασχεδίαση ενός δικτυακού τόπου μπορεί να γίνει πολύ πιο γρήγορα. Ανάπτυξη Δικτυακών Τόπων 4

2. Δημιουργία Μονόστηλης, Ρευστής Διάταξης Σελίδας με Κεντράρισμα Ανάπτυξη Δικτυακών Τόπων 5

Η ρευστή κεντραρισμένη διάταξη σελίδας είναι αρκετά δημοφιλής, ανεξάρτητα από το εάν χρησιμοποιείται με μια ή με περισσότερες στήλες περιεχομένου. Το φύλλο στυλ για αυτή τη διάταξη (μονόστηλη) είναι αρκετά απλό. Το τμήμα που σχετίζεται με τη διάταξη είναι περιλαμβάνει μόνο τις ακόλουθες δηλώσεις στυλ για το tag body και τον τομέα περιεχομένου που τιτλοφορείται content : Ανάπτυξη Δικτυακών Τόπων 6

συνέχεια Ανάπτυξη Δικτυακών Τόπων 7

2.1 Ανάλυση του Κώδικα Οι ιδιότητες που εμφανίζονται μέσα στο tag body: body { margin: 0px; padding: 0px; } Καταργούμε δηλαδή όλα τα εξωτερικά και εσωτερικά περιθώρια. Αυτό σημαίνει ότι μπορούμε να τοποθετήσουμε το περιεχόμενο μέχρι τα άκρα του παραθύρου του browser και μας παρέχε ευελιξία στο σχεδιασμό της σελίδας. Ανάπτυξη Δικτυακών Τόπων 8

2.2 #content Η κύρια ενότητα περιεχομένου τοποθετείται μέσα σε μια ενότητα (div) με όνομα content χρησιμοποιώντας τον παρακάτω κώδικα: <div id= content > Content goes here </div> Η μορφοποίηση του περιεχομένου αυτού επιτυγχάνεται προσθέτοντας ιδιότητες στη δήλωση που υπάρχει στο φύλλο στυλ για αυτή την ενότητα #content { margin: 50px; padding: 20px; background-color: #ccc; border:1px dashed black; } Ανάπτυξη Δικτυακών Τόπων 9

συνέχεια Η ιδιότητα margin προσθέτει εξωτερικό περιθώριο 50 px στην περίμετρο του πλαισίου με το περιεχόμενο. Επειδή τα tag div είναι στοιχεία επιπέδου μπλοκ στην HTML η ενότητα περιεχομένου γεμίζει τον εναπομείναντα διαθέσιμο χώρο. Και επειδή υπάρχει και ισόποσος κενός χώρος και στις 4 πλευρές, το πλαίσιο με το περιεχόμενο κεντράρεται στο παράθυρο του browser. H ιδιότητα padding δημιουργεί κενό χώρο ανάμεσα στα άκρα του πλαισίου και το περιεχόμενο στο εσωτερικό του. Έτσι δημιουργούμε μια κενή ζώνη 20 px περιμετρικά στο πλαίσιο, στο εσωτερικό του. Τα πεδία κειμένου έχουν μέγεθος (μήκος) 20 χαρακτήρες εκτός και αν καθορίσετε κάτι διαφορετικό με την ιδιότητα size. H σημαντικότερη ιδιότητα του tag input είναι η name. Ανάπτυξη Δικτυακών Τόπων 10

2.3 Βάζοντάς τα όλα μαζί Ανάπτυξη Δικτυακών Τόπων 11

3. Δημιουργία Πολύστηλης, Ρευστής Διάταξης Σελίδας Ανάπτυξη Δικτυακών Τόπων 13

Πιθανώς η ευρύτερα χρησιμοποιούμενη διάταξη ιστοσελίδων είναι αυτή με τις τρεις στήλες όπου μια ή περισσότερες στήλες αυξομειώνονται ανάλογα με το μέγεθος του παραθύρου του browser. Αυτή η διευθέτηση αφήνει την κεντρική στήλη για το πραγματικό περιεχόμενο του δικτυακού τόπου. Ανάπτυξη Δικτυακών Τόπων 14

3.1 Ανάλυση του Κώδικα Οι ιδιότητες που εμφανίζονται μέσα στο tag body: body { margin: 10px 10px 0px 10px; padding: 0px; } Η διάταξη αυτή προβλέπει εξωτερικό περιθώριο 10 px στην επάνω, στη δεξιά και στην αριστερή πλευρά και καθόλου στην κάτω πλευρά. Επίσης απενεργοποιεί το εσωτερικό περιθώριο Ανάπτυξη Δικτυακών Τόπων 17

3.2 #header Το αντίστοιχο κομμάτι του φύλλου στυλ για την ενότητα Η κύρια ενότητα header #header { height: 50px; background-color: #ccc; padding: 5px; } Η δήλωση στυλ για αυτό το στοιχείο καθορίζει μόνο το ύψος του, το χρώμα του φόντου και το εσωτερικό περιθώριο. Προσοχή: Αν το ύψος της ενότητας header είναι 50px στην πραγματικότητα θα είναι 60px από το επάνω άκρο του διαθέσιμου χώρου του παραθύρου. Ανάπτυξη Δικτυακών Τόπων 18

3.3 #navigation Η πρώτη στήλη της διάταξής μας έχει τους μηχανισμούς πλοήγησης. #naviation { position: absolute; left: 10px; top: 70px; width: 150px; border: 1px solid #000; padding: 5px; } Η νέα ιδιότητα position μπορεί να πάρει τις ακόλουθες τιμές Ανάπτυξη Δικτυακών Τόπων 20

συνέχεια 1. static: Η προεπιλεγμένη, κανονική ροή ενός εγγράφου που υλοποιείται με τη στάνταρ HTML. 2. relative: Παρέχει ένα τρόπο για να αλλάζετε την τοποθέτηση ενός στοιχείου στη σελίδα, σε σχέση με τον εαυτό του. 3. absolute: Η απόλυτη τοποθέτηση χρησιμοποιείται για την τοποθέτηση στοιχείων πάνω στη σελίδα με απόλυτη ακρίβεια, ουσιαστικά ξεχωρίζοντάς τα από την κανονική ροή. Η ιδιότητα left καθορίζει που θα τοποθετηθεί το αριστερό άκρο της στήλης (σε σχέση με το παράθυρο της εφαρμογής browser). Ανάπτυξη Δικτυακών Τόπων 21

συνέχεια Το ακόλουθο σχηματικό διάγραμμα θα σας βοηθήσει να αντιληφθείτε οπτικά τι έχετε πετύχει. Ανάπτυξη Δικτυακών Τόπων 22

3.4 #extras Η στήλη extras της διάταξής μας είναι όμοοια με τη στήλη navigation με τη μόνη διαφορά ότι τοποθετείται 10 pixels από το δεξιό άκρο του παραθύρου του browser. #extras { position: absolute; right: 10px; top: 70px; width: 150px; border: 1px solid #000; padding: 5px; } Μετά από αυτό η γραφική αναπαράσταση της διάταξης περιλαμβάνει δυο από τις τρεις στήλες που προσπαθούμε να δημιουργήσουμε. Ανάπτυξη Δικτυακών Τόπων 23

3.5 #content Η μεσαία στήλη όπου θα εμφανίζεται το πραγματικό περιεχόμενο, είναι σχεδιασμένη ώστε να εντάσσεται στην κανονική (στατική) ροή του εγγράφου. #content { background-color: #999; margin-left: 162px; margin-right: 162px; padding: 5px; } Δε χρειάζεται να καθορίσουμε πόσο πιο κάτω από την κορυφή της σελίδας θα εμφανίζεται η στήλη αυτή γιατί εξ ορισμού «κάθεται» κάτω από την ενότητα header. Ανάπτυξη Δικτυακών Τόπων 25

3.6 #footer Το τελευταίο κομμάτι της πολύστηλης διάταξης μας είναι η κατώτερη ενότητα με το όνομα footer. #footer { border-top: 2px solid #000; padding: 5px; } H ενότητα αυτή θα γεμίσει αυτόματα τον οριζόντιο χώρο στο παράθυρο του browser. Το ύψος καθορίζεται βάσει της ποσότητας του περιεχομένου εκτός και αν εμείς θέλουμε να καθορίσουμε κάτι διαφορετικό. Ανάπτυξη Δικτυακών Τόπων 27

3.7 Βάζοντάς τα όλα μαζί Βλέποντας τη διάταξή μας σε έναν browser θα βλέπαμε το παρακάτω. Ανάπτυξη Δικτυακών Τόπων 29

4. Διαστρωμάτωση Περιεχομένου σε Επίπεδα Μέσα σε μια Διάταξη Ανάπτυξη Δικτυακών Τόπων 30

Μπορείτε να ελέγχετε ολόκληρη τη σειρά διαστρωμάτωσης των επιπέδων με την ιδιότητα z-index. Δηλαδή μπορείτε να καθορίζετε ποια ενότητα περιεχομένου βρίσκεται πάνω στην περίπτωση που πολλαπλές ενότητες επικαλύπτονται. Παράδειγμα: Ο παρακάτω κώδικας δημιουργεί δυο πλαίσια στην οθόνη το πρώτο με τίτλο Apples απόλυτα τοποθετημένο 20 pixels από το επάνω και το αριστερό άκρο και το δεύτερο με τίτλο Oranges σχετικά τοποθετημένο. Ανάπτυξη Δικτυακών Τόπων 31

συνέχεια Για να αλλάξουμε την εμφάνιση των πεδίων μπορούμε να χρησιμοποιήσουμε την ιδιότητα z-index. Αν δώσουμε στο επίπεδο Apples τιμή z-index μεγαλύτερη από αυτή του επιπέδου Oranges τότε το επίπεδο αυτό γίνεται ορατό. Ανάπτυξη Δικτυακών Τόπων 34

4.1 Ρεαλιστικές Χρήσεις των Επιπέδων σε Ιστοσελίδες Διαφήμιση: κάνοντας κλικ πάνω σε ένα διαφημιστικό σε μια ιστοσελίδα αυτό γίνεται μεγαλύτερο χωρίς να αλλάζει τίποτα άλλο στην ιστοσελίδα. Κατά πάσα πιθανότητα η μεγαλύτερη έκδοση ήταν ένα κρυφό επίπεδο. Παιχνίδια: πολλοί δημιουργοί παιχνιδιών χρησιμοποιούν δυναμική HTML και τοποθετούν διαφορετικά στοιχεία σε επίπεδα, έτσι ώστε να μπορούν να μετακινούνται εύκολα σε όλη την έκταση της σελίδας ανεξάρτητα από το υπόλοιπο περιεχόμενό της. Πλοήγηση: υπάρχουν δικτυακοί τόποι που χρησιμοποιούν αναδιπλούμενες λίστες με το περιεχόμενό τους τοποθετημένο σε ένα επίπεδο το οποίο να γίνεται ορατό με ένα κλικ στην κατάλληλη σύνδεση. Ανάπτυξη Δικτυακών Τόπων 35

5. Χρήση Εξωτερικών Φύλλων Στύλ Ανάπτυξη Δικτυακών Τόπων 36

Με τη δημιουργία ενός εξωτερικού φύλλου στυλ με πληροφορίες διάταξης μπορείτε να επηρεάζετε όσες σελίδες επιθυμείτε αρκεί σε αυτές τις σελίδες να ενσωματώνετε μια αναφορά προς αυτό. Υπάρχουν δυο τρόποι για να αναφέρεστε σε ένα εξωτερικό φύλλο στυλ μέσα από μια σελίδα: 1. Η διασύνδεση (link) 2. Η εισαγωγή (import) Ανάπτυξη Δικτυακών Τόπων 37

5.1 Διασύνδεση Ενός Εξωτερικού Φύλλου Στυλ Η διασύνδεση επιτυγχάνεται χρησιμοποιώντας το tag link ως εξής: <link rel= stylesheet href= styles.css /> Ο παραπάνω κώδικας λέει απλά στην εφαρμογή browser να χρησιμοποιήσει το περιεχόμενο του αρχείου styles.css για την εμφάνιση της τρέχουσας σελίδας. Μπορείτε επίσης να προσθέσετε την ιδιότητα media στο tag link για να καθορίσετε σε ποιο μέσο (οθόνη, εκτυπωτής) εφαρμόζεται το φύλλο στυλ. Άλλες πιθανές τιμές για την ιδιότητα media είναι: projection (για παρουσιάσεις), aural (για εργαλεία σύνθεσης ομιλίας), braille (για παρουσίαση σε απτικές συσκευές), tty (για μη αναλογική γραμματοσειρά), tv, all Ανάπτυξη Δικτυακών Τόπων 38

5.2 Εισαγωγή ενός Εξωτερικού Φύλλου Στυλ Ένας άλλος τρόπος για να αναφερθείτε σε ένα φύλλο στυλ είναι εισάγοντας (import) τα στυλ του στο τρέχον έγγραφο. Αυτό επιτυγχάνεται με τη δήλωση @import που τοποθετείται ανάμεσα στο αρχικό και τελικό tag style. <style type= text/css media= screen > @import /layouts/screen.css ; </style> Με αυτή τη μέθοδο μπορείτε να αναμειγνύετε εσωτερικά και εξωτερικά φύλλα στυλ καθώς επίσης έχετε τη δυνατότητα να εισάγετε πολλαπλά φύλλα στυλ. Ανάπτυξη Δικτυακών Τόπων 39