ΓΗΜΙΟΤΡΓΙΑ ΤΠΔΡΜΔΙΚΗ ΔΦΑΡΜΟΓΗ ΓΙΑ ΣΗΝ ΤΠΟΣΗΡΙΞΗ ΔΡΔΤΝΗΣΙΚΗ ΟΜΑΓΑ

ΣΔΥΝΟΛΟΓΙΚΟ ΔΚΠΑΙΓΔΤΣΙΚΟ ΙΓΡΤΜΑ ΚΡΗΣΗ ΥΟΛΗ ΣΔΥΝΟΛΟΓΙΚΧΝ ΔΦΑΡΜΟΓΧΝ ΣΜΗΜΑ ΔΦΑΡΜΟΜΔΝΗ ΠΛΗΡΟΦΟΡΙΚΗ ΚΑΙ ΠΟΛΤΜΔΧΝ ΓΗΜΙΟΤΡΓΙΑ ΤΠΔΡΜΔΙΚΗ ΔΦΑΡΜΟΓΗ ΓΙΑ ΣΗΝ ΤΠΟΣΗΡΙΞΗ ΔΡΔΤΝΗΣΙΚΗ ΟΜΑΓΑ ΠΣΤΥΙΑΚΗ ΔΡΓΑΙΑ ΑΝΓΡΟΤΛΑΚΗ ΑΝΣΧΝΗ (AM: 531) ΔΠΗΒΛΔΠΧΝ ΚΑΘΖΓΖΣΖ: ΜΙΥΑΗΛ ΚΛΔΙΑΡΥΑΚΗ ΖΡΑΚΛΔΗΟ, 2008-2009

Πεξηερόκελα Δπραξηζηίεο... 4 Πεξίιεςε... 5 ΘΔΧΡΗΣΙΚΟ ΜΔΡΟ... 7 Κεθάιαην 1. Τπεξκέζα... 7 1.1 Τπεξκέζα... 7 1.2 Τπεξθείκελν... 7 Κεθάιαην 2. Γιώζζα ήκαλζεο Τπεξ-Κεηκέλνπ... 8 Ζ γιώζζα ζήκαλζεο ππέξ-θεηκέλνπ HTML (Hyper-Text Markup Language)... 8 2.1 Φπιινκεηξεηήο (Web Browser)... 9 2.2 Βαζηθέο εληνιέο πνπ ρξεζηκνπνηνύληαη ζηελ HTML γηα κνξθνπνίεζε θεηκέλνπ... 9 2.5 H δνκή κηαο ηζηνζειίδαο:... 11 2.6 Πίλαθεο... 12 2.7 Δπηθεθαιίδεο... 13 2.8 Λίζηεο... 14 Αηαμηλόκεηε ιίζηα... 14 Σαμηλνκεκέλε ιίζηα... 15 2.9 Υξώκα Φόληνπ... 15 2.10 Υξώκα Γξακκαηνζεηξάο... 17 2.11 Δηθόλα γηα θόλην... 17 2.12 Πιαίζηα... 18 Δηζαγσγή πιαηζίσλ... 18 Ζ ζειίδα ππνδνκήο ή αξρηθή ζειίδα... 18 Οη ππόινηπεο ζειίδεο... 19 2.13 Κείκελν... 20 2.14 Πίλαθαο όισλ ησλ εληνιώλ ηεο Γιώζζαο ήκαλζεο Τπεξ-θεηκέλνπ (HTML)... 20 Κεθάιαην 3. Η Γιώζζα XHTML (Extensible HyperText MarkupLanguage)... 31 3.1 XHTML (Δπεθηάζηκε γιώζζα ζήκαλζεο/ζεκείσζεο ππεξθεηκέλνπ)... 32 3.2 Γηαδνρηθά θύιια ζρεηηθά κε ην ζηπι ηεο ηζηνζειίδαο CSS (Cascading Style Sheets). 32 3.3 ρεδηαζκόο ηεο ηζηνζειίδαο... 33 Κεθάιαην 4 Λνγηζκηθό Καηαζθεπήο Ιζηνζειίδσλ... 34 4.1 Microsoft Share Point Designer... 34 4.1.1 Δηθνλίδηα θαη ιεηηνπξγίεο... 35 4.1.2 Δηζαγσγή ππεξζπλδέζκνπ ζηελ ηζηνζειίδα... 37 4.1.3 Δηζαγσγή θνπκπηνύ ζηελ ηζηνζειίδα... 38 4.1.4 Φόλην ηεο ηζηνζειίδαο (background)... 39 4.1.5 Αληηθείκελα δηαδηθηύνπ (Web components)... 39 4.1.6 Κπιηόκελν κήλπκα (Scrolling Marquee)... 39 4.1.7 Πίλαθεο... 40 4.1.8 Πξνζζήθε Πνιπκέζσλ ζε Ηζηνζειίδεο... 41 4.1.10 Δπηπιένλ Γπλαηόηεηεο Γξαθηθώλ... 42 4.1.11 Πξνζζήθε Αξρείσλ Ήρνπ ζε ηζηνζειίδα... 43 4.1.12 Πξνζζήθε ζεηξάο εηθόλσλ ζε ηζηνζειίδα... 43 4.1.13 Σξόπνο ελαιιαγήο ηζηνζειίδσλ (Page Transitions)... 44 4.1.14 Γεκηνπξγία Φόξκαο (Form)... 44 4.2 Adobe Dreamweaver... 45 4.3 Adobe Photoshop... 46 4.4 Adobe Flash... 47 2

ΠΡΑΚΣΙΚΟ ΜΔΡΟ... 48 Κεθάιαην 5. Ο δηαδηθηπαθόο ηόπνο θαη ε θαηαζθεπή ηνπ... 48 5.1 Ο δηθηπαθόο ηόπνο... 48 5.2 Πνξεία θαηαζθεπήο... 48 5.3 Τιηθό - Σερλνινγία... 49 5.4 Παξνπζίαζε ηνπ δηθηπαθνύ ηόπνπ... 50 ειίδα εηζαγσγήο... 50 Αξρηθή ζειίδα... 50 Άγγιηθή έθδνζε... 52 Δζσηεξηθόο θαλνληζκόο... 53 Πξνζσπηθό... 53 Δπίηηκνη δηδάθηνξεο... 57 Δπηζηεκνληθέο ζπλαληήζεηο... 58 Γηαζύλδεζε κε ηελ θνηλσλία... 59 Έξεπλα... 60 Πνιπκεζηθό πιηθό... 60 Δπηθνηλσλία... 65 Κεθάιαην 6. Γηαδηθαζία «αλεβάζκαηνο» (upload).... 67 Σν πξόγξακκα Smart ftp θαη «αλέβαζκα» αξρείσλ ζηνλ εμππεξεηεηή.... 67 Γισζζάξηo... 69 Βηβιηνγξαθία... 71 3

ΔΤΥΑΡΙΣΙΔ Mε ηελ νινθιήξσζε ηεο παξνύζαο πηπρηαθήο εξγαζίαο αηζζάλνκαη ηελ αλάγθε λα επραξηζηήζσ νιόςπρα όινπο όζνη κνπ ζπκπαξαζηάζεθαλ ζηελ πξνζπάζεηα απηή. Δπραξηζηώ ζεξκά ηνλ επόπηε ηεο πηπρηαθήο κνπ εξγαζίαο, Δξγαζηεξηαθό πλεξγάηε ζην Σκήκα Δθαξκνζκέλεο Πιεξνθνξηθήο θαη Πνιπκέζσλ θύξην Μηράιε Κιεηζαξράθε, γηα ηελ ππνκνλή πνπ επέδεημε θαη ηελ επηζηεκνληθή θαζνδήγεζε πνπ αθεηδώο κνπ παξείρε θαηά ηε δηάξθεηα εθπόλεζεο ηνπ ζεσξεηηθνύ θαη ηνπ εκπεηξηθνύ κέξνπο ηεο εξγαζίαο. Με ζπζηεκαηηθόηεηα θαη κεζνδνινγηθή απζηεξόηεηα κε νδήγεζε ζηαδηαθά ζην ζηόρν ηεο εξγαζίαο, πξνθαιώληαο ζπλερώο ην λνπ κνπ λα ζεσξεί ην θάζε δήηεκα (ζεσξεηηθό ή πξαθηηθν) θξηηηθά θαη από πνιιέο πξννπηηθέο θαη ελαιιαθηηθέο. Δπραξηζηώ, επίζεο, ζεξκά ηα κέιε ΓΔΠ ηνπ Δξγαζηεξίνπ Φπρνινγίαο ηνπ Σκήκαηνο Φηινζνθηθώλ θαη Κνηλσληθώλ πνπδώλ ηεο Φηινζνθηθήο ρνιήο ηνπ Παλεπηζηεκίνπ Κξήηεο πνπ κνπ εκπηζηεύηεθαλ ηε δεκηνπξγία ηνπ δηθηπαθνύ ηόπνπ ηνπ Δξγαζηεξίνπ ηνπο. Ηδηαίηεξα επραξηζηώ ηνλ Καζεγεηή Φπρνινγίαο θύξην Γηάλλε Κνπγηνπκνπηδάθε πνπ κνπ εκπηζηεύηεθε εξεπλεηηθό πιηθό ηνπ Δξγαζηεξίνπ, ηα βηνγξαθηθά ηεο εξεπλεηηθήο νκάδαο θαη πάληα κε πξνζπκία θαη επγέλεηα απηόο θαη νη ζπλεξγάηεο ηνπ Λέθηνξεο Φπρνινγίαο θπξία Βαζηιηθή Σζνύξηνπ θαη Σειέκαρνο Ηαηξίδεο, απαληνύζαλ ζηηο εξσηήζεηο κνπ. Σνπο επραξηζηώ ζεξκά γηα ηελ εκπηζηνζύλε, ηε ζπλεξγαζία θαη ηελ επγέλεηά ηνπο. Διπίδσ όηη αληαπνθξίζεθα ζε απηό πνπ από θνηλνύ ζρεδηάζακε. Σέινο, επραξηζηώ από θαξδηάο ηνπο γνλείο θαη ηνλ αδεξθό κνπ γηα ηε ζπλερή ζπκπαξάζηαζή ηνπο θαηά ηε δηάξθεηα ησλ ζπνπδώλ κνπ θαη θαηά ηε δηάξθεηα εθπόλεζεο ηεο παξνύζαο εξγαζίαο. 4

ΠΔΡΙΛΗΦΗ Ζ παξνύζα εξγαζία πξαγκαηνπνηήζεθε ζηα πιαίζηα ηεο πηπρηαθήο άζθεζεο ηνπ πξνπηπρηαθνύ θνηηεηή Αλδξνπιάθε Αληώληνπ, θνηηεηή ηνπ Σερλνινγηθνύ Δθπαηδεπηηθνύ Ηδξύκαηνο Ζξαθιείνπ Κξήηεο ζην ηκήκα Δθαξκνζκέλεο Πιεξνθνξηθήο θαη Πνιπκέζσλ. Ζ δηάξθεηα πξαγκαηνπνίεζήο ηεο μεθίλεζε ζηηο 18/4/2008 θαη νινθιεξώζεθε ζηηο 18/4/2009.Δπηβιέπσλ θαζεγεηήο ήηαλ ν θ. Μηραήι Κιεηζαξράθεο. Αληηθείκελν ηεο εξγαζίαο απηήο είλαη ε ζεσξεηηθή ηεθκεξίσζε θαη ε δεκηνπξγία κηαο ππεξκεζηθήο εθαξκνγήο πνιπκέζσλ θαη ζπγθεθξηκέλα ηνπ δηθηπαθνύ ηόπνπ ηνπ Δξγαζηεξίνπ Φπρνινγίαο ηνπ Σκήκαηνο Φηινζνθηθώλ θαη Κνηλσληθώλ πνπδώλ ηεο Φηινζνθηθήο ρνιήο ηνπ Παλεπηζηεκίνπ Κξήηεο. Ο ηξόπνο θαηαζθεπήο κηαο ππεξκεζηθήο εθαξκνγήο, ελόο δηθηπαθνύ ρώξνπ, πνηθίιεη αλάινγα κε ηελ ηερλνινγία θαη ην ινγηζκηθό πνπ ζα ρξεζηκνπνηήζεη απηόο πνπ ηελ πινπνηεί. Ζ παξνύζα εξγαζία ρσξίδεηαη ζε Θεσξεηηθό θαη Πξαθηηθό κέξνο, πνπ αλαπηύζζνληαη ζπλνιηθά ζε έμη θεθάιαηα. Σν Θεσξεηηθό κέξνο απνηειείηαη από ηέζζεξα θαη ην Πξαθηηθό κέξνο απνηειείηαη από δύν θεθάιαηα, ελώ ζην ηέινο ηεο εξγαζίαο ππάξρεη έλα ζύληνκν Γισζζάξην θαη ε Βηβιηνγξαθία. ην πξώην θεθάιαην ηνπ Θεσξεηηθνύ Μέξνπο πεξηγξάθνληαη ζύληνκα νη όξνη ππεξκέζα θαη ππεξ-θείκελν, θαζώο θαη ε εθαξκνγή ηνπο ζηε δεκηνπξγία ηζηνζειίδσλ. ην δεύηεξν θεθάιαην αλαθέξνληαη αλαιπηηθά ηα βαζηθά ζηνηρεία ηεο γιώζζαο ζήκαλζεο ππεξθεηκέλνπ HTML, όπσο νη βαζηθέο έλλνηεο θαη νη ιεηηνπξγίεο πνπ ελδέρεηαη λα ζπλαληήζεη θάπνηνο δεκηνπξγώληαο έλα δηθηπαθό ρώξν κε ηε ρξήζε ηεο γιώζζαο απηήο. ηε ζπλέρεηα πεξηγξάθεηαη ν όξνο θπιινκεηξεηήο θαη ν ηξόπνο: κνξθνπνίεζεο θεηκέλνπ, εηζαγσγήο ππεξζπλδέζκσλ, εηζαγσγήο εηθόλσλ, δεκηνπξγίαο πηλάθσλ, πιαηζίσλ θαη ιηζηώλ. Αθόκε, ην δεύηεξν θεθάιαην πεξηέρεη ζηνηρεία γηα ηελ επεμεξγαζία ρξώκαηνο ζε κία ηζηνζειίδα θαη ηέινο παξαηίζεηαη έλαο πίλαθαο κε ηηο βαζηθόηεξεο εληνιέο ηεο γιώζζαο απηήο. ην ηξίην θεθάιαην πεξηγξάθνληαη ζπλνπηηθά θάπνηα είδε εμέιημεο ηεο γιώζζαο HTML, ε XHTML (επεθηάζηκε γιώζζα ζήκαλζεο/ζεκείσζεο ππεξθεηκέλνπ), ηα δηαδνρηθά θύιια ζηπι (css) θαη νξηζκέλα βήκαηα πνπ πξέπεη λα γίλνπλ πξηλ λα μεθηλήζεη ε πινπνίεζε ηνπ δηθηπαθνύ ηόπνπ. ην ηέηαξην θεθάιαην αλαθέξνληαη ηα πξνγξάκκαηα πνπ ρξεζηκνπνηήζεθαλ γηα ηε δεκηνπξγία ηεο ππεξκεζηθήο εθαξκνγήο απηήο, θαζώο θαη κεξηθέο ιεηηνπξγίεο ηνπο αλαιπηηθά. ηε ζπλέρεηα αθνινπζεί ην πξαθηηθό κέξνο ηεο εξγαζίαο. 5

ην πέκπην θεθάιαην αλαθέξνληαη πιεξνθνξίεο ζρεηηθά κε: ην δηθηπαθό ρώξν πνπ πινπνηήζεθε ζην πιαίζην ηεο παξνύζαο πηπρηαθήο εξγαζίαο, ηνλ ηξόπν θαηαζθεπήο ηνπ, ην πιηθό θαη ηελ ηερλνινγία πνπ ρξεζηκνπνηήζεθαλ, θαη ηέινο παξαηίζεηαη κία ιεπηνκεξήο πεξηήγεζε ζηηο ηζηνζειίδεο πνπ πεξηιακβάλεη. ην έθην θεθάιαην αλαθέξεηαη ν ηξόπνο κε ηνλ νπνίν ζα κεηαθεξζνύλ ηα αξρεία πνπ απνηεινύλ ην δηθηπαθό ηόπν ζηνλ εμππεξεηεηή πνπ ζα ηα θηινμελήζεη. ηε ζπλέρεηα παξαηίζεηαη ην ζύληνκν Γισζζάξην θαη ε εξγαζία ηειεηώλεη κε ηε Βηβιηνγξαθία. 6

Θεσξεηηθό Μέξνο Κεθάιαην 1 Τπεξκέζα ε απηό ην θεθάιαην ζα αλαιύζνπκε ηνπο γεληθνύο όξνπο ππεξκέζα θαη ππεξθείκελν, ησλ νπνίσλ ε ρξήζε ζπλαληάηαη πνιύ ζπρλά θαηά ηε δεκηνπξγία ηζηνζειίδσλ ή θαηά ηελ πινήγεζε ζε ηζηνζειίδεο ηνπ δηαδηθηύνπ. 1.1 Τπεξκέζα Ο όξνο ππεξκέζα (hypermedia), ν νπνίνο επηλνήζεθε από ηνλ Σελη Νέιζνλ θαηά ηε δεθαεηία 1960, ρξεζηκνπνηείηαη σο επέθηαζε ηνπ όξνπ ππεξθείκελν (Hypertext), ζην νπνίν ηα γξαθηθά, ν ήρνο, ην θείκελν θαη νη ππεξζύλδεζκνη ζπλελώλνληαη γηα λα δεκηνπξγήζνπλ έλα κε γξακκηθό είδνο πιεξνθνξίαο. Ο ρξήζηεο θαζνξίδεη ηε ζεηξά πξόζβαζεο ηεο πιεξνθνξίαο ζην πιηθό κε βάζε ηηο πξνζσπηθέο ηνπ πξνηηκήζεηο. Σν WWW(world wide web) είλαη έλα θιαζηθό παξάδεηγκα ππεξκέζσλ, ελώ κηα παξνπζίαζε βίληεν ή θηλεκαηνγξάθνπ είλαη έλα παξάδεηγκα πνιπκέζσλ, ιόγσ ηεο απνπζίαο ζπλδέζκσλ. Οη πεξηζζόηεξεο ζύγρξνλεο ππεξκεζηθέο εθαξκνγέο κπνξνύλ λα παξνπζηαζηνύλ κέζσ ησλ ηζηνζειίδσλ από πνηθίια ζπζηήκαηα, ζπκπεξηιακβαλνκέλσλ ησλ ζπζθεπώλ αλαπαξαγσγήο πνιπκέζσλ, ησλ κεραλώλ αλαδήηεζεο θαη ησλ απηόλνκσλ εθαξκνγώλ. Οη ππεξκεζηθέο εθαξκνγέο κπνξνύλ λα αλαπηπρζνύλ κε πξνγξάκκαηα, όπσο: Σν Adobe Flash,ην Adobe Director, ην Adobe Authorware, θαη MatchWare Mediator, πνπ κπνξνύλ λα ρξεζηκνπνηεζνύλ γηα ηε δεκηνπξγία απηόλνκσλ εθαξκνγώλ ππεξκέζσλ κε έκθαζε ζηελ ςπραγσγία. Σν ινγηζκηθό βάζεσλ δεδνκέλσλ, όπσο ην Visual Fox Pro θαη FileMaker Developer, πνπ κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ αλάπηπμε απηόλνκσλ εθαξκνγώλ ππεξκέζσλ, κε έκθαζε ζηελ εθπαίδεπζε θαη ηε δηαρείξηζε βάζεσλ δεδνκέλσλ. (Wikipedia 2008) 1.2 Τπεξθείκελν Ο όξνο ππεξθείκελν ζπρλά αλαθέξεηαη ζε θείκελν ππνινγηζηή, ην νπνίν νδεγεί ην ρξήζηε ζε πιεξνθνξίεο ζρεηηθέο κε ην θείκελν απηό. Σν ππεξθείκελν, ζε αληίζεζε κε ην απιό θείκελν, θαζηζηά δπλαηή ηε δπλακηθή νξγάλσζε ηεο πιεξνθνξίαο κέζα από ππεξζπλδέζκνπο. Μπνξεί λα ζρεδηαζηεί έηζη ώζηε λα εθηειεί δηαθνξεηηθέο ελέξγεηεο 7

