Σχήμα-1 Do you want to sell online

Τα Εργαλεία Κατασκευής και Φιλοξενίας Ιστοσελίδων Αρχικά η κατασκευή ιστοσελίδων πραγματοποιούνταν με την χρήση κάποιας γλώσσας προγραμματισμού όπως π.χ. η HTML και απαιτούσε γνώσεις προγραμματισμού. Επίσης, μετά την κατασκευή μιας ιστοσελίδας θα έπρεπε κάποιος να την ανεβάσει στο διαδίκτυο. Υπήρχαν πολλοί πάροχοι φιλοξενίας ιστοσελίδων που έδιναν την δυνατότητα σε κάποιον να φορτώσει την ιστοσελίδα του στο Server τους και να την φιλοξενεί, να την συντηρεί και να την αναβαθμίζει εκεί με το ανάλογο κόστος βέβαια. Στις μέρες μας υπάρχουν πολλά και διάφορα εργαλεία με τα οποία μπορεί κανείς να κατασκευάσει ιστοσελίδες (αντί του κλασικού τρόπου με την χρήση της γλώσσας προγραμματισμού HTML). Κάποια από αυτά είναι επαγγελματικά, έχουν πάρα πολλές δυνατότητες και κοστίζουν ακριβά. Υπάρχουν όμως και αρκετά που είναι δωρεάν, είναι αρκετά εξελιγμένα και προσφέρουν ένα ικανοποιητικό αποτέλεσμα ειδικά αν η ιστοσελίδα που θέλω να κατασκευάσω δεν έχει ιδιαίτερες απαιτήσεις. Μερικά από τα εργαλεία αυτά είναι το WIX, GoDaddy, Site Builder, Weebly, Blogger, Wordpress κλπ. Τα περισσότερα από αυτά προσφέρουν αφενός ένα γραφικό περιβάλλον δημιουργίας ιστοσελίδων και αφετέρου την δυνατότητα φιλοξενίας της ιστοσελίδας που θα κατασκευάσετε στο Server τους κάτω βέβαια από το δικό τους Domain και μάλιστα ΔΩΡΕΑΝ. Εμείς θα δουλέψουμε με το Weebly αλλά όλα τα εργαλεία αυτού του τύπου διαθέτουν την ίδια ή παρόμοια φιλοσοφία. Το Weebly B1. Στον φυλλομετρητή σας θα εισάγετε την διεύθυνση www.weebly.com, και θα επιλέξετε να κάνετε είσοδο με έναν λογαριασμό της Google ώστε να εισέλθετε στην ιστοσελίδα του weebly. B2. Στην ερώτηση Do you want to sell online? που εμφανίζεται (σχήμα-1) θα επιλέξετε Not Now. Σχήμα-1 Do you want to sell online Στην συνέχεια εμφανίζεται το παράθυρο του σχήματος 2 με τίτλο Select a Theme όπου ψάχνοντας τις διάφορες κατηγορίες θα εντοπίσετε και θα επιλέξετε το θέμα (Theme) John & Maggy Cento που φαίνεται στην σχήμα-2 που ακολουθεί. Γιάννης Δετοράκης 1 / 12

Σχήμα-2 John & Maggy - Cento B3. Αμέσως μόλις κάνετε την επιλογή του θέματος θα εμφανιστεί ένα παράθυρο με τίτλο creating you site και έπειτα από μερικά δευτερόλεπτα θα εισέλθετε στο παράθυρο επιλογής του Domain όπου θα φιλοξενείται το site σας όπως αυτό περιγράφεται στο σχήμα-3 που ακολουθεί. Σχήμα-3 Επιλογή ονομασίας του Site B4. Εσείς θα κάνετε την 3 η επιλογή Use a Subdomain of Weebly.com και θα εισάγετε ένα αποδεκτό όνομα για το Site σας στο πεδίο https://.weebly.com. Προσοχή! Το όνομα που θα δώσετε θα είναι και η διεύθυνση του Site σας. Το όνομα ελέγχεται ούτως ώστε να ΜΗΝ έχει ήδη χρησιμοποιηθεί ήδη και άρα να είναι ελεύθερο. Στην συνέχεια θα κάνετε κλικ στην επιλογή continue και αυτόματα θα δημιουργηθεί το site σας με την ονομασία αυτή κάτω από το server του Weebly. Αυτόματα θα μεταφερθείτε στο παράθυρο του σχήματος 4 που ακολουθεί. Αυτό το παράθυρο είναι το κεντρικό παράθυρο επεξεργασίας του site σας. Γιάννης Δετοράκης 2 / 12

