Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tutprial fp2002gr

  • Login to see the comments

  • Be the first to like this

Tutprial fp2002gr

  1. 1. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr Σύντομος οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων με το FrontPage 2002 ελληνική έκδοση ΤΟΥ ΣΑΛΟΝΙΚΙΔΗ ΓΙΑΝΝΗ, ΔΑΣΚΑΛΟΥ Περιεχόμενα 1. Εισαγωγή 2. Περιεχόμενα εκπαιδευτικών ιστοσελίδων 3. Γνωριμία με το περιβάλλον του Microsoft© FrontPage© 2002 4. Προετοιμασία – Αρχικός σχεδιασμός 5. Δημιουργία τοποθεσίας Web I. Δημιουργία κενής τοποθεσίας Web II. Δημιουργία τοποθεσίας Web από πρότυπο 6. Αρχική σελίδα – Ρυθμίσεις I. Τίτλος σελίδας II. Γλώσσα Κωδικοποίησης 7. Εισαγωγή κειμένου σε ιστοσελίδα 8. Εισαγωγή γραφικών – χρωμάτων σε ιστοσελίδα I. Γενικά II. Εισαγωγή εικόνων III. Ορισμός χρώματος ή εικόνας ως φόντο IV. Ορισμός χρώματος υπερσυνδέσμων V. Προσθήκη θέματος 9. Εισαγωγή – Μορφοποίηση πινάκων και κελιών 10. Δημιουργία μενού πλοήγησης I. Μενού πλοήγησης που βασίζεται σε πρότυπο II. Μενού πλοήγησης που βασίζεται σε δομή περιήγησης 11. Δημιουργία υπερσυνδέσμων 12. Δημοσίευση σε διακομιστή Web 1. Εισαγωγή Η δημιουργία και η δημοσίευση στο διαδίκτυο μιας τοποθεσίας Web είναι μια σχετικά απλή διαδικασία που δεν απαιτεί ιδιαίτερες γνώσεις. Ιστοσελίδες μπορούμε να δημιουργήσουμε ακόμη και με το ταπεινό Σημειωματάριο (Notepad) των Windows. Επιπλέον όλα τα γνωστά προγράμματα επεξεργασίας κειμένου υποστηρίζουν εγγενώς την αποθήκευση αρχείων ως ιστοσελίδων Web. Υπάρχουν όμως προγράμματα που εξειδικεύονται στη δημιουργία σελίδων Web και διαθέτουν όλα τα απαραίτητα εργαλεία που μας επιτρέπουν να πετύχουμε μια πολύ εντυπωσιακή παρουσία στο διαδίκτυο. Μεταξύ των προγραμμάτων αυτών συγκαταλέγεται και το Microsoft© FrontPage© 2002 το οποίο είναι εγκατεστημένο στα περισσότερα σχολικά εργαστήρια. Όπως θα διαπιστώσετε στη συνέχεια, για την εκμάθηση των λειτουργιών του προγράμματος δεν χρειάζεται να αφιερώσετε πολύ χρόνο. Αυτό δε σημαίνει πως η δημιουργία της προσωπικής σας ιστοσελίδας ή των ιστοσελίδων του σχολείου σας θα ολοκληρωθεί μέσα σε σύντομο χρονικό διάστημα, καθώς υπάρχουν πολλοί παράμετροι που θα πρέπει να συνυπολογίσετε πριν αγγίξετε τον τελικό σας στόχο Στον οδηγό που ακολουθεί, εκτός των τεχνικών θεμάτων, θα σχολιάσουμε και όλα αυτά που πρέπει να λάβετε υπόψη σας, όπως το περιεχόμενο ενός εκπαιδευτικού ιστοτόπου, την αισθητική, τη λειτουργικότητα, την εργονομία κλπ. έτσι ώστε να είστε σε θέση να αντιμετωπίσετε τα διάφορα μικρά και μεγάλα ζητήματα που προκύπτουν κατά τον σχεδιασμό και τη δημιουργία ιστοσελίδων και μάλιστα εκπαιδευτικών. 1
  2. 2. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr 2. Περιεχόμενα εκπαιδευτικών ιστοσελίδων Αν και κάποια στοιχεία θεωρούνται απαραίτητα σε οποιοδήποτε είδος ιστοσελίδας, στην πραγματικότητα οι προσωπικές εκπαιδευτικές σελίδες διαφέρουν σημαντικά σε σχέση με αυτές ενός σχολικού δικτυακού τόπου. Έτσι, αν πρόκειται για ιστοσελίδα εκπαιδευτικού, ακολουθούμε σε γενικές γραμμές το σχεδιασμό που έχουν οι προσωπικές ιστοσελίδες διατηρώντας όμως τον εκπαιδευτικό χαρακτήρα τους. Στην περίπτωση αυτή μπορούμε να περιλάβουμε στοιχεία όπως: • Πληροφορίες για τον υπεύθυνο διαχείρισης του δικτυακού τόπου. Συνήθως αναγράφεται το ονοματεπώνυμο του διαχειριστή στο κάτω μέρος των σελίδων καθώς και μια έγκυρη διεύθυνση ηλεκτρονικού ταχυδρομείου (email). • Σελίδα με βιογραφικά στοιχεία του κατόχου του δικτυακού τόπου. Στις περισσότερες περιπτώσεις ταυτίζεται με το διαχειριστή των σελίδων. Εδώ μπορούμε να αναφέρουμε ορισμένα προσωπικά στοιχεία, σπουδές, τίτλους, εκπαιδευτική και κοινωνική δράση, τα ενδιαφέροντά μας κλπ. Το τι θα περιλάβουμε σ’ αυτή τη σελίδα εξαρτάται από ποιες πληροφορίες επιθυμούμε να γνωρίζουν οι επισκέπτες για την προσωπικότητά μας και την εκπαιδευτική μας κατάσταση. • Σύντομο κείμενο με αναφορά στους στόχους του δικτυακού μας τόπου. Αυτό μπορεί να περιληφθεί, ως εισαγωγικό κείμενο, στην αρχική μας σελίδα και δεν πρέπει να υπερβαίνει τις 1-2 παραγράφους. • Χάρτη πλοήγηση (site map) Ο χάρτης πλοήγησης μπορεί να αποτελεί ξεχωριστή σελίδα και να περιλαμβάνει πληροφορίες για το περιεχόμενο και τη δομή των επιμέρους σελίδων καθώς και τον τρόπο πλοήγησης. Επιπλέον καλό είναι να διαθέτει υπερσυνδέσμους για όλες τις σελίδες του δικτυακού μας τόπου. • Κανόνες δεοντολογίας – Όρους χρήσης Σελίδα όπου αναφέρονται οι προϋποθέσεις χρήσης των πληροφοριών που θα βρουν οι επισκέπτες στις σελίδες μας καθώς και τα πνευματικά δικαιώματα που πιθανόν να συνοδεύουν τις πληροφορίες αυτές. • Εργασίες - Διδακτικές προτάσεις - Άρθρα Ίσως ο κυριότερος λόγος που μας οδήγησε στην απόφαση να δημιουργήσουμε έναν προσωπικό δικτυακό τόπο είναι η ανάγκη να μοιραστούμε με άλλους εκπαιδευτικούς ορισμένες καινοτόμες ιδέες και προτάσεις που αφορούν στην εκπαιδευτική διαδικασία. Οι εργασίες αυτές πρέπει να συνοδεύονται από την απαραίτητη βιβλιογραφία ή/και τις πηγές που χρησιμοποιήσαμε, ενώ στην περίπτωση που θα θέλαμε να δημοσιεύσουμε εργασίες άλλων συναδέλφων θα πρέπει πρώτα να εξασφαλίσουμε την συγκατάθεσή τους. • Εκπαιδευτικούς συνδέσμους – Πηγές πληροφόρησης Ένας ολοκληρωμένος εκπαιδευτικός δικτυακός τόπος περιέχει προτάσεις για αξιόλογα sites, ταξινομημένα ανά θεματική ενότητα, ώστε να αποτελέσουν μια πολύτιμη και αξιόπιστη πηγή πληροφόρησης για όλους τους επισκέπτες. Στο περιεχόμενο ενός σχολικού δικτυακού τόπου παρουσιάζονται αρκετές ουσιώδεις διαφοροποιήσεις, καθώς δεν είναι σωστό από δεοντολογικής σκοπιάς να συμπεριλάβουμε προσωπικές πληροφορίες ή να προβάλουμε το ατομικό μας έργο. Εξάλλου στο σχεδιασμό του δικτυακού τόπου του σχολείου μας θα πρέπει να λάβουμε υπόψη τη γενικότερη εκπαιδευτική πολιτική της σχολικής μονάδας, τη βαθμίδα εκπαίδευσης στην οποία ανήκει αλλά και τις ιδιαίτερες ανάγκες της τοπικής κοινωνίας. Επομένως, εκτός των γενικών στοιχείων, ένας σωστά δομημένος δικτυακός τόπος σχολείου πρέπει: • Να δίνει πληροφορίες για την ταχυδρομική διεύθυνση, τηλέφωνο και την ηλεκτρονική διεύθυνση (email) του σχολείου. • Να περιλαμβάνει στοιχεία για το εκπαιδευτικό προσωπικό που το στελεχώνει (ονοματεπώνυμο, ειδικότητα και τμήματα όπου διδάσκουν οι εκπαιδευτικοί και όχι προσωπικά στοιχεία) • Να περιέχει πληροφορίες για την τοποθεσία και την ιστορία του σχολείου και ίσως πληροφορίες για την πόλη και το νομό. 2
  3. 3. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr Οι πληροφορίες αυτές μπορεί να είναι γεωγραφικές, σχετικές με τα αξιοθέατα της περιοχής, τα μνημεία, την τοπική ιστορία, το περιβάλλον κλπ. • Να δίνει πληροφορίες για τις δραστηριότητες του σχολείου (εκδηλώσεις, γιορτές, επισκέψεις, νέα, ανακοινώσεις) • Να προβλέπει ιδιαίτερο χώρο (σελίδες) για την προβολή των εργασιών των μαθητών. • Να προσφέρει χώρο για την παρουσίαση των εργασιών ή των απόψεών των εκπαιδευτικών του σχολείου για εκπαιδευτικά ζητήματα. • Να διαθέτει κατάλογο εκπαιδευτικών συνδέσμων ταξινομημένων με τέτοιο τρόπο, ώστε να είναι δυνατή η αξιοποίησή τους από τους μαθητές του σχολείου. Στην περίπτωση αυτή ο υπεύθυνος του δικτυακού τόπου θα πρέπει προηγουμένως να έχει αξιολογήσει αυτούς τους συνδέσμους καθώς αυτοί μπορεί να αποτελέσουν την πρώτη επαφή των μαθητών με το διαδίκτυο • Να διαθέτει τα κατάλληλα εργαλεία (forums, chat κλπ.) που να βοηθούν την επικοινωνία και τη συνεργασία των μαθητών και του εκπαιδευτικού προσωπικού με μαθητές και εκπαιδευτικούς άλλων σχολείων. Επιπλέον ο υπεύθυνος ανάπτυξης του δικτυακού τόπου θα πρέπει να δώσει ιδιαίτερη προσοχή στο μενού πλοήγησης, στην επιλογή της κατάλληλης γραμματοσειράς καθώς και στην επιλογή των κατάλληλων χρωμάτων και γραφικών των σελίδων. Όμως για τα ζητήματα αυτά θα γίνει λόγος στη συνέχεια του οδηγού με περισσότερες λεπτομέρειες και επεξηγήσεις. 3. Γνωριμία με το περιβάλλον του Microsoft© FrontPage© 2002 Αφού πατήσετε το εικονίδιο του προγράμματος Microsoft© FrontPage© 2002 θα εμφανιστεί η επιφάνεια εργασίας του προγράμματος (εικόνα 1). (Εικόνα 1. Η επιφάνεια εργασίας του Ms Frontpage 2002) 1) Γραμμή τίτλου Αναφέρεται η διαδρομή στην οποία είναι αποθηκευμένος ο φάκελος Web στον υπολογιστή μας. 3
  4. 4. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr 2) Γραμμή μενού Περιλαμβάνει το μενού όλων των εντολών του προγράμματος. 3) Γραμμές εργαλείων Περιλαμβάνουν κουμπιά με τις συνηθέστερες λειτουργίες του προγράμματος. Εξ ορισμού εμφανίζονται οι γραμμές εργαλείων «βασική» και «μορφοποίηση». Για να εμφανίσουμε άλλες γραμμές εργαλείων ακολουθούμε τη διαδρομή: Προβολή > Γραμμές εργαλείων και επιλέγουμε αυτή που θέλουμε. 4) Λίστα φακέλων Στο παράθυρο αυτό εμφανίζονται όλα τα αρχεία και οι φάκελοι που αποτελούν τον δικτυακό μας τόπο. Κάνοντας διπλό κλικ σε οποιοδήποτε από τα αρχεία βρίσκονται στη λίστα φακέλων μπορούμε να το εμφανίσουμε στον κεντρικό παράθυρο. 5) Προβολές Το πλαίσιο προβολών μας επιτρέπει να αλλάξουμε την προβολή της ιστοσελίδας μας. Πατώντας κάποιο από τα έξι κουμπιά αλλάζει το περιεχόμενο του κεντρικού παραθύρου του προγράμματος. Προβολή Περιγραφή Σελίδα Είναι η εξορισμού προβολή. Στο κεντρικό παράθυρο του προγράμματος δημιουργούμε ή επεξεργαζόμαστε τις ιστοσελίδες μας Φάκελοι Στο κεντρικό παράθυρο εμφανίζονται όλα τα αρχεία και οι φάκελοι του δικτυακού μας τόπου. Εκθέσεις Εμφανίζονται διάφορες πληροφορίες για τον δικτυακό μας τόπο. Οι πιο χρήσιμες λειτουργίες αφορούν στις εκθέσεις για τους σπασμένους υπερ-συνδέσμους των ιστοσελίδων μας και η αναφορά για το χρόνο φόρτωσης και μέγεθος των σελίδων μας. Περιήγηση Απεικονίζεται η ιεραρχική δομή του δικτυακού μας τόπου. Η προβολή αυτή είναι ιδιαίτερα χρήσιμη όταν θέλουμε π.χ. να προσθέσουμε μενού πλοήγησης στις σελίδες μας το οποίο να ενημερώνεται αυτόματα σε κάθε αλλαγή (προσθήκη ή αφαίρεση σελίδων) Υπερ-συνδέσεις Με την προβολή αυτή μπορούμε να δούμε τον τρόπο με τον οποίο είναι οργανωμένοι οι σύνδεσμοι μας και πώς συνδέονται μεταξύ τους οι ιστοσελίδες. Εργασίες Εμφανίζονται όλες οι εργασίες που έχουμε να ολοκληρώσουμε ώστε να λειτουργήσει σωστά ο δικτυακός μας τόπος (things to do) 6) Γραμμή τίτλου αρχείου 4
  5. 5. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr Εμφανίζεται το όνομα του αρχείου που επεξεργαζόμαστε. 7) Καρτέλες προβολής ιστοσελίδας Υπάρχουν τρεις καρτέλες: Κανονικό (εξ ορισμού) Στην προβολή αυτή εργαζόμαστε και δημιουργούμε την ιστοσελίδα μας. Η σελίδα εμφανίζεται σε κατάσταση επεξεργασίας και διαφέρει λίγο σε σχέση με την εμφάνιση που θα έχει αν την δούμε με ένα πρόγραμμα περιήγησης. Κείμενο HTML Παρουσιάζει τον κώδικα HTML Με τον οποίο δημιουργήθηκε η ιστοσελίδα μας. Μπορούμε να επέμβουμε και να τροποποιήσουμε στοιχεία εάν γνωρίζουμε HTML. Ορισμένες φορές είναι ο μοναδικός τρόπος για να προσθέσουμε διαδραστικά στοιχεία. Προεπισκόπηση Πατώντας την καρτέλα αυτή βλέπουμε τη σελίδα μας όπως θα εμφανίζεται σε ένα πρόγραμμα περιήγησης (browser). Στην προβολή αυτή μπορούμε να δούμε πώς θα εμφανίζεται η ιστοσελίδα μας, αλλά δεν μπορούμε να την επεξεργαστούμε. 4. Προετοιμασία – Αρχικός σχεδιασμός Πριν προχωρήσετε στη δημιουργία του φακέλου Web του δικτυακού σας τόπου θα πρέπει να κάνετε ορισμένες προεργασίες. Αρχικά δημιουργήστε έναν φάκελο και ταξινομήστε εκεί όλο το υλικό που επιθυμείτε να συμπεριλάβετε στον δικτυακό σας τόπο σε ηλεκτρονική μορφή. Τοποθετήστε χωριστά τα κείμενα, τις εικόνες, τους ήχους κλπ. Η σωστή ταξινόμηση θα σας βοηθήσει αργότερα να τοποθετήσετε το κάθε αρχείο στη σωστή θέση μέσα στον φάκελο Web που θα δημιουργήσει αυτόματα το Ms Front Page. Μην παραλείψετε να ελέγξετε αν το υλικό αυτό προστατεύεται από πνευματικά δικαιώματα. Στην περίπτωση αυτή θα πρέπει να εξασφαλίσετε την άδεια χρήσης από τους δημιουργούς. Αποφύγετε τα αρχεία με μεγάλο μέγεθος καθώς αυτό ενδέχεται να δημιουργήσει προβλήματα στον χρόνο φόρτωσης των σελίδων σας. Σκεφτείτε ποια θα είναι η διάταξη μιας τυπικής σελίδας του δικτυακού σας τόπου. Θα ήταν εξαιρετικά χρήσιμο να φτιάξετε σε χαρτί ένα πρόχειρο σχέδιο της διάταξης μιας ιστοσελίδας σας. Αν δυσκολεύεστε να πάρετε αποφάσεις, να θέσουμε υπόψη σας μερικές βασικές αρχές: • Συνήθως στο επάνω τμήμα γράφουμε τον τίτλο του δικτυακού μας τόπου με μεγάλα γράμματα και ενδεχομένως βάζουμε και μια χαρακτηριστική εικόνα γνωστή ως λογότυπο (logo). Αυτό το τμήμα είναι στενόμακρο • Το μενού πλοήγησης μπαίνει ακριβώς κάτω από τον τίτλο (αν είναι οριζόντιο) ή αριστερά (αν είναι κάθετο) και καταλαμβάνει περίπου το 1/6 του πλάτος της σελίδας. Προσοχή, μην του βάλετε πολλές επιλογές. Κρατήστε το μενού απλό. • Στο κεντρικό τμήμα της σελίδας γράφουμε συνήθως ένα μήνυμα "καλωσορίσματος", σύντομη περιγραφή, μια εικόνα κλπ. Επειδή όμως θα διαπιστώσετε πως περισσεύει πολύς χώρος, μπορείτε να βάλετε κι έναν πίνακα περιεχομένων (site map) του δικτυακού σας τόπου. Δηλ. να γράψετε αυτά που έχετε στο μενού με μια σύντομη περιγραφή. Προβλέψτε κι έναν χώρο για τα νέα, τις ενημερωμένες σελίδες σας κλπ. • Στο κάτω τμήμα τοποθετούμε ένα οριζόντιο μενού πιο απλό όμως από αυτό που θα έχετε ως κύριο μενού πλοήγησης. Καλό είναι να μην περιέχει γραφικά αλλά να είναι απλώς σύνδεσμοι κειμένου • Κάτω από το οριζόντιο μενού μπορείτε να βάλετε πληροφορίες, όπως: ποιος είναι ο διαχειριστής του δικτυακού τόπου, πότε ενημερώθηκε για τελευταία φορά η κάθε σελίδα, πληροφορίες επικοινωνίας (e-mail) κλπ. 5
  6. 6. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr Σύμφωνα με τις παραπάνω προτάσεις το πρόχειρο σχέδιο μιας τυπικής ιστοσελίδας πρέπει να μοιάζει με το σχέδιο της εικόνας 2. Λογότυπο Τίτλος σελίδας Κάθετο Μήνυμα του διαχειριστή για Ανακοινώσεις – Νέα μενού τον δικτυακό τόπο κλπ. πλοήγησης 1η ανακοίνωση 2η ανακοίνωση Αρχική ……….. 1η σελίδα 5η ανακοίνωση 2η σελίδα Ενημερωμένες σελίδες ή σελίδες με ιδιαίτερο ενδιαφέρον ………… 1η σελίδα 6η σελίδα 2η σελίδα κ.ο.κ. επικοινωνία Περιγραφή ιστοσελίδων (site map) 1η σελίδα (περιγραφή) 2η σελίδα (περιγραφή) …………………… 6η σελίδα (περιγραφή) Οριζόντιο μενού πλοήγησης Αρχική 1η σελίδα 2η σελίδα ……….. 6ησελίδα επικοινωνία Όνομα διαχειριστή e-mail Ημερομηνία ενημέρωσης (Εικόνα 2. Σκαρίφημα διάταξης τυπικής ιστοσελίδας) Η διάταξη που προτείνουμε είναι η διάταξη μιας τυπικής ιστοσελίδας. Βέβαια η τελική εμφάνιση των σελίδων εξαρτάται από πολλούς παράγοντες, όπως το κοινό στο οποίο απευθύνονται, το γενικότερο ύφος του δημιουργού, την αισθητική εντύπωση που θέλουμε να δημιουργήσουμε κλπ. Αυτό όμως που πρέπει να τηρήσουμε ευλαβικά είναι το ενιαίο ύφος σε όλες τις σελίδες και η ομοιομορφία του μενού πλοήγησης (πλην λίγων εξαιρέσεων∗). Σε διαφορετική περίπτωση θα μπερδέψουμε τους επισκέπτες μας και θα καταστήσουμε προβληματική την πλοήγησή τους. Ένα άλλο σημείο που χρήζει προσοχής είναι η χρήση υπογραμμισμένου κειμένου. Μεταξύ των χρηστών του διαδικτύου είναι διαδεδομένη η σύμβαση πως καθετί υπογραμμισμένο αποτελεί υπερσύνδεσμο. Οπότε σε περίπτωση που θέλετε να δώσετε έμφαση σε κάποιο κείμενο επιλέξτε διαφορετική μέθοδο επισήμανσης (π.χ. διαφορετικό μέγεθος γραμματοσειράς, διαφορετικό χρώμα κλπ.) 5. Δημιουργία τοποθεσίας Web Υπάρχουν δύο τρόποι για να δημιουργήσετε μια τοποθεσία Web. Μπορείτε: •να δημιουργήσετε τοποθεσία web που να περιέχει μια βασική δομή στην οποία αργότερα μπορείτε να προσθέσετε ιστοσελίδες και • να χρησιμοποιήσετε ένα έτοιμο πρότυπο τοποθεσίας Web Όταν δημιουργείται μια νέα τοποθεσία web το πρόγραμμα δημιουργεί ένα φάκελο που έχει την ονομασία της τοποθεσίας (εξ ορισμού: myweb). Στον φάκελο αυτό θα πρέπει να αποθηκεύετε όλα τα αρχεία (ιστοσελίδες, εικόνες, ήχοι κλπ.) που αποτελούν τον δικτυακό σας τόπο. Στον ίδιο φάκελο θα πρέπει να μεταφέρετε και όλα τα αρχεία που έχετε συγκεντρώσει κατά το στάδιο του αρχικού σχεδιασμού.  Ορισμένες φορές μπορεί να διαφέρει η διάταξη της αρχικής σελίδας σε σχέση με τις υπόλοιπες σελίδες. 6
  7. 7. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr Παρακάτω θα εξετάσουμε τον τρόπο δημιουργίας μιας κενής τοποθεσίας web και μιας τοποθεσίας web βασισμένης σε πρότυπο (το Ms FrontPage 2002 περιλαμβάνει 10 έτοιμα πρότυπα). I. Δημιουργία κενής τοποθεσίας Web • Ανοίξτε το FrontPage • Πηγαίνετε Αρχείο > Δημιουργία > Σελίδα ή περιεχόμενο web. Κάντε κλικ. • Στη δεξιά πλευρά της αρχικής οθόνης του προγράμματος θα ανοίξει μια καρτέλα. Στην καρτέλα αυτή επιλέξτε: Δημιουργία > Κενή τοποθεσία web • Από το παράθυρο που θα ανοίξει (εικόνα 3 -α) επιλέξτε: Κενή τοποθεσία web • Στο ίδιο παράθυρο δεξιά πηγαίνετε στις Επιλογές > Καθορίστε τη θέση της νέας τοποθεσίας web, πατήστε μέσα στο πλαίσιο κειμένου και πληκτρολογήστε την ονομασία που θα έχει ο φάκελος web. • Πατήστε ΟΚ. II. Δημιουργία τοποθεσίας Web από πρότυπο Την ίδια διαδικασία ακολουθούμε και για τη δημιουργία τοποθεσίας web βασισμένης σε πρότυπο. Με τη διαφορά πως επιλέγουμε κάποιο άλλο πρότυπο που ταιριάζει όσο γίνεται περισσότερο με το είδος του δικτυακού τόπου που θέλουμε να δημιουργήσουμε. Έτσι, για παράδειγμα, αν θέλουμε να φτιάξουμε μια προσωπική ιστοσελίδα, επιλέγουμε το πρότυπο «Προσωπικό περιεχόμενο» (εικόνα 3 -β). (Εικόνα 3. Δημιουργία τοποθεσίας Web) Στο παράδειγμα η τοποθεσία που δημιουργήθηκε έχει την ονομασία web1 και αποθηκεύτηκε στην επιφάνεια εργασίας του υπολογιστή μας. (Σημείωση: Φυσικά μπορείτε να ορίσετε άλλο όνομα στο φάκελο και άλλη θέση αποθήκευσης) Σε λίγα δευτερόλεπτα θα παρατηρήσετε πως στη λίστα φακέλων (αριστερό τμήμα της οθόνης) θα εμφανιστούν κάποιοι φάκελοι και μια σελίδα με το όνομα index.htm (εικόνα 4). Αν χρησιμοποιήσατε πρότυπο τότε θα εμφανιστούν περισσότερα αρχεία, ανάμεσα στα οποία υπάρχει επίσης το αρχείο με την ονομασία index.htm (εικόνα 4). Το αρχείο αυτό είναι η αρχική σας σελίδα. Στην 1η περίπτωση δημιουργήθηκαν οι απαραίτητοι φάκελοι καθώς και η αρχική σελίδα index.htm, μόνο που η σελίδα αυτή είναι κενή και θα πρέπει να κάνετε όλη την υπόλοιπη δουλειά μόνοι σας. 7
  8. 8. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr Στη 2η περίπτωση (πρότυπο) δημιουργήθηκαν όλες οι σελίδες που έχει συνήθως ένας προσωπικός δικτυακός τόπος, τα μενού πλοήγησης και όλα τα στοιχεία που είναι απαραίτητα για να λειτουργήσει ο δικτυακός τόπος αλλά κι εδώ απαιτείται αρκετή δουλειά. Θα χρειαστεί να επεξεργαστείτε κάθε σελίδα χωριστά, να αλλάξετε ονομασίες στα αρχεία, να προσθέσετε ή να αφαιρέσετε σελίδες, να αλλάξετε χρωματισμούς κλπ. Πάντως η χρήση προτύπου θα σας απαλλάξει από αρκετή εργασία, ιδιαίτερα τον πρώτο καιρό της ενασχόλησής σας με τη δημιουργία ιστοσελίδων. Για να επεξεργαστείτε μια ιστοσελίδα κάντε διπλό κλικ στο όνομα της ιστοσελίδας που βρίσκεται στη λίστα φακέλων κι αυτή θα εμφανιστεί στο κεντρικό παράθυρο του προγράμματος. Ι. Κενή τοποθεσία Web II. Τοποθεσία Web προσωπικού περιεχομένου (Εικόνα 4) 6. Αρχική σελίδα - Ρυθμίσεις Όπως είδαμε παραπάνω κάθε δικτυακός τόπος έχει μια αρχική σελίδα. Αυτή στη συντριπτική πλειοψηφία ονομάζεται index.htm ή index.html. Πριν προχωρήσετε στην προσθήκη του περιεχομένου και τη διαμόρφωση της σελίδας αυτής, θα πρέπει να κάνετε μερικές ρυθμίσεις για την καλύτερη απεικόνισή της. Εμφανίστε τη σελίδα index.htm κάνοντας διπλό κλικ στο όνομα του αρχείου που βρίσκετε στη λίστα φακέλων. Κάντε δεξί κλικ στην κύρια οθόνη (σε οποιοδήποτε σημείο), στο χώρο κάτω από την καρτέλα με τίτλο index.htm και επιλέξτε Ιδιότητες σελίδας Στο παράθυρο που θα ανοίξει θα ρυθμίσετε 2 βασικά στοιχεία της σελίδας σας: Τον Τίτλο της σελίδας και τη Γλώσσα κωδικοποίησης. Ι. Τίτλος σελίδας Στην καρτέλα Γενικά > Τίτλος γράψτε τον τίτλο που θα έχει η σελίδα σας. (Σημείωση: Ο τίτλος της σελίδας σας είναι κάτι διαφορετικό από το όνομα του αρχείου της σελίδας σας ). Είναι σημαντικό να δώσετε ένα όνομα στη σελίδα σας και μάλιστα σε 2 γλώσσες (π.χ. Ελληνικά -Αγγλικά). Αυτό για να είναι πιο εύκολος ο εντοπισμός των σελίδων σας από τις μηχανές αναζήτησης. Επιπλέον ο τίτλος της σελίδας είναι αυτός που θα εμφανίζεται στη γραμμή τίτλων του προγράμματος πλοήγησης καθώς και στις λίστες των συνδέσμων των Αγαπημένων ή των Bookmarks των επισκεπτών σας. Αν δεν βάλετε τίτλο, τότε οι επισκέπτες σας θα διαβάζουν κάτι σαν .."Αρχική σελίδα", "New_page1" κλπ. Γράψτε επομένως έναν καλό τίτλο που να αντιπροσωπεύει το δικτυακό σας τόπο (π.χ. αν είναι σελίδες σχολείου, τότε γράψτε την ονομασία του σχολείου). Σημειώστε πως πρέπει να βάζετε τίτλους και στις υπόλοιπες σελίδες που θα δημιουργήσετε αργότερα. 8
  9. 9. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr ΙΙ. Γλώσσα Κωδικοποίησης Στην καρτέλα Γλώσσα επιλέξτε Ελληνικά (εικόνα 6). Αυτό θα σας εξασφαλίσει πως οι επισκέπτες σας θα βλέπουν σωστά τα ελληνικά. (Εικόνα 6. Ορισμός κωδικοποίησης σελίδας) Τη διαδικασία αυτή (τίτλος σελίδας και ορισμός κωδικοποίησης) θα χρειαστεί να την επαναλάβετε σε κάθε σελίδα που θα δημιουργήσετε ή θα τροποποιήσετε. Για παράδειγμα, αν χρησιμοποιήσατε πρότυπο, προφανώς θα θέλετε να αλλάξετε τους τίτλους των ιστοσελίδων σε κάτι πιο αντιπροσωπευτικό. 7. Εισαγωγή κειμένου σε ιστοσελίδα Η εισαγωγή κειμένου στο FrontPage γίνεται ακριβώς με τον ίδιο τρόπο όπως και σε κάθε επεξεργαστή κειμένου. Θα χρησιμοποιήσετε δηλ. κυρίως τη γραμμή εργαλείων Μορφοποίηση. Υπάρχουν όμως κάποια σημεία άξια προσοχής: • Οι ποιο κοινές γραμματοσειρές στις ιστοσελίδες είναι οι: Times New Roman, Arial, Verdana, Trebouchet, Helvetica και Tahoma. Επιλέξτε μια από αυτές για να είστε βέβαιοι πως τα κείμενά σας θα εμφανίζονται όπως ακριβώς τα γράψατε. • Μην χρησιμοποιείτε πολλές διαφορετικές γραμματοσειρές στην ίδια σελίδα. • Αποφύγετε πολύ μικρό μέγεθος γραμματοσειράς καθώς και τις γραμματοσειρές που έχουν «ουρίτσες», διότι θα δυσκολέψετε αρκετούς επισκέπτες σας. • Για να τονίσετε ένα κείμενο μην χρησιμοποιείτε υπογραμμισμένο κείμενο (underline), γιατί θα θεωρηθεί πως είναι υπερσύνδεσμος (εξ ορισμού οι υπερσύνδεσμοι είναι υπογραμμισμένοι) • Αν θέλετε να αλλάξετε γραμμή χωρίς να αφήσετε παράγραφο πρέπει να πληκτρολογήσετε το συνδυασμό πλήκτρων Enter+Shift. (Enter για παράγραφο) • Τέλος μια διαφοροποίηση από το Word είναι η εισαγωγή οριζόντιας γραμμής. Μπορείτε να εισάγετε οριζόντια γραμμή από το μενού: Εισαγωγή > Οριζόντια γραμμή. Μάλιστα αν επιλέξετε τη γραμμή και κάνετε δεξί κλικ πάνω της, θα διαπιστώσετε πως σας δίνετε η επιλογή Ιδιότητες οριζόντιας γραμμής. Κάνοντας κλικ εκεί μπορείτε να ορίσετε αρκετές ιδιότητες της γραμμής σας. 8. Εισαγωγή γραφικών – χρωμάτων σε ιστοσελίδα 9
  10. 10. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr Η εισαγωγή γραφικών και χρωμάτων είναι ίσως ένα από τα πιο σημαντικά σημεία στη δημιουργία ιστοσελίδων, όσο και το περιεχόμενο, διότι καθορίζουν την αισθητική εικόνα του δικτυακού τόπου, επηρεάζουν την λειτουργικότητα και παίζουν σημαντικό ρόλο στο χρόνο φόρτωσης των σελίδων. Ι. Γενικά α) Χρώματα Η αισθητική είναι ένα προσωπικό ζήτημα βέβαια, αλλά η επιλογή των σωστών χρωμάτων για το φόντο, το κείμενο, τους συνδέσμους κλπ. είναι κάτι που θα πρέπει να σας απασχολήσει σοβαρά. Αρχικά να θέσουμε υπ' όψη σας πως αρκετοί από τους επισκέπτες σας δεν θα μπορούν να δουν σωστά όλα τα χρώματα. Κι αυτό γιατί μπορεί να διαθέτουν κάρτα γραφικών με μικρές δυνατότητες είτε γιατί δεν έχουν ρυθμίσει την κάρτα γραφικών τους κατάλληλα. Το μόνο σίγουρο είναι πως οποιαδήποτε κάρτα γραφικών μπορεί να απεικονίσει 2561 βασικά χρώματα τα οποία και ονομάζονται "web safe colors". β) Ποιοι συνδυασμοί χρωμάτων είναι κατάλληλοι; Βασικά έχετε δύο επιλογές: 1.Ανοιχτόχρωμο φόντο με σκούρα γράμματα και 2. Σκουρόχρωμο φόντο με ανοιχτά γράμματα Είναι θέμα γούστου ο συνδυασμός που θα διαλέξετε. Σκεφτείτε όμως την περίπτωαη που κάποιος εκτυπώνοντας ένα τμήμα της σελίδας σας, έπαιρνε ως εκτύπωση μια λευκή σελίδα! Αυτό συμβαίνει αν έχετε διαλέξει το 2ο συνδυασμό. Επίσης τα πολύ φωτεινά χρώματα (λαχανί, πορτοκαλί, μπλε κλπ) γίνονται κουραστικά για τον επισκέπτη. Άρα διαλέξτε ξεκούραστα χρώμα όπως ώχρα, κυπαρισσί, λαδί, λευκό, απαλό γκρι κ.ό.κ. γ) Εικόνες Γενικά στο web χρησιμοποιούνται τρία είδη γραφικών (images formats). 1. Τα αρχεία JPEG (.jpg), που είναι κατάλληλα για φωτογραφίες και εικόνες πολλών χρωμάτων. 2. Τα αρχεία GIF (.gif), κατάλληλα για εικόνες που έχουν μέχρι 256 χρώματα (π.χ. κινούμενες εικόνες, κουμπιά, καρτούνς, λογότυπα κλπ) & 3. Τα αρχεία PNG (.png) που υποστηρίζουν υψηλής ποιότητας γραφικά χωρίς να είναι ιδιαίτερα μεγάλα σε μέγεθος. Αυτό πάντως που πρέπει να ξέρετε είναι πως στο διαδίκτυο σημαντικότατο στοιχείο αποτελεί το μέγεθος του αρχείου της εικόνας. Κι αυτό γιατί μια σελίδα που περιέχει πολλά γραφικά καθυστερεί να εμφανιστεί. Ένα λάθος που γίνεται συχνά είναι η τοποθέτηση γραφικών χωρίς να έχει προηγηθεί καμιά επεξεργασία. Για αυτό καλό είναι να μάθετε τη λειτουργία κι ενός προγράμματος επεξεργασίας εικόνας, ώστε να κάνετε στοιχειώδεις επεμβάσεις, όπως π.χ. στην ανάλυση της εικόνας2 και στο μέγεθός της σε πίξελς (pixels). Επιπλέον χρειάζεται προσοχή και στην επιλογή των εικόνων, καθώς πολλές από αυτές προστατεύονται από πνευματικά δικαιώματα κι επομένως αν τις χρησιμοποιήσουμε παρανομούμε. Χρησιμοποιήστε εικόνες που γνωρίζεται πως διατίθονται για ελεύθερη χρήση (π.χ. εικόνες Clip Art του Ms Office) ή φτιάξτε τις δικές σας δημιουργίες. Παρακάτω θα αναφερθούν όλα τα σημεία που πρέπει να προσέξετε. 1 Για την ακρίβεια, τα διαθέσιμα χρώματα είναι 216, καθώς τα υπόλοιπα είναι δεσμευμένα από το λειτουργικό σύστημα. 2 H ανάλυση των οθονών για τους περισσότερους ΗΥ φτάνει στα 72 dpi (για τους ΗΥ τις Apple στα 96 dpi), επομένως εικόνες με ανάλυση πάνω από 96 dpi είναι άχρηστες, καθώς απλώς θα βαραίνουν τη σελίδα χωρίς το ανάλογο αισθητικό αποτέλεσμα. 10
  11. 11. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr ΙΙ. Εισαγωγή εικόνων Για να εισάγετε μια εικόνα (clip art, φωτογραφία, animation) στην ιστοσελίδα σας, θα πάτε στο μενού Εισαγωγή > Εικόνα. Από εκεί θα έχετε διάφορες επιλογές (εικόνα 7). Οι κυριότερες είναι: Εισαγωγή εικόνας Clip Art, από αρχείο και από σαρωτή ή κάμερα. Σημειωτέον πως παρόμοιες επιλογές θα έχετε, αν πατήσετε στα αντίστοιχα κουμπιά της γραμμής εργαλείων Εικόνα. (Εικόνα 7. Εισαγωγή εικόνας) Το σημαντικότερο από όσα πρέπει να γνωρίζετε καθώς εισάγετε εικόνες, είναι πως αυτές θα πρέπει τελικά να αποθηκευτούν στο φάκελο της τοποθεσίας web (κατά προτίμηση στον υποφάκελο images). Εδώ υπάρχουν δύο περιπτώσεις: είτε οι εικόνες θα βρίσκονται ήδη στο φάκελο web είτε κάπου στο σκληρό σας δίσκο. • Εάν η εικόνα είναι αποθηκευμένη στο φάκελο images τότε επιλέξτε Εισαγωγή > Εικόνα > Από αρχείο. Θα εμφανιστεί ένα παράθυρο. Εκεί κάντε διπλό κλικ στο φάκελο images και επιλέξτε την εικόνα που θέλετε. Πατήστε Εισαγωγή. Η εικόνα θα εμφανιστεί στη σελίδα. • Εάν η εικόνα βρίσκεται σε άλλη θέση στο σκληρό σας δίσκο τότε αφού επιλέξετε Εισαγωγή > Εικόνα > Από αρχείο, θα κάνετε κλικ στο κουμπί που δείχνει το βέλος παρακάτω (εικόνα 8), θα πλοηγηθείτε στο σκληρό σας δίσκο κι αφού βρείτε την εικόνα που θέλετε θα την επιλέξετε και μετά θα πατήσετε Εισαγωγή. Παρόμοια διαδικασία θα ακολουθήσετε και στην περίπτωση που εισάγετε εικόνα ClipArt. (Εικόνα 8. Εισαγωγή εικόνας από το σκληρό δίσκο) • Στην περίπτωση που εισάγατε εικόνα που δεν ήταν στο φάκελο web (δηλ. από σκληρό δίσκο ή Clip Art) απομένει να κάνετε άλλη μια ενέργεια. Αποθηκεύστε τη σελίδα σας (Αρχείο > Αποθήκευση). Αμέσως θα εμφανιστεί ένα παράθυρο που σας προτρέπει να αποθηκεύσετε την εικόνα (εικ. 9). o Αν θέλετε να αλλάξετε όνομα στο αρχείο, πατήστε Μετονομασία και πληκτρολογήστε το νέο όνομα o Για να ορίσετε ακριβώς που θα αποθηκευτεί η εικόνα, πατήστε Αλλαγή φακέλου και στο νέο παράθυρο που θα εμφανιστεί κάντε διπλό κλικ στο φάκελο που επιθυμείτε και τέλος ΟΚ και ξανά ΟΚ για να κλείσουν όλα τα παράθυρα. 11
  12. 12. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr (Εικόνα 9. Αποθήκευση εικόνας από το σκληρό δίσκο ή Clip Art) • Αφού εμφανιστεί η εικόνα στη σελίδα, μπορείτε να τροποποιήσετε κάποια στοιχεία της όπως τη θέση της στη σελίδα, το μέγεθος, η στοίχιση, το περίγραμμά της, την εισαγωγή εναλλακτικού κειμένου1 κλπ. Για να ορίσετε τις ιδιότητες θα κάνετε δεξί κλικ πάνω στην εικόνα και μετά Ιδιότητες εικόνας (εικ.10). Στην καρτέλα Εμφάνιση έχουμε τις επιλογές: o Στυλ Αναδίπλωσης: Ανάλογα με την επιλογή το κείμενο α) δεν θα αναδιπλωθεί, β) θα αναδιπλωθεί αριστερά ή γ) θα αναδιπλωθεί δεξιά της εικόνας. o Διάταξη: Ορίζουμε την στοίχιση μέσα στη σελίδα, την απόσταση που θα έχει από το κείμενο ή/και την προηγούμενη παράγραφο & το πάχος του περιγράμματος της εικόνας (εξ ορισμού χωρίς περίγραμμα). o Μέγεθος: ορίζουμε το μέγεθος της εικόνας σε πίξελς (pixels) καθώς και αν κατά τη μεταβολή του μεγέθους της θα διατηρηθούν οι αναλογίες πλάτους – μήκους (καλό είναι να διατηρούνται) (Εικόνα 10. Ιδιότητες εικόνας) Στην καρτέλα Γενικά μας ενδιαφέρει κυρίως το πλαίσιο εναλλακτικές παρουσιάσεις > κείμενο. Πληκτρολογήστε στο πλαίσιο το εναλλακτικό κείμενο που επιθυμείται και πατήστε ΟΚ. 1 Εναλλακτικό ονομάζεται το κείμενο που θα διαβάσει ο επισκέπτης, εάν αφήσει το δείκτη του ποντικιού πάνω στην εικόνα ή αν για κάποιο λόγο δεν εμφανιστεί η εικόνα. Μην αμελείται να γράφεται κάποιο κατατοπιστικό εναλλακτικό κείμενο για τις εικόνες σας. 12
  13. 13. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr ΙΙΙ. Ορισμός χρώματος ή εικόνας ως φόντο Για να ορίσετε ένα χρώμα ως φόντο ιστοσελίδας: • Δεξί κλικ στην ιστοσελίδα > Ιδιότητες σελίδας. • Επιλέξτε την καρτέλα Φόντο (εικ. 11) (Εικόνα 11. Ορισμός χρώματος φόντου) • Κάντε κλικ στο βελάκι δίπλα από τη λέξη Φόντο. • Επιλέξτε το χρώμα που θέλετε και τέλος πατήστε ΟΚ. Για να ορίσετε μια εικόνα ως φόντο ιστοσελίδας: Πριν κάνετε οποιαδήποτε άλλη ενέργεια, θα πρέπει να διαλέξετε την εικόνα που σκοπεύετε να χρησιμοποιήσετε. Η εικόνα αυτή θα πρέπει να διαθέτει ορισμένα χαρακτηριστικά. 1. Μικρό μέγεθος αρχείου (κάτω από 3Κb) 2. Μικρές διαστάσεις (120Χ120 pixels και κάτω) 3. Όχι εξεζητημένα χρώματα 4. Συγκεκριμένη ανάλυση (από 72 έως 96dpi) Κι εξηγούμαστε… Θα πρέπει να φανταστείτε τη σελίδα σας ως ένα ψηφιδωτό το οποίο θα γεμίσει από την εικόνα φόντου. Δηλ. η εικόνα σας θα επαναλαμβάνεται γεμίζοντας ολόκληρη τη σελίδα, όποια διάσταση κι αν καταλάβει αυτή στους ΗΥ των επισκεπτών σας. Αυτό σημαίνει προς πρέπει να είναι σχετικά ομοιογενής ιδιαίτερα στις άκρες της. Για τα χρώματα και την ανάλυση έγινε αναφορά λίγο παραπάνω. Αφού λοιπόν βρήκατε μια εικόνα με τα παραπάνω χαρακτηριστικά θα κάνετε τις εξής ενέργειες: • Αποθηκεύστε την εικόνα στο φάκελο images του web σας. • Δεξί κλικ στην ιστοσελίδα > Ιδιότητες σελίδας. • Τσεκάρετε το πλαίσιο Εικόνα Φόντου (εικ. 12) • Πατήστε Αναζήτηση. • Βρείτε το φάκελο όπου αποθηκεύσατε την εικόνα και επιλέξτε την (δίπλα στο κουμπί αναζήτηση θα εμφανιστεί το όνομα του αρχείου). • Πατήστε ΟΚ. (Εικόνα 12. Ορισμός εικόνας φόντου) ΙV. Ορισμός χρώματος υπερσυνδέσμων 13
  14. 14. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr Οι υπερσύνδεσμοι των σελίδων σας μπορούν να έχουν τρεις διαφορετικές χρωματικές καταστάσεις: α) αρχικό χρώμα υπερσυνδέσμου (αυτό που θα βλέπουν όσοι επισκέπτονται τη σελίδα), β) χρώμα υπερσυνδέσμου που έχει επισκεφθεί ο επισκέπτης (ώστε να γνωρίζει ποιες σελίδες έχει ήδη δει) και γ) χρώμα ενεργού υπερσυνδέσμου (το χρώμα των συνδέσμων στους οποίους κάνει κλικ ο επισκέπτης). Για να ορίσουμε τα χρώματα αυτά: • Δεξί κλικ στην ιστοσελίδα > Ιδιότητες σελίδας. • Επιλέξτε την καρτέλα Φόντο (εικ. 13) (Εικόνα 13. Ορισμός χρωμάτων υπερσυνδέσμων) • Κάντε κλικ στα βελάκια δίπλα από τις αντίστοιχες λέξεις. • Επιλέξτε το χρώμα που θέλετε για κάθε περίπτωση και τέλος πατήστε ΟΚ. V. Προσθήκη θέματος Για να απαλλαγείτε από όλους αυτούς τους προβληματισμούς περί επιλογής των κατάλληλων χρωματισμών, γραφικών κλπ. υπάρχει μια εύκολη λύση. Το Frontpage διαθέτει μια μεγάλη ποικιλία από έτοιμα θέματα τα οποίο μπορείτε με μερικά κλικ να εφαρμόσετε σε όλες τις σελίδες ή και σε μία μόνο αν θέλετε. Εκτός αυτού σας δίνετε η δυνατότητα να τροποποιήσετε τα θέματα αυτά ή να φτιάξετε το δικό σας θέμα, αλλά αυτό το ζήτημα ξεπερνά τους στόχους του παρόντος οδηγού. Για να εφαρμόστε ένα έτοιμο θέμα του Frontpage στις σελίδες σας θα πάτε στο μενού: Μορφή > Θέμα. Κάνοντας κλικ θα βρεθείτε μπροστά στο παράθυρο της εικόνας παρακάτω (εικ. 14). (Εικόνα 14. Επιλογή θέματος) • Αποφασίστε αν θα εφαρμόσετε το θέμα σε όλες τις σελίδες σας ή μόνο σε ορισμένες (1). • Επιλέξτε από το πλαίσιο το όνομα κάποιου θέματος. Στην περίπτωσή μας έχει επιλεγεί το θέμα «Τετράγωνα» (2). 14
  15. 15. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr • Δείτε μια προεπισκόπηση του θέματος αυτού στο κεντρικό πλαίσιο (3). Εμφανίζονται όλοι οι χρωματισμοί των διαφόρων στοιχείων μιας σελίδας • Τέλος πατήστε ΟΚ και το θέμα θα εφαρμοστεί στις σελίδες ή στη σελίδα σας. Υπάρχει, όπως παρατηρείτε και το κουμπί Τροποποίηση με το οποίο μπορείτε να αλλάξετε τα επιμέρους στοιχεία (χρώματα, γραμματοσειρές, γραφικά, μενού πλοήγησης κλπ. 9. Εισαγωγή – Μορφοποίηση πινάκων και κελιών Πολύ σύντομα θα διαπιστώσετε πως η απλή εισαγωγή κειμένου και γραφικών σε μια σελίδα είναι προβληματική και δεν θα σας ικανοποιεί το τελικό αποτέλεσμα. Στην περίπτωση αυτή η λύση είναι η χρήση πινάκων. Με τους πίνακες μπορείτε να έχετε πολύ μεγαλύτερο έλεγχο στην τοποθέτηση των εικόνων, των κειμένων αλλά και των μενού πλοήγησης. • Για να δημιουργήσετε έναν πίνακα πηγαίνετε στο μενού: Πίνακας > Εισαγωγή > Πίνακας (εικ. 15) (Εικόνα 15. Εισαγωγή Πίνακα) Εδώ μπορείτε να επιλέξετε τον αριθμό γραμμών και στηλών του πίνακα, τη στοίχιση που θα έχει στη σελίδα και να καθορίσετε το πλάτος του. Στον καθορισμό του πλάτους έχετε δύο επιλογές: α) πλήθος pixel και β) σε ποσοστό. Αν επιλέξετε σε πλήθος pixel τότε για να εμφανιστεί ο πίνακας σε μια οθόνη με ανάλυση 800Χ600 pixels, δεν θα πρέπει να ορίσετε μέγεθος μεγαλύτερο από 740 pixels. Αν επιλέξετε ποσοστό πχ. 100% τότε ο πίνακάς σας θα καταλάβει όλο το διαθέσιμο χώρο της οθόνης του επισκέπτη. • Για να ορίσετε τις ιδιότητες σε έναν πίνακα: o Κάντε δεξί κλικ στον πίνακα o Επιλέξτε ιδιότητες πίνακα o Στο παράθυρο που θα εμφανιστεί (εικ. 16) μπορείτε να ορίσετε όλες τις ιδιότητες του πίνακά σας. Δηλ. Διάταξη, Περιγράμματα και Φόντο (πατώντας το κουμπί Στυλ έχετε περισσότερες αλλά πιο εξειδικευμένες δυνατότητες) o Διάταξη: Ορίζεται τη στοίχιση καθώς και τις διαστάσεις του πίνακα σε πλήθος pixel ή σε ποσοστό. o Περιγράμματα: Καθορίζετε το περίγραμμα του πίνακα και το χρώμα του περιγράμματος. Παράλληλα μπορείτε να επιλέξετε την εμφάνιση των περιγραμμάτων σε όλα τα κελιά του πίνακα και τους χρωματισμούς των κυρίων περιγραμμάτων και των σκιάσεων που πιθανόν να έχουν. o Φόντο: Επιλέγετε το φόντο του πίνακα είτε ως χρώμα είτε ως εικόνα φόντου. Στη 2η περίπτωση τσεκάρετε το πλαίσιο Χρήση εικόνας φόντου και πατώντας το κουμπί αναζήτηση διαλέξτε την ανάλογη εικόνα (θυμηθείτε πρέπει να είναι αποθηκευμένη στο φάκελο web). 15
  16. 16. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr o Τέλος πατήστε Εφαρμογή και ΟΚ. (Εικόνα 16. Ιδιότητες Πίνακα) • Για να μορφοποιήσετε κελιά ενός πίνακα: o Κάντε δεξί κλικ στον κελί o Επιλέξτε ιδιότητες κελιού o Η μόνη διαφοροποίηση σε σχέση με τις ιδιότητες πίνακα εντοπίζονται στη διάταξη. Εδώ έχουμε επιπλέον επιλογές για την οριζόντια και κατακόρυφη στοίχιση του περιεχομένου των κελιών καθώς και την επιλογή Χωρίς αναδίπλωση (εικ.17). o Αν τσεκάρουμε το πλαίσιο Χωρίς αναδίπλωση τότε το κείμενο που περιέχει το κελί δεν θα αναδιπλώνονται αλλά θα εμφανίζονται όλα στην ίδια γραμμή. Αυτό είναι ορισμένες φορές χρήσιμο, ιδιαίτερα όταν θέλουμε ομοιομορφία στο ύψος των κελιών. (Εικόνα 17. Διάταξη περιεχομένου κελιού) o Αφού κάνετε όλες τις επιλογές σας πατήστε Εφαρμογή και ΟΚ. • Για να προσθέσετε γραμμές και στήλες σε πίνακα: o Διαλέξτε τη γραμμή ή στήλη δίπλα στην οποία θέλετε να κάνετε την αλλαγή o Μετά στο μενού Πίνακας > Εισαγωγή > Γραμμές και Στήλες o Κάντε την επιθυμητή επιλογή και πατήστε ΟΚ. • Τέλος για άλλες λειτουργίες που σχετίζονται με τους πίνακες μπορείτε να χρησιμοποιείται τη γραμμή εργαλείων Πίνακας (εικόνα) 16
  17. 17. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr Με τα εργαλεία αυτά εκτελούνται γρήγορα οι περισσότερες λειτουργίες ενός πίνακα όπως προσθήκη και διαγραφή κελιών/στηλών, συγχώνευση κελιών, στοίχιση, ορισμός φόντου κλπ. 1. Δημιουργία μενού πλοήγησης Όπως αναφέρθηκε και στην ενότητα «Προετοιμασία – Σχεδιασμός», το μενού πλοήγησης του δικτυακού μας τόπου μπορεί να είναι κάθετο ή/και οριζόντιο, να αποτελείται από απλούς συνδέσμους κειμένου ή να διαθέτει κουμπιά συνδεδεμένα με όλες τις σελίδες. Το μενού πλοήγησης είναι δυνατόν να δημιουργηθεί με αρκετούς τρόπους. Οι κυριότεροι είναι: α) μενού που δημιουργήθηκε από πρότυπο, β) δημιουργία μενού που βασίζεται σε δομή περιήγησης. Ι. μενού που δημιουργήθηκε από πρότυπο Σε προηγούμενο σημείο του οδηγού αυτού, είδαμε πώς δημιουργείτε ένας δικτυακός τόπος προσωπικού περιεχομένου με τη χρήση προτύπου του FrontPage. Στην περίπτωση αυτή το μενού πλοήγησης (κάθετο και οριζόντιο) δημιουργούνται αυτόματα. Εντούτοις θα πρέπει να γνωρίζουμε, πώς τροποποιείται το μενού αυτό αλλά και τον τρόπο που προσθέτουμε νέες σελίδες στη δομή περιήγησης. Αρχικά δημιουργήστε έναν δικτυακό τόπο βασισμένο σε πρότυπο (ακολουθήστε οδηγίες που αναφέρονται παραπάνω). Στο παράδειγμά μας πρόκειται για δικτυακό τόπο προσωπικού περιεχομένου. Θα προσπαθήσουμε να αλλάξουμε τα κείμενα του μενού και να προσθέσουμε μια νέα σελίδα στο υπάρχον μενού. Τροποποίηση τίτλων σελίδων • Έστω πως το κείμενο «Προσωπικά στοιχεία» του υπάρχοντος μενού δεν μας ικανοποιεί και θέλουμε να το αλλάξουμε σε «Βιογραφικό». o Πατήστε το κουμπί περιήγηση στο δεξί πλαίσιο (1) o Θα εμφανιστεί η παρακάτω εικόνα (εικ.18). Στο κεντρικό παράθυρο εμφανίζεται η δομή πλοήγησης του δικτυακού μας τόπου. (Εικόνα 18. Προβολή περιήγησης) o Αριστερά εμφανίζεται η αρχική σελίδα – index.htm (2) που έχει τίτλο «Καλώς ορίσατε». Επιπλέον ξεχωρίζει έχοντας ένα σπιτάκι στην κάτω αριστερή γωνία. o Δεξιά εμφανίζονται οι τίτλοι1 των υπόλοιπων σελίδων. o Επιλέξτε τη σελίδα με τίτλο «Προσωπικές πληροφορίες» (3) o Κάντε δεξί κλικ στον τίτλο και επιλέξτε Μετονομασία. o Πληκτρολογήστε το νέο τίτλο «Βιογραφικό» o Πατήστε το κουμπί Σελίδα (4) για να επιστρέψετε στην αρχική προβολή. 1 Ο τίτλος μιας σελίδας είναι κάτι διαφορετικό από το όνομα του αρχείου της σελίδας. Έτσι η αρχική σελίδα μπορεί να έχει τον τίτλο π.χ. «Καλώς ορίσατε» αλλά το όνομα του αρχείου είναι index.htm. 17
  18. 18. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr o Το μενού μας έχει αλλάξει και σε όλες τις σελίδες γράφει πλέον «Βιογραφικό». Προσθήκη νέας σελίδας στη δομή περιήγησης • Έστω πως δημιουργήσαμε μια νέα σελίδα την 1stpage.htm (εικ. 19) και θέλουμε να τις δώσουμε τον τίτλο «Ασκήσεις». Φυσικά θέλουμε να προστεθεί κι αυτή στο μενού πλοήγησης και μάλιστα να ενημερωθούν όλες οι σελίδες με το νέο μενού. o Πατήστε το κουμπί περιήγηση στο δεξί πλαίσιο (δες παραπάνω) o Πάτα πάνω στη σελίδα 1stpage.htm (1) και σύρε την με το ποντίκι μέσα στο κεντρικό πλαίσιο, ανάμεσα στις σελίδες «Ενδιαφέροντα» και «Διάφορα». o Παρατηρήστε πως καθώς σέρνεται τη σελίδα εμφανίζεται μια γραμμή σύνδεσης με τη σελίδα «Καλώς ορίσατε». Έχετε ακόμη τη δυνατότητα να αλλάξετε τη θέση της σελίδας στο μενού απλώς μετακινώντας την στη θέση που θέλετε. o Επιλέξτε τη σελίδα, η οποία έχει τον τίτλο 1stpage.htm ή Νέα_Σελίδα o Κάντε δεξί κλικ στον τίτλο και επιλέξτε Μετονομασία. o Πληκτρολογήστε «Ασκήσεις»(2) o Πατήστε το κουμπί Σελίδα για να επιστρέψετε στην αρχική προβολή o Η νέα σελίδα έχει προστεθεί στο μενού με τον τίτλο «Ασκήσεις» Σημείωση: Αν θέλετε να αφαιρέστε σελίδα από τη δομή περιήγησης, απλώς κάντε επάνω της δεξί κλικ και μετά επιλέξτε διαγραφή. Προσοχή στο πλαίσιο διαλόγου που θα εμφανιστεί, σας δίνονται δύο επιλογές. Να αφαιρέσετε τη σελίδα από τη δομή περιήγησης (η σελίδα όμως δεν θα διαγραφεί) και να διαγράψετε οριστικά τη σελίδα (οπότε διαγράφεται τελείως από το φάκελο web!) (Εικόνα 19. Προσθήκη σελίδας στη δομή περιήγησης) ΙΙ. δημιουργία μενού που βασίζεται σε δομή περιήγησης Στην περίπτωση που έχουμε δημιουργήσει μερικές ιστοσελίδες χωρίς τη χρήση προτύπου και θέλουμε να τις συνδέσουμε ώστε να δημιουργήσουμε μενού πλοήγησης, θα πρέπει αρχικά να δημιουργήσουμε μια δομή περιήγησης: Δημιουργία δομής περιήγησης (εικ. 20) • Πατάμε το κουμπί περιήγηση (1). Παρατηρούμε πως εμφανίζεται μόνο η αρχική σελίδα. • Μετονομάστε τον τίτλο της αρχικής σας σελίδας (με δεξί κλικ και Μετονομασία) • Σύρετε τις σελίδες σας από τη Λίστα φακέλων (2) με τον τρόπο που αναφέρετε παραπάνω (προσθήκη σελίδας στη δομή περιήγησης) • Μετονομάστε τις σελίδες σας (3). • Κάντε κλικ στο κουμπί προβολής σελίδας (4) για να επιστρέψετε στην αρχική προβολή 18
  19. 19. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr (Εικόνα 20. δημιουργία δομής περιήγησης) Δημιουργία μενού πλοήγησης Αφού επιστρέψετε στην προβολή σελίδας θα διαπιστώσετε πως δεν εμφανίζεται το μενού πλοήγησης! Χρειάζεται να το εισάγουμε εμείς. • Πρώτα απ’ όλα όμως απαιτείται να δημιουργήσουμε έναν πίνακα στον οποίο θα τοποθετήσουμε ένα κάθετο μενού κι ένα οριζόντιο μενού. • Πάμε στο Μενού Πίνακας > Εισαγωγή > Πίνακας. • Επιλέξτε 3 γραμμές και 2 στήλες και ποσοστό 100% και ΟΚ Σημείωση: Την 1η γραμμή την θέλουμε για να βάλουμε αργότερα το λογότυπό μας και τον τίτλο σελίδας. Στην 2η γραμμή θα μπουν το κάθετο μενού πλοήγησης (αριστερά) και τυχόν κείμενα ή εικόνες που υπάρχουν ήδη στις σελίδες (δεξιά) και στην 3η γραμμή θα τοποθετήσουμς το οριζόντιο μενού. Φυσικά μπορείτε να προσθέσετε και άλλες γραμμές και στήλες ανάλογα με το περιεχόμενο των σελίδων σας • Εφόσον ακολουθήσατε τις οδηγίες, πρέπει να έχετε έναν πίνακα όπως ο παρακάτω. Λογότυπο Τίτλος Σελίδας Κάθετο μενού Κείμενα και εικόνες πλοήγησης Οριζόντιο μενού πλοήγησης (πίνακας 1. Πιθανή διάταξη ιστοσελίδας) • Ώρα για το μενού: Κάντε κλικ στο κελί όπου θα τοποθετηθεί το κάθετο μενού πλοήγησης. • Πηγαίνετε στο μενού Εισαγωγή > Στοιχείο Web > Γραμμές Συνδέσεων > Γραμμή που βασίζεται στη δομή περιήγησης. Πατήστε Επόμενο. • Επιλέξτε κάποιο από τα προσφερόμενα στυλ γραμμής (στο παράδειγμα επιλέχθηκε το Μοντέρνο δίκτυο). Πατήστε Επόμενο. • Επιλέξτε Κάθετο Προσανατολισμό > Τέλος • Θα ανοίξει το παράθυρο Ιδιότητες γραμμής συνδέσεων. Κάντε τις επιλογές της εικόνας (εικ. 21) (Εικόνα 21. Ιδιότητες γραμμής συνδέσεων) 19
  20. 20. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr • Πατήστε τέλος. Θα εμφανιστεί το μενού πλοήγησης • Με την ίδια διαδικασία θα δημιουργήσετε κι ένα οριζόντιο μενού πλοήγησης (οριζόντιος προσανατολισμός). Το οριζόντιο μενού πλοήγησης καλά θα ήταν να μην έχει γραφικά αλλά να είναι απλό κείμενο (θα βρείτε τέτοια επιλογή στο στυλ γραμμής). • Αφού μείνετε ικανοποιημένοι με το αποτέλεσμα αντιγράψτε των πίνακα σε όλες τις σελίδες (εικ. 22). (Εικόνα 22) 2. Δημιουργία υπερσυνδέσμων Οι σύνδεσμοι (hyperlinks) είναι κείμενα (συνήθως υπογραμμισμένα) ή εικόνες που οδηγούν σε άλλες σελίδες είτε του δικτυακού σας τόπου (εσωτερικοί σύνδεσμοι) είτε σε σελίδες άλλων δικτυακών τόπων (εξωτερικοί σύνδεσμοι). Για να δημιουργήσετε έναν σύνδεσμο (εσωτερικό ή εξωτερικό): • Επιλέξτε το κείμενο ή την εικόνα. • Πηγαίνετε στο μενού Εισαγωγή > Υπερ-σύνδεση. • Θα ανοίξει το παράθυρο εισαγωγή υπερσύνδεσης (εικ. 23) • Πατήστε το κουμπί Υπάρχον αρχείο ή ιστοσελίδα (1). (Εικόνα 23) • Επιλέξτε την σελίδα στην οποία θα οδηγεί ο υπερσύνδεσμος (εφόσον πρόκειται για εσωτερικό σύνδεσμο) ή πληκτρολογήστε τη διεύθυνση του εξωτερικού δικτυακού τόπου (εξωτερικός σύνδεσμος). • Στο παράδειγμά μας επιλέξαμε να συνδεθούμε με τη διεύθυνση http://ekped.com/ (2) • Στην περίπτωση εσωτερικού συνδέσμου πατήστε ΟΚ. • Στην περίπτωση εξωτερικού συνδέσμου πατήστε πλαίσιο προορισμού (3). 20
  21. 21. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr • Εδώ επιλέξτε Νέο παράθυρο (_blank). Έτσι αν πατηθεί ο συγκεκριμένος σύνδεσμος, θα ανοίξει νέα σελίδα όπου θα εμφανιστεί ο δικτυακός τόπος http://ekped.com/ . Τέλος πατήστε ΟΚ και ΟΚ, για να κλείσουν τα παράθυρα Για να δημιουργήσετε έναν σύνδεσμο για ηλεκτρονικό ταχυδρομείο Θα θέλετε βέβαια οι επισκέπτες σας να σας στέλνουν μηνύματα ηλεκτρονικού ταχυδρομείου με σχόλια και παρατηρήσεις για τον δικτυακό σας τόπο. Αυτό είναι εφικτό με τον παρακάτω τρόπο: • Επιλέξτε το σχετικό κείμενο (π.χ. Επικοινωνία) ή μια εικόνα που συμβολίζει αλληλογραφία. • Πηγαίνετε στο μενού Εισαγωγή > Υπερ-σύνδεση. • Θα ανοίξει το παράθυρο εισαγωγή υπερσύνδεσης (εικ. 24) (Εικόνα 24) • Επιλέξτε το κουμπί Διεύθυνση ηλεκτρονικού ταχυδρομείου (1) • Στο πεδίο Διεύθυνση ηλεκτρονικού ταχυδρομείου (2) πληκτρολογήστε την ηλεκτρονική σας διεύθυνση (εδώ salnk@sch.gr – το mailto συμπληρώνεται αυτόματα) • Στο πεδίο Θέμα (3) πληκτρολογήστε (προαιρετικά) το θέμα που θα έχει το μήνυμα που θα λαμβάνετε από επισκέπτες του δικτυακού σας τόπου. • Πατήστε ΟΚ. Τώρα καθώς οι επισκέπτες θα πατούν την υπερσύνδεση, θα ανοίγει το πρόγραμμα ηλεκτρονικού ταχυδρομείου που έχουν με συμπληρωμένη τη διεύθυνσή σας και το θέμα. 12. Δημοσίευση σε διακομιστή Web Το τελευταίο στάδιο του σχεδιασμού του δικτυακού σας τόπου είναι να τον ανεβάσετε σε έναν διακομιστή δικτύου (Web Sever) προκειμένου να δημοσιευθεί στο διαδίκτυο. Υπάρχουν διάφορες λύσεις, αλλά ο ποιος συνηθισμένος και γρήγορος τρόπος είναι με τη χρήση κάποιου προγράμματος FTP (File Transfer Protocol). Τέτοιο πρόγραμμα είναι και το FileZilla (http://sourceforge.net/projects/filezilla)το οποίο θα χρησιμοποιήσουμε παρακάτω. Το πρόγραμμα αυτό είναι περιορισμένης χρήσης (shareware) αλλά απολύτως λειτουργικό σε όσες λειτουργίες θα σας είναι απαραίτητες. Βέβαια χρειάζεται να έχετε εξασφαλίσει χώρο σε κάποιο διακομιστή δικτύου. Ευτυχώς για τους εκπαιδευτικούς το Πανελλήνιο Σχολικό Δίκτυο (ΠΣΔ) προσφέρει δωρεάν χώρο. Ρυθμίσεις • Μετά την εγκατάσταση του προγράμματος, θα εκκινήσετε το πρόγραμμα και θα πάτε στο μενού File > Site Manager • Στο Site Manager θα ρυθμίσετε το πρόγραμμα για σύνδεση στο διακομιστή δικτύου. Πατήστε το κουμπί New Site. Θα εμφανιστεί η οθόνη που βλέπετε παρακάτω (εικ. 25). 21
  22. 22. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr (Εικόνα 25) • Πληκτρολογήστε ένα όνομα για να αναγνωρίζετε τις ρυθμίσεις. Εδώ ονομάσαμε τις ρυθμίσεις του δικτυακού τόπου mysite (1) • Host (2): Η διεύθυνση του δικτυακού σας τόπου, αν προκειται για σχολική μονάδα. Αν είναι προσωπική σελίδα, τότε αυτό διαφέρει ανάλογα με την περιοχή. Π.χ. για Θεσσαλονίκη θα είναι …users.thess.sch.gr, για Αττική θα είναι users.att.sch.gr κ.ό.κ • Servertype (3): Επιλέξτε FTP • Logontype (4): Τσεκάρετε Normal • User (5): Πληκτρολογήστε το όνομα χρήστη που σας έχει δοθεί από το ΠΣΔ • Password (6): ο κωδικός που σας έχει δοθεί. • Τέλος πατήστε Save and Exit (7). Σημείωση: στην περίπτωση που πρόκειται να συνδεθούμε σε άλλον διακομιστή (εκτός ΠΣΔ), συμπληρώνουμε τα στοιχεία που μας έχουν δοθεί κατά περίπτωση. Οθόνη του προγράμματος – Μεταφορά αρχείων Τώρα έχετε επιστρέψει στην αρχική οθόνη του προγράμματος. • Συνδεθείτε στο διαδίκτυο. • Μόλις αποκατασταθεί η σύνδεση, από το μενού File επιλέξτε Connect to default site. Εναλλακτικά πατήστε το κουμπί με τον Ηλεκτρονικό Υπολογιστή (1), επιλέξτε το mysite και πατήστε Connect. • Αν έχετε κάνει σωστές ρυθμίσεις θα δείτε την εικόνα παρακάτω (εικ. 26) • Στο επάνω παράθυρο (2) εμφανίζονται οι όροι χρήσης του ΠΣΔ και πληροφορίες για την κατάσταση σύνδεσης. • Στο πράσινο πλαίσιο εμφανίζονται τα αρχεία του υπολογιστή μας (Local Site) • Στο κόκκινο πλαίσιο εμφανίζονται τα αρχεία στο διακομιστή (Remote Site). Στην αρχή βέβαια δεν εμφανίζονται καθόλου αρχεία καθώς δεν τα έχουμε μεταφέρει ακόμη. • Η πλοήγηση στα αρχεία και τους φακέλους γίνεται με παρόμοιο τρόπο όπως και στην εξερεύνηση των Windows. • Για να μεταφέρουμε αρχεία: επιλέγουμε αρχεία ή και ολόκληρους φακέλους από το αριστερό παράθυρο και τα σέρνουμε (drag ’n’ drop) στο δεξί παράθυρο. • Κατά τη διάρκεια της μεταφοράς εμφανίζονται πληροφορίες στο κάτω παράθυρο. 22
  23. 23. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr • Αφού μεταφερθούν όλα τα αρχεία μπορούμε να κλείσουμε το πρόγραμμα και να ελέγξουμε με το πρόγραμμα περιήγησης αν εμφανίζεται σωστά ο δικτυακός μας τόπος. (Εικόνα 26) • Όταν θα κάνετε αλλaγές στα αρχεία σας, δεν θα χρειάζετε να μεταφέρετε όλο το φάκελο web (αυτό γίνεται μόνο την πρώτη φορά) παρά μόνο τα αρχεία με τις αλλαγές. ΒΙΒΛΙΟΓΡΑΦΙΑ Αβούρης Ν., Αναστασιάδης Π., κ.ά. (2005), Οι προηγμένες τεχνολογίες διαδικτύου στην υπηρεσία της μάθησης, Αθήνα Καστανιώτης Jones D., Randall N., (2002), Πλήρης οδηγός Microsoft FronPage 2002, Αθήνα: Γκιούρδας Εκδοτική ΥΠ.Ε.Π.Θ., Εγκύκλιος: 61834/Γ7/30-6-2004: Παροχή υπηρεσίας αποµακρυσµένης πρόσβασης (dialup) στο Πανελλήνιο Σχολικό ∆ίκτυο (Β΄ φάση). ΥΠ.Ε.Π.Θ. (2000), Προετοιµασία του ∆ασκάλου της Κοινωνίας της Πληροφορίας. Αρχική επιµόρφωση όλων των εκπαιδευτικών στις Τεχνολογίες της Πληροφορίας και της Επικοινωνίας, Αθήνα: Παιδαγωγικό Ινστιτούτο. ΠΗΓΕΣ ΑΠΟ ΤΟ ΔΙΑΔΙΚΤΥΟ • Becta ICT Advice, Building an effective school website: http://www.ictadvice.org.uk/index.php? section=te&catcode=as_int_pub_03&rid=3478 • Πανεπιστήμιο Μακεδονίας – ΚΕ.Δ.Δ. – εκπαιδευτικό υλικό: http://www.noc.uom.gr/edu_mat/index.html • Πανελλήνιο Σχολικό Δίκτυο - Υπηρεσίες για τον εκπαιδευτικό: http://www.sch.gr/portal/media-type/html/ user/salnk/page/default.psml/js_pane/236 • Payton Tammy, Tutorial on Creating Web Pages with FrontPage Editor: http://www.siec.k12.in.us/ ~west/online/website/ • Sourceforge.net > FileZilla: http://www.sourceforge.net/projects/filezilla • Social Psychology network, Tips on Creating and Maintaining an Educational Web Site: http://www.socialpsychology.org/articles/top991.htm 23
  24. 24. Οδηγός δημιουργίας εκπαιδευτικών ιστοσελίδων Του Σαλονικίδη Γιάννη, Δασκάλου salnk@sch.gr • Wanda Wigglebits, Building a School Web Site: http://www.wigglebits.com/ 24

×