Δεμιοσργία Ιζηοζελίδας Κένηροσ Ξένων Γλωζζών και Φσζικής Αγωγής

Transcript

1 Τ.Ε.Ι. Καβάλας Στολή Διοίκησης και Οικονομίας Τμήμα Λογιστικής Θέμα Πηστιακής Εργαζίας : Δεμιοσργία Ιζηοζελίδας Κένηροσ Ξένων Γλωζζών και Φσζικής Αγωγής Φοιτήτρια: Γανωηίδοσ Αικαηερίνε Υπεύθσνος Καθηγητής: Καδανίδες Ιωάννες Καβάλα 2007

2 Σηότος ηης πηστιακής μοσ εργαζίας ήηαν η δημιοσργία ιζηοζελίδας για ηο Κένηροσ Ξένων Γλωζζών και Φσζικής Αγωγής. Προκειμένοσ να επιηεστθεί κάηι ηέηοιο θα πρέπει πρώηα να προηγηθεί μελέηη γενικόηερων εννοιών ηοσ διαδικηύοσ. Η πηστιακή εργαζία αποηελείηαι από ηέζζερα κεθάλαια. Το πρώηο κεθάλαιο αναθέρεηαι γενικά ζηο διαδίκησο και ηον παγκόζμιο ιζηό. Το δεύηερο κεθάλαιο όποσ γίνεηαι μια αναθορά ζηην τρηζηικόηηηα ηων ζελίδων ηοσ διαδικηύοσ και ηοσς κανόνες ποσ πρέπει να ακολοσθούμε για ηην ζωζηή και οργανωμένη λειηοσργία μιας ιζηοζελίδας. Σηο ηρίηο κεθάλαιο παροσζιάζεηαι ένα πλαίζιο ποσ ακολοσθείηαι για ηην δημιοσργία ηης ιζηοζελίδας και ο ηρόπος σλοποίηζής ηοσ. Τέλος ηο ηέηαρηο κεθάλαιο αναθέρεηαι ζηη σλοποίηζη ηης ιζηοζελίδας ηοσ Κένηροσ Ξένων Γλωζζών και Φσζικής Αγωγής.

3 ΠΕΡΙΕΧΟΜΕΝΑ Κεθάιαην 1 ν 1. Γηαδίθηπν θαη παγθφζκηνο Ιζηφο Ση είλαη Γίθηπν Domain Name System Τπεξεζίεο ηνπ Γηαδηθηχνπ Οη θνηλσληθέο επηδξάζεηο ηνπ Internet 12 Κεθάιαην 2 ν 2. Υξεζηηθφηεηα ηνπ Internet Κεθάιαην 3 ν 3. Πιαίζην δεκηνπξγίαο Ιζηνζειίδσλ...18 Κεθάιαην 4 ν 4. Τινπνίεζε Ιζηνζειίδαο Κ.Ξ.Γ. & Φ.Α ρεδηαζκφο δνκήο ηεο Ιζηνζειίδαο Γεκηνπξγία Αξρηθήο ειίδαο Γεκηνπξγία ηνπ Μελνχ Πινήγεζεο Γεκηνπξγία Τπφινηπσλ ειίδσλ Βηβιηνγξαθία..43 1

4 ΚΕΦΑΛΑΙΟ 1 ο 1. ΔΙΑΔΙΚΣΤΟ ΚΑΙ ΠΑΓΚΟΜΙΟ ΙΣΟ [1,2] Μία απφ ηηο κεγαιχηεξεο εθεπξέζεηο ηεο επνρήο καο είλαη ην δηαδίθηπν. Υσξίο ακθηβνιία έρεη κεγάιε επηξξνή ζηε δσή καο αθνχ έρεη αιιάμεη ηνλ ηξφπν πνπ δνπιεχνπκε, επηθνηλσλνχκε, δηαζθεδάδνπκε αθφκα θαη ηνλ ηξφπν πνπ κνξθσλφκαζηε. Σν Internet απνηειεί ζήκεξα έλα απφ ηα πιένλ δηαδεδνκέλα κέζα επηθνηλσλίαο. Καζψο ρξεζηκνπνηείηαη γηα ηελ αληαιιαγή κελπκάησλ, θέξλεη θνληά αλζξψπνπο πνπ βξίζθνληαη ζε κεγάιεο απνζηάζεηο κεηαμχ ηνπο. Με ην Internet ινηπφλ κπνξνχκε λα θάλνπκε ην γχξν ηνπ θφζκνπ ρσξίο λα ρξεηαζηεί λα κεηαθηλεζνχκε απφ ηνλ ππνινγηζηή καο. Οη ζχλδεζκνη ηνπ Internet είλαη δίθηπα ζε φιν ηνλ θφζκν έηζη ψζηε νη ρξήζηεο λα κπνξνχλ λα κνηξάδνληαη πιεξνθνξίεο θαη λα επηθνηλσλνχλ κεηαμχ ηνπο. Σν δηαδίθηπν δειαδή είλαη έλα δίθηπν ην νπνίν απνηειείηαη απφ κηθξφηεξα δίθηπα ηα νπνία εμαπιψλνληαη ζε φιν ηνλ θφζκν. Δίλαη εχθνιν λα ζπλδέζνπκε δχν ππνινγηζηέο πνπ βξίζθνληαη ζηνλ ίδην ρψξν κε ηελ βνήζεηα ελφο θαισδίνπ. Όηαλ ε απφζηαζε φκσο κεηαμχ ησλ ππνινγηζηψλ κεγαιψλεη, ρξεζηκνπνηνχληαη δηάθνξνη ηξφπνη ζχλδεζεο, φπσο θνηλέο ηειεθσληθέο γξακκέο, κηζζσκέλεο ηειεπηθνηλσληαθέο γξακκέο δηαθφξσλ ηερλνινγηψλ. Η κνλαδηθφηεηα πνπ ραξαθηεξίδεη ην δηαδίθηπν είλαη φηη επηηξέπεη πνιινχο θαη δηαθνξεηηθνχο ππνινγηζηέο λα επηθνηλσλνχλ κεηαμχ ηνπο. Απηφ γίλεηαη εθηθηφ κε ηελ ρξήζε ησλ πξσηνθφιισλ επηθνηλσλίαο πνπ δηέπνπλ ην δηαδίθηπν(tcp/ip).σα πξσηφθνιια επηθνηλσλίαο είλαη έλα πνιχ ζεκαληηθφ ζηνηρείν γηα έλα δίθηπν, γηαηί είλαη απηά πνπ ειέγρνπλ θαη ζπληνλίδνπλ φια ηα 2

5 δεδνκέλα πνπ κεηαθέξνληαη. Σν βαζηθφ πξσηφθνιιν πνπ ρξεζηκνπνηείηαη ζηα δηαδίθηπα είλαη ην TCP/IP (Transmission Control Protocol / Internet Protocol). Σν World Wide Web (Παγθφζκηνο Ιζηφο) ή WWW ή απιά Web είλαη κηα απφ ηηο πην ρξήζηκεο θαη ζπλερψο αλαπηπζζφκελε ππεξεζία ηνπ Internet. Η ηδέα ηνπ δηαδηθηχνπ αξρηθά ζπιήθζεθε απφ ην Τπνπξγείν Άκπλαο Ακεξηθήο κε ζθνπφ λα πξνζηαηέςνπλ ηα θπβεξλεηηθά επηθνηλσληαθά ηνπο ζπζηήκαηα ζε πεξίπησζε πνιέκνπ. Ο παγθφζκηνο ηζηφο ή απιά WWW, ή, επίζεο, Web, απνηειεί ηελ θπξηφηεξε ζήκεξα ππεξεζία ηνπ Internet γηα αλαδήηεζε πιεξνθνξηψλ. Η ππεξεζία απηή, παξέρεη ηε δπλαηφηεηα ηεο αλαδήηεζεο, πεξηήγεζεο θαη κεηαθνξάο ησλ δεδνκέλσλ ηνπ δηαδηθηχνπ κε ηδηαίηεξα θηιηθφ θαη απιφ ηξφπν, θαζψο δηαζέηεη δεδνκέλα ζε κνξθή θεηκέλνπ, εηθφλαο, ήρνπ θαη βίληεν. Αξρηθά, νη ζειίδεο ηνπ ηζηνχ πεξηείραλ κφλν θείκελν. ήκεξα κπνξεί λα πεξηέρνπλ δηάθνξεο πιεξνθνξίεο φπσο εηθφλεο, γξαθηθά, ήρν θαη νπνηαδήπνηε άιιε κνξθή ςεθηαθήο πιεξνθνξίαο. Οη ζειίδεο ηνπ ηζηνχ κπνξεί λα βξίζθνληαη νπνπδήπνηε κέζα ζην Internet. Γηα ηελ εγγξαθή ησλ ζειίδσλ ηνπ ηζηνχ ρξεζηκνπνηείηαη κηα γιψζζα πνπ ιέγεηαη HTML. Σν Πξσηφθνιιν πνπ ρξεζηκνπνηείηαη απφ ηνλ ηζηφ γηα ηελ πξνζπέιαζε ησλ ζειίδσλ είλαη ην HTTP (HyperText Transfer Protocol = Πξσηφθνιιν Μεηαθνξάο κε Τπεξθείκελν). Οη πιεξνθνξίεο είλαη νξγαλσκέλεο ζε ειεθηξνληθέο ζειίδεο πνπ νλνκάδνληαη Web ζειίδεο (Ιζηνζειίδεο) θαη ζπλδένληαη κεηαμχ ηνπο κε ζπλδέζκνπο. Μηα ζπιινγή Web ζειίδσλ πνπ βξίζθεηαη απνζεθεπκέλε ζε έλα ζπγθεθξηκέλν ζεκείν ηνπ Internet θαη δηαηίζεηαη δεκφζηα νλνκάδεηαη Web site. Π.ρ. ην ζχλνιν ησλ ζειίδσλ πνπ βξίζθνληαη απνζεθεπκέλεο ζηε δηεχζπλζε απνηειεί ην Web site ηνπ Σερλνινγηθνχ Δθπαηδεπηηθνχ Ιδξχκαηνο Καβάιαο. Η αξρηθή 3

6 ζειίδα ελφο Web site είλαη ην ζεκείν εηζφδνπ πξνο ηηο ππφινηπεο ζειίδεο ηεο ζπιινγήο θαη νλνκάδεηαη home page. Απφ ηερληθή ζθνπηά, ν παγθφζκηνο ηζηφο είλαη νξγαλσκέλνο ζχκθσλα κε ηελ αξρηηεθηνληθή πειάηε-εμππεξεηεηή (clientserver). Κάζε εμππεξεηεηήο, πνπ είλαη έλαο ππνινγηζηήο Web server, ρεηξίδεηαη έλα ζχλνιν ζηνηρείσλ, ηα νπνία βξίζθνληαη ζε απηφλ απνζεθεπκέλα κε ηελ κνξθή ηζηνζειίδσλ ή ειεθηξνληθψλ ζειίδσλ θαη δέρεηαη αλαδεηήζεηο απφ ππνινγηζηέο-πειάηεο (clients). Οη ππνινγηζηέο-πειάηεο είλαη ππνινγηζηέο ζπλδεδεκέλνη ζην δίθηπν. Υξεζηκνπνηνχλ πξνγξάκκαηα πνπ ιέγνληαη θπιινκεηξεηέο (web browsers) θαη δεηνχλ θάπνηα απφ ηα ζηνηρεία ηνπ εμππεξεηεηή. Ο εμππεξεηεηήο, πνπ είλαη εθνδηαζκέλνο κε έλα πξφγξακκα εμππεξέηεζεο θιήζεσλ, ηα παξέρεη ζχκθσλα κε θάπνηα πξσηφθνιια. ηελ πεξίπησζε ηνπ παγθφζκηνπ δηθηχνπ ην ρξεζηκνπνηνχκελν πξσηφθνιιν είλαη ην HTTP (Hyper Text Transfer Protocol) φπσο αλαθέξακε ήδε. 1.1 Σι είναι Δίκησο [3] Η επηθνηλσλία αλέθαζελ απνηεινχζε αλάγθε ηνπ αλζξψπνπ. Όπσο θαη ν άλζξσπνο έηζη θαη απηή αθνινχζεζε κία αλνδηθή πνξεία. ήκεξα ράξε ζηελ ζχγρξνλε ηερλνινγία, ηα δηάθνξα κέζα επηθνηλσλίαο εμειίρζεθαλ θαη ηειεηνπνηήζεθαλ κε απνθνξχθσκα ην ππεξδίθηπν INTERNET. Γίθηπν νλνκάδνπκε θάζε ζχζηεκα κε δχν ηνπιάρηζηνλ ππνινγηζηέο, κφληκα ζπλδεδεκέλνπο κεηαμχ ηνπο, κέζσ ελζχξκαηεο επηθνηλσλίαο(ζηαζεξήο θαισδίσζεο). πλήζσο ηα ζηνηρεηαθά κέξε ηνπ πνπ απνηεινχλ ην δίθηπν βξίζθνληαη ζηνλ ίδην ρψξν (γξαθείν, θηίξην) θαη κπνξνχλ, κε εηδηθφ Hardware θαη Software, λα αληαιιάζζνπλ ζηνηρεία, λα επηθνηλσλνχλ θαη λα κνηξάδνληαη ηε ρξήζε πεξηθεξεηαθψλ ζπζθεπψλ. 4

