PDF created with pdffactory trial version 1. Εισαγωγή

Transcript

1 1. Εισαγωγή Η δημιουργία και η δημοσίευση στο διαδίκτυο μιας τοποθεσίας Web είναι μια σχετικά απλή διαδικασία που δεν απαιτεί ιδιαίτερες γνώσεις. Ιστοσελίδες μπορούμε να δημιουργήσουμε ακόμη και με το ταπεινό Σημειωματάριο (Notepad) των Windows. Επιπλέον όλα τα γνωστά προγράμματα επεξεργασίας κειμένου υποστηρίζουν την αποθήκευση αρχείων ως ιστοσελίδων Web. Υπάρχουν όμως προγράμματα που εξειδικεύονται στη δημιουργία σελίδων Web και διαθέτουν όλα τα απαραίτητα εργαλεία που μας επιτρέπουν να πετύχουμε μια πολύ εντυπωσιακή παρουσία στο διαδίκτυο. Μεταξύ των προγραμμάτων αυτών συγκαταλέγεται και το Microsoft FrontPage Όπως θα διαπιστώσετε στη συνέχεια, για την εκμάθηση των λειτουργιών του προγράμματος δεν χρειάζεται να αφιερώσετε πολύ χρόνο. Αυτό δε σημαίνει πως η δημιουργία μιας ιστοσελίδας θα ολοκληρωθεί μέσα σε σύντομο χρονικό διάστημα, καθώς υπάρχουν πολλοί παράμετροι που θα πρέπει να συνυπολογίσετε πριν αγγίξετε τον τελικό σας στόχο και κυρίως ΥΠΟΜΟΝΗ. Στις σημειώσεις εκτός των τεχνικών θεμάτων, θα σχολιάσουμε και όλα αυτά που πρέπει να λάβετε υπόψη σας, όπως το περιεχόμενο ενός ιστοτόπου, την αισθητική, τη λειτουργικότητα, την εργονομία κλπ. έτσι ώστε να είστε σε θέση να αντιμετωπίσετε τα διάφορα μικρά και μεγάλα ζητήματα που προκύπτουν κατά τον σχεδιασμό και τη δημιουργία ιστοσελίδων. 2. Περιεχόμενα προσωπικών ιστοσελίδων Αν και κάποια στοιχεία θεωρούνται απαραίτητα σε οποιοδήποτε είδος ιστοσελίδας, στην πραγματικότητα οι προσωπικές σελίδες έχουν μια ιδιαιτερότητα. Πρέπει να έχουν κάποιο συγκεκριμένο σκοπό. Για να το καταφέρουμε αυτό μπορούμε να περιλάβουμε στοιχεία όπως: Πληροφορίες για τον υπεύθυνο διαχείρισης του δικτυακού τόπου. Συνήθως αναγράφεται το ονοματεπώνυμο του διαχειριστή στο κάτω μέρος των σελίδων καθώς και μια έγκυρη διεύθυνση ηλεκτρονικού ταχυδρομείου ( ). Σελίδα με βιογραφικά στοιχεία του κατόχου του δικτυακού τόπου. Στις περισσότερες περιπτώσεις ταυτίζεται με το διαχειριστή των σελίδων. Εδώ μπορούμε να αναφέρουμε ορισμένα προσωπικά στοιχεία, σπουδές, τίτλους, εκπαιδευτική και κοινωνική δράση, τα ενδιαφέροντά μας κλπ. Το τι θα περιλάβουμε σ αυτή τη σελίδα εξαρτάται από ποιες πληροφορίες επιθυμούμε να γνωρίζουν οι επισκέπτες για την προσωπικότητά μας. Σύντομο κείμενο με αναφορά στους στόχους του δικτυακού μας τόπου. Αυτό μπορεί να περιληφθεί, ως εισαγωγικό κείμενο, στην αρχική μας σελίδα και δεν πρέπει να υπερβαίνει τις 1-2 παραγράφους. Χάρτη πλοήγηση (site map) Ο χάρτης πλοήγησης μπορεί να αποτελεί ξεχωριστή σελίδα και να περιλαμβάνει πληροφορίες για το περιεχόμενο και τη δομή των επιμέρους σελίδων καθώς και τον τρόπο πλοήγησης. Επιπλέον καλό είναι να διαθέτει υπερσυνδέσμους για όλες τις σελίδες του δικτυακού μας τόπου. Κανόνες δεοντολογίας Όρους χρήσης Σελίδα όπου αναφέρονται οι προϋποθέσεις χρήσης των πληροφοριών που θα βρουν οι επισκέπτες στις σελίδες μας καθώς και τα πνευματικά δικαιώματα που πιθανόν να συνοδεύουν τις πληροφορίες αυτές. Εργασίες - Διδακτικές προτάσεις - Άρθρα Ίσως ο κυριότερος λόγος που μας οδήγησε στην απόφαση να δημιουργήσουμε έναν προσωπικό δικτυακό τόπο είναι η ανάγκη να μοιραστούμε με άλλους ορισμένες καινοτόμες ιδέες και προτάσεις που αφορούν θέματα του ενδιαφέροντος μας. Οι εργασίες αυτές πρέπει να συνοδεύονται από την απαραίτητη βιβλιογραφία ή/και τις πηγές που χρησιμοποιήσαμε, ενώ στην περίπτωση που θα θέλαμε να δημοσιεύσουμε εργασίες άλλων θα πρέπει πρώτα να εξασφαλίσουμε την συγκατάθεσή τους. Άλλους Συνδέσμους Πηγές πληροφόρησης Ένας ολοκληρωμένος εκπαιδευτικός δικτυακός τόπος περιέχει προτάσεις για αξιόλογα sites, ταξινομημένα ανά θεματική ενότητα, ώστε να αποτελέσουν μια πολύτιμη και αξιόπιστη πηγή πληροφόρησης για όλους τους επισκέπτες. Αγγελόπουλος Γιάννης 1

2 Επιπλέον ο υπεύθυνος ανάπτυξης του δικτυακού τόπου θα πρέπει να δώσει ιδιαίτερη προσοχή στο μενού πλοήγησης, στην επιλογή της κατάλληλης γραμματοσειράς καθώς και στην επιλογή των κατάλληλων χρωμάτων και γραφικών των σελίδων. Όμως για τα ζητήματα αυτά θα γίνει λόγος στη συνέχεια του οδηγού με περισσότερες λεπτομέρειες και επεξηγήσεις. 3. Γνωριμία με το περιβάλλον του Microsoft FrontPage 2002 Αφού πατήσετε το εικονίδιο του προγράμματος Microsoft FrontPage 2002 θα εμφανιστεί η επιφάνεια εργασίας του προγράμματος (εικόνα 1). (Εικόνα 1. Η επιφάνεια εργασίας του Ms Frontpage 2002) 1) Γραμμή τίτλου Αναφέρεται η διαδρομή στην οποία είναι αποθηκευμένος ο φάκελος Web στον υπολογιστή μας. 2) Γραμμή μενού Περιλαμβάνει το μενού όλων των εντολών του προγράμματος. 3) Γραμμές εργαλείων Περιλαμβάνουν κουμπιά με τις συνηθέστερες λειτουργίες του προγράμματος. Εξ ορισμού εμφανίζονται οι γραμμές εργαλείων «βασική» και «μορφοποίηση». Για να εμφανίσουμε άλλες γραμμές εργαλείων ακολουθούμε τη διαδρομή: Προβολή > Γραμμές εργαλείων και επιλέγουμε αυτή που θέλουμε. 4) Λίστα φακέλων Στο παράθυρο αυτό εμφανίζονται όλα τα αρχεία και οι φάκελοι που αποτελούν τον δικτυακό μας τόπο. Κάνοντας διπλό κλικ σε οποιοδήποτε από τα αρχεία βρίσκονται στη λίστα φακέλων μπορούμε να το εμφανίσουμε στον κεντρικό παράθυρο. 5) Προβολές Το πλαίσιο προβολών μας επιτρέπει να αλλάξουμε την προβολή της ιστοσελίδας μας. Πατώντας κάποιο από τα έξι κουμπιά αλλάζει το περιεχόμενο του κεντρικού παραθύρου του προγράμματος. Αγγελόπουλος Γιάννης 2