όηαλ ν ρξήζηεο «παηάεη» πάλσ ζηνλ ππεξζύλδεζκν ή πεξλάεη κε ην πνληίθη πάλσ από απηό (Wikipedia 2008). Ο ζηόρνο ηεο παξνύζαο εξγαζίαο ζα επηηεπρζεί κε ηε δεκηνπξγία κηαο ππεξκεζηθήο εθαξκνγήο κε ρξήζε γιώζζαο Html, Xtml. ηα επόκελα θεθάιαηα ζα αλαθεξζνύκε ζηα ζηάδηα δεκηνπξγίαο ηεο εθαξκνγήο απηήο. Κεθάιαην 2. Γιώζζα ήκαλζεο Τπεξ-Κεηκέλνπ ην παξόλ θεθάιαην πεξηγξάθνληαη αλαιπηηθά όιεο νη βαζηθέο έλλνηεο θαη ιεηηνπξγίεο πνπ ελδέρεηαη λα ζπλαληήζεη θάπνηνο δεκηνπξγώληαο έλα δηθηπαθό ρώξν κε ηε ρξήζε ηεο γιώζζαο HTML (Γιώζζα ήκαλζεο Τπεξ-Κεηκέλνπ). Μεηά ηελ απόδνζε ηνπ όξνπ θπιινκεηξεηήο, πεξηγξάθεηαη ν ηξόπνο κνξθνπνίεζεο θεηκέλνπ, εηζαγσγήο ππεξζπλδέζκσλ, εηζαγσγήο εηθόλσλ, δεκηνπξγίαο πηλάθσλ, πιαηζίσλ θαη ιηζηώλ, ε επεμεξγαζία ρξώκαηνο ζε κηα ηζηνζειίδα θαη ηέινο παξαηίζεηαη έλαο πίλαθαο κε ηηο βαζηθόηεξεο εληνιέο ηεο γιώζζαο απηήο. Η γιώζζα ζήκαλζεο ππέξ-θεηκέλνπ HTML (Hyper-Text Markup Language) Ζ γιώζζα ζήκαλζεο ππέξ-θεηκέλνπ ή HTML ρξεζηκνπνηείηαη γηα ηελ θαηαζθεπή ηζηνζειίδσλ, ζηηο νπνίεο κπνξεί λα έρεη πξόζβαζε νπνηνζδήπνηε δηαζέηεη ειεθηξνληθό ππνινγηζηή ζπλδεδεκέλν κε ην δηαδίθηπν (internet). ηελ πξαγκαηηθόηεηα, νη ηζηνζειίδεο είλαη έγγξαθα θεηκέλνπ, παξόιν πνπ πεξηιακβάλνπλ, εθηόο από ην θείκελν, γξαθηθά, ή θηλνύκελεο εηθόλεο. Σα έγγξαθα απηά πεξηέρνπλ νξηζκέλνπο εηδηθνύο θσδηθνύο κνξθνπνίεζεο HTML, δειαδή εηηθέηεο (tags) πνπ δειώλνπλ ζην θπιινκεηξεηή πώο λα παξνπζηάδεη ηα αξρεία θεηκέλνπ, γξαθηθώλ, θαη θηλνύκελσλ εηθόλσλ ηεο ηζηνζειίδαο. Αληί γηα ηηο εηηθέηεο HTML εκθαλίδεηαη ζηνλ ππνινγηζηή ην θείκελν θαη νη εηθόλεο ησλ ηζηνζειίδσλ. Σα γξαθηθά, νη ήρνη, θαη νη θηλνύκελεο εηθόλεο πνπ εκθαλίδνληαη ζε κηα ηζηνζειίδα απνηεινύλ ζηελ πξαγκαηηθόηεηα μερσξηζηά αξρεία. Σα νλόκαηα ησλ αξρείσλ, καδί κε ηηο πιεξνθνξίεο ζρεηηθά κε ην πώο κπνξεί λα αλνηρηεί ή λα θνξησζεί ην αξρείν ή ζε πνηα ζέζε πξέπεη λα ηνπνζεηεζεί ζηελ ηζηνζειίδα, βξίζθνληαη ζηηο εηηθέηεο γιώζζαο ζήκαλζεο ππέξ-θεηκέλνπ HTML. Ο θπιινκεηξεηήο θαηεβάδεη, δειαδή αληηγξάθεη ζηνλ ππνινγηζηή ηα γξαθηθά, ηνπο ήρνπο, θαη ηηο θηλνύκελεο εηθόλεο, όηαλ δηαβάδεη ηηο εηηθέηεο κε ηηο αληίζηνηρεο νδεγίεο. Απηόο ν δηαρσξηζκόο ησλ ζπζηαηηθώλ κηαο ηζηνζειίδαο επηηξέπεη ηε γξεγνξόηεξε 8

ιήςε ησλ ζηνηρείσλ ηεο από ό,ηη αλ νιόθιεξε ε ηζηνζειίδα ήηαλ απνζεθεπκέλε ζε έλα κόλν αξρείν. πλήζσο, όηαλ «θνξηώλεηαη» κηα ηζηνζειίδα (web page) ζε έλα θπιινκεηξεηή, ηα ζηνηρεία ηεο εκθαλίδνληαη κε θάπνηα θαζπζηέξεζε. Αξρηθά «θνξηώλεηαη» ην θείκελν ηεο ζειίδαο, αθνινπζνύκελν από ηα γξαθηθά, ηηο θηλνύκελεο εηθόλεο θαη ηα αξρεία ήρνπ ή βίληεν πνπ ζρεηίδνληαη κε απηήλ. Σν κέγεζνο ηεο θαζπζηέξεζεο εμαξηάηαη από ηελ ηαρύηεηα ηεο ζύλδεζεο κε ην δηαδίθηπν πνπ δηαηίζεηαη, θαζώο θαη από ηα ζηνηρεία πνπ ππάξρνπλ ζε απηή. Ο ρξόλνο πνπ απαηηείηαη γηα ηε ιήςε όισλ απηώλ ησλ πιεξνθνξηώλ είλαη έλαο από ηνπο θπξηόηεξνπο παξάγνληεο ηεο ζρεδίαζεο ηζηνζειίδσλ (Μαξγαξίηεο, 2009). 2.1 Φπιινκεηξεηήο (Web Browser) Δίλαη έλα πξόγξακκα, ην νπνίν κεηαθξάδεη ηε γιώζζα ζήκαλζεο ππεξ-θεηκέλνπ (HTML) θαη παξνπζηάδεη ζηελ νζόλε ηνπ ειεθηξνληθνύ ππνινγηζηή ην αληίζηνηρν έγγξαθν ππεξκέζσλ ηνπ δηαδηθηύνπ. Σέηνηα πξνγξάκκαηα είλαη ην Internet Explorer, ηo Mozilla Firefox, ηo Netscape Navigator, ην Safari ηεο Apple,ην Chrome ηεο Google θαη ην Opera. 2.2 Βαζηθέο εληνιέο πνπ ρξεζηκνπνηνύληαη ζηελ HTML γηα ηε κνξθνπνίεζε θεηκέλνπ <B> Έληνλε γξαθή (bold). <U> Τπνγξακκηζκέλα (Underlined). <I> Πιάγηα γξαθή (Italics). <CENTER> Κεληξηθή ζηνίρηζε. <LEFT> Αξηζηεξή ζηνίρηζε. <RIGHT> Γεμηά ζηνίρηζε. Οη παξαπάλσ εληνιέο θιείλνπλ ρξεζηκνπνηώληαο ην ραξαθηήξα «/» ( </B>, </U>, </I>, </CENTER> </LEFT>, </RIGHT>). <P> Παξάγξαθνο. <BR> πλέρηζε γξαθήο ζηελ ακέζσο επόκελε γξακκή. <HR> Ζ εληνιή απηή ραξάζζεη κηα νξηδόληηα γξακκή ζηε ζειίδα (ρξεζηκνπνηείηαη, θπξίσο, όηαλ αιιάδνπκε ζεκαηηθή ελόηεηα). Οη ηξεηο παξαπάλσ εληνιέο δελ θιείλνπλ κε / ζην ηέινο (Wikibook,2007). 9

2.3 Τπεξζπλδέζεηο Hyperlinks Σν ραξαθηεξηζηηθό πνπ δηαθνξνπνηεί ηηο ηζηνζειίδεο από ην απιό θείκελν είλαη όηη απηέο παξέρνπλ ππεξζπλδέζεηο, δειαδή κέζα από κηα ηζηνζειίδα κπνξεί θαλείο λα παξαπεκθζεί ζε πιήζνο άιισλ (εμσηεξηθώλ ή εζσηεξηθώλ) ηζηνζειίδσλ. Σν ραξαθηεξηζηηθό απηό έρεη πξνσζήζεη ζεκαληηθά ηελ αλάπηπμε ηνπ δηαδηθηύνπ. Ο θώδηθαο γηα ηε δεκηνπξγία ππεξζύλδεζεο είλαη: <A HREF="www.tolinkmas.com">ΚΔΗΜΔΝΟ-ΚΟΤΜΠΗ</Α>. ηνλ παξαπάλσ θώδηθα ην πξώην κέξνο είλαη <A HREF=, όπνπ δειώλεηαη ε ύπαξμε ηζηνζειίδαο, κέζα ζηα εηζαγσγηθά θαη ε δηεύζπλζε πνπ ζα πάεη ν θπιινκεηξεηήο, εθόζνλ παηεζεί κε ην πνληίθη ε ζπγθεθξηκέλε ππεξζύλδεζε. Μεηά ην ραξαθηήξα «>», δειαδή ζην «ΚΔΗΜΔΝΟ- ΚΟΤΜΠΗ», γξάθνπκε ό,ηη ζέινπκε λα εκθαλίδεηαη ζηελ ηζηνζειίδα. Σέινο, ην «</A>» είλαη ε εληνιή θιεηζίκαηνο ηνπ ζπλδέζκνπ. Παξάδεηγκα: <A HREF="http://www.epp.teiher.gr">Κάληε «θιηθ» εδώ, γηα λα κπείηε ζηελ ηζηνζειίδα ηνπ ηκήκαηνο Δθαξκνζκέλεο Πιεξνθνξηθήο θαη Πνιπκέζωλ</A>. Σν θείκελν "Κάληε «θιηθ» εδώ, γηα λα κπείηε ζηελ ηζηνζειίδα ηνπ ηκήκαηνο Δθαξκνζκέλεο Πιεξνθνξηθήο θαη Πνιπκέζωλ " εκθαλίδεηαη ζηελ ηζηνζειίδα κπιε θαη ππνγξακκηζκέλν (ζπλήζσο) θαη όηαλ θάλνπκε «θιηθ» πάλσ ζε απηέο ηηο ιέμεηο ζα κεηαβνύκε ζηε δηεύζπλζε: "http://www.epp.teiher.gr".(wikibook,2007) 2.4 Δηθόλεο Γηα λα είλαη ε ηζηνζειίδα πην ειθπζηηθή ζα πξέπεη λα ππάξρνπλ θαη άιια ζηνηρεία, όπσο εηθόλεο, ώζηε λα γίλεηαη πεξηζζόηεξν θνκςή θαη εππαξνπζίαζηε. Ζ εληνιή γηα ηελ πξνζζήθε εηθόλαο είλαη: <IMG SRC="/εθεί πνπ είλαη ε εηθόλα /εηθόλα.gif">. Σν «εθεί πνπ είλαη ε εηθόλα» δειώλεη ηελ ηνπνζεζία ζηελ νπνία ζα αλαηξέμεη ν θπιινκεηξεηήο γηα λα αληιήζεη ηελ εηθόλα θαη λα ηελ εκθαλίζεη. Άξα ε εληνιή ζπληάζζεηαη έηζη: <IMG SRC="/images/image1.gif">. Γηα λα κε ρξεηαζηεί λα θάλνπκε αιιαγέο ζηε δηαδξνκή πνπ βξίζθνληαη νη εηθόλεο, κεηά ηελ εγθαηάζηαζε ησλ αξρείσλ ζηνλ εμππεξεηεηή, είλαη πξνηηκόηεξν λα γξάθεηαη από ηελ αξρή ε ζπληεηκεκέλε κνξθή ηεο δηεύζπλζεο θαη όρη ε αλαιπηηθή, δειαδή νιόθιεξε ε δηαδξνκή από ην ζθιεξό δίζθν. Ζ ζπληεηκεκέλε κνξθή καο εμαζθαιίδεη όηη 10

ε εηθόλα ζα ιεηηνπξγεί ηόζν ζηελ πεξηήγεζε ηνπηθά, όζν θαη ζην δηαδίθηπν. (Wikibook,2007). Οη εηθόλεο πνπ δεκνζηεύνληαη ζην δηαδίθηπν πξέπεη λα είλαη ζρεηηθά κηθξέο ζε κέγεζνο γηα λα θαηεβαίλνπλ πην γξήγνξα θαη πην εύθνια. Θα πξέπεη λα ηνληζηεί όηη ν επηζθέπηεο ηεο ηζηνζειίδαο δελ έρεη πάληα ηελ ππνκνλή ή ην ρξόλν λα πεξηκέλεη αξθεηή ώξα γηα λα θαηέβεη κηα εηθόλα. Θα πξέπεη, ινηπόλ, λα ρξεζηκνπνηνύκε ζπκπίεζε ζηηο εηθόλεο γηα λα κηθξύλεη ην κέγεζόο ηνπο. Οη πην ζπρλέο ζπκπηέζεηο πνπ ζπλαληάκε είλαη Jpeg ή Gif θαη νη εηθόλεο έρνπλ θαηάιεμε gif ή jpg (ελαιιαθηηθά: jpeg). Οη εηθόλεο απηέο, ζπλήζσο, θαηαιακβάλνπλ κηθξό κέγεζνο (αλάινγα, βέβαηα, κε ηελ πνηόηεηα πνπ ζα θαζνξίζνπκε θαηά ηε ζπκπίεζε). Καιύηεξα απνηειέζκαηα γηα θσηνγξαθίεο παξέρνπλ νη εηθόλεο jpg (ή jpeg), ελώ γηα γξαθηθά ή θείκελν πξνηηκόηεξν είλαη λα ρξεζηκνπνηνύκε gif. Έλα ραξαθηεξηζηηθό ησλ εηθόλσλ gif είλαη όηη νξηζκέλα εηθνλνζηνηρεία (pixels) κπνξνύλ λα είλαη δηαθαλή (transparent), έηζη ζπλήζσο απηά ηα pixel παίξλνπλ ην ρξώκα ηνπ θόληνπ ηεο ηζηνζειίδαο. Αλ επηρεηξνύζακε λα δώζνπκε ζε απηέο ηηο πεξηνρέο ην ρξώκα ηνπ θόληνπ ηεο ηζηνζειίδαο νη εηθόλεο ζα απνθηνύζαλ κεγαιύηεξν κέγεζνο. Αθόκε, άιιν έλα ραξαθηεξηζηηθό, πνπ έρεη ε ζπκπίεζε εηθόλσλ gif, είλαη ε δπλαηόηεηά ηνπο λα είλαη θηλνύκελεο, δειαδή λα ελαιιάζζνληαη. Έηζη, ζε έλα γξαθηθό κπνξνύκε λα βάινπκε δύν ή πεξηζζόηεξεο εηθόλεο, πνπ λα ελαιιάζζνληαη κε ην πέξαζκα ηνπ ρξόλνπ, όπσο γηα παξάδεηγκα, σο επηθεθαιίδα ηεο ηζηνζειίδαο λα ηνπνζεηήζνπκε έλα κεγάιν ρξσκαηηζηό «κήλπκα» πνπ λα αλαβνζβήλεη. ρεδόλ όια ηα επαγγεικαηηθά πξνγξάκκαηα επεμεξγαζίαο εηθόλαο επηηξέπνπλ ζπκπίεζε, αιιά θαη κεηαηξνπή εηθόλαο από έλα ηύπν αξρείνπ ζε άιιν (π.ρ. από bmp ζε gif). πκπεξαζκαηηθά, ηα γξαθηθά θαη νη εηθόλεο βειηηώλνπλ ηελ αηζζεηηθή κηαο ηζηνζειίδαο, ηελ θαζηζηνύλ, όκσο, πην αξγή ζην θαηέβαζκα (download). Ζ ρξήζε εηθόλσλ ζε ηζηνζειίδεο, ζπλεπώο, ζα πξέπεη λα γίλεηαη κε κέηξν. 2.5 H δνκή κηαο ηζηνζειίδαο: Μία ηζηνζειίδα ρσξίδεηαη ζε ηξεηο ελόηεηεο : Α) ηελ θεθαιίδα ηεο ηζηνζειίδαο(header) Β) ην ζώκα ηεο ηζηνζειίδαο(body) Γ) ην ππνζέιηδν ηεο ηζηνζειίδαο(footer). 11

Γηα λα δεκηνπξγήζνπκε κηα θεθαιίδα, αθήλνπκε ην δείθηε ηνπ πνληηθηνύ ζηελ παξάγξαθν πνπ ζέινπκε λα απνηειέζεη ηελ θεθαιίδα. Από ηε ιίζηα Change Style ηεο γξακκήο εξγαιείσλ κνξθνπνίεζεο, επηιέγνπκε Heading 1, γηα λα αιιάμεη ε κνξθνπνίεζε ηεο παξαγξάθνπ. <HEAD> Ζ εληνιή απηή ρξεζηκνπνηείηαη ζηελ αξρή ηεο ζειίδαο θαη πεξηθιείεη εληνιέο πνπ πεξηέρνπλ πιεξνθνξίεο πξνο ην θπιινκεηξεηή, αιιά δελ είλαη νξαηέο από ην ρξήζηε. Παξάδεηγκα: <HEAD> <meta http-equiv="refresh" content="7; url=index.html"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="ψπρνινγία, Μίκεζε, Βξέθε, " /> </HEAD> <TITLE> Ζ εληνιή απηή δειώλεη ζην θπιινκεηξεηή πνην ηίηιν επηζπκνύκε λα έρεη ε ηζηνζειίδα. Ο ηίηινο εκθαλίδεηαη ζηελ επάλσ ισξίδα ηνπ παξαζύξνπ ηνπ θπιινκεηξεηή, εθεί όπνπ εκθαλίδεηαη ν ηίηινο ηνπ πξνγξάκκαηνο πνπ ρξεζηκνπνηνύκε. Ζ εληνιή TITLE, είλαη απαξαίηεην λα βξίζθεηαη κέζα ζηελ εληνιή HEAD. Παξάδεηγκα: <HEAD> <title>δξγαζηήξην Ψπρνινγίαο</title></HEAD> <BODY> Ζ εληνιή απηή δειώλεη ζην θπιινκεηξεηή όηη ν παξαθάησ θώδηθαο θαη ηα δεδνκέλα πνπ γξάθνπκε αλήθνπλ ζην θπξίσο κέξνο ηεο ηζηνζειίδαο. Ζ εληνιή <BODY> αθνινπζεί κεηά ην «θιείζηκν» ηεο εληνιήο </HEAD> θαη ηεξκαηίδεη κε ηελ εληνιή </BODY>. 2.6 Πίλαθεο Γηα λα έρνπκε θαιύηεξε ηαμηλόκεζε δεδνκέλσλ ή παξνπζίαζή ηνπο κέζα ζε κηα ηζηνζειίδα, κπνξνύκε λα ηα απεηθνλίζνπκε κε ηε κνξθή πίλαθα. Δθηόο, όκσο, από ηελ απεηθόληζε δεδνκέλσλ, νη πίλαθεο κπνξνύλ λα ρξεζηκνπνηεζνύλ θαη γηα θνκςόηεξε εκθάληζε ηεο ηζηνζειίδαο. Παξαθάησ παξνπζηάδνληαη νη εληνιέο γηα ηε δεκηνπξγία πίλαθα. Ζ εληνιή γηα λα εκθαλίζεη ν θπιινκεηξεηήο θάπνηα δεδνκέλα ζε πίλαθα είλαη ε <TABLE> θαη ζην ζεκείν πνπ ηειεηώλεη ν πίλαθαο ε </TABLE>. Χζηόζν, ε εληνιή <TABLE> δελ πεξηέρεη πιεξνθνξίεο γηα πόζεο ζηήιεο θαη γξακκέο ζέινπκε λα έρεη ν 12

πίλαθαο. Οη εληνιέο γηα ηε δεκηνπξγία γξακκώλ είλαη <TR> θαη γηα ηε δεκηνπξγία ζηειώλ <TD>. Πξέπεη πάληα ζηνλ θώδηθα λα μεθηλάκε κε ηηο γξακκέο θαη κεηά κε ηηο ζηήιεο. Σν επόκελν παξάδεηγκα εμεγεί αλαιπηηθά πώο δεκηνπξγνύκε έλαλ πίλαθα ζε html: <TABLE> <TR> <TD>1</TD> <TD>2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> </TABLE> Απηό πνπ πξνθύπηεη από ηηο παξαπάλσ εληνιέο είλαη έλαο πίλαθαο 2 γξακκώλ θαη 2 ζηειώλ 1 2 3 4 Ο πίλαθαο ηνπ παξαδείγκαηνο εμεγεί ζην θπιινκεηξεηή πώο λα θαηαζθεπάζεη έλαλ πίλαθα κε ηελ πξώηε ζεηξά/γξακκή (<TR>) λα πεξηέρεη δύν ζηήιεο (<TD>): ζηελ πξώηε λα γξάθεη "1" θαη ζηε δεύηεξε "2". Ο πίλαθαο ζπλερίδεη κε δεύηεξε γξακκή (<TR>), ε νπνία, επίζεο, έρεη δύν ζηήιεο (<TD>) κε ηα δεδνκέλα "3" θαη "4" αληίζηνηρα. Παξαηεξνύκε, επίζεο όηη κόιηο ηειεηώζνπλ ηα δεδνκέλα ζε κηα ζηήιε, ηελ θιείλνπκε κε ηελ εληνιή </TD> γηα λα αξρίζνπκε θαηλνύξηα ζηήιε (<TD>). Οκνίσο, κόιηο ηειεηώζνπκε κε ηελ πξώηε γξακκή ζα πξέπεη λα ηελ θιείζνπκε κε ην αληίζηνηρν θιείζηκν ηεο <TR>, δειαδή ηελ: </TR>. 2.7 Δπηθεθαιίδεο <H> Ζ εληνιή απηή δειώλεη ηηο επηθεθαιίδεο ησλ δηάθνξσλ κεξώλ ηνπ θεηκέλνπ π.ρ. ηα θεθάιαηα. Μπνξεί λα δειώζεη κέρξη 6 θεθάιαηα-ππνθεθάιαηα μεθηλώληαο από ην Ζ1 έσο ην Ζ6. π.ρ.: <H1>Πξώην θεθάιαην</h1> 13

