από τον Γιάννη Ιωαννίδη εκπαιδευτικό Πληροφορικής

Transcript

1 εκπαιδευτικό Πληροφορικής 2011

2 Περιεχόμενα 1 Εισαγωγή Γνωριμία με το Ιντερνετ Το δίκτυο και το TCP/IP Ο Web server και οι browsers σαν Client DNS Servers Πως μεταφράζονται τα domain names σε IP Διευθύνσεις στο ιντερνετ Η γλώσσα που γράφεται μια Ιστοσελίδας Εισαγωγή HTML γλώσσα Μορφοποίηση κειμένου Εισαγωγή γραφικών και εικόνων Υπερσύνδεσμοι Ετικέτα δημιουργίας πίνακα Ανέβασμα μιας ιστοσελίδας στο web server του εργαστηρίου μας Το xampp και ο apache Γνωριμία με τον macromedia Dreamweaver Οθόνη εργασίας Γραμμή εργαλείων εγγράφου Παλέτες και επιθεωρητές Δημιουργία μιας βασικής Ιστοσελίδας με κείμενο Ορισμός μιας ιστοθέσης Μορφοποίηση κειμένου Εισαγωγή και Κεντράρισμα κειμένου Επικεφαλίδες Γραμματοσειρές Μέγεθος γραμματοσειράς Προσθήκη Ενός υπερδεσμού μέσα στην ιστοθέση σας Υπερδεσμό προς άλλο server Υπερδεσμό προς άλλη σελίδα μας Άγκυρες Δημιουργία πίνακα Ετικέτα δημιουργίας πίνακα Δημιουργία πίνακα με το Dreamweaver

3 4.8 Εμφάνιση εικόνων Ετικέτα εισαγωγής εικόνας Εισαγωγή εικόνας με το Dreamweaver Είδη εικόνων: GIF, JPEG, PNG Προετοιμασία των εικόνων βελτιστοποίηση εικόνων με το fireworks Δημιουργία εικόνας με το fireworks Στυλ και CSS αρχεία Δημιουργία style Δημιουργία ανεξάρτητου αρχείου Στυλ (αρχείου.css) Τα επίπεδα «Div» Δημιουργία επίπεδου (ap div) Τροποποίηση επιπέδων Μεταφορά των χαρακτηριστικών των div σε αρχεία css Εισαγωγή περιεχομένου στα επίπεδα Δημιουργία άλλων σελίδων με το ίδιο στυλ Δυναμικές ιστοσελίδες Αλληλοεπιδραστικές σελίδες από τη μεριά του πελάτη Τι είναι το αντικείμενο Ιδιότητες αντικειμένων Μέθοδοι Γεγονότα-συμβάντα Περισσότερη javascript Έτοιμα αντικείμενα της javascript Και άλλα Συμβάντα: Java Η Γλώσσα Μηχανής Η Εικονική μηχανή της Java (Java Virtual Machine) Κώδικας bytecode της java Applets Επαναληπτικές ερωτήσεις προόδου

4 1 Εισαγωγή 1.1 Γνωριμία με το Ιντερνετ Όλοι μας πλέον γνωρίζουμε το Ιντερνετ και βέβαια όταν οι μέσοι χρήστες του λένε Ιντερνετ συνήθως εννοούν τις ιστοσελίδες. Στην πραγματικότητα το Ιντερνετ είναι ένα τεράστιο ανοικτό δίκτυο υπολογιστών που περιλαμβάνει ένα πλήθος υπηρεσιών μια από τις οποίες είναι το Web (οι ιστοσελίδες). Άλλες υπηρεσίες είναι το ηλεκτρονικό ταχυδρομείο, οι μεταφορά αρχείων (ftp), η εξ αποστάσεως διαχείριση υπολογιστών (telnet), τα chat κλπ. Για να λειτουργήσει κάθε υπηρεσία θα πρέπει να τρέξουμε διαφορετική εφαρμογή. Για να δούμε σελίδες στο Web τρέχουμε έναν browser (Internet explorer, firefox, mozila, opera κλπ). Για να λάβουμε ή να στείλουμε τρέχουμε το Outlook Express, το Outlook Microsoft, το Thunderbird, το Eudora κλπ) Το ιντερνετ ξεκίνησε σαν ένα κλειστό και απόρρητο στρατιωτικό δίκτυο υπολογιστών του αμερικάνικου στρατού και μετεξελίχθηκε από την ακαδημαϊκή κοινότητα σε ένα παγκόσμιο δίκτυο επικοινωνίας, πληροφόρησης, συναλλαγών αλλά και εργασίας των απλών πολιτών. Για να λειτουργήσει το Ιντερνετ χρειάζεται υπολογιστικό και επικοινωνιακό εξοπλισμό αλλά και πάρα πολύ λογισμικό Δραστηριότητα Ανοίξτε τον Ιντερνετ Explorer Ανοίξτε το Outlook Express 1.2 Το δίκτυο και το TCP/IP Το δίκτυο του Ιντερνετ ξεκινά από τις κάρτες δικτύου των απλών υπολογιστών των σπιτιών μας, ή το modem μας. Αν το pc είναι σε κάποιο τοπικό δίκτυο (πχ σχολικό εργαστήριο ή δίκτυο μιας εταιρίας) τότε για να φθάσει στο ιντερνετ περνά από δικτυακό εξοπλισμό όπως, ειδικά καλώδια του τοπικού δικτύου της δουλειάς μας η του εργαστηρίου μας, συγκεντρώνεται από ειδικά «πολύπριζα» τα hubs και καταλήγει στον «τροχονόμο» των τοπικών δικτύων τον Router. Ο Router είναι η συσκευή που συγκεντρώνει τα δεδομένα που έρχονται από κάθε υπολογιστή του τοπικού δικτύου και τα προωθεί προς το internet ή μοιράζει τα δεδομένα που έρχονται από το internet προωθώντας τα προς τον υπολογιστή του τοπικού δικτύου που προορίζονται. Από τον router με την βοήθεια ειδικού modem μπαίνουμε στο τηλεπικοινωνιακό δίκτυο (ΟΤΕ, Forthnet, Ontelecoms, Hol κλπ). Τα δεδομένα μας ταξιδεύουν και φθάνουν σε άλλα ειδικά modems μέσω των οποίων συνδέονται με το δίκτυο της εταιρίας ή του οργανισμού που μας παρέχει Ιντερνετ 4

5 (πχ. Otenet, Forthnet, Ontelecoms, HOL, Σχολικό δίκτυο, πανεπιστημιακό δίκτυο, Σύζευξης κλπ). Η ταχύτητα που ταξιδεύουν τα δεδομένα από το σπίτι μας μέχρι τον παροχέα μας και το αντίστροφο εξαρτάται από το είδος της τηλεφωνικής γραμμής. Η πιο αργή είναι η απλή τηλεφωνική γραμμή η αλλιώς PSTN (56 Kbps)[δηλαδή bits per seconds].η αμέσως ταχύτερη είναι η ISDN τηλεφωνική γραμμή (64 ή 128 Κbps). Αλλά οι γραμμές που έκαναν το Ιντερνετ πρακτικό εργαλείο και όχι βασανιστήριο αναμονής είναι οι ευρυζωνικές γραμμές DSL. Οι ταχύτητες των γραμμών αυτών ξεκινούν από εκατοντάδες Kbps και φθάνουν σε δεκάδες Mbps. Αλλά ας γυρίσουμε στα modems των παροχέων. Εκεί μαζεύεται όλη η κίνηση των συνδρομητών τους. Από τα modems τα δεδομένα περνούν στους routers και τους υπολογιστές του παροχέα που είναι και αυτοί συνδεδεμένοι σε δίκτυο και αποτελούν έναν κόμβο του Ιντερνετ. Ο κόμβος αυτός του παροχέα είναι συνδεδεμένος με ακόμη πιο γρήγορες γραμμές με άλλους κόμβους οι οποίοι με την σειρά τους συνδέονται με άλλους κόμβους ή μαζεύουν την κίνηση των δικών τους συνδρομητών. Σε αυτό το σημείο μας γεννιέται το πρώτο ερώτημά μας. Πως αυτό το δίκτυο είναι τόσο πολύ φθηνότερο από την απλή τηλεφωνία; Η απάντηση βρίσκεται στον τρόπο που διαμορφώνονται και κινούνται τα δεδομένα που λέγεται πρωτόκολλο TCP/IP. Ας φανταστούμε ότι τηλεφωνούμε στον θείο μας στην Αμερική. Τότε όση ώρα μιλάμε δεσμεύουμε μια τηλεφωνική γραμμή που ξεκινά από εμάς μέχρι τον θείο μας, δεσμεύοντας έτσι χιλιάδες χιλιόμετρα καλωδίων εκατοντάδες κόμβων και μεγάλες ποσότητες τηλεπικοινωνιακών συσκευών. 5

