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

Transcript

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

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

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

4 Δημιουργία Λιστών Ανάπτυξη Δικτυακών Τόπων 2

5 1. Χρήση Αριθμημένων Λιστών σε Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 3

6 Μη-Αριθμημένη λίστα: είναι μια λίστα στην οποία δεν χρησιμοποιούνται αριθμοί ή γράμματα αλλά σαν πρόθεμα σε κάθε καταχώρηση είναι οι κουκίδες. Επίσης δεν βασίζονται σε κάποια σειρά σπουδαιότητας για τις καταχωρήσεις τους. Παράδειγμα: Ο απαιτούμενος HTML κώδικας δείχνει: Red Green Blue Όπως βλέπουμε ο κώδικας για τη δημιουργία των δυο τύπων λιστών είναι σχεδόν πανομοιότυπος. Ανάπτυξη Δικτυακών Τόπων 4

7 συνέχεια Χρησιμοποιώντας την ιδιότητα type μπορείτε να αλλάζετε το στυλ των κουκίδων. Υπάρχουν τρεις επιλογές: Disc: Οι κουκίδες εμφανίζονται σαν μικροί γεμάτοι κύκλοι Circle: Οι κουκίδες εμφανίζονται σαν κύκλοι χωρίς γέμισμα Square: Οι κουκίδες εμφανίζονται σαν τετραγωνίδια. Ανάπτυξη Δικτυακών Τόπων 5

8 3. ΧρήσηΛιστών Ορισμών σε Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 6

9 συνέχεια Μπορείτε επίσης να καθορίζετε τον αριθμό ή το γράμμα έναρξης για μια αριθμημένη λίστα με την ιδιότητα start. Παράδειγμα: c. Color d. Working with text e. Working with links Ο απαιτούμενος HTML κώδικας δείχνει: Η τιμή της ιδιότητας start όπως και αυτή της ιδιότητας type είναι πάντα ένας ακέραιος. Ανάπτυξη Δικτυακών Τόπων 7

10 συνέχεια Αν θέλετε να αλλάξετε μια μεμονωμένη τιμή, για παράδειγμα η τρίτη καταχώρηση της λίστας να χρησιμοποιεί το γράμμα g, μπορείτε να προσθέσετε την ιδιότητα value στο tag li της συγκεκριμένης καταχώρησης. Παράδειγμα: c. Color d. Working with Text g. Working with Links Ο απαιτούμενος HTML κώδικας δείχνει: Ανάπτυξη Δικτυακών Τόπων 8

11 3. Χρήση Λιστών Ορισμών σε Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 9

12 Λίστες ορισμών: χρησιμοποιούνται για την παρουσίαση όρων και των αντίστοιχων ορισμών τους. Ανάπτυξη Δικτυακών Τόπων 10

13 4. Συνδυασμός και Έκθεση Δυο ή Περισσότερων Τύπων Λιστών σε Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 11

14 Μπορείτε επίσης να δημιουργήσετε μια λίστα μέσα σε μια άλλη λίστα ή ακόμα και έναν τύπο λίστας μέσα σε ένα διαφορετικό τύπο λίστας Παράδειγμα: O HTML κώδικας Ι. Introduction II. Part 1 A. Description B. Examples 1. Reference One 2. Reference Two III. Part 2 IV. Summary Ανάπτυξη Δικτυακών Τόπων 12

15 5. Μορφοποίηση Λιστών Ανάπτυξη Δικτυακών Τόπων 13

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

17 5.1 Προσαρμογή των Κουκίδων Θέλετε να δημιουργήσετε μια λίστα στην οποία κάθε καταχώριση θα έχει σαν πρόθεμα την εικόνα ενός αστερίσκου. Ανάπτυξη Δικτυακών Τόπων 15

18 συνέχεια Τι θα γίνεται όμως αν η λίστα σας έχει 20 καταχωρήσεις; Η προσθήκη αυτού του tag img θα ήταν κουραστική και χρονοβόρα. Ένας αποτελεσματικός τρόπος θα ήταν να αλλάξετε τη λίστα σε μη αριθμημένη και να χρησιμοποιήσετε ένα φύλλο στυλ στην κεφαλίδα της σελίδας. <style type= text/css > li {list-style-image: url( star.gif );} </style> Ανάπτυξη Δικτυακών Τόπων 16

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

20 συνέχεια O HTML κώδικας Ανάπτυξη Δικτυακών Τόπων 18

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

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

