Σχολή Επιστημών της Αγωγής

Παιδαγωγικό Τμήμα Δημοτικής Εκπαίδευσης

Σημειώσεις

Διαδικτυακή Εφαρμογή Δημιουργίας Ιστοσελίδων Weebly

Αθήνα 2020
 Περιεχόμενα
Τι είναι το Weebly ......................................................................................................... 2
1. Δημιουργία λογαριασμού στο Weebly ................................................................... 2
1.1. Αποσύνδεση/ Sign out από το Weebly ........................................................... 6
1.2. Σύνδεση/ Login στο Weebly ........................................................................... 6
1.3. Πρόσκληση συνεργασίας “Editors/ Συντακτών” ............................................ 9
1.4. Αποδοχή της πρόσκλησης στο Weebly ......................................................... 12
1.5. Ταυτόχρονη χρήση του Weebly .................................................................... 13
1.6. Δημοσίευση/ Publish της ιστοσελίδας μας ................................................... 13
1.7. Διόρθωση/ αλλαγή της διαδικτυακής διεύθυνσης/ Domain.......................... 14
2. Επιλογή θέματος ................................................................................................... 14
2.1. Επιλογή θέματος για πρώτη φορά ................................................................. 15
2.2. Αλλαγή θέματος ............................................................................................ 16
2.3. Μορφοποίηση ενός θέματος ......................................................................... 16
3. Παράθυρο Dashboard διαχείρισης εργασιών του Weebly ................................... 17
3.1. Σελίδες/ Pages ............................................................................................... 20
3.1.1. Δημιουργία νέων σελίδων...................................................................... 20
3.1.2. Διαγραφή σελίδων ................................................................................. 21
3.1.3. Διαμόρφωση σελίδων ............................................................................ 21
3.1.4. Διαμόρφωση του μενού της ιστοσελίδας ............................................... 22
3.2. Προσθήκη περιεχομένου στις Ιστοσελίδες ................................................... 23
3.2.1. Εισαγωγή Ενότητας/ Section ................................................................. 23
3.2.2. Εισαγωγή κειμένου ................................................................................ 24
3.2.3. Διαγραφή πεδίου κειμένου .................................................................... 25
3.2.4. Εισαγωγή εικόνας .................................................................................. 25
3.2.5. Δημιουργία Gallery ................................................................................ 27
3.2.6. Δημιουργία Slideshow ........................................................................... 28
3.2.7. Εισαγωγή αρχείων video........................................................................ 30
3.2.8. Εισαγωγή αρχείων Word – Pdf – Excel – PowerPoint .......................... 32
3.2.9. Εισαγωγή ενός αρχείου Word – Pdf – Excel – PowerPoint με την βοήθεια
του προγράμματος Scribd ..................................................................................... 33
3.2.10. Ενσωμάτωση άλλων μικροεφαρμογών και Google Maps ..................... 35
3.2.11. Ενσωμάτωση Comments/ Σχόλια .......................................................... 36
3.2.12. Εισαγωγή Κουμπιού με Link ................................................................. 39
3.2.13. Εισαγωγή εφαρμογών/ Apps ................................................................. 39

1 Περιεχόμενα
|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Τι είναι το Weebly
Το Weebly είναι μια on – line εφαρμογή που μας παρέχει τα κατάλληλα εργαλεία για
την εύκολη και γρήγορη κατασκευή ιστοσελίδων. Ανήκει στην κατηγορία εφαρμογών
Web 2.0 του διαδικτύου, δηλαδή είναι μια εφαρμογή που μας βοηθάει να φτιάξουμε
δικές μας εφαρμογές χωρίς να απαιτούνται γνώσεις HTML (γλώσσα των browsers για
την απεικόνιση ιστοσελίδων) ή κάποιας άλλης γλώσσας προγραμματισμού. Κείμενα,
εικόνες, βίντεο, χάρτες, widgets (επιπρόσθετα) κ.ά. μπορούν πολύ εύκολα να αναρτη-
θούν με τη βοήθεια του ποντικιού μας.

Θετικά της εφαρμογής

 Είναι εύχρηστη, απλή και κατανοητή, ακόμα και από κάποιον που δεν έχει κα-
μία εμπειρία στη δημιουργία ιστοσελίδων και στην HTML.
 Έχει δεκάδες πρότυπα θέματα.
 Παρέχει όλα τα βασικά εργαλεία για να δημιουργήσουμε μια βασική ιστοσε-
λίδα και μάλιστα σε λίγο χρόνο και χωρίς πολλές δυσκολίες.
 Η φιλοξενία της εφαρμογής είναι αρκετά αξιόπιστη.

1. Δημιουργία λογαριασμού στο Weebly

Για να δημιουργήσουμε λογαριασμό στη διαδικτυακή εφαρμογή Weebly επισκεπτόμα-
στε την ιστοσελίδα https://www.weebly.com (Εικόνα 1) και επιλέγουμε τον σύνδεσμο
SIGN UP.

Εικόνα 1: Ιστοσελίδα Weebly

2 Τι είναι το Weebly
|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 2) επιλέγουμε SIGN UP ώστε να
δημιουργήσουμε έναν λογαριασμό στο Weebly μέσω ενός email που έχουμε ή που
μπορούμε να δημιουργήσουμε. Στο πεδίο Full Name γράφουμε το όνομα που θέλουμε
να έχουμε ως χρήστες του Weebly. Στο πεδίο Email Address γράφουμε το Email μας
ενώ στο πεδίο Password δημιουργούμε έναν μυστικό κωδικό και στο πεδίο Select a
country επιλέγουμε το κράτος που βρισκόμαστε. Τέλος, επιλέγουμε το κουμπί Sign up
for free.

Εικόνα 2: Εγγραφή στο Weebly

Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 3) επιλέγουμε το σύνδεσμο I just
need a website και ολοκληρώνεται η δημιουργία του λογαριασμού στο Weebly.

Εικόνα 3: Επιλογή τύπου ιστοσελίδας

3 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Στην συνέχεια μπορούμε να επιλέξουμε το θέμα που θέλουμε για την ιστοσελίδα μας
(Εικόνα 4).

Εικόνα 4: Επιλογή θέματος