Σχήμα-4 Κεντρικό Παράθυρο επεξεργασίας του Site ΚΕΝΤΡΙΚΟ ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ Από κεντρικό μενού επιλογών της εφαρμογής έχετε τις παρακάτω επιλογές: Build, Pages, Theme, Store, Apps, Settings Help, Upgrade και Publish. Η επιλογή Build Από την επιλογή Build έχετε την δυνατότητα να χτίσετε την κάθε σελίδα του site εισάγοντας διάφορα αντικείμενα σε αυτήν με την διαδικασία του Drag & Drop (σύρε και άσε), δηλαδή επιλέγετε ένα αντικείμενο από την λίστα που βρίσκεται στην αντίστοιχη εργαλειοθήκη αριστερά, το σέρνετε πάνω στην σελίδα στην οποία βρίσκεστε και το αφήνετε στην επιθυμητή θέση. Τα αντικείμενα είναι ομαδοποιημένα σε κατηγορίες. Οι κατηγορίες αυτές είναι: Basic Στην κατηγορία αυτή θα βρείτε τα βασικά αντικείμενα που μπορείτε να εισάγετε σε μια σελίδα. Τα κυριότερα από αυτά είναι τα Title:για την εισαγωγή τίτλου, Text:για την εισαγωγή κειμένου, Image:για την εισαγωγή μιας εικόνας, Gallery:για την εισαγωγή περισσότερων από μιας εικόνων σε απλή παράθεση, SlideShow:για την εισαγωγή περισσότερων από μιας εικόνων που θα εμφανίζονται σε γραμμική ροή η μια μετά την άλλη, Map:για την εισαγωγή χάρτη, Contact Form:για την εισαγωγή φόρμας επικοινωνίας, Button:για την εισαγωγή ενός κουμπιού, κλπ Structure Στην κατηγορία αυτή έχουν τοποθετηθεί τα αντικείμενα που χρησιμοποιούνται για την οργάνωση των επιμέρους χώρων της σελίδας και περιλαμβάνει τα εξής αντικείμενα, Section:για την εισαγωγή τομέων/χώρων, Divider:για την εισαγωγή διαχωριστή ώστε να διαχωρίσετε περιοχές και Spacer: για την εισαγωγή κενών διαστημάτων μεταξύ των περιοχών. Media Στην κατηγορία αυτή βρίσκονται όλα τα αντικείμενα που έχουν να κάνουν με διάφορα μέσα όπως HD Video:για την εισαγωγή βίντεο, Audio:για την εισαγωγή ήχου, Youtube:για την σύνδεση βίντεο από το Youtube, Flash Player:για την εισαγωγή αρχείου τύπου flash και File:για την εισαγωγή ενός οποιασδήποτε μορφής αρχείου. Γιάννης Δετοράκης 3 / 12

Ecommerce Η κατηγορία αυτή έχει να κάνει με αντικείμενα που αφορούν το ηλεκτρονικό εμπόριο και περιλαμβάνει μόνο δύο αντικείμενα τα Products και Categories. More Από την κατηγορία αυτή μπορείτε να εισάγετε τα αντικέιμενα Search Box, Block Quote, Social Icons, RSVP Form, Survey και Google AdSence. Installed Apps Από την κατηγορία αυτή μπορείτε να εισάγετε τα παρακάτω αντικείμενα Buy Tickets, Content Color Box, Team Card, Upcoming Events ή οποιαδήποτε άλλες εφαρμογές επιθυμείτε να χρησιμοποιήσετε εφόσον τις ενεργοποιήσετε για το Site. Όπως παρατηρείτε ο τίτλος του site είναι John & Maggy και οι επιλογές του μενού είναι HOME, VENUE, RSVP, REGISTRY και CONTACT. Αυτά είναι και τα πρώτα στοιχεία που θα πρέπει να αλλάξετε. Β5. Τοποθετήστε το δείκτη του ποντικιού πάνω στον τίτλο του Site και αυτόματα θα εμφανιστεί το μενού επιλογών του σχήματος 5 που ακολουθεί. Στο μενού επιλογών είναι μαρκαρισμένη η επιλογή Logo και εμφανίζεται με μπλέ χρώμα. Κάντε κλικ πάνω στο κουμπί Text και στη συνέχεια κάντε κλικ πάνω στο κείμενο και αλλάξτε τον τίτλο της σελίδας ώστε αντί το John & Maggy να εμφανίζονται τα επώνυμα των ατόμων της ομάδας σας. Σχήμα-5 Μενού επιλογών για τον τίτλο του Site Β6. Στην συνέχεια θα πρέπει να αλλάξετε το μενού επιλογών του Site σας. Για να μπορέσετε να το κάνετε αυτό θα πρέπει να κάνετε κλικ πάνω στην επιλογή Pages του κεντρικού μενού επιλογών. Αυτομάτως θα μεταφερθείτε στο παράθυρο του σχήματος 6 που ακολουθεί. Θα πρέπει αρχικά να διαγράψετε τις σελίδες VENUE, RSVP και REGISTRY. Για να το κάνετε αυτό θα πρέπει να κάνετε κλικ πάνω στην 1 η σελίδα VENUE και από το νέο μενού που εμφανίζεται (σχήμα 7) θα πρέπει να κάνετε κλικ πάνω στην επιλογή Delete που βρίσκεται κάτω δεξιά. Β7. Θα εμφανιστεί στην οθόνη το παράθυρο για την επιβεβαίωση της διαγραφής της σελίδας (σχήμα-8) από όπου θα πρέπει να επιλέξετε Delete. Θα επαναλάβετε την διαδικασία αυτή άλλες δύο φορές ώστε να διαγραφούν και οι άλλες δύο σελίδες RSVP και REGISTRY. Σχήμα-6 Παράθυρο διαχείρισης σελίδων(pages) του site Γιάννης Δετοράκης 4 / 12