3 Προβολή Σελίδα Φάκελοι Περιγραφή Είναι η εξορισμού προβολή. Στο κεντρικό παράθυρο του προγράμματος δημιουργούμε ή επεξεργαζόμαστε τις ιστοσελίδες μας Στο κεντρικό παράθυρο εμφανίζονται όλα τα αρχεία και οι φάκελοι του δικτυακού μας τόπου. Εκθέσεις Περιήγηση Υπερ-συνδέσεις Εργασίες Εμφανίζονται διάφορες πληροφορίες για τον δικτυακό μας τόπο. Οι πιο χρήσιμες λειτουργίες αφορούν στις εκθέσεις για τους σπασμένους υπερ-συνδέσμους των ιστοσελίδων μας και η αναφορά για το χρόνο φόρτωσης και μέγεθος των σελίδων μας. Απεικονίζεται η ιεραρχική δομή του δικτυακού μας τόπου. Η προβολή αυτή είναι ιδιαίτερα χρήσιμη όταν θέλουμε π.χ. να προσθέσουμε μενού πλοήγησης στις σελίδες μας το οποίο να ενημερώνεται αυτόματα σε κάθε αλλαγή (προσθήκη ή αφαίρεση σελίδων) Με την προβολή αυτή μπορούμε να δούμε τον τρόπο με τον οποίο είναι οργανωμένοι οι σύνδεσμοι μας και πώς συνδέονται μεταξύ τους οι ιστοσελίδες. Εμφανίζονται όλες οι εργασίες που έχουμε να ολοκληρώσουμε ώστε να λειτουργήσει σωστά ο δικτυακός μας τόπος (things to do) 6) Γραμμή τίτλου αρχείου Εμφανίζεται το όνομα του αρχείου που επεξεργαζόμαστε. 7) Καρτέλες προβολής ιστοσελίδας Υπάρχουν τρεις καρτέλες: Κανονικό (εξ ορισμού) Στην προβολή αυτή εργαζόμαστε και δημιουργούμε την ιστοσελίδα μας. Η σελίδα εμφανίζεται σε κατάσταση επεξεργασίας και διαφέρει λίγο σε σχέση με την εμφάνιση που θα έχει αν την δούμε με ένα πρόγραμμα περιήγησης. Κείμενο HTML Παρουσιάζει τον κώδικα HTML Με τον οποίο δημιουργήθηκε η ιστοσελίδα μας. Μπορούμε να επέμβουμε και να τροποποιήσουμε στοιχεία εάν γνωρίζουμε HTML. Ορισμένες φορές είναι ο μοναδικός τρόπος για να προσθέσουμε διαδραστικά στοιχεία. Προεπισκόπηση Πατώντας την καρτέλα αυτή βλέπουμε τη σελίδα μας όπως θα εμφανίζεται σε ένα πρόγραμμα περιήγησης (browser). Στην προβολή αυτή μπορούμε να δούμε πώς θα εμφανίζεται η ιστοσελίδα μας, αλλά δεν μπορούμε να την επεξεργαστούμε. 4. Προετοιμασία Αρχικός σχεδιασμός Πριν προχωρήσετε στη δημιουργία του φακέλου Web του δικτυακού σας τόπου θα πρέπει να κάνετε ορισμένες προεργασίες. Αρχικά δημιουργήστε έναν φάκελο και ταξινομήστε εκεί όλο το υλικό που επιθυμείτε να συμπεριλάβετε στον δικτυακό σας τόπο σε ηλεκτρονική μορφή. Τοποθετήστε χωριστά τα κείμενα, τις εικόνες, τους ήχους κλπ. Η σωστή ταξινόμηση θα σας βοηθήσει αργότερα να τοποθετήσετε το κάθε αρχείο στη σωστή θέση μέσα στον φάκελο Web που θα δημιουργήσει αυτόματα το Ms Front Page. Μην παραλείψετε να ελέγξετε αν το υλικό αυτό προστατεύεται από πνευματικά δικαιώματα. Στην περίπτωση αυτή θα πρέπει να εξασφαλίσετε την άδεια χρήσης από τους δημιουργούς. Αποφύγετε τα αρχεία με μεγάλο μέγεθος καθώς αυτό ενδέχεται να δημιουργήσει προβλήματα στον χρόνο φόρτωσης των σελίδων σας. Αγγελόπουλος Γιάννης 3

4 Σκεφτείτε ποια θα είναι η διάταξη μιας τυπικής σελίδας του δικτυακού σας τόπου. Θα ήταν εξαιρετικά χρήσιμο να φτιάξετε σε χαρτί ένα πρόχειρο σχέδιο της διάταξης μιας ιστοσελίδας σας. Αν δυσκολεύεστε να πάρετε αποφάσεις, να θέσουμε υπόψη σας μερικές βασικές αρχές: Συνήθως στο επάνω τμήμα γράφουμε τον τίτλο του δικτυακού μας τόπου με μεγάλα γράμματα και ενδεχομένως βάζουμε και μια χαρακτηριστική εικόνα γνωστή ως λογότυπο (logo). Αυτό το τμήμα είναι στενόμακρο Το μενού πλοήγησης μπαίνει ακριβώς κάτω από τον τίτλο (αν είναι οριζόντιο) ή αριστερά (αν είναι κάθετο) και καταλαμβάνει περίπου το 1/6 του πλάτος της σελίδας. Προσοχή, μην του βάλετε πολλές επιλογές. Κρατήστε το μενού απλό. Στο κεντρικό τμήμα της σελίδας γράφουμε συνήθως ένα μήνυμα "καλωσορίσματος", σύντομη περιγραφή, μια εικόνα κλπ. Επειδή όμως θα διαπιστώσετε πως περισσεύει πολύς χώρος, μπορείτε να βάλετε κι έναν πίνακα περιεχομένων (site map) του δικτυακού σας τόπου. Δηλ. να γράψετε αυτά που έχετε στο μενού με μια σύντομη περιγραφή. Προβλέψτε κι έναν χώρο για τα νέα, τις ενημερωμένες σελίδες σας κλπ. Στο κάτω τμήμα τοποθετούμε ένα οριζόντιο μενού πιο απλό όμως από αυτό που θα έχετε ως κύριο μενού πλοήγησης. Καλό είναι να μην περιέχει γραφικά αλλά να είναι απλώς σύνδεσμοι κειμένου Κάτω από το οριζόντιο μενού μπορείτε να βάλετε πληροφορίες, όπως: ποιος είναι ο διαχειριστής του δικτυακού τόπου, πότε ενημερώθηκε για τελευταία φορά η κάθε σελίδα, πληροφορίες επικοινωνίας ( ) κλπ. Σύμφωνα με τις παραπάνω προτάσεις το πρόχειρο σχέδιο μιας τυπικής ιστοσελίδας πρέπει να μοιάζει με το σχέδιο της εικόνας 2. Λογότυπο Τίτλος σελίδας Κάθετο μενού πλοήγησης Αρχική 1 η σελίδα 2 η σελίδα 6 η σελίδα επικοινωνία Μήνυμα του διαχειριστή για τον δικτυακό τόπο Ανακοινώσεις Νέα κλπ. 1 η ανακοίνωση 2 η ανακοίνωση.. 5 η ανακοίνωση Ενημερωμένες σελίδες ή σελίδες με ιδιαίτερο ενδιαφέρον 1 η σελίδα 2 η σελίδα κ.ο.κ. Περιγραφή ιστοσελίδων (site map) 1 η σελίδα (περιγραφή) 2 η σελίδα (περιγραφή) 6 η σελίδα (περιγραφή) Οριζόντιο μενού πλοήγησης Αρχική 1 η σελίδα 2 η σελίδα.. 6 η σελίδα επικοινωνία Όνομα διαχειριστή Ημερομηνία ενημέρωσης (Εικόνα 2. Σκαρίφημα διάταξης τυπικής ιστοσελίδας) Αγγελόπουλος Γιάννης 4

5 Η διάταξη που προτείνουμε είναι η διάταξη μιας τυπικής ιστοσελίδας. Βέβαια η τελική εμφάνιση των σελίδων εξαρτάται από πολλούς παράγοντες, όπως το κοινό στο οποίο απευθύνονται, το γενικότερο ύφος του δημιουργού, την αισθητική εντύπωση που θέλουμε να δημιουργήσουμε κλπ. Αυτό όμως που πρέπει να τηρήσουμε ευλαβικά είναι το ενιαίο ύφος σε όλες τις σελίδες και η ομοιομορφία του μενού πλοήγησης (πλην λίγων εξαιρέσεων ). Σε διαφορετική περίπτωση θα μπερδέψουμε τους επισκέπτες μας και θα καταστήσουμε προβληματική την πλοήγησή τους. Ένα άλλο σημείο που χρήζει προσοχής είναι η χρήση υπογραμμισμένου κειμένου. Μεταξύ των χρηστών του διαδικτύου είναι διαδεδομένη η σύμβαση πως καθετί υπογραμμισμένο αποτελεί υπερσύνδεσμο. Οπότε σε περίπτωση που θέλετε να δώσετε έμφαση σε κάποιο κείμενο επιλέξτε διαφορετική μέθοδο επισήμανσης (π.χ. διαφορετικό μέγεθος γραμματοσειράς, διαφορετικό χρώμα κλπ.) 5. Δημιουργία τοποθεσίας Web Υπάρχουν δύο τρόποι για να δημιουργήσετε μια τοποθεσία Web. Μπορείτε: να δημιουργήσετε τοποθεσία web που να περιέχει μια βασική δομή στην οποία αργότερα μπορείτε να προσθέσετε ιστοσελίδες και να χρησιμοποιήσετε ένα έτοιμο πρότυπο τοποθεσίας Web Όταν δημιουργείται μια νέα τοποθεσία web το πρόγραμμα δημιουργεί ένα φάκελο που έχει την ονομασία της τοποθεσίας (εξ ορισμού: myweb). Στον φάκελο αυτό θα πρέπει να αποθηκεύετε όλα τα αρχεία (ιστοσελίδες, εικόνες, ήχοι κλπ.) που αποτελούν τον δικτυακό σας τόπο. Στον ίδιο φάκελο θα πρέπει να μεταφέρετε και όλα τα αρχεία που έχετε συγκεντρώσει κατά το στάδιο του αρχικού σχεδιασμού. Παρακάτω θα εξετάσουμε τον τρόπο δημιουργίας μιας κενής τοποθεσίας web και μιας τοποθεσίας web βασισμένης σε πρότυπο (το Ms FrontPage 2002 περιλαμβάνει 10 έτοιμα πρότυπα). I. Δημιουργία κενής τοποθεσίας Web Ανοίξτε το FrontPage Πηγαίνετε Αρχείο > Δημιουργία > Σελίδα ή περιεχόμενο web. Κάντε κλικ. Στη δεξιά πλευρά της αρχικής οθόνης του προγράμματος θα ανοίξει μια καρτέλα. Στην καρτέλα αυτή επιλέξτε: Δημιουργία > Κενή τοποθεσία web Από το παράθυρο που θα ανοίξει (εικόνα 3 -α) επιλέξτε: Κενή τοποθεσία web Στο ίδιο παράθυρο δεξιά πηγαίνετε στις Επιλογές > Καθορίστε τη θέση της νέας τοποθεσίας web, πατήστε μέσα στο πλαίσιο κειμένου και πληκτρολογήστε την ονομασία που θα έχει ο φάκελος web. Πατήστε ΟΚ. II. Δημιουργία τοποθεσίας Web από πρότυπο Την ίδια διαδικασία ακολουθούμε και για τη δημιουργία τοποθεσίας web βασισμένης σε πρότυπο. Με τη διαφορά πως επιλέγουμε κάποιο άλλο πρότυπο που ταιριάζει όσο γίνεται περισσότερο με το είδος του δικτυακού τόπου που θέλουμε να δημιουργήσουμε. Έτσι, για παράδειγμα, αν θέλουμε να φτιάξουμε μια προσωπική ιστοσελίδα, επιλέγουμε το πρότυπο «Προσωπικό περιεχόμενο» (εικόνα 3 -β). Ορισμένες φορές μπορεί να διαφέρει η διάταξη της αρχικής σελίδας σε σχέση με τις υπόλοιπες σελίδες. Αγγελόπουλος Γιάννης 5