Μόλις επιλέξουμε το θέμα μας εμφανίζεται η προεπισκόπησή του (Theme Preview).

Τέλος, επιλέγουμε τον κουμπί Start Editing για να ξεκινήσουμε την δημιουργία της
ιστοσελίδας μας (Εικόνα 5).

Εικόνα 5: Έναρξη δημιουργίας ιστοσελίδας

Με την ολοκλήρωση της επιλογής του θέματος η εφαρμογή, μας οδηγεί να δημιουργή-
σουμε τη διαδικτυακή διεύθυνση/ Domain της ιστοσελίδας μας. Από το παράθυρο δια-
λόγου που εμφανίζεται πληκτρολογούμε το όνομα που επιθυμούμε να έχει η ιστοσε-
λίδα μας και επιλέγουμε το Search (Εικόνα 6).

Εικόνα 6: Αναζήτηση διαδικτυακής διεύθυνσης/ Domain

4 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Στην συνέχεια επιλέγουμε τον σύνδεσμο Choose που βρίσκεται στο επίπεδο SUBDO-
MAIN. Στην περίπτωση που το Choose είναι απενεργοποιημένο (δεν είναι πράσινο)
κάνουμε την ίδια διαδικασία από την αρχή μέχρι να ενεργοποιηθεί (να εμφανιστεί το
Choose πράσινο) (Εικόνα 7). Προσοχή: Δεν επιλέγουμε τα domain που λήγουν σε com,
org, com.

Εικόνα 7: Επιλογή διαδικτυακής διεύθυνσης/ Domain

Στην συνέχεια εμφανίζεται το παράθυρο διαλόγου ολοκλήρωσης της διαδικασίας και

επιλέγουμε το κουμπί Done (Εικόνα 8).

Εικόνα 8: Ολοκλήρωση της επιλογής διαδικτυακής διεύθυνσης/ Domain

5 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 1.1. Αποσύνδεση/ Sign out από το Weebly

Για να κάνουμε αποσύνδεση από την εφαρμογή Weebly από την Αρχική σελίδα επιλέ-
γουμε το βελάκι που υπάρχει δίπλα από το My site ή το όνομα που έχουμε δώσει στην
ιστοσελίδα μας και από τον πίνακα διαλόγου που εμφανίζεται επιλέγουμε τον σύνδε-
σμο Sign out (Εικόνα 9).

Εικόνα 9: Αποσύνδεση από το Weebly

Στην συνέχεια εμφανίζεται το παράθυρο διαλόγου ολοκλήρωσης της διαδικασίας Α-

ποσύνδεσης (Εικόνα 10).

Εικόνα 10: Ολοκλήρωση της Αποσύνδεσης

1.2. Σύνδεση/ Login στο Weebly

Για να συνδεθούμε στο Weebly επισκεπτόμαστε την ιστοσελίδα
https://www.weebly.com και επιλέγουμε Log In (Εικόνα 11).

Εικόνα 11: Ιστοσελίδα Weebly

6 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 12), στο πεδίο Email γράφουμε
το email του λογαριασμού μας και στο πεδίο Password τον μυστικό κωδικό.

Εικόνα 12: Σύνδεση στο Weebly

Επιπλέον μπορούμε να κάνουμε σύνδεση/ Log In με τους λογαριασμούς που έχουμε

στο Facebook και στο Google (δηλαδή με gmail). Η διαδικτυακή πλατφόρμα Weebly
με την σύνδεση/ Log In μας οδηγεί στο ακόλουθο παράθυρο διαλόγου (Εικόνα 13).

Εικόνα 13: Αρχική σελίδα του Weebly

Στο συγκεκριμένο παράθυρο διαλόγου μπορούμε:

 Να επιλέξουμε το κουμπί Edit Site για να κάνουμε αλλαγές στην ιστοσελίδα ή

στις ιστοσελίδες που έχουμε (Εικόνα 14).

Εικόνα 14: Είσοδο στην σελίδα διαμόρφωσης μιας δημιουργημένης ιστοσελίδας

7 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
  Να επιλέξουμε το βελάκι (αριστερά) που υπάρχει δίπλα από το My site ή το
όνομα που έχουμε δώσει στην ιστοσελίδα μας και από τον πίνακα διαλόγου που
εμφανίζεται επιλέγουμε Add Site για να δημιουργήσουμε μια νέα ιστοσελίδα
(Εικόνα 15).

Εικόνα 15: Έναρξη δημιουργίας νέας σελίδας στο Weebly

 Να επιλέξουμε το βελάκι (δεξιά) (Εικόνα 16) που υπάρχει δίπλα από το όνομα
που έχουμε δώσει στην ιστοσελίδα μας και από την νέα λίστα διαλόγου που
εμφανίζεται μπορούμε:
 Να επιλέξουμε την ιστοσελίδα που θέλουμε να κάνουμε αλλαγές αν δια-
χειριζόμαστε παραπάνω μία (Εικόνα 16).

Εικόνα 16: Επιλογή διαμόρφωσης των ιστοσελίδων στο Weebly

8 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
  Να επιλέξουμε από το κουμπί των ιδιοτήτων το Copy Site για να αντι-
γράψουμε την ιστοσελίδα μας ή το Delete Site για να τη διαγράψουμε
(Εικόνα 17).

Εικόνα 17: Αντιγραφή ή διαγραφή σελίδας στο Weebly

Επιπλέον, μπορούμε να επιλέξουμε τον σύνδεσμο Add Site για να δημιουργήσουμε μια
νέα ιστοσελίδα (Εικόνα 18).

Εικόνα 18: Έναρξη δημιουργίας νέας σελίδας στο Weebly

1.3. Πρόσκληση συνεργασίας “Editors/ Συντακτών”

Το Weebly παρέχει τη δυνατότητα συνδιαχείρισης της ιστοσελίδας από πολλά μέλη

μιας ομάδας. Οι χρήστες που θα αναλάβουν να στείλουν τις προσκλήσεις στους υπό-
λοιπους χρήστες θα πρέπει:

1. Να κάνουν Log in στο λογαριασμό του Weebly (Εικόνα 19).

Εικόνα 19: Σύνδεση στο Weebly

