27
Στήσιμο Ιστοσελίδας WEBNODE Επιμέλεια : Χριστίνα Κλημεντιώτη 1. Αλλαγή Προτύπου και Επεξεργασία βασικής εικόνας H βασική επεξεργασία της ιστοσελίδας γίνεται από το παρακάτω μενού. Για να αλλάξουμε το πρότυπο κάνουμε κλικ στα ΥΠΟΔΕΙΓΜΑΤΑ. Αριστερά στο μενού που εμφανίζεται επιλέγουμε : Επιχειρηματικές Κατηγορίες και κατεβάζουμε την μπάρα κύλησης προς τα κάτω.

στήσιμο σελίδας βήμα βήμα

Embed Size (px)

Citation preview

Page 1: στήσιμο σελίδας βήμα βήμα

Στήσιμο Ιστοσελίδας WEBNODE

Επιμέλεια : Χριστίνα Κλημεντιώτη

1. Αλλαγή Προτύπου και Επεξεργασία βασικής εικόνας

H βασική επεξεργασία της ιστοσελίδας γίνεται από το παρακάτω μενού.

Για να αλλάξουμε το πρότυπο κάνουμε κλικ στα ΥΠΟΔΕΙΓΜΑΤΑ.

Αριστερά στο μενού που εμφανίζεται επιλέγουμε : Επιχειρηματικές Κατηγορίες και κατεβάζουμε την μπάρα κύλησης προς τα κάτω.

Επιλέγουμε από την αριστερή λίστα το πρότυπο : DARKO

Page 2: στήσιμο σελίδας βήμα βήμα

και έπειτα το υπόδειγμα

Το επιλέγουμε και πατάμε ΧΡΗΣΗ ΑΥΤΟΥ

2. ΑΛΛΑΓΗ ΒΑΣΙΚΗΣ ΕΙΚΟΝΑΣ Ακουμπάμε τον κέρσορα δεξιά της εικόνας και εμφανίζεται

ένα κουμπί με το όνομα ΕΠΕΞΕΡΓΑΣΙΑ ΕΙΚΟΝΑΣ

Κάνουμε κλικ πάνω στην εικόνα και πατάμε ΔΙΑΓΡΑΦΗ

Και έπειτα ΟΚ

Page 3: στήσιμο σελίδας βήμα βήμα

Επιλέγουμε ΠΡΟΣΘΗΚΗ ΕΙΚΟΝΑΣ και πατάμε ΑΝΕΒΑΣΤΕ ΜΙΑ ΕΙΚΟΝΑ

Ανοίγουμε το φάκελο ΥΛΙΚΟ / ΒΑΣΙΚΗ ΕΙΚΟΝΑ

Επιλέγουμε μια από τις εικόνες και πατάμε Άνοιγμα.

Την τοποθετούμε στο σημείο που θέλουμε. Αριστερά εμφανίζεται το όνομα της σελίδας.

3. ΑΛΛΑΓΗ Η ΑΠΟΚΡΥΨΗ ΟΝΟΜΑΤΟΣ ΣΕΛΙΔΑΣ Διπλό αριστερό κλικ πάνω στο όνομα της σελίδας.

Εμφανίζεται το παρακάτω παράθυρο.

Κάνουμε τις απαραίτητες διορθώσεις και πατάμε ΟΚ.

4. ΑΡΧΙΚΗ ΣΕΛΙΔΑ

Page 4: στήσιμο σελίδας βήμα βήμα

Επεξεργασία πεδίου

Κάνουμε διπλό κλικ πάνω στο παράθυρο ή πατάμε Επεξεργασία Πεδίου για να επεξεργαστούμε το κείμενο.

Αφού γράψετε το κείμενό σας πατάτε Αποθήκευση.

! Για να τροποποιήσουμε τη γραμματοσειρά ή το μέγεθός

της, χρειάζεται να ενεργοποιήσουμε το ολοκληρωμένο μενού, πατώντας τα δύο βελάκια δεξιά του παράθυρου.

ΣΧΕΤΙΚΑ ΜΕ ΜΑΣ