23 5.3 Πλοήγηση με Οριζόντιο Προσανατολισμό Μπορούμε εύκολα να κάνουμε μια λίστα να εμφανίζεται με οριζόντιο προσανατολισμό, καθορίζοντας ότι θα πρέπει να εμφανίζεται σαν ένθετο (inline) στοιχείο και όχι σαν στοιχείο επιπέδου μπλοκ, με την display: inline. Ανάπτυξη Δικτυακών Τόπων 21

24 συνέχεια Και το φύλλο στυλ για αυτή τη λίστα έχει ως εξής: Ανάπτυξη Δικτυακών Τόπων 22

25 Χρήση Πινάκων Ανάπτυξη Δικτυακών Τόπων 23

26 1. Η Σημασία και οι Χρήσεις των Πινάκων σε Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 24

27 Ένας πίνακας table είναι μια ενότητα πληροφοριών οι οποίες διαχωρίζονται σε μικρότερα μπλοκ, διευθετημένα σε γραμμές και στήλες, τα οποία αποκαλούνται κελιά (cells) του πίνακα. Για να μπορέσετε να σχεδιάσετε ένα πίνακα με την HTML καλό θα ήταν στην αρχή να τον σχεδιάσετε στο χαρτί. Ανάπτυξη Δικτυακών Τόπων 25

28 2. Δημιουργία μιας Απλής Δομής Πίνακα Ανάπτυξη Δικτυακών Τόπων 26

29 2.1 Η Δομή Ενός Πίνακα Πρέπει να καθορίσετε πόσο μεγάλες θα είναι ο πίνακας, δηλαδή τις διαστάσεις του. Η μονάδα μέτρησης είναι που χρησιμοποιείται είναι τα pixels. Τα τέσσερα βασικά tags για τη δημιουργία πινάκων Ανάπτυξη Δικτυακών Τόπων 27

30 Ανάπτυξη Δικτυακών Τόπων 28

31 2.2 Το περιεχόμενο των κελιών Σ ένα κελί πίνακα μπορείτε να συμπεριλάβετε σχεδόν οποιοδήποτε είδος περιεχομένου. Αν θέλετε ένα κελί να είναι κενό (χωρίς περιεχόμενο) πληκτρολογήστε τον κωδικό για ένα μη διακοπτόμενο κενό διάστημα ( ) ανάμεσα στο αρχικό και τελικό tag td. Ανάπτυξη Δικτυακών Τόπων 29

32 2.2.1 Κείμενο Μπορείτε να προσαρμόσετε το κείμενο που περιέχεται μέσα σε κάθε κελί χρησιμοποιώντας τα tags που μάθατε. Αν θέλετε όλο το κείμενο του κάθε κελιού να έχει τα ίδια χαρακτηριστικά η καλύτερη λύση είναι να χρησιμοποιήσετε ένα φύλλο στυλ όπου τα tag td θα είναι ο επιλογέας. <style type= text/css > td {font-family: verdana; font-size: 10pt;} </style> Ανάπτυξη Δικτυακών Τόπων 30

33 2.2.2 Εικόνες Μπορείτε να προσθέσετε εικόνες σε οποιαδήποτε κελιά ενός πίνακα. Ανάπτυξη Δικτυακών Τόπων 31

34 3. Μορφοποίηση Πινάκων σε Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 32

35 3.1 Περιγράμματα Οι πίνακες έχουν εσωτερικά και εξωτερικά περιγράμματα. Εξ ορισμού οι περισσότερες εφαρμογες browser ορίζουν το μέγεθος του περιγράμματος σε μηδέν, κάνοντας έτσι τα περιγράμματα αόρατα. Τρεις ιδιότητες είναι αυτές που σχετίζονται μτ η χρήση των περιγραμμάτων. Η ιδιότητα border Η ιδιότητα frame Η ιδιότητα rules Ανάπτυξη Δικτυακών Τόπων 33

36 3.1.1 Η ιδιότητα border Ακόμα και όταν θέλετε τα περιγράμματα του πίνακα να είναι αόρατα, η προσωρινή ενεργοποίησή τους είναι ένας τρόπος για να βλέπετε πώς διαμορφώνεται ο πίνακας. Αυτό γίνεται με την ιδιότητα border στο tag table καθορίζοντας σαν τιμή της έναν ακέραιο αριθμό μεγαλύτερο από το μηδέν. <table border= 3 > Όσο μεγαλύτερος είναι ο αριθμός τόσο πιο παχύ γίνεται το περίγραμμα. Ανάπτυξη Δικτυακών Τόπων 34