9 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 2. Από την Αρχική σελίδα της εφαρμογής πρέπει να μεταβούν στο παράθυρο Dash-
board διαχείρισης εργασιών του Weebly επιλέγοντας το κουμπί Edit Site (Εικόνα
20).

Εικόνα 20: Μετάβαση στο Dashboard διαχείρισης εργασιών του Weebly

3. Στο παράθυρο Dashboard διαχείρισης εργασιών του Weebly από το μενού επιλέ-
γουν το κουμπί Settings (Εικόνα 21).

Εικόνα 21: Μετάβαση στις ρυθμίσεις του Weebly

4. Στο νέο παράθυρο διαλόγου που εμφανίζεται επιλέγουν από το πλευρικό μενού την
κατηγορία “Editors” (Εικόνα 22).

Εικόνα 22: Επιλογή της κατηγορία “Editors”

5. Στην συνέχεια πρέπει να επιλέξουμε το κουμπί + Add Editor για να ξεκινήσει η

διαδικασία πρόσκλησης των “Editors/ Συντακτών” (Εικόνα 23).

Εικόνα 23: Προσθήκη συντάκτη

10 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 6. Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 24), στο πεδίο Email, γρά-
φουμε τα email των χρηστών που επιθυμούμε να γίνουν “Editors/ Συντάκτες” και
στο πεδίο “Include a message with the email invitation” γράφουμε το μήνυμα που
επιθυμούμε. Τέλος παρατηρούμε ότι στην κατηγορία Permissions μόνο την εντολή
Admin μπορούμε να επιλέξουμε. Τέλος, επιλέγουμε το Save Editor για να σταλούν
οι προσκλήσεις.

Εικόνα 24: Δημιουργία και αποστολή πρόσκλησης

Στην συνέχεια εμφανίζεται το παρακάτω παράθυρο διαλόγου (Εικόνα 25) όπου επιλέ-
γουμε το σύνδεσμο Invitation για να στείλουμε πρόσκληση στο νέο διαχειριστή.

Εικόνα 25: Σύνδεσμος Invitation

Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 26) πρέπει να αντιγράψουμε την
διεύθυνση url και να τη στείλουμε στο νέο διαχειριστή.

11 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 26: Παράθυρο αποδοχής

1.4. Αποδοχή της πρόσκλησης στο Weebly

Αφού ολοκληρωθεί η διαδικασία των προσκλήσεων θα πρέπει οι υπόλοιποι χρήστες να
μπουν στις διευθύνσεις url που έλαβαν. Στο νέο παράθυρο διαλόγου που εμφανίζεται
(Εικόνα 27) μπορούμε να δημιουργήσουμε έναν νέο λογαριασμό με τη βοήθεια του
Facebook και Google ή να πληκτρολογήσουμε το Password που έχουμε στο Weebly
και επιλέγουμε το κουμπί Get Started.

Εικόνα 27: Διαδικασία αποδοχής

12 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 1.5. Ταυτόχρονη χρήση του Weebly

Αν επιθυμούν να εργάζονται ταυτόχρονα πολλοί “Editors/ Συντάκτες” θα πρέπει να

επιλέγουν κάθε φορά που θα εργάζονται, διότι η εφαρμογή τους επιτρέπει να εργάζο-
νται μόνο σε διαφορετικές σελίδες Ειδικότερα, θα τους εμφανίζει το ακόλουθο μήνυμα
της Εικόνας 28. Από εκεί θα επιλέξουν σε ποια σελίδα ο καθένας θα εργαστεί.

Εικόνα 28: Επιλογή σελίδας εργασίας

1.6. Δημοσίευση/ Publish της ιστοσελίδας μας

Για να εμφανίσουμε την ιστοσελίδα μας στον παγκόσμιο ιστό θα πρέπει να κάνουμε
δημοσίευση/ Publish της ιστοσελίδας μας. Από το παράθυρο Dashboard διαχείρισης
εργασιών του Weebly και το μενού επιλέγουμε το κουμπί Publish (Εικόνα 29).

Εικόνα 29: Δημοσίευση/ Publish

Στην συνέχεια από το παράθυρο διαλόγου που εμ-

φανίζεται μπορούμε να επιλέξουμε το Χ για να κλεί-
σουμε το παράθυρο και να συνεχίσουμε τη διαμόρ-
φωση της ιστοσελίδας μας. Επιπλέον μπορούμε να
επιλέξουμε το url της ιστοσελίδας μας για να δούμε
πώς εμφανίζεται στο διαδίκτυο (Εικόνα 30).

Εικόνα 30: Προεπισκόπηση της ιστοσελίδας

13 Δημιουργία λογαριασμού στο Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Τέλος, εμφανίζεται η ιστοσελίδα που δημοσιεύσαμε (π.χ. βλ. το παράδειγμα στην Ει-
κόνα 31).

Εικόνα 31: Δημοσιευμένη ιστοσελίδα

1.7. Διόρθωση/ αλλαγή της διαδικτυακής διεύθυνσης/ Domain

Μπορούμε να αλλάξουμε ή να διορθώσουμε τη διαδικτυακή διεύθυνση/ Domain της
ιστοσελίδας μας από το παράθυρο (Εικόνα 32) Dashboard διαχείρισης εργασιών του
Weebly και τη γραμμή μενού. Στα Settings και στην κατηγορία General και Site Ad-
dress επιλέγουμε το κουμπί Change για να ξεκινήσει η διαδικασία από την αρχή.

Εικόνα 32: Διαδικασία αλλαγής ή διόρθωσης της διαδικτυακής διεύθυνσης/ Domain

2. Επιλογή θέματος
Η επιλογή ενός θέματος είναι μια πολύ σημαντική διαδικασία για τη δημιουργία μιας
ιστοσελίδας. Πριν καταλήξουμε στην επιλογή θα πρέπει πρώτα να έχουμε σχεδιάσει τη

14 Επιλογή θέματος
|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 δομή που θέλουμε να έχει η ιστοσελίδα. Επιπλέον, θα πρέπει να έχουμε αποφασίσει
τον σκοπό που θα έχει καθώς και σε ποιους απευθύνεται.

2.1. Επιλογή θέματος για πρώτη φορά