Πατάμε και ανοίγουμε τη σελίδα ΣΧΕΤΙΚΑ ΜΕ ΜΑΣ.

Η σελίδα έχει τη μορφή Κενής σελίδας και ζητάει να επεξεργαστούμε το πεδίο.

Πατάμε Επεξεργασία πεδίου ή κάνουμε διπλό αριστερό κλικ πάνω στην ανάρτηση.

Συμπληρώνουμε το κείμενο μας για τις πληροφορίες της τάξης μας.

Page 5: στήσιμο σελίδας βήμα βήμα

Για να προσθέσουμε μια ΕΙΚΟΝΑ της τάξης μας κάνουμε κλικ +Εισαγωγή

Και επιλέγουμε Εισαγωγή εικόνας

Διαλέγουμε μια εικόνα από το φάκελο ΥΛΙΚΟ , ΦΩΤΟ ΤΑΞΗ.

Μόλις ανέβει πατάμε ΕΙΣΑΓΩΓΗ

Η φωτογραφία ανεβαίνει και ενσωματώνεται στο κείμενο μας.

Στο τέλος πατάμε ΑΠΟΘΗΚΕΥΣΗ.

Page 6: στήσιμο σελίδας βήμα βήμα

5. ΕΠΕΞΕΡΓΑΣΙΑ ΜΕΝΟΥ

Πάνω από την Αρχική Σελίδα κάνουμε κλικ στο κουμπί Επεξεργασία Μενού.

Για να προσθέσουμε σελίδες πατάμε Νέα Σελίδα.

Συμπληρώνουμε τον τίτλο και επιλέγουμε ανάμεσα σε Κενή σελίδα,

Άρθρο, Λίστα, FAQ, Φωτογκάλερι, Σχόλια.

Κάθε σελίδα που δημιουργούμε εμφανίζεται αριστερά στο μενού.

! Προσοχή κάποιες σελίδες εμφανίζουν μια κόκκινη γραμμή.

Αυτό συμβαίνει γιατί δεν είναι Δημοσιευμένες. Πατάμε στο βελάκι κάθε σελίδας και τη δημοσιεύουμε. Δείτε το παρακάτω παράδειγμα.

Page 7: στήσιμο σελίδας βήμα βήμα

Από το ίδιο σημείο μπορούμε να μετακινήσουμε πάνω ή κάτω κάθε σελίδα.

Για να προσθέσουμε μια Νέα σελίδα (υποσελίδα) μέσα σε μια ήδη υπάρχουσα σελίδα κάνουμε το εξής :

Νέα σελίδα

Page 8: στήσιμο σελίδας βήμα βήμα

Στο σημείο που αναφέρεται η Μητρική Σελίδα πατάμε και επιλέγουμε τη σελίδα που θέλουμε να δημιουργηθούν οι υποσελίδες. Παράδειγμα :

Συμπληρώνουμε τον τίτλο της υποσελίδας και πατάμε Αποθήκευση.

Βλέπουμε ότι όλες οι υποσελίδες έχουν μπει κάτω από τη βασική σελίδα που έχουμε επιλέξει.

Δεν ξεχνάμε να κάνουμε Δημοσίευση!

6. ΝΕΑ

Ανοίγουμε τη σελίδα Νέα. Για τα Νέα συνήθως χρησιμοποιούμε

α) ΛΙΣΤΑ (εάν θέλουμε να εισάγουμε και βασική εικόνα) ή

β) ΑΡΘΡΟ (εάν θέλουμε να φαίνεται η ώρα ανάρτησης).

Page 9: στήσιμο σελίδας βήμα βήμα

Για να διαγράψουμε λοιπόν το υπάρχον παράθυρο πατάμε

Για να προσθέσουμε μια ΛΙΣΤΑ πηγαίνουμε στο βασικό οριζόντιο μενού

Κάνουμε κλικ στις ΛΙΣΤΕΣ και κρατώντας πατημένο τον αριστερό δείκτη του ποντικιού σύρουμε και αφήνουμε στο κενό πλαίσιο.

Εμφανίζεται το παράθυρο

Δίνουμε όνομα στη λίστα μας και πατάμε οκ.