Σν θείκελν ηνπ πξώηνπ θεθαιαίνπ είλαη... Γηα λα δειώζνπκε όηη έλα κέξνο ηνπ θεηκέλνπ είλαη ππνκέξνο ελόο άιινπ, νξίδνπκε ηελ αξρή ηεο επηθεθαιίδαο επηπέδνπ +1 από ην πξνεγνύκελό ηνπ, π.ρ. γηα έλα ππνθεθάιαην ηνπ παξαπάλσ ζα γξάθακε: <H1>Πξώην θεθάιαην</h1> Σν θείκελν ηνπ πξώηνπ θεθαιαίνπ είλαη... <H2>Τπνθεθάιαην</H2> Κείκελν ππνθεθαιαίνπ... Αλ ζέινπκε κπνξνύκε λα νξίζνπκε ηελ αξρή ελόο θεθαιαίνπ νπνηνπδήπνηε επηπέδνπ. πλήζσο ζηνπο θπιινκεηξεηέο, νη ηίηινη ησλ θεθαιαίσλ εκθαλίδνληαη κε κεγαιύηεξε γξακκαηνζεηξά, αιιά απηή ε εληνιή δελ ζα πξέπεη λα ρξεζηκνπνηείηαη απιώο γηα ιόγνπο εκθάληζεο, αιιά κόλν γηα λα ζρεκαηηζηεί ε δνκή ηνπ θεηκέλνπ. 2.8 Λίζηεο Οξηζκέλεο θνξέο ρξεηάδεηαη λα εκθαλίζνπκε θάπνηα δεδνκέλα ηαμηλνκεκέλα ζε ιίζηεο, νη νπνίεο είλαη δπν εηδώλ: ε αηαμηλόκεηε θαη ε ηαμηλνκεκέλε ιίζηα. Αηαμηλόκεηε ιίζηα Γηα λα δεκηνπξγήζνπκε ιίζηα κε δεδνκέλα ρσξίο ηαμηλόκεζε, βάδνπκε αξρηθά ηελ εληνιή <UL>, κε ηελ νπνία δειώλνπκε όηη παξαθάησ ζα ππάξρνπλ δεδνκέλα αηαμηλόκεηεο ιίζηαο. Έπεηηα, γηα θάζε έλα δεδνκέλν πνπ ζέινπκε λα ηνπνζεηήζνπκε, βάδνπκε ηελ εληνιή <LI>. ην ηέινο ηνπ θάζε ζηνηρείνπ θιείλνπκε </LI> θαη πξνρσξάκε ζε λέν <LI> ζηνηρείν ηεο ιίζηαο. πλήζσο ην θάζε ζηνηρείν κηαο αηαμηλόκεηεο ιίζηαο εκθαλίδεηαη κεηά από θάπνην ζύκβνιν, όπσο ε θνπθίδα. Παξάδεηγκα: Οη αηηίεο πνπ νδήγεζαλ ζην θαηλόκελν είλαη: <UL> <LI>αηηία α</li> <LI>αηηία β</li> </UL> Απηό έρεη σο απνηέιεζκα: 14

Οη αηηίεο πνπ νδήγεζαλ ζην θαηλόκελν είλαη: αηηία α αηηία β Σαμηλνκεκέλε ιίζηα Ζ ηαμηλνκεκέλε ιίζηα είλαη παξόκνηα κε ηελ αηαμηλόκεηε. Αληί, όκσο, γηα ηελ αξρηθή εληνιή <UL> βάδνπκε <OL>. Σν θάζε ζηνηρείν κηαο ηαμηλνκεκέλεο ιίζηαο εκθαλίδεηαη κε αύμνπζα αξίζκεζε μεθηλώληαο από ην 1. Παξάδεηγκα: Οη αηηίεο πνπ νδήγεζαλ ζην θαηλόκελν είλαη: <OL> <LI>Αηηία α</li> <LI>Αηηία β</li> </OL> Απηό έρεη σο απνηέιεζκα: Οη αηηίεο πνπ νδήγεζαλ ζην θαηλόκελν είλαη: 1. Αηηία α 2. Αηηία β 3. 2.9 Υξώκα Φόληνπ Γηα λα θάλνπκε ηελ ηζηνζειίδα πεξηζζόηεξν εππαξνπζίαζηε, ρξεζηκνπνηνύκε, πνιιέο θνξέο, ρξώκα γηα θόλην. Ζ εληνιή είλαη: <body bgcolor="#######"> θαη δελ ηεξκαηίδεη. Οη ραξαθηήξεο ###### δειώλνπλ όηη πξέπεη λα αληηθαηαζηαζνύλ από θάπνηνπο άιινπο, νη νπνίνη αληηζηνηρνύλ ζε έλα ρξώκα, ελώ ν πξώηνο ραξαθηήξαο δηαηεξείηαη πάληα ζηαζεξόο. Σν ρξώκα ζηελ html πξνθύπηεη βάζεη ηνπ ηξόπνπ απεηθόληζεο ηνπ ρξώκαηνο ζε ζπζθεπέο όπσο ε νζόλε, δειαδή RGB (red-green-blue). ηελ νζόλε ηνπ ππνινγηζηή, (όπσο άιισζηε θαη ζηελ ηειεόξαζε, αιιά θαη ζηηο ππόινηπεο παξόκνηεο ζπζθεπέο), γίλεηαη ζύλζεζε ηξηώλ βαζηθώλ ρξσκάησλ ηνπ θόθθηλνπ, ηνπ πξάζηλνπ θαη ηνπ κπιε. Οη ραξαθηήξεο ###### αλαθέξνληαη ζε απηά ηα ρξώκαηα. Σα δύν πξώηα # αλαθέξνληαη ζην θόθθηλν, ηα επόκελα δύν # ζην πξάζηλν θαη ηέινο ηα ηειεπηαία δύν # ζην κπιε, (όπσο θαη ε ζεηξά RGB). Οη ηηκέο πνπ παίξλνπλ είλαη ζην δεθαεμαδηθό ζύζηεκα, δειαδή από 0 έσο F, (0 είλαη ε κηθξόηεξε ηηκή θαη F ε κεγαιύηεξε). Ζ ζεηξά είλαη 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. 15

Αλ ζέινπκε λα έρνπκε π.ρ. άζπξν ρξώκα, ζα πξέπεη λα βάινπκε ηηο ηηκέο "FFFFFF", (αθνύ ην άζπξν απνηειεί ηε ζύλζεζε όισλ ησλ ρξσκάησλ). Αληίζηξνθα, γηα ην καύξν ζα βάινπκε "000000". Γηαθνξεηηθά, ζηηο ηειεπηαίεο εθδόζεηο ηεο Html ππάξρεη ε δπλαηόηεηα λα βάινπκε ζηα αγγιηθά απεπζείαο ηα νλόκαηα ησλ ρξσκάησλ (π.ρ. green, red, θ.ι.π.), αληί γηα ηα νξίζκαηα ζην δεθαεμαδηθό ζύζηεκα, σζηόζν απηό δελ καο δίλεη ηε δπλαηόηεηα επηινγήο όισλ ησλ απνρξώζεσλ, ηνπ πξάζηλνπ, ηνπ θόθθηλνπ θαη ηνπ κπιε. Παξαθάησ παξαηίζεηαη ελδεηθηηθά έλαο πίλαθαο αληηζηνηρίαο ρξσκάησλ κε νξίζκαηα ζην δεθαεμαδηθό ζύζηεκα αξίζκεζεο. 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 16

993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF 2.10 Υξώκα Γξακκαηνζεηξάο Δθηόο από ην ρξώκα ηνπ θόληνπ, κπνξνύκε λα αιιάμνπκε θαη ηα ρξώκαηα ηεο γξακκαηνζεηξάο πξνθεηκέλνπ λα δεκηνπξγήζνπκε θνκςόηεξεο ηζηνζειίδεο. Ζ εληνιή είλαη <font color="#######"> θαη θιείλεη κε </font>. Δδώ ηζρύνπλ αθξηβώο ό,ηη θαη παξαπάλσ γηα ην θόλην, όζνλ αθνξά ζην πώο νξίδνπκε ηα ρξώκαηα. 2.11 Δηθόλα γηα θόλην Αληί γηα ρξώκα, κπνξνύκε λα βάινπκε εηθόλα γηα θόλην. Ζ εληνιή είλαη: <body background= eikona.gif >. Ζ εληνιή απηή δελ ρξεηάδεηαη λα θιείζεη. 17

2.12 Πιαίζηα Δηζαγσγή πιαηζίσλ Σν ζεκείν-θιεηδί γηα ηε δεκηνπξγία ηζηνζειίδσλ πιαηζίσλ είλαη ε δεκηνπξγία κηαο ζειίδαο «ππνδνκήο», ε νπνία δελ ζα πεξηέρεη πιεξνθνξίεο εκθάληζεο. ηε ζειίδα απηή ζα νξίζνπκε πώο ν πεξηεγεηήο ζα εκθαλίζεη ηα πιαίζηα, πνύ αθξηβώο ζα εκθαληζηνύλ απηά θαη πνηεο ζειίδεο ζα πεξηέρνπλ. Ζ πην ζπλεζηζκέλε θαηαζθεπή κε πιαίζηα πεξηιακβάλεη ην δηαρσξηζκό ηεο νζόλεο ζε δύν πιαίζηα. Έλα πιαίζην κε ην κελνύ - πεξηερόκελα ηνπ δηθηπαθό ηόπνπ, (ην νπνίν είλαη ζπλήζσο αξηζηεξά) θαη έλα άιιν πιαίζην, όπνπ εκθαλίδνληαη νη επηκέξνπο ηζηνζειίδεο, (ζπλήζσο είλαη ην δεμηό πιαίζην θαη θαηαιακβάλεη ην κεγαιύηεξν κέξνο ηεο νζόλεο). Η ζειίδα ππνδνκήο ή αξρηθή ζειίδα Πξνθεηκέλνπ λα εκθαληζηνύλ ηα πιαίζηα ζα πξέπεη λα νξίζνπκε ηε ζειίδα ππνδνκήο σο θεληξηθή ζειίδα (π.ρ. index.html). Σε ζειίδα απηή ζα πξέπεη λα ηε δηαβάζεη ν θπιινκεηξεηήο γηα λα εκθαλίδεη ηα πεξηερόκελα. Παξαθάησ ζα παξνπζηάζνπκε ηελ θαηαζθεπή ηεο ηζηνζειίδαο απηήο κε έλα παξάδεηγκα: <HTML> <TITLE>Ο δηθηπαθόο ηόπνο κνπ</title> <FRAMESET COLS="180,*"> <FRAME SRC="MENU.HTML" NAME="ARISTERO"> <FRAME SRC="MAIN.HTML" NAME="DEKSIO"> </FRAMESET> </HTML> ηνλ παξαπάλσ θώδηθα δίλνπκε ζην πξόγξακκα ηελ εληνιή λα θαηαζθεπάζεη δύν πιαίζηα ζε ζηήιεο - ζεηξέο (<FRAMESET COLS...). Αλ βάδακε ROWS (γξακκέο) αληί γηα "COLS" ζα θηηάρλακε νξηδόληηα πιαίζηα (θπζηθά κπνξνύκε λα θηηάμνπκε ηαπηόρξνλα θαη νξηδόληηα θαη θάζεηα πιαίζηα). ηελ ίδηα εληνιή γξάθνπκε κεηά ην ζύκβνιν «=» ηα εμήο: (180,*). Απηό ζεκαίλεη όηη ην πξώην πιαίζην ζα έρεη πιάηνο 180 pixels θαη ην * ππνδειώλεη όηη ην ππόινηπν ηεο νζόλεο ζα απνηειεί ην άιιν πιαίζην. Θα κπνξνύζακε λα βάινπκε θαη πνζνζηά επί ηνηο εθαηό (π.ρ. 20%, 80%), δειαδή ην πξώην πιαίζην 20% θαη ην ππόινηπν 80% ζην δεύηεξν, (ην άζξνηζκα πξέπεη λα ζπγθεληξώλεη ην 100%). Ζ ζεηξά κε ηελ νπνία θαηαζθεπάδνληαη ηα πιαίζηα είλαη από αξηζηεξά πξνο δεμηά θαη από πάλσ 18

πξνο ηα θάησ, (δειαδή ηα 180 pixels ζην παξάδεηγκα αλαθέξνληαη ζην αξηζηεξό πιαίζην θαη ην ππόινηπν ηκήκα ζην δεμηό). ηηο επόκελεο ζεηξέο ( <FRAME SRC="MENU.HTML" NAME="ARISTERO"> θαη <FRAME SRC="MAIN.HTML" NAME="DEKSIO">) δειώλνπκε ηα νλόκαηα ησλ πιαηζίσλ κε ηε ζεηξά πνπ ηα έρνπκε θαηαζθεπάζεη από ηελ πξνεγνύκελε εληνιή θαη ηηο ζειίδεο πνπ ζα δηαβάδεη ν θπιινκεηξεηήο γηα θάζε πιαίζην από απηά. Έηζη ην πξώην πιαίζην κε κέγεζνο 180 pixel ην νλνκάδνπκε ARISTERO θαη ην δεύηεξν DEKSIO. Σα νλόκαηα πνπ ζα δηαβάζεη ην πξόγξακκα είλαη menu.html γηα ην αξηζηεξό πιαίζην θαη main.html γηα ην δεμηό. ην ηέινο πξηλ θιείζνπκε ηελ εληνιή html θιείλνπκε ηελ FRAMESET. Παξαηήξεζε: Ζ κόλε εληνιή πνπ ζα πξέπεη, (όρη βέβαηα απαξαίηεηα), λα πεξηέρεη κηα ζειίδα ππνδνκήο, εθηόο από απηέο γηα ην θαζνξηζκό ησλ πιαηζίσλ, είλαη ε TITLE. Δμάιινπ, όιεο νη άιιεο εληνιέο δελ έρνπλ λόεκα, γηαηί απηό πνπ ν ρξήζηεο ζα δεη είλαη ηα πεξηερόκελα ησλ πιαηζίσλ. Αλ ζέινπκε, επίζεο, λα κελ εκθαλίδνληαη δηαρσξηζηηθέο αλάγιπθεο γξακκέο αλάκεζα ζηα πιαίζηα, κπνξνύκε ζηελ εληνιή <FRAMESET COLS="180,*"> λα πξνζζέζνπκε ην ηκήκα: BORDER="0", (δειαδή ζα γίλεη: <FRAMESET COLS="180,*" BORDER="0">). Οη ππόινηπεο ζειίδεο ηηο ππόινηπεο ζειίδεο, όηαλ ηνπνζεηνύκε έλα ζύλδεζκν (link), γξάθνπκε θαη ην πιαίζην πξννξηζκνύ. Έηζη, ζηελ εληνιή <A HREF="kati.html">keimeno</A> ζα πξνζηεζεί ην θνκκάηη TARGET="onoma_plaisiou". Ζ εληνιή ζα δηακνξθσζεί δειαδή έηζη: <A HREF="kati.html" TARGET="onoma_plaisiou">keimeno</A >. ην πξνεγνύκελν παξάδεηγκα ε ζειίδα menu.html κπνξεί λα πεξηέρεη ηηο ηζηνζειίδεο ηνπ δηθηπαθνύ ηόπνπ. Αλ γηα παξάδεηγκα κηα ηζηνζειίδα πεξηέρεη θσηνγξαθίεο, ζα πξέπεη λα ζπκπεξηιάβνπκε κεηαμύ άιισλ ζην αξρείν menu.html ηα εμήο: <A HREF="fotos.html" TARGET="DEKSIO">Γείηε ηηο θσηνγξαθίεο κνπ</a> -- Έηζη θάλνληαο «θιηθ» θάπνηνο ζην θείκελν "Γείηε ηηο θσηνγξαθίεο κνπ" ζην δεμηό πιαίζην ζα αλνίμεη ε ηζηνζειίδα "fotos.html". Με απηόλ ηνλ ηξόπν, κπνξνύκε λα έρνπκε ηα πεξηερόκελα ζην αξηζηεξό πιαίζην θαη ν ρξήζηεο θάλνληαο «θιηθ» ζηνπο ζπλδέζκνπο πνπ απηό πεξηέρεη, ζα κεηαθέξεηαη ζηελ αληίζηνηρε ζειίδα (ε νπνία ζα εκθαλίδεηαη ζην δεμηό πιαίζην). 19

2.13 Κείκελν Έλαο βαζηθόο θαλόλαο γηα ηε ρξήζε θεηκέλνπ ζε ηζηνζειίδεο είλαη ε απνθπγή γξαθήο κε θεθαιαία γξάκκαηα, γηαηί είλαη θνπξαζηηθά ζην δηάβαζκα. Απηό βέβαηα ηζρύεη ζηελ πεξίπησζε κεγάινπ θεηκέλνπ, κπνξνύκε, σζηόζν, λα ρξεζηκνπνηήζνπκε θεθαιαία, ζε κηθξέο ιέμεηο, όπνπ απηό είλαη απαξαίηεην. 2.14 Πίλαθαο όισλ ησλ εληνιώλ ηεο Γιώζζαο ήκαλζεο Τπεξ-θεηκέλνπ (HTML). ύκθσλα κε ην δηαδηθηπαθό ρώξν: www.stratari.gr νη θπξηόηεξεο εληνιέο ηεο γιώζζαο ζήκαλζεο ππεξ-θεηκέλνπ είλαη νη παξαθάησ. ΒΑΙΚΑ ΣΟΙΥΔΙΑ Σύπνο εγγξάθνπ <HTML></HTML> Οξίδεη ηελ αξρή θαη ην ηέινο Σίηινο <TITLE></TITLE> Δκθαλίδεηαη ζηε κπιε κπάξα ηνπ θπιινκεηξεηή. Πξέπεη λα βξίζθεηαη ζηελ επηθπιιίδα Δπηθπιιίδα <HEAD></HEAD> Δδώ κπαίλεη ν ηίηινο, πεξηγξαθή ηεο ζειίδαο, ηα styles θαη ε java Bαζηθόο Κνξκόο <BODY></BODY> Σν θύξην πιηθό ηεο ζειίδαο ΟΡΙΜΟ ΓΟΜΗ Δπηθεθαιίδα <H?></H?> Γέρεηαη 6 νξηζκνύο: H1 σο θαη H6 ηνίρηζε επηθεθαιίδαο Τπνδηαίξεζε θεηκέλνπ ηνίρηζε ππνδηαίξεζεο <H? ALIGN=LEFT CENTER RIGHT></H?> <DIV></DIV> <DIV ALIGN=LEFT RIGHT CENTER JUSTIFY></DIV> Καζνξηζκέλν πεξηερόκελν <SPAN></SPAN> Παξάζεζε ζεκείσζεο <BLOCKQUOTE></BLOCKQUOTE> πλήζσο κε εζνρή παξαγξάθνπ εκείσζε <Q></Q> Γηα ζύληνκεο ζεκεηώζεηο Έκθαζε <EM></EM> πλήζωο εκθαλίδεη πιάγηα (italics) γξάκκαηα Έληνλε έκθαζε <STRONG></STRONG> πλήζσο εκθαλίδεη έληνλα (bold) γξάκκαηα Κώδηθαο <CODE></CODE> Γηα παξάζεζε γξακκώλ θώδηθα 20