6 Πλαίσιο κειμένου (Εικόνα 3. Δημιουργία τοποθεσίας Web) Στο παράδειγμα η τοποθεσία που δημιουργήθηκε έχει την ονομασία web1 και αποθηκεύτηκε στην επιφάνεια εργασίας του υπολογιστή μας. (Σημείωση: Φυσικά μπορείτε να ορίσετε άλλο όνομα στο φάκελο και άλλη θέση αποθήκευσης) Σε λίγα δευτερόλεπτα θα παρατηρήσετε πως στη λίστα φακέλων (αριστερό τμήμα της οθόνης) θα εμφανιστούν κάποιοι φάκελοι και μια σελίδα με το όνομα index.htm (εικόνα 4). Αν χρησιμοποιήσατε πρότυπο τότε θα εμφανιστούν περισσότερα αρχεία, ανάμεσα στα οποία υπάρχει επίσης το αρχείο με την ονομασία index.htm (εικόνα 4). Το αρχείο αυτό είναι η αρχική σας σελίδα. Στην 1 η περίπτωση δημιουργήθηκαν οι απαραίτητοι φάκελοι καθώς και η αρχική σελίδα index.htm, μόνο που η σελίδα αυτή είναι κενή και θα πρέπει να κάνετε όλη την υπόλοιπη δουλειά μόνοι σας. Στη 2 η περίπτωση (πρότυπο) δημιουργήθηκαν όλες οι σελίδες που έχει συνήθως ένας προσωπικός δικτυακός τόπος, τα μενού πλοήγησης και όλα τα στοιχεία που είναι απαραίτητα για να λειτουργήσει ο δικτυακός τόπος αλλά κι εδώ απαιτείται αρκετή δουλειά. Θα χρειαστεί να επεξεργαστείτε κάθε σελίδα χωριστά, να αλλάξετε ονομασίες στα αρχεία, να προσθέσετε ή να αφαιρέσετε σελίδες, να αλλάξετε χρωματισμούς κλπ. Πάντως η χρήση προτύπου θα σας απαλλάξει από αρκετή εργασία, ιδιαίτερα τον πρώτο καιρό της ενασχόλησής σας με τη δημιουργία ιστοσελίδων. Για να επεξεργαστείτε μια ιστοσελίδα κάντε διπλό κλικ στο όνομα της ιστοσελίδας που βρίσκεται στη λίστα φακέλων κι αυτή θα εμφανιστεί στο κεντρικό παράθυρο του προγράμματος. Αγγελόπουλος Γιάννης 6

7 Ι. Κενή τοποθεσία Web II. Τοποθεσία Web προσωπικού περιεχομένου 6. Αρχική σελίδα - Ρυθμίσεις (Εικόνα 4) Όπως είδαμε παραπάνω κάθε δικτυακός τόπος έχει μια αρχική σελίδα. Αυτή στη συντριπτική πλειοψηφία ονομάζεται index.htm ή index.html. Πριν προχωρήσετε στην προσθήκη του περιεχομένου και τη διαμόρφωση της σελίδας αυτής, θα πρέπει να κάνετε μερικές ρυθμίσεις για την καλύτερη απεικόνισή της. Εμφανίστε τη σελίδα index.htm κάνοντας διπλό κλικ στο όνομα του αρχείου που βρίσκετε στη λίστα φακέλων. Κάντε δεξί κλικ στην κύρια οθόνη (σε οποιοδήποτε σημείο), στο χώρο κάτω από την καρτέλα με τίτλο index.htm και επιλέξτε Ιδιότητες σελίδας Στο παράθυρο που θα ανοίξει θα ρυθμίσετε 2 βασικά στοιχεία της σελίδας σας: Τον Τίτλο της σελίδας και τη Γλώσσα κωδικοποίησης. Ι. Τίτλος σελίδας Στην καρτέλα Γενικά > Τίτλος γράψτε τον τίτλο που θα έχει η σελίδα σας. (Σημείωση: Ο τίτλος της σελίδας σας είναι κάτι διαφορετικό από το όνομα του αρχείου της σελίδας σας ). Είναι σημαντικό να δώσετε ένα όνομα στη σελίδα σας και μάλιστα σε 2 γλώσσες (π.χ. Ελληνικά -Αγγλικά). Αυτό για να είναι πιο εύκολος ο εντοπισμός των σελίδων σας από τις μηχανές αναζήτησης. Επιπλέον ο τίτλος της σελίδας είναι αυτός που θα εμφανίζεται στη γραμμή τίτλων του προγράμματος πλοήγησης καθώς και στις λίστες των συνδέσμων των Αγαπημένων ή των Bookmarks των επισκεπτών σας. Αν δεν βάλετε τίτλο, τότε οι επισκέπτες σας θα διαβάζουν κάτι σαν.."αρχική σελίδα", "New_page1" κλπ. Γράψτε επομένως έναν καλό τίτλο που να αντιπροσωπεύει το δικτυακό σας τόπο (π.χ. αν είναι σελίδες σχολείου, τότε γράψτε την ονομασία του σχολείου). Σημειώστε πως πρέπει να βάζετε τίτλους και στις υπόλοιπες σελίδες που θα δημιουργήσετε αργότερα. ΙΙ. Γλώσσα Κωδικοποίησης Στην καρτέλα Γλώσσα επιλέξτε Ελληνικά (εικόνα 6). Αυτό θα σας εξασφαλίσει πως οι επισκέπτες σας θα βλέπουν σωστά τα ελληνικά. Αγγελόπουλος Γιάννης 7

8 (Εικόνα 6. Ορισμός κωδικοποίησης σελίδας) Τη διαδικασία αυτή (τίτλος σελίδας και ορισμός κωδικοποίησης) θα χρειαστεί να την επαναλάβετε σε κάθε σελίδα που θα δημιουργήσετε ή θα τροποποιήσετε. Για παράδειγμα, αν χρησιμοποιήσατε πρότυπο, προφανώς θα θέλετε να αλλάξετε τους τίτλους των ιστοσελίδων σε κάτι πιο αντιπροσωπευτικό. 7. Εισαγωγή κειμένου σε ιστοσελίδα Η εισαγωγή κειμένου στο FrontPage γίνεται ακριβώς με τον ίδιο τρόπο όπως και σε κάθε επεξεργαστή κειμένου. Θα χρησιμοποιήσετε δηλ. κυρίως τη γραμμή εργαλείων Μορφοποίηση. Υπάρχουν όμως κάποια σημεία άξια προσοχής: Οι ποιο κοινές γραμματοσειρές στις ιστοσελίδες είναι οι: Times New Roman, Arial, Verdana, Trebouchet, Helvetica και Tahoma. Επιλέξτε μια από αυτές για να είστε βέβαιοι πως τα κείμενά σας θα εμφανίζονται όπως ακριβώς τα γράψατε. Μην χρησιμοποιείτε πολλές διαφορετικές γραμματοσειρές στην ίδια σελίδα. Αποφύγετε πολύ μικρό μέγεθος γραμματοσειράς καθώς και τις γραμματοσειρές που έχουν «ουρίτσες», διότι θα δυσκολέψετε αρκετούς επισκέπτες σας. Για να τονίσετε ένα κείμενο μην χρησιμοποιείτε υπογραμμισμένο κείμενο (underline), γιατί θα θεωρηθεί πως είναι υπερσύνδεσμος (εξ ορισμού οι υπερσύνδεσμοι είναι υπογραμμισμένοι) Αν θέλετε να αλλάξετε γραμμή χωρίς να αφήσετε παράγραφο πρέπει να πληκτρολογήσετε το συνδυασμό πλήκτρων Enter+Shift. (Enter για παράγραφο) Τέλος μια διαφοροποίηση από το Word είναι η εισαγωγή οριζόντιας γραμμής. Μπορείτε να εισάγετε οριζόντια γραμμή από το μενού: Εισαγωγή > Οριζόντια γραμμή. Μάλιστα αν επιλέξετε τη γραμμή και κάνετε δεξί κλικ πάνω της, θα διαπιστώσετε πως σας δίνετε η επιλογή Ιδιότητες οριζόντιας γραμμής. Κάνοντας κλικ εκεί μπορείτε να ορίσετε αρκετές ιδιότητες της γραμμής σας. 8. Εισαγωγή γραφικών χρωμάτων σε ιστοσελίδα Η εισαγωγή γραφικών και χρωμάτων είναι ίσως ένα από τα πιο σημαντικά σημεία στη δημιουργία ιστοσελίδων, όσο και το περιεχόμενο, διότι καθορίζουν την αισθητική εικόνα του δικτυακού τόπου, επηρεάζουν την λειτουργικότητα και παίζουν σημαντικό ρόλο στο χρόνο φόρτωσης των σελίδων. Αγγελόπουλος Γιάννης 8