ΠΡΟΣΘΕΤΟΥΜΕ ΕΝΑ ΝΕΟ ΣΤΗ ΛΙΣΤΑ ΜΑΣ

Πατάμε Προσθήκη Αντικειμένου

Page 10: στήσιμο σελίδας βήμα βήμα

Συμπληρώνουμε το όνομα πχ. ΠΑΜΕ ΕΚΔΡΟΜΗ!!!

Κάνουμε κλικ στην Εικόνα

και προσθέτουμε την εικόνα πατώντας ΑΝΕΒΑΣΤΕ ΕΙΚΟΝΑ

Επιλέγουμε από το φάκελο ΥΛΙΚΟΥ- ΝΕΑ την εικόνα του Τρελαντώνη και πατάμε οκ

Έπειτα συμπληρώνουμε το κείμενο

Page 11: στήσιμο σελίδας βήμα βήμα

Και πατάμε ΔΗΜΟΣΙΕΥΣΗ.

Κάθε φορά που θέλουμε να ανεβάσουμε ένα ΝΕΟ θα κάνουμε την ίδια διαδικασία.

Για να δημιουργήσουμε ένα νέο ΑΡΘΡΟ πατάμε Προσθήκη Άρθρου

Συμπληρώνουμε τον τίτλο και έπειτα γράφουμε το κείμενο του άρθρου μας.

Σε περίπτωση που θέλουμε να βάλουμε εικόνα στο άρθρο μας χρειάζεται να πατήσουμε Εισαγωγή – Εισαγωγή Εικόνας – Ανεβάστε μια Εικόνα – Υλικό – Χριστουγ. κάρτα

Page 12: στήσιμο σελίδας βήμα βήμα

Στα άρθρα δεν εμφανίζεται η εικόνα παρά μόνο αν ανοίξουμε το σύνδεσμο του άρθρου κάνοντας κλικ στον τίτλο του άρθρου.

7. ΤΑ ΜΑΘΗΜΑΤΑ ΜΑΣ

Στη σελίδα τα μαθήματα μας έχει ήδη δημιουργηθεί ένα drop down μενού.

Page 13: στήσιμο σελίδας βήμα βήμα

Για να προσθέσουμε ό,τι χρειαζόμαστε, επιλέγουμε κάθε φορά το μάθημα που θέλουμε.

ΓΛΩΣΣΑ

Για παράδειγμα αν θέλουμε να ανεβάσουμε ένα φύλλο εργασίας Γλώσσας, κατευθυνόμαστε στη Γλώσσα και πατάμε ΠΡΟΣΘΗΚΗ ΑΡΘΡΟΥ κάνοντας την ίδια διαδικασία που περιγράφηκε παραπάνω.

Για να ανεβάσουμε ένα ΑΡΧΕΙΟ (εκτός από εικόνα) κάνουμε το εξής :

Κάνουμε κλικ +Εισαγωγή

Και επιλέγουμε Εισαγωγή αρχείου

Διαλέγουμε το αρχείο Τοπικοί προσδιορισμοί από το φάκελο ΥΛΙΚΟ/ ΓΛΩΣΣΑ.

Μόλις ανέβει το επιλέγουμε και πατάμε ΕΙΣΑΓΩΓΗ

Page 14: στήσιμο σελίδας βήμα βήμα

Αφού ενσωματωθεί στο άρθρο μας, μπορούμε να αλλάξουμε το όνομα που θα εμφανίζεται στο άρθρο ή τη γραμματοσειρά.

HTML κώδικας

Η HTML είναι η γλώσσα με την οποία κατασκευάζουμε ιστοσελίδες. Τα αρχικά HTML σημαίνουν HyperText Markup Language. Οι ιστοσελίδες που επισκεπτόμαστε στο Internet δεν είναι τίποτε άλλο παρά αρχεία τα οποία περιέχουν κώδικα γραμμένο στην γλώσσα HTML.

Με την εισαγωγή HTML κώδικα στη σελίδα μας κάνουμε πιο ενδιαφέρουσα την ιστοσελίδα .