Τελικά στο παράθυρο διαχείρισης σελίδων θα πρέπει να εμφανίζονται μόνο οι επιλογές HOME και CONTACT όπως φαίνεται στο σχήμα 9. Σχήμα-8 Επιβεβαίωση διαγραφής σελίδας VENUE Σχήμα-7 Διαχείριση σελίδας VENUE Σχήμα-9 Παράθυρο διαχείρισης σελίδων (μετά τις διαγραφές) Στη συνέχεια θα πρέπει να αλλάξετε τον τίτλο των δύο σελίδων του Site. Β8. Κάντε κλικ πάνω στην σελίδα HOME και στο παράθυρο διαχείρισης της σελίδας που εμφανίζεται (σχήμα 10) κάντε κλικ στο πεδίο PAGE NAME και αλλάξτε το ώστε το όνομα της σελίδας να είναι ΑΡΧΙΚΗ. Στη συνέχεια κάντε κλικ πάνω στο βελάκι που βρίσκεται πάνω αριστερά στο παράθυρο ώστε να επιστρέψετε ένα επίπεδο πίσω και να επιλέξετε την επόμενη σελίδα CONTACT. Αλλάξτε και σε αυτήν το PAGE NAME ώστε να έχει τίτλο ΕΠΙΚΟΙΝΩΝΙΑ. Μετά την ολοκλήρωση των παραπάνω διαδικασιών το παράθυρο διαχείρισης σελίδων θα πρέπει τελικά να είναι ίδιο με αυτό του σχήματος 11 που ακολουθεί. Σχήμα-11 Παράθυρο διαχείρισης σελίδων (μετά τις αλλαγές) Σχήμα-10 παράθυρο διαχείρισης σελίδας HOME Γιάννης Δετοράκης 5 / 12

Β9. Στο σημείο αυτό θα πρέπει να διαμορφώσετε την αρχική σελίδα του site σας. Οπότε κάντε κλικ πάνω στην επιλογή Build του κεντρικού μενού επιλογών και στη συνέχεια επιλέξτε την αρχική σελίδα κάνοντας κλικ πάνω στην επιλογή ΑΡΧΙΚΗ. Τοποθετείστε το ποντίκι σας πάνω στην εικόνα της αρχικής σελίδας και επιλέξτε ένα προς ένα τα επιμέρους στοιχεία που βρίσκονται εκεί (spacer, Text κλπ) και κάντε κλικ πάνω δεξιά στην επιλογή που εμφανίζεται με ένα κόκκινο Χ ώστε να τα διαγράψετε. Στην ερώτηση Are you sure κάντε κλικ πάνω στην επιλογή Delete όπως φαίνεται στο σχήμα 12 που ακολουθεί. Σχήμα-12 Διαγραφή επιμέρους στοιχείων που βρίσκονται στην αρχική σελίδα του Site. Β10. Θα πρέπει να μικρύνετε επίσης το μέγεθος της φωτογραφίας του ζευγαριού. Για να το επιτύχετε αυτό θα πρέπει να κάνετε κλικ πάνω στη φωτο και από το μπλέ πλαίσιο που θα εμφανιστεί θα πρέπει να σύρετε με το ποντίκι ώστε το μέγεθος της φωτογραφίας να γίνει ακριβώς 270px (σχήμα 13). Σχήμα-13 Αλλαγή μεγέθους εικόνας στα 270px. Μετά τις τροποποιήσεις θα πρέπει να μείνουν στην αρχική σελίδα: Η αρχική φωτογραφία του ζευγαριού στα 270px Ένα Spacer Ένα πλαίσιο κειμένου με περιεχόμενο το «Maecenas faucibus mollis interdum» Άλλο ένα Spacer Και τρεις φωτογραφίες σε ένα τρίστηλο. Β11. Στο πλαίσιο κειμένου θα πρέπει να δώσετε τον τίτλο του Site σας. Π.χ. για πρακτικούς λόγους θα εισάγουμε το κείμενο «Δοκιμαστικό Site». Γιάννης Δετοράκης 6 / 12