37 3.1.2 Η ιδιότητα frame Η ιδιότητα frame καθορίζει ποιο από τα εξωτερικά περιγράμματα που περιβάλλουν τον πίνακα θα είναι ορατό. Ανάπτυξη Δικτυακών Τόπων 35

38 3.1.3 Η ιδιότητα rules Χρησιμοποιείται για τον καθορισμό εκείνων των εσωτερικών περιγραμμάτων ενός πίνακα που θέλετε να είναι ορατά. Όπως και με τη frame αυτή η ιδιότητα δουλεύει μόνο αν έχετε καθορίσει μέγεθος περιγράμματος μεγαλύτερο από το μηδέν. Ανάπτυξη Δικτυακών Τόπων 36

39 3.2 Εσωτερικά και Εξωτερικά Περιθώρια Κελιών Για να ελέγχετε τα εξωτερικά και τα εσωτερικά περιθώρια μπορείτε να προσθέτετε τις ιδιότητες cellpadding: Ο κενός χώρος (εσωτερικό περιθώριο) ανάμεσα στο περιεχόμενου ενός κελιού και στα άκρα του κελιού. cellspacing: Ο κενός χώρος (εξωτερικό περιθώριο) ανάμεσα στα μεμονωμένα κελιά του πίνακα. Οι τιμές αυτών των δυο ιδιοτήτων πρέπει να εκφράζονται σε pixels σαν ακέραιοι μεγαλύτεροι του μηδενός. Ανάπτυξη Δικτυακών Τόπων 37

40 συνέχεια <table border= 5 cellpadding= 15 cellspacing= 5 > <table border= 5 cellpadding= 5 cellspacing= 15 > Ανάπτυξη Δικτυακών Τόπων 38

41 3.4 Βασικές Επιλογές Ευθυγράμμισης Μπορείτε να χρησιμοποιείτε την ιδιότητα float για να αναγκάζετε έναν πίνακα να ευθυγραμμίζεται στα δεξιά ή στα αριστερά του κειμένου που τον περιβάλει. Αν υπάρχει μόνο ένας πίνακας στην ιστοσελίδα τότε μπορείτε να χρησιμοποιήσετε το tag table σαν επιλογέα. table {float: right;} Ανάπτυξη Δικτυακών Τόπων 39