7 Σα επηκέξνπο ζπζηαηηθά ηνπ κπνξεί λα είλαη απηφλνκνη ειεθηξνληθνί ππνινγηζηέο, πεξηθεξεηαθά φπσο εθηππσηέο ή ζπζηήκαηα απνζήθεπζεο δεδνκέλσλ, εμεηδηθεπκέλνη δειαδή ππνινγηζηέο πνπ ιεηηνπξγνχλ σο δηεξκελείο κεηαμχ δηαθνξεηηθψλ κεραλψλ ή θαη νιφθιεξσλ δηθηχσλ. 1.2 Domain Name System [4,5] Οη αξηζκεηηθέο IP δηεπζχλζεηο είλαη δχζθνιν λα ηηο ζπκφκαζηε. Γηα ηνλ ιφγν απηφ αλαπηχρζεθε ην χζηεκα Ολνκαζίαο Πεξηνρψλ ζχκθσλα κε ην νπνίν ζε κηα IP δηεχζπλζε αληηζηνηρεί έλα φλνκα πνπ είλαη κνλαδηθφ γηα θάζε ππνινγηζηή. Λφγσ ηνπ φηη θάζε δηεχζπλζε ΙΡ αλαθέξεηαη ζε έλαλ θαη κφλν ππνινγηζηή ππεξεζίαο, είλαη ζρεηηθά εχθνιν λα πξνζδηνξίζνπκε ηελ ηαπηφηεηα ππνινγηζηψλ ππεξεζίαο δηθηχνπ κε ην φλνκα θαη ηνλ αξηζκφ. Έλα θαιά θαζνξηζκέλν ζχλνιν θαλφλσλ νλνκαζίαο ησλ ππνινγηζηψλ ηνπ δηθηχνπ έρεη αλαπηπρζεί παξάιιεια κε κηα ππεξεζία θαηαιφγνπ γηα ηελ αλαδήηεζε νλνκάησλ. Οη θαλφλεο απηνί θαη ε ππεξεζία θαηαιφγνπ είλαη επξέσο γλσζηά σο χζηεκα Ολνκαζίαο κε Πεξηνρέο (Domain Name System - DNS). Η πεξηνρή (domain) είλαη κηα γλσζηή νκάδα ππνινγηζηψλ ππεξεζίαο δηθηχνπ. (Μηα πεξηνρή κπνξεί λα πεξηέρεη έλαλ κφλν ή πνιινχο ππνινγηζηέο). Αλ γλσξίδεηε ην φλνκα ελφο ππνινγηζηή (host name) θαη ηηο πεξηνρέο ζηηο νπνίεο αλήθεη, ζα έρεηε κηα πην ζαθή εηθφλα γηα ην πνπ βξίζθεηαη θάπνηνο ππνινγηζηήο ζην δίθηπν απφ φηη αλ έρεηε κφλν ηε δηεχζπλζε ηνπ ΙΡ. Σν ζχζηεκα νλνκαζίαο πεξηνρψλ νξγαλψλεη ηα νλφκαηα ζε ηεξαξρίεο παξφκνηεο κε ηηο δνκέο θαηαιφγσλ ζε έλα ζχζηεκα αξρείσλ ππνινγηζηψλ. Σα νλφκαηα πεξηνρψλ πεξηγξάθνπλ νξγαλσηηθέο ή γεσγξαθηθέο νληφηεηεο. Γειψλνπλ ηελ ρψξα πνπ είλαη ζπλδεδεκέλν ην δίθηπν, ζε ηη είδνπο νξγαληζκφ αλήθεη θαη 5

8 ζε κεξηθέο πεξηπηψζεηο ηα νλφκαηα νξίδνληαη κε αθφκε κεγαιχηεξε ιεπηνκέξεηα. Έλα φλνκα πεξηνρήο απνηειείηαη απφ ιέμεηο πνπ ρσξίδνληαη κεηαμχ ηνπο κε ηειείεο. Σν πιήζνο ησλ ιέμεσλ κπνξεί λα πνηθίιεη. πλήζσο ζπλαληάκε νλφκαηα κε 3 έσο 5 ιέμεηο. edu com gov mil net org Δθπαηδεπηηθά ηδξχκαηα Δκπνξηθέο επηρεηξήζεηο Κξαηηθνί νξγαληζκνί ηξαηησηηθνί νξγαληζκνί Οξγαληζκνί δηαρείξηζεο δηθηχσλ Οξγαληζκνί πνπ δελ εληάζζνληαη ζηηο παξαπάλσ θαηεγνξίεο Τπάξρνπλ 6 γλσζηνί ηχπνη πεξηνρψλ πνπ είλαη κε γεσγξαθηθνί θαη νη νπνίνη δειψλνπλ ην είδνο ηνπ νξγαληζκνχ ρξεζηκνπνηψληαο θσδηθνχο 3 γξακκάησλ. Οη γεσγξαθηθά ηνπνζεηεκέλεο πεξηνρέο ρξεζηκνπνηνχλ θσδηθνχο ρσξψλ 2 γξακκάησλ. Π.ρ. αu ca de fr gr jp uk Απζηξαιία Καλαδάο Γεξκαλία Γαιιία Διιάδα Ιαπσλία Αγγιία ε έλα πιήξεο φλνκα πεξηνρήο (Full qualified) ην ηκήκα πξνο ηα δεμηά είλαη ε πεξηνρή αλψηεξνπ επηπέδνπ πνπ παξηζηά έλα ηχπν νξγαληζκνχ ή κηα ρψξα. Όπσο δηαβάδεηαη απφ ηα δεμηά πξνο ηα αξηζηεξά ην φλνκα γίλεηαη ζαθέζηεξν κέρξη λα θζάζνπκε ζην φλνκα ηνπ ζπγθεθξηκέλνπ ππνινγηζηή. 6

9 Π.ρ. Name.teikav.edu.gr Ο ππνινγηζηήο απηφο βξίζθεηαη ζηελ Διιάδα (gr), αλαθέξεηαη ζε εθπαηδεπηηθφ ίδξπκα (edu) ηνπ ΣΔΙ Καβάιαο (teikav) θαη έρεη θάπνην φλνκα (name). Έλα ηππηθφ παξάδεηγκα ψζηε λα γίλνπλ πην θαηαλνεηά, ην είλαη ην φλνκα θαη απηή ε δηεχζπλζε αληηζηνηρεί ζηελ Ιζηνζειίδα ηνπ Σ.Δ.Ι. Καβάιαο ην.edu δειψλεη φηη είλαη εθπαηδεπηηθφ ίδξπκα θαη ην.gr δειψλεη φηη βξίζθεηαη ζηελ πεξηνρή ηεο Διιάδαο. Κάζε έλα απφ απηά ηα επίπεδα αλαθέξεηαη σο domain. Οιφθιεξν ην φλνκα νλνκάδεηαη domain name. Σν ζχζηεκα domain θπζηθά δελ έρεη απεξηφξηζηεο δπλαηφηεηεο ζην λα εληνπίδεη Internet δηεπζχλζεηο. Κάζε domain name απνηειεί έλα ζχζηεκα ζηε βάζε δεδνκέλσλ. Παξαδείγκαηα είλαη νη Internet δηεπζχλζεηο, ν ηχπνο ηνπ ππνινγηζηή θαη κηα ιίζηα ππεξεζηψλ πνπ παξέρνληαη απφ έλα ππνινγηζηή. Έλα πξφγξακκα κπνξεί λα ξσηήζεη γηα θάπνηα ζπγθεθξηκέλε πιεξνθνξία ή γηα φιεο ηηο πιεξνθνξίεο πνπ αληηζηνηρνχλ ζε έλα δεδνκέλν φλνκα. Δίλαη επίζεο δπλαηφλ λα ρξεζηκνπνηείηαη ην domain ζχζηεκα γηα ηελ απνζήθεπζε πιεξνθνξηψλ ζρεηηθά κε ηνπο ρξήζηεο θ.ι.π. Τπάξρεη έλα Internet δεδνκέλν πνπ θαζνξίδεη ηε ιεηηνπξγία απηψλ ησλ βάζεσλ δεδνκέλσλ, φπσο θαη ησλ πξσηνθφιισλ πνπ ρξεζηκνπνηνχληαη γηα ηελ πξαγκαηνπνίεζε ησλ εξσηήζεσλ. Κάζε εξγαιείν ηνπ δηθηχνπ ζα πξέπεη λα έρεη ηε δπλαηφηεηα λα θάλεη θάπνηεο εξσηήζεηο, αθνχ απηφο είλαη ν επίζεκνο ηξφπνο λα απνδνζνχλ ηηκέο ζην νλφκαηα ησλ δηεπζχλζεσλ. Σν ζχζηεκα domain είλαη πνιχ ζεκαληηθφ ζηε δηαρείξηζε ηνπ ηαρπδξνκείνπ. 7