Β12. Στη συνέχεια θα πρέπει να αλλάξετε την εικόνα της αρχικής σελίδας σας ώστε να απεικονίζει μια φωτογραφία σχετική με το θέμα του Site. Θα εντοπίσετε μια εικόνα (μετά από αναζήτηση στο διαδίκτυο) και θα την αποθηκεύσετε στην επιφάνεια εργασίας του υπολογιστή σας. Κάνοντας κλικ πάνω στην εικόνα του ζευγαριού εμφανίζεται το σχήμα 14 και από το μενού επιλογών θα κάνετε κλικ πάνω στην επιλογή Edit Background. Αυτόματα θα εμφανιστεί το παράθυρο του σχήματος 15 από όπου θα κάνετε την επιλογή Replace για να αντικαταστήσετε την εικόνα που υπάρχει τώρα εκεί. Αυτόματα θα εμφανιστεί το παράθυρο του σχήματος 16 από το οποίο έχετε την δυνατότητα να εντοπίσετε και να φορτώσετε την επιθυμητή εικόνα κάνοντας κλικ πάνω στην επιλογή Upload a photo from your computer που εμφανίζεται με πράσινο χρώμα. Θα εντοπίσετε την εικόνα που έχετε αποθηκεύσει στην επιφάνεια εργασίας του υπολογιστή σας (βλ σχήμα 17) και κάνοντας κλικ στην επιλογή άνοιγμα, μετά από μερικά δευτερόλεπτα και το σχετικό παράθυρο προόδου (βλ σχήμα 18) η εικόνα θα φορτωθεί στο site σας. Σχήμα-14 Μενού επιλογών για τη διαχείριση της εικόνας. Σχήμα-15 «Background» αντικατάσταση εικόνας Σχήμα-16 Επιλογή εικόνας από τον υπολογιστή σας Σχήμα-18 φόρτωση επιθυμητής εικόνας Σχήμα-17 Παράθυρο επιλογής αρχείου εικόνας Γιάννης Δετοράκης 7 / 12

Στη συνέχεια θα πρέπει να κάνετε κλικ στην επιλογή Save που εμφανίζεται με πράσινο χρώμα στην πάνω δεξιά πλευρά του παράθυρου (βλ σχήμα 19) και η εικόνα πλέον θα εμφανιστεί στην αρχική σελίδα αντικαθιστώντας την προηγούμενη όπου απεικονιζόταν το ζευγάρι. Έτσι η αρχική σελίδα σας θα πρέπει να έχει τη μορφή του σχήματος 20 που ακολουθεί. Σχήμα-19 Παράθυρο για την αποθήκευση των αλλαγών που αφορούν την εικόνα του Site. Σχήμα-20 Η μορφή του Site μετά την αλλαγή της εικόνας στην αρχική σελίδα. Εφαρμόζοντας τις ίδιες ενέργειες του βήματος 12 θα πρέπει να αντικαταστήσετε τις τρεις επιμέρους εικόνες που βρίσκονται στην αρχική σελίδα με άλλες τρεις που θα έχουν σχέση με το περιεχόμενο του site σας. Για πρακτικούς λόγους αντικαταστήσαμε και εμείς τις εικόνες αυτές. Γιάννης Δετοράκης 8 / 12