Η επιλογή θέματος για πρώτη φορά για την ιστοσελίδα που θέλουμε να δημιουργή-
σουμε γίνεται με την έναρξη της δημιουργίας της (Εικόνα 33).

Εικόνα 33: Επιλογή του θέματος

Στη συνέχεια εμφανίζεται η προεπισκόπηση του θέματος/ Theme Preview (Εικόνα 34)
και επιλέγουμε το κουμπί Start Editing για να ξεκινήσουμε την επεξεργασία της ιστο-
σελίδας μας.

Εικόνα 34: Έναρξη δημιουργίας ιστοσελίδας

Στη συνέχεια εμφανίζεται το παράθυρο διαλόγου που μας ζητάει η εφαρμογή να δη-
μιουργήσουμε τη διαδικτυακή διεύθυνση/ Domain της ιστοσελίδας μας (Εικόνα 35).

Εικόνα 35: Αναζήτηση διαδικτυακής διεύθυνσης/ Domain

15 Επιλογή θέματος
|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 2.2. Αλλαγή θέματος

Πολλές φορές κατά τη διάρκεια της δημιουργίας της ιστοσελίδας μπορεί να διαπιστώ-
σουμε ότι το θέμα που έχουμε επιλέξει δεν είναι το κατάλληλο και θέλουμε να το αλ-
λάξουμε. Από το παράθυρο Dashboard διαχείρισης εργασιών του Weebly (Εικόνα 36)
και τη γραμμή μενού επιλέγουμε Theme. Από την επιλογή Change Theme ξεκινάμε τη
διαδικασία αλλαγής του θέματος.

Εικόνα 36: Διαδικασία αλλαγής θέματος

Από τη βιβλιοθήκη θεμάτων τοποθετούμε τον κέρσορα πάνω στο θέμα που επιθυμούμε
και επιλέγουμε τον σύνδεσμο Choose (Εικόνα 37).

Εικόνα 37: Επιλογή του θέματος

2.3. Μορφοποίηση ενός θέματος

Πολλές φορές θέλουμε να κάνουμε κάποιες αλλαγές στο θέμα, όπως στα χρώματα ή
να κάνουμε αλλαγές στις γραμματοσειρές. Επιπλέον, μπορούμε να κάνουμε κάποιες

16 Επιλογή θέματος
|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 αλλαγές στις ιδιότητες/ Options του θέματος. Από το παράθυρο Dashboard διαχείρισης
εργασιών του Weebly και τη γραμμή μενού επιλέγουμε Theme. Από την επιλογή
Change Fonts ξεκινάμε τη διαδικασία αλλαγής των γραμματοσειρών (Εικόνα 38).

Εικόνα 38: Διαμόρφωση χαρακτήρων και ρυθμίσεις θέματος

Προσοχή, κάθε θέμα δίνει διαφορετικές αλλαγές. Για παράδειγμα μπορεί να μη δίνει
αλλαγές χρωμάτων ή γραμματοσειρών. Οπότε πρέπει κατά την επιλογή ενός θέματος
να ερευνούμε και τις δυνατότητες που μας δίνει το θέμα (Εικόνα 39).

Εικόνα 39: Παραδείγματα θεμάτων

Προσοχή για κάθε αλλαγή που κάνουμε. Χρειάζεται να επιλέγουμε το κουμπί Publish
για να τη δημοσιοποιήσουμε.

3. Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

Με την ολοκλήρωση της διαδικασίας δημιουργίας της διαδικτυακής διεύθυνσης/ Do-
main είμαστε πλέον έτοιμοι να δημιουργήσουμε την ιστοσελίδα μας. Όλες οι εργασίες

17 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 γίνονται από το παράθυρο Dashboard διαχείρισης εργασιών του Weebly (Εικόνα 40).
Το παράθυρο Dashboard διαχείρισης εργασιών του Weebly χωρίζεται σε τρία πεδία.
Το 1ο πεδίο είναι η γραμμή μενού μαζί με το κουμπί Publish, το 2ο πεδίο είναι η περιοχή
των εργαλείων και το 3ο πεδίο είναι η περιοχή που επεξεργαζόμαστε την ιστοσελίδα
μας και κάνουμε τις αλλαγές μας.

2ο

3ο

Εικόνα 40: Dashboard διαχείρισης εργασιών του Weebly

Γραμμή μενού
Στη Γραμμή μενού έχουμε την ενότητα Build στην οποία υπάρχουν τα δομικά στοιχεία
με τα οποία «χτίζουμε» την ιστοσελίδα μας (Εικόνα 41). Αυτά τα δομικά στοιχεία τα
βλέπουμε στην περιοχή των εργαλείων. Από εκεί μπορούμε να προσθέσουμε τίτλο,
κείμενο, εικόνες (μεμονωμένες ή συλλογή) και βίντεο από το YouTube. Το πιο σημα-
ντικό απ’ όλα, είναι ότι όλα αυτά τα δομικά στοιχεία μπορούμε να τα τοποθετούμε στη
σελίδα μας, με την τεχνική σύρε και άφησε (drag & drop).

Εικόνα 41: Ενότητα Build

Επιπλέον, υπάρχει η ενότητα Pages που εδώ μπορούμε να προσθέτουμε, να αφαιρούμε
σελίδες, να τις τοποθετούμε στο μενού με τη σειρά που θέλουμε και να αλλάζουμε το
στυλ τους (Εικόνα 42).

18 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 42: Ενότητα Pages

Επίσης, στη Γραμμή Μενού υπάρχουν και οι ενότητες Theme που έχουμε αναφέρει
παραπάνω τη χρήση της, Apps που μπορούμε να πάρουμε δωρεάν εφαρμογές για την
ιστοσελίδα μας, Help που μπορούμε να μπούμε στο Support Center του Weebly για
βοήθεια και επίλυση προβλημάτων.