10 1.3 Τπηρεζίες ηοσ διαδικηύοσ [6,7] Έλα βαζηθφ ραξαθηεξηζηηθφ ηνπ παγθφζκηνπ ηζηνχ πνπ ζπκβάιεη ζηελ θαζηέξσζε ηνπ ζαλ κέζν πινήγεζεο ζην δηαδίθηπν, είλαη φηη παξέρεη εληαία πξφζβαζε θαη ζε άιιεο ππεξεζίεο ηνπ Internet. Έηζη, νη θπιινκεηξεηέο πξνζθέξνπλ ζην ρξήζηε έλα πνιχ εχρξεζην θαη θηιηθφ πεξηβάιινλ κέζα απφ ην νπνίν κπνξεί λα εθηειεί δηάθνξεο εξγαζίεο ζην Internet, ρσξίο λα ρξεηάδεηαη λα θαηαθεχγεη ζε μερσξηζηά πξνγξάκκαηα γηα ηελ θάζε ππεξεζία πνπ επηζπκεί λα ρξεζηκνπνηήζεη. Έηζη, ν θπιινκεηξεηήο απνηειεί έλα ηζρπξφ κέζσ εξγαζίαο, πνπ ζπλδπάδεη κε έλα πξφγξακκα φιεο ηηο ππεξεζίεο: , Usenet, anonymous FTP, gopher, telnet. Η θαηεμνρήλ πξαθηηθή ρξήζεο ηνπ παγθφζκηνπ ηζηνχ είλαη ε πινήγεζε ζηηο ηζηνζειίδεο ηνπ κε ηε ρξήζε ησλ θπιινκεηξεηψλ. Οη ηζηνζειίδεο, πνπ πεξηέρνπλ ζπλδέζκνπο (ελεξγά ζεκεία θεηκέλνπ, εηθφλσλ ή γξαθηθψλ), επηηξέπνπλ ην πέξαζκα απφ ηε κηα ζειίδα ζηελ άιιε κε έλα απιφ θιηθ ζε θάπνην ζχλδεζκν. Γηα ηε δεκηνπξγία ηζηνζειίδσλ ρξεζηκνπνηνχληαη εηδηθέο γιψζζεο πξνγξακκαηηζκνχ, φπσο HTML, JAVA θαη JavaScript. Με ηε γιψζζα HTML, ν ρξήζηεο κπνξεί λα δεκηνπξγήζεη ηζηνζειίδεο πνιχ εχθνια. Φπιινκεηξεηέο [8,9] Οη θπιινκεηξεηέο, είλαη εηδηθέο εθαξκνγέο πνπ εκθαλίζηεθαλ κε ηελ αλάπηπμε ηεο ππεξεζίαο ηνπ παγθφζκηνπ ηζηνχ (WWW). Καηά θαηξνχο εκθαλίζηεθαλ δηάθνξα πξνγξάκκαηα αλαδήηεζεο πιεξνθνξηψλ ζην Internet. ήκεξα επηθξαηνχλ δχν πην ηζρπξά πξνγξάκκαηα πνπ είλαη ν Internet Explorer ηεο εηαηξείαο Microsoft θαη ν Mozilla Firefox ηεο εηαηξείαο Mozilla. Οη εθαξκνγέο απηέο δεκηνπξγήζεθαλ κφλν γηα ηελ πεξηήγεζε ζηη ο ηζηνζειίδεο ηνπ Internet. Σειεπηαία, έρνπλ εκπινπηηζηεί κε 8

11 επηπιένλ δπλαηφηεηεο. Δμππεξεηνχλ, εθηφο απφ ηελ πεξηήγεζε ζηνλ παγθφζκην ηζηφ, θαη φιεο ηηο άιιεο ππεξεζίεο ηνπ Internet φπσο , Chat, Newsgroups. Ο θπιινκεηξεηήο ηεο Internet Explorer είλαη ελζσκαησκέλνο ζε φιεο ηηο ηειεπηαίεο εθδφζεηο ησλ Windows. Ηιεθηξνληθφ Σαρπδξνκείν ( ) [10] Η πιένλ γλσζηή θαη ηαπηφρξνλα ε πην ρξήζηκε ππεξεζία ζην δηαδίθηπν είλαη απηή ηνπ ειεθηξνληθνχ ηαρπδξνκείνπ ( ) πνπ απνηειεί έλα πξαγκαηηθφ ειεθηξνληθφ ηαρπδξνκηθφ επίηεπγκα. Η ππεξεζία απηή επηηξέπεη ζηνπο ρξήζηεο ηνπ Internet λα ζηέιλνπλ θαη λα ιακβάλνπλ κελχκαηα, απνηειψληαο έλαλ ηαρχηαην, θζελφ θαη απνδνηηθφ ηξφπν επηθνηλσλίαο κεηαμχ ρξεζηψλ ηνπ δηαδπθηίνπ ζε νιφθιεξν ηνλ θφζκν. Δίλαη ίζσο θαη ε πην ζεκαληηθή θαηλνηνκία πνπ θαζηέξσζε ην δίθηπν ζηε ζπλείδεζε ησλ ρξεζηψλ. Η γξήγνξε θαη ε ζίγνπξε κεηάδνζε ηνπ κελχκαηνο (ή αθφκα θαη ελφο νιφθιεξνπ θεηκέλνπ πνιιψλ ζειίδσλ) αληηθαζηζηά θαηά κεγάιν κέξνο ηελ ηειεθσληθή θαη ηελ ηαρπδξνκηθή. Ο θάζε ρξήζηεο, κε ηελ εγγξαθή ηνπ ζην Internet, απνθηά έλα φλνκα ζχλδεζεο (User ID), πνπ είλαη ε ηαπηφηεηα ηνπ ρξήζηε ζην δίθηπν, θαη έλαλ θσδηθφ πξφζβαζεο (password). Απηφκαηα, απνθηά ειεθηξνληθή δηεχζπλζε πνπ πξνζδηνξίδεηαη απφ ην User ID θαη ηελ δηεχζπλζε ηνπ εμππεξεηεηή ηνπ παξνρέα πνπ είλαη ππεχζπλνο γηα ην ειεθηξνληθφ ηαρπδξνκείν (mail server). Η δηεχζπλζε απνηειείηαη απφ δχν ζπλζεηηθά ηα νπνία ρσξίδνληαη απφ ηνλ εηδηθφ Σν πξψην ζπλζεηηθφ δειψλεη ην φλνκα ηνπ απνζηνιέα/παξαιήπηε θαη ην δεχηεξν ηνλ ππνινγηζηή ηνπ παξνρέα ηνπ. Παξάδεηγκα, αλ ε ηαπηφηεηα (User ID) ελφο ρξήζηε είλαη ην φλνκα Υ θαη είλαη ρξήζηεο ηνπ δηθηχνπ ηνπ Σ.Δ.Ι. Καβάιαο, ε 9

12 δηεχζπλζε ηνπ ειεθηξνληθνχ ηαρπδξνκείνπ ζα είλαη Με ην ειεθηξνληθφ ηαρπδξνκείν ν ρξήζηεο κπνξεί λα ζηείιεη θάπνην κήλπκα ή επηζηνιή ζε κνξθή θεηκέλνπ. Οη εθαξκνγέο πνπ ρξεζηκνπνηνχληαη γηα ηελ ππεξεζία απηή έρνπλ ηε δπλαηφηεηα, καδί κε ην θείκελν ηεο επηζηνιήο, λα πεξηέρνπλ ηαπηφρξνλα θαη ζπλεκκέλα αξρεία νπνηαζδήπνηε κνξθήο φπσο, θεηκέλνπ, πξνγξακκάησλ, γξαθηθψλ, εηθφλσλ θιπ. πλνκηιίεο (Chat) Πξφθεηηαη γηα κηα δεκνθηιή ππεξεζία ηνπ δηαδηθηχνπ. Η ππεξεζία απηή επηηξέπεη ζηνπο ρξήζηεο λα ζπκκεηέρνπλ ζε ζπδεηήζεηο πάλσ ζε δηάθνξα ζέκαηα, ζπκβνπιεπκέλνη ηα κελχκαηα θαη ζπκβάιινληαο ζηε ζπδήηεζε κε ην δηθφ ηνπο κήλπκα. Οη ζπλνκηιίεο κεηαμχ ζπλδξνκεηψλ κπνξεί λα γίλνπλ κε ην πιεθηξνιφγην, κε θσλή θαη κε εηθφλα (video). [11] Ο απαξαίηεηνο εμνπιηζκφο γηα ηελ πινπνίεζε ησλ ζπλνκηιηψλ είλαη ηα εηδηθά πξνγξάκκαηα αλά θαηεγνξία, ην κηθξφθσλν, ηα ερεία θαη ε θάξηα ήρνπ ησλ πνιπκέζσλ, θαζψο θαη νη θάκεξεο γηα ζπλνκηιία κε βίληεν. Η ζπλνκηιία γίλεηαη κε θείκελν, θσλή θαη βίληεν. Μεηάδνζε δσληαλήο εηθφλαο κέζσ Internet Δίλαη κία αθφκα πην εμειηγκέλε κέζνδνο επηθνηλσλίαο θαη δελ ππάξρεη θάηη αληίζηνηρν ζηελ θαζεκεξηλή καο δσή. Πξέπεη θαη νη δχν ρξήζηεο λα είλαη ζπλδεδεκέλνη ηαπηφρξνλα ζην Internet θαη λα δηαζέηνπλ θάκεξα γηα βηληενζθφπεζε, θάξηα βίληεν, θάξηα ήρνπ θαη ερεία.μέζσ απηήο ηεο ππεξεζίαο νη ρξήζηεο κπνξνχλ λα κεηαθέξνπλ αξρεία θεηκέλνπ,εηθφλαο θαη ήρνπ. Ο εμνπιηζκφο είλαη πην αθξηβφο θαη απαηηεί πνιχ κεγάιεο ηαρχηεηεο ζχλδεζεο. Φπζηθά, πξέπεη λα ππάξρεη θαη ε θαηάιιειε ππνζηήξημε ζε ινγηζκηθφ (εηδηθφ πξφγξακκα). [12] 10

13 Μεηαθνξά αξρείσλ Η ππεξεζία απηή παξέρεη ηε δπλαηφηεηα κεηαθνξάο αξρείσλ απφ θάπνηνλ ππνινγηζηή ζε έλαλ άιιν, κέζσ Internet, ρξεζηκνπνηψληαο ην πξσηφθνιιν FTP (File Transfer Protocol). Η κεηαθνξά δηέπεηαη απφ θαλφλεο πνπ ζρεηίδνληαη κε ηα δηθαηψκαηα πξφζβαζεο ηνπ θάζε ρξήζηε. Με ηε βνήζεηα απηήο ηεο ππεξεζίαο, νη βηβιηνζήθεο πιεξνθνξηψλ θαη ειεχζεξνπ (freeware) ή θνηλήο ρξήζεσο (shareware) ινγηζκηθνχ, πνπ έρνπλ δεκηνπξγεζεί ζε φιν ηνλ θφζκν, έρνπλ ζπκβάιιεη ζεκαληηθά ζηε δηάδνζε πνιχ ρξήζηκνπ ινγηζκηθνχ ζηνπο απινχο ρξήζηεο. [13] Μεραλέο Αλαδήηεζεο [14,15] Οη Μεραλέο Αλαδήηεζεο (Search Engines) είλαη εηδηθά πξνγξάκκαηα ηα νπνία αλαδεηνχλ θαη εκθαλίδνπλ ιίζηεο κε θαηαρσξεκέλεο πιεξνθνξίεο κέζα απφ ην Internet. Πξνυπφζεζε γηα ηελ αλαδήηεζε είλαη λα έρεη ήδε θαηαρσξεζεί ε ειεθηξνληθή δηεχζπλζε πνπ πεξηέρεη ηηο αλαδεηνχκελεο πιεξνθνξίεο. Οη πεξηζζφηεξεο απφ ηηο πιεξνθνξίεο πνπ αλαδεηνχληαη είλαη δεδνκέλα ηνπ παγθφζκηνπ ηζηνχ, αιιά ε αλαδήηεζε κπνξεί λα επεθηαζεί θαη ζηηο Οκάδεο Δηδήζεσλ, ζηηο ηαρπδξνκηθέο δηεπζχλζεηο ρξεζηψλ θαη αιινχ. Η ρξήζε ησλ κεραλψλ αλαδήηεζεο έρεη απινπνηήζεη ζεκαληηθά ηελ άζθνπε πεξηήγεζε ζηνλ παγθφζκην ηζηφ. Οη ρξήζηεο ηνπ Internet δελ ρξεηάδεηαη λα θξαηνχλ ζεκεηψζεηο κε δηεπζχλζεηο. Με ηε ρξήζε απηψλ ησλ εηδηθψλ πξνγξακκάησλ κπνξνχλ λα εληνπίζνπλ νπνηαδήπνηε πιεξνθνξία πνπ είλαη θαηαρσξεκέλε ζην δηαδίθηπν. Οη κεραλέο αλαδήηεζεο δηαζέηνπλ Βάζεηο Γεδνκέλσλ κε ηηο δηεπζχλζεηο ησλ ειεθηξνληθψλ ηνπνζεζηψλ (web sites) πνπ έρνπλ δεισζεί. 11