Στη συνέχεια θα πρέπει να τοποθετήσετε λεζάντες κάτω από κάθε εικόνα. Αυτό θα πρέπει να το υλοποιήσετε εκτελώντας τις παρακάτω ενέργειες του βήματος 13. Β13. Τοποθετείστε το δείκτη του ποντικιού πάνω στην επιλογή Text (της ομαδοποίησης Basic) όπως φαίνεται στο σχήμα 21 και σύρετε ένα πλαίσιο κειμένου οριζόντια πάνω από την πρώτη εικόνα του τρίστηλου και αφήστε τε το εκεί. Σχήμα-21 Τοποθετώντας ένα πλαίσιο κειμένου πάνω από την πρώτη εικόνα. Σχήμα-22 Αλλάζοντας την περιγραφή του πλαισίου κειμένου πάνω από την πρώτη εικόνα. Μόλις αφήσετε το πλαίσιο κειμένου η εικόνα θα μεταφερθεί παρακάτω και πάνω από αυτήν θα τοποθετηθεί το πλαίσιο κειμένου με περιεχόμενο Click here to edit (βλ σχήμα 22). Β14. Κάντε κλικ μέσα στο κείμενο και αντικαταστήσετε το περιεχόμενο «Click here to edit» με μια περιγραφή που αφορά την εικόνα που βρίσκεται ακριβώς από κάτω (βλ σχήμα 23). Σχήμα-23 Αλλάζοντας την περιγραφή του πλαισίου κειμένου πάνω από την πρώτη εικόνα. Από το μενού επιλογών που βλέπετε στο σχήμα 23 μπορείτε να κάνετε το κείμενο έντονο, πλάγιο ή υπογραμμισμένο, να αυξήσετε ή να μειώσετε το μέγεθος των γραμμάτων, να αλλάξετε το χρώμα του κειμένου, να εισάγετε ένα υπερσύνδεσμο, να αλλάξετε την στοίχιση του κειμένου, να εισάγετε βούλες ή αρίθμηση. Γιάννης Δετοράκης 9 / 12

B15. Επαναλάβετε άλλες δύο φορές τα βήματα 13 & 14 ώστε να τοποθετήσετε πλαίσιο κειμένου και στις άλλες δύο φωτογραφίες. Μετά την εκτέλεση όλων των παραπάνω η αρχική σελίδα του site σας πλέον θα πρέπει να έχει τη μορφή του σχήματος 24 που ακολουθεί. Σχήμα-24 Η τελική μορφή της αρχικής σελίδας του site σας. Στη συνέχεια θα πρέπει να κάνετε κάποιες ρυθμίσεις που αφορούν το site σας γενικά. Για να το καταφέρετε αυτό θα πρέπει από το κεντρικό μενού επιλογών να κάνετε κλικ πάνω στην επιλογή Settings. Αυτόματα θα μεταφερθείτε στο παράθυρο του σχήματος 25. Σχήμα-25 Settings - Ρυθμίσεις του Site Γιάννης Δετοράκης 10 / 12

B16. Αλλάξτε το πεδίο Site Category σε Personal από την λίστα διαθέσιμων επιλογών του αναπτυσσόμενου μενού. Β17. Στις επιλογές που αφορούν το Site Formatting που περιγράφεται στο σχήμα 26 που ακολουθεί, θα πρέπει να κάνετε τις επιλογές που εμφανίζονται στο σχήμα και αφορούν τα Date Format, Time Format, Time Zone, Site Language. Σχήμα-26 Settings - Site Formatting - Ρυθμίσεις του Site B18. Τέλος θα πρέπει να επιλέξετε μια γραμματοσειρά που να υποστηρίζει ελληνικά για τον τίτλο του Site. Για να το κάνετε αυτό θα πρέπει από το κεντρικό μενού επιλογών να κάνετε την επιλογή Theme. Αυτόματα θα εμφανιστεί το παράθυρο του σχήματος 27 όπου θα πρέπει να κάνετε την επιλογή Change Fonts και αυτό θα έχει σαν αποτέλεσμα την εμφάνιση του παραθύρου του σχήματος 28 από όπου μπορείτε να διαχειριστείτε τις γραμματοσειρές του site σας. Κάντε κλικ στην επιλογή Site Title και επιλέξτε ως γραμματοσειρά την Tahoma. Σχήμα-27 Παράθυρο επιλογών Theme Σχήμα-28 Παράθυρο επιλογών Change Fonts Γιάννης Δετοράκης 11 / 12

. Σχήμα-29 Παράθυρο Site Title Σχήμα-30 Παράθυρο Site Title B19. Κάντε κλικ πάνω στην επιλογή Sansation και αλλάξτε την σε Verdana και στη συνέχεια πάνω στην επιλογή Color και επιλέξτε ένα χρώμα της αρεσκείας σας. Γιάννης Δετοράκης 12 / 12