6 Και μάλιστα αυτό γίνεται και όταν δεν μιλάμε αλλά περιμένουμε τον θείο μας να πάει στην κουζίνα να κατεβάσει το φαγητό από την φωτιά. Η πληροφορία που ξεκινά από έναν υπολογιστή του Ιντερνετ (σύφωνα με το πρωτόκολλο TCP/IP) κόβεται σε μικρά κομματάκια. Αυτά τα κομματάκια πακετάρονται σε ειδικά ηλεκτρονικά πακέτα και στέλνονται προς τον αποδέκτη μέσα από τις τηλεπικοινωνιακές γραμμές. Συνεπώς σε μια γραμμή που μας συνδέει πχ με την Αμερική ταξιδεύουν κομματάκια δεδομένων από πάρα πολλούς συνδρομητές. Αυτό το μοίρασμα των γραμμών έριξε και το κόστος της επικοινωνίας. Φυσικά όμως έχουμε και το αντίτιμο. Οι πληροφορίες κινδυνεύουν από μποτιλιάρισμα. Πράγματι υπάρχει η πιθανότητα να συσσωρεύονται τα πακέτα σε κάποιος κόμβους και να καθυστερούν ή και να χάνονται. Πράγματι το βλέπουμε αυτό καθημερινά όταν άλλοτε μια σελίδα μας έρχεται αμέσως και κάποια άλλη ώρα καθυστερεί υπερβολικά η «κόβεται». Ερώτημα δεύτερο: Πως τα πακέτα βρίσκουν τους αποδέκτες; Στην τηλεφωνία για να τηλεφωνήσουμε στον θείο μας πληκτρολογούμε έναν αριθμό που αντιστοιχεί μόνο στο καλώδιο που καταλήγει στο τηλέφωνο του θείου μας. Το ίδιο, σαν αρχή, συμβαίνει και στο Ιντερνετ. Σε κάθε πρίζα, από την οποία μπορούμε να συνδέσουμε τον υπολογιστή μας στο ιντερνετ, αντιστοιχεί ένας μοναδικός αριθμός που μάλιστα έχει την μορφή (δηλαδή τέσσερις αριθμούς από το 0 έως το 255 που χωρίζονται από τελείες) και ονομάζεται IP. Σε κάθε πακέτο που ξεκινά από ένα υπολογιστή και πηγαίνει σε κάποιον άλλο γράφεται το IP του αποδέκτη και του αποστολέα (όπως δηλαδή κάνουμε με τα απλά γράμματα που στέλνουμε από το ταχυδρομείο). Επίσης στο πακέτο γράφεται και ο αύξον αριθμός του κομματιού της πληροφορίας καθώς και κάποια στοιχεία για να ελεγχθεί η ακεραιότητα της κατά το ταξίδι του πακέτου. Όταν φθάσουν τα πακέτα στον αποδέκτη, ελέγχεται η ακεραιότητα τους, μπαίνουν σε σειρά ανάλογα με τον αύξοντα αριθμό τους και συνθέτονται έτσι ώστε να ξαναδημιουργηθεί όλη η πληροφορία που εστάλη. Δραστηριότητα 1. Επιλέξτε έναρξη > εκτέλεση 2. γράψτε cmd 3. θα βρεθείτε σε περιβάλλον γραμμής εντολών. 4. γράψτε IPCONFIG 5. σημειώστε το IP του υπολογιστή σας. 6. γράψτε ping και το IP του διπλανού σας Η εντολή ping στέλνει δοκιμαστικά πακέτα και μετρά τον χρόνο που κάνουν να πάνε και να επιστρέψουν 6

7 7. σημειώστε τους χρόνους 1.3 Ο Web server και οι browsers σαν Client Το επόμενο ερώτημά μας είναι «που βρίσκονται οι Ιστοσελίδες;». Για να δούμε μια ιστοσελίδα τρέχουμε έναν browser γράφουμε την διεύθυνση της πχ στο ειδικό πλαίσιο του browser και πατάμε enter. Τότε θα μας έρθει η σελίδα του σχολικού δικτύου. Το ίδιο θα γινόταν αν αντί για γράφαμε Ο αριθμός IP= αντιστοιχεί σε έναν υπολογιστή, στον σκληρό δίσκο του οποίου υπάρχει η ιστοσελίδα, αντίγραφο της οποίας ήρθε σε εμάς. Για να γίνει αυτό στον κόμβο του σχολικού δικτύου τρέχει ένα ειδικό πρόγραμμα που ονομάζεται Web Server. Ο web server αναμένει αιτήματα από το ίντερνετ όπως αυτό που κάναμε εμείς (δηλαδή ζητήσαμε την σελίδα του σχολικού δικτύου). Όταν του έρθει το αίτημα προσδιορίζει το IP του υπολογιστή που του το έστειλε και του το ικανοποιεί (στέλνει την σελίδα που ζητήσαμε). Συνεπώς για να δουλέψει η υπηρεσία web η αλλιώς HTTP χρειάζεται να υπάρχουν web servers που αποθηκεύουν σελίδες και στέλνουν αντίγραφά τους όταν τους ζητηθεί και προγράμματα (όπως ο Internet explorer) που τρέχουν στους υπολογιστές των χρηστών του ιντερνετ με τα οποία μπορούμε να παραγγέλνουμε σελίδες. Δηλαδή η υπηρεσία web λειτουργεί με την λογική μιας ταβέρνας. Οι πελάτες (Internet explorer) παραγγέλνουν και οι σερβιτόροι (web servers) σερβίρουν. Συνεπώς, τελική ενέργεια που πρέπει να κάνουμε όταν φτιάξουμε μια σελίδα είναι να την αναρτήσουμε σε έναν web server. Η εργασία αυτή γίνεται με την αντιγραφή του αρχείου της σελίδας μας από τον υπολογιστή που την φτιάξαμε, σε έναν ειδικό υποκατάλογο του υπολογιστή του web server. 1.4 DNS Servers Όμως όπως είδαμε, όταν παραγγείλαμε την σελίδας του σχολικού δικτύου δεν γράψαμε την IP διεύθυνση αλλά Γράψαμε δηλαδή μια διεύθυνση με γράμματα που μπορεί ο άνθρωπος να την θυμάται πιο εύκολα. Ήδη από τα γράμματα μπορούμε να συμπεράνουμε ότι βρίσκεται στην Ελλάδα (gr) και αφορά σχολεία (school). Η διεύθυνση αυτή μεταφράζεται σε IP διεύθυνση, που καταλαβαίνουν τα μηχανήματα, από ένα ειδικό λογισμικό που συνήθως βρίσκεται στο κόμβο του παροχέα και λέγεται DNS server. Το πιο δεξιό κομμάτι της διεύθυνσης (στο παράδειγμα μας.gr) ονομάζεται first-level domain name (Πρώτου επιπέδου όνομα τομέα). Υπάρχουν εκατοντάδες first-level domain ονόματα όπως.com,.edu, gov, mil, net, org καθώς και συνδυασμοί δύο γραμμάτων για κάθε χώρα. 7

8 Μετά τα πρώτου επιπέδου ακολουθούν εκατομμύρια ονόματα δευτέρου επιπέδου (πχ στο παράδειγμα μας.sch.) Μπορεί να ακολουθεί και όνομα τρίτου, τετάρτου εως και 127ου επιπέδου. Το πιο αριστερό όνομα αντιστοιχεί σε ένα web server. (πχ www είναι το όνομα του web server που βρίσκεται στο domain sch.gr). Κάθε web server αντιστοιχεί σε μια διεύθυνση που με τη σειρά της αντιστοιχεί σε έναν αριθμό IP. Ο πίνακας των διευθύνσεων και των αντίστοιχων IP συνιστά μια τεράστια βάση δεδομένων που ονομάζεται whois και λειτουργεί κατανεμημένη σε όλο τον κόσμο. Oι εργασίες που έχει να διεκπεραιώσει αυτή η βάση είναι τεράστιες σε πλήθος και πολυπλοκότητα. Για να το κατανοήσουμε ας αντιληφθούμε ότι: Υπάρχουν δισεκατομμύρια από IP διευθύνσεις σε χρήση, και οι περισσότερες μηχανές έχουν ένα κατανοήσιμο από τον άνθρωπο όνομα. Υπάρχουν πολλά δισεκατομμύρια από DNS αιτήματα που υποβάλλονται κάθε ημέρα. Ένα μεμονωμένο πρόσωπο μπορεί εύκολα να κάνει εκατό ή περισσότερα DNS αιτήματα την ημέρα, και υπάρχουν εκατοντάδες εκατομμύρια άνθρωποι και μηχανές που χρησιμοποιούν το Διαδίκτυο καθημερινά. Domain names και IP διευθύνσεις αλλάζουν καθημερινά. Νέα domain names δημιουργούνται καθημερινά. Εκατομμύρια των ανθρώπων αλλάζουν και προσθέτουν domain names και IP διευθύνσεις κάθε ημέρα Πως μεταφράζονται τα domain names σε IP. Αν γράψουμε στον internet explorer για να ζητήσουμε την σελίδα θα πρέπει να μάθουμε το ip στο οποίο αντιστοιχεί. Για να γίνει αυτό εκτελείται μια συντονισμένη εργασία από μια σειρά από συνεργαζόμενους domain names servers. Έστω ότι ζητήσαμε από τον browser την διεύθυνση Στην αρχή ο Browser ψάχνει σε ένα ειδικό χώρο που έχει ο ίδιος δημιουργήσει και λέγεται cache όπου φυλάει τις διευθύνσεις με τις αντίστοιχες ip που πρόσφατα χρησιμοποίησε. Αν το βρεί αντικαθιστά το όνομα με το ip και ζητά την σελίδα. Αν όμως δεν την βρει ανατρέχει στον πρώτο DNS server που είναι συνδεδεμένος που λέγεται root DNS server. Ο πρώτος DNS server βρίσκεται στον ISP (στο δίκτυο που μας συνδέει στο ιντερνετ) Στον server αυτόν βρίσκει την διεύθυνση του DNS server πρώτου επιπέδου (δηλαδή του gr DNS server). Εκεί βρίσκονται γραμμένοι όλοι οι DNS server δευτέρου επιπέδου. Έτσι βρίσκεται ό ζητούμενος DNS server δευτέρου επιπέδου (δηλαδή ο sch.gr DNS server.) Στη βάση του DNS 8