42 3.5 Χρώματα Για να αλλάξετε το χρώμα φόντου ενός ολόκληρου πίνακα, μπορείτε να προσθέσετε την ιδιότητα background-color στο φύλλο στυλ σας, χρησιμοποιώντας σαν επιλογέα το tag table. table {background-color: #999;} Ανάπτυξη Δικτυακών Τόπων 40

43 συνέχεια Στην περίπτωση που υπάρχουν περισσότεροι πίνακες στην ιστοσελίδα σας θα πρέπει να χρησιμοποιήσετε κλάσεις:.table1 {background-color: #999999;}.table2 {background-color: #333333;} Στη συνέχεια θα πρέπει να δηλώσετε το όνομα της κλάσης (χωρίς την τελεία) στο αρχικό tag table ως εξής: <table class= table1 > Ανάπτυξη Δικτυακών Τόπων 41

44 3.6 Εικόνες Φόντου Μπορείτε να προσθέσετε την ιδιότητα background-image στο φύλλο στυλ για να εφαρμόσετε μια εικόνα στο φόντο ενός πίνακα. Για το φόντο αυτό χρειάστηκε μια μικρή επαναλαμβανόμενη εικόνα και ο παρακάτω κώδικας table {background-image: url( images/stripes.gif );} Ανάπτυξη Δικτυακών Τόπων 42

45 3.7 Λεζάντες Το tag caption σας επιτρέπει να καθορίζετε λεζάντες για τους πίνακές σας. Είναι αυτόνομο στοιχείο το οποίο χρησιμοποιείται μετά από το tag table, αλλά πριν από τον ορισμό της πρώτης γραμμής του πίνακα. Ανάπτυξη Δικτυακών Τόπων 43

46 συνέχεια Το κείμενο της λεζάντας του πίνακα περικλείεται μέσα στο αρχικό και τελικό tag caption. Εξ ορισμού η λεζάντα εμφανίζεται με στοίχιση κέντρου στην επάνω πλευρά του πίνακα. Δυο ιδιότητες των φύλλων στυλ χρησιμεύουν για την αλλαγή της στοίχισης μιας λεζάντας: text align: χρησιμοποιείται για να καθορίσετε τη στοίχιση του κειμένου της λεζάντας αριστερή, δεξιά ή κέντρουστην πλευρά που τοποθετείται η λεζάντα. caption side: χρησιμοποιείται για να καθορίσετε σε ποια πλευρά του πίνακα θα πρέπει να τοποθετηθεί η λεζάντα (top-επάνω, right-δεξια, bottom-κάτω ή left-αριστερά). Ανάπτυξη Δικτυακών Τόπων 44

47 συνέχεια caption {text-align: right; caption-side: bottom;} Ανάπτυξη Δικτυακών Τόπων 45

48 4. Μορφοποίηση του Περιεχομένου σε Κελιά Πινάκων Ανάπτυξη Δικτυακών Τόπων 46

49 4.1 Στοίχιση Για να αλλάξετε την κατακόρυφη ή οριζόντια στοίχιση, μπορείτε να προσθέσετε την ιδιότητα text-align (για οριζόντια στοίχιση) ή την ιδιότητα vertical-align (για κατακόρυφη στοίχιση) στα tags tr, th ή td. tr: η προσθήκη της ιδιότητας text-align ή vertical-align έχει ως αποτέλεσμα την εφαρμογή της στοίχισης που καθορίζετε σε όλα τα κελιά της συγκεκριμένης γραμμής. td, th: η προσθήκη της ιδιότητας text-align ή verticalalign έχει ως αποτέλεσμα την εφαρμογή της στοίχισης που καθορίζετε μόνο στο συγκεκριμένο κελί. Για το φόντο αυτό χρειάστηκε μια μικρή Ανάπτυξη Δικτυακών Τόπων 47

50 συνέχεια Πιθανές τιμές για αυτές τις δυο ιδιότητες Ανάπτυξη Δικτυακών Τόπων 48

51 συνέχεια Αν θέλετε να στοιχίσετε όλα τα κελιά ενός πίνακα με παρόμοιο τρόπο χρησιμοποιείστε το tag td σαν επιλογέα στο φύλλο στυλ ως εξής: Ανάπτυξη Δικτυακών Τόπων 49

52 4.2 Πλάτος και Ύψος Μπορείτε να καθορίζετε τις διαστάσεις μεμονωμένων κελιών προσθέτοντας τις ιδιότητες width και hight στα tags td ή th. Η τιμή που λαμβάνουν οι ιδιότητες αυτές μπορεί να είναι είτε απόλυτη σε pixels είτε ποσοστό. Σε ένα πίνακα με τρεις στήλες όπου θέλουμε να έχουν το ίδιο πλάτος ανεξάρτητα από το μέγεθος του παραθύρου του browser τότε κάθε tag th πρέπει να έχει πλάτος το ένα τρίτο του συνολικού πλάτους του πίνακα: th {width: 33%;} Ανάπτυξη Δικτυακών Τόπων 50

53 4.3 Τα Πλάτη των κελιών και το Εσωτερικό Περιθώριό τους Αν θέλετε να έχετε λίγο κενό χώρο γύρω από το περιεχόμενο των κελιών σας (εσωτερικό περιθώριο padding), θα πρέπει να το συνυπολογίσετε όταν καθορίζετε τα πλάτη των κελιών. Αν για παράδειγμα θέλετε μια στήλη να έχει «καθαρό» πλάτος 100px και εσωτερικό περιθώριο 10px σε κάθε πλευρά, θα πρέπει να καθορίσετε το πλάτος της στήλης στα 120px. Η δήλωση αυτή στο φύλλο στυλ θα ήταν ως εξής: td {width: 120px; padding: 10px;} Ανάπτυξη Δικτυακών Τόπων 51

54 4.4 Χρώματα Η χρήση της ιδιότητας background-color με τα tags tr, td ή th σας επιτρέπει να καθορίσετε το χρώμα φόντου για μια γραμμή ή ένα μεμονωμένο κελί του πίνακα. tr {background-color: green;} Ο χρωματισμός των γραμμών ή των στηλών με διαφορετικές αποχρώσεις κάνει τον πίνακα πιο ευανάγνωστο και γίνεται εύκολα με δυο κλάσεις στο φύλλο στυλ:.hilte {background-color: #ccc;}.lolte {background-color: #999;} Ανάπτυξη Δικτυακών Τόπων 52

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

56 4.5 Απαγόρευση των Αλλαγών Γραμμών Περιστασιακά μπορεί να έχετε περιεχόμενο σε ένα κελί το οποίο πρέπει να εμφανίζεται εξ ολοκλήρου σε μια γραμμη. Σε αυτές τις περιπτώσεις χρησιμοποιείτε την ιδιότητα white-space με την τιμή nowrap για να πείτε στον browser να προσπαθήσει να διατηρήσει το περιεχόμενο το κελιού σε μια γραμμή. Το φύλλο στυλ θα έδειχνε ως εξής: Ανάπτυξη Δικτυακών Τόπων 54

57 4.6 Εξάπλωση Κελιών σε Πολλαπλές Στήλες Προσθέτοντας την ιδιότητα colspan σε ένα tag td ή th ένα κελί μπορεί να εξαπλώνεται κατά πλάτος δυο ή περισσοτέρων στηλών. Ανάπτυξη Δικτυακών Τόπων 55

58 4.7 Εξάπλωση Κελιών σε Πολλαπλές Γραμμές Προσθέτοντας την ιδιότητα rowspan σε ένα tag td ή th ένα κελί μπορεί να εξαπλώνεται κατά πλάτος δυο ή περισσοτέρων γραμμών. Ανάπτυξη Δικτυακών Τόπων 56

59 4.8 Ομαδοποίηση και Ευθυγράμμιση Γραμμών Για την ομαδοποίηση γραμμών σε πίνακες χρησιμοποιούνται 3 tags: thead κεφαλίδα πίνακα tfoot υποσέλιδο πίνακα tbody κορμός πίνακα Όταν χρησιμοποιείτε αυτά τα tags ο browser μπορεί να κάνει διαφοροποιήσεις μεταξύ των πληροφοριών κεφαλίδας, υποσέλιδου και κυρίως περιεχομένου. Οι πληροφορίες κεφαλίδας επαναλαμβάνονται στην κορυφή κάθε σελίδας. Ανάπτυξη Δικτυακών Τόπων 57

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

61 συνέχεια Ένα πλεονέκτημα που παρέχει η χρήση αυτών των tags είναι η ευκολότερη μορφοποίηση Ανάπτυξη Δικτυακών Τόπων 59

62 4.9 Ομαδοποίηση και Ευθυγράμμιση Στηλών Κατά τον ίδιο τρόπο μπορείτε να ομαδοποιείτε στήλες με τα στοιχεία col και colgroup. Η χρήση της colgroups σας επιτρέπει να εφαρμόζετε στυλ και χαρακτηριστικά μορφοποίησης σε ολόκληρες ομάδες στηλών αντί να το κάνετε για κάθε στήλη ξεχωριστά. Το ζεύγος αρχικού/τελικού tag colgroup περικλείει μια ή περισσότερες στήλες της ομάδας στηλών. Μπορείτε να χρησιμοποιείτε το tag colgroup σαν επιλογέα στο φύλλο στυλ για να μορφοποιείτε με τον ίδιο τρόπο όλες τις στήλες της συγκεκριμένης ομάδας. Συμπεριλαμβάνοντας την ιδιότητα span στο tag αυτό ορίζετε τον αριθμό των στηλών της ομάδας. Ανάπτυξη Δικτυακών Τόπων 60

63 Πλαίσια Ανάπτυξη Δικτυακών Τόπων 61

64 1. Η Σημασία και οι Χρήσεις των Πλαισίων σε Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 62

65 Τα πλαίσια σε ένα δικτυακό τόπο σας επιτρέπουν να εμφανίζετε δυο ή περισσότερες ξεχωριστές HTML σελίδες ταυτόχρονα. Παράδειγμα: Θέλετε οι συνδέσεις μιας σελίδας να είναι σε ένα πλαίσιο στο αριστερό μέρος και το περιεχόμενο σε ένα άλλο πλαίσιο στη δεξιά πλευρά της σελίδας. Μια τέτοια ομάδα πλαισίων ονομάζεται frameset. Δύο τύποι πλαισίων 1. Στάνταρ (στατικά) πλαίσια 2. Ένθετα (με δυνατότητα κίνησης) πλαίσια Ανάπτυξη Δικτυακών Τόπων 63

66 1.1 Η Υποστήριξη που Παρέχουν οι Εφαρμογές Browser για τα Πλαίσια Αρχικά δεν υπήρχαν πολλές εφαρμογές browser που να υποστήριζαν τα πλαίσια. Οι σημερινές εφαρμογές browser υποστηρίζουν όχι μόνο τα στάνταρ πλαίσια αλλά και τα ένθετα πλαίσια με δυνατότητα μετακίνησης. Η βασική εξαίρεση σε αυτόν τον κανόνα είναι οι εφαρμογές browser που προορίζονται για συσκευές χειρός. Ανάπτυξη Δικτυακών Τόπων 64

67 2. Δημιουργία μιας Απλής Σελίδας Πλαισίων (Frameset) Ανάπτυξη Δικτυακών Τόπων 65

68 Υπάρχει ένας ειδικός τύπος HTML αρχείου για μια σελίδα που απαρτίζεται από μια ομάδα πλαισίων ένα frameset. Μια σελίδα frameset δεν έχει tag body. Αντί αυτού περιλαμβάνουν ένα ζεύγος αρχικού και τελικού tag frameset το οποίο περικλείει όλα τα υπόλοιπα tags στη σελίδα. Ανάπτυξη Δικτυακών Τόπων 66

69 2.1 Στήλες και Γραμμές Προσθέστε τις ιδιότητες cols και rows στο αρχικό tag frameset για να καθορίσετε το μέγεθος και τη θέση κάθε πλαισίου της ομάδας πλαισίων. Ανεξάρτητα από το αν χρησιμοποιείτε την ιδιότητα cols ή rows η τιμή της κάθε μιας καθορίζεται σε pixels, σε ένα ποσοστό ή σαν μεταβλητή (*) Ανάπτυξη Δικτυακών Τόπων 67

70 2.2 Μόνο Στήλες Χρησιμοποιώντας την ιδιότητα cols χωρίς την rows, μπορείτε να δημιουργήσετε μια διάταξη πλαισίων αποτελούμενη αποκλειστικά από στήλες. <frameset cols= 200,* > <frame src= pagel.html /> <frame src= page2.html /> </frameset> Για να προσθέσετε μια τρίτη στήλη σε αυτό το frameset πρέπει να προσθέσετε μια επιπλέον τιμή στην ιδιότητα cols του tag frameset <frameset cols= 200,*,50 > Ανάπτυξη Δικτυακών Τόπων 68

71 2.3 Μόνο Γραμμές Χρησιμοποιώντας την ιδιότητα rows χωρίς την cols, μπορείτε να δημιουργήσετε μια διάταξη πλαισίων αποτελούμενη από οριζόντιες γραμμές. <frameset rows= 75,* > <frame src= page3.html /> <frame src= page4.html /> </frameset> Για να δημιουργήσετε μια διάταξη με 4 ισομεγέθεις γραμμές. <frameset rows= *,*,*,* > ή <frameset rows= 25%, 25%, 25%, 25% > Ανάπτυξη Δικτυακών Τόπων 69

72 2.4 Μεικτές Διατάξεις Μπορείτε να χρησιμοποιείτε αμφότερες τις ιδιότητες rows και cols στο ίδιο frameset για να δημιουργήσετε μια μεικτή διάταξη, με οριζόντια και κατακόρυφα πλαίσια. Ανάπτυξη Δικτυακών Τόπων 70

73 2.5 Καθορισμός του Περιεχομένου των Πλαισίων Αφού ορίσετε τη δομή του frameset θα πρέπει να πείτε στο browser ποια σελίδα θα φορτώνει σε κάθε πλαίσιο. Για το σκοπό αυτό χρησιμοποιείτε την ιδιότητα src στο tag frame. Πρώτα πρέπει να καθορίζεται το επάνω αριστερά πλαίσιο. Ανάπτυξη Δικτυακών Τόπων 71

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

75 3. Μορφοποίηση των Πλαισίων μιας Σελίδας Frameset Ανάπτυξη Δικτυακών Τόπων 73

76 3.1 Ονομασία Για να ονομάσετε τα πλαίσιά σας προσθέστε την ιδιότητα name σε κάθε ένα από τα tags frame και καθορίζετε ένα όνομα σχετικό με το περιεχόμενο του συγκεκριμένου πλαισίου. Για παράδειγμα αν χρησιμοποιείτε το αριστερό πλαίσιο ενός δίστηλου frameset για όλες τις συνδέσεις τότε θα μπορούσε να ονομαστεί links. <frameset cols= 150,* > <frame src= links.html name= links /> Και αν το δεξιό πλαίσιο περιέχει ένα εισαγωγικό κείμενο θα ονομαστεί intro <frame src= intro.html name= intro /> </frameset> Ανάπτυξη Δικτυακών Τόπων 74

77 3.2 Περιγράμματα Εξ ορισμού οι browsers διαχωρίζουν οπτικά κάθε πλαίσιο ενός frameset με ένα περίγραμμα γκρι χρώματος. Η ιδιότητα frameborder καθορίζει την αλλαγή εμφάνισης των περιγραμμάτων μεταξύ των πλαισίων. Ορίζοντάς την στην τιμή 0 λέτε στον browser να μην εμφανίζει περιγράμματα μεταξύ των πλαισίων. Με την τιμή 1 λέτε στον browser να εμφανίζει τα περιγράμματα μεταξύ του εν λόγω πλαισίου και οποιωνδήποτε γειτονικών του. Το πρόβλημα με την ιδιότητα αυτή είναι ότι ορισμένοι browsers δεν καταργούν όλο το χώρο που καταλαμβάνουν τα περιγράμματα όταν η frameborder τίθεται σε τιμή 0. Ανάπτυξη Δικτυακών Τόπων 75

78 συνέχεια Για να εξαφανίσουν τα περιγράμματα με την τρισδιάστατη εμφάνιση, καθώς και αυτόν τον εναπομένοντα κενό χώρο πολλοί δημιουργοί χρησιμοποιούν την ιδιότητα border με τιμή 0 στο tag frameset. Το μειονέκτημα της χρήσης της border στο tag frameset είναι το ότι δεν αποτελεί μέρος των επίσημων προδιαγραφών του W3C. Ο καλύτερος τρόπος για να καταργήσετε εντελώς το κενό ανάμεσα στα πλαίσια είναι ορίζοντας αμφότερες τις ιδιότητες border και frameborder σε τιμή 0. Ανάπτυξη Δικτυακών Τόπων 76

79 3.3 Περιθώρια στο Ύψος και Πλάτος των Πλαισίων Οι ιδιότητες που χρησιμοποιούμε για τα περιθώρια των πλαισίων είναι οι: marginheight: προσαρμόζει τον κενό χώρο ανάμεσα στο περιεχόμενο του πλαισίου και το πάνω και κάτω άκρο του. marginwidth: προσαρμόζει τον κενό χώρο ανάμεσα στο περιεχόμενο του πλαισίου και το αριστερό και δεξιό άκρο του. Οι περισσότεροι browsers χρησιμοποιούν εξ ορισμού ένα περιθώριο περίπου οκτώ pixels. Μπορείτε επίσης να χρησιμοποιείτε και φύλλα στυλ για την προσαρμογή των περιθωρίων και των περιγραμμάτων γύρω από τα πλαίσια. frame,frameset {padding: 0px; margin: 0px; border-style: none;} Ανάπτυξη Δικτυακών Τόπων 77

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

81 3.4 Κύλιση Οποτεδήποτε μια σελίδα περιέχει πληροφορίες περισσότερες από το χώρο του τρέχοντος παραθύρου ο browser περιλαμβάνει μια κατακόρυφη γραμμή κύλισης στη δεξιά πλευρά ή μια οριζόντια στο κάτω άκρο του παραθύρου. Χρησιμοποιώντας την ιδιότητα scrolling στο tag frame μπορείτε να υποχρεώνετε τον browser είτε να εμφανίζει είτα να μην εμφανίζει γραμμή κύλισης για κάθε πλαίσιο. Οι τιμές της ιδιότητας scrolling Ανάπτυξη Δικτυακών Τόπων 79

82 3.5 Αλλαγή Μεγέθους Εξ ορισμού οι browser δίνουν στους χρήστες τη δυνατότητα να αλλάζουν τα μεγέθη των πλαισίων με τη χρήση του ποντικιού και κάνοντας κλικ στα περιθώρια. Σε περίπτωση που θέλετε να απαγορεύετε στους χρήστες να αλλάζουν τα μεγέθη των πλαισίων σας τότε πρέπει να προσθέσετε στο tag frame την ιδιότητα noresize. <frame srv= links.html name= links marginheight= 20 marginwidth= 0 noresize= noresize /> Ανάπτυξη Δικτυακών Τόπων 80

83 4. Δημιουργία Συνδέσεων Μεταξύ Πλαισίων Ανάπτυξη Δικτυακών Τόπων 81

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

85 4.1 Προορισμοί Έστω ότι έχετε μια HTML σελίδα πλαισίων με 2 στήλες και με όνομα αρχείου frameset_cols.html. Το αριστερό πλαίσιο με όνομα links και το δεξί intro. Αυτό που θέλετε είναι όταν ο χρήστης κάνει κλικ στο About us στο αριστερό πλαίσιο να φορτώνεται η σελίδα About us στο δεξιό πλαίσιο. Για να γίνει αυτό πρέπει 1. Το πλαίσιο να έχει όνομα 2. Στη σελίδα όπου υπάρχει η σύνδεση χρησιμοποιήστε την ιδιότητα target στο tag a της σύνδεσης για να καθορίσετε τον προορισμό της σύνδεσης. Ανάπτυξη Δικτυακών Τόπων 83

86 συνέχεια Όπως βλέπετε στην ιδιότητα target δώσαμε την τιμή intro, δηλαδή το πλαίσιο όπου θα φορτώνεται η σελίδα. Ανάπτυξη Δικτυακών Τόπων 84

87 συνέχεια Υπάρχουν ορισμένα στάνταρ ονόματα πλαισίων, καθένα εκ των οποίων ξεκινά με τον χαρακτήρα της κάτω παύλας (_) Ανάπτυξη Δικτυακών Τόπων 85

88 4.2 Ορισμός Προορισμού Βάσης Αν θέλετε όλες οι συνδέσεις που υπάρχουν στη σελίδα να φορτώνονται στο πλαίσιο intro, μπορείτε να χρησιμοποιείται το tag base. Τοποθετείται μεταξύ αρχικού και τελικού tag head συνήθως μετά από τα tags title. Χρησιμοποιώντας την ιδιότητα target στο tag base αντί στις μεμονωμένες συνδέσεις, μπορείτε να αποφύγετε την πληκτρολόγηση του target= intro στο tag κάθε σύνδεσης που υπάρχει στη σελίδα. Ανάπτυξη Δικτυακών Τόπων 86

89 5. Ενσωμάτωση Ενός Frameset Μέσα σε Ένα Άλλο Ανάπτυξη Δικτυακών Τόπων 87

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

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

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

93 6. Δημιουργία Ένθετων Πλαισίων Ανάπτυξη Δικτυακών Τόπων 91

94 Όταν θέλετε να συμπεριλάβετε μια ολόκληρη ιστοσελίδα μέσα σε μια άλλη ιστοσελίδα μπορείτε να χρησιμοποιείτε το tag object ή το tag iframe. Το μεγαλύτερο πλεονέκτημα των ένθετων (inline) πλαισίων είναι η ευελιξία τους. Μπορούν να περιλαμβάνονται οπουδήποτε σε μια σελίδα. Θα πρέπει να περιλαμβάνετε εναλλακτικό κείμενο ανάμεσα στο αρχικό και τελικό tag iframe για τους browser που δεν υποστηρίζουν ένθετα πλαίσια. Ανάπτυξη Δικτυακών Τόπων 92

95 7. Πρόβλεψη για Εφαρμογές Browser που δεν Υποστηρίζουν Πλαίσια Ανάπτυξη Δικτυακών Τόπων 93

96 Επειδή ορισμένες εφαρμογές browser δεν υποστηρίζουν τα πλαίσια θα πρέπει να συμπεριλαμβάνετε εναλλακτικό περιεχόμενο για όσους δεν έχουν τη δυνατότητα να βλέπουν το περιεχόμενο των πλαισίων σας. Αυτό επιτυγχάνεται με τη χρήση του tag noframes. Το tag noframes τοποθετείται στο HTML έγγραφο μετά από τα tags frame για τα πλαίσια αλλά πριν από το τελικό tag frameset. Χρησιμοποιείται για να οδηγεί τους επισκέπτες σας στις μεμονωμένες HTML σελίδες, έξω από το frameset. Μπορείτε επίσης να προσθέτετε το tag noframes σε κανονικές HTML σελίδες, έτσι το περιεχόμενο που ορίζετε στο tag noframes θα εμφανίζεται μόνο όταν η σελίδα δεν προβάλλεται σαν μέρος ενός frameset. Ανάπτυξη Δικτυακών Τόπων 94