14 1.4 Οι κοινωνικές επιδράζεις ηοσ Internet [20] Σα δίθηπα επεξεάδνπλ ηε ζπλείδεζε θαη ηε ζπκπεξηθνξά πνιιψλ ρξεζηψλ ηνπ δηαδηθηχνπ. Σα απνηειέζκαηα είλαη ζεκαληηθά φρη κφλν ζηηο δξαζηεξηφηεηεο πνπ ζρεηίδνληαη κε ην επάγγεικά ηνπο, αιιά θαη ζηελ νηθνλνκηθή θαη θνηλσληθή ηνπο ζπκπεξηθνξά. Όινη νη κεγάινη ηνκείο ηεο Πιεξνθνξηθήο ζπλερψο βειηηψλνληαη θαη νη παξνρέο ησλ δηθηχσλ ηθαλνπνηνχλ νινέλα θαη πεξηζζφηεξν ηηο απαηηήζεηο ησλ ρξεζηψλ. Οη ρξήζηεο βξίζθνπλ πιένλ ζηα δίθηπα ζηνηρεία θαη πιεξνθνξίεο πνπ άιινηε απαηηνχζαλ ζεκαληηθφ ρξφλν γηα λα βξεζνχλ. Όινπο καο απαζρνιεί πνηεο είλαη νη επηδξάζεηο ηνπ δηαδηθηχνπ θαη πνηνο είλαη ν θαιχηεξνο ηξφπνο λα ην ρεηξηζηνχκε γηα λα κελ εζηζηνχκε ζ' απηφ. Θα κπνξνχζακε λα ην ρξεζηκνπνηνχκε κφλν γηα ελεκέξσζε θαη φρη γηα λα θαιχςνπκε θάπνηεο απφ ηηο θαζεκεξηλέο καο αλάγθεο φπσο λα ην αληηθαζηζηνχκε κε ζπλνκηιίεο ησλ θίισλ καο νη νπνίνη βξίζθνληαη ζηελ ίδηα πφιε κε εκάο. Πνιινί ελήιηθεο πξνηηκνχλ ηελ ειεθηξνληθή ζπληξνθηά ζην δηαδίθηπν θαη δελ κπαίλνπλ ζηνλ θφπν λα βγνπλ απφ ην ζπίηη. Σν δηαδίθηπν φζν εχθνιν θαη δηαζθεπαζηηθφ αλ εκθαλίδεηαη ζε φινπο καο δελ είλαη πάληα απηφ πνπ θαίλεηαη, ηα παηδηά πιένλ κέζσ ηνπ δηαδηθηχνπ ελεκεξψλνληαη γηα ηα πάληα θαη είλαη κνλίκσο έλα βήκα πην κπξνζηά απφ ηνπο γνλείο. Οη ζεκεξηλνί έθεβνη απφ ηελ έληνλε ρξήζε ηνπ δηαδηθηχνπ είλαη πην επηξξεπείο λα παξαζπξζνχλ, απφ ηελ ζηηγκή πνπ φιεο νη πιεξνθνξίεο ζην δηαδίθηπν είλαη αλεμέιεγθηεο θαη δελ ππάξρνπλ λνκνζεζίεο θαη ξπζκίζεηο γηα ην ειεθηξνληθφ έγθιεκα. Η πιεξνθφξεζε ζηνλ παγθφζκην ηζηφ δελ ππφθεηηαη ζε θάπνηνλ έιεγρν θαη έηζη φπνηνο ζέιεη κπνξεί λα δεκνζηεχζεη θάπνην αξρείν ζην δηαδίθηπν ην νπνίν είλαη αλαιεζέο θαη έηζη ν θάζε ρξήζηεο ζα πξέπεη λα θξίλεη θαηά πφζν είλαη ζσζηή απηή ε 12

15 πιεξνθνξία. Γεγνλφο παξακέλεη φηη ην δηαδίθηπν ζήκεξα είλαη ην κέζν καδηθήο επηθνηλσλίαο ην νπνίν έρεη εμειηρζεί ζε πνιιά επίπεδα θαη έρεη ηε δχλακε λα επεξεάζεη νιφθιεξε ηελ πθήιην. Σν δηαδίθηπν φζν εχθνιν θαη δηαζθεπαζηηθφ αλ εκθαλίδεηαη ζε φινπο καο δελ είλαη πάληα απηφ πνπ θαίλεηαη γηα απηφ ην ιφγν ζα έπξεπε λα ην ρξεζηκνπνηνχκε φινη κε κέηξν θαη λα κελ θαηαθεχγνπκε ζ' απηφ παξά κφλν γηα ελεκέξσζε θαη πιεξνθφξεζε. 13

16 ΚΕΦΑΛΑΙΟ 2 ο 2. Η ΕΤΥΡΗΣΙΑ ΣΟΤ INTERNET [16] Η επρξεζηία (usability), πξνζβαζηκφηεηα θαη ε έξεπλα κεραλψλ επηινγήο είλαη φιεο θξάζεηο πνπ ρξεζηκνπνηνχληαη γηα λα πεξηγξάςνπλ πςειήο πνηφηεηαο ειεθηξνληθέο ζειίδεο ζην ζεκεξηλφ θφζκν ηνπ παγθφζκηνπ ηζηνχ. ηελ πξαγκαηηθφηεηα ππάξρεη έλα ζεκαληηθφ πνζφ επηθάιπςεο κεηαμχ απηψλ θαη κηαο ηζηνζειίδαο πνπ επηδεηθλχνπλ ηα ραξαθηεξηζηηθά πνπ εθηειεί θαη ηηο ηξεηο απηέο ππεξεζίεο. Ο επθνιφηεξνο ηξφπνο γηα πεηχρνπκε απηνχο ηνπο ηξεηο ζθνπνχο είλαη κε ην λα ρξεζηκνπνηήζνπκε ην πιαίζην θάπνηνπ πξνγξάκκαηνο ην νπνίν αλαθέξεη ηηο απαηηήζεηο ηνπ παγθφζκηνπ ηζηνχ. Έλλνηα ηεο Δπρξεζηίαο Η επρξεζηία ζηνλ παγθφζκην Ιζηφ κεηξάεη ηελ πνηφηεηα ηεο εκπεηξίαο θάπνηνπ ρξήζηε φηαλ δέρεηαη ηελ επίδξαζε ελφο πξντφληνο ή θαη κηαο Ιζηνζειίδαο. Γεληθά, ε επρξεζηία αλαθέξεηαη ζην πφζν θαιά νη ρξήζηεο κπνξνχλ λα κάζνπλ θαη λα ρξεζηκνπνηνχλ θάπνην πξντφλ γηα λα πεηχρνπλ ηνπο ζηφρνπο ηνπο θαη πφζν ηθαλνπνηεκέλνη είλαη κε απηή ηε δηαδηθαζία. Δπρξεζηία κπνξεί επίζεο λα ζεσξεζνχλ θαη παξάγνληεο φπσο ην θφζηνο θαη πφζν απαξαίηεην κπνξεί λα είλαη ην πξντφλ. Δθαηνκκχξηα ειεθηξνληθέο ζειίδεο πξνζθέξνπλ ζηνπο ρξήζηεο πιεξνθνξίεο, αγαζά, ππεξεζίεο θαη δηαζθέδαζε. Αιιά πνιιέο απφ απηέο ηηο ζειίδεο είλαη δχζθνιν λα ηηο ρεηξηζηεί θάπνηνο γηαηί δελ ιεηηνπξγνχλ ζσζηά θαη απηφ έρεη ζαλ 14

17 απνηέιεζκα λα κελ πξνζειθχνπλ ή λα δηαηεξνχλ ηνπο ρξήζηεο ηνπο. Η εληχπσζε πνπ ζρεκαηίδνπλ θάπνηνη ρξήζηεο κε ηελ επίζθεςε ηνπο ζε κηα ηζηνζειίδα ζρεηηθά κε ηελ δνκή θαη ηελ νξγάλσζή ηνπ έρεη ηηο πεξηζζφηεξεο θνξέο άκεζε ζρέζε κε ηελ ηδέα πνπ είρε ν ζρεδηαζηήο ηνπ φηαλ ην ζρεδίαδε. Δπνκέλσο, ε θαιά δνκεκέλε ζχλδεζε ησλ ζειίδσλ είλαη ηδηαίηεξα ζεκαληηθή θαη αθνξά ηελ απνηειεζκαηηθφηεηα θαη ηε ιεηηνπξγία κηαο Ιζηνζειίδαο. Θα κπνξνχζακε λα πνχκε φηη ε δνκή ησλ ζπλδέζκσλ ζαλ ζχλνιν δεκηνπξγεί θαη ην λφεκα πνπ ζέινπκε λα έρνπλ νη ρξήζηεο νπφηε αλ θάπνηνο δείμεη ηδηαίηεξε πξνζνρή ζηνλ θαζνξηζκφ ηεο δφκεζεο ησλ ζειίδσλ ηφηε ε επηηπρία είλαη ζρεδφλ ζίγνπξε θαη ε πινήγεζε ησλ ρξεζηψλ κέζα ζηνλ θφκβν ζα γίλεηαη κε επραξίζηεζε. Γεκηνπξγία απνδνηηθήο Ιζηνζειίδαο Δίλαη επηηαθηηθή αλάγθε ν ζρεδηαζκφο κηαο ζσζηήο Ιζηνζειίδαο πξηλ ηε παξνπζίαζε ηεο ζην δηαδίθηπν. Πξέπεη πξψηα λα έρνπκε θαζνξίζεη ηνπο ζηφρνπο καο, γηα πνην ιφγν θηηάρλνπκε ηηο ζπγθεθξηκέλεο ζειίδεο θαη ζε πνηνπο απεπζχλεηαη. Λφγνη δεκηνπξγίαο ηεο Ιζηνζειίδαο Γειαδή ε γλψζε ην ηη πξνζπαζνχκε λα πεηχρνπκε θαη γηα πνην ιφγν πξνρσξάκε ζηε δεκηνπξγία ηεο ηζηνζειίδαο, απηφ είλαη ην ζεκαληηθφηεξν βήκα ζην ζρεδηαζκφ. Να επηιέμνπκε κηα ζσζηή πνξεία γηα λα πεηχρνπκε ην θαιχηεξν δπλαηφ απνηέιεζκα γηα ηελ ιεηηνπξγία ηεο Ιζηνζειίδαο καο. ε πνηνπο ρξήζηεο απεπζχλεηαη Αθνχ επηιέμακε ηελ πνξεία πνπ ζα αθνινπζήζνπκε γηα ηελ δεκηνπξγία ηεο Ιζηνζειίδαο καο πξέπεη λα θαζνξίζνπκε θαη ζε πνηνπο ρξήζηεο ζα απεπζχλεηαη γηα λα κπνξέζνπκε λα 15