Για παράδειγμα αντί να ανεβάσουμε απλά ένα αρχείο στη σελίδα μας μπορούμε να ανεβάσουμε και να αντιγράψουμε τον κώδικα του εγγράφου από sites όπως το Google Drive, το Scribd, το Slideboom, το Slideshare και άλλα και να επικολλήσουμε τον κώδικα στη σελίδα μας.

Για να ανοίξουμε το google drive χρειαζόμαστε ένα Gmail. Γράφουμε Google Drive στη μηχανή αναζήτησης και κάνουμε εισαγωγή των στοιχείων μας και ανεβάζουμε το αρχείο μας πατώντας το κόκκινο βελάκι.

Για να δούμε το html του εγγράφου1) Κάνουμε διπλό κλικ στο έγγραφο και αυτό ανοίγει .

2) Στο μενού που εμφανίζεται πατάμε το

Το έγγραφο ανοίγει σε άλλη καρτέλα .

Page 15: στήσιμο σελίδας βήμα βήμα

3) Από το μενού κάνουμε κλικ στις τρεις τελείες

4) Και επιλέγουμε Ενσωμάτωση Στοιχείου

5) Αντιγράφουμε ότι υπάρχει στο πλαίσιο και

6) Ανοίγουμε την Ιστοσελίδα μας.

7) Προσθήκη Άρθρου

Συμπληρώνουμε τον τίτλο και πατάμε το βελάκι στα δεξιά του παράθυρου για να εμφανιστεί και το υπόλοιπο μενού.

8) Εκεί πατάμε HTML ΚΩΔΙΚΑΣ

Και στο κείμενο κάνουμε επικόλληση το html που αντιγράψαμε από το google doc.

Page 16: στήσιμο σελίδας βήμα βήμα

9) Διορθώνουμε το width από 680 σε 600

width=”600”10) Έπειτα ξαναπατάμε HTML κώδικας.

Για να κατεβάσει κανείς το αρχείο από τη σελίδα μας αρκεί να

πατήσει

Και έπειτα από το μενού

Κάνει κλικ στο βελάκι

ΙΣΤΟΡΙΑ

Σύρουμε και αφήνουμε για δημιουργία Κενής Σελίδας.

Επεξεργασία Πεδίου Συμπληρώνουμε το κείμενο που θέλουμε Κάνουμε Εισαγωγή – Εισαγωγή Εικόνας – Ανεβάστε

εικόνα (Φάκελος Υλικό/Ιστορία) Ενσωματώνουμε μια παρουσίαση που βρήκαμε στο web

παίρνοντας το html.

http :// www . slideboom . com / presentations /652496/Η- επανάσταση-στην-Πελοπόννησο

Page 17: στήσιμο σελίδας βήμα βήμα

Αντιγράφουμε τον Κώδικα html

Και τον κάνουμε εισαγωγή από το μενού στην ιστοσελίδα μας.

Page 18: στήσιμο σελίδας βήμα βήμα

Και πατάμε Αποθήκευση.

ΦΥΣΙΚΗ

Σύρουμε και αφήνουμε για δημιουργία Κενής σελίδας.

Επεξεργασία Πεδίου. Συμπληρώνουμε το κείμενο που θέλουμε Κάνουμε Εισαγωγή – Εισαγωγή Εικόνας – Ανεβάστε εικόνα

(Φάκελος Υλικού/Φυσική)

Page 19: στήσιμο σελίδας βήμα βήμα

Δημιουργία ΥΠΕΡΣΥΝΔΕΣΜΟΥ σε εικόναΚάνουμε κλικ πάνω στην εικόνα και πατάμε +Εισαγωγή και μετά Σύνδεσμος

Βάζουμε το link του παιχνιδιού που βρήκαμε στο Διαδίκτυο.

http://gregzer.pbworks.com/f/ManagEnergy+KidsCorner+-+εξοικονόμησε+ενέργεια.swf

Πατάμε Αποθήκευση και ξανά αποθήκευση. Αν πατήσουμε πάνω στην εικόνα θα ανοίξει το παιχνίδι.