Γείγκα <SAMP></SAMP> Δίζνδνο πιεθηξνιόγην από <KBD></KBD> Μεηαβιεηή <VAR></VAR> Οξηζκόο <DFN></DFN> Γε ρξεζηκνπνηείηαη επξέσο Γηεύζπλζε ζπγγξαθέα <ADDRESS></ADDRESS> Μεγάια γξάκκαηα <BIG></BIG> Μηθξά γξάκκαηα <SMALL></SMALL> Παξεκβνιή <INS></INS> εκεηώλεη ηηο πξνζζήθεο ζε λέα έθδνζε Ώξα αιιαγήο <INS DATETIME=":::"></INS> ρόιηα <INS CITE="URL"></INS> Γηαγξαθή <DEL></DEL> εκεηώλεη ηηο δηαγξαθέο ζε λέα έθδνζε Ώξα δηαγξαθήο <DEL DATETIME=":::"></DEL> ρόιηα δηαγξαθήο <DEL CITE="URL"></DEL> Αξθηηθόιεμν <ACRONYM></ACRONYM> ύληκεζε <ABBR></ABBR> ΜΟΡΦΟΠΟΙΗΗ ΚΔΙΜΔΝΟΤ Έληνλε γξαθή <B></B> Γνθηκή Πιάγηα γξαθή <I></I> Γνθηκή Τπνγξάκκηζε <U></U> Γνθηκή Γηαγξαθή <STRIKE></STRIKE> Γνθηκή Γηαγξαθή <S></S> Γνθηκή Δθζέηεο <SUP></SUP> Βάζε Γνθηκή Γείθηεο <SUB></SUB> Βάζε Γνθηκή Γξαθνκεραλή <TT></TT> Γνθηκή Πξνκνξθνπνηεκέλν <PRE></PRE> Δκθαλίδεη ηα θελά δηαζηήκαηα όπσο έρνπλ γξαθεί Πιάηνο πξνκνξθνπνηεκέλνπ <PRE WIDTH=?></PRE> ε ραξαθηήξεο 21

ηνίρηζε ζην θέληξν <CENTER></CENTER> ηε ζέζε ηνπ ρξεζηκνπνηείηαη πιένλ ην <DIV ALIGN="CENTER"></DIV> Αλαβνζβήζηκν <BLINK></BLINK> Γνθηκή Μέγεζνο γξακκάησλ <FONT SIZE=?></FONT> Με ηηκέο από 1 σο θαη 7 Αιιαγή γξακκάησλ κεγέζνπο <FONT SIZE="+ -?"></FONT> Υξώκα γξακκάησλ <FONT COLOR="#$$$$$$"></FONT> Σν ρξώκα νξίδεηαη κε ηξεηο (δηςήθηνπο) δεθαεμαδηθνύο αξηζκνύο Δπηινγή γξακκαηνζεηξάο <FONT FACE="***"></FONT> Δπηινγή κεγέζνπο <FONT POINT-SIZE=?></FONT> Βάξνο γξακκάησλ <FONT WEIGHT=?></FONT> Βαζηθό γξακκάησλ κέγεζνο <BASEFONT SIZE=?> Με ηηκέο από 1 σο θαη 7 θαη πξνεπηινγή ην 3. Ηζρύεη γηα όιε ηε ζειίδα. Κηλνύκελν θείκελν <MARQUEE></MARQUEE> ΣΟΠΟΘΔΣΗΗ ΣΟΙΥΔΙΧΝ ΣΗ ΔΛΙΓΑ Πνιιέο ζηήιεο <MULTICOL COLS=?></MULTICOL> Απόζηαζε ζηειώλ (δηάθελν) <MULTICOL GUTTER=?></MULTICOL> Πιάηνο ζηήιεο <MULTICOL WIDTH=?></MULTICOL> Γηαρσξηζηήο <SPACER> Δίδνο δηαρσξηζηή Μέγεζνο δηαρσξηζηή Γηαζηάζεηο δηαρσξηζηή ηνίρηζε δηαρσξηζηή Δπίπεδν (layer) Όλνκα επηπέδνπ Θέζε επηπέδνπ ρεηηθή ζέζε επηπέδνπ <SPACER TYPE=HORIZONTAL VERTICAL BLOCK> <SPACER SIZE=?> <SPACER WIDTH=? HEIGHT=?> <SPACER ALIGN=LEFT RIGHT CENTER> <LAYER></LAYER> <LAYER ID="***"></LAYER> <LAYER LEFT=? TOP=?></LAYER> <LAYER PAGEX=? PAGEY=?></LAYER> Αξρείν επηπέδνπ πξνέιεπζεο <LAYER SRC="***"></LAYER> εηξά επηθάιπςεο <LAYER Z-INDEX=?></LAYER> 22

Θέζε επηθάιπςεο Γηαζηάζεηο επηπέδνπ Γηαδξνκή επηπέδνπ <LAYER ABOVE="***" BELOW="***"></LAYER> <LAYER HEIGHT=? WIDTH=?></LAYER> <LAYER CLIP=,,,></LAYER> Δκθάληζε ή κε ηνπ επηπέδνπ <LAYER VISIBILITY=SHOW HIDDEN INHERIT></LAYER> Φόλην επηπέδνπ Υξώκα επηπέδνπ <LAYER BACKGROUND="$$$$$$"></LAYER> <LAYER BGCOLOR="$$$$$$"></LAYER> Δζσηεξηθό επίπεδν <ILAYER></ILAYER> Γέρεηαη ηηο ίδηεο παξακέηξνπο κε ην LAYER Δλαιιαθηηθό πεξηερόκελν <NOLAYER></NOLAYER> ΤΝΓΔΜΟΙ, ΓΡΑΦΙΚΑ ΚΑΙ ΗΥΟ ύλδεζκνοπαξαπνκπή δηεύζπλζε ζε <A HREF="URL"></A> Παξαπνκπή ζε ζεκείν εγγξάθνπ <A HREF="URL#***"></A> Αλ πξόθεηηαη γηα άιιν έγγξαθν <A HREF="#***"></A> Αλ πξόθεηηαη γηα ην ηξέρνλ έγγξαθν Παξάζπξν όπνπ ζα αλνίμεη ν ζύλδεζκνο <A HREF="URL" TARGET="***"></A> Δλέξγεηα κε ην θιηθ <A HREF="URL" ONCLICK="***"></A> Javascript Δλέξγεηα όηαλ πεξάζεη ην πνληίθη από πάλσ <A HREF="URL" ONMOUSEOVER="***"></A> Javascript Δλέξγεηα όηαλ θύγεη ην πνληίθη από πάλσ <A HREF="URL" ONMOUSEOUT="***"></A> Javascript ύλδεζκνο απνζηνιή email γηα <A HREF="mailto:@"></A> Καζνξηζκόο ηίηινπ γηα email <A HREF="mailto:@?SUBJECT=***"></A> Πξέπεη λα κπεη? πξηλ από ηε ιέμε SUBJECT Οξηζκόο ζέζεο γηα ζύλδεζκν <A NAME="***"></A> Γηα ρξήζε κε ηελ Παξαπνκπή (βιέπε παξαπάλσ) Δκθάληζε εηθόλαο ηνίρηζε εηθόλαο <IMG SRC="URL"> <IMG SRC="URL" ALIGN=TOP BOTTOM MIDDLE LEFT RIGHT> ηνίρηζε εηθόλαο ζε ζρέζε κε ην θείκελν <IMG SRC="URL" ALIGN=TEXTTOP ABSMIDDLE BASELINE ABSBOTTOM> Δλαιιαθηηθό <IMG SRC="URL" ALT="***"> θείκελν αληί ηεο Αλ ε εηθόλα δελ εκθαληζηεί 23

εηθόλαο Γηαζηάζεηο εηθόλαο <IMG SRC="URL" WIDTH=? HEIGHT=?> <IMG SRC="URL" WIDTH=% HEIGHT=%> ε pixels Χο πνζνζηό ησλ δηαζηάζεσλ ηεο ζειίδαο Πιαίζην εηθόλαο <IMG SRC="URL" BORDER=?> ε pixels Κελόο ρώξνο γύξσ από ηελ εηθόλα <IMG SRC="URL" HSPACE=? VSPACE=?> ε pixels Δλαιιαθηηθή εηθόλα ρακειήο αλάιπζεο <IMG SRC="URL" LOWSRC="URL"> πλήζσο αζπξόκαπξε. Δκθαλίδεηαη πξώηε θαη επηθαιύπηεηαη από ηελ θαλνληθή. Υάξηεο εηθόλαο κε ζπλδέζκνπο <IMG SRC="URL" ISMAP> Imagemap Απαηηεί script <IMG SRC="URL" USEMAP="URL"> Video Clip <IMG DYNSRC="***" START="***" LOOP=?> Ήρνο <BGSOUND SRC="***" LOOP=? INFINITE> Υάξηεο ρξήζηε εηθόλαο <MAP NAME="***"></MAP> Πεξηγξαθή ράξηε Σκήκα ράξηε <AREA SHAPE="DEFAULT RECT CIRCLE POLY" COORDS=",,," HREF="URL" NOHREF> Αλαλέσζε πεξηερνκέλνπ κεηαπήδεζε άιιε ζειίδα ή ζε <META HTTP-EQUIV="Refresh" CONTENT="ρξόλνο ζε δεπηεξόιεπηα; URL= νλνκαζία ζειίδαο"> Μπαίλεη κεηαμύ <head> θαη </head>. Π.ρ. <meta http-equiv="refresh" content="10;url=index.html"> Δλζσκαησκέλν αληηθείκελν <EMBED SRC="URL"> Π.ρ. θάπνην flash animation Μέγεζνο αληηθεηκέλνπ <EMBED SRC="URL" WIDTH=? HEIGHT=?> Αληηθείκελν <OBJECT></OBJECT> Παξάκεηξνη <PARAM> ΓΙΑΥΧΡΙΣΔ Παξάγξαθνο <P></P> Γελ είλαη απαξαίηεην ην θιείζηκν ηνπ tag ηνίρηζε παξαγξάθνπ <P ALIGN=LEFT CENTER RIGHT></P> Πιήξεο παξαγξάθνπ ζηνίρηζε <P ALIGN=JUSTIFY></P> Αιιαγή ζεηξάο <BR> Υσξίο αλαδίπισζε Οξηδόληηα γξακκή <BR CLEAR=LEFT RIGHT ALL> <HR> 24

ηνίρηζε γξακκήο <HR ALIGN=LEFT RIGHT CENTER> Πάρνο γξακκήο <HR SIZE=?> ε pixels Πιάηνο γξακκήο <HR WIDTH=?> ε pixels Πιάηνο γξακκήο <HR WIDTH="%"> Χο πνζνζηό ηνπ πιάηνπο ζειίδαο πκπαγήο γξακκή <HR NOSHADE> Γίρσο ηελ ηξηζδηάζηαηε όςε Υσξίο αιιαγέο ζεηξάο Αιιαγή γξακκήο <NOBR></NOBR> <WBR> ΛΙΣΔ Απιή ιίζηα <UL><LI></UL> To <LI> κπαίλεη κπξνζηά από θάζε ζεηξά πκπαγήο ιίζηα <UL COMPACT></UL> Σύπνο θνπθίδαο <UL TYPE=DISC CIRCLE SQUARE> Γηα όιε ηε ιίζηα Σύπνο θνπθίδαο <LI TYPE=DISC CIRCLE SQUARE> Γηα ηε ζεηξά θαη ηηο επόκελεο Αξηζκεκέλε ιίζηα <OL><LI></OL> To <LI> κπαίλεη κπξνζηά από θάζε ζεηξά πκπαγήο ιίζηα αξηζκεκέλε <OL COMPACT></OL> Μνξθή αξίζκεζεο <OL TYPE=A a I i 1> Γηα όιε ηε ιίζηα Μνξθή αξίζκεζεο <LI TYPE=A a I i 1> Γηα ηε ζεηξά θαη ηηο επόκελεο Αξηζκόο αξίζκεζεο έλαξμεο <OL START=?> Γηα όιε ηε ιίζηα Αξηζκόο αξίζκεζεο έλαξμεο <LI VALUE=?> Γηα ηε ζεηξά θαη ηηο επόκελεο Λίζηα επεμεγήζεσλ <DL><DT><DD></DL> (<DT>= όξνο, <DD>= επεμήγεζε) πκπαγήο επεμεγήζεσλ ιίζηα <DL COMPACT></DL> Λίζηα επηινγώλ <MENU><LI></MENU> Πξηλ από θάζε ζεηξά πκπαγήο επηινγώλ ιίζηα <MENU COMPACT></MENU> Λίζηα πεξηερνκέλσλ <DIR><LI></DIR> Πξηλ από θάζε ζεηξά πκπαγήο πεξηερνκέλσλ ιίζηα <DIR COMPACT></DIR> ΦΟΝΣΟ ΚΑΙ ΥΡΧΜΑΣΑ 25

Δπαλαιακβαλόκελε εηθόλα θόληνπ <BODY BACKGROUND="URL"> Τδαηνγξάθεκα <BODY BGPROPERTIES="FIXED"> Υξώκα θόληνπ <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue) Βαζηθό ρξώκα θεηκέλνπ Υξώκα ζπλδέζκσλ <BODY TEXT="#$$$$$$"> <BODY LINK="#$$$$$$"> Υξώκα ζπλδέζκσλ πνπ έρνπκε επηζθεθηεί <BODY VLINK="#$$$$$$"> Δλεξγόο ζύλδεζκνο <BODY ALINK="#$$$$$$"> ΔΙΓΙΚΟΙ ΥΑΡΑΚΣΗΡΔ εηδηθνί ραξαθηήξεο &#?; όπνπ? είλαη o θσδηθόο ISO 8859-1 < < > > & & " " Registered TM Registered TM Copyright Copyright Κελό δηάζηεκα (δελ επηηξέπεη αλαδίπισζε) ΦΟΡΜΔ Οξηζκόο θόξκαο <FORM METHOD=GET POST></FORM> ACTION="URL" 'Αλέβαζκα' αξρείνπ <FORM ENCTYPE="multipart/form-data"></FORM> Πεδίν δεδνκέλσλ εηζαγσγήο <INPUT TYPE="TEXT PASSWORD CHECKBOX RADIO FILE BUTTON IMAGE HIDDEN SUBMIT RESET"> Όλνκα πεδίνπ <INPUT NAME="***"> Σηκή πεδίνπ <INPUT VALUE="***"> Σζεθάξηζκα <INPUT CHECKED> Γηα ηεηξάγσλα θαη θπθιηθά πεδία ηζεθαξίζκαηνο Μέγεζνο πεδίνπ <INPUT SIZE=?> ε ραξαθηήξεο 26

Μέγηζην κέγεζνο <INPUT MAXLENGTH=?> ε ραξαθηήξεο Κνπκπί Όλνκα θνπκπηνύ Σύπνο θνπκπηνύ Πξνεπηιεγκέλε ηηκή Δηηθέηα Δηηθέηα επηινγήο Λίζηα επηινγήο Όλνκα ιίζηαο Αξηζκόο επηινγώλ <BUTTON></BUTTON> <BUTTON NAME="***"></BUTTON> <BUTTON TYPE="SUBMIT RESET BUTTON"></BUTTON> <BUTTON VALUE="***"></BUTTON> <LABEL></LABEL> <LABEL FOR="***"></LABEL> <SELECT></SELECT> <SELECT NAME="***"></SELECT> <SELECT SIZE=?></SELECT> Πνιιαπιή επηινγή <SELECT MULTIPLE> Γηα πεξηζζόηεξεο από κία επηινγέο Δπηινγή <OPTION> Γηαζέζηκα ζηνηρεία πξνο επηινγή Πξνεπηινγή Σηκή επηινγήο Οκαδνπνίεζε επηινγώλ Μέγεζνο πεδίνπ εηζαγσγήο θεηκέλνπ Ολνκαζία πεδίνπ εηζαγσγήο θεηκέλνπ Αλαδίπισζε θεηκέλνπ Μέιε νκάδαο Τπόκλεκα ηνίρηζε ππνκλήκαηνο <OPTION SELECTED> <OPTION VALUE="***"> <OPTGROUP LABEL="***"></OPTGROUP> <TEXTAREA ROWS=? COLS=?></TEXTAREA> <TEXTAREA NAME="***"></TEXTAREA> <TEXTAREA WRAP=OFF HARD SOFT></TEXTAREA> <FIELDSET></FIELDSET> <LEGEND></LEGEND> <LEGEND ALIGN="TOP BOTTOM LEFT RIGHT"></LEGEND> ΠΙΝΑΚΔ Οξηζκόο πίλαθα ηνίρηζε πίλαθα <TABLE></TABLE> <TABLE ALIGN=LEFT RIGHT CENTER> Πεξίγξακκα πίλαθα <TABLE BORDER></TABLE> Τπαξθηό ή κε Πεξίγξακκα πίλαθα <TABLE BORDER=?></TABLE> Οξηζκόο πάρνπο Απόζηαζε θειηώλ (δηάθελν) <TABLE CELLSPACING=?> 27

Δζσηεξηθό θειηώλ πεξηζώξην <TABLE CELLPADDING=?> Δπηζπκεηό πιάηνο <TABLE WIDTH=?> ε pixels Πνζνζηό πιάηνπο <TABLE WIDTH=%> Πνζνζηό επί ηνπ πιάηνπο ηεο ζειίδαο Υξώκα πίλαθα <TABLE BGCOLOR="$$$$$$"></TABLE> Πιαίζην πίλαθα <TABLE VSIDES BOX BORDER></TABLE> FRAME=VOID ABOVE BELOW HSIDES LHS RHS Υάξαθαο πίλαθα Υξώκα πεξηγξάκκαηνο θνύξν πεξίγξακκα <TABLE RULES=NONE GROUPS ROWS COLS ALL></TABLE> <TABLE BORDERCOLOR="$$$$$$"></TABLE> <TABLE BORDERCOLORDARK="$$$$$$"></TABLE> Αλνηρηόρξσκν πεξίγξακκα <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE> εηξά πίλαθα ηνίρηζε ζεηξάο πίλαθα <TR></TR> <TR ALIGN=LEFT RIGHT CENTER MIDDLE BOTTOM> Κειί πίλαθα <TD></TD> Πξέπεη λα εκπεξηέρεηαη ζε νξηζκό ζεηξάο ηνίρηζε θειηνύ <TD ALIGN=LEFT RIGHT CENTER VALIGN=TOP MIDDLE BOTTOM> Κείκελν θειηνύ ρσξίο αλαδίπισζε <TD NOWRAP> Δπέθηαζε ζε ζηήιεο Δπέθηαζε ζε ζεηξέο <TD COLSPAN=?> <TD ROWSPAN=?> Δπηζπκεηό θειηνύ πιάηνο <TD WIDTH=?> ε pixels Πιάηνο θειηνύ ζε πνζνζηό <TD WIDTH="%"> Δπί ηνπ πιάηνπο ηνπ πίλαθα Υξώκα θειηνύ <TD BGCOLOR="#$$$$$$"> Δπηθεθαιίδα ζηήιεο <TH></TH> Έληνλα θαη κε ζηνίρηζε ζην θέληξν ηνίρηζε επηθεθαιίδαο <TH ALIGN=LEFT RIGHT CENTER MIDDLE BOTTOM> Δπηθεθαιίδα αλαδίπισζε δίρσο <TH NOWRAP> Δπέθηαζε επηθεθαιίδαο ζε ζηήιεο <TH COLSPAN=?> Δπέθηαζε επηθεθαιίδαο ζε ζεηξέο <TH ROWSPAN=?> 28

Δπηζπκεηό επηθεθαιίδαο πιάηνο <TH WIDTH=?> ε pixels Πιάηνο ζε πνζνζηό <TH WIDTH="%"> Δπί ηνπ πιάηνπο ηνπ πίλαθα Υξώκα επηθεθαιίδαο θειηνύ <TH BGCOLOR="#$$$$$$"> ώκα πίλαθα <TBODY> Τπνθπιίδα πίλαθα <TFOOT></TFOOT> Πξνεγείηαη ηνπ THEAD> Δπηθπιιίδα πίλαθα Δπεμήγεζε πίλαθα ηνίρηζε επεμήγεζεο ηήιε Δπέθηαζε ζηειώλ Πιάηνο ζηήιεο <THEAD></THEAD> <CAPTION></CAPTION> <CAPTION ALIGN=TOP BOTTOM LEFT RIGHT> <COL></COL> <COL SPAN=?></COL> <COL WIDTH=?></COL> Πιάηνο ζηήιεο ζε πνζνζηό <COL WIDTH="%"></COL> Οκάδα ζηειώλ <COLGROUP></COLGROUP> Δπέθηαζε ζηειώλ νκάδαο <COLGROUP SPAN=?></COLGROUP> Πιάηνο νκάδαο <COLGROUP WIDTH=?></COLGROUP> Πιάηνο νκάδαο ζε πνζνζηό <COLGROUP WIDTH="%"></COLGROUP> ΠΛΑΙΙΑ (Frames) ειίδα κε πιαίζηα <FRAMESET></FRAMESET> Αληί ηνπ <BODY> Ύςνο ζεηξώλ <FRAMESET ROWS=,,,></FRAMESET> ε pixels ή %) Ύςνο ζεηξώλ <FRAMESET ROWS=*></FRAMESET> * = ρεηηθό κέγεζνο. πλήζσο όζν πεξηζζεύεη. Πιάηνο ζηειώλ <FRAMESET COLS=,,,></FRAMESET> (pixels or %) Πιάηνο ζηειώλ <FRAMESET COLS=*></FRAMESET> * = ρεηηθό κέγεζνο. πλήζσο όζν πεξηζζεύεη. Πεξίγξακκα <FRAMESET FRAMEBORDER="yes no"></frameset> Πιάηνο πεξηγξάκκαηνο <FRAMESET BORDER=?></FRAMESET> Υξώκα πεξηγξάκκαηνο <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> 29