18 θαιχςνπκε ηηο αλάγθεο ηνπο. Αλ δελ δψζνπκε ηελ απαξαίηεηε πξνζνρή ζηηο αλάγθεο ησλ ρξεζηψλ καο ηφηε είλαη πνιχ πηζαλφ λα κελ επηζθεθζνχλ ηελ Ιζηνζειίδαο καο μαλά. ρεδηαζκφο Ιζηνζειίδαο Πσο ζα ζρεδηάζνπκε ηελ Ιζηνζειίδα καο θαη πνηα εκθάληζε ζα επηιέμνπκε είλαη θάπνηεο απφ ηηο πην θξίζηκεο απνθάζεηο πνπ ζα ρξεηαζηεί λα πάξνπκε. Η εκθάληζε είλαη απηή πνπ ζα πξνζειθχζεη ηνπο ρξήζηεο θαη αλ θαηαθέξεη λα ηνπο ηππσζεί ζαλ κηα φκνξθε εηθφλα ηφηε απμάλνπκε απηνκάησο ηηο πηζαλφηεηέο καο λα επηζθεθηνχλ μαλά ηε ζειίδα καο. Ση πιεξνθνξίεο ζα κνηξάδνληαη νη ρξήζηεο Δίλαη απαξαίηεην λα απνθαζίζνπκε απφ πξηλ ηη πιεξνθνξίεο ζέινπκε λα ζπκπεξηιάβνπκε ζρεηηθά κε ην ζέκα ηεο Ιζηνζειίδαο καο. Πξέπεη λα πξνζδηνξίζνπκε αλ ζέινπκε φιεο νη πιεξνθνξίεο λα είλαη δηαζέζηκεο ζηνπο ρξήζηεο θαη αλ φρη πνηεο απφ απηέο λα εμαηξέζνπκε. Θα κπνξνχζακε επίζεο θαη εκείο λα αληινχκε θάπνηεο πιεξνθνξίεο απφ ηνπο ρξήζηεο πνπ ζα επηζθέπηνληαη ηελ Ιζηνζειίδα καο. Πξνζαξκνζηηθφηεηα ζηηο αλάγθεο ησλ ρξεζηψλ Αλ γηα θάπνην ιφγν παξαηεξήζνπκε φηη θάηη δελ πάεη θαιά ζηελ Ιζηνζειίδα καο ηφηε ζα έρνπκε ηελ δπλαηφηεηα λα ηελ πξνζαξκφζνπκε ζηηο αλάγθεο ησλ ρξεζηψλ καο γηα θαιχηεξα απνηειέζκαηα θάηη ην νπνίν ζα πξέπεη λα θάλνπκε ζπρλά γηαηί νη αλάγθεο ησλ ρξεζηψλ ηνπ δηαδηθηχνπ γίλνληαη θαζεκεξηλά κεγαιχηεξεο θαη πεξηκέλνπλ άκεζα απνηειέζκαηα ησλ απαηηήζεσλ ηνπο. 16

19 Υξεζηηθφηεηα ηεο Ιζηνζειίδαο ησλ Ξέλσλ Γισζζψλ ηελ Ιζηνζειίδα ησλ μέλσλ γισζζψλ ηνπ Σ.Δ.Ι. Καβάιαο νη ζπνπδαζηέο ζα κπνξνχλ λα βξίζθνπλ φιεο ηηο πιεξνθνξίεο πνπ ηνπο είλαη ρξήζηκεο. Μεξηθέο απφ απηέο είλαη : Οη δηδάζθνληεο θαζεγεηέο θαη ηα βηνξγαθηθά ηνπο Δγθαηαζηάζεηο θαη ππνδνκέο ηνπ ηκήκαηνο Δθδειψζεηο ηνπ ηκήκαηνο Δπηθνηλσλία 17

20 ΚΕΦΑΛΑΙΟ 3 ο 3. ΠΛΑΙΙΟ ΔΗΜΙΟΤΡΓΙΑ ΙΣΟΕΛΙΔΩΝ [17,18] Καηαλφεζε ησλ Ιζηνζειίδσλ Θεσξεηηθά ε δνκή θάπνηαο ηζηνζειίδαο πεξηιακβάλεη ζπλήζσο ηα εμήο : κία θεληξηθή ζειίδα, κία ζειίδα πνπ αλαθέξνληαη ηα λέα γεγνλφηα, κία ζειίδα κε θσηνγξαθίεο θαη άιιν πιηθφ θαη ηέινο κία ζειίδα κε δηεπζχλζεηο πνπ βξίζθνπκε αξθεηά ελδηαθέξνπζεο ψζηε λα ηηο πξνηείλνπκε ζηνπο επηζθέπηεο ηεο ηζηνζειίδαο καο. Σελ πξναλαθεξζείζα δνκή ηελ επηιέγνπλ νη πεξηζζφηεξνη ρξήζηεο. Δπηινγή ζέκαηνο ηεο ηζηνζειίδαο Μεηά ηελ θαηαλφεζε ησλ ηζηνζειίδσλ πνπ ζέινπκε λα δεκηνπξγήζνπκε ζα πξέπεη λα επηιέμνπκε ην ζσζηφ ζέκα γηα λα δεκηνπξγήζνπκε ηελ ηζηνζειίδα καο ην νπνίν ζα είλαη έλαο απφ ηνπο ζεκαληηθφηεξνπο παξάγνληεο γηα λα επηζθεθηνχλ νη δηάθνξνη ρξήζηεο ηελ ηζηνζειίδα καο. Η επηινγή ζέκαηνο είλαη πνιχ εχθνιε απιψο θάλνπκε δεμί θιηθ πάλσ ζε κηα ζειίδα θαη κεηά επηιέγνπκε Theme θαη ζα βγεη ην παξάζπξν επηινγήο ζεκάησλ. Δηζαγσγή εηθφλαο Η εηζαγσγή εηθφλαο απνηειεί απιή ππφζεζε θαη κπνξεί λα γίλεη κε πνιινχο ηξφπνπο. Μπνξνχκε λα εηζάγνπκε εηθφλεο ζε νπνηνδήπνηε ζεκείν κηαο ζειίδαο απιψο κε ην λα ζχξνπκε ην αξρείν απφ ηελ Δμεξεχλεζε Αξρείσλ θαη λα ην αθήζνπκε θαη' επζείαλ πάλσ ζηελ επηθάλεηα ηεο ζειίδαο πνπ ζέινπκε. Δπίζεο 18

21 κπνξνχκε λα εηζάγνπκε έλα αξρείν γξαθηθψλ απφ ηελ εληνιή Insert-Picture-From file θαη επηιέγνπκε ηελ εηθφλα πνπ ζέινπκε κφιηο εκθαληζηεί ην παξάζπξν επηινγήο εηθφλαο. ηε ζπλέρεηα γηα λα επεμεξγαζηνχκε απηέο ηηο εηθφλεο ν επθνιφηεξνο ηξφπνο είλαη λα θάλνπκε έλα απιφ θιηθ πάλσ ζηελ εηθφλα θαη ακέζσο παξαηεξνχκε φηη ζηελ πεξίκεηξν ηεο εκθαλίδνληαη νθηψ καχξα ηεηξαγσλάθηα. Απφ ηα ηεηξάγσλα πνπ βξίζθνληαη ζηηο θνξπθέο αιιάδεη ην κέγεζνο ηεο εηθφλαο πξνο φιεο ηηο δηαζηάζεηο ηαπηφρξνλα. Καηαζθεπή ηεο αξρηθήο ζειίδαο Η αξρηθή ζειίδα είλαη ε πξψηε ζειίδα πνπ βιέπνπλ φζνη επηζθέπηνληαη ηελ ηζηνζειίδα καο θαη πξέπεη λα ηξαβάεη ην ελδηαθέξνλ ησλ επηζθεπηψλ καο άκεζα. Θα πξέπεη λα είλαη πνιχ πξνζεθηηθά ζρεδηαζκέλε θαη λα αλαγγέιιεη θάπνηεο απφ ηηο πην ζεκαληηθέο πιεξνθνξίεο πνπ βξίζθνληαη ζηελ ηζηνζειίδα γηα λα θξαηήζεη ηνλ ρξήζηε. Γεκηνπξγία ππεξζπλδέζκσλ κεηαμχ Ιζηνζειίδσλ Γηα λα ρξεζηκνπνηήζνπκε έλαλ ππεξζχλδεζκν πξψηα ζα πξέπεη λα δεκηνπξγήζνπκε κηα ελαιιαθηηθή έθδνζε γηα ηελ ζειίδα καο κεηά ζα πξέπεη λα πξνζζέζνπκε ηνλ ππεξζχλδεζκν ζηελ αξρηθή ζειίδα γηα λα θαηεπζχλνπκε ηα πξνγξάκκαηα αλάγλσζεο ηζηνζειίδσλ πνπ έρνπλ απηή ηε δπλαηφηεηα ζηελ ελαιιαθηηθή ζειίδα. Ο ππεξζχλδεζκνο κπνξεί επίζεο λα ρξεζηκνπνηεζεί ζε ζρέζε κε ηελ πινήγεζε. Με ηε ρξήζε ηνπ ππεξζπλδέζκνπ κπνξεί λα πεξηγξαθηεί ε ζρέζε κηαο ηζηνζειίδαο θαη άιισλ ζειίδσλ ζε κηα ηνπνζεζία, κπνξεί λα δηεπθνιχλεη ηα πξνγξάκκαηα αλάγλσζεο ηζηνζειίδσλ πνπ έρνπλ πξφζβαζε λα θαηαλνήζνπλ ηελ δνκή ηεο ηνπνζεζίαο. 19

22 Δίλαη ζεκαληηθφ γηα ηηο ζπλδέζεηο λα είλαη πεξηγξαθηθέο, αιιά αθφκε θαη νη ζπλαθείο ζπλδέζεηο κπνξνχλ λα θαλνχλ κπεξδεκέλεο φηαλ απνκαθξπλζνχλ απφ ην ζπγθεθξηκέλν θείκελν. Η πξνζπάζεηα λα κεηαηξαπνχλ νη ζπλδέζεηο πεξηγξαθηθέο εληφο θαη εθηφο θεηκέλνπ κπνξεί λα δεκηνπξγήζεη έλα πεξίεξγν πεξηερφκελν. Με ηνλ ραξαθηεξηζηηθφ ηίηιν καο επηηξέπεη λα πξνζζέζνπκε επηπιένλ θξάζεηο κε ηνλ ηίηιν πνπ ζα εκθαλίδεηαη θαζψο πεξλά ν δείθηεο ηνπ πνληηθηνχ πάλσ απφ ηελ ζχλδεζε. Απηφ βειηηψλεη ηελ πξνζπέιαζε ησλ ζπλδέζεσλ καο ρσξίο λα αιιάδεη ηε ξνή ηνπ πεξηερνκέλνπ ζαο. Μνξθνπνηήζηε ην θείκελν Γεκηνπξγία Δπηθεθαιίδσλ Δλνηήησλ : Οη επηθεθαιίδεο καο δηεπθνιχλνπλ πνιχ ζηνλ θαζνξηζκφ ελνηήησλ ηνπ θεηκέλνπ καο δίλνληαο ηνπο ηίηινπο. Οη επηθεθαιίδεο ρξεζηκνπνηνχληαη ζε κεγάιε πνηθηιία ηερληθψλ κνξθνπνίεζεο εγγξάθσλ. Καζνξηζκφο Παξαγξάθσλ : Η επηινγή παξαγξάθσλ εμαξηάηαη απφ ην πξνζσπηθφ ζηπι ηνπ θαζελφο. Δπεηδή ε ζπλέπεηα είλαη ζεκαληηθή, επηιέγνπκε κηα κέζνδν γηα έλα δεδνκέλν ζέκα θαη ζα πξέπεη λα κείλνπκε πηζηνί ζε απηή ηε κέζνδν κέρξη λα ηειεηψζνπκε. Αιιαγή Γξακκψλ Κεηκέλνπ : Άιιε κηα ζεκαληηθή ηερληθή είλαη ε αιιαγή γξακκψλ ή ελφο ραξαθηήξα επηζηξνθήο. Απηφ είλαη ηδηαίηεξα ρξήζηκν φηαλ δεκηνπξγνχκε κηθξέο γξακκέο θεηκέλνπ φπσο είλαη νη δηεπζχλζεηο, ή νηηδήπνηε άιιν ην νπνίν ζέινπκε λα ειέγρνπκε αθξηβψο ζην ζεκείν αιιαγήο. Απφδνζε Έκθαζεο ζην Κείκελν καο : Όηαλ εξγαδφκαζηε κε θείκελν, αλαπφθεπθηα έξρεηαη ε ζηηγκή πνπ ζέινπκε λα δψζνπκε έκθαζε ζε θάπνην θείκελν γηα λα ηξαβήμεη ην ηελ πξνζνρή ηνπ ρξήζηε πάλσ ζε θάπνην ζεκείν. Η έκθαζε ζπλήζσο επηηπγράλεηαη ρξεζηκνπνηψληαο έλα ζηπι ή έλα ζπλδπαζκφ ηξηψλ 20