Δημιουργία ΥΠΕΡΣΥΝΔΕΣΜΟΥ σε κείμενο. Επιλέγουμε το κείμενο στο οποίο θα ενσωματωθεί ο υπερσύνδεσμος. Για παράδειγμα μπορούμε να γράψουμε : Για να παίξεις, πάτησε ΕΔΩ!

Page 20: στήσιμο σελίδας βήμα βήμα

Κάνουμε κλικ +Εισαγωγή και μετά Σύνδεσμος.

Βάζουμε το link του παιχνιδιού που βρήκαμε στο Διαδίκτυο.

http://gregzer.pbworks.com/f/ManagEnergy+KidsCorner+-+εξοικονόμησε+ενέργεια.swf

Page 21: στήσιμο σελίδας βήμα βήμα

Πατάμε Αποθήκευση και ξανά αποθήκευση. Αν πατήσουμε πάνω στη λέξη ΕΔΩ θα ανοίξει το παιχνίδι.

8. Οι ΔΗΜΙΟΥΡΓΙΕΣ ΜΑΣ Φωτογκαλερί Επεξεργασία Έκθεσης

Πατάμε Ανεβάστε Εικόνα Από το φάκελο ΥΛΙΚΟ / ΔΗΜΙΟΥΡΓΙΕΣ επιλέγουμε όλες τις

εικόνες. Αφού ανέβουν εμφανίζονται στη σελίδα. Εάν ανοίξουμε

μία από όλες ανοίγει η ΕΦΑΡΜΟΓΗ ΠΡΟΒΟΛΗΣ.

Με τα βελάκια μπορούμε να δούμε όλες τις εικόνες.

9. ΔΡΑΣΕΙΣ

Page 22: στήσιμο σελίδας βήμα βήμα

Διαγράφουμε το υπάρχον παράθυρο Και προσθέτουμε μια λίστα πηγαίνοντας στο βασικό

οριζόντιο μενού

Κάνουμε κλικ στις ΛΙΣΤΕΣ και κρατώντας πατημένο τον αριστερό δείκτη του ποντικιού σύρουμε και αφήνουμε στο κενό πλαίσιο.

Δίνουμε ένα όνομα στη Λίστα μας και πατάμε οκ. Πατάμε Προσθήκη Αντικειμένου

Συμπληρώνουμε το όνομα πχ. Ανακύκλωση, ζωή για το περιβάλλον! Κάνουμε κλικ στην Εικόνα Προσθέτουμε την εικόνα πατώντας ΑΝΕΒΑΣΤΕ ΕΙΚΟΝΑ

Page 23: στήσιμο σελίδας βήμα βήμα

Επιλέγουμε από το φάκελο ΥΛΙΚΟΥ- ΔΡΑΣΕΙΣ και πατάμε οκ

Έπειτα συμπληρώνουμε το κείμενο

Και πατάμε ΔΗΜΟΣΙΕΥΣΗ.

Στην ίδια σελίδα εκτός από τη Λίστα μπορούμε να εισάγουμε οποιοδήποτε στοιχείο παρουσιάζεται στο βασικό μενού.

Ας εισάγουμε και ένα άρθρο.

Διαλέγουμε το άρθρο από το βασικό μενού . Το σύρουμε πάνω από το σημείο που βρίσκεται η λίστα

μας. Του δίνουμε έναν τίτλο και προσθέτουμε ένα Αρθρο.

Page 24: στήσιμο σελίδας βήμα βήμα

Τέλος πατάμε Δημοσίευση.

10. ΕΠΙΚΟΙΝΩΝΙΑ

Στο σημείο της επικοινωνίας μπορούμε να βάλουμε τα στοιχεία του σχολείου μας, κάποιο e mail επικοινωνίας αλλά και να βρούμε το σχολείο μας στον χάρτη.

Κάνουμε κλικ στην Επεξεργασία πεδίου και συμπληρώνουμε τα στοιχεία.

Έπειτα πάμε στο χάρτη και κάνουμε κλικ στις ΡΥΘΜΙΣΕΙΣ

Page 25: στήσιμο σελίδας βήμα βήμα

Και συμπληρώνουμε τη διεύθυνσή μας. Τέλος πατάμε ΟΚ.