Μια επιπλέον βασική ενότητα της Γραμμής Μενού είναι η Settings όπου εκεί στην
κατηγορία General μπορούμε να αλλάξουμε το όνομα της διεύθυνσης της ιστοσελίδας
καθώς και το όνομά της. Στην κατηγορία SEO (Search Engines Optimization) μπο-
ρούμε να προσθέσουμε πληροφορίες για να κάνουμε τον εντοπισμό της ιστοσελίδας
μας από τις μηχανές αναζήτησης πιο εύκολα. Αυτό που χρειάζεται ιδιαίτερη προσοχή
αν θέλουμε να βρίσκουν οι χρήστες την ιστοσελίδα μας, είναι να είναι στο Off η επι-
λογή Hide site from search engines. Στην κατηγορία Editors μπορούμε να προσκαλέ-
σουμε μέσω email και άλλους συντάκτες περιεχομένου στην ιστοσελίδα μας. Στην κα-
τηγορία Blog μπορούμε να δούμε τις αναρτήσεις μας εφόσον έχουμε μια σελίδα τύπου
blog στην ιστοσελίδα μας. Επιπλέον, στη Γραμμή Μενού υπάρχει και το κουμπί Device

Switcher όπου μπορούμε να δούμε πώς θα φαίνεται η ιστοσελίδα μας και στα
Smartphone και Tablet. Τέλος, στη Γραμμή Μενού υπάρχει το κουμπί Publish που το
πατάμε όταν θέλουμε να δημοσιοποιήσουμε τις τροποποιήσεις που έχουμε δημιουργή-
σει στην ιστοσελίδα μας (Εικόνα 43).

Εικόνα 43: Γραμμή Μενού

19 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Για να επιστρέψουμε στην αρχική σελίδα του Weebly επιλέγουμε το Χ που υπάρχει
στη γραμμή μενού του Dashboard (Εικόνα 44).

Εικόνα 44: Επιστροφή στην αρχική σελίδα

3.1. Σελίδες/ Pages

Με την επιλογή του θέματος δημιουργούνται αυτόματα και οι πρώτες σελίδες της ι-
στοσελίδας μας.

3.1.1. Δημιουργία νέων σελίδων

Για να δημιουργήσουμε μια νέα σελίδα από τη Γραμμή Μενού επιλέγουμε Pages και
από την περιοχή εργαλείων επιλέγουμε το κουμπί . Στον πίνακα διαλόγου που εμ-
φανίζεται μπορούμε να διαλέξουμε το είδος της σελίδας που θέλουμε να δημιουργή-
σουμε. Η πιο συνηθισμένη μορφή που επιλέγουμε είναι η Standard Page (Εικόνα 45).

Εικόνα 45: Δημιουργία σελίδων

Μετά από την επιλογή του είδους της σελίδας εμφανίζεται ένας νέος πίνακας διαλόγου
που εκεί δίνουμε όνομα στη σελίδα που δημιουργούμε και κάνουμε ρυθμίσεις για το
Header/ Κεφαλίδες, Visibility και SEO Settings. Τέλος, επιλέγουμε τον σύνδεσμο Done
για να ολοκληρώσουμε τη διαδικασία δημιουργίας της σελίδας (Εικόνα 46).

20 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 46: Διαδικασία δημιουργίας της σελίδας

3.1.2. Διαγραφή σελίδων

Για να διαγράψουμε μια σελίδα από τη Γραμμή Μενού επιλέγουμε Pages και από την
περιοχή εργαλείων κάνουμε κλικ στη σελίδα που θέλουμε να διαγράψουμε. Από τον
πίνακα διαλόγου που εμφανίζεται, επιλέγουμε το κουμπί Delete και από το νέο παρά-
θυρο διαλόγου που εμφανίζεται επιλέγουμε πάλι το κουμπί Delete (Εικόνα 47).

Εικόνα 47: Διαδικασία διαγράφης μιας σελίδας

3.1.3. Διαμόρφωση σελίδων

Για να διαμορφώσουμε μια σελίδα, επιλέγουμε τα πεδία που θέλουμε να μορφοποιή-

σουμε ή θέλουμε να διαγράψουμε. Αν κάνουμε κλικ στο Edit Background, μπορούμε
να βάλουμε εικόνα ή να αλλάξουμε το χρώμα του πεδίου. Αν επιλέξουμε Add Layout
μπορούμε να διαλέξουμε το είδος του Layout, όπως επαφές μενού κ. ά.. Αν επιλέξουμε
Move, μπορούμε να μετακινήσουμε το πεδίο σε άλλη θέση μέσα στην ίδια σελίδα ή σε

21 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 κάποια άλλη. Τέλος, αν επιλέξουμε Delete, μπορούμε να διαγράψουμε το πεδίο (Ει-
κόνα 48).

Εικόνα 48: Διαδικασία διαμόρφωσης σελίδων

3.1.4. Διαμόρφωση του μενού της ιστοσελίδας

Για να διαμορφώσουμε το μενού της ιστοσελίδας μας θα πρέπει από τη Γραμμή Μενού
να επιλέξουμε Pages και από την περιοχή εργαλείων να βάλουμε τις σελίδες στη σειρά
που επιθυμούμε. Πάντα η αρχική σελίδα είναι στην κορυφή. Η μετακίνηση γίνεται με
την τεχνική σύρε και άφησε (drag & drop) (Εικόνα 49).

Εικόνα 49: Διαδικασία διαμόρφωσης του μενού της ιστοσελίδας

Αν επιθυμούμε να βάλουμε τη μία σελίδα μέσα σε κάποια άλλη σελίδα, τότε τη μετα-
κινούμε από κάτω της και μία θέση μέσα, σε σχέση με τη σελίδα που βρίσκεται από
πάνω (Εικόνα 50).

22 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 50: Διαδικασία δημιουργίας υπομενού

3.2. Προσθήκη περιεχομένου στις Ιστοσελίδες

Από το παράθυρο Dashboard διαχείρισης εργασιών του Weebly και την κατηγορία
Build μπορούμε να εισαγάγουμε περιεχόμενο στις ιστοσελίδες που έχουμε δημιουρ-
γήσει ή θα δημιουργήσουμε.

3.2.1. Εισαγωγή Ενότητας/ Section