9 Ι. Γενικά α) Χρώματα Η αισθητική είναι ένα προσωπικό ζήτημα βέβαια, αλλά η επιλογή των σωστών χρωμάτων για το φόντο, το κείμενο, τους συνδέσμους κλπ. είναι κάτι που θα πρέπει να σας απασχολήσει σοβαρά. Αρχικά να θέσουμε υπ' όψη σας πως αρκετοί από τους επισκέπτες σας δεν θα μπορούν να δουν σωστά όλα τα χρώματα. Κι αυτό γιατί μπορεί να διαθέτουν κάρτα γραφικών με μικρές δυνατότητες είτε γιατί δεν έχουν ρυθμίσει την κάρτα γραφικών τους κατάλληλα. Το μόνο σίγουρο είναι πως οποιαδήποτε κάρτα γραφικών μπορεί να απεικονίσει 256 * βασικά χρώματα τα οποία και ονομάζονται "web safe colors". β) Ποιοι συνδυασμοί χρωμάτων είναι κατάλληλοι; Βασικά έχετε δύο επιλογές: 1.Ανοιχτόχρωμο φόντο με σκούρα γράμματα και 2. Σκουρόχρωμο φόντο με ανοιχτά γράμματα Είναι θέμα γούστου ο συνδυασμός που θα διαλέξετε. Σκεφτείτε όμως την περίπτωαη που κάποιος εκτυπώνοντας ένα τμήμα της σελίδας σας, έπαιρνε ως εκτύπωση μια λευκή σελίδα! Αυτό συμβαίνει αν έχετε διαλέξει το 2ο συνδυασμό. Επίσης τα πολύ φωτεινά χρώματα (λαχανί, πορτοκαλί, μπλε κλπ) γίνονται κουραστικά για τον επισκέπτη. Άρα διαλέξτε ξεκούραστα χρώμα όπως ώχρα, κυπαρισσί, λαδί, λευκό, απαλό γκρι κ.ό.κ. γ) Εικόνες Γενικά στο web χρησιμοποιούνται τρία είδη γραφικών (images formats). 1. Τα αρχεία JPEG (.jpg), που είναι κατάλληλα για φωτογραφίες και εικόνες πολλών χρωμάτων. 2. Τα αρχεία GIF (.gif), κατάλληλα για εικόνες που έχουν μέχρι 256 χρώματα (π.χ. κινούμενες εικόνες, κουμπιά, καρτούνς, λογότυπα κλπ) & 3. Τα αρχεία PNG (.png) που υποστηρίζουν υψηλής ποιότητας γραφικά χωρίς να είναι ιδιαίτερα μεγάλα σε μέγεθος. Αυτό πάντως που πρέπει να ξέρετε είναι πως στο διαδίκτυο σημαντικότατο στοιχείο αποτελεί το μέγεθος του αρχείου της εικόνας. Κι αυτό γιατί μια σελίδα που περιέχει πολλά γραφικά καθυστερεί να εμφανιστεί. Ένα λάθος που γίνεται συχνά είναι η τοποθέτηση γραφικών χωρίς να έχει προηγηθεί καμιά επεξεργασία. Για αυτό καλό είναι να μάθετε τη λειτουργία κι ενός προγράμματος επεξεργασίας εικόνας, ώστε να κάνετε στοιχειώδεις επεμβάσεις, όπως π.χ. στην ανάλυση της εικόνας και στο μέγεθός της σε πίξελς (pixels). Επιπλέον χρειάζεται προσοχή και στην επιλογή των εικόνων, καθώς πολλές από αυτές προστατεύονται από πνευματικά δικαιώματα κι επομένως αν τις χρησιμοποιήσουμε παρανομούμε. Χρησιμοποιήστε εικόνες που γνωρίζεται πως διατίθονται για ελεύθερη χρήση (π.χ. εικόνες Clip Art του Ms Office) ή φτιάξτε τις δικές σας δημιουργίες. Παρακάτω θα αναφερθούν όλα τα σημεία που πρέπει να προσέξετε. ΙΙ. Εισαγωγή εικόνων Για να εισάγετε μια εικόνα (clip art, φωτογραφία, animation) στην ιστοσελίδα σας, θα πάτε στο μενού Εισαγωγή > Εικόνα. Από εκεί θα έχετε διάφορες επιλογές (εικόνα 7). Οι κυριότερες είναι: Εισαγωγή εικόνας Clip Art, από αρχείο και από σαρωτή ή κάμερα. Σημειωτέον πως παρόμοιες επιλογές θα έχετε, αν πατήσετε στα αντίστοιχα κουμπιά της γραμμής εργαλείων Εικόνα. * Για την ακρίβεια, τα διαθέσιμα χρώματα είναι 216, καθώς τα υπόλοιπα είναι δεσμευμένα από το λειτουργικό σύστημα. H ανάλυση των οθονών για τους περισσότερους ΗΥ φτάνει στα 72 dpi (για τους ΗΥ τις Apple στα 96 dpi), επομένως εικόνες με ανάλυση πάνω από 96 dpi είναι άχρηστες, καθώς απλώς θα βαραίνουν τη σελίδα χωρίς το ανάλογο αισθητικό αποτέλεσμα. Αγγελόπουλος Γιάννης 9

10 (Εικόνα 7. Εισαγωγή εικόνας) Το σημαντικότερο από όσα πρέπει να γνωρίζετε καθώς εισάγετε εικόνες, είναι πως αυτές θα πρέπει τελικά να αποθηκευτούν στο φάκελο της τοποθεσίας web (κατά προτίμηση στον υποφάκελο images). Εδώ υπάρχουν δύο περιπτώσεις: είτε οι εικόνες θα βρίσκονται ήδη στο φάκελο web είτε κάπου στο σκληρό σας δίσκο. Εάν η εικόνα είναι αποθηκευμένη στο φάκελο images τότε επιλέξτε Εισαγωγή > Εικόνα > Από αρχείο. Θα εμφανιστεί ένα παράθυρο. Εκεί κάντε διπλό κλικ στο φάκελο images και επιλέξτε την εικόνα που θέλετε. Πατήστε Εισαγωγή. Η εικόνα θα εμφανιστεί στη σελίδα. Εάν η εικόνα βρίσκεται σε άλλη θέση στο σκληρό σας δίσκο τότε αφού επιλέξετε Εισαγωγή > Εικόνα > Από αρχείο, θα κάνετε κλικ στο κουμπί που δείχνει το βέλος παρακάτω (εικόνα 8), θα πλοηγηθείτε στο σκληρό σας δίσκο κι αφού βρείτε την εικόνα που θέλετε θα την επιλέξετε και μετά θα πατήσετε Εισαγωγή. Παρόμοια διαδικασία θα ακολουθήσετε και στην περίπτωση που εισάγετε εικόνα ClipArt. (Εικόνα 8. Εισαγωγή εικόνας από το σκληρό δίσκο) Στην περίπτωση που εισάγατε εικόνα που δεν ήταν στο φάκελο web (δηλ. από σκληρό δίσκο ή Clip Art) απομένει να κάνετε άλλη μια ενέργεια. Αποθηκεύστε τη σελίδα σας (Αρχείο > Αποθήκευση). Αμέσως θα εμφανιστεί ένα παράθυρο που σας προτρέπει να αποθηκεύσετε την εικόνα (εικ. 9). o Αν θέλετε να αλλάξετε όνομα στο αρχείο, πατήστε Μετονομασία και πληκτρολογήστε το νέο όνομα o Για να ορίσετε ακριβώς που θα αποθηκευτεί η εικόνα, πατήστε Αλλαγή φακέλου και στο νέο παράθυρο που θα εμφανιστεί κάντε διπλό κλικ στο φάκελο που επιθυμείτε και τέλος ΟΚ και ξανά ΟΚ για να κλείσουν όλα τα παράθυρα. (Εικόνα 9. Αποθήκευση εικόνας από το σκληρό δίσκο ή Clip Art) Αγγελόπουλος Γιάννης 10

11 Αφού εμφανιστεί η εικόνα στη σελίδα, μπορείτε να τροποποιήσετε κάποια στοιχεία της όπως τη θέση της στη σελίδα, το μέγεθος, η στοίχιση, το περίγραμμά της, την εισαγωγή εναλλακτικού κειμένου * κλπ. Για να ορίσετε τις ιδιότητες θα κάνετε δεξί κλικ πάνω στην εικόνα και μετά Ιδιότητες εικόνας (εικ.10). Στην καρτέλα Εμφάνιση έχουμε τις επιλογές: o o o Στυλ Αναδίπλωσης: Ανάλογα με την επιλογή το κείμενο α) δεν θα αναδιπλωθεί, β) θα αναδιπλωθεί αριστερά ή γ) θα αναδιπλωθεί δεξιά της εικόνας. Διάταξη: Ορίζουμε την στοίχιση μέσα στη σελίδα, την απόσταση που θα έχει από το κείμενο ή/και την προηγούμενη παράγραφο & το πάχος του περιγράμματος της εικόνας (εξ ορισμού χωρίς περίγραμμα). Μέγεθος: ορίζουμε το μέγεθος της εικόνας σε πίξελς (pixels) καθώς και αν κατά τη μεταβολή του μεγέθους της θα διατηρηθούν οι αναλογίες πλάτους μήκους (καλό είναι να διατηρούνται) (Εικόνα 10. Ιδιότητες εικόνας) Στην καρτέλα Γενικά μας ενδιαφέρει κυρίως το πλαίσιο εναλλακτικές παρουσιάσεις > κείμενο. Πληκτρολογήστε στο πλαίσιο το εναλλακτικό κείμενο που επιθυμείται και πατήστε ΟΚ. ΙΙΙ. Ορισμός χρώματος ή εικόνας ως φόντο Για να ορίσετε ένα χρώμα ως φόντο ιστοσελίδας: Δεξί κλικ στην ιστοσελίδα > Ιδιότητες σελίδας. Επιλέξτε την καρτέλα Φόντο (εικ. 11) (Εικόνα 11. Ορισμός χρώματος φόντου) Κάντε κλικ στο βελάκι δίπλα από τη λέξη Φόντο. Επιλέξτε το χρώμα που θέλετε και τέλος πατήστε ΟΚ. * Εναλλακτικό ονομάζεται το κείμενο που θα διαβάσει ο επισκέπτης, εάν αφήσει το δείκτη του ποντικιού πάνω στην εικόνα ή αν για κάποιο λόγο δεν εμφανιστεί η εικόνα. Μην αμελείται να γράφεται κάποιο κατατοπιστικό εναλλακτικό κείμενο για τις εικόνες σας. Αγγελόπουλος Γιάννης 11