23 ζηπι : ηελ έληνλε γξαθή, ηελ πιάγηα γξαθή θαη ηελ ππνγξάκκηζε. ηνίρηζε Δλνηήησλ Κεηκέλνπ : Η ζηνίρηζε θεηκέλνπ καο δίλεη ηνλ έιεγρν ηνπ ηξφπνπ κε ηνλ νπνίν ην θείκελν ζηέθεηαη ζηε ζειίδα καο. Μπνξνχκε λα θεληξάξνπκε έλα ηίηιν, λα ππνγξακκίζνπκε έλα άξζξν κε ην φλνκα ζηνηρηζκέλν ζηα δεμηά ή λα έρνπκε πιήξε ζηνίρηζε ψζηε λα έρνπκε έλα νκαιφ δεμί πεξηζψξην αληί γηα ην ζπλεζηζκέλν. Υξήζε ησλ εηδηθψλ εθέ Σν γεγνλφο είλαη φηη ην πεξηερφκελν κηαο ηζηνζειίδαο έρεη κεγάιε ζεκαζία, αιιά δελ αξθεί κφλν απηφ πιένλ. Γη' απηφ ην ιφγν θαιφ είλαη λα ρξεζηκνπνηνχκε θάπνηα εηδηθά εθέ γηα λα ηξαβάκε πην γξήγνξα ην ελδηαθέξνλ ηνπ ρξήζηε πξέπεη φκσο λα κελ θάλνπκε ππεξβνιέο ζηε ρξήζε απηψλ ησλ εθέ. Μηα ζειίδα θνξησκέλε κε πνιιά εθέ κπνξεί λα ζεσξεζεί θαθφγνπζηε θαη εθηφο απφ απηφ αλ ε ηζηνζειίδα θνξησζεί ππεξβνιηθά, ζα θαηεβαίλεη πνιχ αξγά ζηνλ ππνινγηζηή ησλ ρξεζηψλ ρσξίο λα είλαη ζίγνπξν φηη ηα εθέ ζα εκθαληζηνχλ ζηε ζειίδα επηηπρεκέλα. 21

24 ΚΕΦΑΛΑΙΟ 4 ο 4. ΤΛΟΠΟΙΗΗ ΙΣΟΕΛΙΔΑ Κ.Ξ.Γ. & Φ.Α. 4.1 τεδιαζμός δομής ηης Ιζηοζελίδας Πξνθεηκέλνπ λα θαηαιήμνπκε ζηελ δνκή ηεο ηζηνζειίδαο ηνπ Κέληξνπ Ξέλσλ Γισζζψλ θαη Φπζηθήο Αγσγήο πξνεγήζεθε ζπλάληεζε κε ηελ δηεπζχληξηα ηνπ ηκήκαηνο. Καηαιήμακε ζηηο επηινγέο πνπ ζα έρεη ην θεληξηθφ κελνχ ηεο ηζηνζειίδαο ηνπ Κέληξνπ φπσο θαη ζην πεξηερφκελν ησλ ζειίδσλ. Σν θεληξηθφ κελνχ ζα πεξηιακβάλεη ηηο εμήο επηινγέο: ΚΕΝΣΡΙΚΗ ΕΛΙΔΑ ΜΑΘΗΜΑΣΑ ΠΡΟΩΠΙΚΟ ΕΚΔΗΛΩΕΙ ΕΓΚΑΣΑΣΑΕΙ ΞΕΝΕ ΓΛΩΕ ΓΤΜΝΑΣΗΡΙΟ ηελ θεληξηθή ζειίδα ζα αλαθέξνληαη γεληθέο πιεξνθνξίεο γηα ην Κέληξν Ξέλσλ Γισζζψλ φπσο θαη ηεο Φπζηθήο Αγσγήο. Σα Μαζήκαηα ζα πεξηιακβάλνπλ ηηο επηινγέο Ξέλεο Γιψζζεο θαη Γπκλαζηήξην, θαη εδψ ζα αλαθέξεη θάπνηεο πιεξνθνξίεο πην ζπγθεθξηκέλεο γηα ην θάζε κάζεκα. 22

25 ην πξνζσπηθφ ζα αλαθέξνληαη φινη νη θαζεγεηέο θαη ζα ππάξρεη θάπνην ζχληνκν βηνγξαθηθφ γηα ηνλ θαζέλα φπσο θαη θάπνην mail εθφζνλ ην επηζπκνχλ. Η ζειίδα Δθδειψζεηο ζα πεξηέρεη θάπνηεο πιεξνθνξίεο γηα ηα δηάθνξεο εκεξίδεο, ζπλέδξηα θαη εθδειψζεηο πνπ ζα δηνξγαλψλνληαη ζην Σ.Δ.Ι Καβάιαο θαη ζα αθνξνχλ ηηο Ξέλεο Γιψζζεο ή ηε Φπζηθή Αγσγή. Καη ηέινο ε επηινγή Δγθαηαζηάζεηο ζα δείρλεη κία θάηνςε ηνπ ΣΔΙ Καβάιαο ζηελ νπνία ζα θαίλνληαη ηα γξαθεία ηνπ θέληξνπ Ξέλσλ γισζζψλ φπσο θαη νη αζιεηηθέο εγθαηαζηάζεηο ηνπ ΣΔΙ. Σν κελνχ γηα λα θαηαζθεπαζηεί είλαη ζρεηηθά απιφ. Η κφλε δπζθνιία έγγπηαη ζην γεγνλφο φηη ε επηινγή ηνπ κελνχ Μαζήκαηα πξέπεη λα νδεγεί ζε δχν ππνκελνχ ηηο Ξέλεο Γιψζζεο θαη ην Γπκλαζηήξην. Ο ζρεδηαζκφο ηνπ κελνχ αθνινπζεί ηε ινγηθή ηνπ κελνχ έλαξμεο ησλ windows, φπνπ θάζε κελνχ πεξηιακβάλεη ηα επηζπκεηά ππνκελνχ έηζη εμαζθαιίδεηαη έλα απιφο θαη εχρξεζηνο ηξφπνο πινήγεζεο. 4.2 Δημιοσργία αρτικής ιζηοζελίδας Έρνληαο αλαδεηήζεη ηα εγγελή ζέκαηα(templates) ηνπ FrontPage θαη κεηά απφ ππφδεημε ηνπ θαζεγεηή κνπ φηη ήηαλ πνιχ απιά θαη έρνληαο ππ' φςε φηη ην κελνχ ζα έπξεπε λα ην δεκηνπξγήζσ κε θάπνην βνεζεηηθφ πξφγξακκα απνθάζηζα λα θάλσ κηα αλαδήηεζε ζην Internet γηα θάπνηα δσξεάλ ζέκαηα (Templates). Υξεζηκνπνηψληαο ηε κεραλή αλαδήηεζεο ηνπ Google βξήθα έλα απιφ ζέκα (Template)[19] ην νπνίν ζα έπξεπε λα ην αιιάμσ πνιχ γηα λα ηαηξηάδνπλ νη ρξσκαηηθνί ζπλδπαζκνί θαη λα ηνπ δψζσ ην επηζπκεηφ χθνο. 23

26 Η ηζηνζειίδα ζα αθνινπζνχζε πηζηά δηρξσκία ή ην πνιχ ηξηρξσκία γηα λα κελ γίλεη θνπξαζηηθφ ζην κάηη θαη λα δηαηεξεζεί φζν ην δπλαηφ απιφ θαη "θαζαξφ". Σα ρξψκαηα ηα νπνία επηιέρζεθαλ ήηαλ ην πνξηνθαιί θαη ην ζθνχξν πξάζηλν ηα νπνία δέλνπλ αξκνληθά θαη δίλνπλ έλα επράξηζην νπηηθφ απνηέιεζκα. Έρνληαο απνθαζίζεη ηελ εκθάληζε θαη ηε δνκή ηεο ηζηνζειίδαο μεθίλεζα ηηο ηξνπνπνηήζεηο ζην ζέκα (Template) αιιάδνληαο φια ηα γξαθηθά θαη δηαηεξψληαο κφλν ηελ αξρηθή δνκή. ην πάλσ κέξνο ηεο ηζηνζειίδαο ζα εκθαλίδεηαη έλα Flash Banner, ζηελ αξηζηεξή θεληξηθή ζηήιε ηνπ πίλαθα ζα ηνπνζεηήζνπκε ην κελνχ πινήγεζεο κε ζηνίρηζε πάλσ αξηζηεξή θαη ηέινο ν θχξηνο θνξκφο ηεο ηζηνζειίδαο καο είλαη ην ζεκείν φπνπ ζα εκθαλίδνληαη φιεο νη πιεξνθνξίεο γηα ην Κέληξν Ξέλσλ Γισζζψλ θαη Φπζηθήο Αγσγήο. Γηα ην ιφγν απηφ πξνεπηιεγκέλν 24

27 ρξψκα θφληνπ ζα παξακείλεη ην ιεπθφ ψζηε ην θείκελν λα είλαη πάληνηε επαλάγλσζην. Οη ελδηάκεζεο πεξηνρέο ζα δέλνπλ κε ηνπο αξρηθνχο ρξσκαηηζκνχο ηνπ πνξηνθαιί θαη ηνπ πξάζηλνπ. Τοποθέηηζη ηοσ Flash Banner Γηα λα ηνπνζεηεζεί ην επηζπκεηφ Flash Banner αξρηθά έπξεπε λα ζπγρσλεπηνχλ ηα δχν θειηά πνπ ππήξραλ ζηελ πξψηε γξακκή ηνπ πίλαθα δεκηνπξγψληαο έηζη έλα εληαίν θαη κνλαδηθφ θειί. Απηφ κπνξεί λα επηηεπρζεί επηιέγνληαο ηα δχν θειηά θαη παηψληαο δεμί θιηθ πάλσ ζε απηά θαη ζηε ζπλέρεηα επηιέγνληαο ηελ εληνιή Merge cells. 25

28 Γηα λα εηζάγνπκε ην Flash Banner ζα πξέπεη πξψηα λα ην απνζεθεχζνπκε ζην Root ηεο ηζηνζειίδαο. Έπεηηα επηιέγνπκε απφ ην κελνχ insert-advanced-active X control. 26

29 Δκθαλίδεηαη κία ιίζηα κε ηα δηαζέζηκα αληηθείκελα Active X θαη επηιέγνπκε ηελ εηζαγσγή Macromedia Flash Factory Object. Σν ηειηθφ βήκα ζα είλαη λα εηζάγνπκε ζην πεδίν HTML ηελ αθφινπζε νδεγία : <embed src="1.swf" quality="high" pluginspage=" er" type="application/x-shockwave-flash" width="778" height="171"> Η νδεγία απηή πεξηγξάθεη ζηελ αξρή ην φλνκα θαη ηε δηαδξνκή ηνπ αξρείνπ θαζψο θαη άιια ζηνηρεία φπσο ε πνηφηεηα θαη νη δηαζηάζεηο ηνπ Flash Banner. Η παξαπάλσ νδεγία βξέζεθε ζηνλ επίζεκν δηθηπαθφ ηφπν ηνπ Adobe Macromedia Flash. Δπίζεο ζην πεδίν Code Source πεξηγξάθεηαη ε νδεγία ε νπνία αλαθαηεπζχλεη ηνλ ρξήζηε ζηελ ηνπνζεζία φπνπ κπνξεί λα απνθηήζεη ηνλ Player ηεο Macromedia ζε πεξίπησζε πνπ δελ 27