Για την εισαγωγή ενότητας/ Section στη σελίδα μας μπορούμε να αξιοποιήσουμε το
εργαλείο που βρίσκεται στην περιοχή εργαλείων. Η μετακίνηση γίνεται με την τεχνική
σύρε και άφησε (drag & drop). Οπότε μπορούμε να πιάσουμε και να σύρουμε το Sec-
tion μέσα στη σελίδα μας και να το αφήσουμε στο σημείο που επιθυμούμε (Εικόνα
51).

Εικόνα 51: Διαδικασία εισαγωγής ενότητας/ Section

Στην συνέχεια εμφανίζεται ένα νέο παράθυρο διαλόγου (Εικόνα 52) που επιλέγουμε
την μορφή που επιθυμούμε να έχει η ενότητα.

23 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 52: Διαδικασία επιλογής μορφής ενότητας

3.2.2. Εισαγωγή κειμένου

Για την εισαγωγή κειμένου στη σελίδα μας μπορούμε να αξιοποιήσουμε τα εργαλεία
που βρίσκονται στην κατηγορία Basic της περιοχής εργαλείων. Αυτά είναι τα εξής:

 Title

 Text

Η μετακίνηση γίνεται με την τεχνική σύρε και άφησε (drag & drop). Οπότε μπορούμε
να πιάσουμε και να σύρουμε το Text μέσα στη σελίδα μας και να το αφήσουμε στο
σημείο που επιθυμούμε (Εικόνα 53).

Εικόνα 53: Διαδικασία εισαγωγής κειμένου

Αν θέλουμε να εισαγάγουμε κείμενο, πατάμε πάνω στο Click here to edit και πληκτρο-
λογούμε το κείμενο που επιθυμούμε (Εικόνα 54).

24 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 54: Διαδικασία πληκτρολόγησης κειμένου.

Στη συνέχεια, μπορούμε να μορφοποιήσουμε το κείμενο με τη βοήθεια της γραμμής

μορφοποίησης εργαλείων που εμφανίζεται (Εικόνα 55).

Εικόνα 55: Διαδικασία μορφοποίησης του κειμένου

3.2.3. Διαγραφή πεδίου κειμένου

Για να διαγράψουμε το πεδίο κειμένου, επιλέγουμε το Χ και από τον πίνακα διαλόγου
που εμφανίζεται, το κουμπί Delete (Εικόνα 56).

Εικόνα 56: Διαδικασία διαγράφης του πεδίου κειμένου

3.2.4. Εισαγωγή εικόνας

Για να εισαγάγουμε μια εικόνα στη σελίδα μας μπορούμε να πάρουμε το Image που
βρίσκεται στην κατηγορία Basic της περιοχής εργαλείων, να το σύρουμε μέσα στη
σελίδα μας, να το τοποθετήσουμε εκεί που επιθυμούμε και να κάνουμε κλικ στο UP-
LOAD IMAGE (Εικόνα 57).

25 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 57: Διαδικασία εισαγωγής εικόνας

Από το νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 58) επιλέγουμε Upload a
photo from your computer.

Εικόνα 58: Διαδικασία “Upload a photo from your computer”

Στη συνέχεια, βρίσκουμε και επιλέγουμε την εικόνα που επιθυμούμε (βλ. κουμπί
Open). Η εικόνα θα εμφανιστεί μέσα στη σελίδα μας (Εικόνα 59).

Εικόνα 59: Διαδικασία επιλογής εικόνας

Αν θέλουμε να επεξεργαστούμε την εικόνα, κάνουμε κλικ πάνω της και από το παρά-
θυρο διαλόγου που εμφανίζεται (Εικόνα 60), επιλέγουμε την επεξεργασία που θέλουμε
να εφαρμόσουμε. Μπορούμε να την στοιχίσουμε, να της βάλουμε σύνδεσμο/ Link ή
Caption.

26 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 60: Διαδικασία διαμόρφωσης των εικόνων

3.2.5. Δημιουργία Gallery

Για να εισαγάγουμε ένα περιεχόμενο Gallery στη σελίδα μας μπορούμε να πάρουμε το
εικονίδιο Gallery που βρίσκεται στην κατηγορία Basic της περιοχής εργαλείων, να το
σύρουμε μέσα στη σελίδα μας, να το τοποθετήσουμε εκεί που επιθυμούμε και να κά-
νουμε κλικ στο UPLOAD IMAGES (Εικόνα 61).

Εικόνα 61: Διαδικασία εισαγωγής Gallery

Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 62) επιλέγουμε Upload file from
your computer.

Εικόνα 62: Διαδικασία “Upload file from your computer”

Βρίσκουμε και επιλέγουμε τις εικόνες που επιθυμούμε και επιλέγουμε το κουμπί Open.
Οι εικόνες εμφανίζονται μέσα στη σελίδα μας (Εικόνα 63).

27 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 63: Διαδικασία επιλογής εικόνων

Αν θέλουμε να επεξεργαστούμε τις εικόνες, κάνουμε κλικ πάνω τους και από το παρά-
θυρο διαλόγου που εμφανίζεται επιλέγουμε την επεξεργασία που θέλουμε να εφαρμό-
σουμε. Μπορούμε να τους βάλουμε Caption κ.ά. (Εικόνα 64).

Εικόνα 64: Διαδικασία διαμόρφωσης των εικόνων της Gallery

3.2.6. Δημιουργία Slideshow

Για να εισαγάγουμε ένα Slideshow στη σελίδα μας μπορούμε να πάρουμε το Slideshow
που βρίσκεται στην κατηγορία Basic της περιοχής εργαλείων, να το σύρουμε μέσα στη
σελίδα μας, να το τοποθετήσουμε εκεί που επιθυμούμε, να επιλέξουμε το στυλ του
Slideshow και να επιλέξουμε το κουμπί Continue (Εικόνα 65).

28 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 65: Διαδικασία εισαγωγής Slideshow

Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 66) επιλέγουμε Upload photos
from your computer.

Εικόνα 66: Διαδικασία “Upload a photos from your computer”

Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 67) μπορούμε να επεξεργα-
στούμε τις εικόνες και τέλος πατάμε Save.

Εικόνα 67: Διαδικασία επεξεργασίας των εικόνων