12 Για να ορίσετε μια εικόνα ως φόντο ιστοσελίδας: Πριν κάνετε οποιαδήποτε άλλη ενέργεια, θα πρέπει να διαλέξετε την εικόνα που σκοπεύετε να χρησιμοποιήσετε. Η εικόνα αυτή θα πρέπει να διαθέτει ορισμένα χαρακτηριστικά. 1. Μικρό μέγεθος αρχείου (κάτω από 3Κb) 2. Μικρές διαστάσεις (120Χ120 pixels και κάτω) 3. Όχι εξεζητημένα χρώματα 4. Συγκεκριμένη ανάλυση (από 72 έως 96dpi) Κι εξηγούμαστε Θα πρέπει να φανταστείτε τη σελίδα σας ως ένα ψηφιδωτό το οποίο θα γεμίσει από την εικόνα φόντου. Δηλ. η εικόνα σας θα επαναλαμβάνεται γεμίζοντας ολόκληρη τη σελίδα, όποια διάσταση κι αν καταλάβει αυτή στους ΗΥ των επισκεπτών σας. Αυτό σημαίνει προς πρέπει να είναι σχετικά ομοιογενής ιδιαίτερα στις άκρες της. Για τα χρώματα και την ανάλυση έγινε αναφορά λίγο παραπάνω. Αφού λοιπόν βρήκατε μια εικόνα με τα παραπάνω χαρακτηριστικά θα κάνετε τις εξής ενέργειες: Αποθηκεύστε την εικόνα στο φάκελο images του web σας. Δεξί κλικ στην ιστοσελίδα > Ιδιότητες σελίδας. Τσεκάρετε το πλαίσιο Εικόνα Φόντου (εικ. 12) Πατήστε Αναζήτηση. Βρείτε το φάκελο όπου αποθηκεύσατε την εικόνα και επιλέξτε την (δίπλα στο κουμπί αναζήτηση θα εμφανιστεί το όνομα του αρχείου). Πατήστε ΟΚ. (Εικόνα 12. Ορισμός εικόνας φόντου) ΙV. Ορισμός χρώματος υπερσυνδέσμων Οι υπερσύνδεσμοι των σελίδων σας μπορούν να έχουν τρεις διαφορετικές χρωματικές καταστάσεις: α) αρχικό χρώμα υπερσυνδέσμου (αυτό που θα βλέπουν όσοι επισκέπτονται τη σελίδα), β) χρώμα υπερσυνδέσμου που έχει επισκεφθεί ο επισκέπτης (ώστε να γνωρίζει ποιες σελίδες έχει ήδη δει) και γ) χρώμα ενεργού υπερσυνδέσμου (το χρώμα των συνδέσμων στους οποίους κάνει κλικ ο επισκέπτης). Για να ορίσουμε τα χρώματα αυτά: Δεξί κλικ στην ιστοσελίδα > Ιδιότητες σελίδας. Επιλέξτε την καρτέλα Φόντο (εικ. 13) (Εικόνα 13. Ορισμός υπερσυνδέσμων) χρωμάτων Κάντε κλικ στα βελάκια δίπλα από τις αντίστοιχες λέξεις. Επιλέξτε το χρώμα που θέλετε για κάθε περίπτωση και τέλος πατήστε ΟΚ. Αγγελόπουλος Γιάννης 12

13 V. Προσθήκη θέματος Για να απαλλαγείτε από όλους αυτούς τους προβληματισμούς περί επιλογής των κατάλληλων χρωματισμών, γραφικών κλπ. υπάρχει μια εύκολη λύση. Το Frontpage διαθέτει μια μεγάλη ποικιλία από έτοιμα θέματα τα οποίο μπορείτε με μερικά κλικ να εφαρμόσετε σε όλες τις σελίδες ή και σε μία μόνο αν θέλετε. Εκτός αυτού σας δίνετε η δυνατότητα να τροποποιήσετε τα θέματα αυτά ή να φτιάξετε το δικό σας θέμα, αλλά αυτό το ζήτημα ξεπερνά τους στόχους του παρόντος οδηγού. Για να εφαρμόστε ένα έτοιμο θέμα του Frontpage στις σελίδες σας θα πάτε στο μενού: Μορφή > Θέμα. Κάνοντας κλικ θα βρεθείτε μπροστά στο παράθυρο της εικόνας παρακάτω (εικ. 14). (Εικόνα 14. Επιλογή θέματος) Αποφασίστε αν θα εφαρμόσετε το θέμα σε όλες τις σελίδες σας ή μόνο σε ορισμένες (1). Επιλέξτε από το πλαίσιο το όνομα κάποιου θέματος. Στην περίπτωσή μας έχει επιλεγεί το θέμα «Τετράγωνα» (2). Δείτε μια προεπισκόπηση του θέματος αυτού στο κεντρικό πλαίσιο (3). Εμφανίζονται όλοι οι χρωματισμοί των διαφόρων στοιχείων μιας σελίδας Τέλος πατήστε ΟΚ και το θέμα θα εφαρμοστεί στις σελίδες ή στη σελίδα σας. Υπάρχει, όπως παρατηρείτε και το κουμπί Τροποποίηση με το οποίο μπορείτε να αλλάξετε τα επιμέρους στοιχεία (χρώματα, γραμματοσειρές, γραφικά, μενού πλοήγησης κλπ. 9. Εισαγωγή Μορφοποίηση πινάκων και κελιών Πολύ σύντομα θα διαπιστώσετε πως η απλή εισαγωγή κειμένου και γραφικών σε μια σελίδα είναι προβληματική και δεν θα σας ικανοποιεί το τελικό αποτέλεσμα. Στην περίπτωση αυτή η λύση είναι η χρήση πινάκων. Με τους πίνακες μπορείτε να έχετε πολύ μεγαλύτερο έλεγχο στην τοποθέτηση των εικόνων, των κειμένων αλλά και των μενού πλοήγησης. Για να δημιουργήσετε έναν πίνακα πηγαίνετε στο μενού: Πίνακας > Εισαγωγή > Πίνακας (εικ. 15) Αγγελόπουλος Γιάννης 13

14 (Εικόνα 15. Εισαγωγή Πίνακα) Εδώ μπορείτε να επιλέξετε τον αριθμό γραμμών και στηλών του πίνακα, τη στοίχιση που θα έχει στη σελίδα και να καθορίσετε το πλάτος του. Στον καθορισμό του πλάτους έχετε δύο επιλογές: α) πλήθος pixel και β) σε ποσοστό. Αν επιλέξετε σε πλήθος pixel τότε για να εμφανιστεί ο πίνακας σε μια οθόνη με ανάλυση 800Χ600 pixels, δεν θα πρέπει να ορίσετε μέγεθος μεγαλύτερο από 740 pixels. Αν επιλέξετε ποσοστό πχ. 100% τότε ο πίνακάς σας θα καταλάβει όλο το διαθέσιμο χώρο της οθόνης του επισκέπτη. Για να ορίσετε τις ιδιότητες σε έναν πίνακα: o Κάντε δεξί κλικ στον πίνακα o Επιλέξτε ιδιότητες πίνακα o Στο παράθυρο που θα εμφανιστεί (εικ. 16) μπορείτε να ορίσετε όλες τις ιδιότητες του πίνακά σας. Δηλ. Διάταξη, Περιγράμματα και Φόντο (πατώντας το κουμπί Στυλ έχετε περισσότερες αλλά πιο εξειδικευμένες δυνατότητες) o Διάταξη: Ορίζεται τη στοίχιση καθώς και τις διαστάσεις του πίνακα σε πλήθος pixel ή σε ποσοστό. o Περιγράμματα: Καθορίζετε το περίγραμμα του πίνακα και το χρώμα του περιγράμματος. Παράλληλα μπορείτε να επιλέξετε την εμφάνιση των περιγραμμάτων σε όλα τα κελιά του πίνακα και τους χρωματισμούς των κυρίων περιγραμμάτων και των σκιάσεων που πιθανόν να έχουν. o Φόντο: Επιλέγετε το φόντο του πίνακα είτε ως χρώμα είτε ως εικόνα φόντου. Στη 2 η περίπτωση τσεκάρετε το πλαίσιο Χρήση εικόνας φόντου και πατώντας το κουμπί αναζήτηση διαλέξτε την ανάλογη εικόνα (θυμηθείτε πρέπει να είναι αποθηκευμένη στο φάκελο web). o Τέλος πατήστε Εφαρμογή και ΟΚ. (Εικόνα 16. Ιδιότητες Πίνακα) Αγγελόπουλος Γιάννης 14

15 Για να μορφοποιήσετε κελιά ενός πίνακα: o Κάντε δεξί κλικ στον κελί o Επιλέξτε ιδιότητες κελιού o Η μόνη διαφοροποίηση σε σχέση με τις ιδιότητες πίνακα εντοπίζονται στη διάταξη. Εδώ έχουμε επιπλέον επιλογές για την οριζόντια και κατακόρυφη στοίχιση του περιεχομένου των κελιών καθώς και την επιλογή Χωρίς αναδίπλωση (εικ.17). o Αν τσεκάρουμε το πλαίσιο Χωρίς αναδίπλωση τότε το κείμενο που περιέχει το κελί δεν θα αναδιπλώνονται αλλά θα εμφανίζονται όλα στην ίδια γραμμή. Αυτό είναι ορισμένες φορές χρήσιμο, ιδιαίτερα όταν θέλουμε ομοιομορφία στο ύψος των κελιών. o (Εικόνα 17. Διάταξη περιεχομένου κελιού) Αφού κάνετε όλες τις επιλογές σας πατήστε Εφαρμογή και ΟΚ. Για να προσθέσετε γραμμές και στήλες σε πίνακα: o Διαλέξτε τη γραμμή ή στήλη δίπλα στην οποία θέλετε να κάνετε την αλλαγή o Μετά στο μενού Πίνακας > Εισαγωγή > Γραμμές και Στήλες o Κάντε την επιθυμητή επιλογή και πατήστε ΟΚ. Τέλος για άλλες λειτουργίες που σχετίζονται με τους πίνακες μπορείτε να χρησιμοποιείται τη γραμμή εργαλείων Πίνακας (εικόνα) Με τα εργαλεία αυτά εκτελούνται γρήγορα οι περισσότερες λειτουργίες ενός πίνακα όπως προσθήκη και διαγραφή κελιών/στηλών, συγχώνευση κελιών, στοίχιση, ορισμός φόντου κλπ. 10. Δημιουργία μενού πλοήγησης Όπως αναφέρθηκε και στην ενότητα «Προετοιμασία Σχεδιασμός», το μενού πλοήγησης του δικτυακού μας τόπου μπορεί να είναι κάθετο ή/και οριζόντιο, να αποτελείται από απλούς συνδέσμους κειμένου ή να διαθέτει κουμπιά συνδεδεμένα με όλες τις σελίδες. Το μενού πλοήγησης είναι δυνατόν να δημιουργηθεί με αρκετούς τρόπους. Οι κυριότεροι είναι: α) μενού που δημιουργήθηκε από πρότυπο, β) δημιουργία μενού που βασίζεται σε δομή περιήγησης. Ι. μενού που δημιουργήθηκε από πρότυπο Σε προηγούμενο σημείο του οδηγού αυτού, είδαμε πώς δημιουργείτε ένας δικτυακός τόπος προσωπικού περιεχομένου με τη χρήση προτύπου του FrontPage. Στην περίπτωση αυτή το μενού πλοήγησης (κάθετο και οριζόντιο) δημιουργούνται αυτόματα. Εντούτοις θα πρέπει να γνωρίζουμε, πώς τροποποιείται το μενού αυτό αλλά και τον τρόπο που προσθέτουμε νέες σελίδες στη δομή περιήγησης. Αρχικά δημιουργήστε έναν δικτυακό τόπο βασισμένο σε πρότυπο (ακολουθήστε οδηγίες που αναφέρονται παραπάνω). Στο παράδειγμά μας πρόκειται για δικτυακό τόπο προσωπικού περιεχομένου. Θα προσπαθήσουμε να αλλάξουμε τα κείμενα του μενού και να προσθέσουμε μια νέα σελίδα στο υπάρχον μενού. Αγγελόπουλος Γιάννης 15