30 είλαη εγθαηεζηεκέλνο. Με απηφ ηνλ ηξφπν εμαζθαιίδεηαη φηη φινη νη ρξήζηεο ζα είλαη ηθαλνί λα αλαπαξάγνπλ ην Flash Banner. Μορθοποίηζη Χρωμαηικών Σσνδσαζμών Γηα λα ρξσκαηίζνπκε ηα επηκέξνπο θειηά ηεο ηζηνζειίδαο, ηα επηιέγνπκε, παηάκε δεμί θιηθ πάλσ ηνπο θαη ζηε ζπλέρεηα επηιέγνπκε Cell Properties. ηνλ πίλαθα πνπ εκθαλίδεηαη επηιέγνπκε ηελ επηινγή Use background picture θαη νξίδνπκε ηελ επηζπκεηή εηθφλα πνπ έρνπκε ήδε απνζεθεχζεη ζην θάθειν images. Με φκνην ηξφπν αιιάδνπκε ηα ρξψκαηα θαη ησλ ππνινίπσλ θειηψλ. 28

31 Ειζαγωγή Φόνηοσ Γηα λα αιιάμνπκε ην θφλην ηεο ζειίδαο θάλνπκε δεμί θιηθ θαη επηιέγνπκε Page Properties. ηε ζπλέρεηα εκθαλίδεηαη έλα κελνχ ζην νπνίν απφ ηελ θαξηέια Background επηιέγνπκε Background picture θαη κεηά νξίδνπκε ηελ δηαδξνκή γηα ην θφλην. 4.3 Δημιοσργία ηοσ μενού πλοήγηζης Γηα λα θαηαζθεπάζνπκε ην κελνχ πινήγεζεο ην νπνίν απνηειεί θαη ην βαζηθφ ζθειεηφ ηεο Ιζηνζειίδαο ρξεζηκνπνηήζακε έλα πξφγξακκα νπηηθνχ πξνγξακκαηηζκνχ ην νπνίν δηαζέηεη νδεγνχο (wizards) θαη έηνηκα ζέκαηα ηα νπνία κπνξνχκε λα πξνζαξκφζνπκε ζην χθνο θαη ηηο ρξσκαηηθέο απνρξψζεηο ηεο ζειίδαο. Σν πξφγξακκα νλνκάδεηαη sothink DHTML MENU θαη ήηαλ δηαζέζηκν γηα δνθηκαζηηθή ρξήζε ηξηάληα εκεξψλ. Σν πξφγξακκα παξάγεη απηφκαηα ηνλ απαξαίηεην θψδηθα γηα ηε δεκηνπξγία θαη ηελ ελζσκάησζε ηνπ κελνχ ζηε ζειίδα. 29

32 Η επηινγή απηνχ ηνπ ηχπνπ έγηλε θαηφπηλ ππνδείμεσο ηεο ππεχζπλεο θαζεγήηξηαο ηνπ ηκήκαηνο Ξέλσλ Γισζζψλ θαη ηνπ ππεχζπλνπ θαζεγεηή ηεο πηπρηαθήο κνπ εξγαζίαο γηα ηελ θαιχηεξε θαη απινχζηεξε πινήγεζε ησλ ρξεζηψλ ηεο Ιζηνζειίδαο. Η πξψηε κάζθα πνπ εκθαλίδεηαη καο δίλεη ηελ δπλαηφηεηα λα επηιέμνπκε ην θαηάιιειν κελνχ ην νπνίν πηζηεχνπκε φηη ηαηξηάδεη θαιχηεξα ζηελ ηζηνζειίδα καο ε επηινγή γίλεηαη απφ ηε ιίζηα έηνηκσλ ζεκάησλ πνπ πξνζθέξεη ην πξφγξακκα. ηε ζπλέρεηα βέβαηα κπνξνχκε λα ην επεμεξγαζηνχκε πεξαηηέξσ. Αθνχ επηιέμακε ην θαηάιιειν κελνχ ηφηε κπνξνχκε λα ην δηακνξθψζνπκε ψζηε λα έρεη φζεο επηινγέο εκείο επηζπκνχκε κε 30

33 ην λα ζβήλνπκε ηα πεξηηηά κελνχ θαζψο θαη λα πξνζζέζνπκε δηθά καο κε ηελ επηινγή Insert Item Before ή Insert Item After. Δπηπιένλ παηψληαο πάλσ ζε θάπνην κελνχ κε δεμί θιηθ κπνξνχκε κε ηελ επηινγή Append Sub Menu Item λα πξνζζέζνπκε θάπνην ππνκελνχ ζην επηζπκεηφ ζεκείν. Όηαλ επηιέγνπκε ηελ γξακκή θάησ απφ ηελ εληνιή Top-level- Menu θαη παηάκε ηελ επηινγή Image ηφηε κπνξνχκε λα εηζάγνπκε ηελ εηθφλα πνπ επηζπκνχκε γηα λα βξίζθεηαη πάλσ απφ ην κελνχ καο. Μπνξνχκε επίζεο λα αιιάμνπκε ην χςνο θαη ην πιάηνο ηεο εηθφλαο. ηελ πξνθείκελε πεξίπησζε αλαδεηνχκε ην Logo ηνπ Σ.Δ.Ι Καβάιαο ην νπνίν έρνπκε απνζεθεχζεη ήδε κέζα ζην θάθειν Images ηεο Ιζηνζειίδαο καο θαη έηζη αληηθαζηζηνχκε ηελ πξνεπηιεγκέλε εηθφλα κε ηελ επηζπκεηή. Φπζηθά έρνπκε 31

34 πξνλνήζεη ήδε ψζηε νη δηαζηάζεηο ηεο εηθφλαο καο λα ηαηξηάδνπλε κε ηηο αληίζηνηρεο ηεο πξνεπηιεγκέλεο εηθφλαο ζην ζέκα καο, γηα ηελ απνθπγή παξακνξθψζεσλ θαη αζπκβαηνηήησλ ζην κελνχ πινήγεζεο καο. Απφ ηελ επηινγή General κπνξνχκε λα κεηνλνκάζνπκε ην 32

35 κελνχ Home ζε Αξρηθή ειίδα, λα ηεο δψζνπκε ην χςνο θαη ην πιάηνο πνπ ζέινπκε απφ ηεο επηινγέο Item width θαη Item height ζην παξφλ ζεκείν δελ ρξεηάδεηαη λα επέκβνπκε γηαηί ην πξφγξακκα απηφκαηα ην πξνζαξκφδεη ζηα πεξηερφκελα. Απφ ηελ επηινγή Fonts κπνξνχκε λα επηιέμνπκε γξακκαηνζεηξά θαη ηη κέγεζνο ζα είλαη, λα αιιάμνπκε ην ρξψκα ησλ γξακκάησλ ηνπ. Απηέο ηηο επηινγέο αθξηβψο κπνξνχκε λα ρξεζηκνπνηήζνπκε ηηο επηινγέο ηεο έληνλεο γξαθήο, ηεο πιάγηαο γξαθήο θαη ηελ ππνγξάκκηζε. ε απηφ ην ζεκείν κπνξνχκε λα νξίζνπκε ηνπο ππεξζπλδέζκνπο (Links) ηεο θάζε επηινγήο ηνπ κελνχ δεκηνπξγψληαο έηζη ηηο απαξαίηεηεο ζπζρεηίζεηο ηνπ κελνχ πινήγεζεο, ψζηε λα κπνξνχκε λα επηιέγνπκε απφ ηελ θάζε ζειίδα απηήλ πνπ επηζπκνχκε. Δπηιέγνπκε ηελ επηινγή Target λα βξίζθεηαη ζην self έηζη ψζηε θάζε ζχλδεζκνο λα αλνίγεη ζην παξφλ παξάζπξν θαη φρη ζε λέν. 33

36 Απφ ην Background κπνξνχκε λα επηιέμνπκε ην ρξψκα ηνπ κελνχ καο θαζψο θαη ηη ρξψκα ζα γίλεηαη ε θάζε επηινγή φηαλ ζα είλαη ην πνληίθη πάλσ ηεο (onover). Η επηινγή Border καο δίλεη ηε δπλαηφηεηα λα αιιάμνπκε ην πιαίζην ηνπ κελνχ κε δηάθνξνπο ηξφπνπο φπσο θαη λα απμήζνπκε ην χςνο θαη λα αιιάμνπκε ην ρξψκα ηεο επηινγήο γχξσ γχξσ φηαλ ην επηιέγνπκε θαη φηαλ φρη. Αθνχ έρνπκε ηειεηψζεη κε ηε δεκηνπξγία ηνπ κελνχ πινήγεζεο ην επφκελν καο βήκα είλαη λα παηήζνπκε ηελ επηινγή Publish γηα λα ην ηνπνζεηήζνπκε ζηελ Ιζηνζειίδα καο. ' απηή ηε κάζθα ζα πξέπεη λα παηήζνπκε ηελ επηινγή Copy All, έπεηηα λα πάκε ζηνλ θψδηθα ηεο Ιζηνζειίδαο πνπ θαηαζθεπάζακε θαη λα ην επηθνιιήζνπκε ην script αλάκεζα ζηηο δχν εηηθέηεο <HEAD> πνπ ππάξρνπλ ζηνλ θψδηθα ηεο HTML. 34

37 Ενζωμάηωζη ηοσ μενού πλοήγηζης ζηην ζελίδα Αθνχ νινθιεξψζακε ηε ζρεδίαζε ηνπ κελνχ θαη έρνληαο νξίζεη εμαξρήο ηηο απαξαίηεηεο ζπλδέζεηο (Hyperlinks) κε ηηο θαηάιιειεο νλνκαζίεο π.ρ Αξρηθή ειίδα - index.html θαη Δθδειψζεηο - events.html. Σν κφλν πνπ απνκέλεη είλαη λα ην ελζσκαηψζνπκε αθνινπζψληαο ηα βήκαηα πνπ καο παξέρεη ην πξφγξακκα (νδεγφο ). Πξψην βήκα είλαη λα εηζάγνπκε ηελ αθφινπζε νδεγία <script type="text/javascript" language="javascript1.2" src="stmenu.js"></script> αλάκεζα ζηηο εηηθέηεο Head. Γεχηεξν βήκα είλαη λα εηζάγνπκε ηo αθφινπζν script αθξηβψο ζην ζεκείν πνπ επηζπκνχκε λα εκθαλίδεηαη δειαδή κέζα ζηε θεληξηθή αξηζηεξή ζηήιε θαη πάληα εληφο ησλ εηηθεηψλ Body 35