Απόζηαζε πιαηζίσλ (δηάθελν) <FRAMESET FRAMESPACING=?></FRAMESET> Οξηζκόο πιαηζίνπ <FRAME> Πεξηερόκελα κεκνλσκέλνπ πιαηζίνπ Έγγξαθν πνπ ζα εκθαληζηεί <FRAME SRC="URL"> Όλνκα πιαηζίνπ <FRAME NAME="***" _blank _self _parent _top> Πιάηνο πεξηζσξίνπ <FRAME MARGINWIDTH=?> Αξηζηεξά θαη δεμηά Ύςνο πεξηζσξίνπ <FRAME MARGINHEIGHT=?> Πάλσ θαη θάησ Δκθάληζε θύιηζεο κπάξαο <FRAME SCROLLING="YES NO AUTO"> ηαζεξό κέγεζνο <FRAME NORESIZE> Πεξίγξακκα πιαηζίνπ Υξώκα πεξηγξάκκαηνο <FRAME FRAMEBORDER="yes no"> <FRAME BORDERCOLOR="#$$$$$$"> Πεξηερόκελν πιαηζίσλ εθηόο <NOFRAMES></NOFRAMES> Γηα θπιινκεηξεηέο πνπ δελ ππνζηεξίδνπλ πιαίζηα Δζσηεξηθό πιαίζην <IFRAME></IFRAME> Όκνηεο παξάκεηξνη κε ην FRAME Γηαζηάζεηο Γηαζηάζεηο <IFRAME WIDTH=? HEIGHT=?></IFRAME> <IFRAME WIDTH="%" HEIGHT="%"></IFRAME> ΠΡΟΓΡΑΜΜΑΣΙΜΟ ΚΑΙ JAVA Πξόγξακκα Δίδνο πξνγξάκκαηνο Γιώζζα πξνγξάκκαηνο <SCRIPT></SCRIPT> <SCRIPT SRC="URL"></SCRIPT> <SCRIPT TYPE="***"></SCRIPT> <SCRIPT LANGUAGE="***"></SCRIPT> Άιιν πεξηερόκελν <NOSCRIPT></NOSCRIPT> Αλ δελ ππνζηεξίδνληαη scripts Applet Όλνκα Applet Παξάκεηξνη Applet Θέζε Applet <APPLET></APPLET> <APPLET CODE="***"> <APPLET PARAM NAME="***"> <APPLET CODEBASE="URL"> Σαπηόηεηα Applet <APPLET NAME="***"> Γηα αλαθνξά-παξαπνκπέο Δλαιιαθηηθό θείκελν <APPLET ALT="***"> Αλ δελ ππνζηεξίδεηαη java ηνίρηζε Applet <APPLET ALIGN="LEFT RIGHT CENTER"> 30

Μέγεζνο Applet <APPLET WIDTH=? HEIGHT=?> ε pixels Απόζηαζε Applet από άιια ζηνηρεία <APPLET HSPACE=? VSPACE=?> ε pixels Server Script <SERVER></SERVER> ΓΙΑΦΟΡΑ ρόιην <!-- *** --> Γελ εκθαλίδεηαη. Πξόινγνο <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Καηάινγνο αλαδήηεζεο <ISINDEX> Απνζηνιή αλαδήηεζεο <A HREF="URL?***"></a> Με θαλνληθό? URL ηνπ αξρείνπ <BASE HREF="URL"> Πξέπεη λα βξίζθεηαη ζηελ επηθεθαιίδα Παξάζπξν όπνπ ζα θαηεπζύλνληαη νη ζύλδεζκνη <BASE TARGET="***"> Πξέπεη λα βξίζθεηαη ζηελ επηθεθαιίδα ρεηηθή ζειίδα <LINK REV="***" REL="***" HREF="URL"> Πξέπεη λα βξίζθεηαη ζηελ επηθεθαιίδα πλδεδεκέλν αξρείν <LINK TYPE="***" SRC="***"></LINK> Meta Πιεξνθνξίεο <META> Πξέπεη λα βξίζθεηαη ζηελ επηθεθαιίδα Οξηζκόο ζηπι <STYLE></STYLE> Κεθάιαην 3. Η Γιώζζα XHTML (Extensible HyperText Markup Language) ην παξόλ θεθάιαην πεξηγξάθεηαη ε γιώζζα XHTML, ηα δηαδνρηθά θύιια ζηπι (css), θαζώο θαη πιεξνθνξίεο γηα ην ζρεδηαζκό ηεο ηζηνζειίδαο, έλα βήκα πξηλ λα μεθηλήζεη ε πινπνίεζή ηεο. 31

3.1 XHTML (Δπεθηάζηκε γιώζζα ζήκαλζεο/ζεκείσζεο ππεξθεηκέλνπ) H XHTML (Extensible HyperText MarkupLanguage) είλαη ν δηάδνρνο ηεο γιώζζαο ζήκαλζεο ππεξ-θεηκέλνπ (HTML), ε νπνία πξνηάζεθε από ην w3c (World Wide Web Consortium). Απνηειεί κηα απζηεξόηεξε κνξθή θώδηθα, πνπ δεκηνπξγήζεθε γηα ηελ θαηαζθεπή ηζηνζειίδσλ πνπ ζα είλαη πξνζβάζηκεο θαη από άιιεο ζπζθεπέο, εθηόο από ηνπο θπιινκεηξεηέο,(π.ρ. θηλεηά ηειέθσλα, pdas), κε απνηέιεζκα λα επηηξέπεηαη έλα κεγαιύηεξν θνηλό πξόζβαζεο ζηηο ηζηνζειίδεο πνπ ζρεδηάζηεθαλ κε XHTML. Ζ XHTML είλαη κηα κνξθή επεθηάζηκεο γιώζζαο ζήκαλζεο XML (Extensible Markup Language = επεθηάζηκε γιώζζα ζήκαζλεο), πνπ ρξεζηκνπνηεί θώδηθα. Από πνιιέο απόςεηο απνηειεί ηε δηαζηαύξσζε ηεο HTML θαη ηεο XML. Κάλεη ρξήζε ησλ εγγξάθσλ CSS, (Cascading Style Sheets = δηαδνρηθά θύιια ζρεηηθά κε ην ζηπι ηεο ηζηνζειίδαο), πνπ είλαη ππεύζπλα γηα ηελ εκθάληζε ησλ πιεξνθνξηώλ. 3.2 Γηαδνρηθά θύιια ζρεηηθά κε ην ζηπι ηεο ηζηνζειίδαο CSS (Cascading Style Sheets) Σα δηαδνρηθά θύιια ζηπι (CSS) δίλνπλ ηε δπλαηόηεηα ζηνπο ζρεδηαζηέο ηζηνζειίδσλ λα ειέγμνπλ ην ζηπι θαη ηε δηάηαμε πνιιώλ ηζηνζειίδσλ. Γίλνπλ ηε δπλαηόηεηα λα νξίζνπκε έλα ζηπι γηα θάζε HTML ζηνηρείν θαη λα ην εθαξκόζνπκε ζε όζεο ηζηνζειίδεο ζέινπκε. Γηα λα θάλνπκε κηα θαζνιηθή (global) αιιαγή, απιά αιιάδνπκε ην ζηπι κηα θνξά θαη όια ηα ζηνηρεία ηνπ Web ελεκεξώλνληαη απηόκαηα. Σα ζηπι κπνξνύλ λα νξηζζνύλ κέζα ζε έλα κόλν HTML ζηνηρείν, κέζα ζην ζηνηρείν <head> κηαο HTML ζειίδαο ή ζε έλα εμσηεξηθό αξρείν CSS Ζ ζύληαμε ησλ CSS απνηειείηαη από ηξία κέξε : έλαλ επηινγέα (selector), κηα ηδηόηεηα (property) θαη κηα ηηκή (value) : Δπηινγέαο {ηδηόηεηα: ηηκή} Selector {property: value} 32

Ο επηινγέαο είλαη ην ζηνηρείν πνπ νξίδεηαη. H ηδηόηεηα είλαη ην ραξαθηεξηζηηθό πνπ αιιάδεη θαη κπνξεί λα πάξεη κηα ηηκή. Ζ ηδηόηεηα θαη ε ηηκή μερσξίδνπλ από ην ζύκβνιν «:» θαη πεξηθιείνληαη από ηνπο ραξαθηήξεο { }, σο εμήο : body {color: black} Αλ ε ηηκή απνηειείηαη από πνιιέο ιέμεηο, πξέπεη λα ηνπνζεηήζνπκε εηζαγσγηθά : p {font-family: "sans serif"} Αλ ζέινπκε λα νξίζνπκε πεξηζζόηεξεο από κηα ηδηόηεηεο, πξέπεη λα μερσξίζνπκε ηελ θάζε ηδηόηεηα κε ην ραξαθηήξα «;» Έλα εμσηεξηθό θύιιν ζρεηηθά κε ην ζηπι κηαο ηζηνζειίδαο (external style sheet) είλαη ηδαληθό, όηαλ ην ζηπι εθαξκόδεηαη ζε πνιιέο ζειίδεο. Με απηό κπνξνύκε λα αιιάμνπκε ηελ εκθάληζε ελόο νιόθιεξνπ δηθηπαθνύ ηόπνπ αιιάδνληαο θάπνηεο ηηκέο κέζα ζην αξρείν. Ζ θάζε ζειίδα πξέπεη λα έρεη έλα δεζκό (link) πξνο ην θύιιν ζηπι πνπ ρξεζηκνπνηεί ην tag <link>, ν νπνίνο βξίζθεηαη κέζα ζην ηκήκα head, σο εμήο : <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Ο θπιινκεηξεηήο, αθνύ δηαβάζεη ηνπο νξηζκνύο ζηπι από ην αξρείν mystyle.css, ζα κνξθνπνηήζεη ην έγγξαθν ζύκθσλα κε ην ζηπι πνπ έρνπκε νξίζεη κέζα ζην αξρείν. 3.3 ρεδηαζκόο ηεο ηζηνζειίδαο Γηα λα ζρεδηάζνπκε ηελ ηζηνζειίδα, αξρηθά, ζα πξέπεη λα θαζνξίζνπκε ην ζθνπό πνπ ζα έρεη ε ζειίδα (πξνζσπηθή ή επαγγεικαηηθή ρξήζε), ζε πνηνπο ζα απεπζύλεηαη, πνηεο πιεξνθνξίεο ζα είλαη δηαζέζηκεο ζηνπο επηζθέπηεο, πνηα ζηνηρεία (πιεξνθνξίεο, ζρόιηα) ζα ζέιακε λα έρνπκε από ηνπο επηζθέπηεο θαη πόζν εύθνιε ζα είλαη ε ζπληήξεζή ηεο. Όιεο νη ηζηνζειίδεο έρνπλ κηα αξρηθή ή εηζαγωγηθή ζειίδα (home page), ε νπνία θαισζνξίδεη ηνπο επηζθέπηεο θαη ιεηηνπξγεί σο ζεκείν εθθίλεζεο γηα ηα ππόινηπα 33

πεξηερόκελα (ηζηνζειίδεο). Αθνύ ζρεδηάζνπκε ηελ εηζαγσγηθή ζειίδα, πξέπεη λα απνθαζίζνπκε γηα ηνλ ηξόπν κεηαθίλεζεο ησλ ρξεζηώλ κέζα ζην δηθηπαθό ηόπν. Τπάξρεη ε δπλαηόηεηα ν ρξήζηεο λα κεηαθέξεηαη ζε όπνηα ηζηνζειίδα ζέιεη, μεθηλώληαο από ηελ αξρηθή ή κπνξνύκε λα ηνλ θαηεπζύλνπκε ζε ζπγθεθξηκέλεο ηζηνζειίδεο. Πξέπεη λα θάλνπκε έλα ζρεδηάγξακκα, κε όιεο ηηο ηζηνζειίδεο ηνπ δηθηπαθνύ ηόπνπ πνπ ζέινπκε λα δεκηνπξγήζνπκε ζε κηα ζειίδα ραξηί θαη ζηε ζπλέρεηα λα νξγαλώζνπκε ηηο ηζηνζειίδεο ζε νκάδεο θάησ από ηελ εηζαγσγηθή ζειίδα. Γεκηνπξγνύκε κηα ηζηνζειίδα γηα θάζε ζέκα θαη ζπγθεληξώλνπκε ηα ζρεηηθά ζέκαηα ζε κηα θαηεγνξία. Ζ όιε νξγάλσζε ζα κνηάδεη κε δέλδξν θαη νλνκάδεηαη ράξηεο ηνπ δηθηπαθνύ ηόπνπ. (ηπιηάδεο 2007). Κεθάιαην 4. Λνγηζκηθό Καηαζθεπήο Ιζηνζειίδσλ ην παξόλ θεθάιαην πεξηγξάθεηαη ε ιεηηνπξγία θάπνησλ γλσζηώλ εθαξκνγώλ πνπ ζπκβάιινπλ ζηελ θαηαζθεπή ηζηνζειίδσλ θαη ρξεζηκνπνηήζεθαλ γηα ηελ θαηαζθεπή ηεο ηζηνζειίδαο ηεο εξγαζίαο απηήο. 4.1 Microsoft Share Point Designer Σν πξόγξακκα απνηειείηαη από ηελ πεξηνρή εξγαζίαο κε δπλαηόηεηα δηαρσξηζκνύ ζηα 2, έηζη ώζηε, εθηόο από ηνλ θώδηθα, λα θαίλεηαη θαη ην απνηέιεζκα. Μπνξνύκε λα δεκηνπξγήζνπκε δηθηπαθό ηόπν ρξεζηκνπνηώληαο ή όρη θώδηθα (βι. Δηθόλα 1). Γεμηά ππάξρνπλ έηνηκα θάπνηα αληηθείκελα, όπσο θνπκπηά, ιίζηεο, πιαίζηα θεηκέλνπ, θόξκεο, αλαδηπινύκελα κελνύ, ηα νπνία ηξαβώληαο ηα κπνξνύκε λα ηα βάινπκε ζηελ πεξηνρή εξγαζίαο. Αξηζηεξά βξίζθνπκε ηα αξρεία ηνπ δηθηπαθνύ ρώξνπ πνπ έρνπκε θηηάμεη θαη ηηο δηαδξνκέο πξνο ηηο ζειίδεο πνπ έρνπκε δεκηνπξγήζεη. ην πάλσ κέξνο ππάξρεη ε γλσζηή κπάξα εξγαιείσλ, ε νπνία είλαη παξόκνηα θαη ζε όια ηα πξνγξάκκαηα ηεο Microsoft. (βι. Δηθόλα 2). 34

Δηθόλα 1: Microsoft Share Point Designer Δηθόλα 2 Ζ κπάξα εξγαιείσλ 4.1.1 Δηθνλίδηα θαη ιεηηνπξγίεο Παξαθάησ πεξηγξάθνληαη νη ιεηηνπξγίεο ησλ εηθνληδίσλ πνπ βξίζθνληαη ζηε κπάξα εξγαιείσλ. Σν θνπκπί απηό ρξεζηκνπνηείηαη γηα ηε δεκηνπξγία θελνύ εγγξάθνπ, ζηε δεδνκέλε πεξίπησζε γηα ηε δεκηνπξγία λέαο ηζηνζειίδαο. Σν θνπκπί απηό ρξεζηκνπνηείηαη γηα ην άλνηγκα ππάξρνπζαο ηζηνζειίδαο. Σν θνπκπί απηό ρξεζηκνπνηείηαη γηα απνζήθεπζε. Σν θνπκπί απηό αλνίγεη έλα κελνύ θαη κπνξνύκε λα επηιέμνπκε ζε πνην θπιινκεηξεηή κπνξνύκε λα δνύκε ηελ εξγαζία πνπ έρνπκε θάλεη. Σν θνπκπί απηό ρξεζηκνπνηείηαη γηα ηελ επηινγή ηύπνπ θαη 35

κεγέζνπο γξακκαηνζεηξάο. Σν θνπκπί B είλαη γηα έληνλα γξάκκαηα, ην Ι γηα πιάγηα, ελώ ην U γηα ππνγξακκηζκέλα. Αλάινγα κε πνην θνπκπί παηάκε αιιάδεη ε ζηνίρηζε ηνπ θεηκέλνπ, ηνπ πίλαθα, ηεο εηθόλαο (αξηζηεξή, θεληξηθή, δεμηά ζηνίρηζε). To θνπηί εξγαιείσλ ή εξγαιεηνζήθε (toolbox) (βι. Δηθόλα 3) πεξηιακβάλεη δηάθνξα αληηθείκελα πνπ κπνξνύκε λα εηζάγνπκε ζηελ ηζηνζειίδα, ρσξίο λα ρξεηάδεηαη λα γξάθνπκε ηνλ θώδηθα, παξά κόλν λα ηνλ ηξνπνπνηνύκε, όπσο εκείο ζέινπκε. Σα πην ζεκαληηθά αληηθείκελα είλαη: Δξγαιεία γηα επηθεθαιίδεο: Δηζαγσγή παξαγξάθσλ, λέσλ επηπέδσλ, ελνηήησλ, δηαρσξηζηηθώλ γξακκώλ, επηθεθαιίδσλ ελνηήησλ θαη εηθόλσλ. Δξγαιεία γηα θόξκεο: Κνπκπηά, αλαδηπινύκελα κελνύ, θόξκεο, θνπηί κε πεδίν εηζαγσγήο ιέμεσλ, θνπκπί επηινγήο, θνπηί γηα θσδηθνύο, (εκθαλίδεη ηα γξάκκαηα κε ηελ κνξθή θνπθίδσλ ή αζηεξηώλ), πεξηνρή θεηκέλνπ γηα ζρόιηα ή γηα κεγάια θείκελα. Όια απηά ρξεζηκνπνηνύληαη από ηνπο ρξήζηεο ηνπ δηθηπαθνύ ρώξνπ γηα θάπνην μερσξηζηό ζθνπό ην θαζέλα. ASP.Net Controls: Δξγαιεία γηα εηζαγσγή αληηθεηκέλσλ, όπσο ιίζηεο επηινγήο, εκεξνιόγην, ώξα, ππεξζύλδεζκνη θαη πίλαθεο. Data: γηα εηζαγσγή δεδνκέλσλ θαη αξρείσλ από βάζεηο δεδνκέλσλ. Validation (επηθύξωζε): Γηα ηνλ έιεγρν ηεο ζσζηήο ιεηηνπξγίαο ηεο ηζηνζειίδαο. 36

Δηθόλα 3: Σν θνπηί εξγαιείσλ 4.1.2 Δηζαγσγή ππεξζπλδέζκνπ ζηελ ηζηνζειίδα Μπνξνύκε λα κεηαηξέςνπκε έλα κέξνο από ην θείκελν ζε ππεξζύλδεζκν θαη κε άιιν ηξόπν, εθηόο από ηελ εληνιή href πνπ αλαθέξεηαη παξαπάλσ. Ο ηξόπνο είλαη ν εμήο. Δπηιέγνπκε ην θείκελν πνπ ζέινπκε λα γίλεη ζύλδεζκνο θαη παηάκε ην θνπκπί ζπλέρεηα εκθαλίδεηαη ην παξάζπξν ηεο παξαθάησ Δηθόλαο 4.. ηε Δηθόλα 4: Παξάζπξν εηζαγσγήο ππεξζπλδέζκνπ 37

Μέζα ζην παξάζπξν απηό επηιέγνπκε ζηε ζέζε «δηεύζπλζε» (address) ηε ζειίδα ζηελ νπνία ζα παξαπέκπεη ν ππεξζύλδεζκνο. ηε ζπλέρεηα παηάκε «ΟΚ» θαη βιέπνπκε όηη ην θείκελν έρεη κεηαηξαπεί ζε ζύλδεζκν (είλαη κπιε ππνγξακκηζκέλν). Αλ δελ βξίζθεηαη ηνπηθά ε ηζηνζειίδα γηα λα ηελ επηιέμνπκε, ηόηε κπνξνύκε λα βάινπκε ζην πεδίν ηεο δηεύζπλζεο ηελ ηνπνζεζία πνπ βξίζθεηαη ζην δηαδίθηπν. 4.1.3 Δηζαγσγή θνπκπηνύ ζηελ ηζηνζειίδα Τπάξρνπλ δύν είδε θνπκπηώλ: απηά πνπ εθηεινύλ θάπνηα ιεηηνπξγία ζε θόξκα θαη απηά πνπ παξαπέκπνπλ ζε άιιε ζειίδα. Σα πξώηα κπνξνύκε λα ηα εηζάγνπκε ηξαβώληαο ην αληίζηνηρν εηθνλίδην από ην toolbox, δειαδή ην input button θαη ην ηνπνζεηνύκε ζην κέξνο ηεο ζειίδαο πνπ ζέινπκε. ηε ζπλέρεηα θάλνληαο «δηπιό θιηθ» πάλσ ηνπ, αλνίγεη ην παξάζπξν ηδηνηήησλ ηνπ θνπκπηνύ (βι. Δηθόλα 5), ζην νπνίν κπνξνύκε λα αιιάμνπκε ηελ εηηθέηα ηνπ (ηη ζα γξάθεη πάλσ), ην όλνκά ηνπ, ηε ιεηηνπξγία ηνπ, αλ ζα είλαη θαλνληθό, αλ ζα ιεηηνπξγεί ζαλ απνδνρή δεδνκέλσλ θάπνηαο θόξκαο ή αλ ζα θαζαξίδεη ηα πεδία θάπνηαο θόξκαο. Δηθόλα 5. Παξάζπξν ηδηνηήησλ Δπίζεο, κπνξνύκε λα εηζάγνπκε θνπκπί από ην κελνύ insert interactive button, σο εμήο: Από ην παξάζπξν δηαιόγνπ πνπ ζα εκθαληζηεί, επηιέγνπκε έλα από ηα δηαθνξεηηθά θνπκπηά πνπ είλαη ζηε ιίζηα, εηζάγνπκε ην θείκελν πνπ ζα γξάθεηαη πάλσ ηνπ, θαζώο θαη ηε δηεύζπλζε (Link) πνπ ζα νδεγήζεη ζε άιιε ζειίδα (βι. Δηθόλα 6). ηε ζπλέρεηα από ηελ θαξηέια Fonts κπνξνύκε λα επηιέμνπκε ην κέγεζνο θαη ηε γξακκαηνζεηξά πνπ ζέινπκε, ηε ζηνίρηζε, θαζώο θαη ην ρξώκα ηνπ θεηκέλνπ κέζα ζην θνπκπί. 38