16 Τροποποίηση τίτλων σελίδων Έστω πως το κείμενο «Προσωπικά στοιχεία» του υπάρχοντος μενού δεν μας ικανοποιεί και θέλουμε να το αλλάξουμε σε «Βιογραφικό». o Πατήστε το κουμπί περιήγηση στο δεξί πλαίσιο (1) o Θα εμφανιστεί η παρακάτω εικόνα (εικ.18). Στο κεντρικό παράθυρο εμφανίζεται η δομή πλοήγησης του δικτυακού μας τόπου. (Εικόνα 18. Προβολή περιήγησης) o Αριστερά εμφανίζεται η αρχική σελίδα index.htm (2) που έχει τίτλο «Καλώς ορίσατε». Επιπλέον ξεχωρίζει έχοντας ένα σπιτάκι στην κάτω αριστερή γωνία. o Δεξιά εμφανίζονται οι τίτλοι * των υπόλοιπων σελίδων. o Επιλέξτε τη σελίδα με τίτλο «Προσωπικές πληροφορίες» (3) o Κάντε δεξί κλικ στον τίτλο και επιλέξτε Μετονομασία. o Πληκτρολογήστε το νέο τίτλο «Βιογραφικό» o Πατήστε το κουμπί Σελίδα (4) για να επιστρέψετε στην αρχική προβολή. o Το μενού μας έχει αλλάξει και σε όλες τις σελίδες γράφει πλέον «Βιογραφικό». Προσθήκη νέας σελίδας στη δομή περιήγησης Έστω πως δημιουργήσαμε μια νέα σελίδα την 1stpage.htm (εικ. 19) και θέλουμε να τις δώσουμε τον τίτλο «Ασκήσεις». Φυσικά θέλουμε να προστεθεί κι αυτή στο μενού πλοήγησης και μάλιστα να ενημερωθούν όλες οι σελίδες με το νέο μενού. o Πατήστε το κουμπί περιήγηση στο δεξί πλαίσιο (δες παραπάνω) o Πάτα πάνω στη σελίδα 1stpage.htm (1) και σύρε την με το ποντίκι μέσα στο κεντρικό πλαίσιο, ανάμεσα στις σελίδες «Ενδιαφέροντα» και «Διάφορα». o Παρατηρήστε πως καθώς σέρνεται τη σελίδα εμφανίζεται μια γραμμή σύνδεσης με τη σελίδα «Καλώς ορίσατε». Έχετε ακόμη τη δυνατότητα να αλλάξετε τη θέση της σελίδας στο μενού απλώς μετακινώντας την στη θέση που θέλετε. o Επιλέξτε τη σελίδα, η οποία έχει τον τίτλο 1stpage.htm ή Νέα_Σελίδα o Κάντε δεξί κλικ στον τίτλο και επιλέξτε Μετονομασία. o Πληκτρολογήστε «Ασκήσεις»(2) o Πατήστε το κουμπί Σελίδα για να επιστρέψετε στην αρχική προβολή o Η νέα σελίδα έχει προστεθεί στο μενού με τον τίτλο «Ασκήσεις» Σημείωση: Αν θέλετε να αφαιρέστε σελίδα από τη δομή περιήγησης, απλώς κάντε επάνω της δεξί κλικ και μετά επιλέξτε διαγραφή. Προσοχή στο πλαίσιο διαλόγου που θα εμφανιστεί, σας δίνονται δύο επιλογές. Να αφαιρέσετε τη σελίδα από τη δομή περιήγησης (η σελίδα όμως δεν θα διαγραφεί) και να διαγράψετε οριστικά τη σελίδα (οπότε διαγράφεται τελείως από το φάκελο web!) * Ο τίτλος μιας σελίδας είναι κάτι διαφορετικό από το όνομα του αρχείου της σελίδας. Έτσι η αρχική σελίδα μπορεί να έχει τον τίτλο π.χ. «Καλώς ορίσατε» αλλά το όνομα του αρχείου είναι index.htm. Αγγελόπουλος Γιάννης 16

17 (Εικόνα 19. Προσθήκη σελίδας στη δομή περιήγησης) ΙΙ. δημιουργία μενού που βασίζεται σε δομή περιήγησης Στην περίπτωση που έχουμε δημιουργήσει μερικές ιστοσελίδες χωρίς τη χρήση προτύπου και θέλουμε να τις συνδέσουμε ώστε να δημιουργήσουμε μενού πλοήγησης, θα πρέπει αρχικά να δημιουργήσουμε μια δομή περιήγησης: Δημιουργία δομής περιήγησης (εικ. 20) Πατάμε το κουμπί περιήγηση (1). Παρατηρούμε πως εμφανίζεται μόνο η αρχική σελίδα. Μετονομάστε τον τίτλο της αρχικής σας σελίδας (με δεξί κλικ και Μετονομασία) Σύρετε τις σελίδες σας από τη Λίστα φακέλων (2) με τον τρόπο που αναφέρετε παραπάνω (προσθήκη σελίδας στη δομή περιήγησης) Μετονομάστε τις σελίδες σας (3). Κάντε κλικ στο κουμπί προβολής σελίδας (4) για να επιστρέψετε στην αρχική προβολή Δημιουργία μενού πλοήγησης (Εικόνα 20. δημιουργία δομής περιήγησης) Αφού επιστρέψετε στην προβολή σελίδας θα διαπιστώσετε πως δεν εμφανίζεται το μενού πλοήγησης! Χρειάζεται να το εισάγουμε εμείς. Πρώτα απ όλα όμως απαιτείται να δημιουργήσουμε έναν πίνακα στον οποίο θα τοποθετήσουμε ένα κάθετο μενού κι ένα οριζόντιο μενού. Πάμε στο Μενού Πίνακας > Εισαγωγή > Πίνακας. Επιλέξτε 3 γραμμές και 2 στήλες και ποσοστό 100% και ΟΚ Σημείωση: Την 1 η γραμμή την θέλουμε για να βάλουμε αργότερα το λογότυπό μας και τον τίτλο σελίδας. Στην 2 η γραμμή θα μπουν το κάθετο μενού πλοήγησης (αριστερά) και τυχόν κείμενα ή εικόνες που υπάρχουν ήδη στις σελίδες (δεξιά) και στην 3η γραμμή θα τοποθετήσουμς το οριζόντιο μενού. Φυσικά μπορείτε να προσθέσετε και άλλες γραμμές και στήλες ανάλογα με το περιεχόμενο των σελίδων σας Εφόσον ακολουθήσατε τις οδηγίες, πρέπει να έχετε έναν πίνακα όπως ο παρακάτω. Αγγελόπουλος Γιάννης 17

18 Λογότυπο Κάθετο μενού πλοήγησης Τίτλος Σελίδας Κείμενα και εικόνες Οριζόντιο μενού πλοήγησης (πίνακας 1. Πιθανή διάταξη ιστοσελίδας) Ώρα για το μενού: Κάντε κλικ στο κελί όπου θα τοποθετηθεί το κάθετο μενού πλοήγησης. Πηγαίνετε στο μενού Εισαγωγή > Στοιχείο Web > Γραμμές Συνδέσεων > Γραμμή που βασίζεται στη δομή περιήγησης. Πατήστε Επόμενο. Επιλέξτε κάποιο από τα προσφερόμενα στυλ γραμμής (στο παράδειγμα επιλέχθηκε το Μοντέρνο δίκτυο). Πατήστε Επόμενο. Επιλέξτε Κάθετο Προσανατολισμό > Τέλος Θα ανοίξει το παράθυρο Ιδιότητες γραμμής συνδέσεων. Κάντε τις επιλογές της εικόνας (εικ. 21) (Εικόνα 21. Ιδιότητες γραμμής συνδέσεων) Πατήστε τέλος. Θα εμφανιστεί το μενού πλοήγησης Με την ίδια διαδικασία θα δημιουργήσετε κι ένα οριζόντιο μενού πλοήγησης (οριζόντιος προσανατολισμός). Το οριζόντιο μενού πλοήγησης καλά θα ήταν να μην έχει γραφικά αλλά να είναι απλό κείμενο (θα βρείτε τέτοια επιλογή στο στυλ γραμμής). Αφού μείνετε ικανοποιημένοι με το αποτέλεσμα αντιγράψτε των πίνακα σε όλες τις σελίδες (εικ. 22). 11. Δημιουργία υπερσυνδέσμων (Εικόνα 22) Οι σύνδεσμοι (hyperlinks) είναι κείμενα (συνήθως υπογραμμισμένα) ή εικόνες που οδηγούν σε άλλες σελίδες είτε του δικτυακού σας τόπου (εσωτερικοί σύνδεσμοι) είτε σε σελίδες άλλων δικτυακών τόπων (εξωτερικοί σύνδεσμοι). Για να δημιουργήσετε έναν σύνδεσμο (εσωτερικό ή εξωτερικό): Αγγελόπουλος Γιάννης 18