38 <td width="130" valign="top" background="images/index_20.gif"> <script type="text/javascript" language="javascript1.2"> <!-- stm_bm(["menu1e9b",700,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","", ,0,1,1,"default","hand",""],this); stm_bp("p0",[1,4,0,0,1,2,19,7,100,"",-2,"",- 2,90,0,0,"#000000","#FF9E4F","",3,1,1,"#CC9966"]); stm_ai("p0i0",[6,1,"transparent","tei_logo.jpg",128,100,0]); stm_ai("p0i1",[0,"αρτική Σελίδα","","",-1,- 1,0,"index.html","_self","","","borderarrow.gif","borderarrow.gi f",19,14,0,"","",0,0,0,0,1,"#ff9900",0,"#009933",0,"","",0,2,1,1,"#f4a838","#666666","#ffffff","#ffffff","bold 10pt 'Arial','Verdana'","bold 9pt 'Arial','Verdana'",0,0]); stm_aix("p0i2","p0i1",[0,"μαθήμαηα","","",-1,- 1,0,"index.html","_self","","","borderarrow.gif","borderarrow.gi f",19,14,0,"arrow_r.gif","arrow_r.gif",7,7]); stm_bpx("p1","p0",[1,2,0,0,1,2,19,0,100,"",-2,"",- 2,90,0,0,"#000000","#EA771F"]); stm_aix("p1i1","p0i1",[0,"ξένες Γλώζζες","","",-1,- 1,0,"glosses.html"]); stm_aix("p1i0","p0i1",[0,"γσμναζηήριο","","",-1,- 1,0,"gimnastirio.html"]); stm_ep(); stm_aix("p0i3","p0i1",[0,"προζωπικό","","",-1,- 1,0,"prosopiko.html"]); stm_aix("p0i4","p0i1",[0,"events","","",-1,-1,0,"events.html"]); stm_aix("p0i5","p0i1",[0,"location","","",-1,- 1,0,"location.html"]); 36

39 stm_ep(); stm_sc(1,["#006666","#006633","","",3,3,0,0,"#fffff7","#000000", "up_disabled.gif","up_enabled.gif",7,9,0,"down_disabled.gif","do wn_enabled.gif",7,9,0,0,1]); stm_em(); //--> </script> Σξίην θαη ηειεπηαίν βήκα καο είλαη ζχκθσλα πάληα κε ηηο νδεγίεο ηνπ πξνγξάκκαηνο είλαη λα απνζεθεχζνπκε φια ηα απαξαίηεηα βνεζεηηθά αξρεία (γξαθηθά θαη Java script) ζηνλ θεληξηθφ θάθειν ηεο ζειίδαο καο. Μεηά επηζηξέθνπκε πάιη ζην πξφγξακκα θαη παηάκε Next. Κάλνπκε πάιη ηελ ίδηα δηαδηθαζία κφλν πνπ απηή ηε θνξά ην πξφγξακκα καο θαζνδεγεί λα ην επηθνιιήζνπκε αλάκεζα ζηηο δχν εηηθέηεο <BODY> πνπ ππάξρνπλ ζηνλ θψδηθα ηεο HTML. ηε ζπλέρεηα επηιέγνπκε δχν θνξέο ην Next Σέινο αλαδεηνχκε ηελ δηαδξνκή ζην δίζθν πνπ ζα αληηγξάςεη ην πξφγξακκα φια ηα αξρεία πνπ ρξεηάδνληαη γηα ηελ θαηαζθεπή ηνπ Μελνχ. Μφιηο ην βξνχκε θξνληίδνπκε φηη ηα αξρεί α ζα εμαρζνχλ ζην θεληξηθφ Root ηεο Ιζηνζειίδαο καο παηάκε πάιη Next θαη ηέινο Finish. 37

40 4.4 ΔΗΜΙΟΤΡΓΙΑ ΤΠΟΛΟΙΠΩΝ ΕΛΙΔΩΝ Αθνχ έρνπκε νινθιεξψζεη ηε δεκηνπξγία ηεο Αξρηθήο ειίδαο(index.html) θαη επηπιένλ έρνληαο ελζσκαηψζεη θαη ην κελνχ πινήγεζεο κε ηνπο θαηάιιεινπο ππεξζπλδέζκνπο είκαζηε έηνηκνη λα δεκηνπξγήζνπκε θαη ηηο ππφινηπεο ζειίδεο πνπ απνηεινχλ ην δηθηπαθφ καο ηφπν. Δθηφο ηελ Αξρηθή ειίδα ζα ρξεηαζηνχκε επηπιένλ θαη ηηο αθφινπζεο: Πξνζσπηθφ, Δθδειψζεηο, Σνπνζεζία θαη ηηο δχν επηπιένλ πνπ πεξηιακβάλνληαη ζην κελνχ καζήκαηα Ξέλεο Γιψζζεο θαη Γπκλαζηήξην. Γηα λα δεκηνπξγεζνχλ φια απηά ζα πξέπεη λα θάλνπκε αληηγξαθή ηελ αξρηθή ζειίδα γηα λα δεκηνπξγήζνπκε ηηο επηπιένλ πνπ ρξεηαδφκαζηε θαη ηηο ηνπνζεηνχκε ζην θχξην Root ηεο Ιζηνζειίδαο καο. Φπζηθά θάζε ζειίδα ζα πξέπεη λα πάξεη ην θαηάιιειν φλνκα πνπ ηηο αληηζηνηρεί ζχκθσλα κε ηηο ππεξζπλδέζεηο(links) πνπ έρνπκε θάλεη ζην κελνχ πινήγεζεο π.ρ ε ζειίδα ηνπ πξνζσπηθνχ ζα κεηνλνκαζηεί ζε prosopiko.html, νη εθδειψζεηο ζε events.html θ.ι.π. ' απηφ ην ζεκείν έρνπκε νινθιεξψζεη ην δηθηπαθφ καο ηφπν θαη ηαπηφρξνλα φιεο ηηο ππεξζπλδέζεηο κεηαμχ ηνπο. Σν κφλν πνπ απνκέλεη είλαη λα επεμεξγαζηνχκε φιεο ηηο ζειίδεο θαη λα απνδψζνπκε ην ζσζηφ θείκελν ζηελ θάζε κία. ειίδα Πξνζσπηθνχ πγθεθξηκέλα γηα ηε ζειίδα ηνπ πξνζσπηθνχ εηζάγακε ηξεηο πίλαθεο ησλ νπνίσλ ηηο δηαζηάζεηο είρακε ήδε απνθαζίζεη θαη ζρεδηάζεη εμ' αξρήο ζην ραξηί. Ο πξψηνο απφ ηνπο ηξεηο ζα έρεη δηαζηάζεηο δχν ζεηξψλ θαη πέληε ζηειψλ. Η πξψηε γξακκή ζα έρεη ζπγρσλεπκέλα φια ηα θειηά θαη ην ρξψκα γεκίζκαηνο ζα είλαη πνξηνθαιί ζηηο απνρξψζεηο ηεο ηζηνζειίδαο καο, ψζηε λα επηηπγράλεηαη ε θαιχηεξε νξγάλσζε θαη παξνπζίαζε ησλ πιεξνθνξηψλ ηνπ πίλαθα. Με ην ίδην ηξφπν δεκηνπξγήζακε θαη ηνπο άιινπο δχν πίλαθεο.ο δεχηεξνο πίλαθαο έρεη ελληά γξακκέο 38

41 θαη ηξεηο ζηήιεο θαη ν ηξίηνο θαη ηειεπηαίνο έρεη δχν γξακκέο θαη κία ζηήιε. Δπηπιένλ θξνληίζακε ηα πεξηγξάκκαηα ησλ πηλάθσλ λα ζπκθσλνχλ ζηελ ίδηα πνξηνθαιί απφρξσζε πνπ ππάξρεη θαη ζην γέκηζκα. Η αιιαγή ηνπ ρξψκαηνο επηηπγράλεηαη αθνχ επηιέμνπκε νιφθιεξν ηνλ πίλαθα παηήζνπκε δεμί θιηθ πάλσ ηνπ Table Properties θαη απφ ηελ επηινγή Borders νξίδνπκε ην ρξψκα πνπ επηζπκνχκε. Γεκηνπξγία αλαδπφκελνπ παξαζχξνπ Δθ' φζνλ δεκηνπξγήζακε ηνπο πίλαθεο εηζάγακε ηα ζηνηρεία ησλ θαζεγεηψλ παηψληαο πάλσ ζην θάζε φλνκα μερσξηζηά εκθαλίδεηαη έλα αλαδπφκελν παξάζπξν ην νπνίν ζηνηρίδεηε ζην θέληξν ηεο ζειίδαο θαη εκθαλίδεη ην πιήξεο βηνγξαθηθφ ηνπ θάζε θαζεγεηή. Δπεηδή ζέιακε ηα βηνγξαθηθά λα αλνίγνπλ ζε έλα κηθξφ παξάζπξν ζην θέληξν ηεο νζφλεο έπξεπε λα ρξεζηκνπνηήζνπκε έλα script ην νπνίν βξήθακε ζην internet θαη παξέρνληαλ δσξεάλ ζηελ παξαθάησ δηεχζπλζε. 39

42 Η ρξήζε ηνπ πεξηγξαθφηαλ αλαιπηηθά απφ ην δεκηνπξγφ ηνπ θαη πεξηιακβάλεη δχν απιά βήκαηα. Πξψην βήκα είλαη ε εηζαγσγή ηνπ script αλάκεζα ζηηο εηηθέηεο HEAD. Γεχηεξν βήκα κεηά απφ θάζε link απιά πξνζζέηνπκε ζηελ εηηθέηα ηνπ Link <a href="biografiko1.html" ηελ αθφινπζε νδεγία ηελ νπνία θαιεί ην script θαη εκθαλίδεη ηε ζειίδα biografiko1.html κέζα ζε έλα λέν παξάζπξν κε δηαζηάζεηο πνπ νξίδνπκε εκείο. onclick="newwindow(this.href,'newwindow','482','482','no',' center');return false" Έηζη δεκηνπξγνχκε φια ηα βηνγξαθηθά θαη ηνπο ππεξζπλδέζκνπ ηνπο. Κάζε ππεξζχλδεζκνο ζα παξαπέκπεη θαη ζε κία λέα ζειίδα ζηελ νπνία ζα πξέπεη λα έρνπκε γξάςεη ην βηνγξαθηθφ. Απφ ηε ζηηγκή πνπ δεκηνπξγήζακε ην πξψην βηνγξαθηθφ θαη αλνίγεη ην αλαδπφκελν παξάζπξν θάλνπκε απιψο αληηγξαθή ην biografiko1.html φζεο θνξέο ρξεηαδφκαζηε γηα ηα επηπιένλ 40

43 βηνγξαθηθά ζην Root θάθειν ηεο Ιζηνζειίδαο καο. Μεηά απιψο πεγαίλνπκε ζηνλ θψδηθα ηεο HTML θαη αλαπαξάγνπκε ηελ νδεγία ηνπ script ζε θάζε Link πνπ επηζπκνχκε. Πξνθεηκέλνπ λα δεκηνπξγήζνπκε απηή ηελ ηζηνζειίδα ρξεζηκνπνηήζακε ην Microsoft FrontPage 2000 θαη έλα πξφγξακκα δεκηνπξγίαο κελνχ ην Sothink DHTML menu 7(trial version). Η ρξήζε ηνπ template θξίζεθε απαξαίηεηε γηαηί παξείρε έλα εληαίν ζρεδηαζηηθφ ππφβαζξν ην νπνίν κφλν έλαο έκπεηξνο ζρεδηαζηήο ηζηνζειίδσλ ζα κπνξνχζε λα πεηχρεη. Πηζηεχνπκε φηη ε ηζηνζειίδα αλ θαη είλαη απιή ζηε κνξθή ηεο παξακέλεη εχρξεζηε θαη ιεηηνπξγηθή. πλαληήζακε πνιιέο δπζθνιίεο γηα ηε δεκηνπξγία ηεο ζπγθεθξηκέλεο ηζηνζειίδαο ιφγσ απεηξίαο ζην ζρεδηαζκφ ηζηνζειίδσλ, γη' απηφ ην ιφγν αληιήζεθαλ πνιιέο πιεξνθνξίεο 41

44 απφ ην Internet φπσο θαη ζπκβνπιέο απφ Forum θαη δηάθνξα Tutorial πνπ ήηαλ δηαζέζηκα ζην Internet. 42

45 5. ΒΙΒΛΙΟΓΡΑΦΙΑ 1. uction F%84%CF%85%CE%BF_%CF%85%CF%80%CE%BF%CE% BB%CE%BF%CE%B3%CE%B9%CF%83%CF%84%CF%8E %CE%BD _servers 6. E%BA%CF%8C%CF%83%CE%BC%CE%B9%CE%BF%CF% 82_%CE%99%CF%83%CF%84%CF%8C%CF% /main/help/helpdesk/internet/internet8.html chap3a_6.htm Β.ΓΚΙΟΤΡΓΑ ΔΚΓΟΣΙΚΗ, ΟΓΗΓΟ ΣΗ HTML 18. ΥΡΗΣΟ ΝΙΚΟΛΑΪΓΗ FRONTPAGE