Δηθόλα 6: Παξάζπξν εηζαγσγή θνπκπηνύ 4.1.4 Φόλην ηεο ηζηνζειίδαο (background) Κάλνληαο δεμηό «θιηθ» ζε έλα θελό ρώξν ζηελ ηζηνζειίδα πνπ πξόθεηηαη λα θηηάμνπκε, επηιέγνπκε ηδηόηεηεο ζειίδαο (page properties) θαη ζηε ζπλέρεηα Formatting θαη επηιέγνπκε ην αλάινγν ρξώκα από ην πηπζζόκελν κελνύ πνπ βξίζθεηαη δίπια ζην θόλην (background). Μπνξνύκε, επίζεο, αληί γηα ρξώκα λα εηζάγνπκε θάπνηα εηθόλα πνπ ζα ρξεζηκνπνηεζεί σο θόλην. Δπηιέγνπκε ην θνπηάθη «background picture» θαη παηώληαο ην θνπκπί browse πνπ ελεξγνπνηείηαη από θάησ, κπνξνύκε λα επηιέγνπκε ηελ εηθόλα πνπ ζέινπκε. Από θάησ κπνξνύκε λα επηιέγνπκε ην ρξώκα ησλ γξακκάησλ πνπ ζα έρεη, θαζώο θαη ηα ρξώκαηα ησλ ζπλδέζκσλ ζηε ζειίδα. 4.1.5 Αληηθείκελα δηαδηθηύνπ (Web components) Δθηόο από ηα θνπκπηά, κπνξνύκε λα εηζάγνπκε κέζα ζην δηθηπαθό ρώξν δηάθνξα άιια «αληηθείκελα». Από ην κελνύ insert επηιέγνπκε web component. Από εθεί κπνξνύκε λα εηζάγνπκε θπιηόκελα κελύκαηα, θνπηηά γηα αλαδήηεζε, κεηξεηέο επηζθέςεσλ, γθαιεξί θσηνγξαθηώλ, Java applets θ.α. 4.1.6 Κπιηόκελν κήλπκα (Scrolling Marquee) Γηα λα δώζνπκε έκθαζε ζε κηα ηζηνζειίδα, κηα πνιύ θαιή επηινγή είλαη ε δεκηνπξγία ελόο θπιηόκελνπ κελύκαηνο (marquee), δειαδή κηα γξακκή θεηκέλνπ πνπ ζα θηλείηαη ζπλέρεηα θαηά πιάηνο ηεο νζόλεο από αξηζηεξά πξνο ηα δεμηά ή αλάπνδα. 39

Γηα λα πξνζζέζνπκε έλα θπιηόκελν κήλπκα ζε κηα ηζηνζειίδα ελεξγνύκε σο εμήο: Δπηιέγνπκε Marquee... από ην ππνκελνύ Web components ηνπ κελνύ Insert γηα λα εκθαληζζεί ην πιαίζην δηαιόγνπ Marquee Properties. ην πιαίζην θεηκέλνπ Text ζα γξάςνπκε ην θείκελν πνπ ζέινπκε λα εκθαλίδεηαη. Τπάξρνπλ επηινγέο πνπ έρνπλ θαηάιιεια πιήθηξα γηα λα επηιέμνπκε ηελ θαηεύζπλζε ηεο θίλεζεο ηνπ θπιηόκελνπ κελύκαηνο (Direction), ηελ ηαρύηεηα ηεο κεηαθίλεζήο ηνπ (Movement Speed), ηε ζπκπεξηθνξά ηνπ (Behavior), θαζώο θαη ηελ επζπγξάκκηζή ηνπ κε ην θείκελν (Align with Text). Από ηελ νκάδα επηινγώλ Size κπνξνύκε λα ξπζκίζνπκε ην πιάηνο θαη ην ύςνο ηνπ θπιηόκελνπ κελύκαηνο θαη από ηε ιίζηα Background Color ην ρξώκα ηνπ θόληνπ. Αλ επηιέμνπκε ην πιαίζην ειέγρνπ Continuously, ην θπιηόκελν κήλπκα ζα εκθαλίδεηαη ζπλέρεηα, δηαθνξεηηθά ζα κπνξνύκε λα επηιέμνπκε πόζεο θνξέο (times) ζα ζέινπκε λα εκθαληζζεί. Δάλ ρξεηαζηεί λα θάλνπκε αιιαγέο, παηάκε «δηπιό θιηθ» ζ έλα θπιηόκελν κήλπκα γηα λα εκθαληζηεί ην πιαίζην δηαιόγνπ Marquee Properties,. 4.1.7 Πίλαθεο Έλα από ηα πην ζπρλά πξνβιήκαηα πνπ έρεη λα αληηκεησπίζεη ν θαηαζθεπαζηήο Web ζειίδσλ είλαη λα θξαηήζεη ηα κέξε ηεο ζειίδαο, (θείκελν, εηθόλεο θ.ιπ.), ζηε ζέζε πνπ επηζπκεί. Πξνθεηκέλνπ λα θαιύςεη ηηο αλάγθεο θάζε είδνπο νζόλεο, (από 14'' έσο 21''), ηελ αλάιπζε (από 640Υ480pixels έσο 1280Υ1024pixels) θαη ηε γξακκαηνζεηξά, (ην κέγεζνο θαη ην είδνο ησλ γξακκάησλ ην επηιέγεη ν θάζε ρξήζηεο κόλνο ηνπ), ν θπιινκεηξεηήο δελ καο επηηξέπεη λα νξίζνπκε ζπληεηαγκέλεο θαη ηε ζέζε ησλ αληηθεηκέλσλ. Έλαο απιόο ηξόπνο γηα λα παξαθάκςνπκε απηό ην πξόβιεκα είλαη λα ρξεζηκνπνηήζνπκε πίλαθεο. Οη πίλαθεο ιεηηνπξγνύλ ζαλ κηα αόξαηε ζθαισζηά θξαηώληαο θάζε ηκήκα ηεο ζειίδαο ζηε, ζέζε πνπ επηζπκνύκε. Γηα λα εηζάγνπκε έλαλ πίλαθα ελεξγνύκε σο εμήο: από ην Μελνύ «Table» επηιέγνπκε «Ηnsert Table», όπνπ από εθεί εηζάγνπκε ζην παξάζπξν δηαιόγνπ πνπ ζα εκθαληζηεί, αξηζκό ζηειώλ θαη γξακκώλ, ζηνίρηζε, αλ καο ελδηαθέξεη, θαζώο θαη δηάθνξεο άιιεο επηινγέο, αλ καο ρξεηάδνληαη, όπσο ηελ απόζηαζε κεηαμύ ησλ θειηώλ ηνπ πίλαθα θαη ηελ απόζηαζε ηνπ θεηκέλνπ κέζα ζην θειί από ηα άθξα ηνπ. ηε ζπλέρεηα παηάκε ΟΚ θαη κπνξνύκε λα εηζάγνπκε δεδνκέλα κέζα ζηνλ πίλαθα. 40

4.1.8 Πξνζζήθε Πνιπκέζσλ ζε Ιζηνζειίδεο ην SharePoint Designer έρνπκε ηε δπλαηόηεηα, ζηηο ηζηνζειίδεο πνπ δεκηνπξγνύκε, λα πξνζζέζνπκε γξαθηθά, εηθόλεο, ήρνπο θαη βίληεν. Δθηόο από ηελ επηινγή ησλ εηθόλσλ ή ησλ άιισλ κνξθώλ πνιπκέζσλ, εθείλν πνπ πξέπεη λα έρνπκε πάληα ππόςε καο είλαη ν ρξόλνο πνπ απαηηείηαη γηα ην «θόξησκα» απηώλ ησλ γξαθηθώλ ζηελ νζόλε ηνπ επηζθέπηε ηεο ζειίδαο ζην δηαδίθηπν (internet). Πξέπεη πάληα λα ζπκβνπιεπόκαζηε ηελ έλδεημε ρξόλνπ γηα ην «θόξησκα» κηαο ηζηνζειίδαο, πνπ εκθαλίδεηαη ζηε γξακκή θαηάζηαζεο ηνπ Editor. Δπίζεο, κπνξνύκε λα βξνύκε αξθεηά εξγαιεία γηα ηελ επεμεξγαζία εηθόλσλ, όπσο ηε ξύζκηζε ηεο θσηεηλόηεηαο (brightness) θαη ηεο αληίζεζεο (contrast), ην μάθξηζκα (cropping), ην μεζώξηαζκα (washout), ηελ πεξηζηξνθή θ.ά από ηε γξακκή εξγαιείσλ Image Toolbar ηελ νπνία εκθαλίδνπκε από ηελ επηινγή Image Toolbar ηνπ κελνύ «πξνβνιή» (view). Οη θπιινκεηξεηέο, όπσο είπακε παξαπάλσ, ρξεζηκνπνηνύλ ζπλήζσο ηηο κνξθέο αξρείσλ γξαθηθώλ GIF (Graphics Interchanged Format) θαη JPEG (Joint Photographic Expert Group). Τπνζηεξίδνληαη, επίζεο θαη νη κνξθέο αξρείσλ γξαθηθώλ BMP, TIFF, TGA, RAS, EPS, PCX θαη WMF. Όηαλ εηζάγνπκε θάπνηα εηθόλα κε κηα από ηηο παξαπάλσ κνξθέο, ην πξόγξακκα ηε κεηαηξέπεη απηόκαηα ζε κνξθή GIF, αλ πεξηέρεη ιηγόηεξα από 256 ρξώκαηα ή ζε κνξθή JPEG, αλ πεξηέρεη πεξηζζόηεξα από 256 ρξώκαηα. Ζ κνξθή JPEG παξάγεη έλα ζπκπηεζκέλν γξαθηθό, δειαδή έλα γξαθηθό ηνπ νπνίνπ ην κέγεζνο είλαη πνιύ κηθξόηεξν από απηό ηεο πξαγκαηηθήο εηθόλαο θαη ιόγσ ηνπ κεγάινπ αξηζκνύ ρξσκάησλ πνπ ππνζηεξίδεη, είλαη ηδαληθή γηα θσηνγξαθίεο. Από ηελ άιιε πιεπξά, ιόγσ ηνπ κηθξόηεξνπ αξηζκνύ ρξσκάησλ, ηα αξρεία ηεο κνξθήο GIF έρνπλ ην πιενλέθηεκα ηεο ηαρύηεξεο θόξησζεο. Σν SharePoint δεκηνπξγεί κόλν ηνπ ην θάθειν images, όπνπ κπνξνύκε λα ηνπνζεηήζνπκε εθεί ηα αξρεία γξαθηθώλ ηεο ηξέρνπζαο ζέζεο ηζηνύ ή κπνξνύκε λα ηα νξγαλώζνπκε όπσο εκείο ζέινπκε. 4.1.9 Δηζαγσγή Γξαθηθώλ ζε ηζηνζειίδα Γηα λα εηζάγνπκε έλα γξαθηθό ζε κηα ηζηνζειίδα, κπνξνύκε λα επηιέμνπκε Image... ή Clipart... από ην κελνύ «εηζαγσγή» (insert) ή λα θάλνπκε «θιηθ» ζην πιήθηξν Insert Image ηεο βαζηθήο γξακκήο εξγαιείσλ. Θα εκθαληζηεί ην πιαίζην δηαιόγνπ Image, όπνπ 41

κπνξνύκε λα δνύκε ζε κηα ιίζηα όια ηα αξρεία γξαθηθώλ πνπ έρνπκε εηζάγεη ζηελ ηξέρνπζα ζέζε ηζηνύ. Δπηιέγνπκε ην αξρείν γξαθηθώλ πνπ ζέινπκε από ηε ιίζηα ηνπ πιαηζίνπ δηαιόγνπ θαη θάλνπκε «θιηθ» ζην ΟΚ γηα λα εκθαληζηεί ε εηθόλα ζηελ ηζηνζειίδα. Γηα λα ηελ επεμεξγαζηνύκε, ηελ επηιέγνπκε θαη κπνξνύκε λα αλνίμνπκε ην πιαίζην δηαιόγνπ Image Properties ή λα ρξεζηκνπνηήζνπκε ηηο επηινγέο ηεο γξακκήο εξγαιείσλ Image Toolbar, πνπ εκθαλίδεηαη απηόκαηα από ην SharePoint Designer. Αλ επηιέμνπκε Save από ην κελνύ αξρείν (file) ή θάλνπκε «θιηθ» ζην πιήθηξν «απνζήθεπζε» (save) ηεο βαζηθήο γξακκήο εξγαιείσλ, ζα εκθαληζηεί ην πιαίζην δηαιόγνπ Save Embedded Files, όπνπ κπνξνύκε λα δνύκε ηα αξρεία γξαθηθώλ πνπ εηζάγακε ζηελ ηζηνζειίδα θαη ηα νπνία έρνπλ κεηαηξαπεί απηόκαηα από ην SharePoint Designer ζε κηα από ηηο κνξθέο GIF ή JPEG. Με ην πιήθηξν Rename κπνξνύκε λα κεηνλνκάζνπκε ην λέν αξρείν γξαθηθώλ. Με ην πιήθηξν Change Folder... κπνξνύκε λα επηιέμνπκε έλα θάθειν γηα ηελ απνζήθεπζε ηνπ αξρείνπ γξαθηθώλ θαη κε ην πιήθηξν Set Action... κπνξνύκε λα επηιέμνπκε αλ ην γξαθηθό ζα απνζεθεπηεί καδί κε ηελ ηζηνζειίδα ή αλ ζα παξακείλεη ζην θάθειν ηεο ζέζεο ηζηνύ. 4.1.10 Δπηπιένλ Γπλαηόηεηεο Γξαθηθώλ Μπνξνύκε λα πξνζζέζνπκε θαη θηλνύκελεο εηθόλεο GIF ζε κηα ηζηνζειίδα, δειαδή εηθόλεο πνπ δίλνπλ ηελ εληύπσζε ηεο θίλεζεο. Μηα κινούμενη εικόνα GIF (animated GIF) είλαη έλα αξρείν γξαθηθώλ, πνπ «θνξηώλεη» ζπλέρεηα δηάθνξεο εηθόλεο γηα λα δεκηνπξγήζεη έηζη ηελ ςεπδαίζζεζε ηεο θίλεζεο. Μπνξνύκε, επίζεο, λα νξίζνπκε έλα θείκελν πνπ ζα είλαη νξαηό κέρξη λα νινθιεξσζεί ην θόξησκα κηαο εηθόλαο ζε έλα θπιινκεηξεηή. ηνλ Internet Explorer ην θείκελν απηό εμαθνινπζεί λα παξνπζηάδεηαη θαη κεηά ην «θόξησκα» ηνπ γξαθηθνύ, όηαλ αθήλνπκε ην δείθηε ηνπ πνληηθηνύ πάλσ από ην γξαθηθό, κε ηε κνξθή ζπκβνπιήο νζόλεο (screentip) ή ζπκβνπιήο εξγαιείνπ (tooltip). Απηή ε δπλαηόηεηα ιέγεηαη εναλλακτικό κείμενο (alternative text) θαη γηα λα ηελ νξίζνπκε, εκθαλίδνπκε ην πιαίζην δηαιόγνπ Image Properties κηαο εηθόλαο θαη πάκε ζηελ νκάδα επηινγώλ Alternative Representations ηεο θαξηέιαο General, όπνπ γξάθνπκε ην ελαιιαθηηθό θείκελν ζην πιαίζην θεηκέλνπ Text. Σν FrontPage δίλεη ζαλ εμ νξηζκνύ 42

ελαιιαθηηθό θείκελν ην όλνκα ηνπ αξρείνπ ηεο εηθόλαο θαη ζε παξέλζεζε ην κέγεζόο ηεο ζε bytes. Δθηόο από ηε δπλαηόηεηα γηα ελαιιαθηηθό θείκελν ππάξρεη θαη ε δπλαηόηεηα γηα ηνπνζέηεζε ελαιιαθηηθήο εηθόλαο ή εηθόλαο ρακειήο αλάιπζεο, πνπ είλαη ζηελ νπζία κηα παξαιιαγή ηεο αξρηθήο εηθόλαο, αιιά κε αξθεηά κηθξόηεξν κέγεζνο, ε νπνία εηθόλα «θνξηώλεηαη» πξώηε θαη παξακέλεη ζηελ νζόλε κέρξη λα «θνξησζεί» ε θαλνληθή θαη κεγαιύηεξε εηθόλα. Δίλαη κηα άιιε ελαιιαθηηθή ιύζε αληί ηεο πιεθηήο ζάξσζεο γηα ην «θόξησκα» ησλ κεγάισλ αξρείσλ γξαθηθώλ. Γηα λα ηελ νξίζνπκε, εκθαλίδνπκε ην πιαίζην δηαιόγνπ Image Properties κηαο εηθόλαο θαη πάκε ζηελ νκάδα επηινγώλ Alternative Representations ηεο θαξηέιαο General. Κάλνπκε «θιηθ» ζην πιήθηξν Browse... πνπ είλαη δίπια από ην πιαίζην θεηκέλνπ Low-Res θαη επηιέγνπκε κηα ελαιιαθηηθή εηθόλα από ην πιαίζην δηαιόγνπ Select Alternate Image. 4.1.11 Πξνζζήθε Αξρείσλ Ήρνπ ζε ηζηνζειίδα Τπάξρεη ε δπλαηόηεηα λα ηνπνζεηήζνπκε ζε κηα ηζηνζειίδα έλαλ ππεξζύλδεζκν γηα έλα αξρείν ήρνπ, ην νπνίν ζα αλνίμεη όηαλ ν ρξήζηεο θάλεη «θιηθ» ζην ζύλδεζκν ή κπνξνύκε λα πξνζζέζνπκε ήρν ζην παξαζθήλην κηαο ηζηνζειίδαο, ν νπνίνο ζα «θνξηώλεηαη» απηόκαηα όηαλ αλνίμνπκε ηελ ηζηνζειίδα πνπ ηνλ πεξηέρεη. Μπνξνύκε λα νξίζνπκε έλαλ ήρν παξαζθελίνπ, έηζη ώζηε λα αθνύγεηαη κηα ή πεξηζζόηεξεο θνξέο ή λα επαλαιακβάλεηαη. Γηα λα νξίζνπκε έλαλ ήρν παξαζθελίνπ γηα κηα ηζηνζειίδα, επηιέγνπκε Page Properties... από ην κελνύ File θαη κεηά ηελ θαξηέια General ηνπ πιαηζίνπ δηαιόγνπ Page Properties. ηελ νκάδα επηινγώλ Background Sound θάλνπκε «θιηθ» ζην πιήθηξν Browse... θαη ζην πιαίζην δηαιόγνπ Background Sound επηιέγνπκε έλα αξρείν ήρνπ, ην νπνίν ζα εκθαληζζεί ζην πιαίζην θεηκέλνπ Location. Μπνξνύκε λα επηιέμνπκε ην πιαίζην ειέγρνπ Forever, ώζηε λα αθνύγεηαη ζπλέρεηα ν ήρνο ή λα γξάςνπκε ην πιήζνο ησλ επαλαιήςεώλ ηνπ ζην πιαίζην θεηκέλνπ Loop, κε δπλαηέο ηηκέο από 0 έσο 9999. Τπνζηεξίδνληαη νη κνξθέο αξρείσλ ήρνπ MIDI, AU θαη WAV θαη όζν κεγαιύηεξν είλαη ην κέγεζνο ηνπ αξρείνπ, ηόζν πεξηζζόηεξν ρξόλν ζα θάλεη λα θνξησζεί ε ηζηνζειίδα. 4.1.12 Πξνζζήθε ζεηξάο εηθόλσλ ζε ηζηνζειίδα Γηα λα εκθαλίδεηαη κηα ζπλερόκελε ζεηξά από εηθόλεο ζε κηα ηζηνζειίδα, επηιέγνπκε 43