Αν θέλουμε να επεξεργαστούμε το Slideshow κάνουμε κλικ επάνω του και από το παρά-
θυρο διαλόγου που εμφανίζεται επιλέγουμε την επεξεργασία που θέλουμε να εφαρμό-
σουμε (Εικόνα 68).
29 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly
|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 68: Διαδικασία επεξεργασίας του Slideshow

3.2.7. Εισαγωγή αρχείων βίντεο

Για να εισαγάγουμε ένα αρχείο βίντεο στη σελίδα μας έχουμε δύο τρόπους:

1ος Τρόπος: παίρνουμε το YouTube που βρίσκεται στην κατηγορία Media της περιοχής
εργαλείων, το σέρνουμε μέσα στη σελίδα μας και το τοποθετούμε εκεί που επιθυμούμε
(Εικόνα 69).

Εικόνα 69: Διαδικασία τοποθέτησης YouTube

Στη συνέχεια, επιλέγουμε την εικόνα που εμφανίστηκε και από το παράθυρο διαλόγου
που εμφανίζεται επικολλούμε το Url που έχουμε αντιγράψει από το YouTube (Εικόνα
70). Επιπλέον μπορούμε να κάνουμε και κάποιες ρυθμίσεις αν χρειάζεται.

Εικόνα 70: Διαδικασία επικόλλησης Url του YouTube

30 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 2ος Τρόπος: παίρνουμε το Embed Code που βρίσκεται στην κατηγορία Basic της πε-
ριοχής εργαλείων, το σέρνουμε μέσα στη σελίδα μας, το τοποθετούμε εκεί που επιθυ-
μούμε και επιλέγουμε Click to set custom HTML (Εικόνα 71).

Εικόνα 71: Διαδικασία Embed Code

Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 72), επιλέγουμε το κουμπί Edit
Custom HTML και επικολλούμε τον κώδικα του βίντεο που έχουμε αντιγράψει από το
YouTube ή άλλη ιστοσελίδα.

Εικόνα 72: Διαδικασία εφαρμογής Embed Code

Αντιγραφή κώδικα Video

Για να αντιγράψουμε τον κώδικα ενός βίντεο κάνουμε τα εξής βήματα:

 Βρίσκουμε το βίντεο που επιθυμούμε και επιλέγουμε τον σύνδεσμο ΚΟΙΝΟ-

ΠΟΙΗΣΗ. Από το παράθυρο διαλόγου που εμφανίζεται, επιλέγουμε το σύνδε-
σμο ΕΝΣΩΜΑΤΩΣΗ (Εικόνα 73).

Εικόνα 73: Διαδικασία Ενσωμάτωσης

 Στο νέο παράθυρο διαλόγου που εμφανίζεται αντιγράφουμε τον κώδικα του
βίντεο (Εικόνα 74).

31 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 74: Διαδικασία αντιγραφής του κώδικα του βίντεο

 Στην συνέχεια επικολλούμε τον κώδικα στη σελίδα μας (Εικόνα 75).

Εικόνα 75: Διαδικασία επικόλλησης του κώδικα του βίντεο

Τέλος, κάνουμε κλικ έξω από το πεδίο και εμφανίζεται το βίντεο (Εικόνα 76).

Εικόνα 76: Εμφάνιση του Βίντεο στην σελίδα

3.2.8. Εισαγωγή αρχείων Word – Pdf – Excel – PowerPoint

Για να εισαγάγουμε ένα αρχείο στη σελίδα μας παίρνουμε το File που βρίσκεται στην
κατηγορία Media της περιοχής εργαλείων, το σέρνουμε μέσα στη σελίδα μας, το τοπο-
θετούμε εκεί που επιθυμούμε και επιλέγουμε τον σύνδεσμο Click here to upload file
(Εικόνα 77).

Εικόνα 77: Διαδικασία εισαγωγής ενός αρχείου

Στο νέο παράθυρο διαλόγου που εμφανίζεται (Εικόνα 78), επιλέγουμε το κουμπί Up-
load File και στη συνέχεια το κουμπί Upload file from your computer.

32 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 78: Διαδικασία “Upload file from your computer”

Στη συνέχεια, βρίσκουμε το αρχείο που επιθυμούμε και επιλέγουμε το Open. Το αρχείο
εμφανίζεται μέσα στη σελίδα μας (Εικόνα 79).

Εικόνα 79: Διαδικασία επιλογής αρχείου

3.2.9. Εισαγωγή ενός αρχείου Word – Pdf – Excel – PowerPoint με τη βο-

ήθεια του προγράμματος Scribd
Για να εισαγάγουμε ένα αρχείο στη σελίδα μας παίρνουμε το File που βρίσκεται στην
κατηγορία Individual Elements της περιοχής εργαλείων, το σέρνουμε μέσα στη σελίδα
μας, το τοποθετούμε εκεί που επιθυμούμε και επιλέγουμε το σύνδεσμο Click here to
upload file (Εικόνες 80, 81).

33 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Εικόνα 80: Διαδικασία εισαγωγής ενός αρχείου με το Scribd

Εικόνα 81: Διαδικασία εισαγωγής ενός αρχείου με το Scribd

Στη συνέχεια, με το κουμπί Upload file from your computer, επιλέγουμε το αρχείο που
επιθυμούμε να φαίνεται στην ιστοσελίδα μας, π.χ. μια παρουσίαση (Εικόνα 82).

Εικόνα 82: Διαδικασία “Upload file from your computer”

34 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Στη συνέχεια, επιλέγουμε το αρχείο και πατάμε το κουμπί Open για να ξεκινήσει η διαδι-
κασία του Upload (Εικόνα 83).

Εικόνα 83: Διαδικασία επιλογής αρχείου

Προσοχή: Το αρχείο δεν πρέπει να είναι μεγαλύτερο από 10 MB. Στη συνέχεια, περιμέ-
νουμε να ολοκληρωθεί η διαδικασία ενσωμάτωσης του αρχείου στην ιστοσελίδα μας (Ει-
κόνα 84).

Εικόνα 84: Εμφάνιση του αρχείου με το Scribd

3.2.10. Ενσωμάτωση άλλων μικροεφαρμογών και Google Maps