9 server δευτέρου επιπέδου βρίσκεται η IP του μηχανήματος που ζητάμε (δηλαδή και στέλνεται στον browser Gr DNS server Computer Root DNS server Sch.gr DNS server WEB Server Δραστηριότητα 1. κάντε ping στη διεύθυνση 2. σημειώστε την IP διεύθυνση που αντιστοιχεί 3. γράψτε την διεύθυνση IP στον browser και δείτε τι θα εμφανιστεί. 1.5 Διευθύνσεις στο ιντερνετ Μια διεύθυνση Web καλείται Uniform Resource Locator (URL). Ένα URL αποτελείται από πολλά τμήματα. Ένα URL αποτελείται από ένα πρωτόκολλο, ένα τομέα, μια πύλη, και την πλήρη διαδρομή προς ένα αρχείο. Πρωτόκολλο Τομέας Πύλη διαδρομή αρχείου δεδομένα Πρωτόκολλο: Ενημερώνει τον browser ότι θα χρησιμοποιηθεί η υπηρεσία Web Τομέας:Αντιστοιχεί στη διεύθυνση του web server. 9

10 Πύλη: Μια συγκεκριμένη θέση μνήμης που χρησιμοποιεί και ο server και ο client και αντιστοιχεί σε μια υπηρεσία του ιντερνετ. Μέσω της πύλης διέρχονται οι πληροφορίες από τον πελάτη στον server και αντίστροφα. H υπηρεσία web χρησιμοποιεί την πόρτα 80. Διαδρομή και όνομα αρχείου: Η θέση στον σκληρό δίσκο του server που βρίσκεται η ιστοσελίδα. Δεδομένα: Δεδομένα που στέλνονται από τον browser μαζί με το αίτημα για την ιστοσελίδα προς τον server 10

11 2 Η γλώσσα που γράφεται μια Ιστοσελίδας 2.1 Εισαγωγή Η βασική γλώσσα στην οποία γράφονται οι ιστοσελίδες είναι η Html.Το αρχείο μιας ιστοσελίδας είναι ένα κείμενο που περιέχει δύο κατηγορίες από λέξεις, Λέξεις που εμφανίζονται στην σελίδα μας και εντολές προς τον browser. Οι εντολές γράφονται ανάμεσα από τα σύμβολα < >. Οι εντολές μπορεί να καθορίζουν την μορφοποίηση του κειμένου που θα εμφανιστεί να παρεμβάλουν φωτογραφίες, να δημιουργούν background να παίζουν ήχους ή βιντεο να καλούν και να τρέχουν άλλα προγράμματα (σε flash, java, javascript, php, asp, perl κλπ). κλπ Μια άλλη γλώσσα που χρησιμοποιείται σήμερα για την συγγραφεί ιστοσελίδων είναι η Xml Η λογική της είναι παρόμοια με την HTML αλλά περιέχει πολύ μεγαλύτερο ρεπερτόριο εντολών. Επίσης μπορεί να κατασκευαστεί εξ ολοκλήρου σε γλώσσες προγραμματισμού όπως από action script(flash), java, javascript, php, asp, perl ακόμη και Visul basic. Το πρόγραμμα που θα προκύψει θα ενσωματωθεί σε μια άδεια σελιδα html. Επειδή όμως τελικά δεν πρέπει είναι δουλειά προγραμματιστή η κατασκευή μιας ιστοσελίδας όπως δεν είναι δουλειά της συγγραφής ενός βιβλίου ενός τυπογράφου αλλά ενός συγγραφέα, δημιουργήθηκαν απλά εργαλεία που επιτρέπουν σε ανθρώπους που δεν γνωρίζουν προγραμματισμό να κατασκευάζουν ιστοσελίδες. Τα εργαλεία αυτά κάνουν την εργασία της κατασκευής μιας ιστοσελίδας παρόμοια με την κατασκευή ενός ηλεκτρονικού εντύπου. Αφού φτιαχτεί η ιστοσελίδα σαν ηλεκτρονικό έντυπο αναλαμβάνει το ειδικό πρόγραμμα να την μετατρέψει σε γλώσσα Html η XML. 2.2 HTML γλώσσα Δομή της σελίδας (σελ ) Δραστηριότητα 1. Ανοίξτε το Nodpad (σημειωματάριο) και γράψτε το πιο κάτω κείμενο html <html> <title>test1</title> <body> 11

12 από την πόλη έρχομαι και στη κορφή κανέλα </body> </html> 2. Αποθηκεύστε το με όνομα test1.htm 3. Ανοίξτε το με τον browser 4. πατήστε στον Internet Explorer την επιλογή προβολή > προέλευση. Τι παρατηρείτε; 5. ανοίξτε την σελίδα 6. επιλέξτε προβολή > προέλευση. Τι παρατηρείτε; Μορφοποίηση κειμένου Δραστηριότητα 1. Ανοίξτε το Nodpad (σημειωματάριο) και γράψτε το πιο κάτω κείμενο html <html> <head> <title> second site </title> </head> <body> το ποίημα από την πόλη και στη κορφή κανέλα μικρα γράμματα <big>μεγάλα γράμματα</big> </body> </html> 2. Αποθηκεύστε το με όνομα ask2.htm 3. Ανοίξτε το με τον browser 4. σημειώστε την λειτουργία των , και ,, Δραστηριότητα 1. Ανοίξτε το Nodpad (σημειωματάριο) και γράψτε το πιο κάτω κείμενο html <html> <head> <title> 12

13 second site </title> </head> <body bgcolor="blue" text="yellow"> <center><a href="#katw"> το ποίημα</a></center> <hr> <right>από την πόλη και στη κορφή κανέλα μικρα γράμματα <big>μεγάλα γράμματα</big></right> εντονα και ιτάλικς <h1>επικεφαλίδα1</h1> <h2>επικεφαλίδα2</h2> <h3>επικεφαλίδα3</h3> <h4>επικεφαλίδα4</h4> <h5>επικεφαλίδα5</h5> <h6>επικεφαλίδα6</h6> <h7>επικεφαλίδα7</h7> </body> </html> 2. Αποθηκεύστε το με όνομα ask3.htm 3. Ανοίξτε το με τον browser 4. σημειώστε την λειτουργία των <hr>, <center>,<big>,,<h1> <h6> Εισαγωγή γραφικών και εικόνων Δημιουργείστε ένα φάκελο με όνομα web και μέσα στον web ένα άλλο υποφάκελο με όνομα images. Μέσα στο φάκελο images αντιγράψτε μια εικόνα τύπου jpg από το ιντερνετ. Ονομάστε την pic1.jpg. Δημιουργείστε μια ιστοσελίδα με τον πιο κάτω κώδικα και σώστε την στο φάκελο web. <html> <head> <title>ιστοσελίδα με εικόνα </title> </head> 13

14 <body> Γράφουμε τη σχετική διαδρομή <img src= images/pic1.jpg > από τον φάκελο που βρίσκεται η Η πρώτη μου ιστοσελίδα με φωτογραφία ιστοσελίδα μου μέχρι το αρχείο </body> της εικόνας </html> Ερώτηση: Η φωτογραφίες βρίσκονται μέσα στο αρχείο της ιστοσελίδα; Υπερσύνδεσμοι Για τη δημιουργία υπερσυνδέσμων μέσα σε μια ιστοσελίδα χρησιμοποιούμε την ετικέτα : <a>..</a> με τις απαραίτητες παραμέτρους <a href= αρχείο ή σημείο σύνδεσης> λέξη η εικόνα υπερσύνδεσης </a> Υπερσύνδεσμο προς μια άλλη ιστοσελίδα Υπερσύνδεσμος προς μια εξωτερική ιστοσελίδα Για να δημιουργήσουμε ένα υπερσύνδεσμο προς μια άλλη εξωτερική ιστοσελίδα γράφουμε τον πιο κάτω κώδικα: <a href= ιστοσελίδας >κείμενο ή εικόνα υπερσύνδεσης</α> Πχ Συμπληρώστε στην ιστοσελίδα με τη φωτογραφία: <html> <head> <title>ιστοσελίδα με εικόνα </title> </head> <body> <img src= images/pic1.jpg > Η πρώτη μου ιστοσελίδα με φωτογραφία <a href= > μηχανή αναζήτησης</a> </body> </html> Για να κάνουμε την εικόνα υπεσύνδεσμο συμπληρώνουμε: <html> <head> <title>ιστοσελίδα με εικόνα </title> </head> 14

15 <body> <a href= src= images/pic1.jpg ></a> Η πρώτη μου ιστοσελίδα με φωτογραφία <a href= > μηχανή αναζήτησης</a> </body> </html> Υπεσύνδεσμος με μια εσωτερική ιστοσελίδα Για να δημιουργήσουμε μια υπερσύνδεση με μια άλλη δικιά μας ιστοσελίδα γράφουμε: <a href= [σχετική θέση του αρχείο της άλλης ιστοσελίδας ως προς το παρόν]/ονομα του αρχείου > κείμενο ή εικόνα υπερσύνδεσμου</a> Δημιουργείστε μια καινούργια ιστοσελίδα με όνομα istosel2.html <html> <head> <title>2η Ιστοσελίδα </title> </head> <body> η δεύτερη ιστοσελίδα </body> </html> Αποθηκεύστε την στο φάκελο web. Ανοίξτε την ιστοσελίδα foto.html. Προσθέστε τον πιο κάτω κώδικα: <html> <head> <title>ιστοσελίδα με εικόνα </title> </head> <body> <a href= src= images/pic1.jpg ></a> Η πρώτη μου ιστοσελίδα με φωτογραφία <a href= > μηχανή αναζήτησης</a> <a href= istosel2.html >πήγαινε στη δεύτερη ιστοσελίδα μου</a> </body> </html> Υπερσύνδεσμος προς το αρχείο istosel2.html που βρίσκεται στον ίδιο φάκελο με τη foto.html. Αν ήταν σε διαφορετικό φάκελο, θα γράφαμε και την σχετική διαδρομή. 15

16 Υπερσύνδεσμος προς «άγκυρα». Ανοίξτε πάλι την ιστοσελίδα foto.html. Θέλουμε να δημιουργήσουμε μια υπερσύνδεση στο τέλος που να μας πηγαίνει στην αρχή της ιστοσελίδας. Συμπληρώνουμε τον κώδικα στη ιστοσελίδα foto.html <html> <head> <title>ιστοσελίδα με εικόνα </title> </head> <body> Η ετικέτα <α> με την name= κάποιο ονομα «άγκυρα».(δηλ. σημείο παράμετρο δημιουργεί προς το μια οποίο μπορούμε να πάμε από μια υπερσύνδεση). <a name= start > </a> <a href= src= images/pic1.jpg ></a> Η πρώτη μου ιστοσελίδα με φωτογραφία <a href= > μηχανή αναζήτησης</a> 1 2 3 4 Προσθέτουμε γραμμές 5 6 7 8 9 10 11 12 13 14 15 Υπερσύνδεσμος προς την άγκυρα start <a href=#start >πήγαινε στην αρχή της σελίδας</a> </body> </html> Ετικέτα δημιουργίας πίνακα. Ένας απλός πίνακας δημιουργείται από τις πιο κάτω εντολές-ετικέτες σε html. 16

17 <table> <tr> <td> πρώτο κελί πρώτης γραμμής</td> <td> πρώτο κελί πρώτης γραμμής</td> <td> πρώτο κελί πρώτης γραμμής</td> </tr> <tr> <td> πρώτο κελί δεύτερης γραμμής</td> <td> δεύτερο κελί δεύτερης γραμμής</td> <td> τρίτο κελί δεύτερης γραμμής</td> </tr> <tr> <td> πρώτο κελί τρίτης γραμμής</td> <td> δεύτερο πρώτο κελί τρίτης γραμμής</td> <td> τρίτο κελί τρίτης γραμμής</td> </tr> </table> 17

18 3 Ανέβασμα μιας ιστοσελίδας στο web server του εργαστηρίου μας 3.1 Το xampp και ο apache Ένα από τα μηχανήματα του εργαστηρίου μας λειτουργεί ως web server (Διακομιστής Ιστοσελίδων). Το πρόγραμμα web server που έχει «φορτωθεί» λέγεται apache. Είναι ανοικτού κώδικα και μπορείτε να το βρείτε στη διεύθυνση To apache συνήθως δεν στήνεται μόνο του αλλά συνεργάζεται με άλλα προγράμματα. Υπάρχουν έτοιμες «διανομές». Δηλαδή έτοιμες συλλογές με τον apache και με συνοδευτικά προγράμματα απαραίτητα για τη λειτουργία και διαχείριση ενός web server. Συνήθως δε οι διανομές αυτές είναι συμπυκνωμένες μέσα σε ένα εκτελέσιμο αρχείο. Η δε εγκατάστασή τους είναι πολύ εύκολη. Το μόνο που χρειάζεται είναι η εκτέλεση του αρχειου διανομής. Τότε γίνεται αυτόματα η δημιουργία των κατάλληλων φακέλων, η αποσυμπίεση, εγκατάσταση των προγράμματα και η ρύθμιση του υπολογιστή μας. Η διανομή που χρησιμοποιήσαμε στο εργαστήριο είναι το xampp. Το xampp και τα εγχειρίδια εκμάθηνσης του, μπορούμε να τα κατεβάσουμε από την ιστοσελίδα: Εικόνα 1 μετά την εγκατάσταση Εικόνα 2 η κονσόλα ρύθμισης του apache και των άλλων προγραμμάτων Μετά την εγκατάσταση δημιουργείται ένας φάκελος xampp και πολύ υποφάκελοι. Ό υποφάκελος htdocs είναι ο φάκελος στον οποίο «ανεβάζουμε» τις ιστοσελίδες που θέλουμε να φαίνονται από το 18

19 διαδίκτυο. Για αυτό το λόγο το κάνουμε κοινόχρηστο προς όλους τους χρήστες του εργαστηρίου που θα ανεβάσουν ιστοσελίδες. Προς το παρόν βέβαια θα μπορούμε να τις δούμε μόνο από το τοπικό μας δίκτυο. Και αυτό γιατί έτσι είναι ρυθμισμένος ο δρομολογητής που συνδέει το εργαστήριό μας με το διαδίκτυο. Μετά την εγκατάσταση δημιουργείται ένας φάκελος xampp και πολύ υποφάκελοι. Ό υποφάκελος htdocs είναι ο φάκελος στον οποίο «ανεβάζουμε» τις ιστοσελίδες που θέλουμε να φαίνονται από το διαδίκτυο. Για αυτό το λόγο το κάνουμε κοινόχρηστο προς όλους τους χρήστες του εργαστηρίου που θα ανεβάσουν ιστοσελίδες. Προς το παρόν βέβαια θα μπορούμε να τις δούμε μόνο από το τοπικό μας δίκτυο. Και αυτό γιατί έτσι είναι ρυθμισμένος ο δρομολογητής που συνδέει το εργαστήριό μας με το διαδίκτυο. Όταν θέλετε να κατασκευάστε μια ιστοσελίδα, πρέπει πρώτα να δημιουργήσετε στο δικό σας υπολογιστή ένα φάκελο που θα τον λέμε φάκελος διάφορους ρίζα (root) με υποφακέλους. Κατόπιν θα οργανώσετε τα αρχεία html των σελίδων σας καθώς και όλο το περιεχόμενο (εικόνες, κείμενα, ταινίες ήχους κλπ) σε αυτούς του φακέλους και υποφακέλους. Όλοι αυτοί η φάκελοι και τα περιεχόμενά τους αποτελούν την ιστοθέση σας (site) Αφού δοκιμάσετε την ιστοθέση σας (site) και σιγουρευτείτε ότι λειτουργεί σωστά με όλους τους browsers, αντιγράφετε το φάκελο root στο φάκελο htdocs του web server. Κατόπιν γράφοντας στο browser την ip διεύθυνση του υπολογιστή που έχει τον web server η το όνομα του στο τοπικό δίκτυο, μια κάθετο / και το όνομα της ιστοσελίδα σας θα την δείτε. Δρατηριότητα 1. Μετονομάστε το root φακέλο σας και δώστε του όνομα το επίθετό σας, με λατινικούς χαρακτήρες. 2. Αντιγράψτε τον root φάκελό σας. 3. Ανοίξτε τις θέσεις δικτύου. 4. Βρείτε τον υπολογιστή που τρέχει ο web server. 19

20 5. Bρείτε στο σκληρό δίσκο του web server τον φάκελο htdocs και ανοίξτε τον. 6. Επικολείστε εκεί τον root φάκελό σας. 7. Ανοίξτε τον browser γράψτε: ονομα υπολογιστή με web server / «ονομα root φακέλου σας»/ «ονομα της ιστοσελίδας σας» 20

21 4 Γνωριμία με τον macromedia Dreamweaver 4.1 Οθόνη εργασίας Γραμμή εισαγωγή ς ομάδα Γραμμή Παράθυρο μενού εγγράφου Γραμμή παλετών εργαλείων εγγράφου Γραμμή κατάστασης Επιθεωρητής ιδιοτήτων 4.2 Γραμμή εργαλείων εγγράφου code:μας δείχνει την σελίδα σε μορφή κώδικα 21

22 Design: Βλέπετε το σχέδιο της σελίδας (δηλαδή την σελίδα και τα αντικείμενα που βάζετε όπως περίπου θα εμφανιστούν). Split:η μισή σελίδα δείχνει τον κώδικα και η άλλη μισή το σχέδιο της σελίδας. Title: Ο τίτλος που θα εμφανίζεται στη μπάρα του παραθύρου της σελίδας. προεπισκόπηση της σελίδας από τον browsers που έχουμε εγκατεστημένους στον Υ/Η 4.3 Παλέτες και επιθεωρητές Μπορούμε να αναπτύξουμε ή να κλείσουμε τις παλέτες από τα αντίστοιχα βελάκια του τίτλου τους. Από τις παλέτες σημαντική είναι η παλέτα Assets στην οποία μπορούμε να βάλουμε όλα τα πολυμεσικά αντικείμενα ή και προγραμματάκια που πρόκειται να χρησιμοποιήσουμε στις σελίδες μας Οι επιθεωρητές ιδιοτήτων εμφανίζουν (αλλά μας δίνουν και την δυνατότητα να αλλάξουμε) όλες τις ιδιότητες του αντικειμένου που είναι εκείνη την στιγμή επιλεγμένο. 4.4 Δημιουργία μιας βασικής Ιστοσελίδας με κείμενο Ορισμός μιας ιστοθέσης Χρησιμοποιείτε την παλέτα files του Dreamweaver για να σχεδιάσετε, να δημιουργήσετε και να διαχειριστείτε τα έργα σας. Ο ορισμός μιας ιστοθέσης πρέπει να είναι πάντα το πρώτο σας βήμα, όταν αρχίσετε να εργάζεστε σε ένα νέο έργο. Όταν τρέχουμε για πρώτη φορά τον Dreamweaver τρέχει ένας Wizard (μάγος) που μας βοηθά να οργανώσουμε τον χώρο εργασίας μας. Επίσης μπορούμε να ξανατρέξουμε τον μάγο για να δημιουργήσουμε νέο έργο ή να επεξεργαστούμε τον ήδη υπάρχοντα χώρο εργασίας από την επιλογή site. Ξεκινώντας ο μάγος εμφανίζει την σελίδα για να ονομάσουμε τον χώρο εργασίας μας. 22

23 κατόπιν μας ρωτά αν θα δουλέψουμε κατευθείαν στον web server ή θα δουλέψουμε τοπικά. Επιλέγουμε να δουλέψουμε τοπικά. Έπειτα ορίζουμε τον φάκελο στον σκληρό μας όπου θα βρίσκεται ο βασικός φάκελος εργασίας μας. 23

24 τέλος μας ρωτά αν θα συνδεθούμε με τον server. και ολοκληρώνει την εργασία με μια αναφορά. 24

25 καλό είναι να δημιουργήσουμε υποφακέλους στον φάκελο εργασίας μας για να διατηρούμε χωριστά τις φωτογραφίες, τα βίντεο, τα αρχεία φλας, τους ήχους, κλπ 4.5 Μορφοποίηση κειμένου Η μορφοποίηση γίνεται από τις ιδιότητες του κειμένου κλασσικά εργαλεία μορφοποίησης Εισαγωγή και Κεντράρισμα κειμένου 1. Ανοίξτε μια νέα σελίδα και πληκτρολογήστε: Από την πόλη έρχομαι και στη κορφή κανέλα, 2. Γυρίστε το σε προβολή split. 3. Δείτε ότι σε κάθε enter που πατήσατε η γραμμή μπήκε ανάμεσα από τις ετικέτες 4. και ανάμεσα στις γραμμές αφήνεται μια κενή γραμμή. 5. Συνεχίστε γράφοντας το πιο κάτω δίστιχο, αλλάζοντας όμως γραμμή πατώντας shift+enter. 25

26 άνοιξα την ομπρέλα μου να μην βραχεί η κοπέλα 6. παρατηρείστε ότι τώρα ότι στην αλλαγή της γραμμής μπαίνει η ετικέτα και δεν αφήνονται κενές γραμμές. 7. Το κείμενο που περιέχεται ανάμεσα από αποτελεί μια παράγραφο. Οι αλλαγές γραμμών μέσα στη παράγραφο γίνονται με την ετικέτα Επικεφαλίδες Η επιλογή none αφαιρεί κάθε στυλ μορφοποίηση που έχει εφαρμοστή στην επιλογή Heading 1 Ορίζει επικεφαλίδες (μεγαλύτερη η 1 και 2,3,..μικραίνουν.) 1. Γράψτε πριν από το ποίημα: Το ποίημα 2. και σημειώστε το σαν επικεφαλίδα 1 (Heading 1) 3. Κατόπιν αλλάξτε την σε επικεφαλίδα 3 (Heading 3) 4. Τους δύο πρώτους στίχους κάντε λίστα με κουκίδες 5. Δοκιμάστε να κάντε λίστα και τους άλλους δύο τι παρατηρείτε; 6. Κάντε τους δύο πρώτους στίχους λίστα με αριθμούς Γραμματοσειρές 26

27 Οι γραμματοσειρές ορίζονται σε ομάδες. αυτό γίνεται γιατί υπάρχει πιθανότητα ό χρήστης της σελίδας που την βλέπει να μην έχει την γραμματοσειρά που έχουμε επιλέξει, τότε την βλέπει από τις εναλλακτικές που έχουμε στην ομάδα. Από την επιλογή Edit Font List δημιουργείτε δικές σας ομάδες. 1. Επιλέξτε μέρος του κειμένου που γράψατε και αλλάξτε font (βάλτε comic san serif) Μέγεθος γραμματοσειράς Επιλέγετε το μέγεθος σε pixels η σε σχετικά μεγέθη όπως xx-small,x-small, small,medium Τα σχετικά μεγέθη επιτρέπουν στο κείμενο να εμφανίζεται σχετικά με τα μεγέθη που έχει ορίσει ο χρήστης στον Browser. Δίπλα βρίσκεται και η επιλογή χρώματος. Επιλέξτε μια λέξη από το κείμενο που γράψατε και Δοκιμάστε διάφορα μεγέθη. Κάντε προεπισκόπηση της σελίδας από την επιλογή 4.6 Προσθήκη Ενός υπερδεσμού μέσα στην ιστοθέση σας Ένας υπερδεσμός επιτρέπει στον χρήστη της ιστοσελίδας να μεταβεί σε άλλη ιστοσελίδα ή σε άλλη θέση της ίδιας ιστοσελίδας, να ξεκινήσει μια εφαρμογή (πχ να παίξει έναν ήχο) ή να ξεκινήσει την εφαρμογή του ηλεκτρονικού ταχυδρομείου Υπερδεσμό προς άλλο server 1. Ανοίξτε την ιστοσελίδα grafistes1.htm. 27

28 2. Στη πρώτη γραμμή συμπληρώστε [από ΟΕΕΚ] 3. Eπιλέξτε τη λέξη ΟΕΕΚ και συμπληρώστε στο πλαίσιο Link την διεύθυνση του ΟΕΕΚ. Προσοχή επειδή αναφερόμαστε σε ιστοσελίδα που είναι σε άλλο web server πρέπει οπωσδήποτε να βάλετε και το στη διεύθυνση. Κάντε προεπισκόπιση της ιστοσελίδας και δοκιμάστε τον υπερδεσμό παρατηρήστε ότι οκώδικας που γράφτηκε για τον υπερδεσμό είναι <a herf= Ο υπερδεσμός στην html γλώσσα γίνεται με την ετικέτα: <α herf=διεύθυνση..>φράση υπερδεσμός</a> Υπερδεσμό προς άλλη σελίδα μας 1. Ανοίξτε και τη σελίδα grafistes2.htm 2. Συμπληρώστε στο τέλος της σελίδας grafistes1.htm την λέξη next 3. μαυρίστε την λέξη next και συμπληρώστε στο πλαίσιο Link grafistes2.htm 4. αποθηκεύσετε την ιστοσελίδα και δοκιμάστε τον υπερδεσμό. 28

29 Επειδή τα αρχεία grafistes1.htm και grafistes2.htm είναι στον ίδιο φάκελο δεν χρειάζεται να γράψουμε τη διαδρομή. Αλλιώς έπρεπε να γράψουμε πριν από το όνομα του αρχείου της σελίδας και την διαδρομή του. Τη διαδρομή την σημειώνουμε είτε απόλυτα (δηλαδή την πλήρη διαδρομή του αρχείου) ελιτε σχετικά (δηλαδή ως προς τον φάκελο που ορίσαμε σαν ρίζα για την εργασία μας στον dreamweaver). Αν θέλουμε να ορίσουμε την σχετική διαδρομή ενός αρχείου που βρίσκεται σε ένα υποφάκελο του ριζικού φακέλου εργασίας γράφουμε: ονομα φακέλου/ονομα αρχείου (πχ product/products.htm) Αν θέλαμε να κάνουμε υπερδεσμό με αρχείο πουβρίσκεται ένα επίπεδο πιο πάνω από το ριζικό εργασίας γραφουμε:../όνομα αρχείου (πχ../products) Άγκυρες Αν θέλουμε να δημιουργήσουμε υπερδεσμούς προς άλλα σημεία της ιστοσελίδας μας πρώτα σημειώνουμε τ σημεία προορισμού που ονομάζονται Άγκυρες και μετά μετατρέπουμε τις φράσεις σε υπερδεσμούς. Οι άγκυρες σημειώνονται στην html με την ετικέτα: 29

30 <a name="όνομα άγκυρας"></a> πχ <a name="drasthriotites"></a> και ορίζουμε τον υπερδεσμό με την ετικέτα <a href="#ονομα υπερδεσμού">κείμενο υπερδεσμού</a> πχ. <a href="#kathikonta">επαγγελματικά Καθήκοντα</a> 1. Ανοίξτε την ιστοσελίδα grafistes1.htm 2. Δημιουργείστε άγκυρες στα σημεία Β.1.1, Β.1.2, Β.1.3 ως εξής: 3. πηγαίνουμε τον δρομέα στο σημείο και από το μενού επιλέγουμε insert>named anchor κατόπιν αφού μαυρίσουμε την φράση που θα κάνουμε υπερδεσμό, επιλέγουμε insert>hyperlink και στο παράθυρο διαλόγου που θα εμφανιστεί σημειώνουμε την επιθυμητή άγκυρα. Αποθηκεύσετε την ιστοσελίδα και κάντε προεπισκόπηση. 30

31 Υποσημείωση: Όταν οριστεί ένας υπερδεσμός διαφοροποιούνται οι χαρακτήρες. Η μορφή που θα πάρουνε μπορεί να ρυθμιστεί από τις γενικές ρυθμίσεις της σελίδας όπως επίσης και την μορφή που θα έχουν και όταν κάποιος κάνει χρήση του υπερδεσμού. Τα χαρακτηριστικά του υπερδεσμού μπορεί να φυλαχθεί και σε ένα αρχείο css. 4.7 Δημιουργία πίνακα Ετικέτα δημιουργίας πίνακα. Ο απλούστερος πίνακας (χωρις πλαίσιο, με κελιά προκαθορισμένων διαστάσεων) δημιουργείται από τις πιο κάτω εντολές-ετικέτες σε html. <table> <tr> <td> πρώτο κελί πρώτης γραμμής</td> <td> πρώτο κελί πρώτης γραμμής</td> <td> πρώτο κελί πρώτης γραμμής</td> </tr> <tr> <td> πρώτο κελί δεύτερης γραμμής</td> <td> δεύτερο κελί δεύτερης γραμμής</td> <td> τρίτο κελί δεύτερης γραμμής</td> </tr> <tr> <td> πρώτο κελί τρίτης γραμμής</td> <td> δεύτερο πρώτο κελί τρίτης γραμμής</td> <td> τρίτο κελί τρίτης γραμμής</td> </tr> </table> Δημιουργία πίνακα με το Dreamweaver Με τη βοήθεια του Dreamweaver μπορούμε πολύ εύκολα να δημιουργήσουμε πίνακες, να τους τροποποιήσουμε, να βάλουμε ή να αφαιρέσουμε στήλες και γραμμές, να συγχωνεύσουμε κελιά ή να τα διαχωρίσουμε κλπ. 31

32 Μπορείτε να παρεμβάλετε έναν πίνακα οπουδήποτε σε μια σελίδα, που περιλαμβάνει μέσα σε έναν άλλο πίνακα. Μπορείτε γρήγορα να παρεμβάλετε έναν τυποποιημένο πίνακα με τρεις σειρές και τρεις στήλες, ή μπορείτε να τροποποιήσετε τις επιλογές να παρεμβάλετε έναν πίνακα τις δικες σας επιλογές. Για να παρεμβάλει έναν πίνακα: 1. Ανοίξτε μια νέα ιστοσελίδα στο Dreamweaver. 2. Τοποθετήστε το σημείο εισαγωγής στο έγγραφό σας όπου εσείς θελήσετε να εμφανιστεί ο πίνακας. 3. Επιλέξτε την κατηγορία Layout στην Insert bar. 4. Σιγουρευτείτε ότι είναι επιλεγμένο το κουμπί Standard 5. Κάντε κλικ το κουμπί Table στο Insert bar. Τότε ανοίγει κουτί διαλόγου Table 6. Εισάγετε τον αριθμό σειρών και στηλών. Για να θέσετε μια σειρά ή μια στήλη επιγραφών (header): 7. Επιλέξτε μιας από τις επιλογές του Header section. Παραδείγματος χάριν, εάν δημιουργείτε έναν πίνακα που απαριθμεί μια συλλογή από τα βιβλία, με τις στήλες συντάκτης, τίτλος, και έτος, πρέπει να θέσετε την κορυφαία σειρά ως α header. Εξ ορισμού, οι σειρές ή οι στήλες επιγραφών (Header) είναι με γράμματα έντονα (bold) και κεντραρισμένη ευθυγράμμιση. 8. Click OK. Ο πίνακας εμφανίζεται στο έγγραφό σας. Επιλογή των στοιχείων του πίνακα 32

33 Μπορείτε να επιλέξετε με το ποντίκι έναν ολόκληρο πίνακα, μια σειρά, ή μια στήλη, ή μπορείτε να επιλέξετε έναν μπλοκ κελιών μέσα σε έναν πίνακα. Κατόπιν μπορείτε τροποποιήσετε την εμφάνιση των επιλεγμένων στοιχείων και του περιεχομένου των. Για να επιλέξει έναν ολόκληρο πίνακα: Κάνετε κάτι από τα παρακάτω: Κλικ στην πάνω αριστερή γωνία του πίνακα ή κλικ οπουδήποτε στην κατώτατη άκρη. Κλικ μέσα σε ένα κελί, και έπειτα επιλέξτε Modify > Table > Select Table. Κλικ μέσα σε ένα κελί, και από τη γραμμή κατάστασης επιλέξτε <table> Για να επιλέξετε σειρές ή στήλες: 1. Τοποθετήστε το δείκτη στην αριστερή άκρη μιας σειράς ή στην κορυφαία άκρη μιας στήλης. 2. Όταν ο δείκτης αλλάζει σε ένα βέλος επιλογής, κάντε κλικ και επιλέξτε τη σειρά ή τη στήλη, ή σύρετε τον δείκτη για να επιλέξετε πολλαπλάσιες σειρές ή στήλες (Figure 5). Για να επιλέξει ένα μονό κελί: Κάνετε κάτι από τα παρακάτω: κλικ στο κελί. Και κατόπιν σύρτε το δείκτη για να επιλέξετε το κελι. κλικ στο κελί. Κατόπιν επιλέξτε Edit > Select All. Προσθήκη σειρών και στηλών Μπορείτε να προσθέσετε μια σειρά ή μια στήλη, ή μπορείτε να προσθέσετε περισσότερες σειρές ή στήλες ταυτόχρονα. Για να προσθέσει μια σειρά: 1. Τοποθετήστε το σημείο εισαγωγής σε ένα κελί, ή επιλέξτε ολόκληρη τη σειρά. 2. Κάνετε κάτι από τα πιο κάτω: κλικ στο κουμπί Insert Row Above (εισαγωγή μιας σειράς από επάνω) ή στο κουμπί Insert Row Below (εισαγωγή σειράς από κάτω) επιλέξτε Insert > Table Objects > Insert Row Above 33

34 ή Insert > Table Objects > Insert Row Below. Τότε μια νέα σειρά εμφανίζεται επάνω από ή κάτω από το σημείο εισαγωγής ή από την επιλεγμένη σειρά. Διαγραφή σειρών και στηλών Μπορείτε να διαγράψετε μια σειρά ή μια στήλη, ή μπορείτε να διαγράψετε πολλαπλές σειρές ή στήλες συγχρόνως. Για να διαγράψει τις σειρές ή τις στήλες από έναν πίνακα: 1. Επιλέξτε μια ή περισσότερες σειρές ή στήλες. 2. Πατήστε Delete or Backspace. Για να αφαιρέσει τα περιεχόμενα ενός κελιού, αλλά να το αφήστε να υπάρχει άδειο: 1. Επιλέξτε ενός ή περισσότερα κελιά. 2. Επιλέξτε Edit > Clear ή πατήστε Delete. Προσοχή: Εάν επιλέγετε μια ολόκληρη σειρά ή μια στήλη, και έπειτα επιλέγετε Edit > Clear ή πατήστε Delete, το Dreamweaver αφαιρεί ολόκληρη την σειρά ή τη στήλη από τον πίνακα. Τροποποιώντας το μέγεθος ενός πίνακα, ή των σειρών και των στηλών του Για να αυξομειώστε ένα πίνακα: Επιλέξτε τον πίνακα και κάνετε κάτι από τα πιο κάτω. Για να τον αυξομειώστε οριζόντια, «πιάστε και σύρετε» το χερούλι που εμφανίζεται στο δεξι άκρο του πίνακα. Για να τον αυξομειώστε κατακόρυφα, «πιάστε και σύρετε» το χερούλι που εμφανίζεται στο κάτω άκρο του πίνακα. Για να τον αυξομειώστε και προς τις δύο κατευθύνσεις (οριζόντια και κατακόρυφα), «πιάστε και σύρετε» το χερούλι που εμφανίζεται στη δεξιά κάτω γωνία του περιγράμματος του πίνακα. Για να αυξομειώστε το πλάτος μιας στήλης: Επιλέξτε τη στήλη και κάνετε ένα από τα πιο κάτω: επιλέξτε και σύρετε το περίγραμμα μιας στήλης στο πάνελ Property inspector (πάνελ ιδιοτήτων)(figure 7), αλλάξτε την τιμή στο text box (παράθυρο κειμένου) W (Width) πλάτους στηλών. 34

35 Για να αυξομειώστε το ύψος μιας σειράς: Επιλέξτε τη σειρά και κάνετε ένα από τα πιο κάτω επιλέξτε και σύρετε το κάτω περίγραμμα μιας σειράς. στο πάνελ Property inspector (πάνελ ιδιοτήτων)(figure 7), αλλάξτε την τιμή στο text box (παράθυρο κειμένου) Η (Height) ύψους στηλών. Για να συμπτύξουμε δύο η περισσότερα γειτονικά κελιά σε ένα : Επιλέγουμε τα κελιά και πατάμε το εργαλείο Merges selected cells στο πάνελ των ιδιοτήτων Για να διασπάσουμε ένα κελί σε δύο Επιλέγουμε το κελί και πατάμε το εργαλείο split cell στο πάνελ ιδιοτήτων Και στο παράθυρο διαλόγου που θα εμφανιστεί ορίζω τον αριθμό των στηλών ή των σειρών που θέλω να διασπαστεί το κελί. Τροποποίηση των ιδιοτήτων ενός πίνακα Τα χαρακτηριστικά (ιδιότητες) φαίνονται στο πάνελ ιδιοτήτων από όπου μπορούμε και να τις αλλάξουμε. Οι ιδιότητες αυτές είναι: Ο αριθμός των στηλών και σειρών Το πλάτος και το ύψος του πίνακα 35

36 Μπορεί να ορίζεται σε Pixel η %. Αν τα ορίσουμε σε pixel τότε το μέγεθος τους θα είναι σταθερό. Αν το ορίσουμε σε % θα μεταβάλεται ανάλογα με την ανάλυση της οθόνης που χρησιμοποιεί ο χρήστης. Πχ 100% θα καταλαμβάνει όλη την επιφάνεια της οθόνης ενώ 50% μόνο την μισή. Cellspace: ορίζει το κενό ανάμεσα από τα κελιά Cellpad: ορίζει τα περιθώρια που θα έχει το κείμενο που θα γράψουμε στο κελί από το περίγραμμά του. bgcolor: το χρώμα του Background bgimage: την εικόνα που πιθανόν να χρησιμοποιήσουμε σαν φόντο bgdr color: το χρώμα του περιγράμματος Align η ευθυγράμμιση (στοίχιση) του πίνακα στη σελίδα Border το πάχος του περιγράμματος Δοκιμάστε όλα τα χαρακτηριστικά για να τα κατανοήσετε. Μια τεχνική με την οποία δημιουργούμε μια οργανωμένη βάση πάνω στην οποία θα τοποθετήσουμε τα στοιχεία μιας σελίδας (κείμενα, φωτογραφίες, γραφικά και πολυμεσικά στοιχεία) είναι με την δημιουργία ενός πίνακα. Τα κελιά του πίνακα καθορίζουν και τη δομή της σελίδας. Πχ μια πιθανή δομή μιας σελίδας είναι η πιο κάτω: Τίτλος ιστοσελίδα Μπάρα με μενού επιλογών Κατακόρυφη περιεχόμενο σημειώσεις μπάρα πλοήγησης Στοιχεία για τη ταυτότητα της σελίδας Άλλη τεχνική είναι με τη χρήση των επιπέδων και των αρχείων CSS που θα δούμε πιο κάτω. 4.8 Εμφάνιση εικόνων Ετικέτα εισαγωγής εικόνας Για την παρουσία μιας εικόνας σε μια ιστοσελίδα χρησιμοποιείται η ετικέτα: <img src= διαδρομή εικόνας > 36

37 Δηλαδή οι εικόνες δεν είναι μέρος της ιστοσελίδας αλλά παραμένουν ξεχωριστά αρχεία που εισάγονται από τον browser όταν προβάλλεται η ιστοσελίδα. Για να μην έχουμε προβλήματα με την θέση του αρχείου της εικόνας όταν μεταφέρουμε την ιστοσελίδα μας στον web server, δεν πρέπει να έχουμε τις εικόνες μας σε άσχετους φακέλους από τον φάκελο εργασίας μας. Καλό είναι να δημιουργούμε έναν υποφάκελο με όνομα images στον ριζικό φάκελο εργασίας μας. Στον υποφάκελο αυτόν να διατηρούμε όλες τις φωτογραφίες μας. Η πλήρης μορφή της ετικέτας εμφάνισης μια εικόνας στη ιστοσελίδα είναι: <img src="images/aristi.gif" alt="aristi" width="116" height="225" border="0" align="middle" > οι παράμετροι : alt: καθορίζει ένα εναλλακτικό κείμενο που θα εμφανίζεται στη θέση της εικόνας αν δεν «κατέβει» η εικόνα width, Height: καθορίζουν το πλάτος και ύψος της εικόνας σε pixels align: την θέση της εικόνας σε σχέση με το κείμενο που είναι γραμμένο στην ίδια παράγραφο με την εικόνα Εισαγωγή εικόνας με το Dreamweaver 1. Δημιουργήστε ένα υποφάκελο με όνομα images στον ριζικό φάκελο εργασίας. 2. Εισάγετε μια φωτογραφία. 3. Ανοίξτε μια καινούργια ιστοσελίδα 4. για να εισάγεται μια φωτογραφία επιλέξτε από το μενού insert>image 5. Επιλέξτε τη φωτογραφία aristi.gif και πατήστε enter 6. Γράψτε στην ίδια παράγραφο «Το ξενοδοχείο Mountain resort Aristi βρίσκεται στο πιο όμορφο σημείο των Ζαγοροχωρίων» 7. Ρυθμίστε τις ιδιότητες της εικόνας ώστε: a. να εμφανίζει το εναλλακτικό κείμενο logo του ξενοδοχείου Aristi b. να στοιχίζετε το κείμενο στη βάση της εικόνας 8. Παρατηρήστε τον κώδικα που έχει γραφεί. 9. Στη γραμμή κατάστασης φαίνεται ο πιθανότερος χρόνος που θα κάνει η σελίδα μας να κατέβει. Ο πιθανός χρόνος που θα κάνει η εικόνα να κατέβει στον υπολογιστή μας εξαρτάται από το είδος σύνδεσης που έχουμε με το ιντερνετ (PSTN 56Κbps, ISDN Κbps, ADSL >1Μbps κλπ). Μπορούμε στο dreamweaver να ρυθμίσουμε την σύνδεση για την οποία να υπολογίζεται ο χρόνος «κατεβάσματος». Επιλέγουμε από το μενού Edit>preference>Status bar και ρυθμίζουμε την ταχύτητα σύνδεσης. 37

38 4.8.3 Είδη εικόνων: GIF, JPEG, PNG Επειδή τα αρχεία εικόνων είναι συνήθως μεγάλα, βάζουμε στην ιστοσελίδα μας εικόνες συμπιεσμένες με απωλεστικούς αλγορίθμους όπως gif, jpeg και png. Όσο πιο μικρό αρχείο είναι τόσο πιο γρήγορα θα εμφανιστεί. Για τον λόγο αυτόν προσπαθούμε τα pixel της εικόνας να αντιστοιχούν ακριβώς στα pixel της οθόνης. gif Αυτή η μορφή είναι καλύτερη για εικόνες που έχουν μπλοκ συνεχούς χρώματος, συνήθως σχέδια. jpeg Αυτή η μορφή είναι καλύτερη για φωτογραφικές εικόνες και για εικόνες που δεν έχουν μπλοκ συνεχούς χρώματος. png Αυτή είναι μια μορφή που αντικαθιστά τα gif. Υποστηρίζει την διαφάνεια και δημιουργούνται από το Fireworks που συνεργάζεται άψογα με τον dreamweaver. 4.9 Προετοιμασία των εικόνων Κάθε εικόνα που θα βάλουμε στην ιστοσελίδα μας πρέπει να την προεπεργαστούμε με ένα πρόγραμμα επεξεργασίας ώστε να είναι «ελαφρια» και «καθαρή» δηλαδή το αρχείο της να είναι όσο το δυνατόν μικρότερου μεγέθους και να φαίνεται με όσο το δυνατόν καλύτερη πιστότητα στα χρώματά της. Για να γίνει αυτό υπάρχουν έτοιμα εργαλεία σε πολλά προγράμματα επεξεργασίας εικόνας όπως το photoshop. Το πλήρες στούντιο που μας δύνεται από την macromedia μαζί με το dreamweaver περιέχει έναν εξειδικευμένο επεξεργαστή εικόνας το fireworks που έχει όλα τα απαραίτητα εργαλεία για την προετοιμασία των εικόνων για την εισαγωγή τους σε ιστοσελίδα και επιπλέον συνεργάζεται αρμονικότατα με το dreamweaver βελτιστοποίηση εικόνων με το fireworks 1. Τρέξτε το fireworks. 2. Ανοίξτε την εικόνα νούφαρα.jpg από τον φάκελο my pictures Από τα rulers βλέπουμε ότι το μέγεθος της εικόνας σε pixels είναι περίπου 800Χ Επιλέξτε Modify<canvas<image size. 38

39 4. Επειδή η ανάλυση της οθόνης είναι 72pixels/inch μετατρέπουμε την ανάλυση της εικόνας σε 72pixels/inch για να την δούμε όπως ακριβώς θα φαίνεται στην οθόνη Αυτή είναι και η ρύθμιση που θα κάνουμε πρώτα σε οποιαδήποτε εικόνα θα περνούμε στη ιστοσελίδα μας. 5. Για να δούμε την βέλτιστη διαμόρφωση της εικόνας και τον τύπο που θα προτιμήσουμε θα χρησιμοποιήσουμε έναν «μάγο» του fireworks 6. επιλέξτε από το μενού files>export wizards 7. Πατήστε continue 8. Επιλέξτε The web 39

40 Πειραματιζόμαστε ώστε να επιτύχουμε μικρότερο αρχείο με την βέλτιστη ποιότητα Δημιουργία εικόνας με το fireworks Έστω ότι θέλουμε να κατασκευάσουμε ένα κουμπί μεγέθους 70Χ26pixels. Επιλέγουμε new ορίζουμε πλάτος 70, υψος 26 και ανάλυση 72 επιλέξτε χρώμα φόντου πράσινο σκούρο από το zoom μεγαλώστε την εικόνα. 40

41 5 Στυλ και CSS αρχεία 5.1 Δημιουργία style Πριν προχωρήσετε στην δημιουργία μια ιστοσελίδας καλό είναι να βρείτε το στυλ που εσείς προτιμάτε. Δηλαδή να ορίσετε το φόντο την γραμματοσειρά και τα χρώματα που θα έχει το κείμενό σας, οι επικεφαλίδες, κλπ. Για τον καθορισμό του στυλ και για την τροποποίηση του έχει δημιουργηθεί μια ολόκληρη γλώσσα ειδικών εντολών που ονομάζεται css. O Dreamweaver σας δίνει την δυνατότητα να διαμορφώστε το στυλ που επιθυμείται και να γράψει αυτός αντί για εσάς τις αντίστοιχες εντολές css που χρειάζονται. Οι εντολές γράφονται στη περιοχή head μιας ιστοσελίδας. Δεν χρειάζεται να ανησυχείτε αν δεν μπορείτε να διαλέξετε, μπορείτε να κάνετε διάφορα εναλλακτικά και να τα εφαρμόσετε στην ιστοσελίδα σας με ένα κλικ. 1. Ανοίξτε μια νέα ιστοσελίδα. 2. επιλέξτε setup page properties 3. και καθορίστε την μορφή που θα έχουν οι κατηγορίες Appearance: 41

42 Headings 4. Πατάμε enter και βλέπουμε να εμφανίζονται τα στυλ που φτιάξαμε στο design > CSS Styles 42

43 5. Γράφουμε τα πιο κάτω κείμενα Επικεφαλίδα 1 Επικεφαλίδα 2 Επικεφαλίδα 3 βασικό κείμενο 6. και από τις ιδιότητες κειμένου ορίζουμε στις σειρές του κειμένου τους αντίστοιχους τύπους h1,h2,h3,paragraph 7. Ανοίξτε στη προβολή code και θα δείτε ότι στο χώρο head της σελίδα σας έχουν γραφτεί: 43

44 Παρατηρούμε ότι στο χώρο της επικεφαλίδας (head) μπορούμε να γράψουμε πληροφορίες που περιγράφουν ειδικά χαρακτηριστική της μορφής και της δομής της ιστοσελίδας μας. Η περιγραφή γίνεται μέσα σε μια ειδική ετικέτα <style..> και με μια ειδική γλώσσα που ονομάζεται γλώσσα CSS. 44

45 5.1.1 Δημιουργία ανεξάρτητου αρχείου Στυλ (αρχείου.css). 1. Από την παλέτα css επιλέξτε όλα τα στυλ που έχετε δημιουργήσει (κέντε κλίκ στο h1 και έχοντας πατημένο το ctrl κάντε κλικ και σε όλα τα άλλα.) 2. Κατόπιν κάντε δεξί κλι και επιλέξτε Move CSS Rules.. 3. Θα εμφανιστεί το πλαίσιο: Στο οποίο θα επιλέξτε A new Style Sheet (δηλαδή να μεταφερθούν οι κανόνες ορισμού στυλ σε ένα νέο αρχείο)και πατείστε enter. 4. Στο νέο παράθυρο διαλόγου 45

46 5. Που σας ζητά το όνομα του αρχείου στο οποίο θα μπεί το στυλ σας και τη θέση στην οποία θα αποθηκευτεί γράψτε mystyle δημιουργείστε ένα φάκελο css αποθηκεύστε το μέσα του. 6. Βρείτε τις αλλαγές που έγιναν στα πανελ του dreamweaver. 1η.. 2η. 3η. 46

47 Συμπεραίνουμε ότι οι κανόνες του στυλ μεταφέρθηκαν σε ένα αρχείο με το όνομα που δώσαμε (mystyle.css). Οι κανόνες στην επικεφαλίδα(head) αντικαταστάθηκαν από μια ετικέτα με όνομα <link..> που συνδέει την ιστοσελίδα μας με το αρχείο css. 7. Κλείστε την ιστοσελίδα και ανοίξτε μια νέα. 47

48 8. Γράψτε 9. και δώστε του ίδιους τύπους που δώσατε προηγουμένως Τίτλος 1 Heading 1 Τίτλος 2 Heading 2 Τίτλος 3 Heading 3 Τίτλος 4 Heading Κάντε κλικ στο εικονίδιο ή κάντε δεξί κλικ στο <no styles> και επιλέξτε attache external Style Sheet 11. Βρείτε το αρχείο mystyle.css και τραβήξτε το ή συνδέστε το. 12. Τότε θα δείτε τη σελίδα σας να μεταμορφώνετε στη μορφή που είχατε ορίσει προηγουμένως. Συνεπώς με τα αρχεία css και τη γλώσσα css μπορούμε να δημιουργήσουμε κανόνες μορφοποίησης και δομής ιστοσελίδων που να χρησιμοποιούνται από όποια καινούργια σελίδα φτιάξουμε. Σήμερα η τεχνική αυτή χρησιμοποιείται ευρύτατα από τους κατασκευαστές σελίδων. 48

49 6 Τα επίπεδα «Div» Με τα επίπεδα μπορούμε να καθορίσουμε τη δομή μια ιστοσελίδας. Είναι ο δεύτερος εναλλακτικός τρόπος οργάνωσης και κατασκευής μιας σελίδας (ο πρώτος ήταν με πίνακα). Ο δεύτερος τρόπος χρησιμοποιείται πιο πολύ σήμερα και δημιουργεί πιο ελαφριές σελίδες. 6.1 Δημιουργία επίπεδου (ap div). 1. Δημιουργήστε μια νέα σελίδα 2. Σιγουρευτείτε ότι το Files panel είναι ορατό(εικόνα 6.1). Αν δεν είναι επιλέξτε από το μενού Window > Files. 3. Επιλέξτε File > New. Το πλαίσιο διαλόγου Νew ανοίγει (εικόνα 6.2). document 4. Από τη κατηγορία Blank Page επιλέξτε Page Type, HTML και πιέστε create. 5. Αποθηκεύστε τη σελίδα σαν index.html 6. Δείτε την στο Files panel 7. Από την Insert bar επιλέξτε το κουμπί Draw AP Div Ο δείκτης του ποντικιού αλλάζει σε έναν σταυρό όταν τον κινείτε στη περιοχή σχεδίασης. 8. σχεδιάστε ένα παραλληλόγραμμο για τον τίτλο της ιστοσελίδας. 9. Από τις ιδιότητες δώστε χρώμα στο φόντο του σκούρο πράσινο. 10. Συμπληρώστε στις ιδιότητας στο κουτί κειμένου CCS-P Element για όνομα του επιπέδου την λέξη «Header. 49

50 11. Σχεδιάστε άλλα δύο επίπεδα όπως φαίνονται στην εικόνα. 12. Ονομάστε τα navigation και content. 13. Ανοίξτε το CSS panel και στο tab AP Elements δείτε τη λίστα με τα div που κατασκευάσατε. 14. Αποθηκεύσετε τη σελίδα Σημειώστε περιγραφικά τι αλλαγές έγιναν στα head και στο body τμήμα της ιστοσελίδα σας. 6.2 Τροποποίηση επιπέδων. Για να επιλέξτε ένα div επιλέξτε το περίγραμμα του ή από το πάνελ AP elements επιλέξτε το επίπεδο που θέλετε 1.Αυξομειώστε το μέγεθός τους από τις «λαβές» του περιγράμματος ή από τις ιδιότητες W και H. Η δε θέση του από τις ιδιότητες Τ (Top) που σημαίνει πόσα Pixel απέχει από την πάνω γραμμή του div και L (Left) που σημαίνει πόσα pixel απέχει από την αριστερή πλευρά της επιφάνειας εργασίας. 2.Ξεκλικάρετε την επιλογή Privent Overlap και τοποθετήστε τα επίπεδα το ένα πάνω στο άλλο. 3.Αλλάξτε τον αριθμό Ζ-index και προσπαθήστε να καταλάβετε πως λειτουργεί. 4.Κλικάρετε την επιλογή Privent Overlap και προσπαθήστε να επαναλάβετε τα πιο πάνω. Τι παρατηρείτε? 5.Τέλος καθορίστε για τα div τις πιο κάτω ιδιότητες: 50

51 Header :W=600, H=100, T=1 και L=1 Content :W=500, H=400, T=101 και L=1 Navigation: W=100, H=400, T=101 Και L= Μεταφορά των χαρακτηριστικών των div σε αρχεία css Όπως κάναμε στη μεταφορά των στυλ μπορούμε να το κάνουμε και με τα div. Στο πάνελ css βλέπουμε ότι υπάρχουν και τα στυλ των div που κατασκευάσαμε. Επιλέγοντάς τα όλα (ctrl+κλικ) και επιλέγοντας με δεξί κλικ move CSS rules τα μεταφέρουμε στο αρχείο mystyle.css που ήδη κατασκευάσαμε για τα styl. Παρατηρήστε και σημειώστε τι συνέβη στο κώδικα στη περιοχή head και στη περιοχή body 6.4 Εισαγωγή περιεχομένου στα επίπεδα. 1.Δημιουργείστε μια εικόνα με διαστάσεις μικρότερες από το επίπεδο header και βάλτε την στο επίπεδο. 2.Προσθέστε κείμενο στα επίπεδα 3.Κάντε προεπισκόπηση για να δείτε το αποτέλεσμα. 6.5 Δημιουργία άλλων σελίδων με το ίδιο στυλ 1. Δημιουργείστε μια νέα σελίδα με όνομα same_style.html 2. Στό πάνελ css πατήστε το εικονίδιο και επιλέξτε Από πού παίρνει το στυλ πλέον η ιστοσελίδα μας;.. 3. Κάντε κλικ στο κουμπί 51

52 Με το κουμπί αυτό μπορώ να εισάγω div που τα έχω στο css. 4. Έτσι στο πλαίσιο διαλόγου που θα εμφανιστεί συμπληρώνω το id του div που θέλω Και στη σελίδα μου θα εμφανιστεί το div Header 5. Κάνω το ίδιο και με τα υπόλοιπα div. Με ποια άλλη σελίδα μοιάζει η σελίδα που μόλις έφτιαξα; Ασκηση Δημιουργήστε τρεις ιστοσελίδες που θα έχει την πιο κάτωw=798px δόμή: Bgcolor=Κοκκινο Header H=150px Contend 600px Nav W=100px Bgcolor=Μπλέ Σε κάθε div να βάλετε εικόνες και να γράψτε κάποιο κείμενο 1. αποθηκεύστε την σελίδα με όνομα grafistes2.htm 52

Δείτε περισσότερα