19 Επιλέξτε το κείμενο ή την εικόνα. Πηγαίνετε στο μενού Εισαγωγή > Υπέρ-σύνδεση. Θα ανοίξει το παράθυρο εισαγωγή υπερσύνδεσης (εικ. 23) Πατήστε το κουμπί Υπάρχον αρχείο ή ιστοσελίδα (1). (Εικόνα 23) Επιλέξτε την σελίδα στην οποία θα οδηγεί ο υπερσύνδεσμος (εφόσον πρόκειται για εσωτερικό σύνδεσμο) ή πληκτρολογήστε τη διεύθυνση του εξωτερικού δικτυακού τόπου (εξωτερικός σύνδεσμος). Στο παράδειγμά μας επιλέξαμε να συνδεθούμε με τη διεύθυνση (2) Στην περίπτωση εσωτερικού συνδέσμου πατήστε ΟΚ. Στην περίπτωση εξωτερικού συνδέσμου πατήστε πλαίσιο προορισμού (3). Εδώ επιλέξτε Νέο παράθυρο (_blank). Έτσι αν πατηθεί ο συγκεκριμένος σύνδεσμος, θα ανοίξει νέα σελίδα όπου θα εμφανιστεί ο δικτυακός τόπος Τέλος πατήστε ΟΚ και ΟΚ, για να κλείσουν τα παράθυρα Για να δημιουργήσετε έναν σύνδεσμο για ηλεκτρονικό ταχυδρομείο Θα θέλετε βέβαια οι επισκέπτες σας να σας στέλνουν μηνύματα ηλεκτρονικού ταχυδρομείου με σχόλια και παρατηρήσεις για τον δικτυακό σας τόπο. Αυτό είναι εφικτό με τον παρακάτω τρόπο: Επιλέξτε το σχετικό κείμενο (π.χ. Επικοινωνία) ή μια εικόνα που συμβολίζει αλληλογραφία. Πηγαίνετε στο μενού Εισαγωγή > Υπερ-σύνδεση. Θα ανοίξει το παράθυρο εισαγωγή υπερσύνδεσης (εικ. 24) (Εικόνα 24) Επιλέξτε το κουμπί Διεύθυνση ηλεκτρονικού ταχυδρομείου (1) Στο πεδίο Διεύθυνση ηλεκτρονικού ταχυδρομείου (2) πληκτρολογήστε την ηλεκτρονική σας διεύθυνση (εδώ το mailto συμπληρώνεται αυτόματα) Αγγελόπουλος Γιάννης 19

20 Στο πεδίο Θέμα (3) πληκτρολογήστε (προαιρετικά) το θέμα που θα έχει το μήνυμα που θα λαμβάνετε από επισκέπτες του δικτυακού σας τόπου. Πατήστε ΟΚ. Τώρα καθώς οι επισκέπτες θα πατούν την υπερσύνδεση, θα ανοίγει το πρόγραμμα ηλεκτρονικού ταχυδρομείου που έχουν με συμπληρωμένη τη διεύθυνσή σας και το θέμα. 12. Σελιδοδείκτες Ένα άλλο χρήσιμο στοιχείο που πρέπει να περιέχει μια ιστοσελίδα είναι οι σελιδοδείκτες. Πρόκειται για υπέρ-συνδέσμους που μας οδηγούν σε διάφορα σημεία μέσα στην ίδια σελίδα (σε αντίθεση τους υπερ-συνδέσμους που είδαμε σε προηγούμενη παράγραφο και μας οδηγούσαν είτε σε άλλη σελίδα είτε σε άλλο δικτυακό τόπο). Ας υποθέσουμε ότι θέλουμε να δημιουργήσουμε σελιδοδείκτες στο παράδειγμα που παρουσιάζεται στην επόμενη εικόνα. Η συγκεκριμένη σελίδα περιέχει οδηγίες για τη δημιουργία προσωπικών ιστοσελίδων, έχει πέντε κεφάλαια (θα μπορούσε να έχει πολλά περισσότερα) τα οποία παρουσιάζονται σε μορφή περιεχόμενων στην αρχή στη ιστοσελίδας. Στόχος είναι να δημιουργηθούν σελιδοδείκτες ώστε ο χρήστης κάνοντας κλικ πάνω σε ένα από τα περιεχόμενα να οδηγείται αυτόματα στην αρχή της αντίστοιχης παραγράφου και αφού την διαβάσει πατώντας κάποιο κουμπί ή κάποια λέξη ή πρόταση να οδηγείται αντίστοιχα πάλι στην αρχή της σελίδας για να επιλέξει κάποιο άλλο από τα περιεχόμενα. (Εικόνα 25) Το πρώτο βήμα είναι να μαρκάρω την επικεφαλίδα της κάθε παραγράφου. Στο παράδειγμα που παρουσιάζεται στην επόμενη εικόνα έχω μαρκάρει την Εισαγωγή. Στη συνέχεια επιλέγω από το μενού Εισαγωγή την επιλογή Σελιδοδείκτες, όπως φαίνεται στην εικόνα 26. Αγγελόπουλος Γιάννης 20

21 (Εικόνα 26) Αμέσως, θα εμφανιστεί το παρακάτω παράθυρο με όνομα σελιδοδείκτη την ή τις λέξεις, που έχουμε μαρκάρει. Αποδέχομαι το όνομα του σελιδοδείκτη πατώντας ΟΚ όποως φαίνεται στην εικόνα 27. (Εικόνα 27) Επαναλαμβάνουμε την ίδια διαδικασία για όλες τις επικεφαλίδες όλων των παραγράφων του κειμένου που υπάρχει στην συγκεκριμένη ιστοσελίδα. Όταν το κάνουμε για όλες τις επικεφαλίδες των παραγράφων θα δημιουργηθούν και οι αντίστοιχοι σελιδοδείκτες όπως φαίνεται στην εικόνα 28. (Εικόνα 28) Αγγελόπουλος Γιάννης 21

22 Ουσιαστικά έχουμε τελειώσει με το πρώτο βήμα της διαδικασίας. Το δεύτερο βήμα είναι να δημιουργήσουμε συνδέσμους από τα περιεχόμενα προς την κάθε παράγραφο (ουσιαστικά προς τους σελιδοδείκτες που έχουμε ήδη δημιουργήσει) Αυτό που κάνουμε είναι να μαρκάρουμε τον κάθε τίτλο της επικεφαλίδας και με δεξί κλικ να επιλέξουμε Υπέρ-σύνδεση όπως φαίνεται στην εικόνα 29. (Εικόνα 29) Στο παράθυρο που θα εμφανιστεί, επιλέγω Σύνδεση με: Θέση μέσα στο έγγραφο (α) και στη συνέχεια τον σελιδοδείκτη ( από τους σελιδοδείκτες που έχω ήδη δημιουργήσει) (β) (α) (β) (Εικόνα 30) Την ίδια διαδικασία επαναλαμβάνω για όλα τα περιεχόμενα. Αγγελόπουλος Γιάννης 22