Για να εισαγάγουμε μια μικροεφαρμογή π.χ. Hot Potatoes παίρνουμε το Embed Code
που βρίσκεται στην κατηγορία Basic της περιοχής εργαλείων, το σέρνουμε μέσα στη
σελίδα μας, το τοποθετούμε εκεί που επιθυμούμε και επιλέγουμε το σύνδεσμο Click to
set custom HTML. Στη συνέχεια, επικολλούμε τον κώδικα της μικροεφαρμογής που
έχουμε (Εικόνα 85).

Εικόνα 85: Διαδικασία ενσωμάτωσης άλλων μικροεφαρμογών

35 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Για να εισαγάγουμε έναν χάρτη παίρνουμε το Map που βρίσκεται στην κατηγορία
Basic της περιοχής εργαλείων, το σέρνουμε μέσα στη σελίδα μας και το τοποθετούμε
εκεί που επιθυμούμε. Εμφανίζεται ένας χάρτης και κάνουμε κλικ επάνω του (Εικόνα
86).

Εικόνα 86: Διαδικασία ενσωμάτωσης χάρτη

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

3.2.11. Ενσωμάτωση Comments/ Σχόλια

Για να εισαγάγουμε Comments/ Σχόλια στην σελίδα μας επισκεπτόμαστε πρώτα την
σελίδα https://htmlcommentbox.com/ για αντιγράψουμε τον κώδικα που θα ενσωμα-
τώσουμε στο Weebly (Εικόνα 87).

Εικόνα 87: Διαδικασία ενσωμάτωσης Comments/ Σχόλια

Στην συνέχεια ακολουθούμε τα βήματα του Quick install που μας οδηγεί η σελίδα:

1. Στη αρχή επιλέγουμε το κουμπί Log In για να ξεκινήσουμε την διαδικασία (Ει-
κόνα 88).

Εικόνα 88: Διαδικασία σύνδεσης

36 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Στην συνέχεια κάνουμε Log In μέσω των λογαριασμών του Magic Link ή Google (Ει-
κόνα 89).

Εικόνα 89: Έναρξη διαδικασίας σύνδεσης

Στο νέο παράθυρο διαλόγου που εμφανίζεται επιλέγουμε τον λογαριασμό του email
που θέλουμε να χρησιμοποιήσουμε (Εικόνα 90).

Εικόνα 90: Διαδικασία επιλογής λογαριασμού

2. Στη συνέχεια, ανοίγει το επόμενο βήμα και αντιγράφουμε τον κώδικα επιλέγο-
ντας το κουμπί Copy (Εικόνα 91).

Εικόνα 91: Διαδικασία αντιγραφής του κώδικα

37 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Τέλος, εμφανίζεται το τελευταίο βήμα που είναι προαιρετικό. Εκεί αν θέλουμε περισ-
σότερες λειτουργίες μπορούμε να κάνουμε αναβάθμιση πατώντας το κουμπί Pricing.
Η υπηρεσία αυτή δεν είναι δωρεάν (Εικόνα 92).

Εικόνα 92: Ολοκλήρωση της διαδικασίας

Τον κώδικα τον αντιγράφουμε στο Weebly κάνοντας τα εξής:

1. Ανοίγουμε το Weebly και παίρνουμε το Embed Code που βρίσκεται στην κα-
τηγορία Basic της περιοχής εργαλείων, το σέρνουμε μέσα στη σελίδα μας, το
τοποθετούμε εκεί που επιθυμούμε και επιλέγουμε τον σύνδεσμο Click to set
custom HTML. Έπειτα, επιλέγουμε το κουμπί Edit Custom HTML (Εικόνα 93).

Εικόνα 93: Διαδικασία εισαγωγής του κώδικα

2. Στο πεδίο που εμφανίζεται κάνουμε επικόλληση τον κώδικα (Εικόνα 94).

Εικόνα 94: Διαδικασία επικόλλησης του κώδικα

38 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Τέλος, κάνουμε κλικ έξω από το πεδίο και εμφανίζεται το περιεχόμενο των Comments/
Σχόλια. Για να ολοκληρωθεί η διαδικασία πατάμε το εικονίδιο της πόρτας που βρίσκε-
ται στα δεξιά (Εικόνα 95).

Εικόνα 95: Εμφάνιση των Comments/ Σχόλια

3.2.12. Εισαγωγή Κουμπιού με Link

Για να εισαγάγουμε ένα κουμπί, παίρνουμε το Button που βρίσκεται στην κατηγορία
Basic της περιοχής εργαλείων, το σέρνουμε μέσα στη σελίδα μας, το τοποθετούμε εκεί
που επιθυμούμε και επιλέγουμε τον σύνδεσμο BUTTON TEXT (Εικόνα 96).

Εικόνα 96: Διαδικασία εισαγωγής κουμπιού

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

3.2.13. Εισαγωγή εφαρμογών/ Apps

Για να εισαγάγουμε μια νέα εφαρμογή στην περιοχή των εργαλείων πατάμε Add App
(Εικόνα 97).

Εικόνα 97: Διαδικασία επιλογής εφαρμογών/ Apps

39 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.
 Στο νέο παράθυρο διαλόγου που εμφανίζεται επιλέγουμε την εφαρμογή που επιθυ-
μούμε. Στη συνέχεια, στο νέο παράθυρο διαλόγου που εμφανίζεται επιλέγουμε ADD
(Εικόνα 98).

Εικόνα 98: Διαδικασία εισαγωγής εφαρμογών/ Apps

Στο νέο παράθυρο διαλόγου που εμφανίζεται, επιλέγουμε τον σύνδεσμο Connect και
τέλος, επιλέγουμε τον σύνδεσμο Done (Εικόνα 99).

Εικόνα 99: Ολοκλήρωση της διαδικασίας εισαγωγής εφαρμογών/ Apps

Τέλος, για κάθε αλλαγή που κάνουμε, επιλέγουμε το κουμπί Publish για να δημοσιο-
ποιήσουμε τις αλλαγές.

Πηγές:
Weebly Support
https://www.weebly.com/app/help/us/en

40 Παράθυρο Dashboard διαχείρισης εργασιών του Weebly

|Εργαστήριο Πληροφορικής – Συγγραφή σημειώσεων: Κουτρομάνος, Γ. & Γεωργιάδης, Γ.