Banner Ad Manager... από ην ππνκελνύ Webcomponents ηνπ κελνύ Insert. ην πιαίζην δηαιόγνπ Banner Ad Manager πνπ ζα εκθαληζηεί, κπνξνύκε λα νξίζνπκε ην πιάηνο θαη ην ύςνο ησλ εηθόλσλ από ηα πιαίζηα θεηκέλνπ Width θαη Height αληίζηνηρα, ην εθέ ηεο ελαιιαγήο ησλ εηθόλσλ (transition) από ηε ιίζηα Effect θαη ην ρξνληθό δηάζηεκα πνπ ζα εκθαλίδεηαη θάζε εηθόλα από ην πιαίζην θεηκέλνπ Show each image for (seconds). ην θάησ κέξνο ηνπ πιαηζίνπ δηαιόγνπ ππάξρεη ε ιίζηα Images to Display, όπνπ εθεί βξίζθνληαη ηα αξρεία εηθόλαο πνπ ζα εκθαλίδνληαη κε ηε ζεηξά. Γηα λα πξνζζέζνπκε έλα αξρείν ζηε ιίζηα θάλνπκε «θιηθ» ζην πιήθηξν Add..., γηα λα ην αθαηξέζνπκε από ηε ιίζηα, ην επηιέγνπκε θαη θάλνπκε «θιηθ» ζην πιήθηξν Remove θαη γηα λα ην κεηαθηλήζνπκε πάλσ ή θάησ κέζα ζηε ιίζηα, ην επηιέγνπκε θαη θάλνπκε «θιηθ» αληίζηνηρα ζηα πιήθηξα Move Up θαη Move Down. 4.1.13 Σξόπνο ελαιιαγήο ηζηνζειίδσλ (Page Transitions) Γηα λα επηιέμνπκε ηνλ ηξόπν ελαιιαγήο κηαο ηζηνζειίδαο, επηιέγνπκε Page Transition... από ην κελνύ Format. ην πιαίζην δηαιόγνπ Page Transitions κπνξνύκε λα επηιέμνπκε ην εθέ ελαιιαγήο από ηε ιίζηα Event, όπνπ νη επηινγέο είλαη Page Enter, Page Exit, Site Enter θαη Site Exit. ην πιαίζην θεηκέλνπ Duration (seconds) κπνξνύκε λα νξίζνπκε ηε δηάξθεηα ηνπ εθέ ηεο ελαιιαγήο. Σέινο, από ηε ιίζηα Transition effect, κπνξνύκε λα επηιέμνπκε ην εθέ ηεο ελαιιαγήο ηεο ηξέρνπζαο ηζηνζειίδαο. 4.1.14 Γεκηνπξγία Φόξκαο (Form) Γηα λα δώζνπκε ζηηο ζέζεηο ηζηνύ πνπ δεκηνπξγνύκε ζην δηαδίθηπν έλαλ αιιειεπηδξαζηηθό ραξαθηήξα, επνκέλσο ηε δπλαηόηεηα λα επηθνηλσλνύλ καδί καο νη επηζθέπηεο ηεο ζέζεο ηζηνύ, πξέπεη λα ρξεζηκνπνηήζνπκε ηηο θόξκεο. ην SharePoint Designer κπνξνύκε λα δεκηνπξγήζνπκε θόξκεο κέζα ζε ηζηνζειίδεο, όπνπ ζα κπνξνύλ λα ζπκπιεξώλνπλ θάπνηα ζηνηρεία νη επηζθέπηεο, γηα λα δεηνύλ πιεξνθνξίεο ή γηα λα ζηέιλνπλ ηα ζρόιηά ηνπο ή ηα ζηνηρεία ηνπο. Μπνξνύκε λα ρξεζηκνπνηήζνπκε έλα πξόηππν ηζηνζειίδαο πνπ πεξηέρεη θάπνηα θόξκα ή λα ζρεδηάζνπκε από ηελ αξρή κηα δηθή καο θόξκα. Αλ δεκηνπξγήζνπκε κηα θόξκα ρξεζηκνπνηώληαο έλα πξόηππν ηζηνζειίδαο, ζα κπνξνύκε κεηά λα πξνζαξκόζνπκε ηε θόξκα ζύκθσλα κε ηηο αλάγθεο καο. 44

Μηα θόξκα κπνξεί λα πεξηέρεη έλα ή πεξηζζόηεξα αιιειεπηδξαζηηθά πεδία, γηα λα κπνξνύκε λα ζπγθεληξώζνπκε πιεξνθνξίεο από ηνπο επηζθέπηεο ηεο ζέζεο ηζηνύ, πνπ είλαη ηα εμήο : πιαίζην θεηκέλνπ κηαο γξακκήο (one-line text box). Δίλαη πιαίζην θεηκέλνπ πνπ απνηειείηαη από κηα κόλν γξακκή. πιαίζην θεηκέλνπ πνιιώλ θπιηόκελωλ γξακκώλ (scrolling text box). Δίλαη πιαίζην θεηκέλνπ πνπ κπνξεί λα πεξηέρεη πνιιέο γξακκέο θαη εκθαλίδεη κηα θαηαθόξπθε ξάβδν θύιηζεο. ζύλζεην πιαίζην (drop-down menu). Δκθαλίδεη κηα ιίζηα κε επηινγέο. πιαίζην ειέγρνπ (check box). Δλεξγνπνηεί ή απελεξγνπνηεί κηα επηινγή. πιήθηξν επηινγήο (radio button). Δλεξγνπνηεί κηα κόλν επηινγή ζε κηα νκάδα επηινγώλ θαη πιήθηξν εληνιήο (push button). Δθηειεί κηα εληνιή, ζπλήζσο θαηαρώξεζε ησλ δεδνκέλσλ ή δηαγξαθή ηνπο. Γηα λα πξνζζέζνπκε θάπνην από ηα παξαπάλσ πεδία ζε κηα ηζηνζειίδα θαη λα μεθηλήζνπκε ηε δεκηνπξγία κηαο θόξκαο, πξώηα εκθαλίδνπκε ηε γξακκή εξγαιείσλ θνξκώλ από ηελ επηινγή Forms Toolbar ηνπ κελνύ View. Ζ γξακκή εξγαιείσλ θνξκώλ είλαη πηζαλόλ λα εκθαληζηεί δίπια από ηε γξακκή εξγαιείσλ κνξθνπνίεζεο, νπόηε ηελ αθήλνπκε εθεί ή ηε ζύξνπκε όπνπ ζέινπκε. 4.2 Adobe Dreamweaver Σν πξόγξακκα DreamWeaver ηεο εηαηξείαο Adobe είλαη έλα πξόγξακκα δεκηνπξγίαο θαη επεμεξγαζίαο ηζηνζειίδσλ θαη είλαη ηδηαίηεξα εύθνιν θαη θηιηθό ζηε ρξήζε ηνπ. Με ην DreamWeaver κπνξνύκε λα δεκηνπξγήζνπκε κε γξήγνξν ηξόπν θόξκεο (forms), πιαίζηα (frames), πίλαθεο (tables) θαη άιια αληηθείκελα. Σν DreamWeaver έρεη δπλαηόηεηεο γηα δεκηνπξγία δπλακηθήο HTML (DHTΜL= δπλακηθή γιώζζα ζήκαλζεο ζεκείσζεο ππεξθεηκέλνπ) θαη επηηξέπεη θίλεζε γξακκήο ρξόλνπ, απόιπηε ηνπνζέηεζε πεξηερνκέλσλ, δεκηνπξγία επηπέδσλ (layers) θαη ζπγγξαθή ζελαξίσλ (scripts). Σν DreamWeaver πεξηέρεη δηθέο ηνπ ζπκπεξηθνξέο (behaviors), πνπ είλαη έηνηκα scripts, ηα νπνία κπνξνύκε λα πξνζζέζνπκε πνιύ εύθνια ζε έλα αληηθείκελν. 45

4.3 Adobe Photoshop Σν Adobe Photoshop είλαη ην πην δεκνθηιέο επαγγεικαηηθό- πξόγξακκα γηα ηε δεκηνπξγία θαη ηελ επεμεξγαζία εηθόλσλ θαη θσηνγξαθηώλ. Σν Photoshop είλαη ζπκβαηό κε ιεηηνπξγηθό ησλ windows, αιιά θαη κε mac, όπνπ εκθαλίζηεθε γηα πξώηε θνξά. Πξόθεηηαη γηα έλα πξόγξακκα ζρεδίαζεο, ην νπνίν απνζεθεύεη πιεξνθνξίεο εηθόλσλ κε ηε κνξθή καζεκαηηθώλ εθθξάζεσλ (νλνκάδνληαη Vectors). Έηζη, θάζε θνξά πνπ ην Photoshop ζρεδηάδεη κηα γξακκή, ε γξακκή απηή κεηαηξέπεηαη ζε κηθξέο ηειείεο πνπ νλνκάδνληαη pixels. Όηαλ είλαη αξθεηά κηθξέο, κε αλαθαησκέλα ρξώκαηα (antialiasing = εμνκάιπλζε νξίσλ, αληηςεπδσλπκία), απηέο νη ηειείεο κνηάδνπλ κε γξακκέο. Φπζηθά, όηαλ κεγαιώλνπλ ή κηθξαίλνπλ, ε νπηηθή ςεπδαίζζεζε αιινηώλεηαη θαη έρεη σο απνηέιεζκα λα θαίλνληαη θνκκαηηαζκέλεο γξακκέο. Σν Adobe Photoshop ρσξίδεηαη ζε 3 κέξε ζην Menu Bar ζην θόλην δσγξαθηθήο ζηελ εξγαιεηνζήθε (βι. Δηθόλα 7). Ζ κπάξα ηνπ κελνύ ηνπ Photoshop ιεηηνπξγεί όπσο νη αληίζηνηρεο ησλ άιισλ εθαξκνγώλ. Όπσο, γηα παξάδεηγκα, νη ιεηηνπξγίεο «Απνζήθεπζε» θαη «Απνζήθεπζε σο» πνπ βξίζθνληαη ζην κελνύ «Αξρείν" θαη νη ιεηηνπξγίεο «Αληηγξαθή» θαη «Δπηθόιιεζε» πνπ βξίζθνληαη ζην κελνύ «Δπεμεξγαζία». Σν θόλην δσγξαθηθήο είλαη ε πεξηνρή ζηελ νπνία κπνξνύκε λα δεκηνπξγήζνπκε θαη λα επεμεξγαζηνύκε θσηνγξαθίεο - εηθόλεο. Ζ εξγαιεηνζήθε πεξηιακβάλεη όια ηα εξγαιεία γηα ηελ επεμεξγαζία ηεο εηθόλαο θαη αλάινγα κε ηελ έθδνζε αιιάδνπλ πξνζηίζεληαη ή αθαηξνύληαη θάπνηα από απηά. ήκεξα ε ηξέρνπζα έθδνζε πνπ θπθινθνξεί ζηελ αγνξά είλαη ε έθδνζε 11 ή cs4. 46

Δηθόλα 7: Σν πξόγξακκα Adobe Photoshop. 4.4 Adobe Flash Σν πξόγξακκα Flash ηεο εηαηξείαο Adobe είλαη έλα πξόγξακκα δεκηνπξγίαο θαη επεμεξγαζίαο δηαλπζκαηηθώλ γξαθηθώλ θαη animation (θηλνύκελεο εηθόλεο κε ηε ρξήζε ππνινγηζηή). Με ην flash κπνξνύκε λα δεκηνπξγήζνπκε παξνπζηάζεηο πνιπκέζσλ γηα ην δηαδίθηπν. 4.5 Author point lite Με απηό ην πξόγξακκα κπνξνύκε γξήγνξα λα θάλνπκε κεηαηξνπή παξνπζηάζεσλ από ηε κνξθή ppt (powerpoint) ζηε κνξθή swf (flash) γηα λα ηηο παξνπζηάζνπκε ζην δηαδίθηπν. 47

ΠΡΑΚΣΙΚΟ ΜΔΡΟ Κεθάιαην 5: Ο δηαδηθηπαθόο ηόπνο θαη ε θαηαζθεπή ηνπ ην παξόλ θεθάιαην ππάξρνπλ πιεξνθνξίεο ζρεηηθά κε ην δηθηπαθό ηόπν πνπ αλέιαβα λα πινπνηήζσ γηα ηελ πηπρηαθή κνπ εξγαζία, ηελ πνξεία θαηαζθεπήο ηνπ, ηελ ηερλνινγία θαη ην πιηθό πνπ ρξεζηκνπνίεζα, θαζώο θαη κηα ιεπηνκεξή πεξηήγεζε ζηηο ηζηνζειίδεο ηνπ. 5.1 Ο δηθηπαθόο ηόπνο Ο δηθηπαθόο ηόπνο πνπ πινπνίεζα ζηα πιαίζηα ηεο πηπρηαθήο εξγαζίαο κνπ αλαθέξεηαη ζην Δξγαζηήξην Φπρνινγίαο, ηνπ Σκήκαηνο Κνηλσληθώλ θαη Φηινζνθηθώλ πνπδώλ ηεο Φηινζνθηθήο ρνιήο ηνπ Παλεπηζηεκίνπ Κξήηεο. Ο ζηόρνο ησλ εξεπλεηώλ ηνπ Δξγαζηεξίνπ ήηαλ λα παξνπζηάζνπλ κε απιό, εύιεπην θαη επηζηεκνληθό ηξόπν ηνπο ζθνπνύο ηεο ιεηηνπξγίαο ηνπ, ηα βηνγξαθηθά ηνπο ζεκεηώκαηα, ηελ πνξεία ηνπ Δξγαζηεξίνπ, θαζώο θαη ηεο έξεπλάο ηνπο κέρξη ζήκεξα. Ο δηθηπαθόο ηόπνο ζα πξνζθέξεηαη ζε δύν γιώζζεο, ειιεληθά θαη αγγιηθά, αλ θαη πξνο ην παξόλ είλαη έηνηκε κόλν ε ειιεληθή έθδνζε, ελώ ε αγγιηθή βξίζθεηαη ππό θαηαζθεπή θαη ππνινγίδεηαη όηη ζα είλαη έηνηκε ην Φζηλόπσξν ηνπ 2009. 5.2 Πνξεία θαηαζθεπήο Μεηά ηε ιήςε ηνπ ζέκαηνο ηεο παξνύζαο εξγαζίαο, αξρηθά έπξεπε λα θαζνξηζηνύλ νη αλάγθεο θαη νη ζηόρνη ηεο ζπγθεθξηκέλεο εξγαζηεξηαθήο νκάδαο. Αμηνινγώληαο ηηο αλάγθεο ηεο, απνθαζίζηεθε ζε ζπλεξγαζία κε ηνλ επηβιέπνληα θαζεγεηή, θαζώο θαη ην πξνζσπηθό ηνπ Δξγαζηεξίνπ, ε θαηαζθεπή ηνπ ζπγθεθξηκέλνπ δηθηπαθνύ ηόπνπ κε ρξήζε ησλ γισζζώλ θαηαζθεπήο HTML θαη XHTML. To ινγηζκηθό πνπ ρξεζηκνπνηήζεθε γηα ηε δηακόξθσζε ηνπ δηθηπαθνύ ηόπνπ ήηαλ ην Microsoft Share Point Designer, δηόηη επηηξέπεη ζην πξνζσπηθό ηνπ Δξγαζηεξίνπ λα αιιάμεη ή λα πξνζζέζεη πιηθό πην εύθνια ζην κέιινλ. ηε ζπλέρεηα θαη ύζηεξα από δνθηκέο, επηιέρηεθε ε δεκηνπξγία ηνπ δηθηπαθνύ ηόπνπ ζε ηζηνζειίδεο πιαηζίσλ (Frames), γηα λα είλαη όζν πην πξαθηηθή ε ρξήζε ηνπ. Απηή ε θαηαζθεπή, όπσο έρεη αλαθεξζεί θαη ζην δεύηεξν θεθάιαην, καο επηηξέπεη λα έρνπκε πάληα δηαζέζηκα ηα θνπκπηά πεξηήγεζεο ζην δηθηπαθό ηόπν. ηελ παξνύζα εξγαζία βξίζθνληαη αξηζηεξά, ελώ ην ινγόηππν θαη ε επηινγή ηεο γιώζζαο ζην πάλσ 48

κέξνο. Ζ ελαιιαγή ησλ ηζηνζειίδσλ γίλεηαη δεμηά θαη θάησ, όηαλ παηήζνπκε ζε θάπνην ππεξζύλδεζκν. 5.3 Τιηθό - Σερλνινγία Οιόθιεξν ην πιηθό πνπ ππάξρεη ζε απηόλ ην δηθηπαθό ηόπν κνπ παξαρσξήζεθε από ηνλ ππεύζπλν ηνπ Δξγαζηεξίνπ θαη ηνπο ζπλεξγάηεο ηνπ. Πεξηιακβάλεη: θείκελν, θωηνγξαθηθό πιηθό από ην αξρείν ηνπ Δξγαζηεξίνπ, παξνπζηάζεηο ζε power point, θαζώο θαη βίληεν. Σν θείκελν ήηαλ ζε αξρεία word, ηα νπνία, ύζηεξα από αληηγξαθή ζην πξόγξακκα notepad, κεηαθέξζεθαλ θαη κνξθνπνηήζεθαλ θαηάιιεια κε ην πξόγξακκα Share point Designer.Οη εηθόλεο ήηαλ όιεο κέζα ζε αξρεία word, επίζεο, ηηο νπνίεο εμήγαγα θαη επεμεξγάζηεθα κε ην πξόγξακκα Adobe Photoshop Cs 4. Όζα αξρεία ρξεηαδόηαλ λα είλαη ζε κνξθή pdf κεηαηξάπεθαλ από κνξθή doc κε ηε ρξήζε ηνπ πξνγξάκκαηνο Adobe Acrobat. Οη παξνπζηάζεηο δηαθαλεηώλ πνπ ήηαλ ζε κνξθή power point κεηαηξάπεθαλ ζε κνξθή flash.ζ θόξκα επηθνηλσλίαο έγηλε κε θώδηθα κέζα από ην πξόγξακκα Share Point Designer. Όπνπ ππήξρε θσηνγξαθηθό πιηθό (πνιιέο θσηνγξαθίεο θάπνηνπ ζπλεδξίνπ ή αλαγόξεπζεο δηδάθηνξα) κεηαηξάπεθε ζε web photo gallery (δηαδηθηπαθή γθαιεξί θσηνγξαθηώλ - θσηνζήθε) κε ηε ρξήζε ηνπ πξνγξάκκαηνο Adobe Photoshop cs 4. Σν ινγόηππν πνπ ρξεζηκνπνηήζεθε αλήθεη ζην ηκήκα Φηινζνθηθώλ θαη Κνηλσληθώλ πνπδώλ ηνπ Παλεπηζηεκίνπ Κξήηεο, θαζώο θαη ην ρξώκα ηνπ δηθηπαθνύ ηόπνπ, πνπ επηιέρζεθε λα είλαη ην ίδην κε απηό πνπ έρεη ν δηθηπαθόο ηόπνο ηνπ ηκήκαηνο απηνύ, γηα λα ππάξρεη νκνηνκνξθία. Μεηά από ηε δηαδηθαζία θαηαζθεπήο, ηα αξρεία ζα κεηαθεξζνύλ ζηνλ εμππεξεηεηή πνπ ζα θηινμελήζεη απηόλ ηνλ δηθηπαθό ηόπν, κε ην πξόγξακκα Smart Ftp, κε ηνλ ηξόπν πνπ πεξηγξάθεηαη αλαιπηηθά ζην θεθάιαην 6. 49

5.4 Παξνπζίαζε ηνπ δηθηπαθνύ ηόπνπ ειίδα εηζαγσγήο Αλνίγνληαο ηε ζειίδα εηζαγωγήο (βι. Δηθόλα 8) ζην δηθηπαθό ηόπν εκθαλίδεηαη κηα θηλνύκελε παξνπζίαζε flash, ε νπνία γλσζηνπνηεί ηελ ύπαξμε ηνπ δηθηπαθνύ ηόπνπ. Παηώληαο ην θνπκπί «Δίζνδνο», ην νπνίν βξίζθεηαη αθξηβώο από θάησ, αλνίγεη ε αξρηθή ζειίδα ηνπ δηθηπαθνύ ηόπνπ. Δηθόλα 8: Ζ ζειίδα εηζαγσγήο ζηνλ δηθηπαθό ηόπν Αξρηθή ζειίδα ηελ αξρηθή ζειίδα (βι. Δηθόλα 9) ππάξρεη θείκελν ην νπνίν ελεκεξώλεη επηγξακκαηηθά ηνλ επηζθέπηε κε θάπνηα ζηνηρεία γηα ηελ ίδξπζε θαη ην ζθνπό ιεηηνπξγίαο ηνπ Δξγαζηεξίνπ. Αξηζηεξά ππάξρεη ην κελνύ επηινγώλ, ην νπνίν, ύζηεξα από ζπλελλόεζε κε ηα κέιε ηνπ Δξγαζηεξίνπ, απνθαζίζηεθε λα πεξηιακβάλεη ηηο αθόινπζεο θαηεγνξίεο: - Αξρηθή ζειίδα, ε νπνία ρξεζηκνπνηείηαη γηα ηελ επηζηξνθή ζηελ αξρηθή ζειίδα 50