23 Στην περίπτωση που θέλω να μεταβαίνω από την κάθε παράγραφο στη αρχή της σελίδας (στα περιεχόμενα) ακολουθώ την επόμενη διαδικασία. Μετά το τέλος της κάθε παραγράφου μπορώ να προσθέσω μια λέξη (π.χ. Αρχή ή Περιεχόμενα, ή μια πρόταση (π.χ. Επιστροφή στην αρχή) ή ακόμα και ένα σχετικό εικονίδιο στα οποία θα δημιουργήσω ύπερε-σύνδεσμο που θα με οδηγεί στη αρχή. Στο παράδειγμα που παρουσιάζω εγώ (εικ. 31), επέλεξα να προσθέσω τη λέξη Περιεχόμενα. (Εικόνα 31) Μετά τοποθετώ τον κέρσορα στο σημείο που θέλω να μεταβαίνω όταν πατάω τη λέξη Περιεχόμενα (προφανώς κάπου πολύ κοντά στην επικεφαλίδα Περιεχόμένα) και από το μενού Εισαγωγή επιλέγω Σελιδοδείκτης (εικ.32) (Εικόνα 32) Αγγελόπουλος Γιάννης 23

24 Στο παράθυρο που εμφανίζεται γράφω εγώ τη λέξη περιεχόμενα ως όνομα σελιδοδείκτη και πατάω ΟΚ (εικ. 33) (Εικόνα 33) Στο σημείο που είχαμε αρχικά κάνει κλικ κάτω από τη λέξη Περιεχόμενα εμφανίστηκε μια σημαία, δείγμα ότι έχω δημιουργήσει σελιδοδείκτη (εικ. 34) (Εικόνα 34) Στη συνέχεια επιλέγω - μαρκάρω τη λέξη Περιεχόμενα (που εγώ πρόσθεσα στο τέλος της κάθε παραγράφου ) και με δεξί κλικ επιλέγω Υπερ-Σύνδεση και στο παράθυρο που θα εμφανιστεί επιλέγω το σελιδοδείκτη με όνομα περιεχόμενα και πατάω ΟΚ (εικ. 35) (Εικόνα 35) Αγγελόπουλος Γιάννης 24

25 Τη ίδια διαδικασία επαναλαμβάνω για όλες τις λέξεις Περιεχόμενα που πρόσθεσα στο τέλος κάθε παραγράφου. 13. Δημοσίευση σε διακομιστή Web Το τελευταίο στάδιο του σχεδιασμού του δικτυακού σας τόπου είναι να τον ανεβάσετε σε έναν διακομιστή δικτύου (Web Sever) προκειμένου να δημοσιευθεί στο διαδίκτυο. Υπάρχουν διάφορες λύσεις τις οποίες κα θα παρουσιάσουμε. Πρώτα όμως θα πρέπει να έχετε εξασφαλίσει χώρο σε κάποιο διακομιστή δικτύου. Ο διακομιστής δικτύου δεν είναι τίποτε άλλο από έναν παροχέα που θα μας εξασφαλίσει απαραίτητο χώρο σε κάποιον υπολογιστή, προκειμένου να αποθηκεύσουμε τον δικτυακό μας τόπο και αυτός να είναι διαθέσιμος σε οποιονδήποτε. Ι. Αίτηση σε κάποιον διακομιστή Υπάρχουν πολλοί παροχείς που μπορούν να μας εξασφαλίσουν τέτοιο χώρο (και άλλες υπηρεσίες του διαδυκτίου όπως e - mail κλπ). Το κόστος διαφέρει από τις υπηρεσίες που μας παρέχει και τον διαθέσιμο χώρο. Εγώ επέλεξα να χρησιμοποιήσω ως διακομιστή το topcities ( Στις επόμενες σελίδες παρουσιάζω τον τρόπο με τον οποίο θα αποκτήστε «χώρο» στον συγκεκριμένο παροχέα και πως θα ανεβάσετε τις σελίδες σας. Η διαδικασία που ακολουθείται στο topcities.com είναι σχεδόν παρόμοια με αυτή που ακολουθούμε και σε άλλους (δωρεάν ) παροχείς. Πρώτα πρέπει αφού επισκεφτούμε την ιστοσελίδα του topcities.com να κάνουμε μια εγγραφή. Στη πρώτη σελίδα όπως φαίνεται στην παρακάτω εικόνα, επιλέγω Join Now. (Εικόνα 36) Αγγελόπουλος Γιάννης 25

26 Στην σελίδα που εμφανίζεται υπάρχουν πληροφορίες σχετικά με το μηνιαίο κόστος και τις υπηρεσίες που διατίθενται κλπ. Εμείς θα επιλέξουμε τη μηδενική συνδρομή με 150 ΜΒ ελεύθερο χώρο αλλά μέγιστο μέγεθος ανά σελίδα που θα ανεβάσουμε τα 900 ΚΒ. (Εικόνα 37) Για να προχωρήσω στην εγγραφή πατάω το κουμπί ORDER στο σημείο που δείχνει το βελάκι. Στη συνέχεια θα πρέπει να διαλέξουμε ένα όνομα (domain name) που θα είναι χαρακτηριστικό της ιστοσελίδας μας. Ότι επιλέξουμε πρέπει να είναι χαρακτηριστικό όνομα σχεδόν πάντα με Αγγελόπουλος Γιάννης 26

27 βάση το πραγματικό μας όνομα. Για παράδειγμα κάποιος με όνομα Γιάννης Αγγελόπουλος θα μπορούσε να επιλέξει (πάντα με λατινικούς χαρακτήρες) yiannisaggelo. Στην περίπτωση αυτή η διεύθυνση της ιστοσελίδα του θα είναι Όταν το κάνουμε αυτό πατάμε το Register (Εικόνα 38) και εμφανίζεται η επόμενη σελίδα στην οποία μας ζητείται να δηλώσουμε κάποια προσωπικά μας στοιχεία. Μπορούμε να δηλώσουμε οτιδήποτε θέλουμε σε όσα πεδία έχουν έναν αστερίσκο (*) και τα οποία πρέπει να δηλωθούν υποχρεωτικά, εκτός από το e - mail μας, το οποίο πρέπει να είναι το σωστό γιατί σε αυτό θα μας σταλεί αυτόματα το password. (Εικόνα 39) Αγγελόπουλος Γιάννης 27

28 Στο τελευταίο τμήμα της σελίδας με τα προσωπικά μας στοιχεία μας ζητούν να επιλέξουμε τι είδους διαφημίσεις θέλουμε να εμφανίζονται (χωρίς κόστος ) στην ιστοσελίδα μας. Δεν είναι υποχρεωτικό απλά αυτός είναι ένας τρόπος για να συντηρηθούν οικονομικά τέτοια χρήσιμα sites. Όταν πατήσουμε το κουμπί Join Now και εάν όλα έχουν πάει καλά, θα εμφανιστεί η επόμενη οθόνη που επιβεβαιώνει τη δημιουργία του site μας. ΙΙ. Ανέβασμα αρχείων (Εικόνα 40) Το επόμενο βήμα είναι να «ανεβάσουμε» στον διακομιστή τα αρχεία της προσωπικής μας ιστοσελίδας, που έχουμε ήδη φτιάξει με το front page. Υπάρχουν πολλοί τρόποι. Εμείς θα παρουσιάσουμε δύο από αυτούς. Α Τρόπος - Μέσα από την ιστοσελίδα του διακομιστή Στο και στην πρώτη σελίδα (Εικόνα 41) υπάρχει ο σύνδεσμος Log In. Πατώντας σε αυτόν εμφανίζεται το επόμενο παράθυρο Αγγελόπουλος Γιάννης 28

29 (Εικόνα 42) στο οποίο θα πρέπει να δώσουμε τα απαραίτητα στοιχεία. Αυτά είναι το όνομα λογαριασμού (Account Name) και είναι το όνομα που δηλώσαμε ως χαρακτηριστικό της ιστοσελίδας μας (στο παράδειγμα μας το yiannisaggelo) και ο μυστικός κωδικός (password) που μας έχει σταλεί μέσω e mail όταν κάναμε την αίτηση εγγραφής. Δίνοντας σωστά τα στοιχεία αυτά, εμφανίζεται το επόμενο παράθυρο. Σε αυτό υπάρχει ένα μενού με τις βασικές εργασίες που μπορούμε να κάνουμε στον ιστότοπο που μας έχει παραχωρηθεί. (Εικόνα 43) Αγγελόπουλος Γιάννης 29

30 Ένα από τα μενού είναι και το File Uploads. Κάνοντας κλικ σε αυτό ανοίγει σελίδα με δυο εναλλακτικούς τρόπους ανεβάσματος αρχείων : Ο εύκολος τρόπος (Easy Upload) και ο βασικός (Basic) Με τον εύκολο τρόπο μπορώ πατώντας στο κουμπί Add όπως φαίνεται στην παρακάτω εικόνα και μέσω του παραθύρου που εμφανίζεται (Εικόνα 44) (Εικόνα 45) να βρω το φάκελο με τα αρχεία και να επιλέξω αυτά που θέλω. Εάν είναι περισσότερα από ένα θα χρησιμοποιήσω το πλήκτρο ctrl και το αριστερό πλήκτρο του ποντικού) και να πατήσω ΟΚ όπως φαίνεται στην επόμενη εικόνα. (Εικόνα 46) Αγγελόπουλος Γιάννης 30

31 Όσα αρχεία επιλέξω εμφανίζονται όπως στην επόμενη εικόνα (Εικόνα 47) Πατώντας το κουμπί Upload these files τα αρχεία που έχω επιλέξει «ανεβαίνουν», στον προσωπικό μου ιστοχώρο. Με τον βασικό τρόπο (Basic) μπορώ να πατήσω το κουμπί Αναζήτηση για κάθε αρχείο που θέλω να ανεβάσω. (Εικόνα 48) Πατώντας το κάθε φορά, εμφανίζεται το παράθυρο των windows Αγγελόπουλος Γιάννης 31

32 (Εικόνα 49) μέσω του οποίου μπορώ να βρω το φάκελο με τα αρχεία που θέλω να ανεβάσω και να επιλέξω αυτά που θέλω. Πατώντας το κουμπί Upload these files τα αρχεία που έχω επιλέξει «ανεβαίνουν», στον προσωπικό μου ιστοχώρο. Τόσο απλά.. Β Τρόπος- Μέσω Προγράμματος FTP Στο διαδίκτυο υπάρχουν ειδικά προγράμματα (δωρεάν ή περιορισμένης χρήσης) τα οποία χρησιμοποιούν το πρωτόκολλο μεταφοράς αρχείων (File Transfer Protocol- FTP) με σκοπό την μεταφορά αρχείων από υπολογιστή σε υπολογιστή. Στη συγκεκριμένη περίπτωση θα τα χρησιμοποιήσουμε για να μεταφέρουμε τις ιστοσελίδες που δημιουργήσαμε από τον προσωπικό μας υπολογιστή, στον διακομιστή που επιλέξαμε να τις φιλοξενήσει. Όπως αναφέρθηκε σε προηγούμενη παράγραφο ο διακομιστής αυτός δεν είναι τίποτε άλλο παρά ένας υπολογιστής ( ο οποίος δεν μας ενδιαφέρει που είναι) μεγάλων δυνατοτήτων και στον οποίο έχουμε «δεσμεύσει» χώρο αρκετών Μb (στην περίπτωση του topcities.com ο διαθέσιμος χώρος μας είναι 150 Mb) Α. Το πρόγραμμα Ιpswitch WS_FTP Ένα από τα πιο γνωστά προγράμματα είναι το ( Τη πρώτη φορά που ξεκινάτε το πρόγραμμα εμφανίζεται η παρακάτω οθόνη, στη οποία μας ζητάει να γράψουμε ένα όνομα για το site στο οποίο θα συνδεθούμε και στο οποίο θα συνδεόμαστε όταν θέλουμε να κάνουμε αλλαγές. Το όνομα αυτό μπορεί να είναι οτιδήποτε (π.χ. my site ή personal site ή my web ή aggelopoulos κλπ κλπ) Όταν το γράψω πατάω το κουμπί Επόμενο > (εικ. 50) Αγγελόπουλος Γιάννης 32

33 (Εικόνα 50) Στην επόμενη οθόνη αποδέχομαι ότι προτείνει και πατάω το κουμπί Επόμενο > (Εικόνα 51) Η επόμενη οθόνη (εικ. 52) ζητά να δώσουμε το όνομα του διακομιστή (server address). Στην περίπτωση του topcities.com αυτό είναι το myname.topcities.com όπου myname είναι το όνομα που διαλέξαμε ως domain name της ιστοσελίδας μας. Για παράδειγμα εγώ είχα διαλέξει το (πάντα με λατινικούς χαρακτήρες) yiannisaggelo. Στην περίπτωση αυτή θα πληκτρολογήσω yiannisaggelo.topcities.com. Όταν το κάνουμε αυτό πατάμε το κουμπί Επόμενο> (Εικόνα 52) Αγγελόπουλος Γιάννης 33