- Δζωηεξηθόο θαλνληζκόο, όπνπ αλαθέξνληαη ζηνηρεία ζρεηηθά κε ηνλ έλλνκν ηξόπν ιεηηνπξγίαο ηνπ Δξγαζηεξίνπ, - Πξνζωπηθό, όπνπ εκθαίλνληαη ηα επώλπκα, ηα νλόκαηα θαη νη ειεθηξνληθέο δηεπζύλζεηο ησλ κειώλ ηνπ Δξγαζηεξίνπ θαζώο θαη ησλ εμσηεξηθώλ ζπλεξγαηώλ, - Δπίηηκνη δηδάθηνξεο ηνπ Σκήκαηνο, όπνπ αλαθέξνληαη νη ηξεηο Δπίηηκνη Γηδάθηνξεο ηνπ Σκήκαηνο, νη νπνίνη πξνηάζεθαλ από ηνλ Γηεπζπληή ηνπ Δξγαζηεξίνπ, - Έξεπλα, όπνπ γίλεηαη αλαθνξά ζε θάζε κία από ηηο εκπεηξηθέο κειέηεο ηνπ Δξγαζηεξίνπ (πνιπκεζηθό πιηθό πνπ πεξηιακβάλεη θσηνγξαθηθό πιηθό θαη επηιεγκέλα βίληεν κε ηε κνξθή demo από ηηο έξεπλεο ηνπ Δξγαζηεξίνπ) - Δπηζηεκνληθέο πλαληήζεηο, όπνπ αλαθέξνληαη ιεπηνκεξώο ηα ζπκπόζηα, ηα ζπλέδξηα θαη νη εκεξίδεο πνπ έρεη δηνξγαλώζεη θαηά θαηξνύο ην Δξγαζηήξην, - πλεξγαζία κε ηελ Κνηλωλία, όπνπ εκθαίλνληαη θείκελα - Πνιπκεζηθό πιηθό, ην νπνίν πεξηιακβάλεη θσηνγξαθηθό πιηθό από ην αξρείν ηνπ Δξγαζηεξίνπ, θαη - Δπηθνηλωλία, όπνπ εκθαίλεηαη θόξκα επηθνηλσλίαο πξνθεηκέλνπ ν επηζθέπηεο λα κπνξεί λα επηθνηλσλήζεη κε ηνλ Γηεπζπληή ηνπ Δξγαζηεξίνπ. Δηθόλα 9: Ζ αξρηθή ζειίδα 51

Αγγιηθή έθδνζε Παηώληαο ηελ αγγιηθή ζεκαία κεηαθεξόκαζηε από νπνηνδήπνηε ζεκείν ηνπ δηθηπαθνύ ηόπνπ ζηελ αγγιηθή έθδνζε (βι. Δηθόλα 10), ε νπνία πεξηιακβάλεη ηηο ίδηεο κε ηηο παξαπάλσ θαηεγνξίεο, αιιά ζηελ αγγιηθή γιώζζα, νη νπνίεο είλαη: - Home page - Bylaw - Staff - Honorary doctors - Research - Scientific meetings - Connection with Society - Multimedia - Contact us Δηθόλα 10: Ζ αγγιηθή έθδνζε 52

Δζσηεξηθόο θαλνληζκόο Δάλ παηήζεη θάπνηνο ζην θνπκπί «Δζσηεξηθόο θαλνληζκόο» κεηαθέξεηαη ζηε ζειίδα όπνπ πεξηγξάθεηαη ν εζσηεξηθόο θαλνληζκόο ιεηηνπξγίαο ηνπ Δξγαζηεξίνπ (βι. Δηθόλα 11). Δηθόλα 11: Ο εζσηεξηθόο θαλνληζκόο Πξνζσπηθό Αθξηβώο από θάησ βξίζθεηαη ην θνπκπί «Πξνζσπηθό». Παηώληαο ην καο κεηαθέξεη ζηε ζειίδα κε ηα πξνζσπηθά ζηνηρεία ησλ κειώλ ηνπ Δξγαζηεξίνπ, ηα νλόκαηα, ηα ηειέθσλα, ηηο δηεπζύλζεηο ηνπ ειεθηξνληθνύ ηαρπδξνκείνπ, θαζώο θαη ράξηε ηνπ ρώξνπ ηνπ Παλεπηζηεκίνπ γηα ηελ εύθνιε πξόζβαζε ζηα γξαθεία ηνπο (βι. Δηθόλα 12). 53

Δηθόλα 12: Ζ ζειίδα ηνπ πξνζσπηθνύ Παηώληαο πάλσ ζε θάζε όλνκα αλνίγεη λέα ζειίδα, πνπ πεξηέρεη ην βηνγξαθηθό ζεκείσκα θάζε κέινπο ηνπ Δξγαζηεξίνπ θαη δίλεη ζην ρξήζηε ηε δπλαηόηεηα λα ην εθηππώζεη. Από ηα βηνγξαθηθά ησλ κειώλ ηνπ Δξγαζηεξίνπ, ην πιένλ αλαιπηηθό είλαη απηό ηνπ Γηεπζπληή ηνπ Δξγαζηεξίνπ, ην νπνίν ρξεζηκνπνηείηαη σο παξάδεηγκα πεξηγξαθήο ηνπ ηξόπνπ πνπ ζα δνκεζνύλ (όηαλ εηνηκαζηνύλ) θαη ηα ππόινηπα βηνγξαθηθά. Παηώληαο πάλσ ζην όλνκα κεηαθεξόκαζηε ζε κία ζειίδα κε ηηο βαζηθέο ελόηεηεο ηνπ βηνγξαθηθνύ, νη νπνίεο είλαη: Γηεύζπλζε πνπδέο - Αθαδεκατθή εμέιημε Γηδαζθαιία Έξεπλα Γεκνζηεύζεηο Δπίηηκνη Γηδάθηνξεο Γηνξγάλσζε πκπνζίσλ πκκεηνρέο ζε πλέδξηα Γηαζύλδεζε κε ηελ θνηλσλία Γηάθνξα 54

Οη παξαπάλσ ελόηεηεο είλαη ππεξζύλδεζκνη (βι. Δηθόλα 13) θαη όηαλ παηήζνπκε ζε θάπνηνλ από απηνύο κεηαθεξόκαζηε ζην ζπγθεθξηκέλν ζεκείν (βι. Δηθόλα 14) ηνπ βηνγξαθηθνύ. Δηθόλα 13: Βαζηθέο ελόηεηεο ηνπ βηνγξαθηθνύ. 55

Δηθόλα 14: Γείγκα βηνγξαθηθνύ. ην παξόλ βηνγξαθηθό ζεκείσκα, ππάξρνπλ ππεξζύλδεζκνη πνπ αλ παηήζνπκε πάλσ ηνπο κεηαθεξόκαζηε ζε άιιεο ηζηνζειίδεο ζρεηηθέο κε ηνλ ππεξζύλδεζκν. Δπίζεο, ζηελ ελόηεηα «Γεκνζηεύζεηο», αλ παηήζνπκε ζηνλ ηίηιν θάζε δεκνζίεπζεο, απηή αλνίγεη ζε κνξθή pdf. ηελ ελόηεηα «Δπηκέιεηεο ζπιινγηθώλ ηόκσλ» (βι. Δηθόλα 15) αξθεί λα παηήζνπκε πάλσ ζηελ εηθόλα ηνπ βηβιίνπ γηα λα δνύκε ηα πεξηερόκελά ή ηνλ πξόινγν ηνπ θάζε βηβιίνπ. Δηθόλα 15: Ζ ελόηεηα «Δπηκέιεηεο ζπιινγηθώλ ηόκσλ» Οη ελόηεηεο «Γηαζύλδεζε κε ηελ θνηλσλία» θαη «Δπίηηκνη δηδάθηνξεο» πεξηγξάθνληαη παξαθάησ. 56

Δπίηηκνη δηδάθηνξεο Δπηζηξέθνπκε ζηελ αξρηθή ζειίδα θαη ζπλερίδνπκε πξνο ηα θάησ, όπνπ έρνπκε ην θνπκπί «Δπίηηκνη δηδάθηνξεο» ην νπνίν καο κεηαθέξεη ζηελ αληίζηνηρε ελόηεηα (βι. Δηθόλα 16). Παηώληαο ζηα νλόκαηα ησλ επίηηκσλ δηδαθηόξσλ (κπιέ) αλνίγεη μερσξηζηή ζειίδα γηα θάζε έλαλ από απηνύο (βι. Δηθόλα 17), πνπ είλαη ζρεηηθή κε ηελ αλαγόξεπζή ηνπο θαη πεξηιακβάλεη εηζεγήζεηο, νκηιίεο θαη θσηνγξαθηθό πιηθό ζε γθαιεξί θσηνγξαθηώλ από ην αξρείν ηνπ Δξγαζηεξίνπ, ην νπνίν βξίζθεηαη θαη ζηελ ηζηνζειίδα κε ην πνιπκεζηθό πιηθό. Δηθόλα 16: Δπίηηκνη δηδάθηνξεο 57

Δηθόλα 17: ειίδα αλαγόξεπζεο ηνπ Μίθε Θενδσξάθε ζε επίηηκν δηδάθηνξα ηνπ Σκήκαηνο Φηινζνθηθώλ θαη Κνηλσληθώλ πνπδώλ ηεο Φηινζνθηθήο ρνιήο ηνπ Παλεπηζηεκίνπ Κξήηεο. Δπηζηεκνληθέο ζπλαληήζεηο Σν επόκελν θνπκπί νλνκάδεηαη «Δπηζηεκνληθέο ζπλαληήζεηο» Δδώ αλαθέξνληαη θαηά αληίζηξνθε ρξνλνινγηθή ζεηξά νη επηζηεκνληθέο ζπλαληήζεηο πνπ έρνπλ δηνξγαλσζεί από ην Δξγαζηήξην. Παηώληαο πάλσ ζε θάζε κία αλνίγεη είηε ην πξόγξακκα ηεο δηνξγάλσζεο ζε κνξθή pdf, είηε μερσξηζηή ζειίδα κε δηαζέζηκεο νκηιίεο ή θσηνγξαθηθό πιηθό (βι. Δηθόλα 18). 58

Δηθόλα 18: Δπηζηεκνληθέο ζπλαληήζεηο. Γηαζύλδεζε κε ηελ θνηλσλία πλερίδνληαο πξνο ηα θάησ έρνπκε ην θνπκπί κε όλνκα «Γηαζύλδεζε κε ηελ θνηλσλία», ην νπνίν καο κεηαθέξεη ζην βηνγξαθηθό ηνπ Γηεπζπληή ηνπ Δξγαζηεξίνπ, ζηελ αληίζηνηρε ελόηεηα (βι. Δηθόλα 19), ε νπνία πεξηιακβάλεη ηξεηο ππεξζπλδέζκνπο. Παηώληαο ηνλ πξώην νδεγνύκαζηε ζε άιιε ηζηνζειίδα, ε νπνία πεξηέρεη ηέζζεξηο ππεξζπλδέζκνπο: έλαλ πνπ νδεγεί ζε κία νκηιία θαη άιινπο ηξεηο πνπ νδεγνύλ ζε παξνπζηάζεηο θάπνησλ νκηιηώλ ζε κνξθή flash. Ο επόκελνο ππεξζύλδεζκνο νδεγεί ζε έλα αξρείν pdf, ελώ ν ηειεπηαίνο ζε άιιε ηζηνζειίδα ζρεηηθή κε απηόλ. 59

Δηθόλα 19: Γηαζύλδεζε κε ηελ θνηλσλία Έξεπλα εηξά έρεη ην θνπκπί «Έξεπλα» ην πεξηερόκελν ηνπ νπνίνπ είλαη ππό θαηαζθεπή (ζα ρξεηαζηεί λα ζπκπεξηιεθζνύλ νη έξεπλεο όισλ ησλ κειώλ ηνπ Δξγαζηεξίνπ). Πνιπκεζηθό πιηθό Δπόκελν θνπκπί είλαη ην «πνιπκεζηθό πιηθό», όπνπ ε αληίζηνηρε ηζηνζειίδα (βι. Δηθόλα 20) πεξηέρεη θσηνγξαθηθό θαη νπηηθό πιηθό πξνεξρόκελν από ην αξρείν ηνπ Δξγαζηεξίνπ, θαζώο θαη ην αξρείν ησλ εξεπλεηώλ. Τπάξρνπλ ζπλνιηθά εθηά γθαιεξί θσηνγξαθηώλ από επηζηεκνληθέο ζπλαληήζεηο, ζπλέδξηα θαη ζπκπόζηα πνπ έρεη νξγαλώζεη ην Δξγαζηήξην θαηά ηε δηάξθεηα ηεο ιεηηνπξγίαο ηνπ. 60

Δηθόλα 20: Πνιπκεζηθό πιηθό. Παηώληαο ζηνλ πξώην ππεξζύλδεζκν (Φωηνγξαθηθό αξρείν: Αλαγόξεπζε Colwyn Trevarthen) κπαίλνπκε ζηελ γθαιεξί θσηνγξαθηώλ ηεο αλαγόξεπζεο ηνπ Καζεγεηή Colwyn Trevarthen (βι. Δηθόλα 21). ηελ αξηζηεξή πιεπξά ππάξρεη κηα θαηαθόξπθε ζεηξά από κηθξνγξαθίεο θσηνγξαθηώλ, όπνπ παηώληαο πάλσ ηνπο εκθαλίδνληαη ζηα δεμηά ζε κεγαιύηεξν κέγεζνο κε κηα επεμήγεζε από θάησ. 61

Δηθόλα 21: Γθαιεξί θσηνγξαθηώλ από ηελ αλαγόξεπζε ηνπ Καζεγεηή Colwyn Trevarthen ηε δεύηεξε επηινγή ζηελ ηζηνζειίδα ηνπ «πνιπκεζηθνύ πιηθνύ» νδεγνύκαζηε ζηε γθαιεξί θσηνγξαθηώλ ηεο αλαγόξεπζεο ηνπ Καζεγεηή Jerome Bruner (βι. Δηθόλα 22). Δδώ ππάξρεη έλαο πίλαθαο κε κηθξνγξαθίεο, πνπ εκθαλίδνληαη ζε κεγαιύηεξν κέγεζνο όηαλ ηηο παηήζνπκε, θαζώο θαη ε ιεδάληα. Παηώληαο ζηνπο αξηζκνύο ή ζηα βέιε κεηαθεξόκαζηε ζε επόκελεο ή πξνεγνύκελεο θσηνγξαθίεο, ελώ ην επάλσ βέινο καο νδεγεί ζηελ αξρηθή ζειίδα ηεο γθαιεξί. (βι. Δηθόλα 23). 62

Δηθόλα 22: Ζ γθαιεξί θσηνγξαθηώλ από ηελ αλαγόξεπζε ηνπ Καζεγεηή Jerome Bruner Δηθόλα 23: Παηώληαο ζε κία κηθξνγξαθία βιέπνπκε ηε θσηνγξαθία ζε κεγαιύηεξν κέγεζνο, θαζώο θαη ηε ιεδάληα ηεο. 63

Οη επόκελεο θαηά ζεηξά γθαιεξί, ησλ νπνίσλ ε ιεηηνπξγία είλαη ίδηα κε ηελ παξαπάλσ, κε κόλε δηαθνξά όηη απνπζηάδνπλ νη αξηζκνί ζην πάλσ κέξνο ηεο εηθόλαο, είλαη: Φσηνγξαθηθό αξρείν: Αλαγόξεπζε ηνπ Μίθε Θενδσξάθε International interdisciplinary Symposium, Heraklion 21-22/10/2002 We Share, Therefore We Are. In honour of Jerome Bruner. International interdisciplinary Symposium, Rethymnon, 1-7/10/1998 Mutual Understanding: Between Nature, Nurture and Culture. Department of Psychology, University of Crete & Norwegian Academy of Science and Letters. Αθίζεο από ην ζπλέδξην "International interdisciplinary Symposium, Hersonisos 10-11/3/2006. Music and Universal Harmony. In honour of Mikis Σheodorakis. Department of Philosophy and Social Science, University of Crete". Φσηνγξαθηθό αξρείν ηνπ εξγαζηεξίνπ από ην ζπλέδξην "International interdisciplinary Symposium, Hersonisos 10-11/3/2006. Music and Universal Harmony. In honour of Mikis Theodorakis. Department of Philosophy and Social Science, University of Crete (βι. Δηθόλα 24). Δηθόλα 24: Ζ γθαιεξί θσηνγξαθηώλ από ην ζπλέδξην Music and Universal Harmony. In honour of Mikis Theodorakis 64

Σέινο ππάξρεη ην «βίληεν από ηηο έξεπλεο ηνπ εξγαζηεξίνπ» όπνπ νδεγεί ζε κηα ζειίδα πνπ ππάξρνπλ βίληεν από έξεπλεο ηα νπνία ζα πξνζηεζνύλ ζηελ ελόηεηα «Έξεπλα» όηαλ εηνηκαζηεί. Δπηθνηλσλία Σειεηώλνληαο ηελ πεξηήγεζε, ζπλαληάκε ην ηειεπηαίν θνπκπί πνπ ππάξρεη, ην νπνίν νλνκάδεηαη «Δπηθνηλσλία». Παηώληαο ην, αλνίγεη κία ζειίδα πνπ απνηειείηαη από κία θόξκα επηθνηλσλίαο (βι. Δηθόλα 25). Δθεί νπνηνζδήπνηε ρξήζηεο έρεη ηε δπλαηόηεηα λα απνζηείιεη θάπνην κήλπκα κέζσ ειεθηξνληθνύ ηαρπδξνκείνπ ζηνλ δηαρεηξηζηή ηνπ δηθηπαθνύ ηόπνπ. Δηθόλα 25: Ζ θόξκα επηθνηλσλίαο Ο ρξήζηεο, αθνύ πιεθηξνινγήζεη ηα ζηνηρεία πνπ ηνπ δεηνύληαη, ζηε ζπλέρεηα πξέπεη λα παηήζεη «απνζηνιή». ε απηό ην ζεκείν κεηαθέξεηαη απηόκαηα όπνην θείκελν ππάξρεη από ηε θόξκα ζην πξόγξακκα ειεθηξνληθνύ ηαρπδξνκείνπ ην νπνίν είλαη εγθαηεζηεκέλν ζηνλ ππνινγηζηή ηνπ. Σν κήλπκα ζα ζηαιεί όηαλ παηήζεη «απνζηνιή» κέζα από ην πξόγξακκα (ην θνπκπί θαίλεηαη παξαθάησ ζηελ Δηθόλα 26). 65

Δηθόλα 26: Σν παξάζπξν ηνπ πξνγξάκκαηνο ειεθηξνληθνύ ηαρπδξνκείνπ κεηά ην πάηεκα ηνπ θνπκπηνύ «απνζηνιή» ζηε θόξκα επηθνηλσλίαο. 66

Κεθάιαην 6 Γηαδηθαζία «αλεβάζκαηνο» (Upload). ε απηό ην θεθάιαην επεμεγείηαη ν ηξόπνο κε ηνλ νπνίν ηα αξρεία πνπ απνηεινύλ ην δηθηπαθό ρώξν ζα «αλεβνύλ» ζηνλ εμππεξεηεηή, ν νπνίνο ζα ηα θηινμελήζεη. Σν πξόγξακκα Smart ftp θαη ην «αλέβαζκα» αξρείσλ ζηνλ εμππεξεηεηή. Έλαο δηθηπαθόο ηόπνο, ηηο πεξηζζόηεξεο θνξέο, απνηειείηαη από κεγάιν αξηζκό αξρείσλ, ε πξνζπέιαζε ησλ νπνίσλ από ηνπο ρξήζηεο ηνπ δηαδηθηύνπ απαηηεί ηελ ηνπνζέηεζή ηνπο ζε θάπνην εμππεξεηεηή (server), ν νπνίνο ζα πξέπεη λα έρεη πξόζβαζε ζην δηαδίθηπν θαη λα είλαη εγθαηεζηεκέλνο, έηζη ώζηε λα κπνξεί λα παξνπζηάζεη ηα αξρεία ηνπ δηθηπαθνύ ηόπνπ. Γηα λα ηνπνζεηεζνύλ ηα αξρεία, ρξεηάδεηαη ζπλήζσο έλα πξόγξακκα ftp client. Από ηα πνιιά ππάξρνληα ζρεηηθά πξνγξάκκαηα, γηα ηε δεκηνπξγία ηνπ δηθηπαθνύ ηόπνπ ηνπ Δξγαζηεξίνπ Φπρνινγίαο, επειέγε ην smartftp (βι. Δηθόλα 27). Δηθόλα 27: Σν πξόγξακκα Smart Ftp Γηα λα «αλεβάζνπκε» ηα αξρεία ζην δηαθνκηζηή εμππεξέηεζεο (server) ρξεηάδεηαη λα γλσξίδνπκε ηε δηεύζπλζή ηνπ, ε νπνία έρεη ηε κνξθή ftp://ftp.kati.gr/com, ην όλνκα ηνπ 67